mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
7ef9ad74cf
Closes #2336. Closes #2317. Closes #2290. Closes #2228. Closes #2067. Closes #1890. Closes #1865. Closes #1850. Closes #1755. Closes #1688. Closes #1578. Closes #1501. Closes #1353. Closes #1342. Closes #782. Closes #416. Closes #2288. BREAKING CHANGE: The slideBox's API has undergone many changes. - **`<ion-slide-box>`** attributes have changed (see [documentation](http://ionicframework.com/docs/api/directive/ionSlideBox)): * `active-slide` has changed to `selected`. Change your code from this: ```html <ion-slide-box active-slide="activeSlideIndex"></ion-slide-box> ``` To this: ```html <ion-slide-box selected="activeSlideIndex"></ion-slide-box> ``` * `does-continue` has changed to `loop`. Change your code from this: ```html <ion-slide-box does-continue="shouldLoop"></ion-slide-box> ``` To this: ```html <ion-slide-box loop="shouldLoop"></ion-slide-box> ``` * `auto-play` and `slide-interval` have been merged into `auto-play`. Change your code from this: ```html <!-- autoPlay is on --> <ion-slide-box auto-play="true" slide-interval="1000"> </ion-slide-box> <!-- autoPlay is off --> <ion-slide-box auto-play="false" slide-interval="1000"> </ion-slide-box> ``` To this: ```html <!-- autoPlay is on --> <ion-slide-box auto-play="1000"></ion-slide-box> <!-- autoPlay is off --> <ion-slide-box auto-play="false"></ion-slide-box> ``` * `show-pager` and `pager-click` have been removed. Use a child `<ion-slide-pager>` element. See the [`ion-slide-pager` documentation](http://ionicframework.com/docs/api/directive/ionSlidePager). Change your code from this: ```html <!-- pager using default click action --> <ion-slide-box show-pager="true"> </ion-slide-box> <!-- pager with custom click action --> <ion-slide-box show-pager="true" pager-click="doSomething(index)"> </ion-slide-box> ``` To this: ```html <ion-slide-box> <!-- pager using default click action --> <ion-slide-pager></ion-slide-pager> </ion-slide-box> <ion-slide-box> <!-- pager with custom click action --> <ion-slide-pager ng-click="doSomething(index)"></ion-slide-pager> </ion-slide-box> ``` - **`$ionicSlideBoxDelegate`** methods have changed (see [documentation](http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate)): - `update()` has been removed. slideBox updates on its own now. - `stop()` has been removed. See `autoPlay()` below. - `start()` hass been removed. See `autoPlay()` below. - `slide(newIndex[, speed])` has been renamed to `select(newIndex[, speed]); - `currentIndex()` has been renamed to `selected()`. - `slidesCount()` has been renamed to `count()`. - New method `$ionicSlideBoxDelegate.autoPlay()`. Change your code from this: ```js // stop auto sliding $ionicSlideBoxDelegate.stop(); // later... start auto sliding $ionicSlideBoxDelegate.start(); ``` To this: ```js var autoPlaySpeed = 3000; //wait 3000 seconds between changing slide // stop auto sliding $ionicSlideBoxDelegate.autoPlay(false); // later... start auto sliding $ionicSlideBoxDelegate.autoPlay(autoPlaySpeed); ``` - `previous()` now returns the index of the previous slide and does not select. Change your code from this: ```js // select previous slide $ionicSlideBoxDelegate.previous(); ``` To this: ```js // select previous slide $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.previous() ); ``` - `next()` now returns the index of the next slide and does not select. Change your code from this: ```js // select next slide $ionicSlideBoxDelegate.next(); ``` To this: ```js // select next slide $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.next() ); ```
84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
(function(document, ionic) {
|
|
'use strict';
|
|
|
|
// Ionic CSS polyfills
|
|
ionic.CSS = {};
|
|
|
|
(function() {
|
|
|
|
// transform
|
|
var i, keys = ['webkitTransform', 'transform', '-webkit-transform', 'webkit-transform',
|
|
'-moz-transform', 'moz-transform', 'MozTransform', 'mozTransform', 'msTransform'];
|
|
|
|
for(i = 0; i < keys.length; i++) {
|
|
if (document.documentElement.style[keys[i]] !== undefined) {
|
|
ionic.CSS.TRANSFORM = keys[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
// transition
|
|
keys = ['webkitTransition', 'mozTransition', 'msTransition', 'transition'];
|
|
for(i = 0; i < keys.length; i++) {
|
|
if (document.documentElement.style[keys[i]] !== undefined) {
|
|
ionic.CSS.TRANSITION = keys[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
// The only prefix we care about is webkit for transitions.
|
|
var isWebkit = ionic.CSS.TRANSITION.indexOf('webkit') > -1;
|
|
|
|
// transition duration
|
|
ionic.CSS.TRANSITION_DURATION = (isWebkit ? '-webkit-' : '') + 'transition-duration';
|
|
|
|
// To be sure transitionend works everywhere, include *both* the webkit and non-webkit events
|
|
ionic.CSS.TRANSITIONEND = (isWebkit ? 'webkitTransitionEnd ' : '') + 'transitionend';
|
|
})();
|
|
|
|
// classList polyfill for them older Androids
|
|
// https://gist.github.com/devongovett/1381839
|
|
if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') {
|
|
Object.defineProperty(HTMLElement.prototype, 'classList', {
|
|
get: function() {
|
|
var self = this;
|
|
function update(fn) {
|
|
return function() {
|
|
var x, classes = self.className.split(/\s+/);
|
|
|
|
for(x=0; x<arguments.length; x++) {
|
|
fn(classes, classes.indexOf(arguments[x]), arguments[x]);
|
|
}
|
|
|
|
self.className = classes.join(" ");
|
|
};
|
|
}
|
|
|
|
return {
|
|
add: update(function(classes, index, value) {
|
|
~index || classes.push(value);
|
|
}),
|
|
|
|
remove: update(function(classes, index) {
|
|
~index && classes.splice(index, 1);
|
|
}),
|
|
|
|
toggle: update(function(classes, index, value) {
|
|
~index ? classes.splice(index, 1) : classes.push(value);
|
|
}),
|
|
|
|
contains: function(value) {
|
|
return !!~self.className.split(/\s+/).indexOf(value);
|
|
},
|
|
|
|
item: function(i) {
|
|
return self.className.split(/\s+/)[i] || null;
|
|
}
|
|
};
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
})(document, ionic);
|