feat: init release

.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "transform-es2015-template-literals"
+  ]
+}

.gitignore

@@ -0,0 +1,28 @@
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.orig
+*.log
+*.rej
+*.swo
+*.swp
+*.zip
+*.vi
+*~
+
+# OS or Editor folders
+.DS_Store
+._*
+Thumbs.db
+.cache
+.project
+.settings
+.tmproj
+*.esproj
+nbproject
+*.sublime-project
+*.sublime-workspace
+.idea
+
+# Folders to ignore
+node_modules

.jshintrc

@@ -0,0 +1,3 @@
+{
+  "esnext": true
+}

README.md

@@ -0,0 +1,28 @@
+# Lightense Images
+
+A dependency-free pure JavaScript image lightbox library less than 2 KB (not gzipped!). Inspired by [tholman/intense-images](https://github.com/tholman/intense-images). You can play with the code [live on CodePen](http://codepen.io/tholman/pen/mlDiK).
+
+This library is mainly used by [Almace Scaffolding](https://github.com/sparanoid/almace-scaffolding).
+
+-----
+
+## [Getting Started](http://sparanoid.com/work/lightense-images/)
+
+## Browser Support
+
+All modern browsers, it "should work" in Internet Explorer 10 and up as well.
+
+## Donate
+
+Wanna buy me a cup of coffee? [Great](http://sparanoid.com/donate/).
+
+## Author
+
+**Tunghsiao Liu**
+
+- Twitter: @[tunghsiao](http://twitter.com/tunghsiao)
+- GitHub: @[sparanoid](http://github.com/sparanoid)
+
+## License
+
+MIT

gulpfile.js

@@ -0,0 +1,22 @@
+const gulp = require('gulp');
+const babel = require('gulp-babel');
+const header = require('gulp-header');
+const rename = require('gulp-rename');
+const uglify = require('gulp-uglify');
+const pkg = require('./package.json');
+
+const src = 'lightense.es6';
+const dest = './';
+const banner = '/*! <%= pkg.name %> v<%= pkg.version %> | (c) <%= pkg.author %> | <%= pkg.license %> */\n';
+
+gulp.task('default', () =>
+  gulp.src(src)
+    .pipe(babel({ babelrc: true }))
+    .pipe(gulp.dest(dest))
+    .pipe(uglify())
+    .pipe(header(banner, { pkg : pkg }))
+    .pipe(rename({
+      suffix: '.min'
+    }))
+    .pipe(gulp.dest(dest))
+);

lightense.es6

@@ -0,0 +1,168 @@
+var Lightense = (function() {
+  'use strict';
+
+  var KEYCODE_ESC = 27;
+  var target;
+  var container;
+  var date;
+  var scrollY;
+
+  function startTracking (passedElements) {
+    // If passed an array of elements, assign tracking to all
+    var len = passedElements.length;
+    if (len) {
+      // Loop and assign
+      for (var i = 0; i < len; i++) {
+        track(passedElements[i]);
+      }
+    } else {
+      track(passedElements);
+    }
+  }
+
+  function track (element) {
+    // Element needs a src at minumun
+    if (element.getAttribute('data-image') || element.src) {
+      element.style.cursor = 'zoom-in';
+      element.addEventListener('click', function () {
+        init(this);
+      }, false);
+    }
+  }
+
+  // Create stylesheets
+  function createStyle () {
+    // Generate unique class name
+    date = new Date().getTime();
+    var css = `
+      .lightense-${date} {
+        display: flex;
+        box-sizing: border-box;
+        flex-direction: column;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        z-index: 2147483647;
+        padding: 2vw;
+        margin: 0;
+        transition: opacity 200ms ease;
+        cursor: zoom-out;
+        opacity: 0;
+        background-color: rgba(255, 255, 255, .98);
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
+
+      @supports (-webkit-backdrop-filter: blur(30px)) {
+        .lightense-${date} {
+          background-color: rgba(255, 255, 255, .6);
+          -webkit-backdrop-filter: blur(30px);
+          backdrop-filter: blur(30px);
+        }
+      }
+
+      .lightense-${date} img {
+        display: block;
+        width: auto;
+        height: auto;
+        max-width: 100%;
+        max-height: 100%;
+        min-width: 0;
+        min-height: 0;
+        padding: 0;
+        margin: 0 auto;
+      }
+    `;
+
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+    head.appendChild(style);
+  }
+
+  function createViewer (background) {
+    scrollY = window.scrollY;
+    container = document.createElement('div');
+    container.className = `lightense-wrap lightense-${date}`;
+    container.appendChild(target);
+    if (background) container.style.backgroundColor = background;
+
+    document.body.appendChild(container);
+    setTimeout(function () {
+      container.style.opacity = '1';
+    }, 10);
+  }
+
+  function removeViewer () {
+    unbindEvents();
+
+    container.style.opacity = '0';
+    setTimeout(function () {
+      document.body.removeChild(container);
+    }, 200);
+  }
+
+  function checkViewer () {
+    var scrollOffset = Math.abs(scrollY - window.scrollY);
+    if (scrollOffset >= 50) {
+      removeViewer();
+    }
+  }
+
+  function init (element) {
+    var imageSource = element.getAttribute('data-image') || element.src;
+    var background = element.getAttribute('data-background') || false;
+    var img = new Image();
+    img.onload = function () {
+      target = this;
+      createViewer(background);
+      bindEvents();
+    };
+    img.src = imageSource;
+  }
+
+  function bindEvents () {
+    window.addEventListener('keyup', onKeyUp, false);
+    window.addEventListener('scroll', checkViewer, false);
+    container.addEventListener('click', removeViewer, false);
+  }
+
+  function unbindEvents () {
+    window.removeEventListener('keyup', onKeyUp, false);
+    window.removeEventListener('scroll', checkViewer, false);
+    container.removeEventListener('click', removeViewer, false);
+  }
+
+  // Exit on excape key pressed
+  function onKeyUp (event) {
+    event.preventDefault();
+    if (event.keyCode === KEYCODE_ESC) {
+      removeViewer();
+    }
+  }
+
+  function main (element) {
+    // Parse arguments
+    if (!element) {
+      throw 'You need to pass an element!';
+    }
+
+    // Prepare stylesheets
+    createStyle();
+
+    // Pass and prepare elements
+    startTracking(element);
+  }
+
+  return main;
+})();

lightense.js

@@ -0,0 +1,124 @@
+var Lightense = function () {
+  'use strict';
+
+  var KEYCODE_ESC = 27;
+  var target;
+  var container;
+  var date;
+  var scrollY;
+
+  function startTracking(passedElements) {
+    // If passed an array of elements, assign tracking to all
+    var len = passedElements.length;
+    if (len) {
+      // Loop and assign
+      for (var i = 0; i < len; i++) {
+        track(passedElements[i]);
+      }
+    } else {
+      track(passedElements);
+    }
+  }
+
+  function track(element) {
+    // Element needs a src at minumun
+    if (element.getAttribute('data-image') || element.src) {
+      element.style.cursor = 'zoom-in';
+      element.addEventListener('click', function () {
+        init(this);
+      }, false);
+    }
+  }
+
+  // Create stylesheets
+  function createStyle() {
+    // Generate unique class name
+    date = new Date().getTime();
+    var css = '\n      .lightense-' + date + ' {\n        display: flex;\n        box-sizing: border-box;\n        flex-direction: column;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        position: fixed;\n        top: 0;\n        left: 0;\n        overflow: hidden;\n        z-index: 2147483647;\n        padding: 2vw;\n        margin: 0;\n        transition: opacity 200ms ease;\n        cursor: zoom-out;\n        opacity: 0;\n        background-color: rgba(255, 255, 255, .98);\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n      }\n\n      @supports (-webkit-backdrop-filter: blur(30px)) {\n        .lightense-' + date + ' {\n          background-color: rgba(255, 255, 255, .6);\n          -webkit-backdrop-filter: blur(30px);\n          backdrop-filter: blur(30px);\n        }\n      }\n\n      .lightense-' + date + ' img {\n        display: block;\n        width: auto;\n        height: auto;\n        max-width: 100%;\n        max-height: 100%;\n        min-width: 0;\n        min-height: 0;\n        padding: 0;\n        margin: 0 auto;\n      }\n    ';
+
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+    head.appendChild(style);
+  }
+
+  function createViewer(background) {
+    scrollY = window.scrollY;
+    container = document.createElement('div');
+    container.className = 'lightense-wrap lightense-' + date;
+    container.appendChild(target);
+    if (background) container.style.backgroundColor = background;
+
+    document.body.appendChild(container);
+    setTimeout(function () {
+      container.style.opacity = '1';
+    }, 10);
+  }
+
+  function removeViewer() {
+    unbindEvents();
+
+    container.style.opacity = '0';
+    setTimeout(function () {
+      document.body.removeChild(container);
+    }, 200);
+  }
+
+  function checkViewer() {
+    var scrollOffset = Math.abs(scrollY - window.scrollY);
+    if (scrollOffset >= 50) {
+      removeViewer();
+    }
+  }
+
+  function init(element) {
+    var imageSource = element.getAttribute('data-image') || element.src;
+    var background = element.getAttribute('data-background') || false;
+    var img = new Image();
+    img.onload = function () {
+      target = this;
+      createViewer(background);
+      bindEvents();
+    };
+    img.src = imageSource;
+  }
+
+  function bindEvents() {
+    window.addEventListener('keyup', onKeyUp, false);
+    window.addEventListener('scroll', checkViewer, false);
+    container.addEventListener('click', removeViewer, false);
+  }
+
+  function unbindEvents() {
+    window.removeEventListener('keyup', onKeyUp, false);
+    window.removeEventListener('scroll', checkViewer, false);
+    container.removeEventListener('click', removeViewer, false);
+  }
+
+  // Exit on excape key pressed
+  function onKeyUp(event) {
+    event.preventDefault();
+    if (event.keyCode === KEYCODE_ESC) {
+      removeViewer();
+    }
+  }
+
+  function main(element) {
+    // Parse arguments
+    if (!element) {
+      throw 'You need to pass an element!';
+    }
+
+    // Prepare stylesheets
+    createStyle();
+
+    // Pass and prepare elements
+    startTracking(element);
+  }
+
+  return main;
+}();