From ddf8a04fe3281e871c5311235b08185a5ceab797 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Fri, 8 Jul 2011 12:20:02 +0200 Subject: moved some editor functions to a new dw_editor object There are probably more functions that should go in here --- lib/scripts/editor.js | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 lib/scripts/editor.js (limited to 'lib/scripts/editor.js') diff --git a/lib/scripts/editor.js b/lib/scripts/editor.js new file mode 100644 index 000000000..fbdb1d79a --- /dev/null +++ b/lib/scripts/editor.js @@ -0,0 +1,116 @@ +/** + * The DokuWiki editor features + * + * These are the advanced features of the editor. It does NOT contain any + * code for the toolbar buttons and it functions. See toolbar.js for that. + */ + +var dw_editor = { + + /** + * initialize the default editor functionality + * + * All other functions can also be called separately for non-default + * textareas + */ + init: function(){ + var editor = jQuery('#wiki__text'); + if(!editor.length) return; + + dw_editor.initSizeCtl('#size__ctl',editor); + }, + + /** + * Add the edit window size and wrap controls + * + * Initial values are read from cookie if it exists + * + * @param selector ctlarea the div to place the controls + * @param selector editor the textarea to control + */ + initSizeCtl: function(ctlarea,editor){ + var ctl = jQuery(ctlarea); + var textarea = jQuery(editor); + if(!ctl.length || !textarea.length) return; + + var hgt = DokuCookie.getValue('sizeCtl'); + if(hgt){ + textarea.css('height', hgt); + }else{ + textarea.css('height', '300px'); + } + + var wrp = DokuCookie.getValue('wrapCtl'); + if(wrp){ + dw_editor.setWrap(textarea[0], wrp); + } // else use default value + + var l = document.createElement('img'); + var s = document.createElement('img'); + var w = document.createElement('img'); + l.src = DOKU_BASE+'lib/images/larger.gif'; + s.src = DOKU_BASE+'lib/images/smaller.gif'; + w.src = DOKU_BASE+'lib/images/wrap.gif'; + jQuery(l).click(function(){dw_editor.sizeCtl(editor,100);}); + jQuery(s).click(function(){dw_editor.sizeCtl(editor,-100);}); + jQuery(w).click(function(){dw_editor.toggleWrap(editor);}); + ctl.append(l); + ctl.append(s); + ctl.append(w); + }, + + /** + * This sets the vertical size of the editbox and adjusts the cookie + * + * @param selector editor the textarea to control + * @param int val the relative value to resize in pixel + */ + sizeCtl: function(editor,val){ + var textarea = jQuery(editor); + var height = parseInt(textarea.css('height')); + height += val; + textarea.css('height', height+'px'); + DokuCookie.setValue('sizeCtl',textarea.css('height')); + }, + + /** + * Toggle the wrapping mode of the editor textarea and adjusts the + * cookie + * + * @param selector editor the textarea to control + */ + toggleWrap: function(editor){ + var textarea = jQuery(editor); + var wrap = textarea.attr('wrap'); + if(wrap && wrap.toLowerCase() == 'off'){ + dw_editor.setWrap(textarea[0], 'soft'); + }else{ + dw_editor.setWrap(textarea[0], 'off'); + } + DokuCookie.setValue('wrapCtl',textarea.attr('wrap')); + }, + + /** + * Set the wrapping mode of a textarea + * + * @author Fluffy Convict + * @author + * @link http://news.hping.org/comp.lang.javascript.archive/12265.html + * @link https://bugzilla.mozilla.org/show_bug.cgi?id=41464 + * @param DomObject textarea + * @param string wrapAttrValue + */ + setWrap: function(textarea, wrapAttrValue){ + textarea.setAttribute('wrap', wrapAttrValue); + + // Fix display for mozilla + var parNod = textarea.parentNode; + var nxtSib = textarea.nextSibling; + parNod.removeChild(textarea); + parNod.insertBefore(textarea, nxtSib); + } + + +}; + +jQuery(dw_editor.init); -- cgit v1.2.3 From 0a245976b7d2b80796b2e22956a6838fe241f59e Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Fri, 19 Aug 2011 19:35:04 +0200 Subject: renamed some variables in editor.js --- lib/scripts/editor.js | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) (limited to 'lib/scripts/editor.js') diff --git a/lib/scripts/editor.js b/lib/scripts/editor.js index fbdb1d79a..d1bfe0232 100644 --- a/lib/scripts/editor.js +++ b/lib/scripts/editor.js @@ -14,10 +14,10 @@ var dw_editor = { * textareas */ init: function(){ - var editor = jQuery('#wiki__text'); - if(!editor.length) return; + var $editor = jQuery('#wiki__text'); + if(!$editor.length) return; - dw_editor.initSizeCtl('#size__ctl',editor); + dw_editor.initSizeCtl('#size__ctl',$editor); }, /** @@ -29,20 +29,20 @@ var dw_editor = { * @param selector editor the textarea to control */ initSizeCtl: function(ctlarea,editor){ - var ctl = jQuery(ctlarea); - var textarea = jQuery(editor); - if(!ctl.length || !textarea.length) return; + var $ctl = jQuery(ctlarea); + var $textarea = jQuery(editor); + if(!$ctl.length || !$textarea.length) return; var hgt = DokuCookie.getValue('sizeCtl'); if(hgt){ - textarea.css('height', hgt); + $textarea.css('height', hgt); }else{ - textarea.css('height', '300px'); + $textarea.css('height', '300px'); } var wrp = DokuCookie.getValue('wrapCtl'); if(wrp){ - dw_editor.setWrap(textarea[0], wrp); + dw_editor.setWrap($textarea[0], wrp); } // else use default value var l = document.createElement('img'); @@ -54,9 +54,9 @@ var dw_editor = { jQuery(l).click(function(){dw_editor.sizeCtl(editor,100);}); jQuery(s).click(function(){dw_editor.sizeCtl(editor,-100);}); jQuery(w).click(function(){dw_editor.toggleWrap(editor);}); - ctl.append(l); - ctl.append(s); - ctl.append(w); + $ctl.append(l); + $ctl.append(s); + $ctl.append(w); }, /** @@ -66,11 +66,11 @@ var dw_editor = { * @param int val the relative value to resize in pixel */ sizeCtl: function(editor,val){ - var textarea = jQuery(editor); - var height = parseInt(textarea.css('height')); + var $textarea = jQuery(editor); + var height = parseInt($textarea.css('height')); height += val; - textarea.css('height', height+'px'); - DokuCookie.setValue('sizeCtl',textarea.css('height')); + $textarea.css('height', height+'px'); + DokuCookie.setValue('sizeCtl',$textarea.css('height')); }, /** @@ -80,14 +80,14 @@ var dw_editor = { * @param selector editor the textarea to control */ toggleWrap: function(editor){ - var textarea = jQuery(editor); + var $textarea = jQuery(editor); var wrap = textarea.attr('wrap'); if(wrap && wrap.toLowerCase() == 'off'){ dw_editor.setWrap(textarea[0], 'soft'); }else{ dw_editor.setWrap(textarea[0], 'off'); } - DokuCookie.setValue('wrapCtl',textarea.attr('wrap')); + DokuCookie.setValue('wrapCtl',$textarea.attr('wrap')); }, /** -- cgit v1.2.3 From bedfa6abf0ea09be1ea44de0c014d83bd57a7412 Mon Sep 17 00:00:00 2001 From: Andreas Gohr Date: Fri, 19 Aug 2011 20:09:07 +0200 Subject: moved keyhandler to the new dw_editor object --- lib/scripts/editor.js | 91 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) (limited to 'lib/scripts/editor.js') diff --git a/lib/scripts/editor.js b/lib/scripts/editor.js index d1bfe0232..6d7f9f4a8 100644 --- a/lib/scripts/editor.js +++ b/lib/scripts/editor.js @@ -18,6 +18,17 @@ var dw_editor = { if(!$editor.length) return; dw_editor.initSizeCtl('#size__ctl',$editor); + + if($editor.attr('readOnly')) return; + + // in Firefox, keypress doesn't send the correct keycodes, + // in Opera, the default of keydown can't be prevented + if (jQuery.browser.opera) { + $editor.keypress(dw_editor.keyHandler); + } else { + $editor.keydown(dw_editor.keyHandler); + } + }, /** @@ -108,6 +119,86 @@ var dw_editor = { var nxtSib = textarea.nextSibling; parNod.removeChild(textarea); parNod.insertBefore(textarea, nxtSib); + }, + + /** + * Make intended formattings easier to handle + * + * Listens to all key inputs and handle indentions + * of lists and code blocks + * + * Currently handles space, backspce and enter presses + * + * @author Andreas Gohr + * @fixme handle tabs + * @param event e - the key press event object + */ + keyHandler: function(e){ + if(e.keyCode != 13 && + e.keyCode != 8 && + e.keyCode != 32) return; + var field = e.target; + var selection = getSelection(field); + if(selection.getLength()) return; //there was text selected, keep standard behavior + var search = "\n"+field.value.substr(0,selection.start); + var linestart = Math.max(search.lastIndexOf("\n"), + search.lastIndexOf("\r")); //IE workaround + search = search.substr(linestart); + + if(e.keyCode == 13){ // Enter + // keep current indention for lists and code + var match = search.match(/(\n +([\*-] ?)?)/); + if(match){ + var scroll = field.scrollHeight; + var match2 = search.match(/^\n +[\*-]\s*$/); + // Cancel list if the last item is empty (i. e. two times enter) + if (match2 && field.value.substr(selection.start).match(/^($|\r?\n)/)) { + field.value = field.value.substr(0, linestart) + "\n" + + field.value.substr(selection.start); + selection.start = linestart + 1; + selection.end = linestart + 1; + setSelection(selection); + } else { + insertAtCarret(field.id,match[1]); + } + field.scrollTop += (field.scrollHeight - scroll); + e.preventDefault(); // prevent enter key + return false; + } + }else if(e.keyCode == 8){ // Backspace + // unindent lists + var match = search.match(/(\n +)([*-] ?)$/); + if(match){ + var spaces = match[1].length-1; + + if(spaces > 3){ // unindent one level + field.value = field.value.substr(0,linestart)+ + field.value.substr(linestart+2); + selection.start = selection.start - 2; + selection.end = selection.start; + }else{ // delete list point + field.value = field.value.substr(0,linestart)+ + field.value.substr(selection.start); + selection.start = linestart; + selection.end = linestart; + } + setSelection(selection); + e.preventDefault(); // prevent backspace + return false; + } + }else if(e.keyCode == 32){ // Space + // intend list item + var match = search.match(/(\n +)([*-] )$/); + if(match){ + field.value = field.value.substr(0,linestart)+' '+ + field.value.substr(linestart); + selection.start = selection.start + 2; + selection.end = selection.start; + setSelection(selection); + e.preventDefault(); // prevent space + return false; + } + } } -- cgit v1.2.3 From 5e7a292691951a0fa0a18f06c8b9bcfb509a032d Mon Sep 17 00:00:00 2001 From: Adrian Lang Date: Fri, 9 Sep 2011 22:26:16 +0200 Subject: Various JavaScript improvements, JSLint, jQuery --- lib/scripts/editor.js | 101 ++++++++++++++++++++++++-------------------------- 1 file changed, 49 insertions(+), 52 deletions(-) (limited to 'lib/scripts/editor.js') diff --git a/lib/scripts/editor.js b/lib/scripts/editor.js index 6d7f9f4a8..2009ce6af 100644 --- a/lib/scripts/editor.js +++ b/lib/scripts/editor.js @@ -15,11 +15,15 @@ var dw_editor = { */ init: function(){ var $editor = jQuery('#wiki__text'); - if(!$editor.length) return; + if($editor.length === 0) { + return; + } dw_editor.initSizeCtl('#size__ctl',$editor); - if($editor.attr('readOnly')) return; + if($editor.attr('readOnly')) { + return; + } // in Firefox, keypress doesn't send the correct keycodes, // in Opera, the default of keydown can't be prevented @@ -40,34 +44,30 @@ var dw_editor = { * @param selector editor the textarea to control */ initSizeCtl: function(ctlarea,editor){ - var $ctl = jQuery(ctlarea); - var $textarea = jQuery(editor); - if(!$ctl.length || !$textarea.length) return; - - var hgt = DokuCookie.getValue('sizeCtl'); - if(hgt){ - $textarea.css('height', hgt); - }else{ - $textarea.css('height', '300px'); + var $ctl = jQuery(ctlarea), + $textarea = jQuery(editor); + + if($ctl.length === 0 || $textarea.length === 0) { + return; } + $textarea.css('height', DokuCookie.getValue('sizeCtl') || '300px'); + var wrp = DokuCookie.getValue('wrapCtl'); if(wrp){ dw_editor.setWrap($textarea[0], wrp); } // else use default value - var l = document.createElement('img'); - var s = document.createElement('img'); - var w = document.createElement('img'); - l.src = DOKU_BASE+'lib/images/larger.gif'; - s.src = DOKU_BASE+'lib/images/smaller.gif'; - w.src = DOKU_BASE+'lib/images/wrap.gif'; - jQuery(l).click(function(){dw_editor.sizeCtl(editor,100);}); - jQuery(s).click(function(){dw_editor.sizeCtl(editor,-100);}); - jQuery(w).click(function(){dw_editor.toggleWrap(editor);}); - $ctl.append(l); - $ctl.append(s); - $ctl.append(w); + jQuery.each([ + ['larger', function(){dw_editor.sizeCtl(editor,100);}], + ['smaller', function(){dw_editor.sizeCtl(editor,-100);}], + ['wrap', function(){dw_editor.toggleWrap(editor);}], + ], function (_, img) { + jQuery(document.createElement('img')) + .attr('src', DOKU_BASE+'lib/images/' + img[0] + '.gif') + .click(img[1]) + .appendTo($ctl); + }); }, /** @@ -77,9 +77,8 @@ var dw_editor = { * @param int val the relative value to resize in pixel */ sizeCtl: function(editor,val){ - var $textarea = jQuery(editor); - var height = parseInt($textarea.css('height')); - height += val; + var $textarea = jQuery(editor), + height = parseInt($textarea.css('height')) + val; $textarea.css('height', height+'px'); DokuCookie.setValue('sizeCtl',$textarea.css('height')); }, @@ -91,13 +90,10 @@ var dw_editor = { * @param selector editor the textarea to control */ toggleWrap: function(editor){ - var $textarea = jQuery(editor); - var wrap = textarea.attr('wrap'); - if(wrap && wrap.toLowerCase() == 'off'){ - dw_editor.setWrap(textarea[0], 'soft'); - }else{ - dw_editor.setWrap(textarea[0], 'off'); - } + var $textarea = jQuery(editor), + wrap = $textarea.attr('wrap'); + dw_editor.setWrap($textarea[0], + (wrap && wrap.toLowerCase() == 'off') ? 'soft' : 'off'); DokuCookie.setValue('wrapCtl',$textarea.attr('wrap')); }, @@ -134,13 +130,14 @@ var dw_editor = { * @param event e - the key press event object */ keyHandler: function(e){ - if(e.keyCode != 13 && - e.keyCode != 8 && - e.keyCode != 32) return; - var field = e.target; - var selection = getSelection(field); - if(selection.getLength()) return; //there was text selected, keep standard behavior - var search = "\n"+field.value.substr(0,selection.start); + if([8, 13, 32].indexOf(e.keyCode) === -1) { + return; + } + var selection = getSelection(this); + if(selection.getLength() > 0) { + return; //there was text selected, keep standard behavior + } + var search = "\n"+this.value.substr(0,selection.start); var linestart = Math.max(search.lastIndexOf("\n"), search.lastIndexOf("\r")); //IE workaround search = search.substr(linestart); @@ -149,19 +146,19 @@ var dw_editor = { // keep current indention for lists and code var match = search.match(/(\n +([\*-] ?)?)/); if(match){ - var scroll = field.scrollHeight; + var scroll = this.scrollHeight; var match2 = search.match(/^\n +[\*-]\s*$/); // Cancel list if the last item is empty (i. e. two times enter) - if (match2 && field.value.substr(selection.start).match(/^($|\r?\n)/)) { - field.value = field.value.substr(0, linestart) + "\n" + - field.value.substr(selection.start); + if (match2 && this.value.substr(selection.start).match(/^($|\r?\n)/)) { + this.value = this.value.substr(0, linestart) + "\n" + + this.value.substr(selection.start); selection.start = linestart + 1; selection.end = linestart + 1; setSelection(selection); } else { - insertAtCarret(field.id,match[1]); + insertAtCarret(this.id,match[1]); } - field.scrollTop += (field.scrollHeight - scroll); + this.scrollTop += (this.scrollHeight - scroll); e.preventDefault(); // prevent enter key return false; } @@ -172,13 +169,13 @@ var dw_editor = { var spaces = match[1].length-1; if(spaces > 3){ // unindent one level - field.value = field.value.substr(0,linestart)+ - field.value.substr(linestart+2); + this.value = this.value.substr(0,linestart)+ + this.value.substr(linestart+2); selection.start = selection.start - 2; selection.end = selection.start; }else{ // delete list point - field.value = field.value.substr(0,linestart)+ - field.value.substr(selection.start); + this.value = this.value.substr(0,linestart)+ + this.value.substr(selection.start); selection.start = linestart; selection.end = linestart; } @@ -190,8 +187,8 @@ var dw_editor = { // intend list item var match = search.match(/(\n +)([*-] )$/); if(match){ - field.value = field.value.substr(0,linestart)+' '+ - field.value.substr(linestart); + this.value = this.value.substr(0,linestart)+' '+ + this.value.substr(linestart); selection.start = selection.start + 2; selection.end = selection.start; setSelection(selection); -- cgit v1.2.3