diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 9b605592de..e36923ea27 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -836,22 +836,22 @@ a.subdued {
* A navigation bar with any number of tab items supported.
*/
.tabs {
- font-size: 16px;
- position: fixed;
- bottom: 0;
- width: 100%;
- height: 49px;
- z-index: 5;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
- display: -webkit-box;
- display: box;
- border-top-width: 1px;
- border-style: solid;
background-color: white;
border-color: #dddddd;
- color: #333333; }
+ color: #333333;
+ position: fixed;
+ bottom: 0;
+ z-index: 5;
+ display: -webkit-box;
+ display: box;
+ width: 100%;
+ height: 49px;
+ border-style: solid;
+ border-top-width: 1px;
+ font-size: 16px; }
.tabs.tabs-default {
background-color: white;
border-color: #dddddd;
@@ -889,25 +889,52 @@ a.subdued {
top: 44px; }
.tab-item {
- display: block;
- width: 0;
- height: 100%;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
+ display: block;
+ overflow: hidden;
box-sizing: border-box;
+ padding-top: 4px;
+ width: 0;
+ height: 100%;
+ color: inherit;
text-align: center;
text-decoration: none;
- font-weight: 400;
- font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 10px;
- color: inherit;
text-overflow: ellipsis;
white-space: nowrap;
- overflow: hidden;
+ font-weight: 400;
+ font-size: 14px;
+ font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
opacity: 0.7; }
- .tab-item i {
- font-size: 32px; }
+
+.tabs-icon-top .tab-item,
+.tabs-icon-right .tab-item,
+.tabs-icon-bottom .tab-item,
+.tabs-icon-left .tab-item {
+ position: relative;
+ padding-top: 0;
+ font-size: 10px; }
+
+.tabs-icon-left .tab-item i {
+ position: absolute;
+ left: 4px;
+ display: flex;
+ height: 100%;
+ align-items: center; }
+
+.tabs-icon-right .tab-item i {
+ position: absolute;
+ right: 4px;
+ display: flex;
+ height: 100%;
+ align-items: center; }
+
+/* Icon for tab */
+.tab-item i {
+ display: block;
+ margin: 1px auto -3px auto;
+ font-size: 32px; }
/* Navigational tab */
/* Active state for tab */
@@ -928,11 +955,6 @@ a.subdued {
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; }
-/* Icon for tab */
-.tab-item i {
- display: block;
- margin: 1px auto -3px auto; }
-
/* Label for tab */
.tab-label {
margin-top: 1px;
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index d81c1c97cd..9100d41c41 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -143,9 +143,9 @@
*
* A navigation bar with any number of tab items supported.
*/
+ /* Icon for tab */
/* Navigational tab */
/* Active state for tab */
- /* Icon for tab */
/* Label for tab */
/**
* Modals are independent windows that slide in from off-screen.
@@ -1583,22 +1583,22 @@
bottom: 44px;
display: block; }
.ionic .tabs {
- font-size: 16px;
- position: fixed;
- bottom: 0;
- width: 100%;
- height: 49px;
- z-index: 5;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
- display: -webkit-box;
- display: box;
- border-top-width: 1px;
- border-style: solid;
background-color: white;
border-color: #dddddd;
- color: #333333; }
+ color: #333333;
+ position: fixed;
+ bottom: 0;
+ z-index: 5;
+ display: -webkit-box;
+ display: box;
+ width: 100%;
+ height: 49px;
+ border-style: solid;
+ border-top-width: 1px;
+ font-size: 16px; }
.ionic .tabs.tabs-default {
background-color: white;
border-color: #dddddd;
@@ -1634,25 +1634,47 @@
.ionic .tabs-top {
top: 44px; }
.ionic .tab-item {
- display: block;
- width: 0;
- height: 100%;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
+ display: block;
+ overflow: hidden;
box-sizing: border-box;
+ padding-top: 4px;
+ width: 0;
+ height: 100%;
+ color: inherit;
text-align: center;
text-decoration: none;
- font-weight: 400;
- font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 10px;
- color: inherit;
text-overflow: ellipsis;
white-space: nowrap;
- overflow: hidden;
+ font-weight: 400;
+ font-size: 14px;
+ font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
opacity: 0.7; }
- .ionic .tab-item i {
- font-size: 32px; }
+ .ionic .tabs-icon-top .tab-item,
+ .ionic .tabs-icon-right .tab-item,
+ .ionic .tabs-icon-bottom .tab-item,
+ .ionic .tabs-icon-left .tab-item {
+ position: relative;
+ padding-top: 0;
+ font-size: 10px; }
+ .ionic .tabs-icon-left .tab-item i {
+ position: absolute;
+ left: 4px;
+ display: flex;
+ height: 100%;
+ align-items: center; }
+ .ionic .tabs-icon-right .tab-item i {
+ position: absolute;
+ right: 4px;
+ display: flex;
+ height: 100%;
+ align-items: center; }
+ .ionic .tab-item i {
+ display: block;
+ margin: 1px auto -3px auto;
+ font-size: 32px; }
.ionic .tab-item.active, .ionic .tab-item:active {
opacity: 1; }
.ionic .tab-item.active.tab-item-default, .ionic .tab-item:active.tab-item-default {
@@ -1669,9 +1691,6 @@
color: #f0b840; }
.ionic .tab-item.active.tab-item-dark, .ionic .tab-item:active.tab-item-dark {
color: #444444; }
- .ionic .tab-item i {
- display: block;
- margin: 1px auto -3px auto; }
.ionic .tab-label {
margin-top: 1px;
color: #fff;
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 3de1816eed..4fbbbcda0e 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1945,22 +1945,22 @@ a.subdued {
* A navigation bar with any number of tab items supported.
*/
.tabs {
- font-size: 16px;
- position: fixed;
- bottom: 0;
- width: 100%;
- height: 49px;
- z-index: 5;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
- display: -webkit-box;
- display: box;
- border-top-width: 1px;
- border-style: solid;
background-color: white;
border-color: #dddddd;
- color: #333333; }
+ color: #333333;
+ position: fixed;
+ bottom: 0;
+ z-index: 5;
+ display: -webkit-box;
+ display: box;
+ width: 100%;
+ height: 49px;
+ border-style: solid;
+ border-top-width: 1px;
+ font-size: 16px; }
.tabs.tabs-default {
background-color: white;
border-color: #dddddd;
@@ -1998,25 +1998,52 @@ a.subdued {
top: 44px; }
.tab-item {
- display: block;
- width: 0;
- height: 100%;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
+ display: block;
+ overflow: hidden;
box-sizing: border-box;
+ padding-top: 4px;
+ width: 0;
+ height: 100%;
+ color: inherit;
text-align: center;
text-decoration: none;
- font-weight: 400;
- font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 10px;
- color: inherit;
text-overflow: ellipsis;
white-space: nowrap;
- overflow: hidden;
+ font-weight: 400;
+ font-size: 14px;
+ font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
opacity: 0.7; }
- .tab-item i {
- font-size: 32px; }
+
+.tabs-icon-top .tab-item,
+.tabs-icon-right .tab-item,
+.tabs-icon-bottom .tab-item,
+.tabs-icon-left .tab-item {
+ position: relative;
+ padding-top: 0;
+ font-size: 10px; }
+
+.tabs-icon-left .tab-item i {
+ position: absolute;
+ left: 4px;
+ display: flex;
+ height: 100%;
+ align-items: center; }
+
+.tabs-icon-right .tab-item i {
+ position: absolute;
+ right: 4px;
+ display: flex;
+ height: 100%;
+ align-items: center; }
+
+/* Icon for tab */
+.tab-item i {
+ display: block;
+ margin: 1px auto -3px auto;
+ font-size: 32px; }
/* Navigational tab */
/* Active state for tab */
@@ -2037,11 +2064,6 @@ a.subdued {
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; }
-/* Icon for tab */
-.tab-item i {
- display: block;
- margin: 1px auto -3px auto; }
-
/* Label for tab */
.tab-label {
margin-top: 1px;
diff --git a/dist/js/ionic.js b/dist/js/ionic.js
index b7f642680e..f4f5da6c71 100644
--- a/dist/js/ionic.js
+++ b/dist/js/ionic.js
@@ -1865,6 +1865,677 @@ 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 lovingly 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).
+ *
+ * Some people are afraid of using Javascript powered scrolling, but
+ * with today's devices, Javascript is probably the best solution for
+ * scrolling in hybrid apps. Someone's code is running somewhere, even on native, right?
+ */
+(function(ionic) {
+'use strict';
+
+ // Some easing functions for animations
+ 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 when scrolling too far up or down
+ rubberBandResistance: 3,
+
+ // Scroll event names. These are custom so can be configured
+ scrollEventName: 'momentumScrolled',
+ scrollEndEventName: 'momentumScrollEnd',
+
+ // How frequently to fire scroll events in the case of
+ // a flick or momentum scroll where the finger is no longer
+ // touching the screen. If your event handler is a performance
+ // hog, change this millisecond value to cut down on the frequency
+ // of events triggered in those instances.
+ inertialEventInterval: 50,
+
+ // How quickly to scroll with a mouse wheel. 20 is a good default
+ mouseWheelSpeed: 20,
+
+ // Invert the mouse wheel? This makes sense on new Macbooks, but
+ // nowhere else.
+ invertWheel: false,
+
+ // Enable vertical scrolling
+ isVerticalEnabled: true,
+
+ // Enable horizontal scrolling
+ isHorizontalEnabled: false,
+
+ // The easing function to use for bouncing up or down on the bounds
+ // of the scrolling area
+ bounceEasing: EASING_FUNCTIONS.bounce,
+
+ //how long to take when bouncing back in a rubber band
+ bounceTime: 600
+ }, opts);
+
+ ionic.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.
+ *
+ * Note: the x and y values will be converted to negative offsets due to
+ * the way scrolling works internally.
+ *
+ * @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) {
+ this._scrollTo(-x, -y, time, easing);
+ },
+
+ _scrollTo: function(x, y, time, easing) {
+ var _this = this;
+
+ var start = Date.now();
+
+ easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)';
+ var easingValues = easing.replace('cubic-bezier(', '').replace(')', '').split(',');
+ easingValues = [parseFloat(easingValues[0]), parseFloat(easingValues[1]), parseFloat(easingValues[2]), parseFloat(easingValues[3])];
+
+ var cubicBezierFunction = ionic.Animator.getCubicBezier(easingValues[0], easingValues[1], easingValues[2], easingValues[3], time);
+
+ var ox = this.x, oy = this.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;
+ }
+
+ if(ox == x && oy == y) {
+ time = 0;
+ }
+
+ var dx = ox - x;
+ var dy = oy - y;
+
+ el.offsetHeight;
+ el.style.webkitTransitionTimingFunction = easing;
+ el.style.webkitTransitionDuration = time;
+ el.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
+
+ // Stop any other momentum event callbacks
+ clearTimeout(this._momentumStepTimeout);
+
+ // 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.
+ if(time > 0) {
+ this._momentumStepTimeout = setTimeout(function eventNotify() {
+ // Calculate where in the animation process we might be
+ var diff = Math.min(time, Math.abs(Date.now() - start));
+
+ // How far along in time have we moved
+ var timeRatio = diff / time;
+
+ // Interpolate the transition values, using the same
+ // cubic bezier animation function used in the transition.
+ var bx = ox - dx * cubicBezierFunction(timeRatio);
+ var by = oy - dy * cubicBezierFunction(timeRatio);
+
+ _this.didScroll && _this.didScroll({
+ target: _this.el,
+ scrollLeft: -bx,
+ scrollTop: -by
+ });
+ ionic.trigger(_this.scrollEventName, {
+ target: _this.el,
+ scrollLeft: -bx,
+ scrollTop: -by
+ });
+
+ if(_this._isDragging) {
+ _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
+ }
+ }, this.inertialEventInterval);
+ } else {
+ this.didScroll && this.didScroll({
+ target: this.el,
+ scrollLeft: -this.x,
+ scrollTop: -this.y
+ });
+ ionic.trigger(this.scrollEventName, {
+ target: this.el,
+ scrollLeft: -this.x,
+ scrollTop: -this.y
+ });
+ }
+ },
+
+ needsWrapping: function() {
+ 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));
+
+ if (this.isHorizontalEnabled && (this.x > 0 || this.x < maxX)) {
+ return true;
+ }
+
+ if (this.isVerticalEnabled && (this.y > 0 || this.y < maxY)) {
+ return true;
+ }
+
+ return false;
+ },
+
+ /**
+ * 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 () {
+ that._doneScrolling();
+ }, 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;
+ } 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;
+ }
+
+ return {
+ destination: Math.round(destination),
+ duration: duration
+ };
+ },
+
+ _onTransitionEnd: function(e) {
+ var _this = this;
+
+ if (e.target != this.el) {
+ return;
+ }
+
+ var needsWrapping = this.needsWrapping();
+
+ // Triggered to end scroll, once the final animation has ended
+ if(needsWrapping && this._didEndScroll) {
+ this._didEndScroll = false;
+ this._doneScrolling();
+ } else if(!needsWrapping) {
+ this._didEndScroll = false;
+ this._doneScrolling();
+ }
+
+ 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');
+
+ 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;
+
+ _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 / _this.rubberBandResistance;
+ }
+ // Check if the dragging is beyond the bottom or top
+ if(newY > 0 || (-newY + parentHeight) > totalHeight) {
+ // Rubber band
+ newY = _this.y + deltaY / _this.rubberBandResistance;
+ }
+
+ 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;
+
+ // Check if we need to reset the drag initial states if we've
+ // been dragging for a bit
+ if(timestamp - drag.startTime > 300) {
+ drag.startTime = timestamp;
+ drag.startX = _this.x;
+ drag.startY = _this.y;
+ }
+
+ _this.didScroll && _this.didScroll({
+ target: _this.el,
+ scrollLeft: -newX,
+ scrollTop: -newY
+ });
+
+ // 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;
+
+ // Calculate 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) {
+ // 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);
+ } else {
+ // We are done
+ _this._doneScrolling();
+ }
+ });
+ },
+
+ _doneScrolling: function() {
+ this.didStopScrolling && this.didStopScrolling({
+ target: this.el,
+ scrollLeft: this.x,
+ scrollTop: this.y
+ });
+ ionic.trigger(this.scrollEndEventName, {
+ target: this.el,
+ scrollLeft: this.x,
+ scrollTop: this.y
+ });
+ }
+ }, {
+ 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.
@@ -3127,663 +3798,6 @@ window.ionic = {
}
};
-})(ionic);
-;
-/**
- * ionic.views.Scroll. Portions lovingly 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).
- *
- * Some people are afraid of using Javascript powered scrolling, but
- * with today's devices, Javascript is probably the best solution for
- * scrolling in hybrid apps. Someone's code is running somewhere, even on native, right?
- */
-(function(ionic) {
-'use strict';
-
- // Some easing functions for animations
- 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 when scrolling too far up or down
- rubberBandResistance: 3,
-
- // Scroll event names. These are custom so can be configured
- scrollEventName: 'momentumScrolled',
- scrollEndEventName: 'momentumScrollEnd',
-
- // How frequently to fire scroll events in the case of
- // a flick or momentum scroll where the finger is no longer
- // touching the screen. If your event handler is a performance
- // hog, change this millisecond value to cut down on the frequency
- // of events triggered in those instances.
- inertialEventInterval: 50,
-
- // How quickly to scroll with a mouse wheel. 20 is a good default
- mouseWheelSpeed: 20,
-
- // Invert the mouse wheel? This makes sense on new Macbooks, but
- // nowhere else.
- invertWheel: false,
-
- // Enable vertical scrolling
- isVerticalEnabled: true,
-
- // Enable horizontal scrolling
- isHorizontalEnabled: false,
-
- // The easing function to use for bouncing up or down on the bounds
- // of the scrolling area
- bounceEasing: EASING_FUNCTIONS.bounce,
-
- //how long to take when bouncing back in a rubber band
- bounceTime: 600
- }, opts);
-
- ionic.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.
- *
- * Note: the x and y values will be converted to negative offsets due to
- * the way scrolling works internally.
- *
- * @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) {
- this._scrollTo(-x, -y, time, easing);
- },
-
- _scrollTo: function(x, y, time, easing) {
- var _this = this;
-
- var start = Date.now();
-
- easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)';
- var easingValues = easing.replace('cubic-bezier(', '').replace(')', '').split(',');
- easingValues = [parseFloat(easingValues[0]), parseFloat(easingValues[1]), parseFloat(easingValues[2]), parseFloat(easingValues[3])];
-
- var cubicBezierFunction = ionic.Animator.getCubicBezier(easingValues[0], easingValues[1], easingValues[2], easingValues[3], time);
-
- var ox = this.x, oy = this.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;
- }
-
- if(ox == x && oy == y) {
- time = 0;
- }
-
- var dx = ox - x;
- var dy = oy - y;
-
- el.offsetHeight;
- el.style.webkitTransitionTimingFunction = easing;
- el.style.webkitTransitionDuration = time;
- el.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
-
- // Stop any other momentum event callbacks
- clearTimeout(this._momentumStepTimeout);
-
- // 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.
- if(time > 0) {
- this._momentumStepTimeout = setTimeout(function eventNotify() {
- // Calculate where in the animation process we might be
- var diff = Math.min(time, Math.abs(Date.now() - start));
-
- // How far along in time have we moved
- var timeRatio = diff / time;
-
- // Interpolate the transition values, using the same
- // cubic bezier animation function used in the transition.
- var bx = ox - dx * cubicBezierFunction(timeRatio);
- var by = oy - dy * cubicBezierFunction(timeRatio);
-
- _this.didScroll && _this.didScroll({
- target: _this.el,
- scrollLeft: -bx,
- scrollTop: -by
- });
- ionic.trigger(_this.scrollEventName, {
- target: _this.el,
- scrollLeft: -bx,
- scrollTop: -by
- });
-
- if(_this._isDragging) {
- _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval);
- }
- }, this.inertialEventInterval);
- } else {
- this.didScroll && this.didScroll({
- target: this.el,
- scrollLeft: -this.x,
- scrollTop: -this.y
- });
- ionic.trigger(this.scrollEventName, {
- target: this.el,
- scrollLeft: -this.x,
- scrollTop: -this.y
- });
- }
- },
-
- needsWrapping: function() {
- 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));
-
- if (this.isHorizontalEnabled && (this.x > 0 || this.x < maxX)) {
- return true;
- }
-
- if (this.isVerticalEnabled && (this.y > 0 || this.y < maxY)) {
- return true;
- }
-
- return false;
- },
-
- /**
- * 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 () {
- that._doneScrolling();
- }, 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;
- } 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;
- }
-
- return {
- destination: Math.round(destination),
- duration: duration
- };
- },
-
- _onTransitionEnd: function(e) {
- var _this = this;
-
- if (e.target != this.el) {
- return;
- }
-
- var needsWrapping = this.needsWrapping();
-
- // Triggered to end scroll, once the final animation has ended
- if(needsWrapping && this._didEndScroll) {
- this._didEndScroll = false;
- this._doneScrolling();
- } else if(!needsWrapping) {
- this._didEndScroll = false;
- this._doneScrolling();
- }
-
- 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');
-
- 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;
-
- _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 / _this.rubberBandResistance;
- }
- // Check if the dragging is beyond the bottom or top
- if(newY > 0 || (-newY + parentHeight) > totalHeight) {
- // Rubber band
- newY = _this.y + deltaY / _this.rubberBandResistance;
- }
-
- 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;
-
- // Check if we need to reset the drag initial states if we've
- // been dragging for a bit
- if(timestamp - drag.startTime > 300) {
- drag.startTime = timestamp;
- drag.startX = _this.x;
- drag.startY = _this.y;
- }
-
- _this.didScroll && _this.didScroll({
- target: _this.el,
- scrollLeft: -newX,
- scrollTop: -newY
- });
-
- // 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;
-
- // Calculate 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) {
- // 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);
- } else {
- // We are done
- _this._doneScrolling();
- }
- });
- },
-
- _doneScrolling: function() {
- this.didStopScrolling && this.didStopScrolling({
- target: this.el,
- scrollLeft: this.x,
- scrollTop: this.y
- });
- ionic.trigger(this.scrollEndEventName, {
- target: this.el,
- scrollLeft: this.x,
- scrollTop: this.y
- });
- }
- }, {
- DECEL_RATE_NORMAL: 0.998,
- DECEL_RATE_FAST: 0.99,
- DECEL_RATE_SLOW: 0.996,
- });
-
})(ionic);
;
(function(ionic) {
@@ -4412,14 +4426,17 @@ ionic.views.TabBar.prototype = {
;
(function(ionic) {
'use strict';
- ionic.views.View = function() {
+ ionic.controllers.ViewController = function(options) {
this.initialize.apply(this, arguments);
};
- ionic.views.View.inherit = ionic.inherit;
+ ionic.controllers.ViewController.inherit = ionic.inherit;
- ionic.extend(ionic.views.View.prototype, {
- initialize: function() {}
+ ionic.extend(ionic.controllers.ViewController.prototype, {
+ initialize: function() {},
+ // Destroy this view controller, including all child views
+ destroy: function() {
+ }
});
})(window.ionic);
@@ -4579,122 +4596,6 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
}
});
-})(window.ionic);
-;
-/**
- * Adapted from Backbone.js
- */
-(function(ionic) {
-'use strict';
- var optionalParam = /\((.*?)\)/g;
- var namedParam = /(\(\?)?:\w+/g;
- var splatParam = /\*\w+/g;
- var escapeRegExp = /[\-{}\[\]+?.,\\\^$|#\s]/g;
-
- // Cached regex for stripping a leading hash/slash and trailing space.
- var routeStripper = /^[#\/]|\s+$/g;
-
- // Cached regex for stripping leading and trailing slashes.
- var rootStripper = /^\/+|\/+$/g;
-
- // Cached regex for removing a trailing slash.
- var trailingSlash = /\/$/;
-
- ionic.controllers.RouteViewController = ionic.controllers.ViewController.inherit({
- initialize: function(options) {
- this.options = options;
-
- this.root = this.options.root || '/';
- this.root = ('/' + this.root + '/').replace(rootStripper, '/');
-
- this.handlers = [];
-
- this._bindEvents();
-
- this.location = window.location;
- this.history = window.history;
- },
-
- when: function(route, callback) {
- var _this = this;
-
- route = this._routeToRegExp(route);
-
- this.handlers.unshift({
- route: route,
- callback: function(fragment) {
- var args = _this._extractParameters(route, fragment);
- callback && callback.apply(_this, args);
- }
- });
- },
-
- // Convert a route string into a regular expression, suitable for matching
- // against the current location hash.
- _routeToRegExp: function(route) {
- route = route.replace(escapeRegExp, '\\$&')
- .replace(optionalParam, '(?:$1)?')
- .replace(namedParam, function(match, optional){
- return optional ? match : '([^\/]+)';
- })
- .replace(splatParam, '(.*?)');
- return new RegExp('^' + route + '$');
- },
-
- // Given a route, and a URL fragment that it matches, return the array of
- // extracted decoded parameters. Empty or unmatched parameters will be
- // treated as `null` to normalize cross-browser behavior.
- _extractParameters: function(route, fragment) {
- var params = route.exec(fragment).slice(1);
- var extracted = [];
- for(var i = 0; i < params.length; i++) {
- if(param) {
- extracted.push(decodeURIComponent(param));
- }
- }
- },
-
- _bindEvents: function() {
- var _this = this;
-
- window.addEventListener('popstate', function(event) {
- _this.checkUrl(event);
- });
- },
- checkUrl: function(e) {
- var current = this.getFragment();
- if (current === this.fragment) return false;
- this.loadUrl() || this.loadUrl(this.getHash());
- },
- getFragment: function(fragment, forcePushState) {
- if (fragment == null) {
- fragment = this.location.pathname;
- var root = this.root.replace(this.trailingSlash, '');
- if (!fragment.indexOf(root)) fragment = fragment.substr(root.length);
- }
- return fragment.replace(routeStripper, '');
- },
- getHash: function(window) {
- var match = (window || this).location.href.match(/#(.*)$/);
- return match ? match[1] : '';
- },
-
- // Attempt to load the current URL fragment. If a route succeeds with a
- // match, returns `true`. If no defined routes matches the fragment,
- // returns `false`.
- loadUrl: function(fragmentOverride) {
- var fragment = this.fragment = this.getFragment(fragmentOverride);
- var matched = false;
- for(var i = 0; i < this.handlers.length; i++) {
- var h = this.handlers[i];
- if (h.route.test(fragment)) {
- h.callback(fragment);
- matched = true;
- }
- }
- return matched;
- },
- });
})(window.ionic);
;
(function(ionic) {
@@ -5107,20 +5008,3 @@ ionic.controllers.TabBarController = ionic.controllers.ViewController.inherit({
});
})(window.ionic);
-;
-(function(ionic) {
-'use strict';
- ionic.controllers.ViewController = function(options) {
- this.initialize.apply(this, arguments);
- };
-
- ionic.controllers.ViewController.inherit = ionic.inherit;
-
- ionic.extend(ionic.controllers.ViewController.prototype, {
- initialize: function() {},
- // Destroy this view controller, including all child views
- destroy: function() {
- }
- });
-
-})(window.ionic);
diff --git a/scss/ionic/_tabs.scss b/scss/ionic/_tabs.scss
index 95214abcbc..dc3027e037 100644
--- a/scss/ionic/_tabs.scss
+++ b/scss/ionic/_tabs.scss
@@ -5,21 +5,21 @@
*/
.tabs {
- font-size: 16px;
- position: fixed;
- bottom: 0;
- width: 100%;
- height: $tabs-height;
- z-index: 5;
@include box-orient(horizontal);
- display: -webkit-box;
- display: box;
-
- border-top-width: 1px;
- border-style: solid;
@include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
+ position: fixed;
+ bottom: 0;
+ z-index: 5;
+ display: -webkit-box;
+ display: box;
+ width: 100%;
+ height: $tabs-height;
+ border-style: solid;
+
+ border-top-width: 1px;
+ font-size: 16px;
&.tabs-default {
@include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
@@ -46,41 +46,68 @@
@include tab-style($tabs-danger-bg, $tabs-danger-border-color, $white);
}
}
+
.tabs-top {
top: $bar-height;
}
+
.tab-item {
+ @include box-flex(1);
display: block;
+ overflow: hidden;
+ box-sizing: border-box;
+
+ padding-top: 4px;
// Required to force box elements to be the same size;
width: 0;
height: 100%;
-
- @include box-flex(1);
- box-sizing: border-box;
+
+ color: inherit;
text-align: center;
text-decoration: none;
- font-weight: 400;
- font-family: $light-sans-font-family;
- font-size: 10px;
-
- color: inherit;
-
text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
+ white-space: nowrap;
+
+ font-weight: 400;
+ font-size: 14px;
+ font-family: $light-sans-font-family;
opacity: 0.7;
+}
- .active, &:active {
- //box-shadow: inset 0 0 10px rgba(0, 0, 0, .12);
- }
+.tabs-icon-top .tab-item,
+.tabs-icon-right .tab-item,
+.tabs-icon-bottom .tab-item,
+.tabs-icon-left .tab-item {
+ position: relative;
+ padding-top: 0;
+ font-size: 10px;
+}
- i {
- font-size: 32px;
- }
+.tabs-icon-left .tab-item i {
+ position: absolute;
+ left: 4px;
+ display: flex;
+ height: 100%;
+ align-items: center;
+}
+
+.tabs-icon-right .tab-item i {
+ position: absolute;
+ right: 4px;
+ display: flex;
+ height: 100%;
+ align-items: center;
+}
+
+/* Icon for tab */
+.tab-item i {
+ display: block;
+ margin: 1px auto -3px auto;
+ font-size: $tabs-icon-size;
}
@@ -88,8 +115,6 @@
/* Active state for tab */
.tab-item.active, .tab-item:active {
- //box-shadow: inset 0 0 1px rgba(0, 0, 0, .12);
- //background-color: rgba(0,0,0,0.2);
opacity: 1;
&.tab-item-default {
@@ -115,12 +140,6 @@
}
}
-/* Icon for tab */
-.tab-item i {
- display: block;
- margin: 1px auto -3px auto;
-}
-
/* Label for tab */
.tab-label {
margin-top: 1px;
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index 18b31a348d..1ef94af79e 100644
--- a/scss/ionic/_variables.scss
+++ b/scss/ionic/_variables.scss
@@ -312,7 +312,8 @@ $bar-dark-border-color: $button-dark-border;
// Tabs
// -------------------------------
-$tabs-height: 49px !default;
+$tabs-height: 49px !default;
+$tabs-icon-size: 32px !default;
$tabs-default-bg: $brand-default;
$tabs-default-border-color: $button-default-border;
diff --git a/test/tab-bars-icons-bottom.html b/test/tab-bars-icons-bottom.html
new file mode 100644
index 0000000000..5280d56aec
--- /dev/null
+++ b/test/tab-bars-icons-bottom.html
@@ -0,0 +1,55 @@
+
+
+
+ Tabs: Bottom Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/tab-bars-icons-left.html b/test/tab-bars-icons-left.html
new file mode 100644
index 0000000000..1b51afe83a
--- /dev/null
+++ b/test/tab-bars-icons-left.html
@@ -0,0 +1,55 @@
+
+
+
+ Tabs: Left Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/tab-bars-icons-right.html b/test/tab-bars-icons-right.html
new file mode 100644
index 0000000000..ad7e46c5a6
--- /dev/null
+++ b/test/tab-bars-icons-right.html
@@ -0,0 +1,55 @@
+
+
+
+ Tabs: Right Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/tab-bars-no-icons.html b/test/tab-bars-no-icons.html
new file mode 100644
index 0000000000..d7a4dd253b
--- /dev/null
+++ b/test/tab-bars-no-icons.html
@@ -0,0 +1,50 @@
+
+
+
+ Tabs: No Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/tab-bars-only-icons.html b/test/tab-bars-only-icons.html
new file mode 100644
index 0000000000..79245b8894
--- /dev/null
+++ b/test/tab-bars-only-icons.html
@@ -0,0 +1,50 @@
+
+
+
+ Tabs: Only Icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/tab-bars.html b/test/tab-bars.html
index cd98d81568..db55ea6f41 100644
--- a/test/tab-bars.html
+++ b/test/tab-bars.html
@@ -1,7 +1,7 @@
- Tab Bars
+ Tabs: Top Icons
@@ -17,14 +17,18 @@
Icons On Top Of Text
-