javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed #98 - list active state

Browse Source
This commit is contained in:
Max Lynch
2013-11-08 17:44:24 -06:00
parent b94a2e7c10
commit 6058afeb51
6 changed files with 127 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
dist/css/ionic.css vendored
View File

@ -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; }

48
dist/js/ionic.js vendored
View File

@ -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);

47
js/views/listView.js
View File

@ -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');
}
}
});

1
js/views/slideBox.js
View File

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

8
scss/_items.scss
View File

@ -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

4
scss/_mixins.scss
View File

@ -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;
}