goTo function done

ganlanyuan · Dec 21, 2016 · cdbef1c · cdbef1c
1 parent c991e87
commit cdbef1c
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # tiny-slider
-![version](https://img.shields.io/badge/Version-1.0.4-green.svg)   
+![version](https://img.shields.io/badge/Version-1.1.4-green.svg)   
 Tiny slider for all purposes, inspired by [Owl Carousel](http://owlcarousel.owlgraphic.com/).   
 <!-- [demo](http://creatiointl.org/william/tiny-slider/v1-new/demo/)    -->
 The previous version is still available in branch [v0](https://github.com/ganlanyuan/tiny-slider/tree/v0), you may want to know how to [transfer from v0](transfer.md).
@@ -138,14 +138,13 @@ info = {
 ```
 
 ## Methods
+#####getInfo
 ```javascript
+// get info object
 var slider = tns(...);
-
-// getInfo:
-// return info object
 slider.getInfo();
 
-document.querySelector('.my-next-button').addEventListener('click', function () {
+document.querySelector('.next-button').onclick = function () {
   // get slider info
   var info = slider.getInfo(),
       indexPrev = info.indexCached;
@@ -154,14 +153,32 @@ document.querySelector('.my-next-button').addEventListener('click', function ()
   // update style based on index
   info.slideItems[indexPrev].classList.remove('active');
   info.slideItems[indexCurrent].classList.add('active');
-}, false);
+};
+```
+
+##### goTo
+```javascript
+// go to slides by number or keywords
+var slider = tns(...);
+slider.goTo(3);
+slider.goTo('prev');
+slider.goTo('previous');
+slider.goTo('next');
+slider.goTo('first');
+slider.goTo('last');
+
+document.querySelector('.goto-button').onclick = function () {
+  slider.goTo(3);
+};
+```
 
-// destory
+##### destory
+```javascript
+var slider = tns(...);
 slider.destory();
 ```
 ## Custom Events
-Available events:   
-`indexChanged`, `initialized`, `transitionStart`, `transitionEnd`, `touchStart`, `touchMove` and `touchEnd`.
+Available events include: `initialized`, `indexChanged`, `transitionStart`, `transitionEnd`, `touchStart`, `touchMove` and `touchEnd`.
 ```javascript
 var slider = tns(...);
 
@@ -170,10 +187,10 @@ var customizedFunction = function (info) {
   console.log(info.event.type, info.container.id);
 }
 
-// do something on transitionend
+// bind function to event
 slider.events.on('transitionEnd', customizedFunction);
 
-// remove event binding
+// remove function binding
 slider.events.off('transitionEnd', customizedFunction);
 ```
 #### Fallback

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "tiny-slider",
-  "version": "1.0.4",
+  "version": "1.1.4",
   "homepage": "https://github.com/ganlanyuan/tiny-slider",
   "authors": [
     "WilliamLin <[email protected]>"

diff --git a/dist/min/tiny-slider.js b/dist/min/tiny-slider.js
diff --git a/dist/min/tiny-slider.native.js b/dist/min/tiny-slider.native.js
diff --git a/dist/tiny-slider.js b/dist/tiny-slider.js
@@ -558,7 +558,7 @@ gn.unwrap = function (els) {
 };
 /**
   * tiny-slider
-  * @version 1.0.4
+  * @version 1.1.4
   * @author William Lin
   * @license The MIT License (MIT)
   * @github https://github.com/ganlanyuan/tiny-slider/
@@ -1838,36 +1838,50 @@ var tns = (function () {
       getInfo: info,
       events: events,
       goTo: function (targetIndex) {
-        var indexBase = (mode === 'gallery') ? 0 : cloneCount;
-        switch (targetIndex) {
-          case 'first':
-            targetIndex = indexBase;
-            break;
-          case 'last':
-            targetIndex = indexBase + slideCount - 1;
-            break;
-          case 'prev':
-          case 'previous':
-            targetIndex = index - 1;
-            break;
-          case 'next':
-            targetIndex = index + 1;
-            break;
-        }
-
+        // define: absolute index
+        // define: absolute target index
+        // define: task completed status, initilized to false
         var absIndex = index%slideCount,
-            absTargetIndex = targetIndex%slideCount;
-
+            absTargetIndex,
+            completed = false;
+        // redefine: absolute index when it's minus
         if (absIndex < 0) { absIndex += slideCount; }
-        if (absTargetIndex < 0) { absTargetIndex += slideCount; }
 
-          console.log(index, absTargetIndex, absIndex);
-        if (absIndex !== absTargetIndex) {
+        if (typeof targetIndex === 'string') {
+          switch (targetIndex) {
+            // run click functions when target is 'prev' or 'next'
+            // set completed status to true
+            case 'prev':
+            case 'previous':
+              onClickPrev();
+              completed = true;
+              break;
+            case 'next':
+              onClickNext();
+              completed = true;
+              break;
+            // set absolute target index
+            case 'first':
+              absTargetIndex = 0;
+              break;
+            case 'last':
+              absTargetIndex = slideCount - 1;
+              break;
+          }
+        } else {
+          // set absolute target index
+          absTargetIndex = targetIndex%slideCount;
+          if (absTargetIndex < 0) { absTargetIndex += slideCount; }
+        }
+
+        // when it's not completed and
+        // absolute index not equal to absolute target index
+        // => reset index and render
+        if (!completed && absIndex !== absTargetIndex) {
           index += absTargetIndex - absIndex;
-          console.log(index);
           checkIndex();
 
-          // render();
+          render();
         }
 
       },

diff --git a/dist/tiny-slider.native.js b/dist/tiny-slider.native.js
@@ -1,6 +1,6 @@
 /**
   * tiny-slider
-  * @version 1.0.4
+  * @version 1.1.4
   * @author William Lin
   * @license The MIT License (MIT)
   * @github https://github.com/ganlanyuan/tiny-slider/
@@ -1280,36 +1280,50 @@ var tns = (function () {
       getInfo: info,
       events: events,
       goTo: function (targetIndex) {
-        var indexBase = (mode === 'gallery') ? 0 : cloneCount;
-        switch (targetIndex) {
-          case 'first':
-            targetIndex = indexBase;
-            break;
-          case 'last':
-            targetIndex = indexBase + slideCount - 1;
-            break;
-          case 'prev':
-          case 'previous':
-            targetIndex = index - 1;
-            break;
-          case 'next':
-            targetIndex = index + 1;
-            break;
-        }
-
+        // define: absolute index
+        // define: absolute target index
+        // define: task completed status, initilized to false
         var absIndex = index%slideCount,
-            absTargetIndex = targetIndex%slideCount;
-
+            absTargetIndex,
+            completed = false;
+        // redefine: absolute index when it's minus
         if (absIndex < 0) { absIndex += slideCount; }
-        if (absTargetIndex < 0) { absTargetIndex += slideCount; }
 
-          console.log(index, absTargetIndex, absIndex);
-        if (absIndex !== absTargetIndex) {
+        if (typeof targetIndex === 'string') {
+          switch (targetIndex) {
+            // run click functions when target is 'prev' or 'next'
+            // set completed status to true
+            case 'prev':
+            case 'previous':
+              onClickPrev();
+              completed = true;
+              break;
+            case 'next':
+              onClickNext();
+              completed = true;
+              break;
+            // set absolute target index
+            case 'first':
+              absTargetIndex = 0;
+              break;
+            case 'last':
+              absTargetIndex = slideCount - 1;
+              break;
+          }
+        } else {
+          // set absolute target index
+          absTargetIndex = targetIndex%slideCount;
+          if (absTargetIndex < 0) { absTargetIndex += slideCount; }
+        }
+
+        // when it's not completed and
+        // absolute index not equal to absolute target index
+        // => reset index and render
+        if (!completed && absIndex !== absTargetIndex) {
           index += absTargetIndex - absIndex;
-          console.log(index);
           checkIndex();
 
-          // render();
+          render();
         }
 
       },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tiny-slider",
-  "version": "1.0.4",
+  "version": "1.1.4",
   "description": "Pure tiny javascript slider for all purposes.",
   "main": "dist/tiny-slider.js",
   "style": "dist/tiny-slider.css",

diff --git a/src/tiny-slider.native.js b/src/tiny-slider.native.js
@@ -1,6 +1,6 @@
 /**
   * tiny-slider
-  * @version 1.0.4
+  * @version 1.1.4
   * @author William Lin
   * @license The MIT License (MIT)
   * @github https://github.com/ganlanyuan/tiny-slider/
@@ -1280,36 +1280,50 @@ var tns = (function () {
       getInfo: info,
       events: events,
       goTo: function (targetIndex) {
-        var indexBase = (mode === 'gallery') ? 0 : cloneCount;
-        switch (targetIndex) {
-          case 'first':
-            targetIndex = indexBase;
-            break;
-          case 'last':
-            targetIndex = indexBase + slideCount - 1;
-            break;
-          case 'prev':
-          case 'previous':
-            targetIndex = index - 1;
-            break;
-          case 'next':
-            targetIndex = index + 1;
-            break;
-        }
-
+        // define: absolute index
+        // define: absolute target index
+        // define: task completed status, initilized to false
         var absIndex = index%slideCount,
-            absTargetIndex = targetIndex%slideCount;
-
+            absTargetIndex,
+            completed = false;
+        // redefine: absolute index when it's minus
         if (absIndex < 0) { absIndex += slideCount; }
-        if (absTargetIndex < 0) { absTargetIndex += slideCount; }
 
-          console.log(index, absTargetIndex, absIndex);
-        if (absIndex !== absTargetIndex) {
+        if (typeof targetIndex === 'string') {
+          switch (targetIndex) {
+            // run click functions when target is 'prev' or 'next'
+            // set completed status to true
+            case 'prev':
+            case 'previous':
+              onClickPrev();
+              completed = true;
+              break;
+            case 'next':
+              onClickNext();
+              completed = true;
+              break;
+            // set absolute target index
+            case 'first':
+              absTargetIndex = 0;
+              break;
+            case 'last':
+              absTargetIndex = slideCount - 1;
+              break;
+          }
+        } else {
+          // set absolute target index
+          absTargetIndex = targetIndex%slideCount;
+          if (absTargetIndex < 0) { absTargetIndex += slideCount; }
+        }
+
+        // when it's not completed and
+        // absolute index not equal to absolute target index
+        // => reset index and render
+        if (!completed && absIndex !== absTargetIndex) {
           index += absTargetIndex - absIndex;
-          console.log(index);
           checkIndex();
 
-          // render();
+          render();
         }
 
       },

diff --git a/tests/index2.html b/tests/index2.html
@@ -90,7 +90,7 @@
 
   var btn = document.querySelector('#goto');
   btn.onclick = function () {
-    inner.goTo('prev');
+    inner.goTo(33);
   }
 });
 </script>