From 305adc1983e40361890ddc9408497888f6beb384 Mon Sep 17 00:00:00 2001 From: M-ulyanov Date: Thu, 2 Feb 2017 00:09:53 +0300 Subject: [PATCH] Add module support --- README.md | 63 ++++-- package.json | 4 +- src/ImageComparison.js | 487 +++++++++++++++++++++-------------------- 3 files changed, 294 insertions(+), 260 deletions(-) diff --git a/README.md b/README.md index 53f0140..3c45f98 100644 --- a/README.md +++ b/README.md @@ -3,32 +3,51 @@ ImageComparison Slider to quickly compare two images -##Getting started -1. `npm install image-comparison --save` -2. Include style `node_modules/image-comparison/src/ImageComparison.css` -3. Call ImageComparison with your options: + +## Install +```bash +$ npm install image-comparison +``` + +## Usage +Once you have downloaded ImageComparison, the first thing you need to do is include the CSS and the JavaScript. + +### CSS +```html + +``` + +### JavaScript ```html + ``` -4. For support UMD use - `https://babeljs.io/docs/plugins/transform-es2015-modules-umd/` -5. Using! + +### commonJS +```js + var ImageComparison = require('ImageComparison'); +``` + +### ES6 +```js + import ImageComparison from 'ImageComparison'; +``` + ##Options Options list: diff --git a/package.json b/package.json index 1274127..04fab09 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "image-comparison", - "version": "2.0.0", + "version": "2.0.2", "description": "Slider to quickly compare two images", - "main": "index.js", + "main": "src/ImageComparison.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/src/ImageComparison.js b/src/ImageComparison.js index 274909a..e6c6ae6 100644 --- a/src/ImageComparison.js +++ b/src/ImageComparison.js @@ -1,6 +1,6 @@ /* * imageComparison: Slider to quickly compare two images. - * 2.0.0 + * 2.0.2 * * By Max Ulyanov * Src: https://github.com/M-Ulyanov/ImageComparison/ @@ -8,297 +8,312 @@ */ +(function(global){ -const defaultOptions = { - container: null, - startPosition: 50, - data: null -}; - -/** - * Constructor - * @param options - */ -var ImageComparison = function (options) { - this.options = utils.extend({}, [defaultOptions, options], { - clearEmpty: true - }); - this.container = this.options.container; - this.images = [this.options.data[0].image, this.options.data[1].image]; - this.labels = [this.options.data[0].label, this.options.data[1].label]; - this._animateInterval = null; - this._comparisonSeparator = null; - this._items = []; - - if (this.container == null) { - console.error('Container element not found!') - } - - if (!this.images[0] || !this.images[1]) { - console.error('Need two images!') - } - - this._build(); - this._setEvents(); -}; + const defaultOptions = { + container: null, + startPosition: 50, + data: null + }; -/** - * Build HTML structure - * @private - */ -ImageComparison.prototype._build = function () { - this.options.container.classList.add('comparison-widget'); - for (var i = 0; i < 2; i++) { - var item = document.createElement('div'); - item.classList.add('comparison-item'); - - var content = document.createElement('div'); - content.classList.add('comparison-item__content'); - if (this.labels[i]) { - content.innerHTML = '
' + this.labels[i] + '
'; + /** + * Constructor + * @param options + */ + function ImageComparison (options) { + this.options = utils.extend({}, [defaultOptions, options], { + clearEmpty: true + }); + this.container = this.options.container; + this.images = [this.options.data[0].image, this.options.data[1].image]; + this.labels = [this.options.data[0].label, this.options.data[1].label]; + this._animateInterval = null; + this._comparisonSeparator = null; + this._items = []; + + if (this.container == null) { + console.error('Container element not found!') } - this.images[i].classList.add('comparison-item__image'); - content.appendChild(this.images[i]); - item.appendChild(content); - - if (i === 0) { - item.classList.add('comparison-item--first'); - item.style.width = this.options.startPosition + '%'; - this._comparisonSeparator = document.createElement('div'); - this._comparisonSeparator.classList.add('comparison-separator'); - this._comparisonSeparator.innerHTML = '
'; - item.appendChild(this._comparisonSeparator); + + if (!this.images[0] || !this.images[1]) { + console.error('Need two images!') } - this._items.push(item); - this.container.appendChild(item); + this._build(); + this._setEvents(); } -}; + /** + * Build HTML structure + * @private + */ + ImageComparison.prototype._build = function () { + this.options.container.classList.add('comparison-widget'); + for (var i = 0; i < 2; i++) { + var item = document.createElement('div'); + item.classList.add('comparison-item'); + + var content = document.createElement('div'); + content.classList.add('comparison-item__content'); + if (this.labels[i]) { + content.innerHTML = '
' + this.labels[i] + '
'; + } + this.images[i].classList.add('comparison-item__image'); + content.appendChild(this.images[i]); + item.appendChild(content); + + if (i === 0) { + item.classList.add('comparison-item--first'); + item.style.width = this.options.startPosition + '%'; + this._comparisonSeparator = document.createElement('div'); + this._comparisonSeparator.classList.add('comparison-separator'); + this._comparisonSeparator.innerHTML = '
'; + item.appendChild(this._comparisonSeparator); + } -/** - * Set need DOM events - * @private - */ -ImageComparison.prototype._setEvents = function () { - var comparison = this; + this._items.push(item); + this.container.appendChild(item); + } - comparison.container.addEventListener('click', function (event) { - comparison._calcPosition(event); - }); + }; - utils.setMultiEvents(comparison._comparisonSeparator, ['mousedown', 'touchstart'], function () { - comparison._comparisonSeparator.classList.add('actived'); - }); - utils.setMultiEvents(document.body, ['mouseup', 'touchend'], function () { - comparison._comparisonSeparator.classList.remove('actived'); - }); + /** + * Set need DOM events + * @private + */ + ImageComparison.prototype._setEvents = function () { + var comparison = this; - utils.setMultiEvents(document.body, ['mousemove', 'touchmove'], function (event) { - if (comparison._comparisonSeparator.classList.contains('actived')) { + comparison.container.addEventListener('click', function (event) { comparison._calcPosition(event); - if (document['selection']) { - document['selection'].empty(); - } - } - }); + }); - utils.setMultiEvents(window, ['resize', 'load'], function () { - comparison._setImageSize(); - }); + utils.setMultiEvents(comparison._comparisonSeparator, ['mousedown', 'touchstart'], function () { + comparison._comparisonSeparator.classList.add('actived'); + }); - for (var i = 0; i < comparison.images.length; i++) { - comparison.images[i].addEventListener('dragstart', function (e) { - e.preventDefault(); + utils.setMultiEvents(document.body, ['mouseup', 'touchend'], function () { + comparison._comparisonSeparator.classList.remove('actived'); }); - } -}; + utils.setMultiEvents(document.body, ['mousemove', 'touchmove'], function (event) { + if (comparison._comparisonSeparator.classList.contains('actived')) { + comparison._calcPosition(event); + if (document['selection']) { + document['selection'].empty(); + } + } + }); + utils.setMultiEvents(window, ['resize', 'load'], function () { + comparison._setImageSize(); + }); -/** - * Calc current position (click, touch or move) - * @param event - * @private - */ -ImageComparison.prototype._calcPosition = function (event) { - var containerCoords = this.container.getBoundingClientRect(); - var containerWidth = containerCoords.width; - /** @namespace event.touches */ - var horizontalPositionForElement = (event.clientX || event.touches[0].pageX) - containerCoords.left; - var positionInPercent = horizontalPositionForElement * 100 / containerWidth; - if (positionInPercent > 100) { - positionInPercent = 100; - } - else if (positionInPercent < 0) { - positionInPercent = 0; - } - this._controllerPosition(positionInPercent.toFixed(2), event.type); -}; + for (var i = 0; i < comparison.images.length; i++) { + comparison.images[i].addEventListener('dragstart', function (e) { + e.preventDefault(); + }); + } + }; -/** - * Controller position - * @param positionInPercent - * @param eventType - * @private - */ -ImageComparison.prototype._controllerPosition = function (positionInPercent, eventType) { - switch (eventType) { - case 'click': - this._setPositionWithAnimate(positionInPercent); - break; - default : - this._updatePosition(positionInPercent); - } -}; + /** + * Calc current position (click, touch or move) + * @param event + * @private + */ + ImageComparison.prototype._calcPosition = function (event) { + var containerCoords = this.container.getBoundingClientRect(); + var containerWidth = containerCoords.width; + /** @namespace event.touches */ + var horizontalPositionForElement = (event.clientX || event.touches[0].pageX) - containerCoords.left; + var positionInPercent = horizontalPositionForElement * 100 / containerWidth; + if (positionInPercent > 100) { + positionInPercent = 100; + } + else if (positionInPercent < 0) { + positionInPercent = 0; + } + this._controllerPosition(positionInPercent.toFixed(2), event.type); + }; -/** - * Set position with animate - * @param newPositionInPercent - * @returns {boolean} - * @private - */ -ImageComparison.prototype._setPositionWithAnimate = function (newPositionInPercent) { - var comparison = this; - var currentPositionInPercent = parseFloat(comparison._items[0].style.width); - clearInterval(comparison._animateInterval); - if (newPositionInPercent == currentPositionInPercent) { - return false; - } - else if (currentPositionInPercent > newPositionInPercent) { - decrementPosition(); - } - else { - incrementPosition(); - } + /** + * Controller position + * @param positionInPercent + * @param eventType + * @private + */ + ImageComparison.prototype._controllerPosition = function (positionInPercent, eventType) { + switch (eventType) { + case 'click': + this._setPositionWithAnimate(positionInPercent); + break; + default : + this._updatePosition(positionInPercent); + } + }; - // Support animate functions - function incrementPosition() { - comparison._animateInterval = setInterval(function () { - currentPositionInPercent++; - comparison._updatePosition(currentPositionInPercent); - if (currentPositionInPercent >= newPositionInPercent) { - setFinalPositionAndClearInterval(); - } - }, 10); - } + /** + * Set position with animate + * @param newPositionInPercent + * @returns {boolean} + * @private + */ + ImageComparison.prototype._setPositionWithAnimate = function (newPositionInPercent) { + var comparison = this; + var currentPositionInPercent = parseFloat(comparison._items[0].style.width); + clearInterval(comparison._animateInterval); - function decrementPosition() { - comparison._animateInterval = setInterval(function () { - currentPositionInPercent--; - comparison._updatePosition(currentPositionInPercent); - if (currentPositionInPercent <= newPositionInPercent) { - setFinalPositionAndClearInterval(); - } - }, 10); - } + if (newPositionInPercent == currentPositionInPercent) { + return false; + } + else if (currentPositionInPercent > newPositionInPercent) { + decrementPosition(); + } + else { + incrementPosition(); + } - function setFinalPositionAndClearInterval() { - comparison._updatePosition(newPositionInPercent); - clearInterval(comparison._animateInterval); - } + // Support animate functions + function incrementPosition() { + comparison._animateInterval = setInterval(function () { + currentPositionInPercent++; + comparison._updatePosition(currentPositionInPercent); + if (currentPositionInPercent >= newPositionInPercent) { + setFinalPositionAndClearInterval(); + } + }, 10); + } -}; + function decrementPosition() { + comparison._animateInterval = setInterval(function () { + currentPositionInPercent--; + comparison._updatePosition(currentPositionInPercent); + if (currentPositionInPercent <= newPositionInPercent) { + setFinalPositionAndClearInterval(); + } + }, 10); + } + function setFinalPositionAndClearInterval() { + comparison._updatePosition(newPositionInPercent); + clearInterval(comparison._animateInterval); + } -/** - * Set position item[0] - * @param percent - * @private - */ -ImageComparison.prototype._updatePosition = function (percent) { - this._items[0].style.width = percent + '%'; -}; + }; -/** - * Set the width of image that has a position absolute - * @private - */ -ImageComparison.prototype._setImageSize = function () { - this.images[0].style.width = this.container.offsetWidth + 'px'; -}; + /** + * Set position item[0] + * @param percent + * @private + */ + ImageComparison.prototype._updatePosition = function (percent) { + this._items[0].style.width = percent + '%'; + }; -/** - * Utils Methods - * @type {{extend: Function, getConstructor: Function}} - */ -var utils = { /** - * Native extend object - * @param target - * @param objects - * @param options - * @returns {*} + * Set the width of image that has a position absolute + * @private */ - extend: function (target, objects, options) { + ImageComparison.prototype._setImageSize = function () { + this.images[0].style.width = this.container.offsetWidth + 'px'; + }; + - for (var object in objects) { - if (objects.hasOwnProperty(object)) { - recursiveMerge(target, objects[object]); + /** + * Utils Methods + * @type {{extend: Function, getConstructor: Function}} + */ + var utils = { + + /** + * Native extend object + * @param target + * @param objects + * @param options + * @returns {*} + */ + extend: function (target, objects, options) { + + for (var object in objects) { + if (objects.hasOwnProperty(object)) { + recursiveMerge(target, objects[object]); + } } - } - function recursiveMerge(target, object) { - for (var property in object) { - if (object.hasOwnProperty(property)) { - var current = object[property]; - if (utils.getConstructor(current) === 'Object') { - if (!target[property]) { - target[property] = {}; + function recursiveMerge(target, object) { + for (var property in object) { + if (object.hasOwnProperty(property)) { + var current = object[property]; + if (utils.getConstructor(current) === 'Object') { + if (!target[property]) { + target[property] = {}; + } + recursiveMerge(target[property], current); } - recursiveMerge(target[property], current); - } - else { - // clearEmpty - if (options.clearEmpty) { - if (current == null) { - continue; + else { + // clearEmpty + if (options.clearEmpty) { + if (current == null) { + continue; + } } + target[property] = current; } - target[property] = current; } } } - } - return target; - }, + return target; + }, - /** - * Set Multi addEventListener - * @param element - * @param events - * @param func - */ - setMultiEvents: function (element, events, func) { - for (var i = 0; i < events.length; i++) { - element.addEventListener(events[i], func); - } - }, + /** + * Set Multi addEventListener + * @param element + * @param events + * @param func + */ + setMultiEvents: function (element, events, func) { + for (var i = 0; i < events.length; i++) { + element.addEventListener(events[i], func); + } + }, - /** - * Get object constructor - * @param object - * @returns {string} - */ - getConstructor: function (object) { - return Object.prototype.toString.call(object).slice(8, -1); + /** + * Get object constructor + * @param object + * @returns {string} + */ + getConstructor: function (object) { + return Object.prototype.toString.call(object).slice(8, -1); + } + }; + + + // Exports to multiple environments + if(typeof define === 'function' && define.amd){ //AMD + define(function () { return ImageComparison; }); + } else if (typeof module !== 'undefined' && module.exports){ //node + module.exports = ImageComparison; + } else { // browser + // use string because of Google closure compiler ADVANCED_MODE + /* jslint sub:true */ + global['ImageComparison'] = ImageComparison; } -}; -export { ImageComparison }; \ No newline at end of file +}(this)); +