From guido at codespeak.net Mon Jun 2 12:28:25 2008 From: guido at codespeak.net (guido at codespeak.net) Date: Mon, 2 Jun 2008 12:28:25 +0200 (CEST) Subject: [kupu-checkins] r55490 - kupu/trunk/kupu/common Message-ID: <20080602102825.1B9442A00E3@codespeak.net> Author: guido Date: Mon Jun 2 12:28:24 2008 New Revision: 55490 Modified: kupu/trunk/kupu/common/kupubasetools.js Log: Made URLs to popups and popup sizes arguments to the tools to allow configuring them. Modified: kupu/trunk/kupu/common/kupubasetools.js ============================================================================== --- kupu/trunk/kupu/common/kupubasetools.js (original) +++ kupu/trunk/kupu/common/kupubasetools.js Mon Jun 2 12:28:24 2008 @@ -1025,8 +1025,12 @@ PropertyTool.prototype = new KupuTool; -function LinkTool() { +function LinkTool(popupurl, popupheight, popupwidth) { /* Add and update hyperlinks */ + + this.popupurl = popupurl || 'kupupopups/link.html'; + this.popupheight = popupheight || 300; + this.popupwidth = popupwidth || 200; this.initialize = function(editor) { this.editor = editor; @@ -1220,8 +1224,12 @@ LinkToolBox.prototype = new LinkToolBox; -function ImageTool() { +function ImageTool(popupurl, popupwidth, popupheight) { /* Image tool to add images */ + + this.popupurl = popupurl || 'kupupopups/image.html'; + this.popupwidth = popupwidth || 300; + this.popupheight = popupheight || 200; this.initialize = function(editor) { /* attach the event handlers */ @@ -1230,7 +1238,8 @@ this.createImageHandler = function(event) { /* create an image according to a url entered in a popup */ - var imageWindow = openPopup('kupupopups/image.html', 300, 200); + var imageWindow = openPopup(this.popupurl, this.popupwidth, + this.popupheight); imageWindow.imagetool = this; imageWindow.focus(); }; From guido at codespeak.net Mon Jun 2 12:34:18 2008 From: guido at codespeak.net (guido at codespeak.net) Date: Mon, 2 Jun 2008 12:34:18 +0200 (CEST) Subject: [kupu-checkins] r55492 - kupu/trunk/kupu/common Message-ID: <20080602103418.423332A00E3@codespeak.net> Author: guido Date: Mon Jun 2 12:34:17 2008 New Revision: 55492 Modified: kupu/trunk/kupu/common/kupubasetools.js Log: Modernized JS code, changed the object notation/method definitions so that methods are stored on objects' prototype rather than on the objects themselves. Modified: kupu/trunk/kupu/common/kupubasetools.js ============================================================================== --- kupu/trunk/kupu/common/kupubasetools.js (original) +++ kupu/trunk/kupu/common/kupubasetools.js Mon Jun 2 12:34:17 2008 @@ -32,60 +32,61 @@ this.toolboxes = {}; - // methods - this.initialize = function(editor) { - /* Initialize the tool. + // private methods + addEventHandler = addEventHandler; +}; - Obviously this can be overriden but it will do - for the most simple cases - */ - this.editor = editor; - }; +// methods +KupuTool.prototype.initialize = function(editor) { + /* Initialize the tool. - this.registerToolBox = function(id, toolbox) { - /* register a ui box - - Note that this needs to be called *after* the tool has been - registered to the KupuEditor - */ - this.toolboxes[id] = toolbox; - toolbox.initialize(this, this.editor); - }; + Obviously this can be overriden but it will do + for the most simple cases + */ + this.editor = editor; +}; + +KupuTool.prototype.registerToolBox = function(id, toolbox) { + /* register a ui box - this.updateState = function(selNode, event) { - /* Is called when user moves cursor to other element + Note that this needs to be called *after* the tool has been + registered to the KupuEditor + */ + this.toolboxes[id] = toolbox; + toolbox.initialize(this, this.editor); +}; - Calls the updateState for all toolboxes and may want perform - some actions itself - */ - for (var id in this.toolboxes) { - this.toolboxes[id].updateState(selNode, event); - }; - }; +KupuTool.prototype.updateState = function(selNode, event) { + /* Is called when user moves cursor to other element - this.enable = function() { - // Called when the tool is enabled after a form is dismissed. + Calls the updateState for all toolboxes and may want perform + some actions itself + */ + for (var id in this.toolboxes) { + this.toolboxes[id].updateState(selNode, event); }; +}; - this.disable = function() { - // Called when the tool is disabled (e.g. for a modal form) - }; - // private methods - addEventHandler = addEventHandler; -} +KupuTool.prototype.enable = function() { + // Called when the tool is enabled after a form is dismissed. +}; + +KupuTool.prototype.disable = function() { + // Called when the tool is disabled (e.g. for a modal form) +}; function KupuToolBox() { /* Superclass for a user-interface object that controls a tool */ +}; - this.initialize = function(tool, editor) { - /* store a reference to the tool and the editor */ - this.tool = tool; - this.editor = editor; - }; +KupuToolBox.prototype.initialize = function(tool, editor) { + /* store a reference to the tool and the editor */ + this.tool = tool; + this.editor = editor; +}; - this.updateState = function(selNode, event) { - /* update the toolbox according to the current iframe's situation */ - }; +KupuToolBox.prototype.updateState = function(selNode, event) { + /* update the toolbox according to the current iframe's situation */ }; function noContextMenu(object) { @@ -103,15 +104,15 @@ button.disabled = "disabled"; button.className += ' disabled'; } -} +}; + function kupuButtonEnable(button) { button = button || this.button; if (button) { button.disabled = ""; button.className = button.className.replace(/ *\bdisabled\b/g, ''); } -} - +}; //---------------------------------------------------------------------------- // Implementations @@ -192,18 +193,22 @@ * Mozilla&Firefox have a bug on windows which can cause a crash if you * change CSS positioning styles on an element which has focus. */ -function KupuLateFocusStateButton(buttonid, commandfunc, checkfunc, offclass, onclass) { - KupuStateButton.apply(this, [buttonid, commandfunc, checkfunc, offclass, onclass]); - this.execCommand = function() { - /* exec this button's command */ - this.button.className = (this.pressed ? this.offclass : this.onclass); - this.pressed = !this.pressed; - this.commandfunc(this, this.editor); - this.editor.focusDocument(); - }; +function KupuLateFocusStateButton(buttonid, commandfunc, checkfunc, + offclass, onclass) { + KupuStateButton.apply(this, [buttonid, commandfunc, checkfunc, + offclass, onclass]); } + KupuLateFocusStateButton.prototype = new KupuStateButton; +KupuLateFocusStateButton.prototype.execCommand = function() { + /* exec this button's command */ + this.button.className = (this.pressed ? this.offclass : this.onclass); + this.pressed = !this.pressed; + this.commandfunc(this, this.editor); + this.editor.focusDocument(); +}; + function KupuRemoveElementButton(buttonid, element_name, cssclass) { /* A button specialized in removing elements in the current node context. Typical usages include removing links, images, etc. */ @@ -211,20 +216,21 @@ this.onclass = 'invisible'; this.offclass = cssclass; this.pressed = false; +}; - this.commandfunc = function(button, editor) { - editor.focusDocument(); - editor.removeNearestParentOfType(editor.getSelectedNode(), element_name); - editor.updateState(); - }; +KupuRemoveElementButton.prototype = new KupuStateButton; - this.checkfunc = function(currnode, button, editor, event) { - var element = editor.getNearestParentOfType(currnode, element_name); - return (element ? false : true); - }; +KupuRemoveElementButton.prototype.commandfunc = function(button, editor) { + editor.focusDocument(); + editor.removeNearestParentOfType(editor.getSelectedNode(), element_name); + editor.updateState(); }; -KupuRemoveElementButton.prototype = new KupuStateButton; +KupuRemoveElementButton.prototype.checkfunc = function(currnode, button, + editor, event) { + var element = editor.getNearestParentOfType(currnode, element_name); + return (element ? false : true); +}; function KupuUI(textstyleselectid) { /* View @@ -236,580 +242,585 @@ // attributes this.tsselect = getFromSelector(textstyleselectid); - var paraoptions = []; - var tableoptions = []; - var styleoptions = []; - var tableoffset = 0; - var styleoffset = 0; - var tablegrp = null; + this.paraoptions = []; + this.tableoptions = []; + this.styleoptions = []; + this.tableoffset = 0; + this.styleoffset = 0; + this.tablegrp = null; this.optionstate = -1; this.otherstyle = null; this.tablestyles = {}; this.charstyles = {}; this.styles = {}; // use an object here so we can use the 'in' operator later on - var blocktagre = /^(p|div|h.|ul|ol|dl|menu|dir|pre|blockquote|address|center)$/i; - var spanre = /^span\b/i; - var tblre = /^thead|tbody|table|t[rdh]\b/i; - - this.initialize = function(editor) { - /* initialize the ui like tools */ - this.editor = editor; + this.blocktagre = /^(p|div|h.|ul|ol|dl|menu|dir|pre|blockquote|address|center)$/i; + this.spanre = /^span\b/i; + this.tblre = /^thead|tbody|table|t[rdh]\b/i; +}; + + +KupuUI.prototype = new KupuTool; + +KupuUI.prototype.initialize = function(editor) { + /* initialize the ui like tools */ + this.editor = editor; + this.cleanStyles(); + this.enableOptions(false); + if (this.tsselect) { + this._selectevent = addEventHandler(this.tsselect, 'change', this.setTextStyleHandler, this); + } +}; + +KupuUI.prototype.getStyles = function() { + if (!this.paraoptions) { this.cleanStyles(); - this.enableOptions(false); - if (this.tsselect) { - this._selectevent = addEventHandler(this.tsselect, 'change', this.setTextStyleHandler, this); - } - }; + } + return [ this.paraoptions, this.tableoptions ]; +}; - this.getStyles = function() { - if (!paraoptions) { - this.cleanStyles(); - } - return [ paraoptions, tableoptions ]; - }; +KupuUI.prototype.setTextStyleHandler = function(event) { + this.setTextStyle(this.tsselect.options[this.tsselect.selectedIndex].value); +}; - this.setTextStyleHandler = function(event) { - this.setTextStyle(this.tsselect.options[this.tsselect.selectedIndex].value); - }; - - // event handlers - this.basicButtonHandler = function(action) { - /* event handler for basic actions (toolbar buttons) */ - this.editor.execCommand(action); - this.editor.updateState(); - }; +// event handlers +KupuUI.prototype.basicButtonHandler = function(action) { + /* event handler for basic actions (toolbar buttons) */ + this.editor.execCommand(action); + this.editor.updateState(); +}; - this.saveButtonHandler = function() { - /* handler for the save button */ - this.editor.saveDocument(); - }; - - this.saveAndExitButtonHandler = function(redirect_url) { - /* save the document and, if successful, redirect */ - this.editor.saveDocument(redirect_url); - }; - - this.cutButtonHandler = function() { - try { - this.editor.execCommand('Cut'); - } catch (e) { - if (this.editor.getBrowserName() == 'Mozilla') { - alert(_('Cutting from JavaScript is disabled on your Mozilla due to security settings. For more information, read http://www.mozilla.org/editor/midasdemo/securityprefs.html')); - } else { - throw e; - }; - }; - this.editor.updateState(); - }; +KupuUI.prototype.saveButtonHandler = function() { + /* handler for the save button */ + this.editor.saveDocument(); +}; - this.copyButtonHandler = function() { - try { - this.editor.execCommand('Copy'); - } catch (e) { - if (this.editor.getBrowserName() == 'Mozilla') { - alert(_('Copying from JavaScript is disabled on your Mozilla due to security settings. For more information, read http://www.mozilla.org/editor/midasdemo/securityprefs.html')); - } else { - throw e; - }; +KupuUI.prototype.saveAndExitButtonHandler = function(redirect_url) { + /* save the document and, if successful, redirect */ + this.editor.saveDocument(redirect_url); +}; + +KupuUI.prototype.cutButtonHandler = function() { + try { + this.editor.execCommand('Cut'); + } catch (e) { + if (this.editor.getBrowserName() == 'Mozilla') { + alert(_('Cutting from JavaScript is disabled on your Mozilla due to security settings. For more information, read http://www.mozilla.org/editor/midasdemo/securityprefs.html')); + } else { + throw e; }; - this.editor.updateState(); }; + this.editor.updateState(); +}; - this.pasteButtonHandler = function() { - try { - this.editor.execCommand('Paste'); - } catch (e) { - if (this.editor.getBrowserName() == 'Mozilla') { - alert(_('Pasting from JavaScript is disabled on your Mozilla due to security settings. For more information, read http://www.mozilla.org/editor/midasdemo/securityprefs.html')); - } else { - throw e; - }; +KupuUI.prototype.copyButtonHandler = function() { + try { + this.editor.execCommand('Copy'); + } catch (e) { + if (this.editor.getBrowserName() == 'Mozilla') { + alert(_('Copying from JavaScript is disabled on your Mozilla due to security settings. For more information, read http://www.mozilla.org/editor/midasdemo/securityprefs.html')); + } else { + throw e; }; - this.editor.updateState(); }; + this.editor.updateState(); +}; - this.cleanStyles = function() { - if (!this.tsselect) return; - var options = this.tsselect.options; - var parastyles = this.styles; - var tablestyles = this.tablestyles; - var charstyles = this.charstyles; - - var normal = ['Normal', 'p|']; - var td = ['Plain Cell', 'td|']; - var nostyle = ['(remove style)', '']; - - var opts = []; - while (options.length) { - var opt = options[0]; - options[0] = null; - var v = opt.value; - if (v.indexOf('|') > -1) { - var split = v.split('|'); - v = split[0].toLowerCase() + "|" + split[1]; - } else { - v = v.toLowerCase()+"|"; - }; - var optarray = [opt.text, v]; - if (v=='td|') { - td = optarray; - } else if (v=='p|') { - normal = optarray; - } else if (v=='') { - nostyle = optarray; - } else { - opts.push([opt.text,v]); - } - } - tableoptions.push(td); - tablestyles[td[1]] = 0; - paraoptions.push(normal); - parastyles[normal[1]] = 0; - - for (var i = 0; i < opts.length; i++) { - optarray = opts[i]; - v = optarray[1]; - - if (spanre.test(v)) { - charstyles[v] = styleoptions.length; - styleoptions.push(optarray); - } else if (tblre.test(v)) { - tablestyles[v] = tableoptions.length; - tableoptions.push(optarray); - } else { - parastyles[v] = paraoptions.length; - paraoptions.push(optarray); - }; - }; - paraoptions.push(nostyle); - styleoffset = paraoptions.length; - tableoffset = styleoffset + styleoptions.length; - }; - - // Remove otherstyle and switch to appropriate style set. - this.enableOptions = function(inTable) { - if (!this.tsselect) return; - var select = this.tsselect; - var options = select.options; - if (this.otherstyle) { - options[0] = null; - this.otherstyle = null; - } - if (this.optionstate == inTable) return; /* No change */ - - // while (select.firstChild) select.removeChild(select.firstChild); - - function option(info) { - return newElement('option', {'value': info[1]}, [info[0]]); - } - if (this.optionstate==-1) { - for (var i = 0; i < paraoptions.length; i++) { - select.appendChild(option(paraoptions[i])); - } - if (styleoptions.length) { - var grp = document.createElement('optgroup'); - grp.label = 'Character styles'; - for (var i = 0; i < styleoptions.length; i++) { - grp.appendChild(option(styleoptions[i])); - } - select.appendChild(grp); - } - } - if (inTable) { - var grp = (tablegrp = document.createElement('optgroup')); - grp.label = 'Table elements'; - for (var i = 0; i < tableoptions.length; i++) { - grp.appendChild(option(tableoptions[i])); - } - select.appendChild(grp); +KupuUI.prototype.pasteButtonHandler = function() { + try { + this.editor.execCommand('Paste'); + } catch (e) { + if (this.editor.getBrowserName() == 'Mozilla') { + alert(_('Pasting from JavaScript is disabled on your Mozilla due to security settings. For more information, read http://www.mozilla.org/editor/midasdemo/securityprefs.html')); } else { - while (select.options[tableoffset]) { - select.options[tableoffset] = null; - }; - if (tablegrp) { - select.removeChild(tablegrp); - tablegrp = null; - }; + throw e; }; - this.optionstate = inTable; }; + this.editor.updateState(); +}; + +KupuUI.prototype.cleanStyles = function() { + if (!this.tsselect) return; + var options = this.tsselect.options; + var parastyles = this.styles; + var tablestyles = this.tablestyles; + var charstyles = this.charstyles; - this.setIndex = function(currnode, tag, index, styles) { - var className = currnode.className; - this.styletag = tag; - this.classname = className; - var style = tag+'|'+className; + var normal = ['Normal', 'p|']; + var td = ['Plain Cell', 'td|']; + var nostyle = ['(remove style)', '']; - if (style in styles) { - return styles[style]; - } else if (!className && tag in styles) { - return styles[tag]; + var opts = []; + while (options.length) { + var opt = options[0]; + options[0] = null; + var v = opt.value; + if (v.indexOf('|') > -1) { + var split = v.split('|'); + v = split[0].toLowerCase() + "|" + split[1]; + } else { + v = v.toLowerCase()+"|"; + }; + var optarray = [opt.text, v]; + if (v=='td|') { + td = optarray; + } else if (v=='p|') { + normal = optarray; + } else if (v=='') { + nostyle = optarray; + } else { + opts.push([opt.text,v]); } - return index; - }; - - this.nodeStyle = function(node) { - var currnode = node; - var index = -1; - this.styletag = undefined; - this.classname = ''; + } + this.tableoptions.push(td); + tablestyles[td[1]] = 0; + this.paraoptions.push(normal); + parastyles[normal[1]] = 0; + + for (var i = 0; i < opts.length; i++) { + optarray = opts[i]; + v = optarray[1]; + + if (this.spanre.test(v)) { + charstyles[v] = this.styleoptions.length; + this.styleoptions.push(optarray); + } else if (this.tblre.test(v)) { + tablestyles[v] = this.tableoptions.length; + this.tableoptions.push(optarray); + } else { + parastyles[v] = this.paraoptions.length; + this.paraoptions.push(optarray); + }; + }; + this.paraoptions.push(nostyle); + this.styleoffset = this.paraoptions.length; + this.tableoffset = this.styleoffset + this.styleoptions.length; +}; + +// Remove otherstyle and switch to appropriate style set. +KupuUI.prototype.enableOptions = function(inTable) { + if (!this.tsselect) return; + var select = this.tsselect; + var options = select.options; + if (this.otherstyle) { + options[0] = null; + this.otherstyle = null; + } + if (this.optionstate == inTable) return; /* No change */ - // Set the table state correctly - this.intable = false; + // while (select.firstChild) select.removeChild(select.firstChild); - while(currnode) { - var tag = currnode.nodeName; - if (/^body$/i.test(tag)) break; - if (tblre.test(tag)) { - this.intable = true; - break; - }; - currnode = currnode.parentNode; - }; - currnode = node; - while (currnode) { - var tag = currnode.nodeName.toLowerCase(); - - if (/^body$/.test(tag)) { - if (!this.styletag) { - // Forced style messes up in Firefox: return -1 to - // indicate no style - return -1; - } - break; - } - if (spanre.test(tag)) { - index = this.setIndex(currnode, tag, index, this.charstyles); - if (index >= 0) return index+styleoffset; // span takes priority - } else if (blocktagre.test(tag)) { - index = this.setIndex(currnode, tag, index, this.styles); - } else if (tblre.test(tag)) { - if (index > 0) return index; // block or span takes priority. - index = this.setIndex(currnode, tag, index, this.tablestyles); - if (index >= 0 || tag=='table') { - return index+tableoffset; // Stop processing if in a table - } + function option(info) { + return newElement('option', {'value': info[1]}, [info[0]]); + } + if (this.optionstate==-1) { + for (var i = 0; i < this.paraoptions.length; i++) { + select.appendChild(option(this.paraoptions[i])); + } + if (this.styleoptions.length) { + var grp = document.createElement('optgroup'); + grp.label = 'Character styles'; + for (var i = 0; i < this.styleoptions.length; i++) { + grp.appendChild(option(this.styleoptions[i])); } - currnode = currnode.parentNode; + select.appendChild(grp); + } + } + if (inTable) { + var grp = (this.tablegrp = document.createElement('optgroup')); + grp.label = 'Table elements'; + for (var i = 0; i < this.tableoptions.length; i++) { + grp.appendChild(option(this.tableoptions[i])); } - return index; + select.appendChild(grp); + } else { + while (select.options[this.tableoffset]) { + select.options[this.tableoffset] = null; + }; + if (this.tablegrp) { + select.removeChild(this.tablegrp); + this.tablegrp = null; + }; }; + this.optionstate = inTable; +}; - this.updateState = function(selNode) { - /* set the text-style pulldown */ - - // first get the nearest style - // search the list of nodes like in the original one, break if we encounter a match, - // this method does some more than the original one since it can handle commands in - // the form of '