diff options
Diffstat (limited to 'js/dojo/dojox/editor/plugins/ShowBlockNodes.js')
| -rw-r--r-- | js/dojo/dojox/editor/plugins/ShowBlockNodes.js | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/js/dojo/dojox/editor/plugins/ShowBlockNodes.js b/js/dojo/dojox/editor/plugins/ShowBlockNodes.js new file mode 100644 index 0000000..f1281fc --- /dev/null +++ b/js/dojo/dojox/editor/plugins/ShowBlockNodes.js @@ -0,0 +1,188 @@ +//>>built +define("dojox/editor/plugins/ShowBlockNodes", [ + "dojo", + "dijit", + "dojox", + "dijit/_editor/_Plugin", + "dijit/form/Button", + "dijit/form/ToggleButton", + "dojo/_base/connect", + "dojo/_base/declare", + "dojo/i18n", + "dojo/i18n!dojox/editor/plugins/nls/ShowBlockNodes" +], function(dojo, dijit, dojox) { + +dojo.declare("dojox.editor.plugins.ShowBlockNodes",dijit._editor._Plugin,{ + // summary: + // This plugin provides ShowBlockNodes cabability to the editor. When + // clicked, the document in the editor will apply a class to specific + // block nodes to make them visible in the layout. This info is not + // exposed/extracted when the editor value is obtained, it is purely for help + // while working on the page. + + // useDefaultCommand [protected] boolean + // Over-ride indicating that the command processing is done all by this plugin. + useDefaultCommand: false, + + // iconClassPrefix: [const] String + // The CSS class name for the button node is formed from `iconClassPrefix` and `command` + iconClassPrefix: "dijitAdditionalEditorIcon", + + // _styled [private] boolean + // Flag indicating the document has had the style updates applied. + _styled: false, + + _initButton: function(){ + // summary: + // Over-ride for creation of the preview button. + var strings = dojo.i18n.getLocalization("dojox.editor.plugins", "ShowBlockNodes"); + this.button = new dijit.form.ToggleButton({ + label: strings["showBlockNodes"], + showLabel: false, + iconClass: this.iconClassPrefix + " " + this.iconClassPrefix + "ShowBlockNodes", + tabIndex: "-1", + onChange: dojo.hitch(this, "_showBlocks") + }); + this.editor.addKeyHandler(dojo.keys.F9, true, true, dojo.hitch(this, this.toggle)); + }, + + updateState: function(){ + // summary: + // Over-ride for button state control for disabled to work. + this.button.set("disabled", this.get("disabled")); + }, + + setEditor: function(editor){ + // summary: + // Over-ride for the setting of the editor. + // editor: Object + // The editor to configure for this plugin to use. + this.editor = editor; + this._initButton(); + }, + + toggle: function(){ + // summary: + // Function to allow programmatic toggling of the view. + this.button.set("checked", !this.button.get("checked")); + }, + + _showBlocks: function(show){ + // summary: + // Function to trigger printing of the editor document + // tags: + // private + var doc = this.editor.document; + if(!this._styled){ + try{ + //Attempt to inject our specialized style rules for doing this. + this._styled = true; + + var style = ""; + var blocks = ["div", "p", "ul", "ol", "table", "h1", + "h2", "h3", "h4", "h5", "h6", "pre", "dir", "center", + "blockquote", "form", "fieldset", "address", "object", + "pre", "hr", "ins", "noscript", "li", "map", "button", + "dd", "dt"]; + + var template = "@media screen {\n" + + "\t.editorShowBlocks {TAG} {\n" + + "\t\tbackground-image: url({MODURL}/images/blockelems/{TAG}.gif);\n" + + "\t\tbackground-repeat: no-repeat;\n" + + "\t\tbackground-position: top left;\n" + + "\t\tborder-width: 1px;\n" + + "\t\tborder-style: dashed;\n" + + "\t\tborder-color: #D0D0D0;\n" + + "\t\tpadding-top: 15px;\n" + + "\t\tpadding-left: 15px;\n" + + "\t}\n" + + "}\n"; + + dojo.forEach(blocks, function(tag){ + style += template.replace(/\{TAG\}/gi, tag); + }); + + //Finally associate in the image locations based off the module url. + var modurl = dojo.moduleUrl(dojox._scopeName, "editor/plugins/resources").toString(); + if(!(modurl.match(/^https?:\/\//i)) && + !(modurl.match(/^file:\/\//i))){ + // We have to root it to the page location on webkit for some nutball reason. + // Probably has to do with how iframe was loaded. + var bUrl; + if(modurl.charAt(0) === "/"){ + //Absolute path on the server, so lets handle... + var proto = dojo.doc.location.protocol; + var hostn = dojo.doc.location.host; + bUrl = proto + "//" + hostn; + }else{ + bUrl = this._calcBaseUrl(dojo.global.location.href); + } + if(bUrl[bUrl.length - 1] !== "/" && modurl.charAt(0) !== "/"){ + bUrl += "/"; + } + modurl = bUrl + modurl; + } + // Update all the urls. + style = style.replace(/\{MODURL\}/gi, modurl); + if(!dojo.isIE){ + var sNode = doc.createElement("style"); + sNode.appendChild(doc.createTextNode(style)); + doc.getElementsByTagName("head")[0].appendChild(sNode); + }else{ + var ss = doc.createStyleSheet(""); + ss.cssText = style; + } + }catch(e){ + console.warn(e); + } + } + + // Apply/remove the classes based on state. + if(show){ + dojo.addClass(this.editor.editNode, "editorShowBlocks"); + }else{ + dojo.removeClass(this.editor.editNode, "editorShowBlocks"); + } + }, + + _calcBaseUrl: function(fullUrl) { + // summary: + // Internal function used to figure out the full root url (no relatives) + // for loading images in the styles in the iframe. + // fullUrl: String + // The full url to tear down to the base. + // tags: + // private + var baseUrl = null; + if (fullUrl !== null) { + // Check to see if we need to strip off any query parameters from the Url. + var index = fullUrl.indexOf("?"); + if (index != -1) { + fullUrl = fullUrl.substring(0,index); + } + + // Now we need to trim if necessary. If it ends in /, then we don't + // have a filename to trim off so we can return. + index = fullUrl.lastIndexOf("/"); + if (index > 0 && index < fullUrl.length) { + baseUrl = fullUrl.substring(0,index); + }else{ + baseUrl = fullUrl; + } + } + return baseUrl; //String + } +}); + +// Register this plugin. +dojo.subscribe(dijit._scopeName + ".Editor.getPlugin",null,function(o){ + if(o.plugin){ return; } + var name = o.args.name.toLowerCase(); + if(name === "showblocknodes"){ + o.plugin = new dojox.editor.plugins.ShowBlockNodes(); + } +}); + +return dojox.editor.plugins.ShowBlockNodes; + +}); |