Merge pull request #14 from designjockey/close-icon-color

Close Icon Color: Changes color of X icon based on bg color

Author: designjockey

Diff for: lightbox.js

@@ -1,11 +1,38 @@
 import $ from 'jquery';
+import tinycolor from 'tinycolor2';
 import 'style!./sass/lightbox.scss';
 
 var bgColor,
     opacity,
     $blocking = $('<div class="js-blocking" id="lightbox-blocking"></div>'),
     $body = $(document.body),
-    template = '<div class="js-lightbox-wrap" id="lightbox-wrap"> <div class="js-lightbox-inner-wrap" id="lightbox-inner-wrap"> <div class="js-img-wrap" id="lightbox-img-wrap"> <div class="control prev js-control js-prev"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="60" height="60" viewBox="0 0 60 60" xml:space="preserve"><circle class="lightbox-icon-bg" cx="30" cy="30" r="30"/><path class="lightbox-icon-arrow" d="M28.6 30l7.9-7.9c0.5-0.5 0.7-1.1 0.7-1.7s-0.2-1.2-0.7-1.7c-0.9-0.9-2.5-0.9-3.4 0l-9.6 9.6c-0.5 0.5-0.7 1.1-0.7 1.7s0.2 1.2 0.7 1.7l9.6 9.6c0.9 0.9 2.5 0.9 3.4 0 0.5-0.5 0.7-1.1 0.7-1.7 0-0.6-0.2-1.2-0.7-1.7L28.6 30z"/></svg> </div> <div class="control next js-control js-next"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="60" height="60" viewBox="0 0 60 60" xml:space="preserve"><circle class="lightbox-icon-bg" cx="30" cy="30" r="30"/><path class="lightbox-icon-arrow" d="M31.4 30l-7.9 7.9c-0.5 0.5-0.7 1.1-0.7 1.7 0 0.6 0.2 1.2 0.7 1.7 0.9 0.9 2.5 0.9 3.4 0l9.6-9.6c0.5-0.5 0.7-1.1 0.7-1.7s-0.2-1.2-0.7-1.7l-9.6-9.6c-0.9-0.9-2.5-0.9-3.4 0 -0.5 0.5-0.7 1.1-0.7 1.7 0 0.6 0.2 1.2 0.7 1.7L31.4 30z"/></svg> </div> <div class="control close js-control js-close"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 26 26" preserveAspectRatio="xMidYMid meet"> <rect x="-3.4" y="11" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13 -5.3848)" class="st0" width="32.7" height="4" /> <rect x="-3.4" y="11" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.3848 13)" class="st0" width="32.7" height="4" /> </svg> </div> <img/></div> </div> </div>',
+    $template = $(`
+      <div class="js-lightbox-wrap" id="lightbox-wrap">
+        <div class="js-lightbox-inner-wrap" id="lightbox-inner-wrap">
+          <div class="js-img-wrap" id="lightbox-img-wrap">
+            <div class="control prev js-control js-prev">
+              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="60" height="60" viewBox="0 0 60 60" xml:space="preserve">
+                <circle class="lightbox-icon-bg" cx="30" cy="30" r="30"/>
+                <path class="lightbox-icon-arrow" d="M28.6 30l7.9-7.9c0.5-0.5 0.7-1.1 0.7-1.7s-0.2-1.2-0.7-1.7c-0.9-0.9-2.5-0.9-3.4 0l-9.6 9.6c-0.5 0.5-0.7 1.1-0.7 1.7s0.2 1.2 0.7 1.7l9.6 9.6c0.9 0.9 2.5 0.9 3.4 0 0.5-0.5 0.7-1.1 0.7-1.7 0-0.6-0.2-1.2-0.7-1.7L28.6 30z"/>
+              </svg>
+            </div>
+            <div class="control next js-control js-next">
+              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="60" height="60" viewBox="0 0 60 60" xml:space="preserve">
+                <circle class="lightbox-icon-bg" cx="30" cy="30" r="30"/>
+                <path class="lightbox-icon-arrow" d="M31.4 30l-7.9 7.9c-0.5 0.5-0.7 1.1-0.7 1.7 0 0.6 0.2 1.2 0.7 1.7 0.9 0.9 2.5 0.9 3.4 0l9.6-9.6c0.5-0.5 0.7-1.1 0.7-1.7s-0.2-1.2-0.7-1.7l-9.6-9.6c-0.9-0.9-2.5-0.9-3.4 0 -0.5 0.5-0.7 1.1-0.7 1.7 0 0.6 0.2 1.2 0.7 1.7L31.4 30z"/>
+              </svg>
+            </div>
+            <div class="control close js-control js-close">
+              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 26 26" preserveAspectRatio="xMidYMid meet">
+                <rect x="-3.4" y="11" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13 -5.3848)" class="st0" width="32.7" height="4" />
+                <rect x="-3.4" y="11" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.3848 13)" class="st0" width="32.7" height="4" />
+              </svg>
+            </div>
+            <img/>
+          </div>
+        </div>
+      </div>
+    `),
     images = [],
     active = false,
     loading = false,
@@ -17,7 +44,7 @@ var bgColor,
 var LightboxImage = function(src, id) {
   this.src = src;
   this.id = id;
-  this.$view = $(template).hide();
+  this.$view = $template.hide();
 
   var self = this;
 
@@ -146,6 +173,13 @@ function bind() {
   });
 }
 
+function _setCloseIconColor(bgColor) {
+  var tinyBgColor = tinycolor(bgColor);
+  var closeIconColor = tinyBgColor.isLight() ? '#000' : '#FFF';
+
+  $template.find('.js-close svg').attr('fill', closeIconColor);
+}
+
 function init(options) {
   var defaults = {
     context: document.body,
@@ -158,6 +192,8 @@ function init(options) {
   bgColor = config.bgColor;
   opacity = config.opacity;
 
+  _setCloseIconColor(bgColor);
+
   $context.find('.js-lightbox').each(function(i, el) {
     var $img = $(el);
     $img.data('img-id', i).addClass('lightbox-link');
@@ -169,7 +205,7 @@ function init(options) {
     images[$(this).data('img-id')].render();
   });
 
-if (images.length === 1) {
+  if (images.length === 1) {
     single = true;
   }
 }

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightbox",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Image lightbox",
   "main": "lightbox.js",
   "scripts": {
@@ -17,6 +17,7 @@
   },
   "homepage": "https://github.com/behance/lightbox#readme",
   "dependencies": {
-    "jquery": "~2.1.1"
+    "jquery": "~2.1.1",
+    "tinycolor2": "^1.3.0"
   }
 }