From 6058afeb51dd42ec8f14f09126601b3e8692c6ee Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Fri, 8 Nov 2013 17:44:24 -0600 Subject: [PATCH] Fixed #98 - list active state --- dist/css/ionic.css | 56 +++++++++++++++++++++++--------------------- dist/js/ionic.js | 48 ++++++++++++++++++++++++++++++++++++- js/views/listView.js | 47 +++++++++++++++++++++++++++++++++++++ js/views/slideBox.js | 1 - scss/_items.scss | 8 ++----- scss/_mixins.scss | 4 ++-- 6 files changed, 127 insertions(+), 37 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index bbbd6c3a16..33a7e84823 100644 --- a/dist/css/ionic.css +++ b/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; } diff --git a/dist/js/ionic.js b/dist/js/ionic.js index b808c294c4..93ba911c2c 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -3066,6 +3066,14 @@ window.ionic = { this.onRefresh = opts.onRefresh || function() {}; 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); diff --git a/js/views/listView.js b/js/views/listView.js index d5dd96e30c..6e0ea87ecc 100644 --- a/js/views/listView.js +++ b/js/views/listView.js @@ -273,6 +273,14 @@ this.onRefresh = opts.onRefresh || function() {}; 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'); + } } }); diff --git a/js/views/slideBox.js b/js/views/slideBox.js index ecfab82c5f..7d516d9146 100644 --- a/js/views/slideBox.js +++ b/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); diff --git a/scss/_items.scss b/scss/_items.scss index bd85d535bf..c030a0e3c0 100644 --- a/scss/_items.scss +++ b/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 diff --git a/scss/_mixins.scss b/scss/_mixins.scss index e3de9734ed..e73eb2d6c9 100644 --- a/scss/_mixins.scss +++ b/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; }