More slide stuff working

2026-03-13 10:22:08 +08:00 · 2013-12-16 09:52:03 -06:00
parent 8d42f856da
commit 196e015015
8 changed files with 123 additions and 48 deletions
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2601,9 +2601,6 @@ body, .ionic-body {
  -moz-transform-origin: left top;
  transform-origin: left top;
  -webkit-backface-visibility: hidden; }
-  .scroll.scroll-paging {
-    white-space: nowrap;
-    font-size: 0; }

 .scroll-bar {
  position: absolute;
@@ -4415,9 +4412,7 @@ button.item-button-right:after {
  background-color: #000; }

 .slider-slides {
-  position: relative;
-  white-space: nowrap;
-  font-size: 0; }
+  position: relative; }

 .slider-slide {
  display: block;
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -541,6 +541,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
      });

      $scope.$watch('rightButtons', function(val) {
+        console.log('Right buttons changed');
        // Resize the title since the buttons have changed
        hb.align();
      });
@@ -1816,7 +1817,10 @@ angular.module('ionic.ui.slideBox', [])
    restrict: 'E',
    replace: true,
    transclude: true,
-    scope: {},
+    scope: {
+      showPager: '@',
+      onSlideChanged: '&'
+    },
    controller: ['$scope', '$element', function($scope, $element) {
      var _this = this;

@@ -1824,10 +1828,13 @@ angular.module('ionic.ui.slideBox', [])
        el: $element[0],
        slidesChanged: function() {
          $scope.currentSlide = slider.getPos();
+
+          // Occasionally we need to trigger a digest
          $timeout(function() {});
        },
        callback: function(slideIndex) {
          $scope.currentSlide = slideIndex;
+          $scope.onSlideChanged({index:$scope.currentSlide});
          $scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
          $scope.$apply();
        }
@@ -1847,7 +1854,7 @@ angular.module('ionic.ui.slideBox', [])

    link: function($scope, $element, $attr, slideBoxCtrl) {
      // If the pager should show, append it to the slide box
-      if($attr.showPager !== "false") {
+      if($scope.$eval($scope.showPager) !== false) {
        var childScope = $scope.$new();
        var pager = angular.element('<pager></pager>');
        $element.append(pager);
--- a/js/ext/angular/src/directive/ionicBar.js
+++ b/js/ext/angular/src/directive/ionicBar.js
@@ -45,6 +45,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
      });

      $scope.$watch('rightButtons', function(val) {
+        console.log('Right buttons changed');
        // Resize the title since the buttons have changed
        hb.align();
      });
--- a/js/ext/angular/src/directive/ionicSlideBox.js
+++ b/js/ext/angular/src/directive/ionicSlideBox.js
@@ -20,7 +20,10 @@ angular.module('ionic.ui.slideBox', [])
    restrict: 'E',
    replace: true,
    transclude: true,
-    scope: {},
+    scope: {
+      showPager: '@',
+      onSlideChanged: '&'
+    },
    controller: ['$scope', '$element', function($scope, $element) {
      var _this = this;

@@ -28,10 +31,13 @@ angular.module('ionic.ui.slideBox', [])
        el: $element[0],
        slidesChanged: function() {
          $scope.currentSlide = slider.getPos();
+
+          // Occasionally we need to trigger a digest
          $timeout(function() {});
        },
        callback: function(slideIndex) {
          $scope.currentSlide = slideIndex;
+          $scope.onSlideChanged({index:$scope.currentSlide});
          $scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
          $scope.$apply();
        }
@@ -51,7 +57,7 @@ angular.module('ionic.ui.slideBox', [])

    link: function($scope, $element, $attr, slideBoxCtrl) {
      // If the pager should show, append it to the slide box
-      if($attr.showPager !== "false") {
+      if($scope.$eval($scope.showPager) !== false) {
        var childScope = $scope.$new();
        var pager = angular.element('<pager></pager>');
        $element.append(pager);
--- a/js/ext/angular/test/list.html
+++ b/js/ext/angular/test/list.html
@@ -6,7 +6,40 @@
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/angular/angular.js"></script>
+    <script src="../../../../dist/js/angular/angular-animate.js"></script>
+    <script src="../../../../dist/js/angular/angular-route.js"></script>
+    <script src="../../../../dist/js/angular/angular-touch.js"></script>
+    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
    <style>
+      .box {
+        width: 100%;
+        height: 50px;
+        color: #fff;
+      }
+      .box h1 {
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        margin-top: -50px;
+
+        color: #fff;
+
+        font-size: 60px;
+        text-align: center;
+        font-weight: bold;
+      }
+      .blue {
+        background-color: rgb(71, 138, 238);
+      }
+      .yellow {
+        background-color: rgb(233, 233, 109);
+      }
+      .pink {
+        background-color: rgb(233, 109, 233);
+      }
      .my-repeat-animation > .ng-enter, 
      .my-repeat-animation > .ng-leave, 
      .my-repeat-animation > .ng-move {
@@ -124,6 +157,23 @@
            <i class="icon {{ item.icon }}"></i>
            {{ item.text }}
          </a>
+          <div class="item">
+            <slide-box show-pager="false">
+              <slide>
+                <div class="box blue">
+                  <h1>BLUE {{slideBox.slideIndex}}</h1>
+                </div>
+              </slide>
+              <slide>
+                <div class="box yellow">
+                  <h1>YELLOW {{slideBox.slideIndex}}</h1>
+                </div>
+              </slide>
+              <slide>
+                <div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>
+              </slide>
+            </slide-box>
+          </div>

        </list>

@@ -131,15 +181,8 @@

    </pane>

-    <script src="../../../../dist/js/ionic.js"></script>
-    <script src="../../../../dist/js/angular/angular.js"></script>
-    <script src="../../../../dist/js/angular/angular-animate.js"></script>
-    <script src="../../../../dist/js/angular/angular-route.js"></script>
-    <script src="../../../../dist/js/angular/angular-touch.js"></script>
-    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
-    <script src="../../../../dist/js/ionic-angular.js"></script>
    <script>
-      angular.module('navTest', ['ionic.ui.list', 'ionic.ui.content'])
+      angular.module('navTest', ['ionic'])

      .controller('TestCtrl', function($scope, $timeout) {

--- a/js/ext/angular/test/slideBox.html
+++ b/js/ext/angular/test/slideBox.html
@@ -17,19 +17,14 @@
      .box {
        width: 100%;
        height: 100%;
-        color: #fff;
-      }
-      .box h1 {
-        position: absolute;
-        top: 50%;
-        width: 100%;
-        margin-top: -50px;
-
-        color: #fff;
-
-        font-size: 60px;
+        padding-top: 80px;
+        color: #000;
+        background-color: #fff;
        text-align: center;
-        font-weight: bold;
+      }
+      .box > * {
+        font-weight: 100;
+        font-family: 'Helvetica Neue';
      }
      .blue {
        background-color: rgb(71, 138, 238);
@@ -40,24 +35,34 @@
      .pink {
        background-color: rgb(233, 109, 233);
      }
+      .slider-pager .slider-pager-page {
+        color: #000;
+      }
    </style>
  </head>
  <body>

    <div ng-controller="SlideCtrl">
-      <slide-box>
+      <header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
+      <slide-box on-slide-changed="slideChanged(index)">
        <slide>
-          <div class="box blue">
-            <h1>BLUE {{slideBox.slideIndex}}</h1>
+          <div class="box">
+            <h3>Thank you for choosing my app!</h3>
+            <p>
+              We've worked super hard to make you happy.
+            </p>
+            <p>
+              But if you are angry, please contact us at support@example.com
+            </p>
          </div>
        </slide>
        <slide>
-          <div class="box yellow">
-            <h1>YELLOW {{slideBox.slideIndex}}</h1>
+          <div class="box">
          </div>
        </slide>
        <slide>
-          <div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>
+          <div class="box">
+          </div>
        </slide>
      </slide-box>
    </div>
@@ -65,12 +70,37 @@
      angular.module('slideBoxTest', ['ionic'])

      .controller('SlideCtrl', function($scope) {
-        $scope.onScroll = function(top, left) {
-          console.log('On scroll', top, left, $scope.scrollView.__maxScrollLeft);
-        };
-        $scope.$on('slideBox.slideChanged', function(e, index) {
+        $scope.leftButtons = [
+          {
+            content: 'Skip',
+            type: 'button-positive button-clear',
+            onTap: function(e) {
+            }
+          }
+        ];
+        $scope.slideChanged = function(index) {
          console.log('Slide changed', index);
-        });
+          if(index == 2) {
+            $scope.rightButtons = [
+              {
+                content: 'Start using MyApp',
+                type: 'button-positive button-clear',
+                onTap: function(e) {
+                }
+              }
+            ];
+          } else {
+            $scope.rightButtons = [
+              {
+                content: 'Next',
+                type: 'button-positive button-clear',
+                onTap: function(e) {
+                }
+              }
+            ];
+          }
+          $scope.$apply();
+        };
      });
    </script>
  </body>
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -100,11 +100,6 @@ body, .ionic-body {
  @include transform-origin(left, top);
  //-webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
-
-  &.scroll-paging {
-    white-space: nowrap;
-    font-size: 0;
-  }
 }

 // Scroll bar styles
--- a/scss/_slide-box.scss
+++ b/scss/_slide-box.scss
@@ -13,8 +13,6 @@
 }
 .slider-slides {
  position: relative;
-  white-space: nowrap;
-  font-size: 0; // Remove the gaps between slide content items
 }

 .slider-slide {