bump
On Saturday, April 5, 2014 at 10:28:07 PM UTC-6, Dave Parker wrote:
>
> 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.
