don't extend native objects, #191

isso/js/app/dom.js

@@ -2,36 +2,39 @@ define(function() {
 
     "use strict";
 
-    window.Element.prototype.replace = function(el) {
+    function Element(node) {
+        this.obj = node;
+
+        this.replace = function (el) {
             var element = DOM.htmlify(el);
-        this.parentNode.replaceChild(element, this);
+            node.parentNode.replaceChild(element.obj, node);
             return element;
         };
 
-    window.Element.prototype.prepend = function(el) {
+        this.prepend = function (el) {
             var element = DOM.htmlify(el);
-        this.insertBefore(element, this.firstChild);
+            node.insertBefore(element.obj, node.firstChild);
             return element;
         };
 
-    window.Element.prototype.append = function(el) {
+        this.append = function (el) {
             var element = DOM.htmlify(el);
-        this.appendChild(element);
+            node.appendChild(element.obj);
             return element;
         };
 
-    window.Element.prototype.insertAfter = function(el) {
+        this.insertAfter = function(el) {
             var element = DOM.htmlify(el);
-        this.parentNode.insertBefore(element, this.nextSibling);
+            node.parentNode.insertBefore(element.obj, node.nextSibling);
             return element;
         };
 
-    window.Element.prototype.on = function(type, listener, prevent) {
+        /**
-        /*
+         * Shortcut for `Element.addEventListener`, prevents default event
-        Shortcut for `Element.addEventListener`, prevents default event
+         * by default, set :param prevents: to `false` to change that behavior.
-        by default, set :param prevents: to `false` to change that behavior.
          */
-        this.addEventListener(type, function(event) {
+        this.on = function(type, listener, prevent) {
+            node.addEventListener(type, function(event) {
                 listener(event);
                 if (prevent === undefined || prevent) {
                     event.preventDefault();
@@ -39,64 +42,87 @@ define(function() {
             });
         };
 
-    window.Element.prototype.toggle = function(type, a, b) {
+        /**
-        /*
+         * Toggle between two internal states on event :param type: e.g. to
-        Toggle between two internal states on event :param type: e.g. to
+         * cycle form visibility. Callback :param a: is called on first event,
-        cycle form visibility. Callback :param a: is called on first event,
+         * :param b: next time.
-        :param b: next time.
+         *
-
+         * You can skip to the next state without executing the callback with
-        You can skip to the next state without executing the callback with
+         * `toggler.next()`. You can prevent a cycle when you call `toggler.wait()`
-        `toggler.next()`. You can prevent a cycle when you call `toggler.wait()`
+         * during an event.
-        during an event.
          */
+        this.toggle = function(type, a, b) {
 
-        function Toggle(el, a, b) {
+            var toggler = new Toggle(a, b);
-            this.state = false;
-            this.el = el;
-            this.a = a;
-            this.b = b;
-        }
-
-        Toggle.prototype.next = function next() {
-            if (! this.state) {
-                this.state = true;
-                this.a(this);
-            } else {
-                this.state = false;
-                this.b(this);
-            }
-        };
-
-        Toggle.prototype.wait = function wait() {
-            this.state = ! this.state;
-        };
-
-        var toggler = new Toggle(this, a, b);
             this.on(type, function() {
                 toggler.next();
             });
         };
 
-    window.Element.prototype.detach = function() {
+        this.detach = function() {
-        /*
+            // Detach an element from the DOM and return it.
-        Detach an element from the DOM and return it.
+            node.parentNode.removeChild(this.obj);
-         */
-
-        this.parentNode.removeChild(this);
             return this;
         };
 
-    window.Element.prototype.remove = function() {
+        this.remove = function() {
-        // Mimimi, I am IE and I am so retarded, mimimi.
+            // IE quirks
-        this.parentNode.removeChild(this);
+            node.parentNode.removeChild(this.obj);
         };
 
-    window.Element.prototype.show = function() {
+        this.show = function() {
-        this.style.display = "block";
+            node.style.display = "block";
         };
 
-    window.Element.prototype.hide = function() {
+        this.hide = function() {
-        this.style.display = "none";
+            node.style.display = "none";
+        };
+
+        this.setText = function(text) {
+            node.textContent = text;
+        };
+
+        this.setHtml = function(html) {
+            node.innerHTML = html;
+        };
+
+        this.blur = function() { node.blur() };
+        this.focus = function() { node.focus() };
+        this.scrollIntoView = function(args) { node.scrollIntoView(args) };
+
+        this.setAttribute = function(key, value) { node.setAttribute(key, value) };
+        this.getAttribute = function(key) { node.getAttribute(key) };
+
+        this.classList = node.classList;
+
+        Object.defineProperties(this, {
+            "textContent": {
+                get: function() { return node.textContent; },
+                set: function(textContent) { node.textContent = textContent; }
+            },
+            "innerHTML": {
+                get: function() { return node.innerHTML; },
+                set: function(innerHTML) { node.innerHTML = innerHTML; }
+            }
+        });
+    }
+
+    var Toggle = function(a, b) {
+        this.state = false;
+
+        this.next = function() {
+            if (! this.state) {
+                this.state = true;
+                a(this);
+            } else {
+                this.state = false;
+                b(this);
+            }
+        };
+
+        this.wait = function() {
+            this.state = ! this.state;
+        };
     };
 
     var DOM = function(query, root, single) {
@@ -115,31 +141,43 @@ define(function() {
             root = window.document;
         }
 
-        var elements = root.querySelectorAll(query);
+        if (root instanceof Element) {
+            root = root.obj;
+        }
+        var elements = [].slice.call(root.querySelectorAll(query), 0);
 
         if (elements.length === 0) {
             return null;
         }
 
         if (elements.length === 1 && single) {
-            return elements[0];
+            return new Element(elements[0]);
         }
 
-        return elements;
+        // convert NodeList to Array
+        elements = [].slice.call(elements, 0);
+
+        return elements.map(function(el) {
+            return new Element(el);
+        });
     };
 
-    DOM.htmlify = function(html) {
+    DOM.htmlify = function(el) {
         /*
         Convert :param html: into an Element (if not already).
         */
 
-        if (html instanceof window.Element) {
+        if (el instanceof Element) {
-            return html;
+            return el;
+        }
+
+        if (el instanceof window.Element) {
+            return new Element(el);
         }
 
         var wrapper = DOM.new("div");
-        wrapper.innerHTML = html;
+        wrapper.innerHTML = el;
-        return wrapper.firstChild;
+        return new Element(wrapper.firstChild);
     };
 
     DOM.new = function(tag, content) {

isso/js/app/lib/editor.js

@@ -3,6 +3,7 @@ define(["app/dom", "app/i18n"], function($, i18n) {
     "use strict";
 
     return function(el) {
+        el = $.htmlify(el);
         el.setAttribute("contentEditable", true);
 
         el.on("focus", function() {
@@ -21,5 +22,4 @@ define(["app/dom", "app/i18n"], function($, i18n) {
 
         return el;
     };
-
 });