diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index fb231dbdab..9a2c80ca11 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 #c0c0c0; } + border: 1px solid silver; } /** * 1. Correct `color` not being inherited in IE 8/9. @@ -1629,7 +1629,7 @@ input[type="file"] { line-height: 34px; } select { - border: 1px solid #ccc; + border: 1px solid #cccccc; background-color: white; } select[multiple], @@ -1701,7 +1701,7 @@ input[type="checkbox"][readonly] { right: 20px; transition: 0.2s ease; transition-property: left, right; - transition-delay: 0s, .05s; } + transition-delay: 0s, 0.05s; } .toggle :checked + .track { /* When the toggle is "on" */ @@ -1716,7 +1716,7 @@ input[type="checkbox"][readonly] { right: 0; left: 20px; -webkit-transform: none; - transition-delay: .05s, 0s; } + transition-delay: 0.05s, 0s; } .item-radio { padding: 0; } @@ -2001,7 +2001,7 @@ input[type="range"] { .button.button-icon:active, .button.button-icon.active { background: none; box-shadow: none; - text-shadow: 0px 0px 10px #fff; } + text-shadow: 0px 0px 10px white; } .button.block, .button.button-full { margin-top: 10px; margin-bottom: 10px; } @@ -2359,9 +2359,9 @@ a.button { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin .75s linear infinite; - -moz-animation: spin .75s linear infinite; - animation: spin .75s linear infinite; } + -webkit-animation: spin 0.75s linear infinite; + -moz-animation: spin 0.75s linear infinite; + animation: spin 0.75s linear infinite; } .icon-loading:before { content: "\e144"; } @@ -2374,9 +2374,9 @@ a.button { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin .75s linear infinite; - -moz-animation: spin .75s linear infinite; - animation: spin .75s linear infinite; } + -webkit-animation: spin 0.75s linear infinite; + -moz-animation: spin 0.75s linear infinite; + animation: spin 0.75s linear infinite; } .icon-refreshing:before { content: "\e144"; } diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index db7d6f26c6..7941a5da31 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -1028,7 +1028,7 @@ .ionic fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; - border: 1px solid #c0c0c0; } + border: 1px solid silver; } .ionic legend { padding: 0; /* 2 */ @@ -2286,7 +2286,7 @@ .ionic input[type="file"] { line-height: 34px; } .ionic select { - border: 1px solid #ccc; + border: 1px solid #cccccc; background-color: white; } .ionic select[multiple], .ionic select[size] { @@ -2335,7 +2335,7 @@ border-radius: 50%; background: white; content: ' '; - transition: background-color .1s ease-in-out; } + transition: background-color 0.1s ease-in-out; } .ionic .checkbox input:after { position: absolute; top: 34%; @@ -2348,7 +2348,7 @@ border-right: 0; content: ' '; opacity: 0; - transition: opacity .05s ease-in-out; + transition: opacity 0.05s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .ionic .checkbox input:checked:before { @@ -2700,7 +2700,7 @@ .ionic .button.button-icon:active, .ionic .button.button-icon.active { background: none; box-shadow: none; - text-shadow: 0px 0px 10px #fff; } + text-shadow: 0px 0px 10px white; } .ionic .button.block, .ionic .button.button-full { margin-top: 10px; margin-bottom: 10px; } @@ -2966,9 +2966,9 @@ line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin .75s linear infinite; - -moz-animation: spin .75s linear infinite; - animation: spin .75s linear infinite; } + -webkit-animation: spin 0.75s linear infinite; + -moz-animation: spin 0.75s linear infinite; + animation: spin 0.75s linear infinite; } .ionic .icon-loading:before { content: "\e144"; } .ionic .icon-refreshing { @@ -2980,9 +2980,9 @@ line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin .75s linear infinite; - -moz-animation: spin .75s linear infinite; - animation: spin .75s linear infinite; } + -webkit-animation: spin 0.75s linear infinite; + -moz-animation: spin 0.75s linear infinite; + animation: spin 0.75s linear infinite; } .ionic .icon-refreshing:before { content: "\e144"; } .ionic .hidden, diff --git a/dist/css/ionic.css b/dist/css/ionic.css index b1ef089506..56be152987 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 #c0c0c0; } + border: 1px solid silver; } /** * 1. Correct `color` not being inherited in IE 8/9. @@ -2772,7 +2772,7 @@ input[type="file"] { line-height: 34px; } select { - border: 1px solid #ccc; + border: 1px solid #cccccc; background-color: white; } select[multiple], @@ -2827,7 +2827,7 @@ input[type="checkbox"][readonly] { border-radius: 50%; background: white; content: ' '; - transition: background-color .1s ease-in-out; } + transition: background-color 0.1s ease-in-out; } /* the checkmark within the box */ .checkbox input:after { @@ -2842,7 +2842,7 @@ input[type="checkbox"][readonly] { border-right: 0; content: ' '; opacity: 0; - transition: opacity .05s ease-in-out; + transition: opacity 0.05s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @@ -3222,7 +3222,7 @@ input[type="range"] { .button.button-icon:active, .button.button-icon.active { background: none; box-shadow: none; - text-shadow: 0px 0px 10px #fff; } + text-shadow: 0px 0px 10px white; } .button.block, .button.button-full { margin-top: 10px; margin-bottom: 10px; } @@ -3685,9 +3685,9 @@ a.button { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin .75s linear infinite; - -moz-animation: spin .75s linear infinite; - animation: spin .75s linear infinite; } + -webkit-animation: spin 0.75s linear infinite; + -moz-animation: spin 0.75s linear infinite; + animation: spin 0.75s linear infinite; } .icon-loading:before { content: "\e144"; } @@ -3700,9 +3700,9 @@ a.button { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin .75s linear infinite; - -moz-animation: spin .75s linear infinite; - animation: spin .75s linear infinite; } + -webkit-animation: spin 0.75s linear infinite; + -moz-animation: spin 0.75s linear infinite; + animation: spin 0.75s linear infinite; } .icon-refreshing:before { content: "\e144"; } diff --git a/dist/js/ionic.js b/dist/js/ionic.js index 7769b6f701..8679651f55 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) { @@ -4411,20 +4425,6 @@ 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'; ionic.controllers.ViewController = function(options) { this.initialize.apply(this, arguments); @@ -4454,22 +4454,22 @@ ionic.views.TabBar.prototype = { * if the stack can be poppped to go back to the last view, and * it will handle updating the title of the nav bar and processing animations. */ -ionic.controllers.NavController = function(opts) { - var _this = this; +ionic.controllers.NavController = ionic.controllers.ViewController.inherit({ + initialize: function(opts) { + var _this = this; - this.navBar = opts.navBar; - this.content = opts.content; - this.controllers = opts.controllers || []; + this.navBar = opts.navBar; + this.content = opts.content; + this.controllers = opts.controllers || []; - this._updateNavBar(); + this._updateNavBar(); - // TODO: Is this the best way? - this.navBar.shouldGoBack = function() { - _this.pop(); - }; -}; + // TODO: Is this the best way? + this.navBar.shouldGoBack = function() { + _this.pop(); + }; + }, -ionic.controllers.NavController.prototype = { /** * @return {array} the array of controllers on the stack. */ @@ -4594,7 +4594,8 @@ ionic.controllers.NavController.prototype = { this.navBar.showBackButton(false); } } -}; +}); + })(window.ionic); ; (function(ionic) { @@ -4606,30 +4607,29 @@ ionic.controllers.NavController.prototype = { * * The right or left menu can be disabled or not used at all, if desired. */ - ionic.controllers.SideMenuController = function(options) { - var self = this; + ionic.controllers.SideMenuController = ionic.controllers.ViewController.inherit({ + initialize: function(options) { + var self = this; - this.left = options.left; - this.right = options.right; - this.content = options.content; - this.dragThresholdX = options.dragThresholdX || 10; - - this._rightShowing = false; - this._leftShowing = false; - this._isDragging = false; + this.left = options.left; + this.right = options.right; + this.content = options.content; + this.dragThresholdX = options.dragThresholdX || 10; + + this._rightShowing = false; + this._leftShowing = false; + this._isDragging = false; - if(this.content) { - this.content.onDrag = function(e) { - self._handleDrag(e); - }; + if(this.content) { + this.content.onDrag = function(e) { + self._handleDrag(e); + }; - this.content.endDrag = function(e) { - self._endDrag(e); - }; - } - }; - - ionic.controllers.SideMenuController.prototype = { + this.content.endDrag = function(e) { + self._endDrag(e); + }; + } + }, /** * Set the content view controller if not passed in the constructor options. * @@ -4862,7 +4862,7 @@ ionic.controllers.NavController.prototype = { this.openAmount(this._offsetX + (this._lastX - this._startX)); } } - }; + }); })(ionic); ; diff --git a/js/controllers/navController.js b/js/controllers/navController.js index b8bb3fcf70..b56b7f9d97 100644 --- a/js/controllers/navController.js +++ b/js/controllers/navController.js @@ -11,22 +11,22 @@ * if the stack can be poppped to go back to the last view, and * it will handle updating the title of the nav bar and processing animations. */ -ionic.controllers.NavController = function(opts) { - var _this = this; +ionic.controllers.NavController = ionic.controllers.ViewController.inherit({ + initialize: function(opts) { + var _this = this; - this.navBar = opts.navBar; - this.content = opts.content; - this.controllers = opts.controllers || []; + this.navBar = opts.navBar; + this.content = opts.content; + this.controllers = opts.controllers || []; - this._updateNavBar(); + this._updateNavBar(); - // TODO: Is this the best way? - this.navBar.shouldGoBack = function() { - _this.pop(); - }; -}; + // TODO: Is this the best way? + this.navBar.shouldGoBack = function() { + _this.pop(); + }; + }, -ionic.controllers.NavController.prototype = { /** * @return {array} the array of controllers on the stack. */ @@ -151,5 +151,6 @@ ionic.controllers.NavController.prototype = { this.navBar.showBackButton(false); } } -}; +}); + })(window.ionic); diff --git a/js/controllers/routeController.js b/js/controllers/routeController.js index c89c6bcd71..e2c7c9593a 100644 --- a/js/controllers/routeController.js +++ b/js/controllers/routeController.js @@ -17,21 +17,21 @@ // Cached regex for removing a trailing slash. var trailingSlash = /\/$/; - ionic.controllers.RouteViewController = function(options) { - this.options = options; + 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.root = this.options.root || '/'; + this.root = ('/' + this.root + '/').replace(rootStripper, '/'); - this.handlers = []; + this.handlers = []; - this._bindEvents(); + this._bindEvents(); - this.location = window.location; - this.history = window.history; - }; + this.location = window.location; + this.history = window.history; + }, - ionic.controllers.RouteViewController.prototype = { when: function(route, callback) { var _this = this; @@ -111,5 +111,5 @@ } return matched; }, - }; + }); })(window.ionic); diff --git a/js/controllers/sideMenuController.js b/js/controllers/sideMenuController.js index 5cd5e3a2a5..e196d946ac 100644 --- a/js/controllers/sideMenuController.js +++ b/js/controllers/sideMenuController.js @@ -7,30 +7,29 @@ * * The right or left menu can be disabled or not used at all, if desired. */ - ionic.controllers.SideMenuController = function(options) { - var self = this; + ionic.controllers.SideMenuController = ionic.controllers.ViewController.inherit({ + initialize: function(options) { + var self = this; - this.left = options.left; - this.right = options.right; - this.content = options.content; - this.dragThresholdX = options.dragThresholdX || 10; - - this._rightShowing = false; - this._leftShowing = false; - this._isDragging = false; + this.left = options.left; + this.right = options.right; + this.content = options.content; + this.dragThresholdX = options.dragThresholdX || 10; + + this._rightShowing = false; + this._leftShowing = false; + this._isDragging = false; - if(this.content) { - this.content.onDrag = function(e) { - self._handleDrag(e); - }; + if(this.content) { + this.content.onDrag = function(e) { + self._handleDrag(e); + }; - this.content.endDrag = function(e) { - self._endDrag(e); - }; - } - }; - - ionic.controllers.SideMenuController.prototype = { + this.content.endDrag = function(e) { + self._endDrag(e); + }; + } + }, /** * Set the content view controller if not passed in the constructor options. * @@ -263,6 +262,6 @@ this.openAmount(this._offsetX + (this._lastX - this._startX)); } } - }; + }); })(ionic);