I want to be able to click on an image and see a popup of a tiddler instead
of opening a tiddler (using Eric's ImageMapPlugin)
after combing through the code for the plugin ...
(see my interpretation in comments below - included for people searching
for similar things (hopefully I'm not too far off))
...I've tentatively come to the conclusion that I need to replace this:
story.displayTiddler(story.findContainingTiddler(this),this.getAttribute('tiddler'));
with something similar but more like "story.displayTiddlerPopup", or maybe
something that uses the word "panel" as that seems to be what
nestedSliderPlugin uses for popups
I also tried replacing
createTiddlyElement(place,'span').innerHTML=out.join('');
with this:
createTiddlyElement(place,"div",null,"sliderPanel",null).innerHTML=out.join('');
but, suprisingly, it didn't change the functioning of the plugin at all.
My other idea is maybe I can wikify something to use the +++^* <<tiddler
[[tiddler title]]\>\>=== syntax
Can anyone give me a hint or tell me where to look for the appropriate
information for this? (tiddlywiki.org didn't help)
Thanks,
Dave
----------------------------------------------------
config.macros.imageMap = {
handler: function(place,macroName,params,wikifier,paramString,tiddler) {
// image element must immediately precede macro
var img=place.lastChild;
// img = the name of the tiddler that's hooked up to that part of the
image??
// last child maybe the last thing that the hovering picked up before the
click?
if (!img||img.nodeName!='IMG') return;// if there's nothing there then
abort the code
var map=params[0];
// map = the name of the tiddler you supplied in the macro (0 = the first
parameter)
// in my case its "ComplaintMapMap"
var items=store.getTiddlerText(map,'').split('\n----\n'); if (!items)
return;
// items = the array of links and coordinates
// (the "split" makes it into an array, not a variable)
var out=['<MAP NAME="'+map+'">'];
// out = the array you end up with that gets turned into a variable and
// created into an element you can see on the screen when you click (gets
added to throughout)
// seems to be the html "MAP" tag that has to do with images in a browser
var fmt='<AREA SHAPE="POLY" TIDDLER="%0" COORDS="%1" TITLE="%2" ALT="%2"
ONCLICK="%3" STYLE="%4">';
// fmt = the format template that later shapes the final "out" variable
when
// placeholders are replaced with the parameters provided
// "AREA" is also an html tag that works with the "MAP" tag
var
click="story.displayTiddler(story.findContainingTiddler(this),this.getAttribute('tiddler'));";
// click = the action to take when the area is clicked, ie "display the
tiddler in question"
var style='cursor:pointer';
// style = the string that describes what cursor type to pay attention to
with
// regards to the map overlay that is described later
for (var i=0; i<items.length; i++) {
var lines=items[i].split('\n');
// lines = each individual item in the array gone through one at a time
and
// split by the line feed or carriage return into the tiddler name and
coordinates line
var tid=lines.shift(); // uses the first element of array (the tiddler
name) (and removes it from array)
var coords=lines.join('');// not sure why you'd join the rest of the array
into a single
// string seeing as its already a single line ??
var tip=store.tiddlerExists(tid)?store.getTiddler(tid).getSubtitle():tid;
// tip = the name of the tiddler (to use as a tool tip presumably)
// not sure whats supposed to happen if the tiddler doesn't exist
out.push(fmt.format([tid,coords,tip,click,style]));
// "push" adds an element to an array. In the for/next loop when it finds
(somehow)
// the right item in the item array it pushes the tiddler name (from the
list), the
// coordinates, the tooltip, the click action, and the style into the "out"
array
}// end of the for next loop
out.push('</MAP>');
// the final "out" variable might look like this:
// <MAP NAME="Right Ear"><AREA SHAPE="POLY" TIDDLER="Right Ear"
COORDS="58,...,94"
// TITLE="Right Ear" ALT="Right Ear" ONCLICK=
//
"story.displayTiddler(story.findContainingTiddler(this),this.getAttribute('tiddler'));"
// STYLE="cursor:pointer"></MAP>
createTiddlyElement(place,'span').innerHTML=out.join('');
// how about: createTiddlyElement(place,"div",null,"sliderPanel",null);
// I think this creates the "mouse aware" little sections over the image
and when you
// click the image in whatever spot (over the ear in this case) the
// "ONCLICK" event can then run
// the rest must have something to do with the map overlay functionality
img.setAttribute('isMap',true);
img.setAttribute('useMap','#'+map);
img.style.border=0;
}
}
--
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/tiddlywikidev.
For more options, visit https://groups.google.com/d/optout.
