\
+ template: '',
link: function($scope, $element, $attr, slideBoxCtrl) {
// If the pager should show, append it to the slide box
- if($attr.showPager !== "false") {
+ if($scope.$eval($scope.showPager) !== false) {
var childScope = $scope.$new();
- var pager = $compile('\
\
\
\
',
@@ -45,6 +45,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
});
$scope.$watch('rightButtons', function(val) {
+ console.log('Right buttons changed');
// Resize the title since the buttons have changed
hb.align();
});
diff --git a/js/ext/angular/src/directive/ionicScroll.js b/js/ext/angular/src/directive/ionicScroll.js
index 497d20adad1..7e01562078d 100644
--- a/js/ext/angular/src/directive/ionicScroll.js
+++ b/js/ext/angular/src/directive/ionicScroll.js
@@ -11,6 +11,7 @@ angular.module('ionic.ui.scroll', [])
transclude: true,
scope: {
direction: '@',
+ paging: '@',
onRefresh: '&',
onScroll: '&',
refreshComplete: '=',
@@ -19,46 +20,51 @@ angular.module('ionic.ui.scroll', [])
scrollbarY: '@',
},
+ controller: function() {},
+
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
var clone, sv, sc = document.createElement('div');
+ // Create the internal scroll div
sc.className = 'scroll';
if(attr.padding == "true") {
- sc.className += ' padding';
+ sc.classList.add('padding');
addedPadding = true;
}
+ if($scope.$eval($scope.paging) === true) {
+ sc.classList.add('scroll-paging');
+ }
$element.append(sc);
// Pass the parent scope down to the child
clone = transclude($scope.$parent);
angular.element($element[0].firstElementChild).append(clone);
+ // Get refresher size
var refresher = $element[0].querySelector('.scroll-refresher');
var refresherHeight = refresher && refresher.clientHeight || 0;
- if(attr.refreshComplete) {
- $scope.refreshComplete = function() {
- if($scope.scrollView) {
- refresher && refresher.classList.remove('active');
- $scope.scrollView.finishPullToRefresh();
- $scope.$parent.$broadcast('scroll.onRefreshComplete');
- }
- };
- }
-
-
+ if(!$scope.direction) { $scope.direction = 'y'; }
var hasScrollingX = $scope.direction.indexOf('x') >= 0;
var hasScrollingY = $scope.direction.indexOf('y') >= 0;
$timeout(function() {
- sv = new ionic.views.Scroll({
+ var options = {
el: $element[0],
+ paging: $scope.$eval($scope.paging) === true,
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
scrollingX: hasScrollingX,
scrollingY: hasScrollingY
- });
+ };
+
+ if(options.paging) {
+ options.speedMultiplier = 0.8;
+ options.bouncing = false;
+ }
+
+ sv = new ionic.views.Scroll(options);
// Activate pull-to-refresh
if(refresher) {
diff --git a/js/ext/angular/src/directive/ionicSlideBox.js b/js/ext/angular/src/directive/ionicSlideBox.js
index 616879c39b5..27ce71fe017 100644
--- a/js/ext/angular/src/directive/ionicSlideBox.js
+++ b/js/ext/angular/src/directive/ionicSlideBox.js
@@ -15,41 +15,68 @@ angular.module('ionic.ui.slideBox', [])
* some side menu stuff on the current scope.
*/
-.directive('slideBox', ['$compile', function($compile) {
+.directive('slideBox', ['$timeout', '$compile', function($timeout, $compile) {
return {
restrict: 'E',
replace: true,
transclude: true,
- scope: {},
+ scope: {
+ doesContinue: '@',
+ showPager: '@',
+ onSlideChanged: '&'
+ },
controller: ['$scope', '$element', function($scope, $element) {
- $scope.slides = [];
- this.slideAdded = function() {
- $scope.slides.push({});
- };
-
- angular.extend(this, ionic.views.SlideBox.prototype);
+ var _this = this;
- ionic.views.SlideBox.call(this, {
+ var slider = new ionic.views.Slider({
el: $element[0],
- slideChanged: function(slideIndex) {
+ continuous: $scope.$eval($scope.doesContinue) === true,
+ slidesChanged: function() {
+ $scope.currentSlide = slider.getPos();
+
+ // Try to trigger a digest
+ $timeout(function() {});
+ },
+ callback: function(slideIndex) {
+ $scope.currentSlide = slideIndex;
+ $scope.onSlideChanged({index:$scope.currentSlide});
$scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);
- $scope.$apply();
+
+ // Try to trigger a digest
+ $timeout(function() {});
}
});
- $scope.$parent.slideBox = this;
+ $scope.$on('slideBox.nextSlide', function() {
+ slider.next();
+ });
+
+ $scope.$on('slideBox.prevSlide', function() {
+ slider.prev();
+ });
+
+ $scope.$on('slideBox.setSlide', function(e, index) {
+ slider.slide(index);
+ });
+
+ $scope.slideBox = slider;
+
+ $timeout(function() {
+ slider.load();
+ });
}],
- template: '
\
-
\
+ template: '',
link: function($scope, $element, $attr, slideBoxCtrl) {
// If the pager should show, append it to the slide box
- if($attr.showPager !== "false") {
+ if($scope.$eval($scope.showPager) !== false) {
var childScope = $scope.$new();
- var pager = $compile('
+
+
+
+
+
+
+
+
diff --git a/js/views/scrollView.js b/js/views/scrollView.js
index 1834668fd23..f1cda2849e6 100644
--- a/js/views/scrollView.js
+++ b/js/views/scrollView.js
@@ -291,12 +291,12 @@ ionic.views.Scroll = ionic.views.View.inherit({
this.options = {
- /** Disable scrolling on x-axis by default */
- scrollingX: false,
+ /** Disable scrolling on x-axis by default */
+ scrollingX: false,
scrollbarX: true,
- /** Enable scrolling on y-axis */
- scrollingY: true,
+ /** Enable scrolling on y-axis */
+ scrollingY: true,
scrollbarY: true,
/** The minimum size the scrollbars scale to while scrolling */
@@ -309,42 +309,42 @@ ionic.views.Scroll = ionic.views.View.inherit({
/** The initial fade delay when the pane is resized or initialized */
scrollbarResizeFadeDelay: 1000,
- /** Enable animations for deceleration, snap back, zooming and scrolling */
- animating: true,
+ /** Enable animations for deceleration, snap back, zooming and scrolling */
+ animating: true,
- /** duration for animations triggered by scrollTo/zoomTo */
- animationDuration: 250,
+ /** duration for animations triggered by scrollTo/zoomTo */
+ animationDuration: 250,
- /** Enable bouncing (content can be slowly moved outside and jumps back after releasing) */
- bouncing: true,
+ /** Enable bouncing (content can be slowly moved outside and jumps back after releasing) */
+ bouncing: true,
- /** Enable locking to the main axis if user moves only slightly on one of them at start */
- locking: true,
+ /** Enable locking to the main axis if user moves only slightly on one of them at start */
+ locking: true,
- /** Enable pagination mode (switching between full page content panes) */
- paging: false,
+ /** Enable pagination mode (switching between full page content panes) */
+ paging: false,
- /** Enable snapping of content to a configured pixel grid */
- snapping: false,
+ /** Enable snapping of content to a configured pixel grid */
+ snapping: false,
- /** Enable zooming of content via API, fingers and mouse wheel */
- zooming: false,
+ /** Enable zooming of content via API, fingers and mouse wheel */
+ zooming: false,
- /** Minimum zoom level */
- minZoom: 0.5,
+ /** Minimum zoom level */
+ minZoom: 0.5,
- /** Maximum zoom level */
- maxZoom: 3,
+ /** Maximum zoom level */
+ maxZoom: 3,
- /** Multiply or decrease scrolling speed **/
- speedMultiplier: 1,
+ /** Multiply or decrease scrolling speed **/
+ speedMultiplier: 1,
- /** Callback that is fired on the later of touch end or deceleration end,
- provided that another scrolling action has not begun. Used to know
- when to fade out a scrollbar. */
- scrollingComplete: NOOP,
-
- /** This configures the amount of change applied to deceleration when reaching boundaries **/
+ /** Callback that is fired on the later of touch end or deceleration end,
+ provided that another scrolling action has not begun. Used to know
+ when to fade out a scrollbar. */
+ scrollingComplete: NOOP,
+
+ /** This configures the amount of change applied to deceleration when reaching boundaries **/
penetrationDeceleration : 0.03,
/** This configures the amount of change applied to acceleration when reaching boundaries **/
@@ -1876,7 +1876,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
}
// Animate to grid when snapping is active, otherwise just fix out-of-boundary positions
- //self.scrollTo(self.__scrollLeft, self.__scrollTop, self.options.snapping);
+ if(self.options.paging) {
+ self.scrollTo(self.__scrollLeft, self.__scrollTop, self.options.snapping);
+ }
};
// Start animation and switch on flag
diff --git a/js/views/slideBoxView.js b/js/views/slideBoxView.js
index 0d3d4e63d88..b1b0a70bb9a 100644
--- a/js/views/slideBoxView.js
+++ b/js/views/slideBoxView.js
@@ -3,7 +3,7 @@
* or iOS "dot" pager gallery, or maybe a carousel.
*
* Each screen fills the full width and height of the viewport, and screens can
- * be swiped between, or set to automatically transition.
+ * be swiped between.
*/
(function(ionic) {
'use strict';
diff --git a/js/views/sliderView.js b/js/views/sliderView.js
new file mode 100644
index 00000000000..4140ac00fca
--- /dev/null
+++ b/js/views/sliderView.js
@@ -0,0 +1,581 @@
+/*
+ * Adapted from Swipe.js 2.0
+ *
+ * Brad Birdsall
+ * Copyright 2013, MIT License
+ *
+*/
+
+(function(ionic) {
+'use strict';
+
+ionic.views.Slider = ionic.views.View.inherit({
+ initialize: function (options) {
+ // utilities
+ var noop = function() {}; // simple no operation function
+ var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution
+
+ // check browser capabilities
+ var browser = {
+ addEventListener: !!window.addEventListener,
+ touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
+ transitions: (function(temp) {
+ var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition'];
+ for ( var i in props ) if (temp.style[ props[i] ] !== undefined) return true;
+ return false;
+ })(document.createElement('swipe'))
+ };
+
+
+ var container = options.el;
+
+ // quit if no root element
+ if (!container) return;
+ var element = container.children[0];
+ var slides, slidePos, width, length;
+ options = options || {};
+ var index = parseInt(options.startSlide, 10) || 0;
+ var speed = options.speed || 300;
+ options.continuous = options.continuous !== undefined ? options.continuous : true;
+
+ function setup() {
+
+ // cache slides
+ slides = element.children;
+ length = slides.length;
+
+ // set continuous to false if only one slide
+ if (slides.length < 2) options.continuous = false;
+
+ //special case if two slides
+ if (browser.transitions && options.continuous && slides.length < 3) {
+ element.appendChild(slides[0].cloneNode(true));
+ element.appendChild(element.children[1].cloneNode(true));
+ slides = element.children;
+ }
+
+ // create an array to store current positions of each slide
+ slidePos = new Array(slides.length);
+
+ // determine width of each slide
+ width = container.getBoundingClientRect().width || container.offsetWidth;
+
+ element.style.width = (slides.length * width) + 'px';
+
+ // stack elements
+ var pos = slides.length;
+ while(pos--) {
+
+ var slide = slides[pos];
+
+ slide.style.width = width + 'px';
+ slide.setAttribute('data-index', pos);
+
+ if (browser.transitions) {
+ slide.style.left = (pos * -width) + 'px';
+ move(pos, index > pos ? -width : (index < pos ? width : 0), 0);
+ }
+
+ }
+
+ // reposition elements before and after index
+ if (options.continuous && browser.transitions) {
+ move(circle(index-1), -width, 0);
+ move(circle(index+1), width, 0);
+ }
+
+ if (!browser.transitions) element.style.left = (index * -width) + 'px';
+
+ container.style.visibility = 'visible';
+
+ options.slidesChanged && options.slidesChanged();
+ }
+
+ function prev() {
+
+ if (options.continuous) slide(index-1);
+ else if (index) slide(index-1);
+
+ }
+
+ function next() {
+
+ if (options.continuous) slide(index+1);
+ else if (index < slides.length - 1) slide(index+1);
+
+ }
+
+ function circle(index) {
+
+ // a simple positive modulo using slides.length
+ return (slides.length + (index % slides.length)) % slides.length;
+
+ }
+
+ function slide(to, slideSpeed) {
+
+ // do nothing if already on requested slide
+ if (index == to) return;
+
+ if (browser.transitions) {
+
+ var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward
+
+ // get the actual position of the slide
+ if (options.continuous) {
+ var natural_direction = direction;
+ direction = -slidePos[circle(to)] / width;
+
+ // if going forward but to < index, use to = slides.length + to
+ // if going backward but to > index, use to = -slides.length + to
+ if (direction !== natural_direction) to = -direction * slides.length + to;
+
+ }
+
+ var diff = Math.abs(index-to) - 1;
+
+ // move all the slides between index and to in the right direction
+ while (diff--) move( circle((to > index ? to : index) - diff - 1), width * direction, 0);
+
+ to = circle(to);
+
+ move(index, width * direction, slideSpeed || speed);
+ move(to, 0, slideSpeed || speed);
+
+ if (options.continuous) move(circle(to - direction), -(width * direction), 0); // we need to get the next in place
+
+ } else {
+
+ to = circle(to);
+ animate(index * -width, to * -width, slideSpeed || speed);
+ //no fallback for a circular continuous if the browser does not accept transitions
+ }
+
+ index = to;
+ offloadFn(options.callback && options.callback(index, slides[index]));
+ }
+
+ function move(index, dist, speed) {
+
+ translate(index, dist, speed);
+ slidePos[index] = dist;
+
+ }
+
+ function translate(index, dist, speed) {
+
+ var slide = slides[index];
+ var style = slide && slide.style;
+
+ if (!style) return;
+
+ style.webkitTransitionDuration =
+ style.MozTransitionDuration =
+ style.msTransitionDuration =
+ style.OTransitionDuration =
+ style.transitionDuration = speed + 'ms';
+
+ style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
+ style.msTransform =
+ style.MozTransform =
+ style.OTransform = 'translateX(' + dist + 'px)';
+
+ }
+
+ function animate(from, to, speed) {
+
+ // if not an animation, just reposition
+ if (!speed) {
+
+ element.style.left = to + 'px';
+ return;
+
+ }
+
+ var start = +new Date;
+
+ var timer = setInterval(function() {
+
+ var timeElap = +new Date - start;
+
+ if (timeElap > speed) {
+
+ element.style.left = to + 'px';
+
+ if (delay) begin();
+
+ options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);
+
+ clearInterval(timer);
+ return;
+
+ }
+
+ element.style.left = (( (to - from) * (Math.floor((timeElap / speed) * 100) / 100) ) + from) + 'px';
+
+ }, 4);
+
+ }
+
+ // setup auto slideshow
+ var delay = options.auto || 0;
+ var interval;
+
+ function begin() {
+
+ interval = setTimeout(next, delay);
+
+ }
+
+ function stop() {
+
+ delay = 0;
+ clearTimeout(interval);
+
+ }
+
+
+ // setup initial vars
+ var start = {};
+ var delta = {};
+ var isScrolling;
+
+ // setup event capturing
+ var events = {
+
+ handleEvent: function(event) {
+ if(event.type == 'mousedown' || event.type == 'mouseup' || event.type == 'mousemove') {
+ event.touches = [{
+ pageX: event.pageX,
+ pageY: event.pageY
+ }];
+ }
+
+ switch (event.type) {
+ case 'mousedown': this.start(event); break;
+ case 'touchstart': this.start(event); break;
+ case 'touchmove': this.move(event); break;
+ case 'mousemove': this.move(event); break;
+ case 'touchend': offloadFn(this.end(event)); break;
+ case 'mouseup': offloadFn(this.end(event)); break;
+ case 'webkitTransitionEnd':
+ case 'msTransitionEnd':
+ case 'oTransitionEnd':
+ case 'otransitionend':
+ case 'transitionend': offloadFn(this.transitionEnd(event)); break;
+ case 'resize': offloadFn(setup); break;
+ }
+
+ if (options.stopPropagation) event.stopPropagation();
+
+ },
+ start: function(event) {
+
+ var touches = event.touches[0];
+
+ // measure start values
+ start = {
+
+ // get initial touch coords
+ x: touches.pageX,
+ y: touches.pageY,
+
+ // store time to determine touch duration
+ time: +new Date
+
+ };
+
+ // used for testing first move event
+ isScrolling = undefined;
+
+ // reset delta and end measurements
+ delta = {};
+
+ // attach touchmove and touchend listeners
+ if(browser.touch) {
+ element.addEventListener('touchmove', this, false);
+ element.addEventListener('touchend', this, false);
+ } else {
+ element.addEventListener('mousemove', this, false);
+ element.addEventListener('mouseup', this, false);
+ }
+ },
+ move: function(event) {
+
+ // ensure swiping with one touch and not pinching
+ if ( event.touches.length > 1 || event.scale && event.scale !== 1) return
+
+ if (options.disableScroll) event.preventDefault();
+
+ var touches = event.touches[0];
+
+ // measure change in x and y
+ delta = {
+ x: touches.pageX - start.x,
+ y: touches.pageY - start.y
+ }
+
+ // determine if scrolling test has run - one time test
+ if ( typeof isScrolling == 'undefined') {
+ isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) );
+ }
+
+ // if user is not trying to scroll vertically
+ if (!isScrolling) {
+
+ // prevent native scrolling
+ event.preventDefault();
+
+ // stop slideshow
+ stop();
+
+ // increase resistance if first or last slide
+ if (options.continuous) { // we don't add resistance at the end
+
+ translate(circle(index-1), delta.x + slidePos[circle(index-1)], 0);
+ translate(index, delta.x + slidePos[index], 0);
+ translate(circle(index+1), delta.x + slidePos[circle(index+1)], 0);
+
+ } else {
+
+ delta.x =
+ delta.x /
+ ( (!index && delta.x > 0 // if first slide and sliding left
+ || index == slides.length - 1 // or if last slide and sliding right
+ && delta.x < 0 // and if sliding at all
+ ) ?
+ ( Math.abs(delta.x) / width + 1 ) // determine resistance level
+ : 1 ); // no resistance if false
+
+ // translate 1:1
+ translate(index-1, delta.x + slidePos[index-1], 0);
+ translate(index, delta.x + slidePos[index], 0);
+ translate(index+1, delta.x + slidePos[index+1], 0);
+ }
+
+ }
+
+ },
+ end: function(event) {
+
+ // measure duration
+ var duration = +new Date - start.time;
+
+ // determine if slide attempt triggers next/prev slide
+ var isValidSlide =
+ Number(duration) < 250 // if slide duration is less than 250ms
+ && Math.abs(delta.x) > 20 // and if slide amt is greater than 20px
+ || Math.abs(delta.x) > width/2; // or if slide amt is greater than half the width
+
+ // determine if slide attempt is past start and end
+ var isPastBounds =
+ !index && delta.x > 0 // if first slide and slide amt is greater than 0
+ || index == slides.length - 1 && delta.x < 0; // or if last slide and slide amt is less than 0
+
+ if (options.continuous) isPastBounds = false;
+
+ // determine direction of swipe (true:right, false:left)
+ var direction = delta.x < 0;
+
+ // if not scrolling vertically
+ if (!isScrolling) {
+
+ if (isValidSlide && !isPastBounds) {
+
+ if (direction) {
+
+ if (options.continuous) { // we need to get the next in this direction in place
+
+ move(circle(index-1), -width, 0);
+ move(circle(index+2), width, 0);
+
+ } else {
+ move(index-1, -width, 0);
+ }
+
+ move(index, slidePos[index]-width, speed);
+ move(circle(index+1), slidePos[circle(index+1)]-width, speed);
+ index = circle(index+1);
+
+ } else {
+ if (options.continuous) { // we need to get the next in this direction in place
+
+ move(circle(index+1), width, 0);
+ move(circle(index-2), -width, 0);
+
+ } else {
+ move(index+1, width, 0);
+ }
+
+ move(index, slidePos[index]+width, speed);
+ move(circle(index-1), slidePos[circle(index-1)]+width, speed);
+ index = circle(index-1);
+
+ }
+
+ options.callback && options.callback(index, slides[index]);
+
+ } else {
+
+ if (options.continuous) {
+
+ move(circle(index-1), -width, speed);
+ move(index, 0, speed);
+ move(circle(index+1), width, speed);
+
+ } else {
+
+ move(index-1, -width, speed);
+ move(index, 0, speed);
+ move(index+1, width, speed);
+ }
+
+ }
+
+ }
+
+ // kill touchmove and touchend event listeners until touchstart called again
+ if(browser.touch) {
+ element.removeEventListener('touchmove', events, false)
+ element.removeEventListener('touchend', events, false)
+ } else {
+ element.removeEventListener('mousemove', events, false)
+ element.removeEventListener('mouseup', events, false)
+ }
+
+ },
+ transitionEnd: function(event) {
+
+ if (parseInt(event.target.getAttribute('data-index'), 10) == index) {
+
+ if (delay) begin();
+
+ options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);
+
+ }
+
+ }
+
+ }
+
+ // Public API
+ this.setup = function() {
+ setup();
+ };
+
+ this.slide = function(to, speed) {
+ // cancel slideshow
+ stop();
+
+ slide(to, speed);
+ };
+
+ this.prev = function() {
+ // cancel slideshow
+ stop();
+
+ prev();
+ };
+
+ this.next = function() {
+ // cancel slideshow
+ stop();
+
+ next();
+ };
+
+ this.stop = function() {
+ // cancel slideshow
+ stop();
+ };
+
+ this.getPos = function() {
+ // return current index position
+ return index;
+ };
+
+ this.getNumSlides = function() {
+ // return total number of slides
+ return length;
+ };
+
+ this.kill = function() {
+ // cancel slideshow
+ stop();
+
+ // reset element
+ element.style.width = '';
+ element.style.left = '';
+
+ // reset slides
+ var pos = slides.length;
+ while(pos--) {
+
+ var slide = slides[pos];
+ slide.style.width = '';
+ slide.style.left = '';
+
+ if (browser.transitions) translate(pos, 0, 0);
+
+ }
+
+ // removed event listeners
+ if (browser.addEventListener) {
+
+ // remove current event listeners
+ element.removeEventListener('touchstart', events, false);
+ element.removeEventListener('webkitTransitionEnd', events, false);
+ element.removeEventListener('msTransitionEnd', events, false);
+ element.removeEventListener('oTransitionEnd', events, false);
+ element.removeEventListener('otransitionend', events, false);
+ element.removeEventListener('transitionend', events, false);
+ window.removeEventListener('resize', events, false);
+
+ }
+ else {
+
+ window.onresize = null;
+
+ }
+ };
+
+ this.load = function() {
+ // trigger setup
+ setup();
+
+ // start auto slideshow if applicable
+ if (delay) begin();
+
+
+ // add event listeners
+ if (browser.addEventListener) {
+
+ // set touchstart event on element
+ if (browser.touch) {
+ element.addEventListener('touchstart', events, false);
+ } else {
+ element.addEventListener('mousedown', events, false);
+ }
+
+ if (browser.transitions) {
+ element.addEventListener('webkitTransitionEnd', events, false);
+ element.addEventListener('msTransitionEnd', events, false);
+ element.addEventListener('oTransitionEnd', events, false);
+ element.addEventListener('otransitionend', events, false);
+ element.addEventListener('transitionend', events, false);
+ }
+
+ // set resize event on window
+ window.addEventListener('resize', events, false);
+
+ } else {
+
+ window.onresize = function () { setup() }; // to play nice with old IE
+
+ }
+ }
+
+ }
+});
+
+})(ionic);
diff --git a/scss/_animations.scss b/scss/_animations.scss
index 9857e5322c1..089af2a81a4 100644
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -151,6 +151,11 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
100% { transform: rotate(360deg); }
}
+.no-animation {
+ > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+ @include transition(none);
+ }
+}
.noop-animation {
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
@include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-duration);
diff --git a/scss/_slide-box.scss b/scss/_slide-box.scss
index 43cc37ca750..a13a24c4cda 100644
--- a/scss/_slide-box.scss
+++ b/scss/_slide-box.scss
@@ -4,43 +4,42 @@
* --------------------------------------------------
*/
-.slide-box {
+.slider {
position: relative;
// Make sure items don't scroll over ever
overflow: hidden;
- background-color: #000;
+ visibility: hidden;
}
-.slide-box-slides {
+.slider-slides {
position: relative;
- white-space: nowrap;
- font-size: 0; // Remove the gaps between slide content items
- @include transition-transform(0 ease-in-out);
}
-.slide-box-animating {
- @include transition-duration(0.2s);
-}
-
-.slide-box-slide {
- display: inline-block;
+.slider-slide {
+ display: block;
+ position: relative;
width: 100%;
- height: 100%;
+ float: left;
vertical-align: top;
- img {
+}
+
+.slider-slide-image {
+ > img {
width: 100%;
}
}
-.slide-box-pager {
+.slider-pager {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
+ z-index: 1;
- > * {
+ .slider-pager-page {
display: inline-block;
- margin: 0px 5px;
+ margin: 0px 3px;
+ width: 15px;
color: #fff;
text-decoration: none;
-
-
-
-
-
-
-
-
-
-
+
-
- BLUE {{slideBox.slideIndex}}
-
-
- YELLOW {{slideBox.slideIndex}}
-PINK {{slideBox.slideIndex}}
Thank you for choosing the Awesome App!
+
+ 
+
+
+ + We've worked super hard to make you happy. +
++ But if you are angry, too bad. +
+Using Awesome
+ +
+
+ Just three steps:
+-
+
- Be awesome +
- Stay awesome +
- There is no step 3 +
Any questions?
++ Too bad! +
+