v0.4.6 Resolves #15 and #16: Dispose only created extra DOM, online d…

…emo link
annexare · Jan 12, 2015 · 51bb6b1 · 51bb6b1
1 parent 52754f7
commit 51bb6b1
Show file tree

Hide file tree

Showing 15 changed files with 160 additions and 58 deletions.
diff --git a/bower.json b/bower.json
@@ -1,12 +1,13 @@
 {
     "name": "scrolly",
-    "version": "0.4.5",
+    "version": "0.4.6",
     "description": "Scrolly: fast vanilla JS scrollbar plugin.",
     "keywords": [
         "scroll", "scrollbar", "scrolly", "bar",
         "js", "javascript", "vanilla", "amd",
         "react", "reactjs", "component",
-        "jquery", "zepto", "jbone"
+        "jquery", "zepto", "jbone",
+        "annexare"
     ],
     "dependencies": {
     },

diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
     "name": "scrolly",
-    "version": "0.4.5",
+    "version": "0.4.6",
     "description": "Scrolly: fast vanilla JS scrollbar plugin.",
     "keywords": [
         "scroll", "scrollbar", "scrolly", "bar",
         "js", "javascript", "vanilla", "amd",
         "react", "reactjs", "component",
-        "jquery", "zepto", "jbone"
+        "jquery", "zepto", "jbone",
+        "annexare"
     ],
     "repository": {
         "type": "git",

diff --git a/public/css/styles-example.css b/public/css/styles-example.css
@@ -1,3 +1,3 @@
 body{font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;font-size:12px}article{clear:both;float:none;padding:.2em 1em}.scrolly{float:left;width:25%;height:400px}.scrolly>.area.test1{background:#f2e4d8}.scrolly>.area.test1.scrolly.area+.bar{background:#808ca6}.scrolly>.area.test1.scrolly.area+.bar .thumb{background:#283d59}.scrolly .scrolly{background:rgba(0,0,0,0.1);width:100%}
 
-/*  scrolly v0.4.5, 2015.01.01  */
+/*  scrolly v0.4.6, 2015.01.12  */
diff --git a/public/css/styles-scrolly.css b/public/css/styles-scrolly.css
diff --git a/public/index.html b/public/index.html
diff --git a/public/js/react-scrolly.js b/public/js/react-scrolly.js
@@ -1,4 +1,4 @@
-/*  scrolly v0.4.5, 2015.01.01  */
+/*  scrolly v0.4.6, 2015.01.12  */
 var dataSet = function initDataSet() {
     if (document.documentElement.dataset) {
         return function native(el, prop, value) {
@@ -37,8 +37,9 @@ var dataSet = function initDataSet() {
     'use strict';
 
     var title = 'Scrolly',
+        name = title.toLowerCase(),
         dataPrefix = function (param) {
-            return 'scrolly' + param;
+            return name + param;
         },
         message = function (text) {
             return title + ': ' + text;
@@ -190,6 +191,12 @@ var dataSet = function initDataSet() {
             thumbMinSize: 24,
 
             // Public methods
+            /**
+             * Main init, accepts string, nodes|node or $ as query.
+             * @param query
+             * @param params
+             * @returns Array|boolean
+             */
             bar: function (query, params) {
                 if (!query) {
                     console.log(message('No Query specified.'));
@@ -200,11 +207,7 @@ var dataSet = function initDataSet() {
                         ? document.querySelectorAll(query)
                         : query;
                 if (!$query.length) {
-                    if ($query instanceof HTMLElement) {
-                        return [this.barNode($query, params)];
-                    }
-                    console.log(message('Couldn\'t query:'), typeof query, query, params);
-                    return false;
+                    return [this.barNode($query, params)];
                 }
 
                 var ids = [];
@@ -214,7 +217,19 @@ var dataSet = function initDataSet() {
 
                 return ids;
             },
+            /**
+             * Init for a single node.
+             * @param node
+             * @param params
+             * @returns Number|boolean
+             */
             barNode: function (node, params) {
+                // Check Node type
+                if (!node || !node.nodeType) {
+                    console.log(message('Couldn\'t query:'), typeof node, node, params);
+                    return false;
+                }
+                // Check if already initialized
                 if (typeof dataSet(node, dataPrefix('id')) !== 'undefined') {
                     this.dispose(dataSet(node, dataPrefix('id')));
                 }
@@ -228,6 +243,7 @@ var dataSet = function initDataSet() {
 
                 var opts = params || {},
                     data = {
+                        dispose: {},
                         params: opts,
                         scrolled: 0,
                         visible: false
@@ -239,7 +255,13 @@ var dataSet = function initDataSet() {
 
                 // Area
                 addClass('area', node);
-                data.wrap = wrap(node, 'scrolly');
+                if (hasClass(name, node.parentNode)) {
+                    // Wrap exists
+                    data.wrap = node;
+                } else {
+                    data.wrap = wrap(node, name);
+                    data.dispose.wrap = true;
+                }
                 data.area = node;
 
                 // Bar
@@ -255,12 +277,14 @@ var dataSet = function initDataSet() {
                     } else {
                         data.bar.innerHTML = '';
                         data.thumb = data.bar.appendChild(div(thumbClassName));
+                        data.dispose.thumb = true;
                     }
                 } else {
                     var bar = div(barClassName);
                     data.thumb = bar.appendChild(div(thumbClassName));
                     data.bar = data.wrap.parentNode
                         .insertBefore(bar, data.wrap.nextSibling);
+                    data.dispose.bar = true;
                 }
 
                 // Store Data
@@ -274,7 +298,7 @@ var dataSet = function initDataSet() {
             /**
              * Dispose Scrolly from node. Remove all extra elements, unwrap.
              * @param id
-             * @returns {boolean}
+             * @returns boolean
              */
             dispose: function (id) {
                 var no = (
@@ -303,9 +327,17 @@ var dataSet = function initDataSet() {
                 // Cleanup
                 removeClass('area', data.area);
                 data.area.removeAttribute('data-' + dataPrefix('id'));
-                data.wrap.parentNode.insertBefore(data.area, data.wrap);
-                data.wrap.parentNode.removeChild(data.wrap);
-                data.bar.parentNode.removeChild(data.bar);
+                // Extra Nodes
+                if (data.dispose.wrap) {
+                    data.wrap.parentNode.insertBefore(data.area, data.wrap);
+                    data.wrap.parentNode.removeChild(data.wrap);
+                }
+                if (data.dispose.thumb) {
+                    data.thumb.parentNode.removeChild(data.thumb);
+                }
+                if (data.dispose.bar) {
+                    data.bar.parentNode.removeChild(data.bar);
+                }
                 // Well, we won't change all IDs to remove it
                 scrls[no] = false;
 
@@ -319,7 +351,7 @@ var dataSet = function initDataSet() {
             /**
              * Get Scrolly ID by current data object.
              * @param data
-             * @returns {*}
+             * @returns String
              */
             getID: function (data) {
                 return dataSet(data.area, dataPrefix('id'));