Skip to content

Loading…

Adding auto ajax preview to editing #40

Closed
wants to merge 16 commits into from

6 participants

@jthoenes

Hello Andi,

thank you for your work of dokuwiki - we are really enjoying it!

We did a little extension to automatically render the preview via the ajax request which is issued by the locktimer. The feature is configurable in ACP and is switched off by default.

Kind regards
Lukasz Burdzanowski
Johannes Thönes

Lukasz Burdz... added some commits
Lukasz Burdzanowski and Johannes Thönes Make ajax_lock return JSON instead of plain text
In preparation of the ajax auto-preview, we make the return value
of the ajax_lock method a JSON hash/array, so it can return more
than one named value.

Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
87dd194
Lukasz Burdzanowski and Johannes Thönes Using JSON result in locktimer.refreshed
As the ajax_lock now returns a JSON result, it needs to be
parsed and evaluated.

Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
cf43482
Lukasz Burdzanowski and Johannes Thönes Add id preview__area to preview div
The preview div, needs to be selectable via JavaScript. It is now
accessable via the id 'preview__area'.

Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
281a840
Lukasz Burdzanowski and Johannes Thönes Change locktimer event from 'keypress' to 'keyup'
If showing a preview, it seems more sensible to use the 'keyup'
JavaScript event instead of 'keypress', because then the last
entered letter is included in the text send to the server.
We checked http://www.quirksmode.org/dom/events/index.html for
browser compatibility.

Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
34ccbb2
Lukasz Burdzanowski and Johannes Thönes Add an option 'autopreview'.
To be able do enable (and disable) the automatic
rendering of the Preview via AJAX, we introduce an option
in dokuwiki.php which defaults to off (0).

Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
b0c4ab0
Lukasz Burdzanowski and Johannes Thönes Always show preview area if 'autopreview' is on
Because the AJAX request needs space to render the preview,
the preview area div is shown - if 'autopreview' is enabled -
in the 'edit' and the 'recover' action.

Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
ef50ed3
Lukasz Burdzanowski and Johannes Thönes Do not scroll to preview area on edit or recover
Because the 'scroll__here' was added to the output, the page did automatically
jump to the preview, even if edit was clicked. This behaviour is now turned
of by an additional parameter of html_show(...).

Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
671498d
Lukasz Burdzanowski and Johannes Thönes Adding preview HTML to the JSON result
Adding the rendered wikitext as xhtml to the JSON result
of ajax_lock() to be able to render the preview.

Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
78f1331
Lukasz Burdzanowski and Johannes Thönes Show preview automatically
Render the preview from the JSON result, if present.
So on key up, a live preview of the actual edited wikitext is shown.

Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
ebe7deb
Lukasz Burdzanowski and Johannes Thönes Added datetime as preview status to JSON result.
Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
f3cae88
Lukasz Burdzanowski and Johannes Thönes Add div for display of preview status (datetime)
Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
b0b8784
Lukasz Burdzanowski and Johannes Thönes Added style for preview update status div
Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
ae5c7c3
Lukasz Burdzanowski and Johannes Thönes Display of preview status (datetime) in locktimer
Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
587885f
Lukasz Burdzanowski and Johannes Thönes Adding configuration metadata for auto-preview.
Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
b654df1
Lukasz Burdzanowski and Johannes Thönes Auto preview configuration localization for English
Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
460df56
Lukasz Burdzanowski and Johannes Thönes Auto preview configuration localization for German and Polish
Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
e927d6a
@lupo49

I can't figure out the preview re-rendering interval, it refreshes the preview at some time but I can't recognize a pattern. Is it triggered by a key press/time duration? (Testes with FF 4.0)

@jthoenes

Hello,

the preview is refreshed when the locktimer is triggered. This happens after a "keyup" event occured every 30 seconds. For testing we did decrease the locktimer to fire every second. See lib/scripts/locktimer.js line 73 for the actual value.

Kind regards
Johannes

@lupo49

Is it possible to bundle such functions inside a plugin?

@jthoenes

I cannot tell for sure - I will investigate this and come back to you.

@adrianheine adrianheine pushed a commit to adrianheine/dokuwiki that referenced this pull request
@akate akate issue #40 image resized in all diff views 69143ff
@splitbrain
Owner

The referenced commits were merged from a different repository. But I keep this closed as I agree with lupo49, this would be better fitted for a plugin.

@lupo49 lupo49 pushed a commit that referenced this pull request
@splitbrain Merge remote-tracking branch 'localtemplate/initial_commit_from_start…
…er' into new-template

* localtemplate/initial_commit_from_starter: (159 commits)
  moved files to template hierarchy for merging with core
  deleted obsolete files
  added styles for screen resolutions between 480 and 768px (#26)
  minor improvements
  improved minor edits in recent changes
  increased site width a bit (#45)
  fixed search input issue caused by previous commit
  improved search box and action dropdown spacing in mobile view
  made large tables scrollable (fixes #40)
  typo
  added includes for sidebar header and footer (closes #41) and moved page header and footer inside .page div
  toned down active colour of pagetools a bit (#22)
  changed link colours (#22)
  removed outline from links (focus and active states are set differently anyway)
  added license for pagetool icons
  remove bold from link to current page inside the main content (closes #31)
  removed needless relative position on content (fixes #35)
  initialize variable
  first attempt to fix media queries on modern smartphones
  fixed logo size setting. closes #36
  ...
8e86529
@Klap-in Klap-in referenced this pull request
Open

Show preview using AJAX #815

@AndreWin

Hello!
Please help me to understand: I see that there was some patches that allowed to turn on autopreview on dokuwiki. For example in conf/dokuwiki.php was:

+$conf['autopreview'] = 0;                //automatically renders preview of the current edited text (0|1)

I don't see these patches in the latest code of dokuwiki. Why?

@Klap-in
Collaborator

It is, maybe accidently, closed by @selfthinker at 6 February 2012 from a not related commit....

Reopen?

@Klap-in
Collaborator

Edit: I see note of @splitbrain about closing it. Better implement this as plugin. Therefore it is never merged.

@AndreWin

Yes, reopen this ticket please.

@AndreWin

I didn't find plugin for live preview....

@AndreWin

I'm working on system based on dokuwiki in which engineers can write algoritms for technical calculations. Not all enginners work on comuper well. So live preview (feature of plugin) will make their work much more easier.

@Klap-in
Collaborator

More recent discussion is in this issue: #815

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 25, 2011
  1. @jthoenes

    Make ajax_lock return JSON instead of plain text

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    In preparation of the ajax auto-preview, we make the return value
    of the ajax_lock method a JSON hash/array, so it can return more
    than one named value.
    
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  2. @jthoenes

    Using JSON result in locktimer.refreshed

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    As the ajax_lock now returns a JSON result, it needs to be
    parsed and evaluated.
    
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  3. @jthoenes

    Add id preview__area to preview div

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    The preview div, needs to be selectable via JavaScript. It is now
    accessable via the id 'preview__area'.
    
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  4. @jthoenes

    Change locktimer event from 'keypress' to 'keyup'

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    If showing a preview, it seems more sensible to use the 'keyup'
    JavaScript event instead of 'keypress', because then the last
    entered letter is included in the text send to the server.
    We checked http://www.quirksmode.org/dom/events/index.html for
    browser compatibility.
    
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  5. @jthoenes

    Add an option 'autopreview'.

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    To be able do enable (and disable) the automatic
    rendering of the Preview via AJAX, we introduce an option
    in dokuwiki.php which defaults to off (0).
    
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  6. @jthoenes

    Always show preview area if 'autopreview' is on

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    Because the AJAX request needs space to render the preview,
    the preview area div is shown - if 'autopreview' is enabled -
    in the 'edit' and the 'recover' action.
    
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  7. @jthoenes

    Do not scroll to preview area on edit or recover

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    Because the 'scroll__here' was added to the output, the page did automatically
    jump to the preview, even if edit was clicked. This behaviour is now turned
    of by an additional parameter of html_show(...).
    
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  8. @jthoenes

    Adding preview HTML to the JSON result

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    Adding the rendered wikitext as xhtml to the JSON result
    of ajax_lock() to be able to render the preview.
    
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  9. @jthoenes

    Show preview automatically

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    Render the preview from the JSON result, if present.
    So on key up, a live preview of the actual edited wikitext is shown.
    
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  10. @jthoenes

    Added datetime as preview status to JSON result.

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  11. @jthoenes

    Add div for display of preview status (datetime)

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  12. @jthoenes

    Added style for preview update status div

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  13. @jthoenes

    Display of preview status (datetime) in locktimer

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  14. @jthoenes

    Adding configuration metadata for auto-preview.

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  15. @jthoenes

    Auto preview configuration localization for English

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
  16. @jthoenes

    Auto preview configuration localization for German and Polish

    Lukasz Burdzanowski and Johannes Thönes committed with jthoenes
    Signed-off-by: Johannes Thönes <johannes.thoenes@googlemail.com>
This page is out of date. Refresh to see the latest.
View
1 conf/dokuwiki.php
@@ -95,6 +95,7 @@
// bz2 generates smaller files, but needs more cpu-power
$conf['cachetime'] = 60*60*24; //maximum age for cachefile in seconds (defaults to a day)
$conf['locktime'] = 15*60; //maximum age for lockfiles (defaults to 15 minutes)
+$conf['autopreview'] = 0; //automatically renders preview of the current edited text (0|1)
$conf['fetchsize'] = 0; //maximum size (bytes) fetch.php may download from extern, disabled by default
$conf['notify'] = ''; //send change info to this email (leave blank for nobody)
$conf['registernotify'] = ''; //send info about newly registered users to this email (leave blank for nobody)
View
8 inc/html.php
@@ -213,7 +213,7 @@ function html_btn($name,$id,$akey,$params,$method='get',$tooltip='',$label=false
*
* @author Andreas Gohr <andi@splitbrain.org>
*/
-function html_show($txt=null){
+function html_show($txt=null, $scroll=TRUE){
global $ID;
global $REV;
global $HIGH;
@@ -227,14 +227,16 @@ function html_show($txt=null){
if (!is_null($txt)){
//PreviewHeader
- echo '<br id="scroll__here" />';
+ if($scroll)
+ echo '<br id="scroll__here" />';
echo p_locale_xhtml('preview');
- echo '<div class="preview">';
+ echo '<div id="preview__area" class="preview">';
$html = html_secedit(p_render('xhtml',p_get_instructions($txt),$info),$secedit);
if($INFO['prependTOC']) $html = tpl_toc(true).$html;
echo $html;
echo '<div class="clearer"></div>';
echo '</div>';
+ echo '<div id="preview__status"/>';
}else{
if ($REV) print p_locale_xhtml('showrev');
View
3 inc/template.php
@@ -55,6 +55,7 @@ function tpl_content_core(){
global $SUF;
global $SUM;
global $IDX;
+ global $conf;
switch($ACT){
case 'show':
@@ -65,6 +66,8 @@ function tpl_content_core(){
case 'edit':
case 'recover':
html_edit();
+ if($conf['autopreview'])
+ html_show($TEXT, FALSE);
break;
case 'preview':
html_edit();
View
10 lib/exe/ajax.php
@@ -130,6 +130,8 @@ function ajax_lock(){
lock($id);
echo 1;
}
+
+ $json_array = array();
if($conf['usedraft'] && $_POST['wikitext']){
$client = $_SERVER['REMOTE_USER'];
@@ -144,9 +146,15 @@ function ajax_lock(){
);
$cname = getCacheName($draft['client'].$id,'.draft');
if(io_saveFile($cname,serialize($draft))){
- echo $lang['draftdate'].' '.dformat();
+ $json_array['draft_message'] = $lang['draftdate'].' '.dformat();
}
}
+ if($conf['autopreview'] && $_POST['wikitext']){
+ $json_array['preview_html'] = p_render('xhtml', p_get_instructions($_POST['wikitext']), $info);
+ $json_array['preview_status'] = dformat();
+ }
+
+ echo json_encode($json_array);
}
View
1 lib/plugins/config/lang/de-informal/lang.php
@@ -98,6 +98,7 @@
$lang['autoplural'] = 'Bei Links automatisch nach vorhandenen Pluralformen suchen';
$lang['compression'] = 'Komprimierungsmethode für alte Seitenrevisionen';
$lang['cachetime'] = 'Maximale Cachespeicherung (Sekunden)';
+$lang['autopreview'] = 'Automatische Vorschau des aktuellen Entwurfs anzeigen';
$lang['locktime'] = 'Maximales Alter für Seitensperren (Sekunden)';
$lang['fetchsize'] = 'Maximale Größe (in Bytes), die fetch.php von extern herunterladen darf';
$lang['notify'] = 'Sende Änderungsbenachrichtigungen an diese E-Mail-Adresse.';
View
1 lib/plugins/config/lang/de/lang.php
@@ -108,6 +108,7 @@
$lang['autoplural'] = 'Bei Links automatisch nach vorhandenen Pluralformen suchen';
$lang['compression'] = 'Komprimierungsmethode für alte Seitenrevisionen';
$lang['cachetime'] = 'Maximale Cachespeicherung (Sekunden)';
+$lang['autopreview'] = 'Automatische Vorschau des aktuellen Entwurfs anzeigen';
$lang['locktime'] = 'Maximales Alter für Seitensperren (Sekunden)';
$lang['fetchsize'] = 'Maximale Größe (in Bytes), die fetch.php von extern herunterladen darf';
$lang['notify'] = 'Änderungsmitteilungen an diese E-Mail-Adresse versenden';
View
1 lib/plugins/config/lang/en/lang.php
@@ -120,6 +120,7 @@
$lang['autoplural'] = 'Check for plural forms in links';
$lang['compression'] = 'Compression method for attic files';
$lang['cachetime'] = 'Maximum age for cache (sec)';
+$lang['autopreview'] = 'Automatically rendering of preview of the current draft';
$lang['locktime'] = 'Maximum age for lock files (sec)';
$lang['fetchsize'] = 'Maximum size (bytes) fetch.php may download from extern';
$lang['notify'] = 'Send change notifications to this email address';
View
1 lib/plugins/config/lang/pl/lang.php
@@ -103,6 +103,7 @@
$lang['autoplural'] = 'Automatyczne tworzenie liczby mnogiej';
$lang['compression'] = 'Metoda kompresji dla usuniętych plików';
$lang['cachetime'] = 'Maksymalny wiek cache w sekundach';
+$lang['autopreview'] = 'Automatyczny podgląd edytowanej treści';
$lang['locktime'] = 'Maksymalny wiek blokad w sekundach';
$lang['fetchsize'] = 'Maksymalny rozmiar pliku (w bajtach) jaki można pobrać z zewnątrz';
$lang['notify'] = 'Wysyłanie powiadomień na adres e-mail';
View
1 lib/plugins/config/settings/config.metadata.php
@@ -154,6 +154,7 @@
$meta['subscribe_time'] = array('numeric');
$meta['locktime'] = array('numeric');
$meta['cachetime'] = array('numeric');
+$meta['autopreview'] = array('onoff');
$meta['_links'] = array('fieldset');
$meta['target____wiki'] = array('string');
View
14 lib/scripts/locktimer.js
@@ -31,7 +31,7 @@ var locktimer = {
locktimer.sack.onCompletion = locktimer.refreshed;
// register refresh event
- addEvent($('dw__editform'),'keypress',function(){locktimer.refresh();});
+ addEvent($('dw__editform'),'keyup',function(){locktimer.refresh();});
// start timer
locktimer.reset();
},
@@ -92,9 +92,17 @@ var locktimer = {
refreshed: function(){
var data = this.response;
var error = data.charAt(0);
- data = data.substring(1);
+ data = JSON.parse(data.substring(1));
- $('draft__status').innerHTML=data;
+ if(data.draft_message){
+ $('draft__status').innerHTML=data.draft_message;
+ }
+ if(data.preview_html){
+ $('preview__area').innerHTML=data.preview_html;
+ }
+ if(data.preview_status){
+ $('preview__status').innerHTML=data.preview_status;
+ }
if(error != '1') return; // locking failed
locktimer.reset();
}
View
2 lib/tpl/default/design.css
@@ -172,7 +172,7 @@ div.dokuwiki div#wiki__editbar div.summary {
div.dokuwiki .nowrap {
white-space: nowrap;
}
-div.dokuwiki div#draft__status {
+div.dokuwiki div#draft__status, div.dokuwiki div#preview__status {
float: right;
color: __text_alt__;
}
Something went wrong with that request. Please try again.