Refactoring

Gruntfile.js

@@ -90,7 +90,7 @@ module.exports = function(grunt) {
                 }
             },
             all: ["tests/all.html"],
-            single: ["tests/index.html"]
+            single: ["tests/single.html"]
         },
         copy: {
             qunit: {

src/editor/core/Arte.js

@@ -11,9 +11,12 @@
 (function($) {
     $.Arte = $.Arte || {};
     $.fn.Arte = function(options, args) {
-        var result = [];
         rangy.init();
-        this.each(function() {
+
+        if (!this.length) {
+            return this;
+        }
+        return this.map(function() {
             var $this = $(this);
             var editor = $this.data("Arte");
             if (options && typeof(options) === "string") {
@@ -28,7 +31,7 @@
                 }
 
                 var returnValue = editor[methodName].call(editor, args);
-                result.push(returnValue);
+                return returnValue;
             } else {
                 // If $this is not a rich text editor, construct the editor
                 if (!editor) {
@@ -37,9 +40,8 @@
                     editor = new $.Arte.TextArea(options);
                     $this.data("Arte", editor);
                 }
-                result.push(editor);
+                return editor;
             }
         });
-        return $(result);
     };
 })(jQuery);

src/new/arte-commands.js

@@ -0,0 +1,167 @@
+jQuery(function($) {
+    var commands = {
+        bold: function() {
+            var weight = this.element.css("fontWeight");
+
+            if (weight === "bold" || weight > 500) {
+                this.element.css("fontWeight", 400);
+            } else {
+                this.element.css("fontWeight", 700);
+            }
+        },
+        italic: function() {
+            var style = this.element.css("fontStyle");
+
+            if (style === "italic") {
+                this.element.css("fontStyle", "normal");
+            } else {
+                this.element.css("fontStyle", "italic");
+            }
+        },
+        underline: function() {
+            var decoration = this.element.css("textDecoration");
+
+            if (decoration === "underline") {
+                this.element.css("textDecoration", "none");
+            } else {
+                this.element.css("textDecoration", "underline");
+            }
+        },
+        fontSize: function(value) {
+            if (value) {
+                return this.element.css("fontSize", value);
+            } else {
+                return this.element.css("fontSize");
+            }
+        },
+        fontFamily: function(value) {
+            if (value) {
+                return this.element.css("fontFamily", value);
+            } else {
+                return this.element.css("fontFamily");
+            }
+        },
+        color: function(value) {
+            if (value) {
+                return this.element.css("color", value);
+            } else {
+                return this.element.css("color");
+            }
+        },
+        backgroundColor: function(value) {
+            if (value) {
+                return this.element.css("backgroundColor", value);
+            } else {
+                return this.element.css("backgroundColor");
+            }
+        },
+        textAlign: function(value) {
+            if (value) {
+                return this.element.css("textAlign", value);
+            } else {
+                return this.element.css("textAlign");
+            }
+        },
+        unorderedList: function() {
+            if (this.__type === "plainText") {
+                throw new Error("Can't create lists on plain text editors");
+            }
+        },
+        orderedList: function() {
+            if (this.__type === "plainText") {
+                throw new Error("Can't create lists on plain text editors");
+            }
+        },
+        blockquote: function() {
+            if (this.__type === "plainText") {
+                throw new Error("Can't create elements on plain text editor");
+            }
+        },
+        h1: function() {
+            if (this.__type === "plainText") {
+                throw new Error("Can't create elements on plain text editor");
+            }
+        },
+        h2: function() {
+            if (this.__type === "plainText") {
+                throw new Error("Can't create elements on plain text editor");
+            }
+        },
+        h3: function() {
+            if (this.__type === "plainText") {
+                throw new Error("Can't create elements on plain text editor");
+            }
+        },
+        h4: function() {
+            if (this.__type === "plainText") {
+                throw new Error("Can't create elements on plain text editor");
+            }
+        },
+        h5: function() {
+            if (this.__type === "plainText") {
+                throw new Error("Can't create elements on plain text editor");
+            }
+        },
+        h6: function() {
+            if (this.__type === "plainText") {
+                throw new Error("Can't create elements on plain text editor");
+            }
+        },
+        subscript: function() {
+            if (this.__type === "plainText") {
+                throw new Error("Can't create elements on plain text editor");
+            }
+        },
+        superscript: function() {
+            if (this.__type === "plainText") {
+                throw new Error("Can't create elements on plain text editor");
+            }
+        }
+    };
+
+    $.each([
+            "bold", "italic", "underline",
+            "fontSize", "fontFamily",
+            "color", "backgroundColor",
+            "unorderedList", "orderedList",
+            "textAlign"
+        ], function() {
+            var command = this;
+            Arte.prototype[command] = function(options) {
+                return this.exec(command, options);
+            };
+        });
+
+    $.each([
+            "blockquote",
+            "h1", "h2", "h3", "h4", "h5", "h6",
+            "subscript", "superscript",
+        ], function() {
+            var command = this;
+            Arte.prototype[command] = function() {
+                return this.exec(command);
+            };
+        });
+
+    $.extend(Arte.prototype, {
+        exec: function(command, options) {
+            var result;
+
+            this.triggerEvent({
+                type: "arte-beforecommand",
+                options: options,
+                command: command
+            });
+
+            result = commands[command].call(this, options);
+
+            this.triggerEvent({
+                type: "arte-command",
+                options: options,
+                command: command
+            });
+
+            return result;
+        }
+    });
+});

src/new/arte-core.js

@@ -0,0 +1,156 @@
+/**
+ * @fileoverview Rich text editor
+ * Usage:
+ *  1) var arte = Arte(element);
+ *     Converts the first matched element into a rich text editor using default options and returns an existing instance
+ * @returns {an Arte object}
+ *  2) var arte = Arte(element, { options });
+ *     Converts the first matched elements into a rich text editor using the options supplied and returns an existing instance
+ * @returns {an Arte object}
+ *
+ */
+
+jQuery(function($) {
+    function Arte(element, options) {
+        if (!(this instanceof Arte)) {
+            return new Arte(element, options);
+        }
+
+        this.container = $(element).first();
+        this.options = $.extend({
+                editorType: "plainText",
+                styles: {
+                    "min-height": "200px",
+                    "height": "inherit"
+                },
+                classes: [],
+                value: "Please enter text ..."
+                // TODO: set all default values here
+            }, options);
+
+        if (!this.container.length) {
+            throw "Arte requires a DOM element";
+        }
+
+        // NEW: replace element reference to the new made element
+        // after it's initialized
+        this.element = this.__initialize();
+
+        this.__initEvents();
+
+        this.__type = this.options.editorType;
+
+        return this;
+    }
+
+    // Export Arte
+    window.Arte = Arte;
+
+    Arte.prototype = {
+        __initialize: function() {
+            var newElement;
+
+            if (this.options.editorType === "richText") {
+                newElement = $("<div/>", {
+                        class: "arte-richtext",
+                        contenteditable: true
+                    })
+                    .html(this.options.value);
+            } else {
+                newElement = $("<textarea/>", {
+                        class: "arte-plaintext",
+                        style: {
+                            height: "100%",
+                            width: "100%",
+                            padding: 0,
+                            border: 0
+                        }
+                    })
+                    .val(this.options.value);
+            }
+
+            newElement
+                // Apply default style
+                .css(this.options.styles)
+                // add custom classes
+                .addClass(this.options.classes.join(" "))
+                // insert newElement to the element container
+                .appendTo(this.container);
+
+            return newElement;
+        },
+
+        /* Methods */
+
+        /**
+         * Get or Set content of the element
+         * @params {string} value string to set content of element
+         * @returns {string} returns 'innerHTML' of the contentEditable element
+         * if in rich text mode or 'value' of the element if in plaintext mode
+         */
+        value: function() {
+            if (this.__type === "plainText") {
+                return $.fn.val.apply(this.element, arguments);
+            } else {
+                return $.fn.html.apply(this.element, arguments);
+            }
+        },
+
+        /**
+         * Gets outerHtml of the element
+         * @returns {string} returns 'outerHTML' of the element
+         */
+        outerValue: function() {
+            return this.element.get(0).outerHTML;
+        },
+
+        /**
+         * Calls a focus event on the contentEditable element, moves the cursor
+         * to the end of that element, and fires an onselectionchange event
+         */
+        focus: function() {
+            var elem = this.element[0];
+            var range;
+            var sel;
+
+            this.element.trigger("focus");
+
+            // Moves the cursor to the end of the element
+            if (elem.selectionStart >= 0) {
+                // Works only on textarea elements
+                elem.selectionStart = elem.selectionEnd = elem.value.length;
+            } else if (typeof elem.createTextRange !== "undefined") {
+                // Fallback for textarea elements without support to selectionStart
+                range = elem.createTextRange();
+                range.collapse(false);
+                range.select();
+            } else if (this.__type === "richText" && document.createRange && window.getSelection) {
+                // Works only on contenteditable
+                range = document.createRange();
+                sel = window.getSelection();
+
+                while (elem.lastChild) {
+                    elem = elem.lastChild;
+                }
+                range.setStart(elem, elem.nodeValue.length);
+                range.collapse(true);
+
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+
+            return this;
+        },
+
+        destroy: function(options) {
+            this.triggerEvent("arte-destroy");
+
+            if (options && options.removeContent) {
+                this.element.empty();
+            } else {
+                this.element.remove();
+            }
+        }
+    };
+
+});