chore: remove animation & type attributes, standard controller names

zulfinjuliant · Mar 18, 2014 · 83f4776 · 83f4776
1 parent 5117d56
commit 83f4776
Show file tree

Hide file tree

Showing 26 changed files with 256 additions and 330 deletions.
diff --git a/docs/tag-defs/index.js b/docs/tag-defs/index.js
@@ -2,9 +2,17 @@ module.exports = [
   {
     name: 'controller',
     transformFn: function(doc, tag) {
-      return '{@link ionic.controller:' + tag.description.trim() + '}';
+      var desc = tag.description.trim();
+      var id = desc.split(' ')[0];
+      var other = desc.split(' ').splice(1).join(' ');
+
+      var link = '{@link ionic.controller:' + id + '}';
+      return link + (other ? ' ' + other : '');
     }
   },
+  {
+    name: 'controllerBind',
+  },
   {
     name: 'parent',
     transformFn: function(doc, tag) {

diff --git a/docs/templates/api/api.template.html b/docs/templates/api/api.template.html
@@ -22,13 +22,15 @@ <h1 class="api-title">
   <$ doc.name $>
 <@ endif @>
 <@ if doc.parentLinks @>
+<br />
 <small>
-  (child of <$ doc.parentLinks $>)
+  Child of <$ doc.parentLinks $>
 </small>
 <@ endif @>
 <@ if doc.controller @>
+<br/>
 <small>
-  (controller: <$ doc.controller $>)
+  Controller: <$ doc.controller $>
 </small>
 <@ endif @>
 </h1>

diff --git a/gulpfile.js b/gulpfile.js
@@ -3,10 +3,10 @@ var buildConfig = require('./config/build.config.js');
 var changelog = require('conventional-changelog');
 var connect = require('connect');
 var dgeni = require('dgeni');
-var lunr = require('lunr');
+var es = require('event-stream');
 var htmlparser = require('htmlparser2');
+var lunr = require('lunr');
 var yaml = require('js-yaml');
-var es = require('event-stream');
 
 var http = require('http');
 var cp = require('child_process');
@@ -47,15 +47,15 @@ gulp.task('build', ['bundle', 'sass']);
 
 gulp.task('docs-index', function() {
   var idx = lunr(function() {
-    this.field('path'); 
+    this.field('path');
     this.field('title', {boost: 10});
     this.field('body');
     this.ref('path')
   });
   var ref = {};
 
   return gulp.src([
-    'tmp/ionic-site/docs/{components,guide,overview,angularjs}/**/*.{md,html}', 
+    'tmp/ionic-site/docs/{components,guide,overview,angularjs}/**/*.{md,html}',
     'tmp/ionic-site/tutorials/**/*.{md,html}'
   ])
     .pipe(es.map(function(file, callback) {
@@ -72,7 +72,7 @@ gulp.task('docs-index', function() {
 
       var properties =  yaml.safeLoad(yamlRaw);
       contents = contents.slice(yamlEndIndex+3);
-      
+
       if(properties.title && properties.layout) {
         title = properties.title;
         layout = properties.layout;
@@ -87,7 +87,7 @@ gulp.task('docs-index', function() {
           // Ignore any Jekyll expressions
           body += text.replace(/{%.*%}/, '', 'g');
         },
-      });      
+      });
       parser.write(contents);
       parser.end();
 
@@ -115,7 +115,7 @@ gulp.task('docs', function(done) {
 });
 
 var IS_WATCH = false;
-gulp.task('watch', function() {
+gulp.task('watch', ['bundle'], function() {
   IS_WATCH = true;
   gulp.watch('js/**/*.js', ['bundle']);
   gulp.watch('scss/**/*.scss', ['sass']);

diff --git a/js/controllers/sideMenuController.js b/js/controllers/sideMenuController.js
@@ -49,29 +49,43 @@
       };
     },
 
+    isOpenLeft: function() {
+      return this._leftShowing;
+    },
+
+    isOpenRight: function() {
+      return this._rightShowing;
+    },
+
     /**
      * Toggle the left menu to open 100%
      */
-    toggleLeft: function() {
+    toggleLeft: function(shouldOpen) {
+      if (arguments.length === 0) {
+        shouldOpen = !this._leftShowing;
+      }
       this.content.enableAnimation();
       var openAmount = this.getOpenAmount();
-      if(openAmount > 0) {
-        this.openPercentage(0);
-      } else {
+      if(shouldOpen) {
         this.openPercentage(100);
+      } else {
+        this.openPercentage(0);
       }
     },
 
     /**
      * Toggle the right menu to open 100%
      */
-    toggleRight: function() {
+    toggleRight: function(shouldOpen) {
+      if (arguments.length === 0) {
+        shouldOpen = !this._rightShowing;
+      }
       this.content.enableAnimation();
       var openAmount = this.getOpenAmount();
-      if(openAmount < 0) {
-        this.openPercentage(0);
-      } else {
+      if(shouldOpen) {
         this.openPercentage(-100);
+      } else {
+        this.openPercentage(0);
       }
     },
 

diff --git a/js/ext/angular/src/directive/ionicBar.js b/js/ext/angular/src/directive/ionicBar.js
@@ -17,17 +17,17 @@ angular.module('ionic.ui.header', ['ngAnimate', 'ngSanitize'])
  * @name ionHeaderBar
  * @module ionic
  * @restrict E
- * @controller ionicBar
+ * @controller ionicBar as $scope.$ionicHeaderBarController
  *
  * @description
  * Adds a fixed header bar above some content.
  *
  * Is able to have left or right buttons, and additionally its title can be
  * aligned through the {@link ionic.controller:ionicBar ionicBar controller}.
  *
- * @param {string=} model The model to assign this headerBar's
+ * @param {string=} controller-bind The scope variable to bind this header bar's
  * {@link ionic.controller:ionicBar ionicBar controller} to.
- * Defaults to assigning to $scope.headerBarController.
+ * Default: $scope.$ionicHeaderBarController.
  * @param {string=} align-title Where to align the title at the start.
  * Avaialble: 'left', 'right', or 'center'.  Defaults to 'center'.
  *
@@ -54,17 +54,17 @@ angular.module('ionic.ui.header', ['ngAnimate', 'ngSanitize'])
  * @name ionFooterBar
  * @module ionic
  * @restrict E
- * @controller ionicBar
+ * @controller ionicBar as $scope.$ionicFooterBarController
  *
  * @description
  * Adds a fixed footer bar below some content.
  *
  * Is able to have left or right buttons, and additionally its title can be
  * aligned through the {@link ionic.controller:ionicBar ionicBar controller}.
  *
- * @param {string=} model The model to assign this footerBar's
+ * @param {string=} controller-bind The scope variable to bind this footer bar's
  * {@link ionic.controller:ionicBar ionicBar controller} to.
- * Defaults to assigning to $scope.footerBarController.
+ * Default: $scope.$ionicFooterBarController.
  * @param {string=} align-title Where to align the title at the start.
  * Avaialble: 'left', 'right', or 'center'.  Defaults to 'center'.
  *
@@ -91,8 +91,8 @@ function barDirective(isHeader) {
     '<header class="bar bar-header" ng-transclude></header>' :
     '<footer class="bar bar-footer" ng-transclude></footer>';
   var BAR_MODEL_DEFAULT = isHeader ?
-    'headerBarController' :
-    'footerBarController';
+    '$ionicHeaderBarController' :
+    '$ionicFooterBarController';
   return ['$parse', function($parse) {
     return {
       restrict: 'E',
@@ -105,7 +105,7 @@ function barDirective(isHeader) {
           alignTitle: $attr.alignTitle || 'center'
         });
 
-        $parse($attr.model || BAR_MODEL_DEFAULT).assign($scope, hb);
+        $parse($attr.controllerBind || BAR_MODEL_DEFAULT).assign($scope, hb);
       }
     };
   }];

diff --git a/js/ext/angular/src/directive/ionicNavAnimation.js b/js/ext/angular/src/directive/ionicNavAnimation.js
diff --git a/js/ext/angular/src/directive/ionicNavBar.js b/js/ext/angular/src/directive/ionicNavBar.js
@@ -8,16 +8,18 @@ angular.module('ionic.ui.navBar', ['ionic.service.view', 'ngSanitize'])
  * @description
  * Controller for the {@link ionic.directive:ionNavBar} directive.
  */
-.controller('$ionicNavBar', ['$scope', '$element', '$ionicViewService', '$animate', '$compile',
+.controller('$ionicNavBar', [
+  '$scope',
+  '$element',
+  '$ionicViewService',
+  '$animate',
+  '$compile',
 function($scope, $element, $ionicViewService, $animate, $compile) {
   //Let the parent know about our controller too so that children of
-  //sibling content elements can know about us.
+  //sibling content elements can know about us
   $element.parent().data('$ionNavBarController', this);
 
-  var hb = this._headerBarView = new ionic.views.HeaderBar({
-    el: $element[0],
-    alignTitle: $scope.alignTitle || 'center'
-  });
+  var self = this;
 
   this.leftButtonsElement = angular.element(
     $element[0].querySelector('.buttons.left-buttons')
@@ -148,7 +150,7 @@ function($scope, $element, $ionicViewService, $animate, $compile) {
 
       var insert = oldTitleEl && angular.element(oldTitleEl) || null;
       $animate.enter(newTitleEl, $element, insert, function() {
-        hb.align();
+        self._headerBarView.align();
       });
 
       //Cleanup any old titles leftover (besides the one we already did replaceWith on)
@@ -174,7 +176,7 @@ function($scope, $element, $ionicViewService, $animate, $compile) {
  * @ngdoc directive
  * @name ionNavBar
  * @module ionic
- * @controller ionicNavBar
+ * @controller ionicNavBar as $scope.$ionicNavBarController
  * @restrict E
  *
  * @description
@@ -186,25 +188,26 @@ function($scope, $element, $ionicViewService, $animate, $compile) {
  * We can add buttons depending on the currently visible view using
  * {@link ionic.directive:ionNavButtons}.
  *
+ * Assign an [animation class](/docs/components#animations) to the element to
+ * enable animated changing of titles (recommended: 'slide-left-right' or 'nav-title-slide-ios7')
+ *
  * @usage
  *
  * ```html
  * <body ng-app="starter">
  *   <!-- The nav bar that will be updated as we navigate -->
- *   <ion-nav-bar class="bar-positive"
- *     animation="nav-title-slide-ios7">
+ *   <ion-nav-bar class="bar-positive nav-title-slide-ios7">
  *   </ion-nav-bar>
  *
  *   <!-- where the initial view template will be rendered -->
- *   <ion-nav-view animation="slide-left-right"></ion-nav-view>
+ *   <ion-nav-view></ion-nav-view>
  * </body>
  * ```
  *
- * @param model {string=} The model to assign the
+ * @param controller-bind {string=} The scope expression to bind this element's
  * {@link ionic.controller:ionicNavBar ionicNavBar controller} to.
- * Default: assigns it to $scope.navBarController.
- * @param animation {string=} The animation used to transition between titles.
- * @param align {string=} Where to align the title of the navbar.
+ * Default: $ionicNavBarController.
+ * @param align-title {string=} Where to align the title of the navbar.
  * Available: 'left', 'right', 'center'. Defaults to 'center'.
  */
 .directive('ionNavBar', ['$ionicViewService', '$rootScope', '$animate', '$compile', '$parse',
@@ -215,10 +218,6 @@ function($ionicViewService, $rootScope, $animate, $compile, $parse) {
     replace: true,
     transclude: true,
     controller: '$ionicNavBar',
-    scope: {
-      animation: '@',
-      alignTitle: '@'
-    },
     template:
       '<header class="bar bar-header nav-bar{{navBarClass()}}">' +
         '<div class="buttons left-buttons"> ' +
@@ -230,7 +229,13 @@ function($ionicViewService, $rootScope, $animate, $compile, $parse) {
     compile: function(tElement, tAttrs, transclude) {
 
       return function link($scope, $element, $attr, navBarCtrl) {
-        $parse($attr.model || 'navBarController').assign($scope.$parent, navBarCtrl);
+        navBarCtrl._headerBarView = new ionic.views.HeaderBar({
+          el: $element[0],
+          alignTitle: $attr.alignTitle || 'center'
+        });
+
+        $parse($attr.controllerBind || '$ionicNavBarController')
+          .assign($scope, navBarCtrl);
 
         //Put transcluded content (usually a back button) before the rest
         transclude($scope, function(clone) {
@@ -246,7 +251,7 @@ function($ionicViewService, $rootScope, $animate, $compile, $parse) {
         $scope.navBarClass = function() {
           return ($scope.isReverse ? ' reverse' : '') +
             ($scope.isInvisible ? ' invisible' : '') +
-            ($scope.shouldAnimate && $scope.animation ? ' ' + $scope.animation : '');
+            (!$scope.shouldAnimate ? ' no-animation' : '');
         };
       };
     }
@@ -282,9 +287,9 @@ function($ionicViewService, $rootScope, $animate, $compile, $parse) {
  * With custom click action, using {@link ionic.controller:ionicNavBar ionicNavBar controller}:
  *
  * ```html
- * <ion-nav-bar model="navBarController">
+ * <ion-nav-bar>
  *   <ion-nav-back-button class="button-icon"
- *     ng-click="canGoBack && navBarController.back()">
+ *     ng-click="canGoBack && $ionicNavBarController.back()">
  *     <i class="ion-arrow-left-c"></i> Back
  *   </ion-nav-back-button>
  * </ion-nav-bar>
@@ -294,9 +299,9 @@ function($ionicViewService, $rootScope, $animate, $compile, $parse) {
  * {@link ionic.controller:ionicNavBar ionicNavBar controller}.
  *
  * ```html
- * <ion-nav-bar model="navBarController">
+ * <ion-nav-bar>
  *   <ion-nav-back-button class="button button-icon ion-arrow-left-c">
- *     {% raw %}{{navBarController.getPreviousTitle() || 'Back'}}{% endraw %}
+ *     {% raw %}{{$ionicNavBarController.getPreviousTitle() || 'Back'}}{% endraw %}
  *   </ion-nav-back-button>
  * </ion-nav-bar>
  * ```
@@ -395,7 +400,8 @@ function($ionicViewService, $rootScope, $animate, $compile, $parse) {
           $animate.leave(clone);
         });
 
-        //The original element is just a completely empty <ion-nav-buttons></ion-nav-buttons> - make it invisible
+        // The original element is just a completely empty <ion-nav-buttons> element.
+        // make it invisible just to be sure it doesn't change any layout
         $element.css('display', 'none');
       };
     }