Bug fix fullscreen method (#228)

Gruntfile.js

@@ -21,6 +21,7 @@ module.exports = function(grunt) {
     ' *  babel-plugin-transform-object-assign - https://www.npmjs.com/package/babel-plugin-transform-object-assign\n' +
     ' *  es6-promise - https://www.npmjs.com/package/es6-promise\n' +
     ' *  custom-event-polyfill - https://www.npmjs.com/package/custom-event-polyfill\n' +
+    ' *  fullscreen-api-polyfill - https://www.npmjs.com/package/fullscreen-api-polyfill\n' +
     ' *\n' +
     '<%= License %>',
 
@@ -73,6 +74,7 @@ module.exports = function(grunt) {
           './node_modules/babel-polyfill/dist/polyfill.min.js',
           './node_modules/custom-event-polyfill/custom-event-polyfill.js',
           './node_modules/es6-promise/dist/es6-promise.auto.min.js',
+          './node_modules/fullscreen-api-polyfill/fullscreen-api-polyfill.min.js',
         ],
         dest: 'dist/built/custombox.legacy.min.js',
       },

package.json

@@ -13,11 +13,6 @@
   "devDependencies": {
     "@types/core-js": "^0.9.41",
     "@types/jasmine": "^2.5.38",
-    "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-polyfill": "^6.23.0",
-    "babel-preset-es2015": "^6.18.0",
-    "custom-event-polyfill": "^0.3.0",
-    "es6-promise": "^4.0.5",
     "grunt": "^1.0.1",
     "grunt-autoprefixer": "^3.0.4",
     "grunt-babel": "^6.0.0",
@@ -68,5 +63,13 @@
     "test": "npm run lint && karma start karma.conf.js --single-run",
     "tslint": "tslint",
     "watch:test": "karma start karma.conf.js"
+  },
+  "dependencies": {
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "custom-event-polyfill": "^0.3.0",
+    "es6-promise": "^4.1.0",
+    "fullscreen-api-polyfill": "^1.1.2"
   }
 }

src/custombox.ts

@@ -693,6 +693,17 @@ namespace Custombox {
     }
 
     private listeners(): void {
+      const AFM = window.getComputedStyle(this.content.element).getPropertyValue('animation-fill-mode');
+
+      document.addEventListener('fullscreenchange', () => {
+        const style = window.getComputedStyle(this.content.element);
+        if (style.getPropertyValue('animation-fill-mode') === AFM) {
+          this.content.element.style.animationFillMode = 'backwards';
+        } else {
+          this.content.element.style.animationFillMode = AFM;
+        }
+      }, true);
+
       if (this.options.content.close) {
         document.addEventListener('keydown', this.action, true);
       }