Fixed #98 - list active state

dist/css/ionic.css

@@ -3114,68 +3114,75 @@ a.subdued‎ {
     z-index: 2; }
     .item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
       color: inherit; }
+  .item.active {
+    color: #333333;
+    background-color: whitesmoke;
+    border-color: #333333; }
+    .item.active .item-content {
+      background-color: whitesmoke;
+      color: #333333; }
 
-.item-default.active, .item-default:active {
+.item-default.active {
+  color: #333333;
+  background-color: whitesmoke;
+  border-color: #333333; }
+  .item-default.active .item-content {
+    background-color: whitesmoke;
+    color: #333333; }
+
+.item-secondary.active {
   color: #333333;
   background-color: white;
   border-color: #333333; }
-  .item-default.active .list-item-content, .item-default:active .list-item-content {
+  .item-secondary.active .item-content {
     background-color: white;
     color: #333333; }
 
-.item-secondary.active, .item-secondary:active {
-  color: #333333;
-  background-color: white;
-  border-color: #333333; }
-  .item-secondary.active .list-item-content, .item-secondary:active .list-item-content {
-    background-color: white;
-    color: #333333; }
-
-.item-primary.active, .item-primary:active {
+.item-primary.active {
   color: white;
   background-color: #4a87ee;
   border-color: #333333; }
-  .item-primary.active .list-item-content, .item-primary:active .list-item-content {
+  .item-primary.active .item-content {
     background-color: #4a87ee;
     color: white; }
 
-.item-info.active, .item-info:active {
+.item-info.active {
   color: white;
   background-color: #43cee6;
   border-color: #333333; }
-  .item-info.active .list-item-content, .item-info:active .list-item-content {
+  .item-info.active .item-content {
     background-color: #43cee6;
     color: white; }
 
-.item-success.active, .item-success:active {
+.item-success.active {
   color: white;
   background-color: #66cc33;
   border-color: #333333; }
-  .item-success.active .list-item-content, .item-success:active .list-item-content {
+  .item-success.active .item-content {
     background-color: #66cc33;
     color: white; }
 
-.item-warning.active, .item-warning:active {
+.item-warning.active {
   color: white;
   background-color: #f0b840;
   border-color: #333333; }
-  .item-warning.active .list-item-content, .item-warning:active .list-item-content {
+  .item-warning.active .item-content {
     background-color: #f0b840;
     color: white; }
 
-.item-danger.active, .item-danger:active {
+.item-danger.active {
   color: white;
   background-color: #ef4e3a;
   border-color: #333333; }
-  .item-danger.active .list-item-content, .item-danger:active .list-item-content {
+  .item-danger.active .item-content {
     background-color: #ef4e3a;
     color: white; }
 
-.item-dark.active, .item-dark:active {
+.item-dark.active {
   color: white;
   background-color: #444444;
   border-color: #333333; }
-  .item-dark.active .list-item-content, .item-dark:active .list-item-content {
+  .item-dark.active .item-content {
     background-color: #444444;
     color: white; }
 
@@ -3293,11 +3300,6 @@ a.item {
 .item-icon-left.item-icon-right .icon:last-child {
   left: auto; }
 
-a.item:active,
-button.item:active,
-.item.active {
-  background-color: #F7F7F7; }
-
 .item-button-left {
   padding-left: 75px; }
 

dist/js/ionic.js

@@ -3067,6 +3067,14 @@ window.ionic = {
       this.onRefreshOpening = opts.onRefreshOpening || function() {};
       this.onRefreshHolding = opts.onRefreshHolding || function() {};
 
+      window.ionic.onGesture('touch', function(e) {
+        _this._handleTouch(e);
+      }, this.el);
+
+      window.ionic.onGesture('release', function(e) {
+        _this._handleTouchRelease(e);
+      }, this.el);
+        
       // Start the drag states
       this._initDrag();
     },
@@ -3207,6 +3215,13 @@ window.ionic = {
     _handleDrag: function(e) {
       var _this = this, content, buttons;
           
+      // If the user has a touch timeout to highlight an element, clear it if we
+      // get sufficient draggage
+      if(Math.abs(e.gesture.deltaX) > 10 || Math.abs(e.gesture.deltaY) > 10) {
+        clearTimeout(this._touchTimeout);
+      }
+
+      clearTimeout(this._touchTimeout);
       // If we get a drag event, make sure we aren't in another drag, then check if we should
       // start one
       if(!this.isDragging && !this._dragOp) {
@@ -3221,6 +3236,38 @@ window.ionic = {
 
       e.preventDefault();
       this._dragOp.drag(e);
+    },
+
+    /**
+     * Handle the touch event to show the active state on an item if necessary.
+     */
+    _handleTouch: function(e) {
+      var _this = this;
+
+      var item = ionic.DomUtil.getParentOrSelfWithClass(e.target, ITEM_CLASS);
+      if(!item) { return; }
+
+      this._touchTimeout = setTimeout(function() {
+        var items = _this.el.querySelectorAll('.item');
+        for(var i = 0, l = items.length; i < l; i++) {
+          items[i].classList.remove('active');
+        }
+        item.classList.add('active');
+      }, 250);
+    },
+
+    /**
+     * Handle the release event to remove the active state on an item if necessary.
+     */
+    _handleTouchRelease: function(e) {
+      var _this = this;
+
+      // Cancel touch timeout
+      clearTimeout(this._touchTimeout);
+      var items = _this.el.querySelectorAll('.item');
+      for(var i = 0, l = items.length; i < l; i++) {
+        items[i].classList.remove('active');
+      }
     }
   });
 
@@ -3435,7 +3482,6 @@ window.ionic = {
     this.slideIndex = 0;
     this._updatePager();
 
-
     // Listen for drag and release events
     window.ionic.onGesture('drag', function(e) {
       _this._handleDrag(e);

js/views/listView.js

@@ -274,6 +274,14 @@
       this.onRefreshOpening = opts.onRefreshOpening || function() {};
       this.onRefreshHolding = opts.onRefreshHolding || function() {};
 
+      window.ionic.onGesture('touch', function(e) {
+        _this._handleTouch(e);
+      }, this.el);
+
+      window.ionic.onGesture('release', function(e) {
+        _this._handleTouchRelease(e);
+      }, this.el);
+        
       // Start the drag states
       this._initDrag();
     },
@@ -414,6 +422,13 @@
     _handleDrag: function(e) {
       var _this = this, content, buttons;
           
+      // If the user has a touch timeout to highlight an element, clear it if we
+      // get sufficient draggage
+      if(Math.abs(e.gesture.deltaX) > 10 || Math.abs(e.gesture.deltaY) > 10) {
+        clearTimeout(this._touchTimeout);
+      }
+
+      clearTimeout(this._touchTimeout);
       // If we get a drag event, make sure we aren't in another drag, then check if we should
       // start one
       if(!this.isDragging && !this._dragOp) {
@@ -428,6 +443,38 @@
 
       e.preventDefault();
       this._dragOp.drag(e);
+    },
+
+    /**
+     * Handle the touch event to show the active state on an item if necessary.
+     */
+    _handleTouch: function(e) {
+      var _this = this;
+
+      var item = ionic.DomUtil.getParentOrSelfWithClass(e.target, ITEM_CLASS);
+      if(!item) { return; }
+
+      this._touchTimeout = setTimeout(function() {
+        var items = _this.el.querySelectorAll('.item');
+        for(var i = 0, l = items.length; i < l; i++) {
+          items[i].classList.remove('active');
+        }
+        item.classList.add('active');
+      }, 250);
+    },
+
+    /**
+     * Handle the release event to remove the active state on an item if necessary.
+     */
+    _handleTouchRelease: function(e) {
+      var _this = this;
+
+      // Cancel touch timeout
+      clearTimeout(this._touchTimeout);
+      var items = _this.el.querySelectorAll('.item');
+      for(var i = 0, l = items.length; i < l; i++) {
+        items[i].classList.remove('active');
+      }
     }
   });
 

js/views/slideBox.js

@@ -25,7 +25,6 @@
     this.slideIndex = 0;
     this._updatePager();
 
-
     // Listen for drag and release events
     window.ionic.onGesture('drag', function(e) {
       _this._handleDrag(e);

scss/_items.scss

@@ -70,10 +70,11 @@
       color: inherit;
     }
   }
+  @include item-style-active($brand-secondary, $gray-dark, $gray-dark);
 }
 
 // Different themes for list items
-.item-default { @include item-style-active($brand-default, $gray-dark, $gray-dark); }
+.item-default { @include item-style-active($brand-secondary, $gray-dark, $gray-dark); }
 .item-secondary { @include item-style-active($brand-default, $gray-dark, $gray-dark); }
 .item-primary { @include item-style-active($brand-primary, $gray-dark, $white); }
 .item-info { @include item-style-active($brand-info, $gray-dark, $white); }
@@ -217,11 +218,6 @@ a.item {
   left: auto;
 }
 
-a.item:active,
-button.item:active,
-.item.active {
-  background-color: #F7F7F7;
-}
 
 
 // Item Button

scss/_mixins.scss

@@ -68,12 +68,12 @@
 
 //$bgColor, $borderColor, $color, 
 @mixin item-style-active($activeBgColor, $activeBorderColor, $activeColor) {
-  &.active, &:active {
+  &.active {
     color: $activeColor;
     background-color: $activeBgColor;
     border-color: $activeBorderColor;
 
-    .list-item-content {
+    .item-content {
       background-color: $activeBgColor;
       color: $activeColor;
     }