Enable / disable editors individually

OPTIONS.md

@@ -16,6 +16,7 @@ var editor = new MediumEditor('.editor', {
     - [`buttonLabels`](#buttonlabels)
     - [`contentWindow`](#contentwindow)
     - [`delay`](#delay)
+    - [`disable`](#disable)
     - [`disableReturn`](#disablereturn)
     - [`disableDoubleReturn`](#disabledoublereturn)
     - [`disableExtraSpaces`](#disableextraspaces)
@@ -132,6 +133,13 @@ The contentWindow object that contains the contenteditable element. MediumEditor
 
 Time in milliseconds to show the toolbar or anchor tag preview.
 
+***
+#### `disable`
+**Default:** `[]`
+
+Disable the Editor over elements that match listed selectors.
+Can be an array `['selector', 'selector2']` or a string `'selector'`.
+
 ***
 #### `disableReturn`
 **Default:** `false`

demo/index.html

@@ -26,15 +26,16 @@
         <h1>Medium Editor</h1>
         <div class="editable">
             <p>My father’s family name being <a href="https://en.wikipedia.org/wiki/Pip_(Great_Expectations)">Pirrip</a>, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip. So, I called myself Pip, and came to be called Pip.</p>
-            <p>I give Pirrip as my father’s family name, on the authority of his tombstone and my sister,—Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or my mother, and never saw any likeness of either of them (for their days were long before the days of photographs), my first fancies regarding what they were like were unreasonably derived from their tombstones. The shape of the letters on my father’s, gave me an odd idea that he was a square, stout, dark man, with curly black hair. From the character and turn of the inscription, “Also Georgiana Wife of the Above,” I drew a childish conclusion that my mother was freckled and sickly. To five little stone lozenges, each about a foot and a half long, which were arranged in a neat row beside their grave, and were sacred to the memory of five little brothers of mine,—who gave up trying to get a living, exceedingly early in that universal struggle,—I am indebted for a belief I religiously entertained that they had all been born on their backs with their hands in their trousers-pockets, and had never taken them out in this state of existence.</p>
+            <p class="not_editable">I have disabled editable of this block, so you can read further. I give Pirrip as my father’s family name, on the authority of his tombstone and my sister</p><p>,—Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or my mother, and never saw any likeness of either of them (for their days were long before the days of photographs), my first fancies regarding what they were like were unreasonably derived from their tombstones. The shape of the letters on my father’s, gave me an odd idea that he was a square, stout, dark man, with curly black hair. From the character and turn of the inscription, “Also Georgiana Wife of the Above,” I drew a childish conclusion that my mother was freckled and sickly. To five little stone lozenges, each about a foot and a half long, which were arranged in a neat row beside their grave, and were sacred to the memory of five little brothers of mine,—who gave up trying to get a living, exceedingly early in that universal struggle,—I am indebted for a belief I religiously entertained that they had all been born on their backs with their hands in their trousers-pockets, and had never taken them out in this state of existence.</p>
             <p>Ours was the marsh country, down by the river, within, as the river wound, twenty miles of the sea. My first most vivid and broad impression of the identity of things seems to me to have been gained on a memorable raw afternoon towards evening. At such a time I found out for certain that this bleak place overgrown with nettles was the churchyard; and that Philip Pirrip, late of this parish, and also Georgiana wife of the above, were dead and buried; and that Alexander, Bartholomew, Abraham, Tobias, and Roger, infant children of the aforesaid, were also dead and buried; and that the dark flat wilderness beyond the churchyard, intersected with dikes and mounds and gates, with scattered cattle feeding on it, was the marshes; and that the low leaden line beyond was the river; and that the distant savage lair from which the wind was rushing was the sea; and that the small bundle of shivers growing afraid of it all and beginning to cry, was Pip.</p>
         </div>
     </div>
     <p style="text-align: center;"><small><a style="color: #333;" target="_blank" href="http://www.goodreads.com/reader/475-great-expectations">Source</a></small></p>
     <script src="../dist/js/medium-editor.js"></script>
     <script>
         var editor = new MediumEditor('.editable', {
-            buttonLabels: 'fontawesome'
+            buttonLabels: 'fontawesome',
+            disable: '.not_editable'
         }),
         cssLink = document.getElementById('medium-editor-theme');
 

spec/events.spec.js

@@ -41,6 +41,12 @@ describe('MediumEditor.Events TestCase', function () {
         });
     });
 
+    describe('SelectiveHandlers', function () {
+        it('should not fire listener', function () {
+            // Currently fires at child. Kinda propagation?..
+        });
+    });
+
     describe('Off', function () {
         it('should unbind listener', function () {
             var el, editor, spy;

spec/init.spec.js

@@ -98,6 +98,7 @@ describe('Initialization TestCase', function () {
         it('should have a default set of options', function () {
             var defaultOptions = {
                 delay: 0,
+                disable: [],
                 disableReturn: false,
                 disableDoubleReturn: false,
                 disableExtraSpaces: false,

src/js/core.js

@@ -218,7 +218,7 @@
             selector = [selector];
         }
         // Convert NodeList (or other array like object) into an array
-        var elements = Array.prototype.slice.apply(selector);
+        var elements = MediumEditor.util.toArr(selector);
 
         // Loop through elements and convert textarea's into divs
         this.elements = [];
@@ -231,6 +231,21 @@
         }, this);
     }
 
+    function offDisabledElements(elements) {
+        // Should be checked that it exists outside the func.
+        elements.forEach(function (element) {
+            var i, disabled, disabledElements;
+            disabled = this.options.disable;
+            disabled = Array.isArray(disabled) ? disabled : [disabled];
+            for (i in disabled) {
+                disabledElements = MediumEditor.util.toArr(element.querySelectorAll(disabled[i]));
+                disabledElements.forEach(function (disabledElement) {
+                    disabledElement.setAttribute('contenteditable', 'false');
+                });
+            }
+        }, this);
+    }
+
     function setExtensionDefaults(extension, defaults) {
         Object.keys(defaults).forEach(function (prop) {
             if (extension[prop] === undefined) {
@@ -604,6 +619,10 @@
 
             createElementsArray.call(this, this.origElements);
 
+            if (this.options.disable) {
+                offDisabledElements.call(this, this.elements);
+            }
+
             if (this.elements.length === 0) {
                 return;
             }

src/js/defaults/options.js

@@ -5,6 +5,7 @@
         activeButtonClass: 'medium-editor-button-active',
         buttonLabels: false,
         delay: 0,
+        disable: [],
         disableReturn: false,
         disableDoubleReturn: false,
         disableExtraSpaces: false,

src/js/events.js

@@ -16,11 +16,27 @@
         // Helpers for event handling
 
         attachDOMEvent: function (targets, event, listener, useCapture) {
+            var selectiveListener = function (event) {
+                var i, disabled, target;
+                disabled = this.options.disable;
+                target = event.target;
+
+                if (disabled) {
+                    disabled = Array.isArray(disabled) ? disabled : [disabled];
+                    for (i in disabled) {
+                        if (target.matches && target.matches(disabled[i])) {
+                            return;
+                        }
+                    }
+                }
+                listener.apply(this, arguments);
+            }.bind(this);
+
             targets = MediumEditor.util.isElement(targets) || [window, document].indexOf(targets) > -1 ? [targets] : targets;
 
             Array.prototype.forEach.call(targets, function (target) {
-                target.addEventListener(event, listener, useCapture);
-                this.events.push([target, event, listener, useCapture]);
+                target.addEventListener(event, selectiveListener, useCapture);
+                this.events.push([target, event, listener, useCapture, selectiveListener]);
             }.bind(this));
         },
 
@@ -32,7 +48,7 @@
                 index = this.indexOfListener(target, event, listener, useCapture);
                 if (index !== -1) {
                     e = this.events.splice(index, 1)[0];
-                    e[0].removeEventListener(e[1], e[2], e[3]);
+                    e[0].removeEventListener(e[1], e[4], e[3]);
                 }
             }.bind(this));
         },
@@ -51,7 +67,7 @@
         detachAllDOMEvents: function () {
             var e = this.events.pop();
             while (e) {
-                e[0].removeEventListener(e[1], e[2], e[3]);
+                e[0].removeEventListener(e[1], e[4], e[3]);
                 e = this.events.pop();
             }
         },

src/js/util.js

@@ -1052,6 +1052,10 @@
             } else {
                 el.parentNode.removeChild(el);
             }
+        },
+
+        toArr: function (arraylike) {
+            return [].slice.call(arraylike);
         }
     };