Update toggle-fullscreen for Promise

Author: Masashi Hirano

Diff for: demo/slideshow.js

@@ -283,7 +283,7 @@ var SlideShow = function (_React$Component) {
     _this.onChangeFullScreen = function () {
       var element = document.getElementsByClassName('slideshow-wrapper')[0];
       (0, _toggleFullscreen2.default)(element).then(function () {
-        return (0, _toggleFullscreen.fullScreenChange)(function () {
+        return (0, _toggleFullscreen.fullscreenChange)(function () {
           var isFullScreen = (0, _toggleFullscreen.isFullscreen)();
           _this.setState({ isFullScreen: isFullScreen });
           if (isFullScreen) {
@@ -511,6 +511,11 @@ var SlideShow = function (_React$Component) {
         src += '?' + this.state.timestamp;
       }
 
+      var paging = void 0;
+      if (this.props.images) {
+        paging = this.state.index + 1 + ' / ' + this.props.images.length;
+      }
+
       return _react2.default.createElement(
         'div',
         { style: this.style, className: 'slideshow' },
@@ -573,7 +578,7 @@ var SlideShow = function (_React$Component) {
               _react2.default.createElement(
                 'span',
                 { style: _Styles.Styles.PAGE_VIEW },
-                this.props.images ? this.state.index + 1 + ' / ' + this.props.images.length : null
+                paging
               ),
               _react2.default.createElement(
                 'button',

Diff for: demo/vendor.dll.js

@@ -23566,7 +23566,7 @@ __webpack_require__(83).polyfill();
 function toggleFullscreen(element, callback) {
   if (callback && typeof callback === 'function') {
     if (!isFullscreen()) {
-      fullScreenChange(function () {
+      fullscreenChange(function() {
         if (isFullscreen()) {
           callback(true);
         } else {
@@ -23580,7 +23580,7 @@ function toggleFullscreen(element, callback) {
     }
     return null;
   }
-  return new Promise(function (resolve, reject) {
+  return new Promise(function(resolve, reject) {
     if (!isFullscreen()) {
       enterFullscreen(element);
     } else {
@@ -23626,7 +23626,7 @@ function toggleFullscreen(element, callback) {
 }
 
 /**
- * check whether fullscreen or not.
+ * check if fullscreen or not.
  * @returns {boolean}
  */
 function isFullscreen() {
@@ -23642,11 +23642,11 @@ function isFullscreen() {
 }
 
 /**
- * injection function to onfullscreenchange.
+ * add eventListener 'fullscreenchange'
  * @param callback
  * @return {Promise}
  */
-function fullScreenChange(callback) {
+function fullscreenChange(callback) {
   return new Promise(function(resolve, reject) {
     if (document.fullscreenEnabled) {
       document.addEventListener('fullscreenchange', callback);
@@ -23665,7 +23665,7 @@ function fullScreenChange(callback) {
 }
 
 module.exports = toggleFullscreen;
-module.exports.fullScreenChange = fullScreenChange;
+module.exports.fullscreenChange = fullscreenChange;
 module.exports.isFullscreen = isFullscreen;
 
 /***/ }),

Diff for: lib/SlideShow.js

@@ -1,6 +1,6 @@
 {
   "name": "react-slideshow-ui",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "author": "Masashi Hirano (https://github.com/shisama)",
   "license": "MIT",
   "description": "React UI Component for slideshow like SlideShare or SpeakerDeck.",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "react": "^15.6.1",
-    "toggle-fullscreen": "^0.2.3"
+    "toggle-fullscreen": "^0.3.1"
   },
   "devDependencies": {
     "ava": "^0.21.0",
@@ -57,7 +57,6 @@
     "babel-preset-react": "^6.24.1",
     "browser-env": "^3.1.0",
     "enzyme": "^2.8.2",
-    "es6-promise": "^4.1.1",
     "eslint": "^4.5.0",
     "eslint-closure": "^0.0.1",
     "eslint-config-google": "^0.9.1",

Diff for: package.json

@@ -3,12 +3,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Styles as styles} from './Styles';
 import toggleFullscreen, {
-  fullScreenChange,
+  fullscreenChange,
   isFullscreen,
 } from 'toggle-fullscreen';
 
-require('es6-promise').polyfill();
-
 /**
  * @typedef {Object} Props
  * @property {Object} style
@@ -185,7 +183,7 @@ export default class SlideShow extends React.Component {
       'slideshow-wrapper',
     )[0];
     toggleFullscreen(element).then(() => {
-      return fullScreenChange(() => {
+      return fullscreenChange(() => {
         const isFullScreen = isFullscreen();
         this.setState({isFullScreen: isFullScreen});
         if (isFullScreen) {
@@ -272,6 +270,11 @@ export default class SlideShow extends React.Component {
       src += `?${this.state.timestamp}`;
     }
 
+    let paging;
+    if (this.props.images) {
+      paging = `${this.state.index + 1} / ${this.props.images.length}`;
+    }
+
     return (
       <div style={this.style} className="slideshow">
         <div className="slideshow-wrapper" style={{margin: 'auto'}}>
@@ -316,11 +319,7 @@ export default class SlideShow extends React.Component {
               >
                 {this.props.prevIcon}
               </button>
-              <span style={styles.PAGE_VIEW}>
-                {this.props.images
-                  ? `${this.state.index + 1} / ${this.props.images.length}`
-                  : null}
-              </span>
+              <span style={styles.PAGE_VIEW}>{paging}</span>
               <button
                 className={'nextButton'}
                 onClick={this.onClickNextButton}