diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index c45cc4e535..4c2bacd541 100644
--- a/dist/css/ionic-ios7.css
+++ b/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.
@@ -558,7 +558,7 @@ a.subdued {
&.bar-footer {
border-top-width: 1px;
}*/
- box-shadow: inset 0 0 1px #999999; }
+ box-shadow: inset 0 0 1px #999; }
.bar.bar-clear {
border: none;
background: none;
@@ -1112,7 +1112,21 @@ a.subdued {
color: white; }
.item,
-.item-content {
+.item h1,
+.item h2,
+.item h3,
+.item h4,
+.item h5,
+.item h6,
+.item p,
+.item-content,
+.item-content h1,
+.item-content h2,
+.item-content h3,
+.item-content h4,
+.item-content h5,
+.item-content h6,
+.item-content p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
@@ -1141,16 +1155,35 @@ a.item {
box-shadow: inset 0 0 1px #666666;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
-.item-text-wrap {
+.item-text-wrap,
+.item-text-wrap h1,
+.item-text-wrap h2,
+.item-text-wrap h3,
+.item-text-wrap h4,
+.item-text-wrap h5,
+.item-text-wrap h6,
+.item-text-wrap p,
+.item-slider.item-text-wrap .item-content,
+.item-body h1,
+.item-body h2,
+.item-body h3,
+.item-body h4,
+.item-body h5,
+.item-body h6,
+.item-body p {
overflow: auto;
white-space: normal; }
-.item-slider.item-text-wrap {
+.item-slider.item-text-wrap,
+.item-slider.item-text-wrap h1,
+.item-slider.item-text-wrap h2,
+.item-slider.item-text-wrap h3,
+.item-slider.item-text-wrap h4,
+.item-slider.item-text-wrap h5,
+.item-slider.item-text-wrap h6,
+.item-slider.item-text-wrap p {
overflow: hidden;
white-space: nowrap; }
- .item-slider.item-text-wrap .item-content {
- overflow: auto;
- white-space: normal; }
.item i {
display: -webkit-box;
@@ -1626,7 +1659,7 @@ input[type="file"] {
line-height: 34px; }
select {
- border: 1px solid #cccccc;
+ border: 1px solid #ccc;
background-color: white; }
select[multiple],
@@ -1698,7 +1731,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" */
@@ -1713,7 +1746,7 @@ input[type="checkbox"][readonly] {
right: 0;
left: 20px;
-webkit-transform: none;
- transition-delay: 0.05s, 0s; }
+ transition-delay: .05s, 0s; }
.item-radio {
padding: 0; }
@@ -1988,7 +2021,7 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active {
background: none;
box-shadow: none;
- text-shadow: 0px 0px 10px white; }
+ text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
@@ -2330,9 +2363,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- -webkit-animation: spin 0.75s linear infinite;
- -moz-animation: spin 0.75s linear infinite;
- animation: spin 0.75s linear infinite; }
+ -webkit-animation: spin .75s linear infinite;
+ -moz-animation: spin .75s linear infinite;
+ animation: spin .75s linear infinite; }
.icon-loading:before {
content: "\e144"; }
@@ -2345,9 +2378,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- -webkit-animation: spin 0.75s linear infinite;
- -moz-animation: spin 0.75s linear infinite;
- animation: spin 0.75s linear infinite; }
+ -webkit-animation: spin .75s linear infinite;
+ -moz-animation: spin .75s linear infinite;
+ animation: spin .75s linear infinite; }
.icon-refreshing:before {
content: "\e144"; }
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 2e56aebd62..b5674260e2 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -1027,7 +1027,7 @@
.ionic fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
- border: 1px solid silver; }
+ border: 1px solid #c0c0c0; }
.ionic legend {
padding: 0;
/* 2 */
@@ -1324,7 +1324,7 @@
&.bar-footer {
border-top-width: 1px;
}*/
- box-shadow: inset 0 0 1px #999999; }
+ box-shadow: inset 0 0 1px #999; }
.ionic .bar.bar-clear {
border: none;
background: none;
@@ -1838,7 +1838,21 @@
background-color: #444444;
color: white; }
.ionic .item,
- .ionic .item-content {
+ .ionic .item h1,
+ .ionic .item h2,
+ .ionic .item h3,
+ .ionic .item h4,
+ .ionic .item h5,
+ .ionic .item h6,
+ .ionic .item p,
+ .ionic .item-content,
+ .ionic .item-content h1,
+ .ionic .item-content h2,
+ .ionic .item-content h3,
+ .ionic .item-content h4,
+ .ionic .item-content h5,
+ .ionic .item-content h6,
+ .ionic .item-content p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
@@ -1863,15 +1877,34 @@
background-color: white;
box-shadow: inset 0 0 1px #666666;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
- .ionic .item-text-wrap {
+ .ionic .item-text-wrap,
+ .ionic .item-text-wrap h1,
+ .ionic .item-text-wrap h2,
+ .ionic .item-text-wrap h3,
+ .ionic .item-text-wrap h4,
+ .ionic .item-text-wrap h5,
+ .ionic .item-text-wrap h6,
+ .ionic .item-text-wrap p,
+ .ionic .item-slider.item-text-wrap .item-content,
+ .ionic .item-body h1,
+ .ionic .item-body h2,
+ .ionic .item-body h3,
+ .ionic .item-body h4,
+ .ionic .item-body h5,
+ .ionic .item-body h6,
+ .ionic .item-body p {
overflow: auto;
white-space: normal; }
- .ionic .item-slider.item-text-wrap {
+ .ionic .item-slider.item-text-wrap,
+ .ionic .item-slider.item-text-wrap h1,
+ .ionic .item-slider.item-text-wrap h2,
+ .ionic .item-slider.item-text-wrap h3,
+ .ionic .item-slider.item-text-wrap h4,
+ .ionic .item-slider.item-text-wrap h5,
+ .ionic .item-slider.item-text-wrap h6,
+ .ionic .item-slider.item-text-wrap p {
overflow: hidden;
white-space: nowrap; }
- .ionic .item-slider.item-text-wrap .item-content {
- overflow: auto;
- white-space: normal; }
.ionic .item i {
display: -webkit-box;
display: -webkit-flex;
@@ -2282,7 +2315,7 @@
.ionic input[type="file"] {
line-height: 34px; }
.ionic select {
- border: 1px solid #cccccc;
+ border: 1px solid #ccc;
background-color: white; }
.ionic select[multiple],
.ionic select[size] {
@@ -2331,7 +2364,7 @@
border-radius: 50%;
background: white;
content: ' ';
- transition: background-color 0.1s ease-in-out; }
+ transition: background-color .1s ease-in-out; }
.ionic .checkbox input:after {
position: absolute;
top: 34%;
@@ -2344,7 +2377,7 @@
border-right: 0;
content: ' ';
opacity: 0;
- transition: opacity 0.05s ease-in-out;
+ transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.ionic .checkbox input:checked:before {
@@ -2686,7 +2719,7 @@
.ionic .button.button-icon:active, .ionic .button.button-icon.active {
background: none;
box-shadow: none;
- text-shadow: 0px 0px 10px white; }
+ text-shadow: 0px 0px 10px #fff; }
.ionic .button.block, .ionic .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
@@ -2938,9 +2971,9 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- -webkit-animation: spin 0.75s linear infinite;
- -moz-animation: spin 0.75s linear infinite;
- animation: spin 0.75s linear infinite; }
+ -webkit-animation: spin .75s linear infinite;
+ -moz-animation: spin .75s linear infinite;
+ animation: spin .75s linear infinite; }
.ionic .icon-loading:before {
content: "\e144"; }
.ionic .icon-refreshing {
@@ -2952,9 +2985,9 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- -webkit-animation: spin 0.75s linear infinite;
- -moz-animation: spin 0.75s linear infinite;
- animation: spin 0.75s linear infinite; }
+ -webkit-animation: spin .75s linear infinite;
+ -moz-animation: spin .75s linear infinite;
+ animation: spin .75s linear infinite; }
.ionic .icon-refreshing:before {
content: "\e144"; }
.ionic .hidden,
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index a060ccf814..037c254ec4 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1261,7 +1261,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.
@@ -1667,7 +1667,7 @@ a.subdued {
&.bar-footer {
border-top-width: 1px;
}*/
- box-shadow: inset 0 0 1px #999999; }
+ box-shadow: inset 0 0 1px #999; }
.bar.bar-clear {
border: none;
background: none;
@@ -2255,7 +2255,21 @@ a.subdued {
color: white; }
.item,
-.item-content {
+.item h1,
+.item h2,
+.item h3,
+.item h4,
+.item h5,
+.item h6,
+.item p,
+.item-content,
+.item-content h1,
+.item-content h2,
+.item-content h3,
+.item-content h4,
+.item-content h5,
+.item-content h6,
+.item-content p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
@@ -2284,16 +2298,35 @@ a.item {
box-shadow: inset 0 0 1px #666666;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
-.item-text-wrap {
+.item-text-wrap,
+.item-text-wrap h1,
+.item-text-wrap h2,
+.item-text-wrap h3,
+.item-text-wrap h4,
+.item-text-wrap h5,
+.item-text-wrap h6,
+.item-text-wrap p,
+.item-slider.item-text-wrap .item-content,
+.item-body h1,
+.item-body h2,
+.item-body h3,
+.item-body h4,
+.item-body h5,
+.item-body h6,
+.item-body p {
overflow: auto;
white-space: normal; }
-.item-slider.item-text-wrap {
+.item-slider.item-text-wrap,
+.item-slider.item-text-wrap h1,
+.item-slider.item-text-wrap h2,
+.item-slider.item-text-wrap h3,
+.item-slider.item-text-wrap h4,
+.item-slider.item-text-wrap h5,
+.item-slider.item-text-wrap h6,
+.item-slider.item-text-wrap p {
overflow: hidden;
white-space: nowrap; }
- .item-slider.item-text-wrap .item-content {
- overflow: auto;
- white-space: normal; }
.item i {
display: -webkit-box;
@@ -2769,7 +2802,7 @@ input[type="file"] {
line-height: 34px; }
select {
- border: 1px solid #cccccc;
+ border: 1px solid #ccc;
background-color: white; }
select[multiple],
@@ -2824,7 +2857,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%;
background: white;
content: ' ';
- transition: background-color 0.1s ease-in-out; }
+ transition: background-color .1s ease-in-out; }
/* the checkmark within the box */
.checkbox input:after {
@@ -2839,7 +2872,7 @@ input[type="checkbox"][readonly] {
border-right: 0;
content: ' ';
opacity: 0;
- transition: opacity 0.05s ease-in-out;
+ transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
@@ -3209,7 +3242,7 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active {
background: none;
box-shadow: none;
- text-shadow: 0px 0px 10px white; }
+ text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
@@ -3656,9 +3689,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- -webkit-animation: spin 0.75s linear infinite;
- -moz-animation: spin 0.75s linear infinite;
- animation: spin 0.75s linear infinite; }
+ -webkit-animation: spin .75s linear infinite;
+ -moz-animation: spin .75s linear infinite;
+ animation: spin .75s linear infinite; }
.icon-loading:before {
content: "\e144"; }
@@ -3671,9 +3704,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- -webkit-animation: spin 0.75s linear infinite;
- -moz-animation: spin 0.75s linear infinite;
- animation: spin 0.75s linear infinite; }
+ -webkit-animation: spin .75s linear infinite;
+ -moz-animation: spin .75s linear infinite;
+ animation: spin .75s linear infinite; }
.icon-refreshing:before {
content: "\e144"; }
diff --git a/dist/js/ionic.js b/dist/js/ionic.js
index b9f2f95910..9737ddf48a 100644
--- a/dist/js/ionic.js
+++ b/dist/js/ionic.js
@@ -1794,567 +1794,6 @@ window.ionic = {
})(window.ionic);
;
(function(ionic) {
-'use strict';
- ionic.views.View = function() {
- this.initialize.apply(this, arguments);
- };
-
- ionic.views.View.inherit = ionic.inherit;
-
- ionic.extend(ionic.views.View.prototype, {
- initialize: function() {}
- });
-
-})(window.ionic);
-;
-/**
- * ionic.views.Scroll. Portions adapted from the great iScroll 5, which is
- * also MIT licensed.
- * iScroll v5.0.5 ~ (c) 2008-2013 Matteo Spinelli ~ http://cubiq.org/license
- *
- * Think of ionic.views.Scroll like a Javascript version of UIScrollView or any
- * scroll container in any UI library. You could just use -webkit-overflow-scrolling: touch,
- * but you lose control over scroll behavior that native developers have with things
- * like UIScrollView, and you don't get events after the finger stops touching the
- * device (after a flick, for example)
- */
-(function(ionic) {
-'use strict';
- var EASING_FUNCTIONS = {
- quadratic: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
- circular: 'cubic-bezier(0.1, 0.57, 0.1, 1)',
- circular2: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
-
- bounce: 'cubic-bezier(.02,.69,.67,1)',
-
- // It closes like a high-end toilet seat. Fast, then nice and slow.
- // Thanks to our @xtheglobe for that.
- toiletSeat: 'cubic-bezier(0.05, 0.60, 0.05, 0.60)'
- };
-
- ionic.views.Scroll = ionic.views.View.inherit({
- initialize: function(opts) {
- var _this = this;
-
- // Extend the options with our defaults
- opts = ionic.Utils.extend({
- decelerationRate: ionic.views.Scroll.prototype.DECEL_RATE_NORMAL,
- dragThreshold: 10,
- resistance: 2,
- scrollEventName: 'momentumScrolled',
- scrollEndEventName: 'momentumScrollEnd',
- intertialEventInterval: 50,
- mouseWheelSpeed: 20,
- invertWheel: false,
- isVerticalEnabled: true,
- isHorizontalEnabled: false,
- bounceEasing: EASING_FUNCTIONS.bounce,
- bounceTime: 600 //how long to take when bouncing back in a rubber band
- }, opts);
-
- ionic.Utils.extend(this, opts);
-
- this.el = opts.el;
-
- this.y = 0;
- this.x = 0;
-
- // Listen for drag and release events
- ionic.onGesture('drag', function(e) {
- _this._handleDrag(e);
- }, this.el);
- ionic.onGesture('release', function(e) {
- _this._handleEndDrag(e);
- }, this.el);
- ionic.on('mousewheel', function(e) {
- _this._wheel(e);
- }, this.el);
- ionic.on('DOMMouseScroll', function(e) {
- _this._wheel(e);
- }, this.el);
- ionic.on(this.scrollEndEventName, function(e) {
- _this._onScrollEnd(e);
- }, this.el);
- ionic.on('webkitTransitionEnd', function(e) {
- _this._onTransitionEnd(e);
- });
- },
-
- /**
- * Scroll to the given X and Y point, taking
- * the given amount of time, with the given
- * easing function defined as a CSS3 timing function.
- *
- * @param {float} the x position to scroll to (CURRENTLY NOT SUPPORTED!)
- * @param {float} the y position to scroll to
- * @param {float} the time to take scrolling to the new position
- * @param {easing} the animation function to use for easing
- */
- scrollTo: function(x, y, time, easing) {
- var _this = this;
-
-
- easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)';
-
- var ox = x, oy = y;
-
- var el = this.el;
-
- if(x !== null) {
- this.x = x;
- } else {
- x = this.x;
- }
- if(y !== null) {
- this.y = y;
- } else {
- y = this.y;
- }
-
- el.offsetHeight;
- el.style.webkitTransitionTimingFunction = easing;
- el.style.webkitTransitionDuration = time;
- el.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
-
- // Start triggering events as the element scrolls from inertia.
- // This is important because we need to receive scroll events
- // even after a "flick" and adjust, etc.
- this._momentumStepTimeout = setTimeout(function eventNotify() {
- var scrollTop = parseFloat(_this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
- ionic.trigger(_this.scrollEventName, {
- target: _this.el,
- scrollTop: -scrollTop
- });
-
- if(_this._isDragging) {
- _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
- }
- }, this.inertialEventInterval)
-
- console.log('TRANSITION ADDED!');
- },
-
- /**
- * If the scroll position is outside the current bounds,
- * animate it back.
- */
- wrapScrollPosition: function(transitionTime) {
- var _this = this;
-
- var totalWidth = _this.el.scrollWidth;
- var totalHeight = _this.el.scrollHeight;
- var parentWidth = _this.el.parentNode.offsetWidth;
- var parentHeight = _this.el.parentNode.offsetHeight;
-
- var maxX = Math.min(0, (-totalWidth + parentWidth));
- var maxY = Math.min(0, (-totalHeight + parentHeight));
-
- //this._execEvent('scrollEnd');
- var x = _this.x, y = _this.y;
-
- if (!_this.isHorizontalEnabled || _this.x > 0) {
- x = 0;
- } else if ( _this.x < maxX) {
- x = maxX;
- }
-
- if (!_this.isVerticalEnabled || _this.y > 0) {
- y = 0;
- } else if (_this.y < maxY) {
- y = maxY;
- }
-
- // No change
- if (x == _this.x && y == _this.y) {
- return false;
- }
- _this.scrollTo(x, y, transitionTime || 0, _this.bounceEasing);
-
- return true;
- },
-
- _wheel: function(e) {
- var wheelDeltaX, wheelDeltaY,
- newX, newY,
- that = this;
-
- var totalWidth = this.el.scrollWidth;
- var totalHeight = this.el.scrollHeight;
- var parentWidth = this.el.parentNode.offsetWidth;
- var parentHeight = this.el.parentNode.offsetHeight;
-
- var maxX = Math.min(0, (-totalWidth + parentWidth));
- var maxY = Math.min(0, (-totalHeight + parentHeight));
-
- // Execute the scrollEnd event after 400ms the wheel stopped scrolling
- clearTimeout(this.wheelTimeout);
- this.wheelTimeout = setTimeout(function () {
- ionic.trigger(this.scrollEndEventName, {
- target: this.el,
- scrollLeft: this.x,
- scrollTop: this.y
- });
- }, 400);
-
- e.preventDefault();
-
- if('wheelDeltaX' in e) {
- wheelDeltaX = e.wheelDeltaX / 120;
- wheelDeltaY = e.wheelDeltaY / 120;
- } else if ('wheelDelta' in e) {
- wheelDeltaX = wheelDeltaY = e.wheelDelta / 120;
- } else if ('detail' in e) {
- wheelDeltaX = wheelDeltaY = -e.detail / 3;
- } else {
- return;
- }
-
- wheelDeltaX *= this.mouseWheelSpeed;
- wheelDeltaY *= this.mouseWheelSpeed;
-
- if(!this.isVerticalEnabled) {
- wheelDeltaX = wheelDeltaY;
- wheelDeltaY = 0;
- }
-
- newX = this.x + (this.isHorizontalEnabled ? wheelDeltaX * (this.invertWheel ? -1 : 1) : 0);
- newY = this.y + (this.isVerticalEnabled ? wheelDeltaY * (this.invertWheel ? -1 : 1) : 0);
-
- if(newX > 0) {
- newX = 0;
- } else if (newX < maxX) {
- newX = maxX;
- }
-
- if(newY > 0) {
- newY = 0;
- } else if (newY < maxY) {
- newY = maxY;
- }
-
- this.scrollTo(newX, newY, 0);
- },
-
- _getMomentum: function (current, start, time, lowerMargin, wrapperSize) {
- var distance = current - start,
- speed = Math.abs(distance) / time,
- destination,
- duration,
- deceleration = 0.0006;
-
- // Calculate the final desination
- destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
- duration = speed / deceleration;
-
- // Check if the final destination needs to be rubber banded
- if ( destination < lowerMargin ) {
- // We have dragged too far down, snap back to the maximum
- destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
- distance = Math.abs(destination - current);
- duration = distance / speed;
- console.log("MOMENTUM TOO FAR DOWN", destination);
- } else if ( destination > 0 ) {
-
- // We have dragged too far up, snap back to 0
- destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
- distance = Math.abs(current) + destination;
- duration = distance / speed;
- console.log("MOMENTUM TOO FAR UP", destination);
- }
-
- console.log('Momentum: time:', time, 'speed:',speed, 'dest:',destination, 'dur:',duration);
- return {
- destination: Math.round(destination),
- duration: duration
- };
- },
-
- _onTransitionEnd: function(e) {
- var _this = this;
-
- if (e.target != this.el) {
- return;
- }
-
- // Triggered to end scroll, once the final animation has ended
- if(this._didEndScroll) {
- this._didEndScroll = false;
- ionic.trigger(_this.scrollEndEventName, {
- target: _this.el,
- scrollLeft: _this.x,
- scrollTop: _this.y
- });
- }
-
- this.el.style.webkitTransitionDuration = '0';
-
- window.requestAnimationFrame(function() {
- if(_this.wrapScrollPosition(_this.bounceTime)) {
- _this._didEndScroll = true;
- }
- });
- },
-
- _onScrollEnd: function() {
- this._isDragging = false;
- this._drag = null;
- this.el.classList.remove('scroll-scrolling');
-
- console.log('REMOVING TRANSITION');
- this.el.style.webkitTransitionDuration = '0';
-
- clearTimeout(this._momentumStepTimeout)
- },
-
-
- _initDrag: function() {
- this._onScrollEnd();
- this._isStopped = false;
- },
-
-
- /**
- * Initialize a drag by grabbing the content area to drag, and any other
- * info we might need for the dragging.
- */
- _startDrag: function(e) {
- var offsetX, content;
-
- this._initDrag();
-
- var scrollLeft = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
- var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
-
- var totalWidth = this.el.scrollWidth;
- var totalHeight = this.el.scrollHeight;
- var parentWidth = this.el.parentNode.offsetWidth;
- var parentHeight = this.el.parentNode.offsetHeight;
-
- var maxX = Math.min(0, (-totalWidth + parentWidth));
- var maxY = Math.min(0, (-totalHeight + parentHeight));
-
- // Check if we even have enough content to scroll, if not, don't start the drag
- if((this.isHorizontalEnabled && maxX == 0) || (this.isVerticalEnabled && maxY == 0)) {
- return;
- }
-
- this.x = scrollLeft;
- this.y = scrollTop;
-
- this._drag = {
- direction: 'v',
- pointX: e.gesture.touches[0].pageX,
- pointY: e.gesture.touches[0].pageY,
- startX: scrollLeft,
- startY: scrollTop,
- resist: 1,
- startTime: Date.now()
- };
- },
-
-
-
- /**
- * Process the drag event to move the item to the left or right.
- *
- * This function needs to be as fast as possible to make sure scrolling
- * performance is high.
- */
- _handleDrag: function(e) {
- var _this = this;
-
- var content;
-
- // The drag stopped already, don't process this one
- if(_this._isStopped) {
- _this._initDrag();
- return;
- }
-
- // We really aren't dragging
- if(!_this._drag) {
- _this._startDrag(e);
- if(!_this._drag) { return; }
- }
-
- // Stop any default events during the drag
- e.preventDefault();
-
- var px = e.gesture.touches[0].pageX;
- var py = e.gesture.touches[0].pageY;
-
- var deltaX = px - _this._drag.pointX;
- var deltaY = py - _this._drag.pointY;
-
- //console.log("Delta x", deltaX);
- //console.log("Delta y", deltaY);
-
- _this._drag.pointX = px;
- _this._drag.pointY = py;
-
- // Check if we should start dragging. Check if we've dragged past the threshold.
- if(!_this._isDragging &&
- ((Math.abs(e.gesture.deltaY) > _this.dragThreshold) ||
- (Math.abs(e.gesture.deltaX) > _this.dragThreshold))) {
- _this._isDragging = true;
- }
-
- if(_this._isDragging) {
- var drag = _this._drag;
-
- // Request an animation frame to batch DOM reads/writes
- window.requestAnimationFrame(function() {
- // We are dragging, grab the current content height
-
- var totalWidth = _this.el.scrollWidth;
- var totalHeight = _this.el.scrollHeight;
- var parentWidth = _this.el.parentNode.offsetWidth;
- var parentHeight = _this.el.parentNode.offsetHeight;
- var maxX = Math.min(0, (-totalWidth + parentWidth));
- var maxY = Math.min(0, (-totalHeight + parentHeight));
-
- // Grab current timestamp to keep our speend, etc.
- // calculations in a window
- var timestamp = Date.now();
-
- // Calculate the new Y point for the container
- // TODO: Only enable certain axes
- var newX = _this.x + deltaX;
- var newY = _this.y + deltaY;
-
- if(newX > 0 || (-newX + parentWidth) > totalWidth) {
- // Rubber band
- newX = _this.x + deltaX / 3;
- }
- // Check if the dragging is beyond the bottom or top
- if(newY > 0 || (-newY + parentHeight) > totalHeight) {
- // Rubber band
- newY = _this.y + deltaY / 3;//(-_this.resistance);
- }
-
- if(!_this.isHorizontalEnabled) {
- newX = 0;
- }
- if(!_this.isVerticalEnabled) {
- newY = 0;
- }
-
- // Update the new translated Y point of the container
- _this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
-
- // Store the last points
- _this.x = newX;
- _this.y = newY;
-
- console.log('Moving to', newX, newY);
-
- // Check if we need to reset the drag initial states if we've
- // been dragging for a bit
- if(timestamp - drag.startTime > 300) {
- console.log('Resetting timer');
- drag.startTime = timestamp;
- drag.startX = _this.x;
- drag.startY = _this.y;
- }
-
- // Trigger a scroll event
- ionic.trigger(_this.scrollEventName, {
- target: _this.el,
- scrollLeft: -newX,
- scrollTop: -newY
- });
- });
- }
- },
-
-
-
- _handleEndDrag: function(e) {
- // We didn't have a drag, so just init and leave
- if(!this._drag) {
- this._initDrag();
- return;
- }
-
- // Set a flag in case we don't cleanup completely after the
- // drag animation so we can cleanup the next time a drag starts
- this._isStopped = true;
-
- // Animate to the finishing point
- this._animateToStop(e);
-
- },
-
-
- // Find the stopping point given the current velocity and acceleration rate, and
- // animate to that position
- _animateToStop: function(e) {
- var _this = this;
- window.requestAnimationFrame(function() {
-
- var drag = _this._drag;
-
- // Calculate the viewport height and the height of the content
- var totalWidth = _this.el.scrollWidth;
- var totalHeight = _this.el.scrollHeight;
-
- // The parent bounding box helps us figure max/min scroll amounts
- var parentWidth = _this.el.parentNode.offsetWidth;
- var parentHeight = _this.el.parentNode.offsetHeight;
-
- // Calculate how long we've been dragging for, with a max of 300ms
- var duration = Date.now() - _this._drag.startTime;
- var time = 0;
- var easing = '';
-
- var newX = Math.round(_this.x);
- var newY = Math.round(_this.y);
-
- _this.scrollTo(newX, newY);
-
-
- // Check if we just snap back to bounds
- if(_this.wrapScrollPosition(_this.bounceTime)) {
- return;
- }
-
- // If the duration is within reasonable bounds, enable momentum scrolling so we
- // can "slide" to a finishing point
- if(duration < 300) {
- var momentumX = _this._getMomentum(_this.x, drag.startX, duration, parentWidth - totalWidth, parentWidth);
- var momentumY = _this._getMomentum(_this.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);
- //var newX = momentumX.destination;
- newX = momentumX.destination;
- newY = momentumY.destination;
-
- // Calcualte the longest required time for the momentum animation and
- // use that.
- time = Math.max(momentumX.duration, momentumY.duration);
- }
-
- // If we've moved, we will need to scroll
- if(newX != _this.x || newY != _this.y) {
- console.trace("SCROLL FROM", _this.x, _this.y, "TO", newX, newY);
-
- // If the end position is out of bounds, change the function we use for easing
- // to get a different animation for the rubber banding
- if ( newX > 0 || newX < (-totalWidth + parentWidth) || newY > 0 || newY < (-totalHeight + parentHeight)) {
- easing = EASING_FUNCTIONS.bounce;
- }
-
- _this.scrollTo(newX, newY, time, easing);
- }
- });
- }
- }, {
- DECEL_RATE_NORMAL: 0.998,
- DECEL_RATE_FAST: 0.99,
- DECEL_RATE_SLOW: 0.996,
- });
-
-})(ionic);
-;
-(function(ionic) {
'use strict';
/**
* An ActionSheet is the slide up menu popularized on iOS.
@@ -3578,6 +3017,553 @@ window.ionic = {
}
};
+})(ionic);
+;
+/**
+ * ionic.views.Scroll. Portions adapted from the great iScroll 5, which is
+ * also MIT licensed.
+ * iScroll v5.0.5 ~ (c) 2008-2013 Matteo Spinelli ~ http://cubiq.org/license
+ *
+ * Think of ionic.views.Scroll like a Javascript version of UIScrollView or any
+ * scroll container in any UI library. You could just use -webkit-overflow-scrolling: touch,
+ * but you lose control over scroll behavior that native developers have with things
+ * like UIScrollView, and you don't get events after the finger stops touching the
+ * device (after a flick, for example)
+ */
+(function(ionic) {
+'use strict';
+ var EASING_FUNCTIONS = {
+ quadratic: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+ circular: 'cubic-bezier(0.1, 0.57, 0.1, 1)',
+ circular2: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
+
+ bounce: 'cubic-bezier(.02,.69,.67,1)',
+
+ // It closes like a high-end toilet seat. Fast, then nice and slow.
+ // Thanks to our @xtheglobe for that.
+ toiletSeat: 'cubic-bezier(0.05, 0.60, 0.05, 0.60)'
+ };
+
+ ionic.views.Scroll = ionic.views.View.inherit({
+ initialize: function(opts) {
+ var _this = this;
+
+ // Extend the options with our defaults
+ opts = ionic.Utils.extend({
+ decelerationRate: ionic.views.Scroll.prototype.DECEL_RATE_NORMAL,
+ dragThreshold: 10,
+ resistance: 2,
+ scrollEventName: 'momentumScrolled',
+ scrollEndEventName: 'momentumScrollEnd',
+ intertialEventInterval: 50,
+ mouseWheelSpeed: 20,
+ invertWheel: false,
+ isVerticalEnabled: true,
+ isHorizontalEnabled: false,
+ bounceEasing: EASING_FUNCTIONS.bounce,
+ bounceTime: 600 //how long to take when bouncing back in a rubber band
+ }, opts);
+
+ ionic.Utils.extend(this, opts);
+
+ this.el = opts.el;
+
+ this.y = 0;
+ this.x = 0;
+
+ // Listen for drag and release events
+ ionic.onGesture('drag', function(e) {
+ _this._handleDrag(e);
+ }, this.el);
+ ionic.onGesture('release', function(e) {
+ _this._handleEndDrag(e);
+ }, this.el);
+ ionic.on('mousewheel', function(e) {
+ _this._wheel(e);
+ }, this.el);
+ ionic.on('DOMMouseScroll', function(e) {
+ _this._wheel(e);
+ }, this.el);
+ ionic.on(this.scrollEndEventName, function(e) {
+ _this._onScrollEnd(e);
+ }, this.el);
+ ionic.on('webkitTransitionEnd', function(e) {
+ _this._onTransitionEnd(e);
+ });
+ },
+
+ /**
+ * Scroll to the given X and Y point, taking
+ * the given amount of time, with the given
+ * easing function defined as a CSS3 timing function.
+ *
+ * @param {float} the x position to scroll to (CURRENTLY NOT SUPPORTED!)
+ * @param {float} the y position to scroll to
+ * @param {float} the time to take scrolling to the new position
+ * @param {easing} the animation function to use for easing
+ */
+ scrollTo: function(x, y, time, easing) {
+ var _this = this;
+
+
+ easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)';
+
+ var ox = x, oy = y;
+
+ var el = this.el;
+
+ if(x !== null) {
+ this.x = x;
+ } else {
+ x = this.x;
+ }
+ if(y !== null) {
+ this.y = y;
+ } else {
+ y = this.y;
+ }
+
+ el.offsetHeight;
+ el.style.webkitTransitionTimingFunction = easing;
+ el.style.webkitTransitionDuration = time;
+ el.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
+
+ // Start triggering events as the element scrolls from inertia.
+ // This is important because we need to receive scroll events
+ // even after a "flick" and adjust, etc.
+ this._momentumStepTimeout = setTimeout(function eventNotify() {
+ var scrollTop = parseFloat(_this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
+ ionic.trigger(_this.scrollEventName, {
+ target: _this.el,
+ scrollTop: -scrollTop
+ });
+
+ if(_this._isDragging) {
+ _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
+ }
+ }, this.inertialEventInterval)
+
+ console.log('TRANSITION ADDED!');
+ },
+
+ /**
+ * If the scroll position is outside the current bounds,
+ * animate it back.
+ */
+ wrapScrollPosition: function(transitionTime) {
+ var _this = this;
+
+ var totalWidth = _this.el.scrollWidth;
+ var totalHeight = _this.el.scrollHeight;
+ var parentWidth = _this.el.parentNode.offsetWidth;
+ var parentHeight = _this.el.parentNode.offsetHeight;
+
+ var maxX = Math.min(0, (-totalWidth + parentWidth));
+ var maxY = Math.min(0, (-totalHeight + parentHeight));
+
+ //this._execEvent('scrollEnd');
+ var x = _this.x, y = _this.y;
+
+ if (!_this.isHorizontalEnabled || _this.x > 0) {
+ x = 0;
+ } else if ( _this.x < maxX) {
+ x = maxX;
+ }
+
+ if (!_this.isVerticalEnabled || _this.y > 0) {
+ y = 0;
+ } else if (_this.y < maxY) {
+ y = maxY;
+ }
+
+ // No change
+ if (x == _this.x && y == _this.y) {
+ return false;
+ }
+ _this.scrollTo(x, y, transitionTime || 0, _this.bounceEasing);
+
+ return true;
+ },
+
+ _wheel: function(e) {
+ var wheelDeltaX, wheelDeltaY,
+ newX, newY,
+ that = this;
+
+ var totalWidth = this.el.scrollWidth;
+ var totalHeight = this.el.scrollHeight;
+ var parentWidth = this.el.parentNode.offsetWidth;
+ var parentHeight = this.el.parentNode.offsetHeight;
+
+ var maxX = Math.min(0, (-totalWidth + parentWidth));
+ var maxY = Math.min(0, (-totalHeight + parentHeight));
+
+ // Execute the scrollEnd event after 400ms the wheel stopped scrolling
+ clearTimeout(this.wheelTimeout);
+ this.wheelTimeout = setTimeout(function () {
+ ionic.trigger(this.scrollEndEventName, {
+ target: this.el,
+ scrollLeft: this.x,
+ scrollTop: this.y
+ });
+ }, 400);
+
+ e.preventDefault();
+
+ if('wheelDeltaX' in e) {
+ wheelDeltaX = e.wheelDeltaX / 120;
+ wheelDeltaY = e.wheelDeltaY / 120;
+ } else if ('wheelDelta' in e) {
+ wheelDeltaX = wheelDeltaY = e.wheelDelta / 120;
+ } else if ('detail' in e) {
+ wheelDeltaX = wheelDeltaY = -e.detail / 3;
+ } else {
+ return;
+ }
+
+ wheelDeltaX *= this.mouseWheelSpeed;
+ wheelDeltaY *= this.mouseWheelSpeed;
+
+ if(!this.isVerticalEnabled) {
+ wheelDeltaX = wheelDeltaY;
+ wheelDeltaY = 0;
+ }
+
+ newX = this.x + (this.isHorizontalEnabled ? wheelDeltaX * (this.invertWheel ? -1 : 1) : 0);
+ newY = this.y + (this.isVerticalEnabled ? wheelDeltaY * (this.invertWheel ? -1 : 1) : 0);
+
+ if(newX > 0) {
+ newX = 0;
+ } else if (newX < maxX) {
+ newX = maxX;
+ }
+
+ if(newY > 0) {
+ newY = 0;
+ } else if (newY < maxY) {
+ newY = maxY;
+ }
+
+ this.scrollTo(newX, newY, 0);
+ },
+
+ _getMomentum: function (current, start, time, lowerMargin, wrapperSize) {
+ var distance = current - start,
+ speed = Math.abs(distance) / time,
+ destination,
+ duration,
+ deceleration = 0.0006;
+
+ // Calculate the final desination
+ destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
+ duration = speed / deceleration;
+
+ // Check if the final destination needs to be rubber banded
+ if ( destination < lowerMargin ) {
+ // We have dragged too far down, snap back to the maximum
+ destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin;
+ distance = Math.abs(destination - current);
+ duration = distance / speed;
+ console.log("MOMENTUM TOO FAR DOWN", destination);
+ } else if ( destination > 0 ) {
+
+ // We have dragged too far up, snap back to 0
+ destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0;
+ distance = Math.abs(current) + destination;
+ duration = distance / speed;
+ console.log("MOMENTUM TOO FAR UP", destination);
+ }
+
+ console.log('Momentum: time:', time, 'speed:',speed, 'dest:',destination, 'dur:',duration);
+ return {
+ destination: Math.round(destination),
+ duration: duration
+ };
+ },
+
+ _onTransitionEnd: function(e) {
+ var _this = this;
+
+ if (e.target != this.el) {
+ return;
+ }
+
+ // Triggered to end scroll, once the final animation has ended
+ if(this._didEndScroll) {
+ this._didEndScroll = false;
+ ionic.trigger(_this.scrollEndEventName, {
+ target: _this.el,
+ scrollLeft: _this.x,
+ scrollTop: _this.y
+ });
+ }
+
+ this.el.style.webkitTransitionDuration = '0';
+
+ window.requestAnimationFrame(function() {
+ if(_this.wrapScrollPosition(_this.bounceTime)) {
+ _this._didEndScroll = true;
+ }
+ });
+ },
+
+ _onScrollEnd: function() {
+ this._isDragging = false;
+ this._drag = null;
+ this.el.classList.remove('scroll-scrolling');
+
+ console.log('REMOVING TRANSITION');
+ this.el.style.webkitTransitionDuration = '0';
+
+ clearTimeout(this._momentumStepTimeout)
+ },
+
+
+ _initDrag: function() {
+ this._onScrollEnd();
+ this._isStopped = false;
+ },
+
+
+ /**
+ * Initialize a drag by grabbing the content area to drag, and any other
+ * info we might need for the dragging.
+ */
+ _startDrag: function(e) {
+ var offsetX, content;
+
+ this._initDrag();
+
+ var scrollLeft = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
+ var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0;
+
+ var totalWidth = this.el.scrollWidth;
+ var totalHeight = this.el.scrollHeight;
+ var parentWidth = this.el.parentNode.offsetWidth;
+ var parentHeight = this.el.parentNode.offsetHeight;
+
+ var maxX = Math.min(0, (-totalWidth + parentWidth));
+ var maxY = Math.min(0, (-totalHeight + parentHeight));
+
+ // Check if we even have enough content to scroll, if not, don't start the drag
+ if((this.isHorizontalEnabled && maxX == 0) || (this.isVerticalEnabled && maxY == 0)) {
+ return;
+ }
+
+ this.x = scrollLeft;
+ this.y = scrollTop;
+
+ this._drag = {
+ direction: 'v',
+ pointX: e.gesture.touches[0].pageX,
+ pointY: e.gesture.touches[0].pageY,
+ startX: scrollLeft,
+ startY: scrollTop,
+ resist: 1,
+ startTime: Date.now()
+ };
+ },
+
+
+
+ /**
+ * Process the drag event to move the item to the left or right.
+ *
+ * This function needs to be as fast as possible to make sure scrolling
+ * performance is high.
+ */
+ _handleDrag: function(e) {
+ var _this = this;
+
+ var content;
+
+ // The drag stopped already, don't process this one
+ if(_this._isStopped) {
+ _this._initDrag();
+ return;
+ }
+
+ // We really aren't dragging
+ if(!_this._drag) {
+ _this._startDrag(e);
+ if(!_this._drag) { return; }
+ }
+
+ // Stop any default events during the drag
+ e.preventDefault();
+
+ var px = e.gesture.touches[0].pageX;
+ var py = e.gesture.touches[0].pageY;
+
+ var deltaX = px - _this._drag.pointX;
+ var deltaY = py - _this._drag.pointY;
+
+ //console.log("Delta x", deltaX);
+ //console.log("Delta y", deltaY);
+
+ _this._drag.pointX = px;
+ _this._drag.pointY = py;
+
+ // Check if we should start dragging. Check if we've dragged past the threshold.
+ if(!_this._isDragging &&
+ ((Math.abs(e.gesture.deltaY) > _this.dragThreshold) ||
+ (Math.abs(e.gesture.deltaX) > _this.dragThreshold))) {
+ _this._isDragging = true;
+ }
+
+ if(_this._isDragging) {
+ var drag = _this._drag;
+
+ // Request an animation frame to batch DOM reads/writes
+ window.requestAnimationFrame(function() {
+ // We are dragging, grab the current content height
+
+ var totalWidth = _this.el.scrollWidth;
+ var totalHeight = _this.el.scrollHeight;
+ var parentWidth = _this.el.parentNode.offsetWidth;
+ var parentHeight = _this.el.parentNode.offsetHeight;
+ var maxX = Math.min(0, (-totalWidth + parentWidth));
+ var maxY = Math.min(0, (-totalHeight + parentHeight));
+
+ // Grab current timestamp to keep our speend, etc.
+ // calculations in a window
+ var timestamp = Date.now();
+
+ // Calculate the new Y point for the container
+ // TODO: Only enable certain axes
+ var newX = _this.x + deltaX;
+ var newY = _this.y + deltaY;
+
+ if(newX > 0 || (-newX + parentWidth) > totalWidth) {
+ // Rubber band
+ newX = _this.x + deltaX / 3;
+ }
+ // Check if the dragging is beyond the bottom or top
+ if(newY > 0 || (-newY + parentHeight) > totalHeight) {
+ // Rubber band
+ newY = _this.y + deltaY / 3;//(-_this.resistance);
+ }
+
+ if(!_this.isHorizontalEnabled) {
+ newX = 0;
+ }
+ if(!_this.isVerticalEnabled) {
+ newY = 0;
+ }
+
+ // Update the new translated Y point of the container
+ _this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
+
+ // Store the last points
+ _this.x = newX;
+ _this.y = newY;
+
+ console.log('Moving to', newX, newY);
+
+ // Check if we need to reset the drag initial states if we've
+ // been dragging for a bit
+ if(timestamp - drag.startTime > 300) {
+ console.log('Resetting timer');
+ drag.startTime = timestamp;
+ drag.startX = _this.x;
+ drag.startY = _this.y;
+ }
+
+ // Trigger a scroll event
+ ionic.trigger(_this.scrollEventName, {
+ target: _this.el,
+ scrollLeft: -newX,
+ scrollTop: -newY
+ });
+ });
+ }
+ },
+
+
+
+ _handleEndDrag: function(e) {
+ // We didn't have a drag, so just init and leave
+ if(!this._drag) {
+ this._initDrag();
+ return;
+ }
+
+ // Set a flag in case we don't cleanup completely after the
+ // drag animation so we can cleanup the next time a drag starts
+ this._isStopped = true;
+
+ // Animate to the finishing point
+ this._animateToStop(e);
+
+ },
+
+
+ // Find the stopping point given the current velocity and acceleration rate, and
+ // animate to that position
+ _animateToStop: function(e) {
+ var _this = this;
+ window.requestAnimationFrame(function() {
+
+ var drag = _this._drag;
+
+ // Calculate the viewport height and the height of the content
+ var totalWidth = _this.el.scrollWidth;
+ var totalHeight = _this.el.scrollHeight;
+
+ // The parent bounding box helps us figure max/min scroll amounts
+ var parentWidth = _this.el.parentNode.offsetWidth;
+ var parentHeight = _this.el.parentNode.offsetHeight;
+
+ // Calculate how long we've been dragging for, with a max of 300ms
+ var duration = Date.now() - _this._drag.startTime;
+ var time = 0;
+ var easing = '';
+
+ var newX = Math.round(_this.x);
+ var newY = Math.round(_this.y);
+
+ _this.scrollTo(newX, newY);
+
+
+ // Check if we just snap back to bounds
+ if(_this.wrapScrollPosition(_this.bounceTime)) {
+ return;
+ }
+
+ // If the duration is within reasonable bounds, enable momentum scrolling so we
+ // can "slide" to a finishing point
+ if(duration < 300) {
+ var momentumX = _this._getMomentum(_this.x, drag.startX, duration, parentWidth - totalWidth, parentWidth);
+ var momentumY = _this._getMomentum(_this.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);
+ //var newX = momentumX.destination;
+ newX = momentumX.destination;
+ newY = momentumY.destination;
+
+ // Calcualte the longest required time for the momentum animation and
+ // use that.
+ time = Math.max(momentumX.duration, momentumY.duration);
+ }
+
+ // If we've moved, we will need to scroll
+ if(newX != _this.x || newY != _this.y) {
+ console.trace("SCROLL FROM", _this.x, _this.y, "TO", newX, newY);
+
+ // If the end position is out of bounds, change the function we use for easing
+ // to get a different animation for the rubber banding
+ if ( newX > 0 || newX < (-totalWidth + parentWidth) || newY > 0 || newY < (-totalHeight + parentHeight)) {
+ easing = EASING_FUNCTIONS.bounce;
+ }
+
+ _this.scrollTo(newX, newY, time, easing);
+ }
+ });
+ }
+ }, {
+ DECEL_RATE_NORMAL: 0.998,
+ DECEL_RATE_FAST: 0.99,
+ DECEL_RATE_SLOW: 0.996,
+ });
+
})(ionic);
;
(function(ionic) {
@@ -4205,6 +4191,20 @@ ionic.views.TabBar.prototype = {
})(ionic);
;
(function(ionic) {
+'use strict';
+ ionic.views.View = function() {
+ this.initialize.apply(this, arguments);
+ };
+
+ ionic.views.View.inherit = ionic.inherit;
+
+ ionic.extend(ionic.views.View.prototype, {
+ initialize: function() {}
+ });
+
+})(window.ionic);
+;
+(function(ionic) {
'use strict';
/**
diff --git a/scss/ionic/_items.scss b/scss/ionic/_items.scss
index 8117ed79f1..a13da6d3ad 100644
--- a/scss/ionic/_items.scss
+++ b/scss/ionic/_items.scss
@@ -82,7 +82,21 @@
// Handle text overflow
.item,
-.item-content {
+.item h1,
+.item h2,
+.item h3,
+.item h4,
+.item h5,
+.item h6,
+.item p,
+.item-content,
+.item-content h1,
+.item-content h2,
+.item-content h3,
+.item-content h4,
+.item-content h5,
+.item-content h6,
+.item-content p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -125,17 +139,35 @@ a.item {
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
}
-.item-text-wrap {
+.item-text-wrap,
+.item-text-wrap h1,
+.item-text-wrap h2,
+.item-text-wrap h3,
+.item-text-wrap h4,
+.item-text-wrap h5,
+.item-text-wrap h6,
+.item-text-wrap p,
+.item-slider.item-text-wrap .item-content,
+.item-body h1,
+.item-body h2,
+.item-body h3,
+.item-body h4,
+.item-body h5,
+.item-body h6,
+.item-body p {
overflow: auto;
white-space: normal;
}
-.item-slider.item-text-wrap {
+.item-slider.item-text-wrap,
+.item-slider.item-text-wrap h1,
+.item-slider.item-text-wrap h2,
+.item-slider.item-text-wrap h3,
+.item-slider.item-text-wrap h4,
+.item-slider.item-text-wrap h5,
+.item-slider.item-text-wrap h6,
+.item-slider.item-text-wrap p {
overflow: hidden;
white-space: nowrap;
- .item-content {
- overflow: auto;
- white-space: normal;
- }
}
diff --git a/test/lists.html b/test/lists.html
index a34159bd01..ec0f9f6d6a 100644
--- a/test/lists.html
+++ b/test/lists.html
@@ -450,7 +450,7 @@
-
+