From d66189cb72aa1f4f556d7fdbe542666c3c0cdfcc Mon Sep 17 00:00:00 2001 From: Tunghsiao Liu Date: Thu, 10 Mar 2016 00:25:06 +0800 Subject: [PATCH] feat(scripts): replace `intense.js` with `lightense.js` MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGE: I've rewrote the `intense.js` from the ground up and rebranded it as `lightense.js`, a minimalism “lightbox” script less than 2 KB (not gzipped!). If you have used Intensed Images, you have to changes the plugin keyword in your front-matter fields from: ```yml plugin: intense ``` to: ```yml plugin: lightense ``` --- .../themes/curtana/includes/content.html | 8 +- .../themes/curtana/includes/footer.html | 20 +- .../note/2014-06-01-custom-html-markups.md | 16 +- _app/assets/themes/curtana/_js/app.js | 1 + _app/assets/themes/curtana/_js/intense.js | 374 ------------------ _app/assets/themes/curtana/_js/lightense.js | 163 ++++++++ _app/assets/themes/curtana/_less/plugins.less | 17 - 7 files changed, 179 insertions(+), 420 deletions(-) delete mode 100644 _app/assets/themes/curtana/_js/intense.js create mode 100644 _app/assets/themes/curtana/_js/lightense.js diff --git a/_app/_includes/themes/curtana/includes/content.html b/_app/_includes/themes/curtana/includes/content.html index facec43bf..96fa08959 100644 --- a/_app/_includes/themes/curtana/includes/content.html +++ b/_app/_includes/themes/curtana/includes/content.html @@ -1,10 +1,4 @@ -{% capture plugin_intense_class %} - {% if page.plugin == 'intense' %} - intense-wrap - {% endif %} -{% endcapture %} - -
+
{{ content }}
diff --git a/_app/_includes/themes/curtana/includes/footer.html b/_app/_includes/themes/curtana/includes/footer.html index 2a86c628d..9620fc09d 100644 --- a/_app/_includes/themes/curtana/includes/footer.html +++ b/_app/_includes/themes/curtana/includes/footer.html @@ -20,21 +20,13 @@ {% endif %} -{% if page.plugin == 'intense' %} - +{% if page.plugin == 'lightense' %} + {% endif %} diff --git a/_app/_posts/note/2014-06-01-custom-html-markups.md b/_app/_posts/note/2014-06-01-custom-html-markups.md index 9d14c9097..c1b708893 100644 --- a/_app/_posts/note/2014-06-01-custom-html-markups.md +++ b/_app/_posts/note/2014-06-01-custom-html-markups.md @@ -2,7 +2,7 @@ layout: post title: Custom HTML Markups category: note -plugin: intense +plugin: lightense tags: curtana --- @@ -70,23 +70,23 @@ Please note that you can't apply CSS classes in Markdown, so you have to use HTM ### Example -

Delicious Preview

+

Delicious Preview

-## [intense.js](http://github.com/tholman/intense-images) +## [lightense.js](https://github.com/sparanoid/lightense-images) -A simple library by [Tim Holman](https://github.com/tholman) to view large images up close using simple mouse interaction, and the full screen. +A simple library inspired by [Tim Holman](https://github.com/tholman) to view large images up close using simple mouse interaction, and the full screen. ### Usage Add the following setting to your post [front-matter field](http://jekyllrb.com/docs/frontmatter/): ``` -plugin: intense +plugin: lightense ``` Markdown markup: -``` +```markdown ![Image](http://sparanoid.com/photo.jpg) ``` @@ -98,11 +98,11 @@ Or simply use HTML:

``` -`intense.js` is activated globally by default, if you want to disable this effect for specific image, you can simply apply `.no-intense` CSS class to your ``: +`lightense.js` is activated globally by default, if you want to disable this effect for specific image, you can simply apply `.no-lightense` CSS class to your ``: ```html

- Image + Image

``` diff --git a/_app/assets/themes/curtana/_js/app.js b/_app/assets/themes/curtana/_js/app.js index e69de29bb..b710c2593 100644 --- a/_app/assets/themes/curtana/_js/app.js +++ b/_app/assets/themes/curtana/_js/app.js @@ -0,0 +1 @@ +// Theme script goes here diff --git a/_app/assets/themes/curtana/_js/intense.js b/_app/assets/themes/curtana/_js/intense.js deleted file mode 100644 index 439b3c1cb..000000000 --- a/_app/assets/themes/curtana/_js/intense.js +++ /dev/null @@ -1,374 +0,0 @@ -window.requestAnimFrame = (function(){ - return window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - function( callback ){ - window.setTimeout(callback, 1000 / 60); - }; -})(); - -window.cancelRequestAnimFrame = ( function() { - return window.cancelAnimationFrame || - window.webkitCancelRequestAnimationFrame || - window.mozCancelRequestAnimationFrame || - window.oCancelRequestAnimationFrame || - window.msCancelRequestAnimationFrame || - clearTimeout -} )(); - - -var Intense = (function() { - - 'use strict'; - - var KEYCODE_ESC = 27; - - // Track both the current and destination mouse coordinates - // Destination coordinates are non-eased actual mouse coordinates - var mouse = { xCurr:0, yCurr:0, xDest: 0, yDest: 0 }; - - var horizontalOrientation = true; - - // Holds the animation frame id. - var looper; - - // Current position of scrolly element - var lastPosition, currentPosition = 0; - - var sourceDimensions, target; - var targetDimensions = { w: 0, h: 0 }; - - var container; - var containerDimensions = { w: 0, h:0 }; - var overflowArea = { x: 0, y: 0 }; - - // Overflow variable before screen is locked. - var overflowValue; - - /* ------------------------- - /* UTILS - /* -------------------------*/ - - // Soft object augmentation - function extend( target, source ) { - - for ( var key in source ) - - if ( !( key in target ) ) - - target[ key ] = source[ key ]; - - return target; - } - - // Applys a dict of css properties to an element - function applyProperties( target, properties ) { - - for( var key in properties ) { - target.style[ key ] = properties[ key ]; - } - } - - // Returns whether target a vertical or horizontal fit in the page. - // As well as the right fitting width/height of the image. - function getFit( - - source ) { - - var heightRatio = window.innerHeight / source.h; - - if( (source.w * heightRatio) > window.innerWidth ) { - return { w: source.w * heightRatio, h: source.h * heightRatio, fit: true }; - } else { - var widthRatio = window.innerWidth / source.w; - return { w: source.w * widthRatio, h: source.h * widthRatio, fit: false }; - } - } - - /* ------------------------- - /* APP - /* -------------------------*/ - - function startTracking( passedElements ) { - - var i; - - // If passed an array of elements, assign tracking to all. - if ( passedElements.length ) { - - // Loop and assign - for( i = 0; i < passedElements.length; i++ ) { - track( passedElements[ i ] ); - } - - } else { - track( passedElements ); - } - } - - function track( element ) { - - // Element needs a src at minumun. - if( element.getAttribute( 'data-image') || element.src ) { - element.addEventListener( 'click', function() { - init( this ); - }, false ); - } - } - - function start() { - loop(); - } - - function stop() { - cancelRequestAnimFrame( looper ); - } - - function loop() { - looper = requestAnimFrame(loop); - positionTarget(); - } - - // Lock scroll on the document body. - function lockBody() { - - overflowValue = document.body.style.overflow; - document.body.style.overflow = 'hidden'; - document.body.classList.add('intense-open'); - } - - // Unlock scroll on the document body. - function unlockBody() { - document.body.style.overflow = overflowValue; - document.body.classList.remove('intense-open'); - } - - function createViewer( title, caption, background ) { - - /* - * Container - */ - var containerProperties = { - 'backgroundColor': background, - 'width': '100%', - 'height': '100%', - 'position': 'fixed', - 'top': '0px', - 'left': '0px', - 'overflow': 'hidden', - 'zIndex': '999999', - 'margin': '0px', - 'webkitTransition': 'opacity 150ms cubic-bezier( 0, 0, .26, 1 )', - 'MozTransition': 'opacity 150ms cubic-bezier( 0, 0, .26, 1 )', - 'transition': 'opacity 150ms cubic-bezier( 0, 0, .26, 1 )', - 'opacity': '0' - } - container = document.createElement( 'figure' ); - container.appendChild( target ); - applyProperties( container, containerProperties ); - - var imageProperties = { - 'cursor': 'zoom-out', - } - applyProperties( target, imageProperties ); - - /* - * Caption Container - */ - var captionContainerProperties = { - 'fontFamily': 'Georgia, Times, "Times New Roman", serif', - 'position': 'fixed', - 'bottom': '0px', - 'left': '0px', - 'padding': '20px', - 'color': '#fff', - 'wordSpacing': '0.2px', - 'webkitFontSmoothing': 'antialiased', - 'textShadow': '-1px 0px 1px rgba(0,0,0,0.4)' - } - var captionContainer = document.createElement( 'figcaption' ); - applyProperties( captionContainer, captionContainerProperties ); - - /* - * Caption Title - */ - if ( title ) { - var captionTitleProperties = { - 'margin': '0px', - 'padding': '0px', - 'fontWeight': 'normal', - 'fontSize': '40px', - 'letterSpacing': '0.5px', - 'lineHeight': '35px', - 'textAlign': 'left' - } - var captionTitle = document.createElement( 'h1' ); - applyProperties( captionTitle, captionTitleProperties ); - captionTitle.innerHTML = title; - captionContainer.appendChild( captionTitle ); - } - - if ( caption ) { - var captionTextProperties = { - 'margin': '0px', - 'padding': '0px', - 'fontWeight': 'normal', - 'fontSize': '20px', - 'letterSpacing': '0.1px', - 'maxWidth': '500px', - 'textAlign': 'left', - 'background': 'none', - 'marginTop': '5px' - } - var captionText = document.createElement( 'h2' ); - applyProperties( captionText, captionTextProperties ); - captionText.innerHTML = caption; - captionContainer.appendChild( captionText ); - } - - container.appendChild( captionContainer ); - - setDimensions(); - - mouse.xCurr = mouse.xDest = window.innerWidth / 2; - mouse.yCurr = mouse.yDest = window.innerHeight / 2; - - document.body.appendChild( container ); - setTimeout( function() { - container.style[ 'opacity' ] = '1'; - }, 10); - } - - function removeViewer() { - - unlockBody(); - unbindEvents(); - stop(); - document.body.removeChild( container ); - } - - function setDimensions() { - - // Manually set height to stop bug where - var imageDimensions = getFit( sourceDimensions ); - target.width = imageDimensions.w; - target.height = imageDimensions.h; - horizontalOrientation = imageDimensions.fit; - - targetDimensions = { w: target.width, h: target.height }; - containerDimensions = { w: window.innerWidth, h: window.innerHeight }; - overflowArea = {x: containerDimensions.w - targetDimensions.w, y: containerDimensions.h - targetDimensions.h}; - - } - - function init( element ) { - - var imageSource = element.getAttribute( 'data-image') || element.src; - var title = element.getAttribute( 'data-title'); - var caption = element.getAttribute( 'data-caption'); - var background = element.getAttribute( 'data-background') || "rgba(0,0,0,.8)"; - - var img = new Image(); - img.onload = function() { - - sourceDimensions = { w: img.width, h: img.height }; // Save original dimensions for later. - target = this; - createViewer( title, caption, background ); - lockBody(); - bindEvents(); - loop(); - } - - img.src = imageSource; - } - - function bindEvents() { - - container.addEventListener( 'mousemove', onMouseMove, false ); - container.addEventListener( 'touchmove', onTouchMove, false ); - window.addEventListener( 'resize', setDimensions, false ); - window.addEventListener( 'keyup', onKeyUp, false ); - target.addEventListener( 'click', removeViewer, false ); - } - - function unbindEvents() { - - container.removeEventListener( 'mousemove', onMouseMove, false ); - container.removeEventListener( 'touchmove', onTouchMove, false); - window.removeEventListener( 'resize', setDimensions, false ); - window.removeEventListener( 'keyup', onKeyUp, false ); - target.removeEventListener( 'click', removeViewer, false ) - } - - function onMouseMove( event ) { - - mouse.xDest = event.clientX; - mouse.yDest = event.clientY; - } - - function onTouchMove( event ) { - - event.preventDefault(); // Needed to keep this event firing. - mouse.xDest = event.touches[0].clientX; - mouse.yDest = event.touches[0].clientY; - } - - // Exit on excape key pressed; - function onKeyUp( event ) { - - event.preventDefault(); - if ( event.keyCode === KEYCODE_ESC ) { - removeViewer(); - } - } - - function positionTarget() { - - mouse.xCurr += ( mouse.xDest - mouse.xCurr ) * 0.05; - mouse.yCurr += ( mouse.yDest - mouse.yCurr ) * 0.05; - - if ( horizontalOrientation === true ) { - - // HORIZONTAL SCANNING - currentPosition += ( mouse.xCurr - currentPosition ); - if( mouse.xCurr !== lastPosition ) { - var position = parseFloat( currentPosition / containerDimensions.w ); - position = overflowArea.x * position; - target.style[ 'webkitTransform' ] = 'translate3d(' + position + 'px, 0px, 0px)'; - target.style[ 'MozTransform' ] = 'translate3d(' + position + 'px, 0px, 0px)'; - target.style[ 'msTransform' ] = 'translate3d(' + position + 'px, 0px, 0px)'; - lastPosition = mouse.xCurr; - } - } else if ( horizontalOrientation === false ) { - - // VERTICAL SCANNING - currentPosition += ( mouse.yCurr - currentPosition ); - if( mouse.yCurr !== lastPosition ) { - var position = parseFloat( currentPosition / containerDimensions.h ); - position = overflowArea.y * position; - target.style[ 'webkitTransform' ] = 'translate3d( 0px, ' + position + 'px, 0px)'; - target.style[ 'MozTransform' ] = 'translate3d( 0px, ' + position + 'px, 0px)'; - target.style[ 'msTransform' ] = 'translate3d( 0px, ' + position + 'px, 0px)'; - lastPosition = mouse.yCurr; - } - } - } - - function main( element ) { - - // Parse arguments - - if ( !element ) { - throw 'You need to pass an element!'; - } - - startTracking( element ); - } - - return extend( main, { - resize: setDimensions, - start: start, - stop: stop - }); - -})(); diff --git a/_app/assets/themes/curtana/_js/lightense.js b/_app/assets/themes/curtana/_js/lightense.js new file mode 100644 index 000000000..654869c62 --- /dev/null +++ b/_app/assets/themes/curtana/_js/lightense.js @@ -0,0 +1,163 @@ +var Lightense = (function() { + 'use strict'; + + var KEYCODE_ESC = 27; + var target; + var container; + + // Overflow variable before screen is locked + var overflowValue; + + /* ------------------------- + /* UTILS + /* -------------------------*/ + function touchDevice () { + return 'ontouchstart' in window || navigator.maxTouchPoints; + } + + // Applys a dict of css properties to an element + function applyProperties (target, properties) { + for (var key in properties) { + target.style[key] = properties[key]; + } + } + + /* ------------------------- + /* APP + /* -------------------------*/ + 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) { + // Apply zoom-in cursor for target images + element.style.cursor = 'zoom-in'; + + // Element needs a src at minumun + if (element.getAttribute('data-image') || element.src) { + element.addEventListener('click', function () { + init(this); + }, false); + } + } + + // Lock scroll on the document body + function lockBody () { + overflowValue = document.body.style.overflow; + document.body.style.overflow = 'hidden'; + document.body.classList.add('lightense-open'); + } + + // Unlock scroll on the document body + function unlockBody () { + document.body.style.overflow = overflowValue; + document.body.classList.remove('lightense-open'); + } + + function createViewer (background) { + var containerProperties = { + 'backgroundColor': background, + 'display': 'flex', + 'flexDirection': 'column', + 'justifyContent': 'center', + 'width': '100%', + 'height': '100%', + 'position': 'fixed', + 'top': '0', + 'left': '0', + 'overflow': 'hidden', + 'zIndex': '2147483647', + 'padding': '2vw', + 'margin': '0', + 'webkitTransition': 'opacity 200ms ease', + 'MozTransition': 'opacity 200ms ease', + 'transition': 'opacity 200ms ease', + 'cursor': 'zoom-out', + 'opacity': '0' + }; + container = document.createElement('div'); + container.appendChild(target); + applyProperties(container, containerProperties); + + var imageProperties = { + 'display': 'block', + 'maxWidth': '100%', + 'maxHeight': '100%', + 'padding': '0', + 'margin': '0 auto' + }; + applyProperties(target, imageProperties); + + document.body.appendChild(container); + setTimeout(function () { + container.style.opacity = '1'; + }, 10); + } + + function removeViewer () { + unlockBody(); + unbindEvents(); + + container.style.opacity = '0'; + setTimeout(function () { + document.body.removeChild(container); + }, 200); + } + + function init (element) { + var imageSource = element.getAttribute('data-image') || element.src; + var background = element.getAttribute('data-background') || 'rgba(255, 255, 255, 1)'; + var img = new Image(); + img.onload = function () { + target = this; + createViewer(background); + lockBody(); + bindEvents(); + }; + + img.src = imageSource; + } + + function bindEvents () { + window.addEventListener('keyup', onKeyUp, false); + window.addEventListener('click', removeViewer, false); + } + + function unbindEvents () { + window.removeEventListener('keyup', onKeyUp, false); + window.removeEventListener('click', removeViewer, false); + } + + // Exit on excape key pressed + function onKeyUp (event) { + event.preventDefault(); + if (event.keyCode === KEYCODE_ESC) { + removeViewer(); + } + } + + function main (element) { + // If it's a touch enabled device, do nothing, touch devices are much easier to scale images, right? + if (touchDevice()) { + return; + } + + // Parse arguments + if (!element) { + throw 'You need to pass an element!'; + } + + startTracking(element); + } + + return main; +})(); diff --git a/_app/assets/themes/curtana/_less/plugins.less b/_app/assets/themes/curtana/_less/plugins.less index 10c3f354f..d12a56267 100644 --- a/_app/assets/themes/curtana/_less/plugins.less +++ b/_app/assets/themes/curtana/_less/plugins.less @@ -2,23 +2,6 @@ // Plugins // -------------------------------------------------- -// Style fixes for plugins - -// intense.js -.loaded { - - .intense-wrap { - - article p > img:not(.no-intense) { - cursor: zoom-in; - } - } - - &.intense-open { - cursor: zoom-out; - } -} - // GitHub Gist .gist { font-size: 80% !important;