Image Comments add-on

[LittleViking]

This is a third party add-on for Numa that lets users comment on specific regions of any given map. Just open up the Image Comments section, drag a box, and enter your comment. The add-on is known not to work in Internet Explorer 7 and, being primarily Javascript, isn't guaranteed to work for your setup. If it doesn't work for you but you really want the feature, PM me and we can try to debug it. Anyone, regardless of browser and without installing anything, can view image comments on a map by going to therealn.com/numa_image_comments.php?map_id=123456

In action

Installation:

There are a few different ways to install. First is a "bookmarklet". You create a new browser bookmark with the following code as the address, and click the bookmark anytime you're on a Numa map page to enable it. This method is the easiest to set up, but has the downside of needing to click the bookmark on each page. In many cases, this is the only option I know of.
javascript:function open_ic(o) {var ic_iframe = document.createElement("iframe"); ic_iframe.setAttribute("src", "http://therealn.com/numa_image_comments ... "+username); ic_iframe.setAttribute("style", "height: 600px; width: 792px; padding: 0; margin: 20px 0 0 0; border: 0; background: url('http://static.notdot.net/numa/full/"+map_id+"') no-repeat"); ic_iframe.setAttribute("class", "image_comments"); ic_iframe.setAttribute("id", "ic_iframe"); o.parentNode.appendChild(ic_iframe); o.parentNode.removeChild(o);}; if (location.href.match("http://nmaps.net/[0-9]+")) {map_id = location.href.split("/").pop().split(".")[0]; username = document.getElementById("userinfo").firstChild.nextSibling.text; var h2s = document.getElementsByTagName("h2"); for (var i=h2s.length-1; i>=0; i--) {if (h2s[i].firstChild.text == "Comments") {comments_h2 = h2s[i]; break;}}; ic_a = document.createElement("a"); ic_a.appendChild(document.createTextNode("Image Comments")); ic_a.setAttribute("href", "#"); ic_a.setAttribute("class", "image_comments"); ic_a.setAttribute("style", "font-size: 11px; margin-left: 5px;"); ic_a.setAttribute("onclick", "open_ic(this); return false;"); var throwaway = comments_h2.appendChild(ic_a);}

Some browsers (read: Opera) let you set custom javascript for a site. Browser support like this will automatically enable the add-on for every map page you go to. If you're using Opera, save the following script to a folder on your computer. Then open an nmaps.net page, right-click, choose "Edit Site Preferences...", go to the Scripting tab, and select the folder the script is in.

image_comment.js

(1.33 KiB) Downloaded 214 times

Using the add-on:

After you click the bookmarklet, or just load the page if you have a browser-based user script, scroll to the Comments section of the map page. Next to the word Comments in the header should be a new link, "Image Comments." Click that to open the image comments section and view all the current comments. If you're logged into Numa, you can add your own comment by simply dragging a box and typing your message.


In the near future, I'll add a page that lists maps with image comments on them. (With so many maps on Numa, who knows what maps will and won't have comments on them?) Maybe someday, I'll try to make it play nice with IE. And finally, if this gets popular enough, maybe you'll see it as part of Numa by default.

Edit: Here's a preliminary listing of commented maps. Might become more integrated, or at least more styled, soon. http://therealn.com/ic_maps.php

[乳头的早餐谷物]

I love you in a decidedly non-platonic way.

[lord_day]

I love you in a decidedly non-platonic way.

I agree with her. <3

[jackass]

Can somebody give me a simplified step by step tutorial on how to do this for Internet Explorer?>

[乳头的早餐谷物]

Can somebody give me a simplified step by step tutorial on how to do this for Internet Explorer?>

"The add-on is known not to work in Internet Explorer 7"

[jackass]

Can somebody give me a simplified step by step tutorial on how to do this for Internet Explorer?>

"The add-on is known not to work in Internet Explorer 7"

How about chrome?

[Universezero]

This doesn't work properly for me. I have Firefox 3, and I can add Image Comments and everything, but it won't save any comments I make.

[LittleViking]

How about chrome?

* Copy all of this data: javascript:function open_ic(o) {var ic_iframe = document.createElement("iframe"); ic_iframe.setAttribute("src", "http://therealn.com/numa_image_comments ... "+username); ic_iframe.setAttribute("style", "height: 600px; width: 792px; padding: 0; margin: 20px 0 0 0; border: 0; background: url('http://static.notdot.net/numa/full/"+map_id+"') no-repeat"); ic_iframe.setAttribute("class", "image_comments"); ic_iframe.setAttribute("id", "ic_iframe"); o.parentNode.appendChild(ic_iframe); o.parentNode.removeChild(o);}; if (location.href.match("http://nmaps.net/[0-9]+")) {map_id = location.href.split("/").pop().split(".")[0]; username = document.getElementById("userinfo").firstChild.nextSibling.text; var h2s = document.getElementsByTagName("h2"); for (var i=h2s.length-1; i>=0; i--) {if (h2s[i].firstChild.text == "Comments") {comments_h2 = h2s[i]; break;}}; ic_a = document.createElement("a"); ic_a.appendChild(document.createTextNode("Image Comments")); ic_a.setAttribute("href", "#"); ic_a.setAttribute("class", "image_comments"); ic_a.setAttribute("style", "font-size: 11px; margin-left: 5px;"); ic_a.setAttribute("onclick", "open_ic(this); return false;"); var throwaway = comments_h2.appendChild(ic_a);}
* Open the Bookmark Manager (Tools>Bookmark Manager, or Ctrl+Shift+B)
* Choose the folder to save this in. I'd say Bookmarks Toolbar for easy access.
* Right-click, Add page..., Name it something like "Numa Image Comments", URL is the code you just copied (paste it in).
* Click OK, close the Bookmark Manager.
* Open a Numa map page, say, this one: http://nmaps.net/149848
* If your Bookmarks bar isn't showing, press Ctrl+B to display it. Then click on the Numa Image Comments bookmark you just made.
* Now, scroll to the Comments section and click the new Image Comments link in the header. A commented picture of the map should open up. If you want to add your own comments, simply drag a box, type in your message, and press Enter.

@UniverseZero: Pressing Enter after you type a comment? If you can open the image comment section at all, then you're past the biggest hurdle.

[jackass]

Thanks its working now :)

[Spawn of Yanni]

Faaaaaaaaaaaaaaaaaantastic.

Question: Does this count as a "map with a new comment", at the top of the page? If not, it should.

[mintnut]

Wow...

[NicNac14]

how about safari?

[mintnut]

It works with safari.just load the code into the URL field/box and then drag it to the bookmarks bar

[unoriginal name]

Oh God! Amazing! <3

[Pixon]

Best. Numa Add-On. Ever.

[NicNac14]

It works with safari.just load the code into the URL field/box and then drag it to the bookmarks bar

then what?...

[player_03]

Very cool. I think I'll start using this now.

I'm considering downloading GreaseMonkey to run it automatically, but I'm worried that the extensions I already have are slowing Firefox.

[LittleViking]

I'm considering downloading GreaseMonkey to run it automatically, but I'm worried that the extensions I already have are slowing Firefox.

I actually tried installing it with Greasemonkey and couldn't get it to work. I'm assuming GM has some kind of proprietary functions I don't know about (its own version of window.onload is my guess). But let me know if it works for you, and I'll look more into Greasemonkey in the future.

I also came across a bug where the Image Comments link doesn't display if a map has no text comments (because there's no Comments box at all then), so I'll fix that soon. Also planning on adding a count of a map's image comments in the browse view, next to the existing count of regular comments.

[Erik-Player]

Nice job! This is awesome. :)

[Izzy]

This doesn't seem to work in FF3. :/

[LittleViking]

Definitely works in my Firefox 3. I'll post another step-by-step to see if it helps. It's possible it won't work for you - Javascript is pretty touchy - but we can try to figure it out first.

Firefox 3
* Copy all of this data: javascript:function open_ic(o) {var ic_iframe = document.createElement("iframe"); ic_iframe.setAttribute("src", "http://therealn.com/numa_image_comments ... "+username); ic_iframe.setAttribute("style", "height: 600px; width: 792px; padding: 0; margin: 20px 0 0 0; border: 0; background: url('http://static.notdot.net/numa/full/"+map_id+"') no-repeat"); ic_iframe.setAttribute("class", "image_comments"); ic_iframe.setAttribute("id", "ic_iframe"); o.parentNode.appendChild(ic_iframe); o.parentNode.removeChild(o);}; if (location.href.match("http://nmaps.net/[0-9]+")) {map_id = location.href.split("/").pop().split(".")[0]; username = document.getElementById("userinfo").firstChild.nextSibling.text; var h2s = document.getElementsByTagName("h2"); for (var i=h2s.length-1; i>=0; i--) {if (h2s[i].firstChild.text == "Comments") {comments_h2 = h2s[i]; break;}}; ic_a = document.createElement("a"); ic_a.appendChild(document.createTextNode("Image Comments")); ic_a.setAttribute("href", "#"); ic_a.setAttribute("class", "image_comments"); ic_a.setAttribute("style", "font-size: 11px; margin-left: 5px;"); ic_a.setAttribute("onclick", "open_ic(this); return false;"); var throwaway = comments_h2.appendChild(ic_a);}
* Open the Bookmark Library (Bookmarks>Organize Bookmarks..., or Ctrl+Shift+B)
* Choose the folder to save this in. I'd say Bookmarks Toolbar for easy access.
* Right-click, New bookmark..., Name it something like "Numa Image Comments", URL is the code you just copied (paste it in).
* Click OK, close the Bookmark Library.
* Open a Numa map page, say, this one: http://nmaps.net/149848
* If your Bookmarks bar isn't showing, go to View>Toolbars>Booksmarks Toolbar to show it. Then click on the Numa Image Comments bookmark you just made.
* Now, scroll to the Comments section and click the new Image Comments link in the header. A commented picture of the map should open up. If you want to add your own comments, simply drag a box, type in your message, and press Enter.

[kkstrong]

amazing idea, I would love to see this integrated.

[sidke]

I went ahead and modified it so that it appears even on maps without comments.
Installation is still the same way, and it doesn't interfere at all with LV's original code (regarding maps /with/ comments).

javascript:function open_ic(o) {var ic_iframe = document.createElement("iframe");ic_iframe.setAttribute("src","http://therealn.com/numa_image_comments ... "+username);ic_iframe.setAttribute("style","height: 600px; width: 792px; padding: 0; margin: 20px 0 0 0; border: 0; background: url('http://static.notdot.net/numa/full/"+map_id+"') no-repeat");ic_iframe.setAttribute("class","image_comments");ic_iframe.setAttribute("id","ic_iframe");o.parentNode.appendChild(ic_iframe);o.parentNode.removeChild(o);}if (location.href.match("http://nmaps.net/[0-9]+")) {map_id = location.href.split("/").pop().split(".")[0];username = document.getElementById("userinfo").firstChild.nextSibling.text;var h2s = document.getElementsByTagName("h2");for (var i=h2s.length-1; i>=0; i--) {if (h2s[i].firstChild.text == "Comments") {comments_h2 = h2s[i];break;}}if (i < 0){push_div = document.getElementById("push");parent_div = push_div.parentNode;target_div = push_div.previousSibling;target_div = target_div.previousSibling;var _div = document.createElement('div');_div.setAttribute("class","section");var _h2 = document.createElement('h2');_h2.innerHTML = "Comments";_div.appendChild(_h2);parent_div.insertBefore(_div, target_div);comments_h2 = _h2;}ic_a = document.createElement("a");ic_a.appendChild(document.createTextNode("Image Comments"));ic_a.setAttribute("href", "#");ic_a.setAttribute("class", "image_comments");ic_a.setAttribute("style", "font-size: 11px; margin-left: 5px;");ic_a.setAttribute("onclick", "open_ic(this); return false;");var throwaway = comments_h2.appendChild(ic_a);}