Merge pull request #5 from cycdpo/issue/4

fix "Promise Is Undefined" in IE issue#4
cycjimmy · May 28, 2018 · 24d17ce · 24d17ce
2 parents 599d890 + e0d8b86
commit 24d17ce
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 19 deletions.
diff --git a/build/SwiperAnimation.js b/build/SwiperAnimation.js
@@ -92,34 +92,57 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 var sHidden = 'visibility: hidden;';
 
+var PROMISE_POLYFILL_URL = 'https://cdn.jsdelivr.net/npm/promise-polyfill@7/dist/polyfill.min.js';
+
 var SwiperAnimation = function () {
   function SwiperAnimation() {
     _classCallCheck(this, SwiperAnimation);
 
     this.swiper = null;
     this.allBoxes = [];
+
+    this.appendedPromise = false;
+    this.isPromiseReady = false;
   }
 
   SwiperAnimation.prototype.init = function init(swiper) {
+    var _this = this;
+
     if (!this.swiper) {
       this.swiper = swiper;
     }
+
+    if (this.isPromiseReady || window.Promise) {
+      this.isPromiseReady = true;
+      return this;
+    }
+
+    // fix "Promise Is Undefined" in IE
+    this._initPromisePolyfill(function () {
+      _this.isPromiseReady = true;
+    });
     return this;
   };
 
   /**
    * run animations
-   * @return {Promise.<TResult>}
+   * @return {*}
    */
   SwiperAnimation.prototype.animate = function animate() {
-    var _this = this;
+    var _this2 = this;
+
+    if (!this.isPromiseReady) {
+      return setTimeout(function () {
+        return _this2.animate();
+      }, 5e2);
+    }
 
     return Promise.resolve().then(function () {
-      return _this._cache();
+      return _this2._cache();
     }).then(function () {
-      return _this._clear();
+      return _this2._clear();
     }).then(function () {
-      var activeBoxes = Object(awesome_js_funcs_typeConversion_nodeListToArray__WEBPACK_IMPORTED_MODULE_0__["default"])(_this.swiper.slides[_this.swiper.realIndex].querySelectorAll('[data-swiper-animation]'));
+      var activeBoxes = Object(awesome_js_funcs_typeConversion_nodeListToArray__WEBPACK_IMPORTED_MODULE_0__["default"])(_this2.swiper.slides[_this2.swiper.realIndex].querySelectorAll('[data-swiper-animation]'));
 
       var runAnimations = activeBoxes.map(function (el) {
         return new Promise(function (resolve) {
@@ -182,7 +205,7 @@ var SwiperAnimation = function () {
    * @private
    */
   SwiperAnimation.prototype._cache = function _cache() {
-    var _this2 = this;
+    var _this3 = this;
 
     // has cached
     if (this.allBoxes.length) {
@@ -193,13 +216,13 @@ var SwiperAnimation = function () {
 
     // start cache
     return new Promise(function (resolve) {
-      _this2._initAllBoxes();
+      _this3._initAllBoxes();
       setTimeout(function () {
         return resolve();
       }, 0);
     }).then(function () {
 
-      var _runCacheTasks = _this2.allBoxes.map(function (el) {
+      var _runCacheTasks = _this3.allBoxes.map(function (el) {
         return new Promise(function (resolve) {
           if (el.attributes['style']) {
             el.styleCache = sHidden + el.style.cssText;
@@ -239,6 +262,29 @@ var SwiperAnimation = function () {
     }
   };
 
+  /**
+   * init PromisePolyfill
+   * @param callback
+   * @private
+   */
+  SwiperAnimation.prototype._initPromisePolyfill = function _initPromisePolyfill() {
+    var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
+
+    // just add promise-polyfill script once
+    if (this.appendedPromise) {
+      return;
+    }
+
+    var oScript = document.createElement("script");
+    oScript.type = "text/javascript";
+    oScript.onload = function () {
+      return callback();
+    };
+    oScript.src = PROMISE_POLYFILL_URL;
+    document.querySelector('head').appendChild(oScript);
+    this.appendedPromise = true;
+  };
+
   return SwiperAnimation;
 }();
 

diff --git a/build/SwiperAnimation.min.js b/build/SwiperAnimation.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "swiper-animation",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Easier way to run animations on swiper.",
   "main": "build/SwiperAnimation.min.js",
   "scripts": {
@@ -29,26 +29,26 @@
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
-    "babel-jest": "^22.4.3",
+    "babel-jest": "^23.0.1",
     "babel-loader": "^7.1.4",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "browser-sync": "^2.24.4",
     "browser-sync-webpack-plugin": "^2.2.2",
     "clean-webpack-plugin": "^0.1.19",
-    "cross-env": "^5.1.4",
+    "cross-env": "^5.1.6",
     "gh-pages": "^1.1.0",
     "gulp": "^3.9.1",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^22.4.3",
+    "jest": "^23.0.1",
     "pug": "^2.0.3",
     "pug-loader": "^2.4.0",
     "regenerator-runtime": "^0.11.1",
-    "swiper": "^4.2.6",
-    "uglify-js": "^3.3.23",
+    "swiper": "^4.3.0",
+    "uglify-js": "^3.3.27",
     "uglifyjs-webpack-plugin": "^1.2.5",
-    "webpack": "^4.6.0",
-    "webpack-cli": "^2.1.2"
+    "webpack": "^4.9.1",
+    "webpack-cli": "^2.1.4"
   },
   "engines": {
     "node": ">=6"

diff --git a/src/index.js b/src/index.js
@@ -4,24 +4,43 @@ let
   sHidden = 'visibility: hidden;'
 ;
 
+const PROMISE_POLYFILL_URL = 'https://cdn.jsdelivr.net/npm/promise-polyfill@7/dist/polyfill.min.js';
+
 export default class SwiperAnimation {
   constructor() {
     this.swiper = null;
     this.allBoxes = [];
+
+    this.appendedPromise = false;
+    this.isPromiseReady = false;
   };
 
   init(swiper) {
     if (!this.swiper) {
       this.swiper = swiper;
     }
+
+    if (this.isPromiseReady || window.Promise) {
+      this.isPromiseReady = true;
+      return this;
+    }
+
+    // fix "Promise Is Undefined" in IE
+    this._initPromisePolyfill(() => {
+      this.isPromiseReady = true;
+    });
     return this;
   };
 
   /**
    * run animations
-   * @return {Promise.<TResult>}
+   * @return {*}
    */
   animate() {
+    if (!this.isPromiseReady) {
+      return setTimeout(() => this.animate(), 5e2);
+    }
+
     return Promise.resolve()
       .then(() => this._cache())
       .then(() => this._clear())
@@ -144,4 +163,24 @@ export default class SwiperAnimation {
       this.allBoxes = nodeListToArray(swiperWrapper.querySelectorAll('[data-swiper-animation]'));
     }
   };
+
+  /**
+   * init PromisePolyfill
+   * @param callback
+   * @private
+   */
+  _initPromisePolyfill(callback = () => {
+  }) {
+    // just add promise-polyfill script once
+    if (this.appendedPromise) {
+      return;
+    }
+
+    let oScript = document.createElement("script");
+    oScript.type = "text/javascript";
+    oScript.onload = () => callback();
+    oScript.src = PROMISE_POLYFILL_URL;
+    document.querySelector('head').appendChild(oScript);
+    this.appendedPromise = true;
+  };
 };