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;
});
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
With 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):
- Add an Edit Chapter Icon beside each headline:
- On click via Ajax replace the chapter with an Edit area.
- 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: