Merge pull request #8 from fritz-c/flexible-toolbar-2

Flexible toolbar

Author: fritz-c

dist/react-image-lightbox.js

@@ -1147,6 +1147,7 @@ module.exports = _radium2['default'].call(undefined, ReactImageLightbox);
 'use strict';
 
 var Radium = (typeof window !== "undefined" ? window['Radium'] : typeof global !== "undefined" ? global['Radium'] : null);
+var Util = require('./Util');
 var toolbarHeight = '50px';
 
 var closeWindowKeyframes = Radium.keyframes({
@@ -1266,25 +1267,25 @@ var styles = {
         left: 0,
         top: 0,
         right: 0,
-        height: toolbarHeight
+        height: toolbarHeight,
+        display: 'flex',
+        justifyContent: 'space-between'
     },
     toolbarSide: {
-        lineHeight: toolbarHeight,
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        margin: 0,
-        maxWidth: '48%'
+        height: toolbarHeight,
+        margin: 0
     },
     toolbarLeftSide: {
         paddingLeft: '20px',
         paddingRight: 0,
-        left: 0
+        flex: '0 1 auto',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
     },
     toolbarRightSide: {
         paddingLeft: 0,
         paddingRight: '20px',
-        right: 0
+        flex: '0 0 auto'
     },
     toolbarItem: {
         display: 'inline-block',
@@ -1340,8 +1341,58 @@ var styles = {
     }
 };
 
+// Use fallback styles for IE users
+if (Util.isIE()) {
+    styles.toolbar = {
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        height: toolbarHeight
+    };
+
+    styles.toolbarSide = {
+        lineHeight: toolbarHeight,
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        margin: 0,
+        maxWidth: '48%'
+    };
+
+    styles.toolbarLeftSide = {
+        paddingLeft: '20px',
+        paddingRight: 0,
+        left: 0
+    };
+
+    styles.toolbarRightSide = {
+        paddingLeft: 0,
+        paddingRight: '20px',
+        right: 0
+    };
+}
+
 module.exports = styles;
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./Util":5}],5:[function(require,module,exports){
+/**
+ * Checks if the user is using Internet Explorer
+ *
+ * @return {boolean} isIE - True if the user is on IE
+ */
+'use strict';
+
+function isIE() {
+    var ua = window.navigator.userAgent;
+    return ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1;
+}
+
+module.exports = {
+    isIE: isIE
+};
+
 },{}]},{},[3])(3)
 });

dist/react-image-lightbox.min.js

@@ -0,0 +1,15 @@
+/**
+ * Checks if the user is using Internet Explorer
+ *
+ * @return {boolean} isIE - True if the user is on IE
+ */
+'use strict';
+
+function isIE() {
+    var ua = window.navigator.userAgent;
+    return ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1;
+}
+
+module.exports = {
+    isIE: isIE
+};

lib/Util.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var Radium = require('radium');
+var Util = require('./Util');
 var toolbarHeight = '50px';
 
 var closeWindowKeyframes = Radium.keyframes({
@@ -120,25 +121,25 @@ var styles = {
         left: 0,
         top: 0,
         right: 0,
-        height: toolbarHeight
+        height: toolbarHeight,
+        display: 'flex',
+        justifyContent: 'space-between'
     },
     toolbarSide: {
-        lineHeight: toolbarHeight,
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        margin: 0,
-        maxWidth: '48%'
+        height: toolbarHeight,
+        margin: 0
     },
     toolbarLeftSide: {
         paddingLeft: '20px',
         paddingRight: 0,
-        left: 0
+        flex: '0 1 auto',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
     },
     toolbarRightSide: {
         paddingLeft: 0,
         paddingRight: '20px',
-        right: 0
+        flex: '0 0 auto'
     },
     toolbarItem: {
         display: 'inline-block',
@@ -194,4 +195,37 @@ var styles = {
     }
 };
 
+// Use fallback styles for IE users
+if (Util.isIE()) {
+    styles.toolbar = {
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        height: toolbarHeight
+    };
+
+    styles.toolbarSide = {
+        lineHeight: toolbarHeight,
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        margin: 0,
+        maxWidth: '48%'
+    };
+
+    styles.toolbarLeftSide = {
+        paddingLeft: '20px',
+        paddingRight: 0,
+        left: 0
+    };
+
+    styles.toolbarRightSide = {
+        paddingLeft: 0,
+        paddingRight: '20px',
+        right: 0
+    };
+}
+
 module.exports = styles;

lib/styles.js

@@ -1,6 +1,6 @@
 {
   "name": "react-image-lightbox",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A lightbox component for React.js",
   "scripts": {
     "start": "node_modules/.bin/gulp dev"
@@ -40,4 +40,4 @@
     "react-dom": "global:ReactDOM",
     "radium": "global:Radium"
   }
-}
+}

package.json

@@ -1,5 +1,5 @@
 /*
- * react-image-lightbox 2.0.0
+ * react-image-lightbox 2.2.0
  * Copyright 2016 Chris Fritz All rights reserved.
  * @license Open source under the MIT License
  */

src/ReactImageLightbox.js

@@ -1,4 +1,5 @@
 const Radium = require('radium');
+const Util = require('./Util');
 const toolbarHeight = '50px';
 
 const closeWindowKeyframes = Radium.keyframes({
@@ -198,4 +199,37 @@ const styles = {
     },
 };
 
+// Use fallback styles for browsers without flexbox support
+if (Util.getIEVersion() < 10) {
+    styles.toolbar = {
+        backgroundColor : 'rgba(0, 0, 0, 0.5)',
+        position        : 'absolute',
+        left            : 0,
+        top             : 0,
+        right           : 0,
+        height          : toolbarHeight,
+    };
+
+    styles.toolbarSide = {
+        lineHeight : toolbarHeight,
+        position   : 'absolute',
+        top        : 0,
+        bottom     : 0,
+        margin     : 0,
+        maxWidth   : '48%',
+    };
+
+    styles.toolbarLeftSide = {
+        paddingLeft  : '20px',
+        paddingRight : 0,
+        left         : 0,
+    };
+
+    styles.toolbarRightSide = {
+        paddingLeft  : 0,
+        paddingRight : '20px',
+        right        : 0,
+    };
+}
+
 module.exports = styles;

src/Styles.js

@@ -0,0 +1,13 @@
+/**
+ * Get the version of Internet Explorer in use, or undefined
+ *
+ * @return {?number} ieVersion - IE version as an integer, or undefined if not IE
+ */
+function getIEVersion() {
+    var match = navigator.userAgent.match(/(?:MSIE |Trident\/.*; rv:)(\d+)/);
+    return match ? parseInt(match[1]) : undefined;
+}
+
+module.exports = {
+    getIEVersion: getIEVersion,
+};