wysihtml-rails 0.5.5 → 0.6.0.beta

data/vendor/assets/javascripts/wysihtml/toolbar.js

@@ -0,0 +1,850 @@
+/**
+ * Toolbar Dialog
+ *
+ * @param {Element} link The toolbar link which causes the dialog to show up
+ * @param {Element} container The dialog container
+ *
+ * @example
+ *    <!-- Toolbar link -->
+ *    <a data-wysihtml-command="insertImage">insert an image</a>
+ *
+ *    <!-- Dialog -->
+ *    <div data-wysihtml-dialog="insertImage" style="display: none;">
+ *      <label>
+ *        URL: <input data-wysihtml-dialog-field="src" value="http://">
+ *      </label>
+ *      <label>
+ *        Alternative text: <input data-wysihtml-dialog-field="alt" value="">
+ *      </label>
+ *    </div>
+ *
+ *    <script>
+ *      var dialog = new wysihtml.toolbar.Dialog(
+ *        document.querySelector("[data-wysihtml-command='insertImage']"),
+ *        document.querySelector("[data-wysihtml-dialog='insertImage']")
+ *      );
+ *      dialog.observe("save", function(attributes) {
+ *        // do something
+ *      });
+ *    </script>
+ */
+(function(wysihtml) {
+  var dom                     = wysihtml.dom,
+      CLASS_NAME_OPENED       = "wysihtml-command-dialog-opened",
+      SELECTOR_FORM_ELEMENTS  = "input, select, textarea",
+      SELECTOR_FIELDS         = "[data-wysihtml-dialog-field]",
+      ATTRIBUTE_FIELDS        = "data-wysihtml-dialog-field";
+
+
+  wysihtml.toolbar.Dialog = wysihtml.lang.Dispatcher.extend(
+    /** @scope wysihtml.toolbar.Dialog.prototype */ {
+    constructor: function(link, container) {
+      this.link       = link;
+      this.container  = container;
+    },
+
+    _observe: function() {
+      if (this._observed) {
+        return;
+      }
+
+      var that = this,
+          callbackWrapper = function(event) {
+            var attributes = that._serialize();
+            that.fire("save", attributes);
+            that.hide();
+            event.preventDefault();
+            event.stopPropagation();
+          };
+
+      dom.observe(that.link, "click", function() {
+        if (dom.hasClass(that.link, CLASS_NAME_OPENED)) {
+          setTimeout(function() { that.hide(); }, 0);
+        }
+      });
+
+      dom.observe(this.container, "keydown", function(event) {
+        var keyCode = event.keyCode;
+        if (keyCode === wysihtml.ENTER_KEY) {
+          callbackWrapper(event);
+        }
+        if (keyCode === wysihtml.ESCAPE_KEY) {
+          that.cancel();
+        }
+      });
+
+      dom.delegate(this.container, "[data-wysihtml-dialog-action=save]", "click", callbackWrapper);
+
+      dom.delegate(this.container, "[data-wysihtml-dialog-action=cancel]", "click", function(event) {
+        that.cancel();
+        event.preventDefault();
+        event.stopPropagation();
+      });
+
+      this._observed = true;
+    },
+
+    /**
+     * Grabs all fields in the dialog and puts them in key=>value style in an object which
+     * then gets returned
+     */
+    _serialize: function() {
+      var data    = {},
+          fields  = this.container.querySelectorAll(SELECTOR_FIELDS),
+          length  = fields.length,
+          i       = 0;
+
+      for (; i<length; i++) {
+        data[fields[i].getAttribute(ATTRIBUTE_FIELDS)] = fields[i].value;
+      }
+      return data;
+    },
+
+    /**
+     * Takes the attributes of the "elementToChange"
+     * and inserts them in their corresponding dialog input fields
+     *
+     * Assume the "elementToChange" looks like this:
+     *    <a href="http://www.google.com" target="_blank">foo</a>
+     *
+     * and we have the following dialog:
+     *    <input type="text" data-wysihtml-dialog-field="href" value="">
+     *    <input type="text" data-wysihtml-dialog-field="target" value="">
+     *
+     * after calling _interpolate() the dialog will look like this
+     *    <input type="text" data-wysihtml-dialog-field="href" value="http://www.google.com">
+     *    <input type="text" data-wysihtml-dialog-field="target" value="_blank">
+     *
+     * Basically it adopted the attribute values into the corresponding input fields
+     *
+     */
+    _interpolate: function(avoidHiddenFields) {
+      var field,
+          fieldName,
+          newValue,
+          focusedElement = document.querySelector(":focus"),
+          fields         = this.container.querySelectorAll(SELECTOR_FIELDS),
+          length         = fields.length,
+          i              = 0;
+      for (; i<length; i++) {
+        field = fields[i];
+
+        // Never change elements where the user is currently typing in
+        if (field === focusedElement) {
+          continue;
+        }
+
+        // Don't update hidden fields
+        // See https://github.com/xing/wysihtml5/pull/14
+        if (avoidHiddenFields && field.type === "hidden") {
+          continue;
+        }
+
+        fieldName = field.getAttribute(ATTRIBUTE_FIELDS);
+        newValue  = (this.elementToChange && typeof(this.elementToChange) !== 'boolean') ? (this.elementToChange.getAttribute(fieldName) || "") : field.defaultValue;
+        field.value = newValue;
+      }
+    },
+
+    update: function (elementToChange) {
+      this.elementToChange = elementToChange ? elementToChange : this.elementToChange;
+      this._interpolate();
+    },
+
+    /**
+     * Show the dialog element
+     */
+    show: function(elementToChange) {
+      var firstField  = this.container.querySelector(SELECTOR_FORM_ELEMENTS);
+
+      this._observe();
+      this.update(elementToChange);
+
+      dom.addClass(this.link, CLASS_NAME_OPENED);
+      this.container.style.display = "";
+      this.isOpen = true;
+      this.fire("show");
+
+      if (firstField && !elementToChange) {
+        try {
+          firstField.focus();
+        } catch(e) {}
+      }
+    },
+
+    /**
+     * Hide the dialog element
+     */
+    _hide: function(focus) {
+      this.elementToChange = null;
+      dom.removeClass(this.link, CLASS_NAME_OPENED);
+      this.container.style.display = "none";
+      this.isOpen = false;
+    },
+
+    hide: function() {
+      this._hide();
+      this.fire("hide");
+    },
+
+    cancel: function() {
+      this._hide();
+      this.fire("cancel");
+    }
+  });
+})(wysihtml); //jshint ignore:line
+
+(function(wysihtml) {
+  var dom                     = wysihtml.dom,
+      SELECTOR_FIELDS         = "[data-wysihtml-dialog-field]",
+      ATTRIBUTE_FIELDS        = "data-wysihtml-dialog-field";
+
+  wysihtml.toolbar.Dialog_bgColorStyle = wysihtml.toolbar.Dialog.extend({
+    multiselect: true,
+
+    _serialize: function() {
+      var data    = {},
+          fields  = this.container.querySelectorAll(SELECTOR_FIELDS),
+          length  = fields.length,
+          i       = 0;
+
+      for (; i<length; i++) {
+        data[fields[i].getAttribute(ATTRIBUTE_FIELDS)] = fields[i].value;
+      }
+      return data;
+    },
+
+    _interpolate: function(avoidHiddenFields) {
+      var field,
+          fieldName,
+          newValue,
+          focusedElement = document.querySelector(":focus"),
+          fields         = this.container.querySelectorAll(SELECTOR_FIELDS),
+          length         = fields.length,
+          i              = 0,
+          firstElement   = (this.elementToChange) ? ((wysihtml.lang.object(this.elementToChange).isArray()) ? this.elementToChange[0] : this.elementToChange) : null,
+          colorStr       = (firstElement) ? firstElement.getAttribute('style') : null,
+          color          = (colorStr) ? wysihtml.quirks.styleParser.parseColor(colorStr, "background-color") : null;
+
+      for (; i<length; i++) {
+        field = fields[i];
+        // Never change elements where the user is currently typing in
+        if (field === focusedElement) {
+          continue;
+        }
+        // Don't update hidden fields3
+        if (avoidHiddenFields && field.type === "hidden") {
+          continue;
+        }
+        if (field.getAttribute(ATTRIBUTE_FIELDS) === "color") {
+          if (color) {
+            if (color[3] && color[3] != 1) {
+              field.value = "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + color[3] + ");";
+            } else {
+              field.value = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ");";
+            }
+          } else {
+            field.value = "rgb(0,0,0);";
+          }
+        }
+      }
+    }
+
+  });
+})(wysihtml);
+
+(function(wysihtml) {
+  wysihtml.toolbar.Dialog_createTable = wysihtml.toolbar.Dialog.extend({
+    show: function(elementToChange) {
+      this.base(elementToChange);
+    }
+  });
+})(wysihtml);
+
+(function(wysihtml) {
+  var dom                     = wysihtml.dom,
+      SELECTOR_FIELDS         = "[data-wysihtml-dialog-field]",
+      ATTRIBUTE_FIELDS        = "data-wysihtml-dialog-field";
+
+  wysihtml.toolbar.Dialog_fontSizeStyle = wysihtml.toolbar.Dialog.extend({
+    multiselect: true,
+
+    _serialize: function() {
+      return {"size" : this.container.querySelector('[data-wysihtml-dialog-field="size"]').value};
+    },
+
+    _interpolate: function(avoidHiddenFields) {
+      var focusedElement = document.querySelector(":focus"),
+          field          = this.container.querySelector("[data-wysihtml-dialog-field='size']"),
+          firstElement   = (this.elementToChange) ? ((wysihtml.lang.object(this.elementToChange).isArray()) ? this.elementToChange[0] : this.elementToChange) : null,
+          styleStr       = (firstElement) ? firstElement.getAttribute('style') : null,
+          size           = (styleStr) ? wysihtml.quirks.styleParser.parseFontSize(styleStr) : null;
+
+      if (field && field !== focusedElement && size && !(/^\s*$/).test(size)) {
+        field.value = size;
+      }
+    }
+  });
+})(wysihtml);
+
+(function(wysihtml) {
+  var SELECTOR_FIELDS         = "[data-wysihtml-dialog-field]",
+      ATTRIBUTE_FIELDS        = "data-wysihtml-dialog-field";
+
+  wysihtml.toolbar.Dialog_foreColorStyle = wysihtml.toolbar.Dialog.extend({
+    multiselect: true,
+
+    _serialize: function() {
+      var data    = {},
+          fields  = this.container.querySelectorAll(SELECTOR_FIELDS),
+          length  = fields.length,
+          i       = 0;
+
+      for (; i<length; i++) {
+        data[fields[i].getAttribute(ATTRIBUTE_FIELDS)] = fields[i].value;
+      }
+      return data;
+    },
+
+    _interpolate: function(avoidHiddenFields) {
+      var field, colourMode,
+          styleParser = wysihtml.quirks.styleParser,
+          focusedElement = document.querySelector(":focus"),
+          fields         = this.container.querySelectorAll(SELECTOR_FIELDS),
+          length         = fields.length,
+          i              = 0,
+          firstElement   = (this.elementToChange) ? ((wysihtml.lang.object(this.elementToChange).isArray()) ? this.elementToChange[0] : this.elementToChange) : null,
+          colourStr       = (firstElement) ? firstElement.getAttribute("style") : null,
+          colour          = (colourStr) ? styleParser.parseColor(colourStr, "color") : null;
+
+      for (; i<length; i++) {
+        field = fields[i];
+        // Never change elements where the user is currently typing in
+        if (field === focusedElement) {
+          continue;
+        }
+        // Don't update hidden fields3
+        if (avoidHiddenFields && field.type === "hidden") {
+          continue;
+        }
+        if (field.getAttribute(ATTRIBUTE_FIELDS) === "color") {
+          colourMode = (field.dataset.colormode || "rgb").toLowerCase();
+          colourMode = colourMode === "hex" ? "hash" : colourMode;
+
+          if (colour) {
+            field.value = styleParser.unparseColor(colour, colourMode);
+          } else {
+            field.value = styleParser.unparseColor([0, 0, 0], colourMode);
+          }
+        }
+      }
+    }
+
+  });
+})(wysihtml);
+
+/**
+ * Converts speech-to-text and inserts this into the editor
+ * As of now (2011/03/25) this only is supported in Chrome >= 11
+ *
+ * Note that it sends the recorded audio to the google speech recognition api:
+ * http://stackoverflow.com/questions/4361826/does-chrome-have-buil-in-speech-recognition-for-input-type-text-x-webkit-speec
+ *
+ * Current HTML5 draft can be found here
+ * http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html
+ *
+ * "Accessing Google Speech API Chrome 11"
+ * http://mikepultz.com/2011/03/accessing-google-speech-api-chrome-11/
+ */
+(function(wysihtml) {
+  var dom = wysihtml.dom;
+
+  var linkStyles = {
+    position: "relative"
+  };
+
+  var wrapperStyles = {
+    left:     0,
+    margin:   0,
+    opacity:  0,
+    overflow: "hidden",
+    padding:  0,
+    position: "absolute",
+    top:      0,
+    zIndex:   1
+  };
+
+  var inputStyles = {
+    cursor:     "inherit",
+    fontSize:   "50px",
+    height:     "50px",
+    marginTop:  "-25px",
+    outline:    0,
+    padding:    0,
+    position:   "absolute",
+    right:      "-4px",
+    top:        "50%"
+  };
+
+  var inputAttributes = {
+    "x-webkit-speech": "",
+    "speech":          ""
+  };
+
+  wysihtml.toolbar.Speech = function(parent, link) {
+    var input = document.createElement("input");
+    if (!wysihtml.browser.supportsSpeechApiOn(input)) {
+      link.style.display = "none";
+      return;
+    }
+    var lang = parent.editor.textarea.element.getAttribute("lang");
+    if (lang) {
+      inputAttributes.lang = lang;
+    }
+
+    var wrapper = document.createElement("div");
+
+    wysihtml.lang.object(wrapperStyles).merge({
+      width:  link.offsetWidth  + "px",
+      height: link.offsetHeight + "px"
+    });
+
+    dom.insert(input).into(wrapper);
+    dom.insert(wrapper).into(link);
+
+    dom.setStyles(inputStyles).on(input);
+    dom.setAttributes(inputAttributes).on(input);
+
+    dom.setStyles(wrapperStyles).on(wrapper);
+    dom.setStyles(linkStyles).on(link);
+
+    var eventName = "onwebkitspeechchange" in input ? "webkitspeechchange" : "speechchange";
+    dom.observe(input, eventName, function() {
+      parent.execCommand("insertText", input.value);
+      input.value = "";
+    });
+
+    dom.observe(input, "click", function(event) {
+      if (dom.hasClass(link, "wysihtml-command-disabled")) {
+        event.preventDefault();
+      }
+
+      event.stopPropagation();
+    });
+  };
+})(wysihtml);
+
+/**
+ * Toolbar
+ *
+ * @param {Object} parent Reference to instance of Editor instance
+ * @param {Element} container Reference to the toolbar container element
+ *
+ * @example
+ *    <div id="toolbar">
+ *      <a data-wysihtml-command="createLink">insert link</a>
+ *      <a data-wysihtml-command="formatBlock" data-wysihtml-command-value="h1">insert h1</a>
+ *    </div>
+ *
+ *    <script>
+ *      var toolbar = new wysihtml.toolbar.Toolbar(editor, document.getElementById("toolbar"));
+ *    </script>
+ */
+(function(wysihtml) {
+  var CLASS_NAME_COMMAND_DISABLED   = "wysihtml-command-disabled",
+      CLASS_NAME_COMMANDS_DISABLED  = "wysihtml-commands-disabled",
+      CLASS_NAME_COMMAND_ACTIVE     = "wysihtml-command-active",
+      CLASS_NAME_ACTION_ACTIVE      = "wysihtml-action-active",
+      dom                           = wysihtml.dom;
+
+  wysihtml.toolbar.Toolbar = Base.extend(
+    /** @scope wysihtml.toolbar.Toolbar.prototype */ {
+    constructor: function(editor, container, showOnInit) {
+      this.editor     = editor;
+      this.container  = typeof(container) === "string" ? document.getElementById(container) : container;
+      this.composer   = editor.composer;
+
+      this._getLinks("command");
+      this._getLinks("action");
+
+      this._observe();
+      if (showOnInit) { this.show(); }
+
+      if (editor.config.classNameCommandDisabled != null) {
+        CLASS_NAME_COMMAND_DISABLED = editor.config.classNameCommandDisabled;
+      }
+      if (editor.config.classNameCommandsDisabled != null) {
+        CLASS_NAME_COMMANDS_DISABLED = editor.config.classNameCommandsDisabled;
+      }
+      if (editor.config.classNameCommandActive != null) {
+        CLASS_NAME_COMMAND_ACTIVE = editor.config.classNameCommandActive;
+      }
+      if (editor.config.classNameActionActive != null) {
+        CLASS_NAME_ACTION_ACTIVE = editor.config.classNameActionActive;
+      }
+
+      var speechInputLinks  = this.container.querySelectorAll("[data-wysihtml-command=insertSpeech]"),
+          length            = speechInputLinks.length,
+          i                 = 0;
+      for (; i<length; i++) {
+        new wysihtml.toolbar.Speech(this, speechInputLinks[i]);
+      }
+    },
+
+    _getLinks: function(type) {
+      var links   = this[type + "Links"] = wysihtml.lang.array(this.container.querySelectorAll("[data-wysihtml-" + type + "]")).get(),
+          length  = links.length,
+          i       = 0,
+          mapping = this[type + "Mapping"] = {},
+          link,
+          group,
+          name,
+          value,
+          dialog,
+          tracksBlankValue;
+
+      for (; i<length; i++) {
+        link    = links[i];
+        name    = link.getAttribute("data-wysihtml-" + type);
+        value   = link.getAttribute("data-wysihtml-" + type + "-value");
+        tracksBlankValue   = link.getAttribute("data-wysihtml-" + type + "-blank-value");
+        group   = this.container.querySelector("[data-wysihtml-" + type + "-group='" + name + "']");
+        dialog  = this._getDialog(link, name);
+
+        mapping[name + ":" + value] = {
+          link:   link,
+          group:  group,
+          name:   name,
+          value:  value,
+          tracksBlankValue: tracksBlankValue,
+          dialog: dialog,
+          state:  false
+        };
+      }
+    },
+
+    _getDialog: function(link, command) {
+      var that          = this,
+          dialogElement = this.container.querySelector("[data-wysihtml-dialog='" + command + "']"),
+          dialog, caretBookmark;
+
+      if (dialogElement) {
+        if (wysihtml.toolbar["Dialog_" + command]) {
+            dialog = new wysihtml.toolbar["Dialog_" + command](link, dialogElement);
+        } else {
+            dialog = new wysihtml.toolbar.Dialog(link, dialogElement);
+        }
+
+        dialog.on("show", function() {
+          caretBookmark = that.composer.selection.getBookmark();
+          that.editor.fire("show:dialog", { command: command, dialogContainer: dialogElement, commandLink: link });
+        });
+
+        dialog.on("save", function(attributes) {
+          if (caretBookmark) {
+            that.composer.selection.setBookmark(caretBookmark);
+          }
+          that._execCommand(command, attributes);
+          that.editor.fire("save:dialog", { command: command, dialogContainer: dialogElement, commandLink: link });
+          that._hideAllDialogs();
+          that._preventInstantFocus();
+          caretBookmark = undefined;
+
+        });
+
+        dialog.on("cancel", function() {
+          if (caretBookmark) {
+            that.composer.selection.setBookmark(caretBookmark);
+          }
+          that.editor.fire("cancel:dialog", { command: command, dialogContainer: dialogElement, commandLink: link });
+          caretBookmark = undefined;
+          that._preventInstantFocus();
+        });
+
+        dialog.on("hide", function() {
+          that.editor.fire("hide:dialog", { command: command, dialogContainer: dialogElement, commandLink: link });
+          caretBookmark = undefined;
+        });
+
+      }
+      return dialog;
+    },
+
+    /**
+     * @example
+     *    var toolbar = new wysihtml.Toolbar();
+     *    // Insert a <blockquote> element or wrap current selection in <blockquote>
+     *    toolbar.execCommand("formatBlock", "blockquote");
+     */
+    execCommand: function(command, commandValue) {
+      if (this.commandsDisabled) {
+        return;
+      }
+
+      this._execCommand(command, commandValue);
+    },
+
+    _execCommand: function(command, commandValue) {
+      // Make sure that composer is focussed (false => don't move caret to the end)
+      this.editor.focus(false);
+
+      this.composer.commands.exec(command, commandValue);
+      this._updateLinkStates();
+    },
+
+    execAction: function(action) {
+      var editor = this.editor;
+      if (action === "change_view") {
+        if (editor.currentView === editor.textarea || editor.currentView === "source") {
+          editor.fire("change_view", "composer");
+        } else {
+          editor.fire("change_view", "textarea");
+        }
+      }
+      if (action == "showSource") {
+          editor.fire("showSource");
+      }
+    },
+
+    _observe: function() {
+      var that      = this,
+          editor    = this.editor,
+          container = this.container,
+          links     = this.commandLinks.concat(this.actionLinks),
+          length    = links.length,
+          i         = 0;
+
+      for (; i<length; i++) {
+        // 'javascript:;' and unselectable=on Needed for IE, but done in all browsers to make sure that all get the same css applied
+        // (you know, a:link { ... } doesn't match anchors with missing href attribute)
+        if (links[i].nodeName === "A") {
+          dom.setAttributes({
+            href:         "javascript:;",
+            unselectable: "on"
+          }).on(links[i]);
+        } else {
+          dom.setAttributes({ unselectable: "on" }).on(links[i]);
+        }
+      }
+
+      // Needed for opera and chrome
+      dom.delegate(container, "[data-wysihtml-command], [data-wysihtml-action]", "mousedown", function(event) { event.preventDefault(); });
+
+      dom.delegate(container, "[data-wysihtml-command]", "click", function(event) {
+        var state,
+            link          = this,
+            command       = link.getAttribute("data-wysihtml-command"),
+            commandValue  = link.getAttribute("data-wysihtml-command-value"),
+            commandObj = that.commandMapping[command + ":" + commandValue];
+
+        if (commandValue || !commandObj.dialog) {
+          that.execCommand(command, commandValue);
+        } else {
+          state = getCommandState(that.composer, commandObj);
+          commandObj.dialog.show(state);
+        }
+
+        event.preventDefault();
+      });
+
+      dom.delegate(container, "[data-wysihtml-action]", "click", function(event) {
+        var action = this.getAttribute("data-wysihtml-action");
+        that.execAction(action);
+        event.preventDefault();
+      });
+
+      editor.on("interaction:composer", function(event) {
+        if (!that.preventFocus) {
+          that._updateLinkStates();
+        }
+      });
+
+      this._ownerDocumentClick = function(event) {
+        if (!wysihtml.dom.contains(that.container, event.target) && !wysihtml.dom.contains(that.composer.element, event.target)) {
+          that._updateLinkStates();
+          that._preventInstantFocus();
+        }
+      };
+
+      this.container.ownerDocument.addEventListener("click", this._ownerDocumentClick, false);
+      this.editor.on("destroy:composer", this.destroy.bind(this));
+
+      if (this.editor.config.handleTables) {
+        editor.on("tableselect:composer", function() {
+            that.container.querySelectorAll('[data-wysihtml-hiddentools="table"]')[0].style.display = "";
+        });
+        editor.on("tableunselect:composer", function() {
+            that.container.querySelectorAll('[data-wysihtml-hiddentools="table"]')[0].style.display = "none";
+        });
+      }
+
+      editor.on("change_view", function(currentView) {
+        // Set timeout needed in order to let the blur event fire first
+          setTimeout(function() {
+            that.commandsDisabled = (currentView !== "composer");
+            that._updateLinkStates();
+            if (that.commandsDisabled) {
+              dom.addClass(container, CLASS_NAME_COMMANDS_DISABLED);
+            } else {
+              dom.removeClass(container, CLASS_NAME_COMMANDS_DISABLED);
+            }
+          }, 0);
+      });
+    },
+
+    destroy: function() {
+      this.container.ownerDocument.removeEventListener("click", this._ownerDocumentClick, false);
+    },
+
+    _hideAllDialogs: function() {
+      var commandMapping      = this.commandMapping;
+      for (var i in commandMapping) {
+        if (commandMapping[i].dialog) {
+          commandMapping[i].dialog.hide();
+        }
+      }
+    },
+
+    _preventInstantFocus: function() {
+      this.preventFocus = true;
+      setTimeout(function() {
+        this.preventFocus = false;
+      }.bind(this),0);
+    },
+
+    _updateLinkStates: function() {
+
+      var i, state, action, command, displayDialogAttributeValue,
+          commandMapping      = this.commandMapping,
+          composer            = this.composer,
+          actionMapping       = this.actionMapping;
+      // every millisecond counts... this is executed quite often
+      for (i in commandMapping) {
+        command = commandMapping[i];
+        if (this.commandsDisabled) {
+          state = false;
+          dom.removeClass(command.link, CLASS_NAME_COMMAND_ACTIVE);
+          if (command.group) {
+            dom.removeClass(command.group, CLASS_NAME_COMMAND_ACTIVE);
+          }
+          if (command.dialog) {
+            command.dialog.hide();
+          }
+        } else {
+          state = this.composer.commands.state(command.name, command.value);
+          dom.removeClass(command.link, CLASS_NAME_COMMAND_DISABLED);
+          if (command.group) {
+            dom.removeClass(command.group, CLASS_NAME_COMMAND_DISABLED);
+          }
+        }
+        if (command.state === state && !command.tracksBlankValue) {
+          continue;
+        }
+
+        command.state = state;
+        if (state) {
+          if (command.tracksBlankValue) {
+            dom.removeClass(command.link, CLASS_NAME_COMMAND_ACTIVE);
+          } else {
+            dom.addClass(command.link, CLASS_NAME_COMMAND_ACTIVE);
+            if (command.group) {
+              dom.addClass(command.group, CLASS_NAME_COMMAND_ACTIVE);
+            }
+            // commands with fixed value can not have a dialog.
+            if (command.dialog && (typeof command.value === "undefined" || command.value === null)) {
+              if (state && typeof state === "object") {
+                state = getCommandState(composer, command);
+                command.state = state;
+
+                // If dialog has dataset.showdialogonselection set as true,
+                // Dialog displays on text state becoming active regardless of clobal showToolbarDialogsOnSelection options value
+                displayDialogAttributeValue = command.dialog.container.dataset ? command.dialog.container.dataset.showdialogonselection : false;
+
+                if (composer.config.showToolbarDialogsOnSelection || displayDialogAttributeValue) {
+                  command.dialog.show(state);
+                } else {
+                  command.dialog.update(state);
+                }
+              } else {
+                command.dialog.hide();
+              }
+            }
+          }
+        } else {
+          if (command.tracksBlankValue) {
+            dom.addClass(command.link, CLASS_NAME_COMMAND_ACTIVE);
+          } else {
+            dom.removeClass(command.link, CLASS_NAME_COMMAND_ACTIVE);
+            if (command.group) {
+              dom.removeClass(command.group, CLASS_NAME_COMMAND_ACTIVE);
+            }
+            // commands with fixed value can not have a dialog.
+            if (command.dialog && !command.value) {
+              command.dialog.hide();
+            }
+          }
+        }
+      }
+
+      for (i in actionMapping) {
+        action = actionMapping[i];
+
+        if (action.name === "change_view") {
+          action.state = this.editor.currentView === this.editor.textarea || this.editor.currentView === "source";
+          if (action.state) {
+            dom.addClass(action.link, CLASS_NAME_ACTION_ACTIVE);
+          } else {
+            dom.removeClass(action.link, CLASS_NAME_ACTION_ACTIVE);
+          }
+        }
+      }
+    },
+
+    show: function() {
+      this.container.style.display = "";
+    },
+
+    hide: function() {
+      this.container.style.display = "none";
+    }
+  });
+
+  function getCommandState (composer, command) {
+    var state = composer.commands.state(command.name, command.value);
+
+    // Grab first and only object/element in state array, otherwise convert state into boolean
+    // to avoid showing a dialog for multiple selected elements which may have different attributes
+    // eg. when two links with different href are selected, the state will be an array consisting of both link elements
+    // but the dialog interface can only update one
+    if (!command.dialog.multiselect && wysihtml.lang.object(state).isArray()) {
+      state = state.length === 1 ? state[0] : true;
+    }
+
+    return state;
+  }
+
+  // Extend defaults
+
+  // Id of the toolbar element, pass falsey value if you don't want any toolbar logic
+  wysihtml.Editor.prototype.defaults.toolbar = undefined;
+
+  // Whether toolbar is displayed after init by script automatically.
+  // Can be set to false if toolobar is set to display only on editable area focus
+  wysihtml.Editor.prototype.defaults.showToolbarAfterInit = true;
+
+  // With default toolbar it shows dialogs in toolbar when their related text format state becomes active (click on link in text opens link dialogue)
+  wysihtml.Editor.prototype.defaults.showToolbarDialogsOnSelection= true;
+
+  // Bind toolbar initiation on editor instance creation
+  wysihtml.extendEditor(function(editor) {
+    if (editor.config.toolbar) {
+      editor.toolbar = new wysihtml.toolbar.Toolbar(editor, editor.config.toolbar, editor.config.showToolbarAfterInit);
+      editor.on('destroy:composer', function() {
+        if (editor && editor.toolbar) {
+          editor.toolbar.destroy();
+        }
+      });
+    }
+  });
+
+})(wysihtml);