EditSectionsPlugin + FoldHeadingsPlugin

[Craig in Calgary]

Is there any way to implement both plugins simultaneously? Right now the <<foldHeadings>> clickable region covers the <<editSections>> "edit..." button. The "edit..." button is visible but selecting it only fires the <<foldHeadings>> event. As opposed the the "edit..." link being immediately to the right of the heading text, could it be moved to the right of "more..." label or to the left of the heading text (with a negative margin-left)? Maybe a hack involving embedding in a table could be made to work but that certainly wouldn't be elegant. Suggestions? Thanks.

[Craig in Calgary]

Put another way: my goal is to be able to expand/collapse headings AND edit each heading as a section. I prefer to manage fewer tiddlers so each tends to contain a lot of content. I prefer to edit small chunks of content in a single tiddler. These preferences are mutually exclusive. I currently use NestedSliderPlugin for expand/collapse of large sections of content (sometimes inline, sometimes embedded (smaller) tiddlers) but EditSectionsPlugin doesn't see any content for a section that is wrapped within NestedSliderPlugin. Mystery, conundrum, enigma, etc.

[Måns]

Hi Craig

I made my own way around not being able to style the foldheadings-
thing:
EditSectionPlugin + FoldheadingsPlugin and SectionLinksPlugin (most
notably the toc-feature)

I expanded the SectionToc with EditSection macros like this:
config.macros.sectionTOC = {
targetClass: 'sectionTOC',
handler:
function(place,macroName,params,wikifier,paramString,tiddler) {
var out=[];
var targetClass=params[0]||this.targetClass;
var t=story.findContainingTiddler(place); if (!t) return;
var elems=t.getElementsByTagName('*');
var level=5; // topmost heading level
for (var i=0; i<elems.length; i++) {
var txt=getPlainText(elems[i]).trim();
var link='[['+txt+'|##'+txt+']] <<editSection [[##'+txt+']]
[[✏]]>>';
switch(elems[i].nodeName) {
case 'H1': out.push('#'+link); level=1; break;
case 'H2': out.push('##'+link); level=level<2?level:2; break;
case 'H3': out.push('###'+link); level=level<3?level:3; break;
case 'H4': out.push('####'+link); level=level<4?level:4; break;
case 'H5': out.push('#####'+link); level=level<5?level:5; break;
default: if (hasClass(elems[i],targetClass)) var target=elems[i];
}
}
// trim excess bullet levels
if (level>1) for (var i=0; i<out.length; i++)
out[i]=out[i].substr(level-1);
// show numbered list
if (out.length && target) {
if (target.style.display=='none') target.style.display='block';
wikify(out.join('\n'),target);
}
}
}

In a tiddler tagged with systemconfig...

Example:
http://puppy.tiddlyspace.gir.dk/#[[clone%20bootable%20USB%20stick]]

You'll have to find a way to invoke a fake editmode to actually see
the editSection buttons in the TOC...

Cheers Måns Mårtensson

[Craig in Calgary]

Måns,

Thank you for your suggestion.

I spent several hours working with your code to fashion a suitable solution. It works. However my layout doesn't have room for a dedicated space for a TOC. I have crafted a tolerable solution using FoldHeadingsPlugins and EditTiddlerPlugin and excluding EditSectionsPlugin (it is problematic for me). I am settling on having more tiddlers than I want but getting to them when embedded in other tiddlers isn't too bad. Just below the heading block I floatright an {{{<<editTiddler...>>>}}} which is in the embedded tiddler, not the container tiddler. All my tiddlers have a transclusion at the top which takes the tiddler title and optionally a description and expand/collapse flag for embedding collapsible sections. The transclusion renders the floatright as well as some other things. So I can have a container tiddler which contains:
!Heading
<<tiddler [[sub-tiddler1]]>>
!Another Heading
<<tiddler [[sub-tiddler2]]>>
<<foldHeadings open>>
and I ready to go.

Again, thank you for your feedback. Take care. Craig

[Måns]

Hi Craig

I made a little compilation of plugins and a TocEdit toolbarcommand
here:

http://edittoc.tiddlyspot.com/

Maybe it solves "the missing space problem" ??

Try it out..

Cheers Måns Mårtensson

[Måns]

Eric has updated SectionLinksPlugin (current 1.4.2)..
Now you can style the TOC any way you want...
Check it out...

Thanks Eric :-)

Cheers Måns Mårtensson

[G.J.Robert]

Can we change either

• FoldHeadingsPlugin, to allow configuration whether to make the whole heading element or just the "show/hide" button clickable/expandable

or

• EditSectionPlugin, to make the edit button a separate element outside the heading so to avoid being covered by the FoldHeadings onclick event?

I found the workarounds not so feasible for me because I may have a lot of headings in a tiddler, and a TOC with edit buttons may be too cumbersome.

Any help? Thanks a lot!

Craig in Calgary於 2012年4月13日星期五UTC+8上午7時17分26秒寫道：

[G.J.Robert]

Hi Eric,

Below is a proposed proof-of-concept snippet for EditSectionPlugin, to put the edit section button in a separate div outside the heading, so not to be covered by the fold heading onclick event:
----
// // EDIT SECTIONS MACRO
//{{{
config.macros.editSections = {
    label: 'edit...',
    tip: 'edit this section',
    command: '~~<<editSection [[##%0]] "%1" "%2">>~~',
    //GJRobert Ciang: insertAfter function from http://snipplr.com/view/2107/insertafter-function-for-the-dom/
    insertAfter: function (newElement,targetElement) {
        //target is what you want it to go after. Look for this elements parent.
        var parent = targetElement.parentNode;

        //if the parents lastchild is the targetElement...
        if(parent.lastchild == targetElement) {
            //add the newElement after the target element.
            parent.appendChild(newElement);
            } else {
            // else the target has siblings, insert the new element between the target and it's next sibling.
            parent.insertBefore(newElement, targetElement.nextSibling);
            }
    },
    handler: function(place,macroName,params,wikifier,paramString,tiddler) {
        if (readOnly) return;
        var elems=place.parentNode.getElementsByTagName("*");
        for (var i=0; i<elems.length; i++) { var e=elems[i]; // for each heading element
            if (!['H1','H2','H3','H4','H5'].contains(e.nodeName)) continue;
            var section=e.textContent;
            var label=(params[0]||this.label).format([section]);
            var tip  =(params[1]||this.tip  ).format([section]);
            var btn = document.createElement("div"); //Added by GJRobert Ciang
            btn.setAttribute("class","editSectionBtn"); //Added by GJRobert Ciang
            this.insertAfter(btn,e); //Added by GJRobert Ciang
//            e.parentNode.insertBefore(btn,e); //Added by GJRobert Ciang
            wikify(this.command.format([section,label,tip]),btn); //Modified by GJRobert Ciang, using a separate "btn" as the container instead of "e" (the heading element)
        }       
    }
}

//G.J.Robert Ciang
setStylesheet (
".editSectionBtn {float: right;}\n"+
"\n","editSectionButtonStyles");
//}}}
----
Right now I can only insert the button after the heading element, and make it float to right. When I wanted to insert them before the headings, TW would hang. Perhaps the buttons draw the content of the element right after it so there would be indefinite loops (I'm not sure).

The snippet above can make <<editSection>> and <<foldHeadings>> announcements both effective in tiddler contents. But one limitation: if we put editSection macro in ViewTemplate directly to affect *every* tiddler by default, the title of the headings would be appended with the "fold" texts, and also the content of sections would be hidden.

Again, this is very immature and ugly so feel free to treat it in any way.

Cheers,
G.J.Robert Ciang

G.J.Robert於 2012年10月22日星期一UTC+8上午11時27分50秒寫道：