-1)return!0}catch(o){return!1}}return!1},u.subjectTo=function(t,e){if(!(!t instanceof c)){var i=this;i.animateTime=t.animateTime,i.isLooping=t.isLooping,i.isAutoplay=!1,t.on("slideStart",function(t){i.startHandler(t)}),t.on("slide",function(t){i.moveHandler(t)}),t.on("slideEnd",function(t){i.endHandler(t)}),t.on("slideChange",function(t){var e=i.data.length,n=i.direction;n>0&&(t-i.slideIndex+e)%e===1?i.slideNext():0>n&&(t-i.slideIndex-e)%e===-1&&i.slidePrev()}),t.on("slideRestore",function(t){i.slideIndex!==t&&i.slideTo(t)})}},"function"==typeof require&&"object"==typeof module&&module&&"object"==typeof exports&&exports?module.exports=c:"function"==typeof define&&define.amd?define(function(){return c}):t.iSlider=t.iSlider||c}(this||window);
\ No newline at end of file
diff --git a/change_log.md b/change_log.md
index 4f5c9558..1d40d1df 100644
--- a/change_log.md
+++ b/change_log.md
@@ -1,3 +1,9 @@
+### iSlider 2.1.5
+- [New]Add method "[pushData](https://github.com/BE-FE/iSlider/blob/master/README.md#pushdata)", now you can append data dynamically. Here is the [DEMO](http://be-fe.github.io/iSlider/demo/add_dynamic_data.html).
+- [Optimization][Bug fix]Android browser (including wechat) failures of transition.
+- [Optimization]Support Firefox browser, UC browser.
+- [Bug fix]Firefox Android browser and certain "slideChanged", "slideRestored" event failures.
+
### iSlider 2.1.4
- [Optimization]Options fixPage support policy "exclusion list", it allows you to trigger default event for the specific element.
- [Optimization]readme & demo pages
diff --git a/demo/add_dynamic_data.html b/demo/add_dynamic_data.html
new file mode 100644
index 00000000..d28709da
--- /dev/null
+++ b/demo/add_dynamic_data.html
@@ -0,0 +1,76 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index a86c722f..393cd946 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -203,6 +203,7 @@ Animation Effects
+
demo code
@@ -861,6 +862,17 @@ loadData
+ pushData
+
+
+ - Add scenes to the end of the data datasheets
+ - Parameters：
+
+ {Array|Object} A member or additional datasheets
+
+
+
subjectTo
diff --git a/demo/index_chinese.html b/demo/index_chinese.html
index 89bfd058..59ae3389 100755
--- a/demo/index_chinese.html
+++ b/demo/index_chinese.html
@@ -202,7 +202,8 @@ 动画效果
-
+
+
demo代码
@@ -860,6 +861,18 @@ loadData
参数：
{Array} 数据列表{Number} 初始场景索引
+
+
+
+ pushData
+
+
+ - 追加数据到已有的数据序列末尾
+ - 参数：
+
+ {Array|Object} 一个成员或者追加的序列（数组）
diff --git a/demo/public/css/iSlider.css b/demo/public/css/iSlider.css
index abc85222..4235cc1e 100755
--- a/demo/public/css/iSlider.css
+++ b/demo/public/css/iSlider.css
@@ -28,9 +28,13 @@
height: 100%;
list-style: none;
overflow: hidden;
+ display: -moz-box;
display: -webkit-box;
+ display: box;
+ -moz-box-pack: center;
-webkit-box-pack: center;
box-pack: center;
+ -moz-box-align: center;
-webkit-box-align: center;
box-align: center;
}
@@ -88,11 +92,17 @@
.islider-btn-outer.left > .islider-btn-inner {
-webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.islider-btn-outer.right > .islider-btn-inner {
-webkit-transform: rotate(135deg);
+ -moz-transform: rotate(135deg);
+ -ms-transform: rotate(135deg);
+ -o-transform: rotate(135deg);
transform: rotate(135deg);
}
diff --git a/demo/public/js/iSlider.animate.js b/demo/public/js/iSlider.animate.js
index 7da7eb7d..facd3815 100644
--- a/demo/public/js/iSlider.animate.js
+++ b/demo/public/js/iSlider.animate.js
@@ -36,7 +36,7 @@
}
}
- this.wrap.style.webkitPerspective = scale * 4;
+ iSlider.setStyle(this.wrap, 'perspective', scale * 4);
dom.style.visibility = 'visible';
if (direct > 0 && i === 2) {
@@ -47,13 +47,13 @@
}
dom.style.zIndex = i === 1 ? 1 : 0;
- dom.style.cssText += '-webkit-backface-visibility:hidden; -webkit-transform-style:preserve-3d; position:absolute;';
+ dom.style.cssText += iSlider.styleProp('backface-visibility') + ':hidden;' + iSlider.styleProp('transform-style') + ':preserve-3d;' + 'position:absolute;';
+
// TODO: overflow... I dont understand why there are many differences between ios and desktop. Maybe they have different interpretations of Perspective
- // dom.style.webkitTransform = 'rotate' + rotateDirect + '(' + 0.9153 * 90 * (offset / scale + i - 1) + 'deg) translateZ(' + ( scale / 2) + 'px) scale(0.875)';
- dom.style.webkitTransform = 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ(' + (0.889 * scale / 2) + 'px) scale(0.889)';
+ iSlider.setStyle(dom, 'transform', 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ(' + (0.889 * scale / 2) + 'px) scale(0.889)');
}
- rotate.effect = 'transform';
+ rotate.effect = iSlider.styleProp('transform');
rotate.reverse = true;
return rotate;
})(),
@@ -63,7 +63,8 @@
if (this.isVertical) {
offset = -offset;
}
- this.wrap.style.webkitPerspective = scale * 4;
+
+ iSlider.setStyle(this.wrap, 'perspective', scale * 4);
dom.style.visibility = 'visible';
if (direct > 0 && i === 2) {
@@ -73,11 +74,11 @@
dom.style.visibility = 'hidden';
}
- dom.style.cssText += 'position:absolute; -webkit-backface-visibility:hidden;';
- dom.style.webkitTransform = 'translateZ(' + (scale / 2) + 'px) rotate' + ((axis === 'X') ? 'Y' : 'X') + '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)';
+ dom.style.cssText += 'position:absolute;' + iSlider.styleProp('backface-visibility') + ':hidden';
+ iSlider.setStyle(dom, 'transform', 'translateZ(' + (scale / 2) + 'px) rotate' + ((axis === 'X') ? 'Y' : 'X') + '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)');
}
- flip.effect = 'transform';
+ flip.effect = iSlider.styleProp('transform');
flip.reverse = true;
return flip;
})(),
@@ -85,12 +86,12 @@
function depth(dom, axis, scale, i, offset, direct) {
var zoomScale = (4 - Math.abs(i - 1)) * 0.18;
- this.wrap.style.webkitPerspective = scale * 4;
+ iSlider.setStyle(this.wrap, 'perspective', scale * 4);
dom.style.zIndex = i === 1 ? 1 : 0;
- dom.style.webkitTransform = 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)';
+ iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)');
}
- depth.effect = 'transform';
+ depth.effect = iSlider.styleProp('transform');
return depth;
})(),
flow: (function () {
@@ -100,7 +101,7 @@
var directAmend = (axis === 'X') ? 1 : -1;
var offsetRatio = Math.abs(offset / scale);
- this.wrap.style.webkitPerspective = scale * 4;
+ iSlider.setStyle(this.wrap, 'perspective', scale * 4);
if (i === 1) {
dom.style.zIndex = scale - absoluteOffset;
@@ -109,10 +110,10 @@
dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset : (i - 1) * absoluteOffset;
}
- dom.style.webkitTransform = 'scale(0.7, 0.7) translateZ(' + (offsetRatio * 150 - 150) * Math.abs(i - 1) + 'px)' + 'translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)' + 'rotate' + rotateDirect + '(' + directAmend * (30 - offsetRatio * 30) * (1 - i) + 'deg)';
+ iSlider.setStyle(dom, 'transform', 'scale(0.7, 0.7) translateZ(' + (offsetRatio * 150 - 150) * Math.abs(i - 1) + 'px)' + 'translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)' + 'rotate' + rotateDirect + '(' + directAmend * (30 - offsetRatio * 30) * (1 - i) + 'deg)');
}
- flow.effect = 'transform';
+ flow.effect = iSlider.styleProp('transform');
return flow;
})(),
card: (function () {
@@ -135,10 +136,10 @@
}
}
dom.style.zIndex = z;
- dom.style.webkitTransform = 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + ((1 + Math.abs(i - 1) * 0.2) * offset + scale * (i - 1)) + 'px)';
+ iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + ((1 + Math.abs(i - 1) * 0.2) * offset + scale * (i - 1)) + 'px)');
}
- card.effect = 'transform';
+ card.effect = iSlider.styleProp('transform');
return card;
})(),
fade: (function () {
@@ -168,7 +169,7 @@
o = oa < 1 ? oa : 1;
s = 2 - (0.5 * oa);
z = 2;
- var at = parseInt(window.getComputedStyle(dom).transitionDuration) * 1000;
+ var at = parseInt(window.getComputedStyle(dom)[iSlider.styleProp('transitionDuration', 1)]) * 1000;
if (at > 0) {
lsn = window.setTimeout(function () {
dom.style.zIndex = 0;
@@ -186,11 +187,9 @@
z = 0;
break;
}
- dom.style.cssText += 'z-index:' + z + ';opacity:' + o + ';-webkit-transform: scale(' + s + ');';
+ dom.style.cssText += 'z-index:' + z + ';opacity:' + o + ';' + iSlider.styleProp('transform') + ':scale(' + s + ');';
}
- //what.effect = 'all';
- //what.effect = 'transform,opacity';
zoomout.reverse = true;
return zoomout;
})()
diff --git a/demo/public/js/iSlider.js b/demo/public/js/iSlider.js
index 58ca207b..9929541a 100644
--- a/demo/public/js/iSlider.js
+++ b/demo/public/js/iSlider.js
@@ -98,6 +98,12 @@
return Array.prototype.slice.apply(a, Array.prototype.slice.call(arguments, 1));
}
+ function IU(word) {
+ return word.replace(/^[a-z]/, function (t) {
+ return t.toUpperCase();
+ });
+ }
+
/**
* @constructor
*
@@ -161,7 +167,7 @@
* version
* @type {string}
*/
- iSlider.VERSION = '2.1.4';
+ iSlider.VERSION = '2.1.5';
/**
* Event white list
@@ -223,23 +229,28 @@
* @returns {String}
* @private
*/
- iSlider.TRANSITION_END_EVENT = (function () {
- var el = document.createElement('fakeElement');
- var transitions = {
- transition: 'transitionend',
- OTransition: 'oTransitionEnd',
- MozTransition: 'transitionend',
- WebkitTransition: 'webkitTransitionEnd'
- };
- for (var t in transitions) {
- if (transitions.hasOwnProperty(t) && el.style[t] !== undefined) {
- return transitions[t];
- }
- }
-
- return null;
+ iSlider.TRANSITION_END_EVENT = null;
+
+ iSlider.BROWSER_PREFIX = null;
+
+ (function () {
+ var e = document.createElement('fakeElement');
+ [
+ ['WebkitTransition', 'webkitTransitionEnd', 'webkit'],
+ ['transition', 'transitionend', null],
+ ['MozTransition', 'transitionend', 'moz'],
+ ['OTransition', 'oTransitionEnd', 'o']
+ ].some(function (t) {
+ if (e.style[t[0]] !== undefined) {
+ iSlider.TRANSITION_END_EVENT = t[1];
+ iSlider.BROWSER_PREFIX = t[2];
+ return true;
+ }
+ });
})();
+ console.log(iSlider.TRANSITION_END_EVENT)
+
/**
* Event match depending on the browser supported
* @type {{hasTouch, startEvt, moveEvt, endEvt, cancelEvt, resizeEvt}}
@@ -300,6 +311,44 @@
iSlider.plugins[name] = iSlider.plugins[name] || plugin;
};
+ /**
+ * @param {String} prop
+ * @param {String} value
+ * @returns {String}
+ * @public
+ */
+ iSlider.styleProp = function (prop, isDP) {
+ if (iSlider.BROWSER_PREFIX) {
+ if (!!isDP) {
+ return iSlider.BROWSER_PREFIX + IU(prop);
+ } else {
+ return '-' + iSlider.BROWSER_PREFIX + '-' + prop;
+ }
+ } else {
+ return prop;
+ }
+ };
+
+ /**
+ * @param {String} prop
+ * @param {HTMLElement} dom
+ * @param {String} value
+ * @public
+ */
+ iSlider.setStyle = function (dom, prop, value) {
+ dom.style[iSlider.styleProp(prop, 1)] = value;
+ };
+
+ /**
+ * @param {String} prop
+ * @param {HTMLElement} dom
+ * @param {String} value
+ * @public
+ */
+ iSlider.getStyle = function (dom, prop) {
+ return dom.style[iSlider.styleProp(prop, 1)];
+ };
+
/**
* @type {Object}
*
@@ -313,10 +362,10 @@
iSlider._animateFuncs = {
normal: (function () {
function normal(dom, axis, scale, i, offset) {
- dom.style.webkitTransform = 'translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)';
+ iSlider.setStyle(dom, 'transform', 'translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)');
}
- normal.effect = 'transform';
+ normal.effect = iSlider.styleProp('transform');
return normal;
})()
};
@@ -1025,9 +1074,8 @@
this.currentEl.addEventListener(iSlider.TRANSITION_END_EVENT, cb);
// keep handler and element
this._transitionEndHandler = {el: this.currentEl, handler: cb};
- } else {
- this._LSN.transitionEnd = global.setTimeout(cb, squeezeTime);
}
+ this._LSN.transitionEnd = global.setTimeout(cb, squeezeTime);
};
/**
@@ -1192,7 +1240,7 @@
this.els.forEach(function (item, i) {
item.style.visibility = 'visible';
- item.style.webkitTransition = 'none';
+ iSlider.setStyle(item, 'transition', 'none');
this._animateFunc(item, axis, this.scale, i, offset[axis], offset[axis]);
this.fillSeam && this.seamScale(item);
}.bind(this));
@@ -1406,7 +1454,7 @@
this._intermediateScene = [tailEl, idx - direction];
}
- headEl.style.webkitTransition = 'none';
+ iSlider.setStyle(headEl, 'transition', 'none');
// Minus squeeze time
squeezeTime = animateTime - squeezeTime;
@@ -1429,7 +1477,7 @@
for (var i = 0; i < 3; i++) {
if (els[i] !== headEl) {
// Only applies their effects
- els[i].style.webkitTransition = (animateFunc.effect || 'all') + ' ' + squeezeTime + 'ms ' + this.animateEasing;
+ iSlider.setStyle(els[i], 'transition', (animateFunc.effect || 'all') + ' ' + squeezeTime + 'ms ' + this.animateEasing);
}
animateFunc.call(this, els[i], axis, this.scale, i, 0, direction);
this.fillSeam && this.seamScale(els[i]);
@@ -1677,7 +1725,10 @@
};
/**
- * reload Data & render
+ * Reload Data & render
+ *
+ * @param {Array} data
+ * @param {Number} initIndex
* @public
*/
iSliderPrototype.loadData = function (data, initIndex) {
@@ -1690,6 +1741,27 @@
this.fire('loadData slideChanged', this.slideIndex, this.currentEl, this);
};
+ /**
+ * Add scenes to the end of the data datasheets
+ *
+ * @param {Object|Array} sceneData
+ * @description
+ * Object:
+ * {content:...}
+ * Array:
+ * [{content:...}, {content:...}, ...]
+ */
+ iSliderPrototype.pushData = function (sceneData) {
+ var len = this.data.length;
+ this.data = this.data.concat(sceneData);
+ if (this.isLooping && this.slideIndex === 0) {
+ this._renderItem(this.els[0], this.data.length - 1);
+ } else if (len - 1 === this.slideIndex) {
+ this._renderItem(this.els[2], len);
+ this._autoPlay(); // restart
+ }
+ };
+
/**
* auto check to play and bind events
* @private
@@ -1763,8 +1835,9 @@
*/
iSliderPrototype.seamScale = function (el) {
var regex = /scale([XY]?)\(([^\)]+)\)/;
- if (regex.test(el.style.webkitTransform)) {
- el.style.webkitTransform = el.style.webkitTransform.replace(regex, function (res, axis, scale) {
+ var transformStyle = iSlider.getStyle(el, 'transform');
+ if (regex.test(transformStyle)) {
+ iSlider.setStyle(el, 'transform', transformStyle.replace(regex, function (res, axis, scale) {
var sc = {};
if (axis) {
sc[axis] = parseFloat(scale);
@@ -1780,9 +1853,9 @@
sc[this.axis] *= 1.001;
return 'scale(' + sc.X + ', ' + sc.Y + ')';
}
- }.bind(this));
+ }.bind(this)));
} else {
- el.style.webkitTransform += 'scale' + this.axis + '(1.001)';
+ iSlider.setStyle(el, 'transform', transformStyle + ' scale' + this.axis + '(1.001)');
}
};
@@ -1792,7 +1865,7 @@
*/
iSliderPrototype.originScale = function (el) {
var regex = /([\x20]?scale)([XY]?)\(([^\)]+)\)/;
- el.style.webkitTransform = el.style.webkitTransform.replace(regex, function (sc, res, axis, scale) {
+ iSlider.setStyle(el, 'transform', iSlider.getStyle(el, 'transform').replace(regex, function (sc, res, axis, scale) {
sc = {};
if (axis) {
if (scale === '1.001') {
@@ -1812,7 +1885,7 @@
sc[this.axis] /= 1.001;
return 'scale(' + sc.X + ', ' + sc.Y + ')';
}
- }.bind(this));
+ }.bind(this)));
};
diff --git a/package.json b/package.json
index ce29c5a0..aff942a2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "islider.js",
- "version": "2.1.4",
+ "version": "2.1.5",
"author": "EUX team",
"main": "build/iSlider.min.js",
"description": "Smooth and high-performance slide web framework. Suitable for PC, Mobile WebApp, HTML5 App, Hybrid App",
@@ -10,6 +10,7 @@
"gulp": "^3.9.1",
"gulp-clean": "^0.3.1",
"gulp-cssmin": "^0.1.7",
+ "gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.2.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.1",
diff --git a/src/index.html b/src/index.html
index d9b3a2d7..611b0d8a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -74,6 +74,7 @@
src="https://cloud.githubusercontent.com/assets/8253888/10995507/592ce796-84b8-11e5-842b-938c55a4cb3a.jpg"
alt="qq 20151106184244" style="max-width:100%;">
+
@@ -147,13 +148,13 @@
// isVertical: 1,
isLooping: 1,
// isOverspread: 1,
- animateType: 'rotate',
+// animateType: 'rotate',
// delay: 3000,
- animateTime: 1000,
-// fillSeam: 1,
+ animateTime: 5000,
+ fillSeam: 1,
fixPage: ['[x="ooxx"]', 'div'],
isDebug: 1,
-// isAutoplay: true,
+ isAutoplay: true,
duration: 5000,
// plugins: [
// ['dot', {locate: 'relative'}],
@@ -171,9 +172,9 @@
_: null
});
- // islider.on('slideChange', function () {
- // console.debug('Change event from method "on"', this, arguments);
- // });
+ // islider.on('slideChange', function () {
+ // console.log(iSlider.TRANSITION_END_EVENT, iSlider.BROWSER_PREFIX);
+ // });
//
// islider.on('slideChanged', function () {
// console.debug('Change(d) event from method "on"', this, arguments);
diff --git a/src/js/ext/animate.js b/src/js/ext/animate.js
index 7da7eb7d..facd3815 100644
--- a/src/js/ext/animate.js
+++ b/src/js/ext/animate.js
@@ -36,7 +36,7 @@
}
}
- this.wrap.style.webkitPerspective = scale * 4;
+ iSlider.setStyle(this.wrap, 'perspective', scale * 4);
dom.style.visibility = 'visible';
if (direct > 0 && i === 2) {
@@ -47,13 +47,13 @@
}
dom.style.zIndex = i === 1 ? 1 : 0;
- dom.style.cssText += '-webkit-backface-visibility:hidden; -webkit-transform-style:preserve-3d; position:absolute;';
+ dom.style.cssText += iSlider.styleProp('backface-visibility') + ':hidden;' + iSlider.styleProp('transform-style') + ':preserve-3d;' + 'position:absolute;';
+
// TODO: overflow... I dont understand why there are many differences between ios and desktop. Maybe they have different interpretations of Perspective
- // dom.style.webkitTransform = 'rotate' + rotateDirect + '(' + 0.9153 * 90 * (offset / scale + i - 1) + 'deg) translateZ(' + ( scale / 2) + 'px) scale(0.875)';
- dom.style.webkitTransform = 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ(' + (0.889 * scale / 2) + 'px) scale(0.889)';
+ iSlider.setStyle(dom, 'transform', 'rotate' + rotateDirect + '(' + 90 * (offset / scale + i - 1) + 'deg) translateZ(' + (0.889 * scale / 2) + 'px) scale(0.889)');
}
- rotate.effect = 'transform';
+ rotate.effect = iSlider.styleProp('transform');
rotate.reverse = true;
return rotate;
})(),
@@ -63,7 +63,8 @@
if (this.isVertical) {
offset = -offset;
}
- this.wrap.style.webkitPerspective = scale * 4;
+
+ iSlider.setStyle(this.wrap, 'perspective', scale * 4);
dom.style.visibility = 'visible';
if (direct > 0 && i === 2) {
@@ -73,11 +74,11 @@
dom.style.visibility = 'hidden';
}
- dom.style.cssText += 'position:absolute; -webkit-backface-visibility:hidden;';
- dom.style.webkitTransform = 'translateZ(' + (scale / 2) + 'px) rotate' + ((axis === 'X') ? 'Y' : 'X') + '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)';
+ dom.style.cssText += 'position:absolute;' + iSlider.styleProp('backface-visibility') + ':hidden';
+ iSlider.setStyle(dom, 'transform', 'translateZ(' + (scale / 2) + 'px) rotate' + ((axis === 'X') ? 'Y' : 'X') + '(' + 180 * (offset / scale + i - 1) + 'deg) scale(0.875)');
}
- flip.effect = 'transform';
+ flip.effect = iSlider.styleProp('transform');
flip.reverse = true;
return flip;
})(),
@@ -85,12 +86,12 @@
function depth(dom, axis, scale, i, offset, direct) {
var zoomScale = (4 - Math.abs(i - 1)) * 0.18;
- this.wrap.style.webkitPerspective = scale * 4;
+ iSlider.setStyle(this.wrap, 'perspective', scale * 4);
dom.style.zIndex = i === 1 ? 1 : 0;
- dom.style.webkitTransform = 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)';
+ iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + (offset + 1.3 * scale * (i - 1)) + 'px)');
}
- depth.effect = 'transform';
+ depth.effect = iSlider.styleProp('transform');
return depth;
})(),
flow: (function () {
@@ -100,7 +101,7 @@
var directAmend = (axis === 'X') ? 1 : -1;
var offsetRatio = Math.abs(offset / scale);
- this.wrap.style.webkitPerspective = scale * 4;
+ iSlider.setStyle(this.wrap, 'perspective', scale * 4);
if (i === 1) {
dom.style.zIndex = scale - absoluteOffset;
@@ -109,10 +110,10 @@
dom.style.zIndex = (offset > 0) ? (1 - i) * absoluteOffset : (i - 1) * absoluteOffset;
}
- dom.style.webkitTransform = 'scale(0.7, 0.7) translateZ(' + (offsetRatio * 150 - 150) * Math.abs(i - 1) + 'px)' + 'translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)' + 'rotate' + rotateDirect + '(' + directAmend * (30 - offsetRatio * 30) * (1 - i) + 'deg)';
+ iSlider.setStyle(dom, 'transform', 'scale(0.7, 0.7) translateZ(' + (offsetRatio * 150 - 150) * Math.abs(i - 1) + 'px)' + 'translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)' + 'rotate' + rotateDirect + '(' + directAmend * (30 - offsetRatio * 30) * (1 - i) + 'deg)');
}
- flow.effect = 'transform';
+ flow.effect = iSlider.styleProp('transform');
return flow;
})(),
card: (function () {
@@ -135,10 +136,10 @@
}
}
dom.style.zIndex = z;
- dom.style.webkitTransform = 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + ((1 + Math.abs(i - 1) * 0.2) * offset + scale * (i - 1)) + 'px)';
+ iSlider.setStyle(dom, 'transform', 'scale(' + zoomScale + ') translateZ(0) translate' + axis + '(' + ((1 + Math.abs(i - 1) * 0.2) * offset + scale * (i - 1)) + 'px)');
}
- card.effect = 'transform';
+ card.effect = iSlider.styleProp('transform');
return card;
})(),
fade: (function () {
@@ -168,7 +169,7 @@
o = oa < 1 ? oa : 1;
s = 2 - (0.5 * oa);
z = 2;
- var at = parseInt(window.getComputedStyle(dom).transitionDuration) * 1000;
+ var at = parseInt(window.getComputedStyle(dom)[iSlider.styleProp('transitionDuration', 1)]) * 1000;
if (at > 0) {
lsn = window.setTimeout(function () {
dom.style.zIndex = 0;
@@ -186,11 +187,9 @@
z = 0;
break;
}
- dom.style.cssText += 'z-index:' + z + ';opacity:' + o + ';-webkit-transform: scale(' + s + ');';
+ dom.style.cssText += 'z-index:' + z + ';opacity:' + o + ';' + iSlider.styleProp('transform') + ':scale(' + s + ');';
}
- //what.effect = 'all';
- //what.effect = 'transform,opacity';
zoomout.reverse = true;
return zoomout;
})()
diff --git a/src/js/iSlider.js b/src/js/iSlider.js
index 58ca207b..9929541a 100644
--- a/src/js/iSlider.js
+++ b/src/js/iSlider.js
@@ -98,6 +98,12 @@
return Array.prototype.slice.apply(a, Array.prototype.slice.call(arguments, 1));
}
+ function IU(word) {
+ return word.replace(/^[a-z]/, function (t) {
+ return t.toUpperCase();
+ });
+ }
+
/**
* @constructor
*
@@ -161,7 +167,7 @@
* version
* @type {string}
*/
- iSlider.VERSION = '2.1.4';
+ iSlider.VERSION = '2.1.5';
/**
* Event white list
@@ -223,23 +229,28 @@
* @returns {String}
* @private
*/
- iSlider.TRANSITION_END_EVENT = (function () {
- var el = document.createElement('fakeElement');
- var transitions = {
- transition: 'transitionend',
- OTransition: 'oTransitionEnd',
- MozTransition: 'transitionend',
- WebkitTransition: 'webkitTransitionEnd'
- };
- for (var t in transitions) {
- if (transitions.hasOwnProperty(t) && el.style[t] !== undefined) {
- return transitions[t];
- }
- }
-
- return null;
+ iSlider.TRANSITION_END_EVENT = null;
+
+ iSlider.BROWSER_PREFIX = null;
+
+ (function () {
+ var e = document.createElement('fakeElement');
+ [
+ ['WebkitTransition', 'webkitTransitionEnd', 'webkit'],
+ ['transition', 'transitionend', null],
+ ['MozTransition', 'transitionend', 'moz'],
+ ['OTransition', 'oTransitionEnd', 'o']
+ ].some(function (t) {
+ if (e.style[t[0]] !== undefined) {
+ iSlider.TRANSITION_END_EVENT = t[1];
+ iSlider.BROWSER_PREFIX = t[2];
+ return true;
+ }
+ });
})();
+ console.log(iSlider.TRANSITION_END_EVENT)
+
/**
* Event match depending on the browser supported
* @type {{hasTouch, startEvt, moveEvt, endEvt, cancelEvt, resizeEvt}}
@@ -300,6 +311,44 @@
iSlider.plugins[name] = iSlider.plugins[name] || plugin;
};
+ /**
+ * @param {String} prop
+ * @param {String} value
+ * @returns {String}
+ * @public
+ */
+ iSlider.styleProp = function (prop, isDP) {
+ if (iSlider.BROWSER_PREFIX) {
+ if (!!isDP) {
+ return iSlider.BROWSER_PREFIX + IU(prop);
+ } else {
+ return '-' + iSlider.BROWSER_PREFIX + '-' + prop;
+ }
+ } else {
+ return prop;
+ }
+ };
+
+ /**
+ * @param {String} prop
+ * @param {HTMLElement} dom
+ * @param {String} value
+ * @public
+ */
+ iSlider.setStyle = function (dom, prop, value) {
+ dom.style[iSlider.styleProp(prop, 1)] = value;
+ };
+
+ /**
+ * @param {String} prop
+ * @param {HTMLElement} dom
+ * @param {String} value
+ * @public
+ */
+ iSlider.getStyle = function (dom, prop) {
+ return dom.style[iSlider.styleProp(prop, 1)];
+ };
+
/**
* @type {Object}
*
@@ -313,10 +362,10 @@
iSlider._animateFuncs = {
normal: (function () {
function normal(dom, axis, scale, i, offset) {
- dom.style.webkitTransform = 'translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)';
+ iSlider.setStyle(dom, 'transform', 'translateZ(0) translate' + axis + '(' + (offset + scale * (i - 1)) + 'px)');
}
- normal.effect = 'transform';
+ normal.effect = iSlider.styleProp('transform');
return normal;
})()
};
@@ -1025,9 +1074,8 @@
this.currentEl.addEventListener(iSlider.TRANSITION_END_EVENT, cb);
// keep handler and element
this._transitionEndHandler = {el: this.currentEl, handler: cb};
- } else {
- this._LSN.transitionEnd = global.setTimeout(cb, squeezeTime);
}
+ this._LSN.transitionEnd = global.setTimeout(cb, squeezeTime);
};
/**
@@ -1192,7 +1240,7 @@
this.els.forEach(function (item, i) {
item.style.visibility = 'visible';
- item.style.webkitTransition = 'none';
+ iSlider.setStyle(item, 'transition', 'none');
this._animateFunc(item, axis, this.scale, i, offset[axis], offset[axis]);
this.fillSeam && this.seamScale(item);
}.bind(this));
@@ -1406,7 +1454,7 @@
this._intermediateScene = [tailEl, idx - direction];
}
- headEl.style.webkitTransition = 'none';
+ iSlider.setStyle(headEl, 'transition', 'none');
// Minus squeeze time
squeezeTime = animateTime - squeezeTime;
@@ -1429,7 +1477,7 @@
for (var i = 0; i < 3; i++) {
if (els[i] !== headEl) {
// Only applies their effects
- els[i].style.webkitTransition = (animateFunc.effect || 'all') + ' ' + squeezeTime + 'ms ' + this.animateEasing;
+ iSlider.setStyle(els[i], 'transition', (animateFunc.effect || 'all') + ' ' + squeezeTime + 'ms ' + this.animateEasing);
}
animateFunc.call(this, els[i], axis, this.scale, i, 0, direction);
this.fillSeam && this.seamScale(els[i]);
@@ -1677,7 +1725,10 @@
};
/**
- * reload Data & render
+ * Reload Data & render
+ *
+ * @param {Array} data
+ * @param {Number} initIndex
* @public
*/
iSliderPrototype.loadData = function (data, initIndex) {
@@ -1690,6 +1741,27 @@
this.fire('loadData slideChanged', this.slideIndex, this.currentEl, this);
};
+ /**
+ * Add scenes to the end of the data datasheets
+ *
+ * @param {Object|Array} sceneData
+ * @description
+ * Object:
+ * {content:...}
+ * Array:
+ * [{content:...}, {content:...}, ...]
+ */
+ iSliderPrototype.pushData = function (sceneData) {
+ var len = this.data.length;
+ this.data = this.data.concat(sceneData);
+ if (this.isLooping && this.slideIndex === 0) {
+ this._renderItem(this.els[0], this.data.length - 1);
+ } else if (len - 1 === this.slideIndex) {
+ this._renderItem(this.els[2], len);
+ this._autoPlay(); // restart
+ }
+ };
+
/**
* auto check to play and bind events
* @private
@@ -1763,8 +1835,9 @@
*/
iSliderPrototype.seamScale = function (el) {
var regex = /scale([XY]?)\(([^\)]+)\)/;
- if (regex.test(el.style.webkitTransform)) {
- el.style.webkitTransform = el.style.webkitTransform.replace(regex, function (res, axis, scale) {
+ var transformStyle = iSlider.getStyle(el, 'transform');
+ if (regex.test(transformStyle)) {
+ iSlider.setStyle(el, 'transform', transformStyle.replace(regex, function (res, axis, scale) {
var sc = {};
if (axis) {
sc[axis] = parseFloat(scale);
@@ -1780,9 +1853,9 @@
sc[this.axis] *= 1.001;
return 'scale(' + sc.X + ', ' + sc.Y + ')';
}
- }.bind(this));
+ }.bind(this)));
} else {
- el.style.webkitTransform += 'scale' + this.axis + '(1.001)';
+ iSlider.setStyle(el, 'transform', transformStyle + ' scale' + this.axis + '(1.001)');
}
};
@@ -1792,7 +1865,7 @@
*/
iSliderPrototype.originScale = function (el) {
var regex = /([\x20]?scale)([XY]?)\(([^\)]+)\)/;
- el.style.webkitTransform = el.style.webkitTransform.replace(regex, function (sc, res, axis, scale) {
+ iSlider.setStyle(el, 'transform', iSlider.getStyle(el, 'transform').replace(regex, function (sc, res, axis, scale) {
sc = {};
if (axis) {
if (scale === '1.001') {
@@ -1812,7 +1885,7 @@
sc[this.axis] /= 1.001;
return 'scale(' + sc.X + ', ' + sc.Y + ')';
}
- }.bind(this));
+ }.bind(this)));
};
diff --git a/src/style/iSlider.css b/src/style/iSlider.css
index abc85222..4235cc1e 100755
--- a/src/style/iSlider.css
+++ b/src/style/iSlider.css
@@ -28,9 +28,13 @@
height: 100%;
list-style: none;
overflow: hidden;
+ display: -moz-box;
display: -webkit-box;
+ display: box;
+ -moz-box-pack: center;
-webkit-box-pack: center;
box-pack: center;
+ -moz-box-align: center;
-webkit-box-align: center;
box-align: center;
}
@@ -88,11 +92,17 @@
.islider-btn-outer.left > .islider-btn-inner {
-webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.islider-btn-outer.right > .islider-btn-inner {
-webkit-transform: rotate(135deg);
+ -moz-transform: rotate(135deg);
+ -ms-transform: rotate(135deg);
+ -o-transform: rotate(135deg);
transform: rotate(135deg);
}