In place editing of Wiki Text Chapters/#3695

Jan 7, 2007 / pixtur
Oct 8, 2011 / guest
 

Attached files

inline_edit1.png
inline_edit1.png

#3696 by pixtur, 185k
inline_edit2.png
inline_edit2.png

#3697 by pixtur, 147k
inline_edit3_preview.png
inline_edit3_preview.png

#3698 by pixtur, 117k
 

Implementation detailsπ

Involved filesπ

The inplace editing has been implemented for any kind of text information. Following elements are involved:
  • js/jeditable.js -> *
  • js/misc.js -> AjaxEdit - class
  • pages/item_ajax.inc.php -> itemLoadField()
  • pages/item_ajax.inc.php -> itemSaveField()
  • render/render_wiki/inc.php -> getOneWikiChapter(), getWikiChapters()

Ajahπ

Roughly speaking wiki texts are splitted into chapters starting at headlines. There might be an empty chapter if there is no text before the first headline. The rendered structure looks like this:

<div class="wiki editable" field_name="description" item_id=234>
  <div class="chapter">
   <h2>some headline</h2>
   text
  </div>
  <div class="chapter">
   <h2>some headline</h2>
   text
  </div>
</div>


On page load we look for <div> -elements with "wiki.editable" class and create an instance of the AjaxEdit class for each:

from js/misc.js

    /**
    * init ajaxEdits
    */
    var ajax_edits= new Array();
    $('div.wiki.editable').each(function() {
        aj= new AjaxEdit(this);
        ajax_edits.push(aj);
        this.ajax_edit= aj;
    });

Initializing jquery / jeditableπ

The AjaxEdit class calls it method AjaxEdit.initEditChapters() which goes through all chapters and assigns jeditable-handles, using the custom attributes field_name and item_id to generate links to the actual php ajax request:

POST http://localhost/streber/index.php?go=itemLoadField&item=1694&field=description&chapter=3 (261ms)

and

 POST http://localhost/streber/index.php?go=itemSaveField&item=1694&field=description&chapter=3 (361ms)

The itemSaveField function returns the complete formatted wiki text as result. Which jeditable uses to replace the original wiki text, followed by a call to AjaxEdit.initEditChapters() to refresh the jeditable handlers.

Changes to jeditableπ

To make this work we had to do some changes to the original jeditable-class by Mika Tuupola and Dylan Verheul. We added a new setting: 'chapter' which is been used to load the result of the save request into the parent element and call initEditChapters():

from js/jquery.jeditable.js

var settings= {
...
        event  : 'dblclick',
        onblur : 'ignore',
        obj    : false,
        chapter: false
}


We also have to make sure that links still work on single click:

from js/jquery.jeditable.js

    jQuery(this).attr('title', settings.tooltip);
    ....
    /* keep links inside text-blocks alive */ 
    $(this).find('a').click(function(e) {
        e.cancelBubble = true;
    });
    
    $(this).click(function(e) {
        e.cancelBubble = true;
    });
    ...

... and

        if (settings.cancel) {
            var b = document.createElement('input');
            b.type = 'button';
            b.value = settings.cancel;
            f.appendChild(b);
        }
        ...
        /* keep links inside text-blocks alive */ 
        $(b).click(function(e) {     # change
            reset();
        });


We have to check the chapter options:

from js/jquery.jeditable.js

            /* show the saving indicator */
            jQuery(self).html(options.indicator);
            if(settings.chapter) {
                
                t= settings.obj.ajax_edit;
                $.post(settings.url, p,function(str) {
                    $(settings.obj).html(str);
                    settings.obj.ajax_edit= t;
                    settings.obj.ajax_edit.initEditChapters();
                });
            }
            else {
                jQuery(self).load(settings.url, p, function(str) {
                    self.editing = false;
                    self.ajax_edit.initEditChapters();
                });
            }

from js/jquery.jeditable.js

        function reset() {
            self.innerHTML = self.revert;
            
            /* changed by pixtur */
            if(self.ajax_edit) {
                self.ajax_edit.initEditChapters();
            }
            self.editing   = false;
        };


from js/jquery.jeditable.js

            }
        }
        e.preventDefault();    # changed

    });


The editable is now initialized like this:π

from js/misc.js

            $(this).editable('index.php?go=itemSaveField&item=' + item_id + '&field=description&chapter=' + chapter_name, {
                postload:'index.php?go=itemLoadField&item=' + item_id + '&field=description&chapter=' + chapter_name,
                type:'textarea',
                submit:'Save3',
                cancel:'Cancel',
                chapter:true
            });





Original task descriptionπ

inline_edit3_preview.pngWith the current version, editing longer wiki texts is cumbersome, because you have to 1. Search the edit button, 2. In the text edit box search the chapter you just wanted to edit.
This distracts the user from what he was about to do.

I propose those changes (compare with attached mock ups):
  1. Add an Edit Chapter Icon beside each headline:
  2. On click via Ajax replace the chapter with an Edit area.
  3. On Save send changed chapter via Ajax

Tricky implementation:
  • We need some control over cascaded chapters. If you click on a headline 1 edit you will expect to edit all included headline 2 chapters.
  • We need a method to identify, extract and replace such chapters.
  • We probably need to increase the Number of versions in the Details box.
  • We need to check, weather the text already has been edited by another user and reject changes.
  • Because the wiki2html function should not nothing about user rights, we need to find a fancy method of inserting the edit links (e.g. with javascript).

Additional References:
Potty Training

7 Comments

pixtur:Party been implemented for taskView

11 years ago

For test I added a click handler to Edit Description which gets the original wiki text and constructs a simple form. Seems to work good with Firefox.

binder:yes, it "seems" ;)

11 years ago

I think, there are some problems with linebreaks, though...

please open a task with a table, and in-place-edit this text. Results in a one-line-table (although the text is displayed correctly in the in-place-edit-form and in the Edit Task form)

ganesh:A great feature!

11 years ago

I love this one! Just a little request, if possible: currently the "edit chapter" function is triggered if you click anywhere inside the chapter (except links). I find this confusing, because I keep triggering the feature inadvertently, while clicking on a link (and I miss it) or selecting text for cut&paste. Moreover, this feature interferes with the "dowload as image" feature, in fact clicking on an image always triggers "chapter edit" instead. I suggest that, while keeping the hover effect as it is (the hover is displayed whenever the mouse is over the chapter area), the "chapter edit" function should be triggered only if the click happens precisely on the "pencil" icon at the top right corner (alternatively on the H2 element containing the title).

pixtur:confirmed...

11 years ago

Yes. Especially copy & pasting is weird. But I am not sure, if only making the upper right corner sensetive is a good idea. I was saw some cool fading buttons in an ajax application. But I am still not into the jeditable stuff.

I could try to only make the upper right corner of the chapter-div sensible.

webbplatsen:Encoding problem

11 years ago

potty training:

8 years ago

Great! thanks for displaying the code like that. It made it easy to see what changes had to be made. Cheers!

guest:

7 years ago - visible as suggested -

The inplace editing has been implemented for any kind of text information. Following elements are involved: