Fixed multiple instance problem.

sciactive · May 29, 2017 · f73c800 · f73c800
1 parent 7200a86
commit f73c800
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 50 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -12,8 +12,12 @@
       font-size: 30px;
     }
   </style>
+  <script src="../lib/MultiCarousel.js"></script>
 </head>
 <body>
+  <p>
+    Multiple Items:
+  </p>
   <carousel id="MyCarousel">
     <item>1</item>
     <item>2</item>
@@ -31,7 +35,6 @@
     <button onclick="start()">Start</button>
     <button onclick="next()">Next</button>
   </div>
-  <script src="../lib/MultiCarousel.js"></script>
   <script>
     var carousel = new MultiCarousel({
       target: document.getElementById('MyCarousel'),
@@ -41,22 +44,61 @@
         count: 5
       }
     });
-
     function previous() {
       carousel.previous();
     }
-
     function pause() {
       carousel.pause();
     }
-
     function start() {
       carousel.start();
     }
-
     function next() {
       carousel.next();
     }
   </script>
+
+  <p>
+    Single Item:
+  </p>
+  <carousel id="MyCarousel2">
+    <item>1</item>
+    <item>2</item>
+    <item>3</item>
+    <item>4</item>
+    <item>5</item>
+    <item>6</item>
+    <item>7</item>
+    <item>8</item>
+  </carousel>
+  <div>
+    Methods:<br />
+    <button onclick="previous2()">Previous</button>
+    <button onclick="pause2()">Pause</button>
+    <button onclick="start2()">Start</button>
+    <button onclick="next2()">Next</button>
+  </div>
+  <script>
+    var carousel2 = new MultiCarousel({
+      target: document.getElementById('MyCarousel2'),
+      data: {
+        delay: 2000,
+        items: Array.prototype.slice.call(document.getElementById('MyCarousel2').children),
+        count: 1
+      }
+    });
+    function previous2() {
+      carousel2.previous();
+    }
+    function pause2() {
+      carousel2.pause();
+    }
+    function start2() {
+      carousel2.start();
+    }
+    function next2() {
+      carousel2.next();
+    }
+  </script>
 </body>
 </html>
diff --git a/lib/MultiCarousel.js b/lib/MultiCarousel.js
@@ -1,26 +1,31 @@
 var MultiCarousel = (function () { 'use strict';
 
 var template = (function () {
-  let transitioning = false, timer, width, transition;
   return {
     oncreate () {
+      this.set({
+        __transitioning: false,
+        __timer: null,
+        __width: null,
+        __transition: null
+      });
       const carousel = this.refs.carousel;
       const items = this.get("items");
       const count = this.get("count");
-      width = (100 / count)+"%";
+      this.set({__width: (100 / count)+"%"});
       for (let i = 0; i < items.length; i++) {
         this.refs.items.appendChild(items[i]);
-        items[i].style.width = width;
+        items[i].style.width = this.get("__width");
       }
       for (let i = 0; i < count; i++) {
         items[i].classList.add("active");
       }
-      transition = "left "+(this.get("transition") / 1000)+"s";
+      this.set({__transition: "left "+(this.get("transition") / 1000)+"s"});
       this.refs.items.style.left = "0";
-      this.refs.items.style.transition = transition;
+      this.refs.items.style.transition = this.get("__transition");
       if (items.length <= count) {
         // Don't animate.
-        transitioning = true;
+        this.set({__transitioning: true});
       } else {
         this.start();
       }
@@ -35,8 +40,8 @@ var template = (function () {
     },
     methods: {
       next () {
-        if (transitioning) return;
-        transitioning = true;
+        if (this.get("__transitioning")) return;
+        this.set({__transitioning: true});
         const children = this.refs.items.children;
         let foundActive = false;
         let previous;
@@ -52,28 +57,28 @@ var template = (function () {
             break;
           }
         }
-        this.refs.items.style.transition = transition;
-        this.refs.items.style.left = "-"+width;
+        this.refs.items.style.transition = this.get("__transition");
+        this.refs.items.style.left = "-"+this.get("__width");
         // Wait the transition time, then move the previous element to the end.
         setTimeout((function() {
           previous.classList.remove("active");
           this.refs.items.style.transition = "";
           this.refs.items.style.left = "0";
           this.refs.items.appendChild(previous);
-          transitioning = false;
+          this.set({__transitioning: false});
         }).bind(this), this.get("transition"));
       },
       previous () {
-        if (transitioning) return;
-        transitioning = true;
+        if (this.get("__transitioning")) return;
+        this.set({__transitioning: true});
         const children = this.refs.items.children;
         let previous = children[children.length - 1];
         previous.classList.add("active");
         this.refs.items.insertBefore(previous, children[0]);
         this.refs.items.style.transition = "";
-        this.refs.items.style.left = "-"+width;
+        this.refs.items.style.left = "-"+this.get("__width");
         setTimeout((function(){
-          this.refs.items.style.transition = transition;
+          this.refs.items.style.transition = this.get("__transition");
           this.refs.items.style.left = "0";
         }).bind(this), 0);
         // Wait the transition time.
@@ -86,16 +91,16 @@ var template = (function () {
             }
           }
           this.refs.items.style.transition = "";
-          transitioning = false;
+          this.set({__transitioning: false});
         }).bind(this), this.get("transition"));
       },
       pause () {
-        clearInterval(timer);
-        timer = null;
+        clearInterval(this.get("__timer"));
+        this.set({__timer: null});
       },
       start () {
-        if (!timer && this.get("delay") > 0) {
-          timer = setInterval(this.next.bind(this), this.get("delay"));
+        if (!this.get("__timer") && this.get("delay") > 0) {
+          this.set({__timer: setInterval(this.next.bind(this), this.get("delay"))});
         }
       }
     }
@@ -104,14 +109,14 @@ var template = (function () {
 
 function add_css () {
 	var style = createElement( 'style' );
-	style.id = "svelte-3829970927-style";
-	style.textContent = "\n  [svelte-3829970927].multicarousel, [svelte-3829970927] .multicarousel {\n    position: relative;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n  [svelte-3829970927].previous, [svelte-3829970927] .previous, [svelte-3829970927].next, [svelte-3829970927] .next {\n    position: absolute;\n    cursor: pointer;\n    width: 30px;\n    font-size: 20px;\n    font-family: \"Arial Narrow\", Arial, sans-serif;\n    font-weight: 900;\n    color: #fff;\n    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);\n    display: flex;\n    align-items: center;\n    height: 100%;\n    z-index: 1;\n    transform: scaleY(3);\n  }\n  [svelte-3829970927].previous, [svelte-3829970927] .previous {\n    left: 0;\n    justify-content: flex-end;\n  }\n  [svelte-3829970927].next, [svelte-3829970927] .next {\n    right: 0;\n    justify-content: flex-start;\n  }\n  [svelte-3829970927].items, [svelte-3829970927] .items {\n    white-space: nowrap;\n    position: relative;\n  }\n  [svelte-3829970927].items > *, [svelte-3829970927] .items > * {\n    display: none;\n  }\n  [svelte-3829970927].items > *.active, [svelte-3829970927] .items > *.active {\n    display: inline-block;\n  }\n";
+	style.id = "svelte-4003507193-style";
+	style.textContent = "\n  [svelte-4003507193].multicarousel, [svelte-4003507193] .multicarousel {\n    position: relative;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n  [svelte-4003507193].previous, [svelte-4003507193] .previous, [svelte-4003507193].next, [svelte-4003507193] .next {\n    position: absolute;\n    cursor: pointer;\n    width: 30px;\n    font-size: 20px;\n    font-family: \"Arial Narrow\", Arial, sans-serif;\n    font-weight: 900;\n    color: #fff;\n    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);\n    display: flex;\n    align-items: center;\n    height: 100%;\n    z-index: 1;\n    transform: scaleY(3);\n  }\n  [svelte-4003507193].previous, [svelte-4003507193] .previous {\n    left: 0;\n    justify-content: flex-end;\n  }\n  [svelte-4003507193].next, [svelte-4003507193] .next {\n    right: 0;\n    justify-content: flex-start;\n  }\n  [svelte-4003507193].items, [svelte-4003507193] .items {\n    white-space: nowrap;\n    position: relative;\n  }\n  [svelte-4003507193].items > *, [svelte-4003507193] .items > * {\n    display: none;\n  }\n  [svelte-4003507193].items > *.active, [svelte-4003507193] .items > *.active {\n    display: inline-block;\n  }\n";
 	appendNode( style, document.head );
 }
 
 function create_main_fragment ( state, component ) {
 	var div = createElement( 'div' );
-	setAttribute( div, 'svelte-3829970927', '' );
+	setAttribute( div, 'svelte-4003507193', '' );
 	div.className = "multicarousel";
 	component.refs.carousel = div;
 	var div_1 = createElement( 'div' );
@@ -175,7 +180,7 @@ function MultiCarousel ( options ) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	if ( !document.getElementById( "svelte-3829970927-style" ) ) add_css();
+	if ( !document.getElementById( "svelte-4003507193-style" ) ) add_css();
 
 	this._fragment = create_main_fragment( this._state, this );
 	if ( options.target ) this._fragment.mount( options.target, null );

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "multicarousel",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A multiple item JavaScript carousel UI component written with Svelte.",
   "main": "lib/MultiCarousel.js",
   "devDependencies": {

diff --git a/src/MultiCarousel.html b/src/MultiCarousel.html
@@ -9,26 +9,31 @@
 </div>
 
 <script>
-  let transitioning = false, timer, width, transition;
   export default {
     oncreate () {
+      this.set({
+        __transitioning: false,
+        __timer: null,
+        __width: null,
+        __transition: null
+      });
       const carousel = this.refs.carousel;
       const items = this.get("items");
       const count = this.get("count");
-      width = (100 / count)+"%";
+      this.set({__width: (100 / count)+"%"});
       for (let i = 0; i < items.length; i++) {
         this.refs.items.appendChild(items[i]);
-        items[i].style.width = width;
+        items[i].style.width = this.get("__width");
       }
       for (let i = 0; i < count; i++) {
         items[i].classList.add("active");
       }
-      transition = "left "+(this.get("transition") / 1000)+"s";
+      this.set({__transition: "left "+(this.get("transition") / 1000)+"s"});
       this.refs.items.style.left = "0";
-      this.refs.items.style.transition = transition;
+      this.refs.items.style.transition = this.get("__transition");
       if (items.length <= count) {
         // Don't animate.
-        transitioning = true;
+        this.set({__transitioning: true});
       } else {
         this.start();
       }
@@ -43,8 +48,8 @@
     },
     methods: {
       next () {
-        if (transitioning) return;
-        transitioning = true;
+        if (this.get("__transitioning")) return;
+        this.set({__transitioning: true});
         const children = this.refs.items.children;
         let foundActive = false;
         let previous;
@@ -60,28 +65,28 @@
             break;
           }
         }
-        this.refs.items.style.transition = transition;
-        this.refs.items.style.left = "-"+width;
+        this.refs.items.style.transition = this.get("__transition");
+        this.refs.items.style.left = "-"+this.get("__width");
         // Wait the transition time, then move the previous element to the end.
         setTimeout((function() {
           previous.classList.remove("active");
           this.refs.items.style.transition = "";
           this.refs.items.style.left = "0";
           this.refs.items.appendChild(previous);
-          transitioning = false;
+          this.set({__transitioning: false});
         }).bind(this), this.get("transition"));
       },
       previous () {
-        if (transitioning) return;
-        transitioning = true;
+        if (this.get("__transitioning")) return;
+        this.set({__transitioning: true});
         const children = this.refs.items.children;
         let previous = children[children.length - 1];
         previous.classList.add("active");
         this.refs.items.insertBefore(previous, children[0]);
         this.refs.items.style.transition = "";
-        this.refs.items.style.left = "-"+width;
+        this.refs.items.style.left = "-"+this.get("__width");
         setTimeout((function(){
-          this.refs.items.style.transition = transition;
+          this.refs.items.style.transition = this.get("__transition");
           this.refs.items.style.left = "0";
         }).bind(this), 0);
         // Wait the transition time.
@@ -94,16 +99,16 @@
             }
           }
           this.refs.items.style.transition = "";
-          transitioning = false;
+          this.set({__transitioning: false});
         }).bind(this), this.get("transition"));
       },
       pause () {
-        clearInterval(timer);
-        timer = null;
+        clearInterval(this.get("__timer"));
+        this.set({__timer: null});
       },
       start () {
-        if (!timer && this.get("delay") > 0) {
-          timer = setInterval(this.next.bind(this), this.get("delay"));
+        if (!this.get("__timer") && this.get("delay") > 0) {
+          this.set({__timer: setInterval(this.next.bind(this), this.get("delay"))});
         }
       }
     }