/* Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved. Available via Academic Free License >= 2.1 OR the modified BSD license. see: http://dojotoolkit.org/license for details */ if(!dojo._hasResource["dojox.editor.plugins.ShowBlockNodes"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. dojo._hasResource["dojox.editor.plugins.ShowBlockNodes"] = true; dojo.provide("dojox.editor.plugins.ShowBlockNodes"); dojo.require("dijit._editor._Plugin"); dojo.require("dijit.form.Button"); dojo.require("dojo.i18n"); dojo.requireLocalization("dojox.editor.plugins", "ShowBlockNodes", null, "ROOT,ar,bg,ca,cs,da,de,el,es,fi,fr,he,hr,hu,it,ja,kk,ko,nb,nl,pl,pt,pt-pt,ro,ru,sk,sl,sv,th,tr,zh,zh-tw"); 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(); } }); }