Merge branch 'master' of https://github.com/driftyco/ionic

dist/css/ionic-ios7.css

@@ -182,7 +182,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -1382,7 +1382,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333333;
+  outline: thin dotted #333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -1469,7 +1469,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition-delay: 0s, .05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1484,7 +1484,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }
 
 /* hide a radio button's icon by default */
 .radio-item [class^="icon-"],
@@ -1709,7 +1709,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px white;
+      text-shadow: 0px 0px 10px #fff;
       box-shadow: none;
       background: none; }
 
@@ -1892,7 +1892,7 @@ a.button {
   width: 100%;
   background-color: white;
   border-radius: 2px;
-  border: 1px solid #dddddd; }
+  border: 1px solid #ddd; }
 
 .card-header {
   padding: 10px;

dist/css/ionic.css

@@ -1246,7 +1246,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -2469,7 +2469,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333333;
+  outline: thin dotted #333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -2827,7 +2827,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px white;
+      text-shadow: 0px 0px 10px #fff;
       box-shadow: none;
       background: none; }
 
@@ -3010,7 +3010,7 @@ a.button {
   width: 100%;
   background-color: white;
   border-radius: 2px;
-  border: 1px solid #dddddd; }
+  border: 1px solid #ddd; }
 
 .card-header {
   padding: 10px;

dist/js/ionic-angular.js

@@ -247,14 +247,16 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
                    <div class="list-item-content" ng-transclude>\
                    </div>\
                    <div class="list-item-drag" ng-if="canReorder && isEditing">\
-                     <button ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
+                     <button data-ionic-action="reorder" class="button button-icon" ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
                    </div>\
                    <div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
                      <button ng-click="onButtonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
                    </div>\
                 </li>',
     link: function($scope, $element, $attr, list) {
+      $scope.isEditing = false;
       $scope.deleteIcon = list.scope.deleteIcon;
+      $scope.reorderIcon = list.scope.reorderIcon;
 
       list.scope.$watch('isEditing', function(v) {
         $scope.isEditing = v;
@@ -271,7 +273,8 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
 
     scope: {
       isEditing: '=',
-      deleteIcon: '@'
+      deleteIcon: '@',
+      reorderIcon: '@'
     },
 
     // So we can require being under this

dist/js/ionic.js

@@ -62,6 +62,35 @@ window.ionic = {
   };
 })(ionic);
 ;
+(function(ionic) {
+  ionic.DomUtil = {
+    /**
+     * {returns} the closest parent matching the className
+     */
+    getParentWithClass: function(e, className) {
+      while(e.parentNode) {
+        if(e.parentNode.classList && e.parentNode.classList.contains(className)) {
+          return e.parentNode;
+        }
+        e = e.parentNode;
+      }
+      return null;
+    },
+    /**
+     * {returns} the closest parent or self matching the className
+     */
+    getParentOrSelfWithClass: function(e, className) {
+      while(e) {
+        if(e.classList && e.classList.contains(className)) {
+          return e;
+        }
+        e = e.parentNode;
+      }
+      return null;
+    }
+  }
+})(window.ionic);
+;
 /**
  * ion-events.js
  *
@@ -1805,44 +1834,28 @@ window.ionic = {
 })(ionic);
 ;
 (function(ionic) {
+  var DragOp = function() {}
+  DragOp.prototype = {
+    start: function(e) {
+    },
+    drag: function(e) {
+    },
+    end: function(e) {
+    }
+  }
 
-  /**
-   * The ListView handles a list of items. It will process drag animations, edit mode,
-   * and other operations that are common on mobile lists or table views.
-   */
-  ionic.views.List = function(opts) {
-    var _this = this;
-
-    this.el = opts.el;
-
-    // The amount of dragging required to start sliding the element over (in pixels)
+  var SlideDrag = function(opts) {
     this.dragThresholdX = opts.dragThresholdX || 10;
-      
-    // Start the drag states
-    this._initDrag();
-
-    // Listen for drag and release events
-    window.ionic.onGesture('drag', function(e) {
-      _this._handleDrag(e);
-    }, this.el);
-    window.ionic.onGesture('release', function(e) {
-      _this._handleEndDrag(e);
-    }, this.el);
   };
 
-  ionic.views.List.prototype = {
-    _initDrag: function() {
-      this._isDragging = false;
-      this._currentDrag = null;
-    },
-    _startDrag: function(e) {
-      this._isDragging = false;
+  SlideDrag.prototype = new DragOp();
+  SlideDrag.prototype.start = function(e) {
+    var content;
 
-      // Grab the content item
-      if(e.target.classList.contains('list-item')) {
-        content = e.target.querySelector('.list-item-content');
-      } else if(e.target.classList.contains('list-item-content')) {
+    if(e.target.classList.contains('list-item-content')) {
       content = e.target;
+    } else if(e.target.classList.contains('list-item')) {
+      content = e.target.querySelector('.list-item-content');
     }
 
     // If we don't have a content area as one of our children (or ourselves), skip
@@ -1869,17 +1882,54 @@ window.ionic = {
       content: content,
       startOffsetX: offsetX
     };
-    },
-    _handleEndDrag: function(e) {
+  };
+
+  SlideDrag.prototype.drag = function(e) {
     var _this = this;
 
+    window.requestAnimationFrame(function() {
+      // We really aren't dragging
+      if(!_this._currentDrag) {
+        return;
+      }
+
+      // Check if we should start dragging. Check if we've dragged past the threshold,
+      // or we are starting from the open state.
+      if(!_this._isDragging &&
+          ((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) ||
+          (Math.abs(_this._currentDrag.startOffsetX) > 0)))
+      {
+        _this._isDragging = true;
+      }
+
+      if(_this._isDragging) {
+
+        // Grab the new X point, capping it at zero
+        var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
+
+        // If the new X position is past the buttons, we need to slow down the drag (rubber band style)
+        if(newX < -buttonsWidth) {
+          // Calculate the new X position, capped at the top of the buttons
+          newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
+        }
+
+        console.log(newX);
+        
+        _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
+      }
+    });
+  };
+
+  SlideDrag.prototype.end = function(e, doneCallback) {
+    var _this = this;
+
+    // There is no drag, just end immediately
     if(!this._currentDrag) {
-        this._initDrag();
+      doneCallback && doneCallback();
       return;
     }
 
     // If we are currently dragging, we want to snap back into place
-
     // The final resting point X will be the width of the exposed buttons
     var restingPoint = -this._currentDrag.buttonsWidth;
 
@@ -1912,93 +1962,92 @@ window.ionic = {
         _this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd);
       }
       _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
+
+      //
+      doneCallback && doneCallback();
+    });
+  }
+
+  var ReorderDrag = function() {}
+  ReorderDrag.prototype = new DragOp();
+  ReorderDrag.prototype.start = function(e) {
+  };
+  ReorderDrag.prototype.drag = function(e) {
+  };
+  ReorderDrag.prototype.end = function(e) {
+  };
+
+  /**
+   * The ListView handles a list of items. It will process drag animations, edit mode,
+   * and other operations that are common on mobile lists or table views.
+   */
+  ionic.views.List = function(opts) {
+    var _this = this;
+
+    this.el = opts.el;
+
+    // The amount of dragging required to start sliding the element over (in pixels)
+    this.dragThresholdX = opts.dragThresholdX || 10;
+      
+    // Start the drag states
+    this._initDrag();
+
+    // Listen for drag and release events
+    window.ionic.onGesture('drag', function(e) {
+      _this._handleDrag(e);
+    }, this.el);
+    window.ionic.onGesture('release', function(e) {
+      _this._handleEndDrag(e);
+    }, this.el);
+  };
+
+  ionic.views.List.prototype = {
+    _initDrag: function() {
+      this._isDragging = false;
+      this._currentDrag = null;
+      this._dragOp = null;
+    },
+    _startDrag: function(e) {
+      this._isDragging = false;
+
+      // Check if this is a reorder drag
+      if(ionic.DomUtil.getParentOrSelfWithClass(e.target, 'list-item-drag') && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
+        this._dragOp = new ReorderDrag(this.el);
+        this._dragOp.start(e);
+        return;
+      } 
+      
+      // Or check if this is a swipe to the side drag
+      if(e.gesture.direction == 'left' || e.gesture.direction == 'right') {
+        this._dragOp = new SlideDrag(this.el);
+        this._dragOp.start(e);
+      }
+    },
+
+    _handleEndDrag: function(e) {
+      var _this = this;
+      
+      if(!this._dragOp) {
+        this._initDrag();
+        return;
+      }
+
+      this._dragOp.end(e, function() {
         _this._initDrag();
       });
     },
-
     /**
      * Process the drag event to move the item to the left or right.
      */
     _handleDrag: function(e) {
       var _this = this, content, buttons;
 
-      window.requestAnimationFrame(function() {
-
-        if(!_this._currentDrag) {
-          _this._startDrag(e);
+      if(!this._dragOp) {
+        this._startDrag(e);
       }
 
-        // Check if we should start dragging. Check if we've dragged past the threshold,
-        // or we are starting from the open state.
-        if(!_this._isDragging &&
-            ((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) ||
-            (Math.abs(_this._currentDrag.startOffsetX) > 0)))
-        {
-          _this._isDragging = true;
+      this._dragOp.drag(e);
     }
-
-        if(_this._isDragging) {
-
-          // Grab the new X point, capping it at zero
-          var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
-
-          // If the new X position is past the buttons, we need to slow down the drag (rubber band style)
-          if(newX < -buttonsWidth) {
-            // Calculate the new X position, capped at the top of the buttons
-            newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
-          }
-
-          console.log(newX);
-          
-          _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
-        }
-      });
-    },
-
-
-    _handleSwipeLeft: function(e) {
-
-      window.requestAnimationFrame(function() {
-        var item = e.target,
-          cl = item.classList,
-          content, buttons, buttonsWidth;
-
-
-        if(!content) {
-          return;
-        }
-
-        // Grab the buttons
-        buttons = content.parentNode.querySelector('.list-item-buttons');
-        if(buttons) {
-          buttonsWidth = buttons.offsetWidth;
-
-          // Slide the content over left by the button width
-          content.style.left = -buttonsWidth + 'px';
-        }
-      });
-    },
-    _handleSwipeRight: function(e) {
-
-      window.requestAnimationFrame(function() {
-        var item = e.target,
-          cl = item.classList,
-          content;
-
-        if(cl.contains('list-item')) {
-          content = item.querySelector('.list-item-content');
-        } else if(cl.contains('list-item-content')) {
-          content = item;
-        }
-
-        // This item didn't have content
-        if(!content) {
-          return;
-        }
-
-        content.style.left = 0;
-      });
-    },
   };
 
 })(ionic);

js/ext/angular/src/directive/ionicList.js

@@ -22,14 +22,16 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
                    <div class="list-item-content" ng-transclude>\
                    </div>\
                    <div class="list-item-drag" ng-if="canReorder && isEditing">\
-                     <button ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
+                     <button data-ionic-action="reorder" class="button button-icon" ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
                    </div>\
                    <div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
                      <button ng-click="onButtonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
                    </div>\
                 </li>',
     link: function($scope, $element, $attr, list) {
+      $scope.isEditing = false;
       $scope.deleteIcon = list.scope.deleteIcon;
+      $scope.reorderIcon = list.scope.reorderIcon;
 
       list.scope.$watch('isEditing', function(v) {
         $scope.isEditing = v;
@@ -46,7 +48,8 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
 
     scope: {
       isEditing: '=',
-      deleteIcon: '@'
+      deleteIcon: '@',
+      reorderIcon: '@'
     },
 
     // So we can require being under this

js/ext/angular/test/list.html

@@ -51,7 +51,10 @@
     <content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
       <list is-editing="isEditingItems" animation="my-repeat-animation" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
         <list-item ng-repeat="item in items" 
+        buttons="item.buttons"
         can-delete="true"
+        can-reorder="true"
+        can-swipe="true"
                  on-delete="deleteProject(project)"
                  on-select="selectProject(project)">
           {{item.text}}

js/utils/dom.js

@@ -0,0 +1,28 @@
+(function(ionic) {
+  ionic.DomUtil = {
+    /**
+     * {returns} the closest parent matching the className
+     */
+    getParentWithClass: function(e, className) {
+      while(e.parentNode) {
+        if(e.parentNode.classList && e.parentNode.classList.contains(className)) {
+          return e.parentNode;
+        }
+        e = e.parentNode;
+      }
+      return null;
+    },
+    /**
+     * {returns} the closest parent or self matching the className
+     */
+    getParentOrSelfWithClass: function(e, className) {
+      while(e) {
+        if(e.classList && e.classList.contains(className)) {
+          return e;
+        }
+        e = e.parentNode;
+      }
+      return null;
+    }
+  }
+})(window.ionic);

js/views/listView.js

@@ -1,42 +1,26 @@
 (function(ionic) {
+  var DragOp = function() {}
+  DragOp.prototype = {
+    start: function(e) {
+    },
+    drag: function(e) {
+    },
+    end: function(e) {
+    }
+  }
 
-  /**
-   * The ListView handles a list of items. It will process drag animations, edit mode,
-   * and other operations that are common on mobile lists or table views.
-   */
-  ionic.views.List = function(opts) {
-    var _this = this;
-
-    this.el = opts.el;
-
-    // The amount of dragging required to start sliding the element over (in pixels)
+  var SlideDrag = function(opts) {
     this.dragThresholdX = opts.dragThresholdX || 10;
-      
-    // Start the drag states
-    this._initDrag();
-
-    // Listen for drag and release events
-    window.ionic.onGesture('drag', function(e) {
-      _this._handleDrag(e);
-    }, this.el);
-    window.ionic.onGesture('release', function(e) {
-      _this._handleEndDrag(e);
-    }, this.el);
   };
 
-  ionic.views.List.prototype = {
-    _initDrag: function() {
-      this._isDragging = false;
-      this._currentDrag = null;
-    },
-    _startDrag: function(e) {
-      this._isDragging = false;
+  SlideDrag.prototype = new DragOp();
+  SlideDrag.prototype.start = function(e) {
+    var content;
 
-      // Grab the content item
-      if(e.target.classList.contains('list-item')) {
-        content = e.target.querySelector('.list-item-content');
-      } else if(e.target.classList.contains('list-item-content')) {
+    if(e.target.classList.contains('list-item-content')) {
       content = e.target;
+    } else if(e.target.classList.contains('list-item')) {
+      content = e.target.querySelector('.list-item-content');
     }
 
     // If we don't have a content area as one of our children (or ourselves), skip
@@ -63,17 +47,54 @@
       content: content,
       startOffsetX: offsetX
     };
-    },
-    _handleEndDrag: function(e) {
+  };
+
+  SlideDrag.prototype.drag = function(e) {
     var _this = this;
 
+    window.requestAnimationFrame(function() {
+      // We really aren't dragging
+      if(!_this._currentDrag) {
+        return;
+      }
+
+      // Check if we should start dragging. Check if we've dragged past the threshold,
+      // or we are starting from the open state.
+      if(!_this._isDragging &&
+          ((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) ||
+          (Math.abs(_this._currentDrag.startOffsetX) > 0)))
+      {
+        _this._isDragging = true;
+      }
+
+      if(_this._isDragging) {
+
+        // Grab the new X point, capping it at zero
+        var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
+
+        // If the new X position is past the buttons, we need to slow down the drag (rubber band style)
+        if(newX < -buttonsWidth) {
+          // Calculate the new X position, capped at the top of the buttons
+          newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
+        }
+
+        console.log(newX);
+        
+        _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
+      }
+    });
+  };
+
+  SlideDrag.prototype.end = function(e, doneCallback) {
+    var _this = this;
+
+    // There is no drag, just end immediately
     if(!this._currentDrag) {
-        this._initDrag();
+      doneCallback && doneCallback();
       return;
     }
 
     // If we are currently dragging, we want to snap back into place
-
     // The final resting point X will be the width of the exposed buttons
     var restingPoint = -this._currentDrag.buttonsWidth;
 
@@ -106,93 +127,92 @@
         _this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd);
       }
       _this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
+
+      //
+      doneCallback && doneCallback();
+    });
+  }
+
+  var ReorderDrag = function() {}
+  ReorderDrag.prototype = new DragOp();
+  ReorderDrag.prototype.start = function(e) {
+  };
+  ReorderDrag.prototype.drag = function(e) {
+  };
+  ReorderDrag.prototype.end = function(e) {
+  };
+
+  /**
+   * The ListView handles a list of items. It will process drag animations, edit mode,
+   * and other operations that are common on mobile lists or table views.
+   */
+  ionic.views.List = function(opts) {
+    var _this = this;
+
+    this.el = opts.el;
+
+    // The amount of dragging required to start sliding the element over (in pixels)
+    this.dragThresholdX = opts.dragThresholdX || 10;
+      
+    // Start the drag states
+    this._initDrag();
+
+    // Listen for drag and release events
+    window.ionic.onGesture('drag', function(e) {
+      _this._handleDrag(e);
+    }, this.el);
+    window.ionic.onGesture('release', function(e) {
+      _this._handleEndDrag(e);
+    }, this.el);
+  };
+
+  ionic.views.List.prototype = {
+    _initDrag: function() {
+      this._isDragging = false;
+      this._currentDrag = null;
+      this._dragOp = null;
+    },
+    _startDrag: function(e) {
+      this._isDragging = false;
+
+      // Check if this is a reorder drag
+      if(ionic.DomUtil.getParentOrSelfWithClass(e.target, 'list-item-drag') && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
+        this._dragOp = new ReorderDrag(this.el);
+        this._dragOp.start(e);
+        return;
+      } 
+      
+      // Or check if this is a swipe to the side drag
+      if(e.gesture.direction == 'left' || e.gesture.direction == 'right') {
+        this._dragOp = new SlideDrag(this.el);
+        this._dragOp.start(e);
+      }
+    },
+
+    _handleEndDrag: function(e) {
+      var _this = this;
+      
+      if(!this._dragOp) {
+        this._initDrag();
+        return;
+      }
+
+      this._dragOp.end(e, function() {
         _this._initDrag();
       });
     },
-
     /**
      * Process the drag event to move the item to the left or right.
      */
     _handleDrag: function(e) {
       var _this = this, content, buttons;
 
-      window.requestAnimationFrame(function() {
-
-        if(!_this._currentDrag) {
-          _this._startDrag(e);
+      if(!this._dragOp) {
+        this._startDrag(e);
       }
 
-        // Check if we should start dragging. Check if we've dragged past the threshold,
-        // or we are starting from the open state.
-        if(!_this._isDragging &&
-            ((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) ||
-            (Math.abs(_this._currentDrag.startOffsetX) > 0)))
-        {
-          _this._isDragging = true;
+      this._dragOp.drag(e);
     }
-
-        if(_this._isDragging) {
-
-          // Grab the new X point, capping it at zero
-          var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
-
-          // If the new X position is past the buttons, we need to slow down the drag (rubber band style)
-          if(newX < -buttonsWidth) {
-            // Calculate the new X position, capped at the top of the buttons
-            newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
-          }
-
-          console.log(newX);
-          
-          _this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
-        }
-      });
-    },
-
-
-    _handleSwipeLeft: function(e) {
-
-      window.requestAnimationFrame(function() {
-        var item = e.target,
-          cl = item.classList,
-          content, buttons, buttonsWidth;
-
-
-        if(!content) {
-          return;
-        }
-
-        // Grab the buttons
-        buttons = content.parentNode.querySelector('.list-item-buttons');
-        if(buttons) {
-          buttonsWidth = buttons.offsetWidth;
-
-          // Slide the content over left by the button width
-          content.style.left = -buttonsWidth + 'px';
-        }
-      });
-    },
-    _handleSwipeRight: function(e) {
-
-      window.requestAnimationFrame(function() {
-        var item = e.target,
-          cl = item.classList,
-          content;
-
-        if(cl.contains('list-item')) {
-          content = item.querySelector('.list-item-content');
-        } else if(cl.contains('list-item-content')) {
-          content = item;
-        }
-
-        // This item didn't have content
-        if(!content) {
-          return;
-        }
-
-        content.style.left = 0;
-      });
-    },
   };
 
 })(ionic);