From b3cd02b5c9013c78b410ee90b1dd9a0f9265b08c Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 16 Oct 2013 07:43:26 -0500
Subject: [PATCH] Simple pager for slider, needs styles

---
 dist/css/ionic.css        | 17 +++++++++++++++++
 dist/js/ionic.js          | 29 +++++++++++++++++++++++++++++
 js/views/slideBox.js      | 29 +++++++++++++++++++++++++++++
 scss/ionic/_slideBox.scss | 24 ++++++++++++++++++++++++
 test/slideBox.html        | 14 +++++++++++++-
 5 files changed, 112 insertions(+), 1 deletion(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 0aca07179d..11c39dd6a6 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -3021,6 +3021,8 @@ a.button {
   padding: 10px; }
 
 .slide-box {
+  background-color: #000;
+  position: relative;
   overflow: hidden; }
 
 .slide-box-items {
@@ -3040,6 +3042,21 @@ a.button {
   .slide-box-content img {
     width: 100%; }
 
+.slide-box-pager {
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  text-align: center; }
+  .slide-box-pager > * {
+    display: inline-block;
+    text-decoration: none;
+    margin: 0px 5px;
+    color: #fff;
+    opacity: 0.5; }
+    .slide-box-pager > *.active {
+      -webkit-transition: opacity 0.4s ease-in;
+      opacity: 1; }
+
 .slide-in-up {
   opacity: 0;
   -webkit-transform: translate3d(0, 100%, 0);
diff --git a/dist/js/ionic.js b/dist/js/ionic.js
index 3ddd526fcb..ccdf803e4f 100644
--- a/dist/js/ionic.js
+++ b/dist/js/ionic.js
@@ -2278,10 +2278,20 @@ window.ionic = {
     var _this = this;
 
     this.el = opts.el;
+    this.pager = this.el.querySelector('.slide-box-pager');
 
+    // The drag threshold is the pixel delta that will trigger a drag (to 
+    // avoid accidental dragging)
     this.dragThresholdX = opts.dragThresholdX || 10;
+    // The velocity threshold is a velocity of drag that indicates a "swipe". This
+    // number is taken from hammer.js's calculations
     this.velocityXThreshold = opts.velocityXThreshold || 0.3;
 
+    // Initialize the slide index to the first page and update the pager
+    this.slideIndex = 0;
+    this._updatePager();
+
+
     // Listen for drag and release events
     window.ionic.onGesture('drag', function(e) {
       _this._handleDrag(e);
@@ -2324,6 +2334,8 @@ window.ionic = {
 
       // Update the slide index
       this.slideIndex = Math.ceil(offsetX / slideWidth);
+
+      this._updatePager();
     },
 
     /**
@@ -2337,6 +2349,23 @@ window.ionic = {
       return this.slideIndex;
     },
 
+    /**
+     * If we have a pager, update the active page when the current slide
+     * changes.
+     */
+    _updatePager: function() {
+      if(!this.pager) {
+        return;
+      }
+      for(var i = 0, j = this.pager.children.length; i < j; i++) {
+        if(i == this.slideIndex) {
+          this.pager.children[i].classList.add('active');
+        } else {
+          this.pager.children[i].classList.remove('active');
+        }
+      }
+    },
+
     _initDrag: function() {
       this._isDragging = false;
       this._drag = null;
diff --git a/js/views/slideBox.js b/js/views/slideBox.js
index 22832abd19..1e83759e33 100644
--- a/js/views/slideBox.js
+++ b/js/views/slideBox.js
@@ -12,10 +12,20 @@
     var _this = this;
 
     this.el = opts.el;
+    this.pager = this.el.querySelector('.slide-box-pager');
 
+    // The drag threshold is the pixel delta that will trigger a drag (to 
+    // avoid accidental dragging)
     this.dragThresholdX = opts.dragThresholdX || 10;
+    // The velocity threshold is a velocity of drag that indicates a "swipe". This
+    // number is taken from hammer.js's calculations
     this.velocityXThreshold = opts.velocityXThreshold || 0.3;
 
+    // Initialize the slide index to the first page and update the pager
+    this.slideIndex = 0;
+    this._updatePager();
+
+
     // Listen for drag and release events
     window.ionic.onGesture('drag', function(e) {
       _this._handleDrag(e);
@@ -58,6 +68,8 @@
 
       // Update the slide index
       this.slideIndex = Math.ceil(offsetX / slideWidth);
+
+      this._updatePager();
     },
 
     /**
@@ -71,6 +83,23 @@
       return this.slideIndex;
     },
 
+    /**
+     * If we have a pager, update the active page when the current slide
+     * changes.
+     */
+    _updatePager: function() {
+      if(!this.pager) {
+        return;
+      }
+      for(var i = 0, j = this.pager.children.length; i < j; i++) {
+        if(i == this.slideIndex) {
+          this.pager.children[i].classList.add('active');
+        } else {
+          this.pager.children[i].classList.remove('active');
+        }
+      }
+    },
+
     _initDrag: function() {
       this._isDragging = false;
       this._drag = null;
diff --git a/scss/ionic/_slideBox.scss b/scss/ionic/_slideBox.scss
index b67ca29a3a..b53440e204 100644
--- a/scss/ionic/_slideBox.scss
+++ b/scss/ionic/_slideBox.scss
@@ -1,4 +1,6 @@
 .slide-box {
+  background-color: #000;
+  position: relative;
   // Make sure items don't scroll over ever
   overflow: hidden;
 }
@@ -23,3 +25,25 @@
     width: 100%;
   }
 }
+
+.slide-box-pager {
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  text-align: center;
+
+  > * {
+    display: inline-block;
+    text-decoration: none;
+    margin: 0px 5px;
+    color: #fff;
+
+    opacity: 0.5;
+
+
+    &.active {
+      -webkit-transition: opacity 0.4s ease-in;
+      opacity: 1;
+    }
+  }
+}
diff --git a/test/slideBox.html b/test/slideBox.html
index 8c09a0a1f3..ca799b29cb 100644
--- a/test/slideBox.html
+++ b/test/slideBox.html
@@ -6,6 +6,11 @@
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="../dist/css/ionic.css" rel="stylesheet">
+    <style>
+      #slide-box {
+        max-height: 400px;
+      }
+    </style>
   </head>
   <body>
 
@@ -29,6 +34,11 @@
                 <img src="http://i677.photobucket.com/albums/vv137/smileytrucker/cow-toy-car-stuck-head-1259518194w.jpg">
               </div>
             </div>
+            <div class="slide-box-pager">
+              <span>1</span>
+              <span>2</span>
+              <span>3</span>
+            </div>
           </div>
         </div>
       </main>
@@ -39,7 +49,9 @@
 
     <script>
       var b = document.getElementById('slide-box');
-      var box = new ionic.views.SlideBox({el: b});
+      var box = new ionic.views.SlideBox({
+        el: b
+      });
     </script>
   </body>
 </html>