Skip to content

Commit

Permalink
feat(theme): update Lightense Images
Browse files Browse the repository at this point in the history
  • Loading branch information
@sparanoid
sparanoid committed Dec 25, 2016
1 parent 419f5cd commit 9cdf6d1
Showing 1 changed file with 31 additions and 32 deletions.
63 changes: 31 additions & 32 deletions _app/assets/themes/curtana/_js/lightense.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! lightense-images v1.0.1 | © Tunghsiao Liu | MIT */
/*! lightense-images v1.0.2 | © Tunghsiao Liu | MIT */
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
Expand Down Expand Up @@ -62,7 +62,7 @@ return /******/ (function(modules) { // webpackBootstrap
var Lightense = function () {
'use strict';

// save some bytes
// Save some bytes

var w = window,
d = document;
Expand All @@ -77,14 +77,14 @@ return /******/ (function(modules) { // webpackBootstrap
zIndex: 2147483647
};

// init user options
// Init user options
var config = {};

function startTracking(passedElements) {
// if passed an array of elements, assign tracking to all
// If passed an array of elements, assign tracking to all
var len = passedElements.length;
if (len) {
// loop and assign
// Loop and assign
for (var i = 0; i < len; i++) {
track(passedElements[i]);
}
Expand All @@ -94,26 +94,25 @@ return /******/ (function(modules) { // webpackBootstrap
}

function track(element) {
var imageSource = element.getAttribute('data-image') || element.src;
if (imageSource) {
if (element.src) {
element.classList.add('lightense-target');
element.addEventListener('click', function (event) {
if (config.keyboard) {
// if Command (macOS) or Ctrl (Windows) key pressed, stop processing
// If Command (macOS) or Ctrl (Windows) key pressed, stop processing
// and open the image in a new tab
if (event.metaKey || event.ctrlKey) {
return w.open(imageSource, '_blank');
return w.open(element.src, '_blank');
}
}

// init instance
// Init instance
init(this);
}, false);
}
}

function createStyle() {
var css = '\n .lightense-backdrop {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: ' + (config.zIndex - 1) + ';\n padding: 0;\n margin: 0;\n transition: opacity ' + config.time + 'ms ease;\n cursor: zoom-out;\n opacity: 0;\n background-color: rgba(255, 255, 255, .98);\n visibility: hidden;\n }\n\n @supports (-webkit-backdrop-filter: blur(30px)) {\n .lightense-backdrop {\n background-color: rgba(255, 255, 255, .6);\n -webkit-backdrop-filter: blur(30px);\n backdrop-filter: blur(30px);\n }\n }\n\n .lightense-wrap {\n position: relative;\n transition: transform ' + config.time + 'ms ' + config.cubicBezier + ';\n z-index: ' + config.zIndex + ';\n -webkit-user-select: none;\n user-select: none;\n }\n\n .lightense-target {\n cursor: zoom-in;\n transition: transform ' + config.time + 'ms ' + config.cubicBezier + ';\n }\n\n .lightense-open {\n cursor: zoom-out;\n }\n\n .lightense-transitioning {\n pointer-events: none;\n }\n ';
var css = '\n .lightense-backdrop {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n position: fixed;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: ' + (config.zIndex - 1) + ';\n padding: 0;\n margin: 0;\n transition: opacity ' + config.time + 'ms ease;\n cursor: zoom-out;\n opacity: 0;\n background-color: rgba(255, 255, 255, .98);\n visibility: hidden;\n }\n\n @supports (-webkit-backdrop-filter: blur(30px)) {\n .lightense-backdrop {\n background-color: rgba(255, 255, 255, .6);\n -webkit-backdrop-filter: blur(30px);\n backdrop-filter: blur(30px);\n }\n }\n\n .lightense-wrap {\n position: relative;\n transition: transform ' + config.time + 'ms ' + config.cubicBezier + ';\n z-index: ' + config.zIndex + ';\n pointer-events: none;\n }\n\n .lightense-target {\n cursor: zoom-in;\n transition: transform ' + config.time + 'ms ' + config.cubicBezier + ';\n pointer-events: auto;\n }\n\n .lightense-open {\n cursor: zoom-out;\n }\n\n .lightense-transitioning {\n pointer-events: none;\n }\n ';

var head = d.head || d.getElementsByTagName('head')[0];
var style = d.createElement('style');
Expand All @@ -132,11 +131,11 @@ return /******/ (function(modules) { // webpackBootstrap
}

function createTransform(img) {
// get original image size
// Get original image size
var naturalWidth = img.width;
var naturalHeight = img.height;

// calc zoom ratio
// Calc zoom ratio
var scrollTop = w.pageYOffset || d.documentElement.scrollTop || 0;
var scrollLeft = w.pageXOffset || d.documentElement.scrollLeft || 0;
var targetImage = config.target.getBoundingClientRect();
Expand All @@ -156,7 +155,7 @@ return /******/ (function(modules) { // webpackBootstrap
config.scaleFactor = viewportWidthOffset / naturalWidth * maxScaleFactor;
}

// calc animation
// Calc animation
var viewportX = viewportWidth / 2;
var viewportY = scrollTop + viewportHeight / 2;
var imageCenterX = targetImage.left + scrollLeft + targetImage.width / 2;
Expand All @@ -169,23 +168,23 @@ return /******/ (function(modules) { // webpackBootstrap
function createViewer() {
config.target.classList.add('lightense-open');

// create wrapper element
// Create wrapper element
config.wrap = d.createElement('div');
config.wrap.className = 'lightense-wrap';

// apply zoom ratio to target image
// Apply zoom ratio to target image
setTimeout(function () {
config.target.style.transform = 'scale(' + config.scaleFactor + ')';
}, 20);

// apply animation to outer wrapper
// Apply animation to outer wrapper
config.target.parentNode.insertBefore(config.wrap, config.target);
config.wrap.appendChild(config.target);
setTimeout(function () {
config.wrap.style.transform = 'translate3d(' + config.translateX + 'px, ' + config.translateY + 'px, 0)';
}, 20);

// show backdrop
// Show backdrop
if (config.background) config.container.style.backgroundColor = config.background;
config.container.style.visibility = 'visible';
setTimeout(function () {
Expand All @@ -198,15 +197,15 @@ return /******/ (function(modules) { // webpackBootstrap

config.target.classList.remove('lightense-open');

// remove transform styles
// Remove transform styles
config.wrap.style.transform = '';
config.target.style.transform = '';
config.target.classList.add('lightense-transitioning');

// fadeout backdrop
// Fadeout backdrop
config.container.style.opacity = '';

// hide backdrop and remove target element wrapper
// Hide backdrop and remove target element wrapper
setTimeout(function () {
config.container.style.visibility = '';
config.container.style.backgroundColor = '';
Expand All @@ -226,25 +225,25 @@ return /******/ (function(modules) { // webpackBootstrap
config.target = element;

// TODO: need refine
// if element already openned, close it
// If element already openned, close it
if (config.target.classList.contains('lightense-open')) {
return removeViewer();
}

// save current window scroll position for later use
// Save current window scroll position for later use
config.scrollY = w.scrollY;

// save target attributes
config.src = element.getAttribute('data-image') || element.src;
// Save target attributes
config.background = config.target.getAttribute('data-background') || false;
config.padding = config.target.getAttribute('data-padding') || defaults.padding;

var img = new Image();
img.onload = function () {
createTransform(this);
createViewer();
bindEvents();
};
img.src = config.src;
img.src = config.target.src;
}

function bindEvents() {
Expand All @@ -259,7 +258,7 @@ return /******/ (function(modules) { // webpackBootstrap
config.container.removeEventListener('click', removeViewer, false);
}

// exit on excape (esc) key pressed
// Exit on excape (esc) key pressed
function onKeyUp(event) {
event.preventDefault();
if (event.keyCode === 27) {
Expand All @@ -270,21 +269,21 @@ return /******/ (function(modules) { // webpackBootstrap
function main(elements) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

// parse arguments
// Parse arguments
if (!elements) {
throw 'You need to pass an element!';
}

// get user options
// Get user options
config = _extends({}, defaults, options);

// prepare stylesheets
// Prepare stylesheets
createStyle();

// prepare backdrop element
// Prepare backdrop element
createBackdrop();

// pass and prepare elements
// Pass and prepare elements
startTracking(elements);
}

Expand Down

0 comments on commit 9cdf6d1

Please sign in to comment.