diff --git a/app/assets/images/jquery.minicolors.png b/app/assets/images/jquery.minicolors.png new file mode 100644 index 0000000..bccc201 Binary files /dev/null and b/app/assets/images/jquery.minicolors.png differ diff --git a/app/assets/javascripts/cropper.js b/app/assets/javascripts/cropper.js new file mode 100644 index 0000000..b449513 --- /dev/null +++ b/app/assets/javascripts/cropper.js @@ -0,0 +1,3566 @@ +/*! + * Cropper.js v1.5.5 + * https://fengyuanchen.github.io/cropperjs + * + * Copyright 2015-present Chen Fengyuan + * Released under the MIT license + * + * Date: 2019-08-04T02:26:31.160Z + */ + +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = global || self, global.Cropper = factory()); +}(this, function () { 'use strict'; + + function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function (obj) { + return typeof obj; + }; + } else { + _typeof = function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); + } + + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } + + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } + + function _toConsumableArray(arr) { + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); + } + + function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; + + return arr2; + } + } + + function _iterableToArray(iter) { + if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); + } + + function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance"); + } + + var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined'; + var WINDOW = IS_BROWSER ? window : {}; + var IS_TOUCH_DEVICE = IS_BROWSER ? 'ontouchstart' in WINDOW.document.documentElement : false; + var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false; + var NAMESPACE = 'cropper'; // Actions + + var ACTION_ALL = 'all'; + var ACTION_CROP = 'crop'; + var ACTION_MOVE = 'move'; + var ACTION_ZOOM = 'zoom'; + var ACTION_EAST = 'e'; + var ACTION_WEST = 'w'; + var ACTION_SOUTH = 's'; + var ACTION_NORTH = 'n'; + var ACTION_NORTH_EAST = 'ne'; + var ACTION_NORTH_WEST = 'nw'; + var ACTION_SOUTH_EAST = 'se'; + var ACTION_SOUTH_WEST = 'sw'; // Classes + + var CLASS_CROP = "".concat(NAMESPACE, "-crop"); + var CLASS_DISABLED = "".concat(NAMESPACE, "-disabled"); + var CLASS_HIDDEN = "".concat(NAMESPACE, "-hidden"); + var CLASS_HIDE = "".concat(NAMESPACE, "-hide"); + var CLASS_INVISIBLE = "".concat(NAMESPACE, "-invisible"); + var CLASS_MODAL = "".concat(NAMESPACE, "-modal"); + var CLASS_MOVE = "".concat(NAMESPACE, "-move"); // Data keys + + var DATA_ACTION = "".concat(NAMESPACE, "Action"); + var DATA_PREVIEW = "".concat(NAMESPACE, "Preview"); // Drag modes + + var DRAG_MODE_CROP = 'crop'; + var DRAG_MODE_MOVE = 'move'; + var DRAG_MODE_NONE = 'none'; // Events + + var EVENT_CROP = 'crop'; + var EVENT_CROP_END = 'cropend'; + var EVENT_CROP_MOVE = 'cropmove'; + var EVENT_CROP_START = 'cropstart'; + var EVENT_DBLCLICK = 'dblclick'; + var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown'; + var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove'; + var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup'; + var EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START; + var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE; + var EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END; + var EVENT_READY = 'ready'; + var EVENT_RESIZE = 'resize'; + var EVENT_WHEEL = 'wheel'; + var EVENT_ZOOM = 'zoom'; // Mime types + + var MIME_TYPE_JPEG = 'image/jpeg'; // RegExps + + var REGEXP_ACTIONS = /^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/; + var REGEXP_DATA_URL = /^data:/; + var REGEXP_DATA_URL_JPEG = /^data:image\/jpeg;base64,/; + var REGEXP_TAG_NAME = /^img|canvas$/i; // Misc + // Inspired by the default width and height of a canvas element. + + var MIN_CONTAINER_WIDTH = 200; + var MIN_CONTAINER_HEIGHT = 100; + + var DEFAULTS = { + // Define the view mode of the cropper + viewMode: 0, + // 0, 1, 2, 3 + // Define the dragging mode of the cropper + dragMode: DRAG_MODE_CROP, + // 'crop', 'move' or 'none' + // Define the initial aspect ratio of the crop box + initialAspectRatio: NaN, + // Define the aspect ratio of the crop box + aspectRatio: NaN, + // An object with the previous cropping result data + data: null, + // A selector for adding extra containers to preview + preview: '', + // Re-render the cropper when resize the window + responsive: true, + // Restore the cropped area after resize the window + restore: true, + // Check if the current image is a cross-origin image + checkCrossOrigin: true, + // Check the current image's Exif Orientation information + checkOrientation: true, + // Show the black modal + modal: true, + // Show the dashed lines for guiding + guides: true, + // Show the center indicator for guiding + center: true, + // Show the white modal to highlight the crop box + highlight: true, + // Show the grid background + background: true, + // Enable to crop the image automatically when initialize + autoCrop: true, + // Define the percentage of automatic cropping area when initializes + autoCropArea: 0.8, + // Enable to move the image + movable: true, + // Enable to rotate the image + rotatable: true, + // Enable to scale the image + scalable: true, + // Enable to zoom the image + zoomable: true, + // Enable to zoom the image by dragging touch + zoomOnTouch: true, + // Enable to zoom the image by wheeling mouse + zoomOnWheel: true, + // Define zoom ratio when zoom the image by wheeling mouse + wheelZoomRatio: 0.1, + // Enable to move the crop box + cropBoxMovable: true, + // Enable to resize the crop box + cropBoxResizable: true, + // Toggle drag mode between "crop" and "move" when click twice on the cropper + toggleDragModeOnDblclick: true, + // Size limitation + minCanvasWidth: 0, + minCanvasHeight: 0, + minCropBoxWidth: 0, + minCropBoxHeight: 0, + minContainerWidth: 200, + minContainerHeight: 100, + // Shortcuts of events + ready: null, + cropstart: null, + cropmove: null, + cropend: null, + crop: null, + zoom: null + }; + + var TEMPLATE = '
' + '
' + '
' + '
' + '
' + '
' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
' + '
'; + + /** + * Check if the given value is not a number. + */ + + var isNaN = Number.isNaN || WINDOW.isNaN; + /** + * Check if the given value is a number. + * @param {*} value - The value to check. + * @returns {boolean} Returns `true` if the given value is a number, else `false`. + */ + + function isNumber(value) { + return typeof value === 'number' && !isNaN(value); + } + /** + * Check if the given value is a positive number. + * @param {*} value - The value to check. + * @returns {boolean} Returns `true` if the given value is a positive number, else `false`. + */ + + var isPositiveNumber = function isPositiveNumber(value) { + return value > 0 && value < Infinity; + }; + /** + * Check if the given value is undefined. + * @param {*} value - The value to check. + * @returns {boolean} Returns `true` if the given value is undefined, else `false`. + */ + + function isUndefined(value) { + return typeof value === 'undefined'; + } + /** + * Check if the given value is an object. + * @param {*} value - The value to check. + * @returns {boolean} Returns `true` if the given value is an object, else `false`. + */ + + function isObject(value) { + return _typeof(value) === 'object' && value !== null; + } + var hasOwnProperty = Object.prototype.hasOwnProperty; + /** + * Check if the given value is a plain object. + * @param {*} value - The value to check. + * @returns {boolean} Returns `true` if the given value is a plain object, else `false`. + */ + + function isPlainObject(value) { + if (!isObject(value)) { + return false; + } + + try { + var _constructor = value.constructor; + var prototype = _constructor.prototype; + return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf'); + } catch (error) { + return false; + } + } + /** + * Check if the given value is a function. + * @param {*} value - The value to check. + * @returns {boolean} Returns `true` if the given value is a function, else `false`. + */ + + function isFunction(value) { + return typeof value === 'function'; + } + var slice = Array.prototype.slice; + /** + * Convert array-like or iterable object to an array. + * @param {*} value - The value to convert. + * @returns {Array} Returns a new array. + */ + + function toArray(value) { + return Array.from ? Array.from(value) : slice.call(value); + } + /** + * Iterate the given data. + * @param {*} data - The data to iterate. + * @param {Function} callback - The process function for each element. + * @returns {*} The original data. + */ + + function forEach(data, callback) { + if (data && isFunction(callback)) { + if (Array.isArray(data) || isNumber(data.length) + /* array-like */ + ) { + toArray(data).forEach(function (value, key) { + callback.call(data, value, key, data); + }); + } else if (isObject(data)) { + Object.keys(data).forEach(function (key) { + callback.call(data, data[key], key, data); + }); + } + } + + return data; + } + /** + * Extend the given object. + * @param {*} target - The target object to extend. + * @param {*} args - The rest objects for merging to the target object. + * @returns {Object} The extended object. + */ + + var assign = Object.assign || function assign(target) { + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + if (isObject(target) && args.length > 0) { + args.forEach(function (arg) { + if (isObject(arg)) { + Object.keys(arg).forEach(function (key) { + target[key] = arg[key]; + }); + } + }); + } + + return target; + }; + var REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/; + /** + * Normalize decimal number. + * Check out {@link http://0.30000000000000004.com/} + * @param {number} value - The value to normalize. + * @param {number} [times=100000000000] - The times for normalizing. + * @returns {number} Returns the normalized number. + */ + + function normalizeDecimalNumber(value) { + var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000000000; + return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value; + } + var REGEXP_SUFFIX = /^width|height|left|top|marginLeft|marginTop$/; + /** + * Apply styles to the given element. + * @param {Element} element - The target element. + * @param {Object} styles - The styles for applying. + */ + + function setStyle(element, styles) { + var style = element.style; + forEach(styles, function (value, property) { + if (REGEXP_SUFFIX.test(property) && isNumber(value)) { + value = "".concat(value, "px"); + } + + style[property] = value; + }); + } + /** + * Check if the given element has a special class. + * @param {Element} element - The element to check. + * @param {string} value - The class to search. + * @returns {boolean} Returns `true` if the special class was found. + */ + + function hasClass(element, value) { + return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1; + } + /** + * Add classes to the given element. + * @param {Element} element - The target element. + * @param {string} value - The classes to be added. + */ + + function addClass(element, value) { + if (!value) { + return; + } + + if (isNumber(element.length)) { + forEach(element, function (elem) { + addClass(elem, value); + }); + return; + } + + if (element.classList) { + element.classList.add(value); + return; + } + + var className = element.className.trim(); + + if (!className) { + element.className = value; + } else if (className.indexOf(value) < 0) { + element.className = "".concat(className, " ").concat(value); + } + } + /** + * Remove classes from the given element. + * @param {Element} element - The target element. + * @param {string} value - The classes to be removed. + */ + + function removeClass(element, value) { + if (!value) { + return; + } + + if (isNumber(element.length)) { + forEach(element, function (elem) { + removeClass(elem, value); + }); + return; + } + + if (element.classList) { + element.classList.remove(value); + return; + } + + if (element.className.indexOf(value) >= 0) { + element.className = element.className.replace(value, ''); + } + } + /** + * Add or remove classes from the given element. + * @param {Element} element - The target element. + * @param {string} value - The classes to be toggled. + * @param {boolean} added - Add only. + */ + + function toggleClass(element, value, added) { + if (!value) { + return; + } + + if (isNumber(element.length)) { + forEach(element, function (elem) { + toggleClass(elem, value, added); + }); + return; + } // IE10-11 doesn't support the second parameter of `classList.toggle` + + + if (added) { + addClass(element, value); + } else { + removeClass(element, value); + } + } + var REGEXP_CAMEL_CASE = /([a-z\d])([A-Z])/g; + /** + * Transform the given string from camelCase to kebab-case + * @param {string} value - The value to transform. + * @returns {string} The transformed value. + */ + + function toParamCase(value) { + return value.replace(REGEXP_CAMEL_CASE, '$1-$2').toLowerCase(); + } + /** + * Get data from the given element. + * @param {Element} element - The target element. + * @param {string} name - The data key to get. + * @returns {string} The data value. + */ + + function getData(element, name) { + if (isObject(element[name])) { + return element[name]; + } + + if (element.dataset) { + return element.dataset[name]; + } + + return element.getAttribute("data-".concat(toParamCase(name))); + } + /** + * Set data to the given element. + * @param {Element} element - The target element. + * @param {string} name - The data key to set. + * @param {string} data - The data value. + */ + + function setData(element, name, data) { + if (isObject(data)) { + element[name] = data; + } else if (element.dataset) { + element.dataset[name] = data; + } else { + element.setAttribute("data-".concat(toParamCase(name)), data); + } + } + /** + * Remove data from the given element. + * @param {Element} element - The target element. + * @param {string} name - The data key to remove. + */ + + function removeData(element, name) { + if (isObject(element[name])) { + try { + delete element[name]; + } catch (error) { + element[name] = undefined; + } + } else if (element.dataset) { + // #128 Safari not allows to delete dataset property + try { + delete element.dataset[name]; + } catch (error) { + element.dataset[name] = undefined; + } + } else { + element.removeAttribute("data-".concat(toParamCase(name))); + } + } + var REGEXP_SPACES = /\s\s*/; + + var onceSupported = function () { + var supported = false; + + if (IS_BROWSER) { + var once = false; + + var listener = function listener() {}; + + var options = Object.defineProperty({}, 'once', { + get: function get() { + supported = true; + return once; + }, + + /** + * This setter can fix a `TypeError` in strict mode + * {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only} + * @param {boolean} value - The value to set + */ + set: function set(value) { + once = value; + } + }); + WINDOW.addEventListener('test', listener, options); + WINDOW.removeEventListener('test', listener, options); + } + + return supported; + }(); + /** + * Remove event listener from the target element. + * @param {Element} element - The event target. + * @param {string} type - The event type(s). + * @param {Function} listener - The event listener. + * @param {Object} options - The event options. + */ + + + function removeListener(element, type, listener) { + var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; + var handler = listener; + type.trim().split(REGEXP_SPACES).forEach(function (event) { + if (!onceSupported) { + var listeners = element.listeners; + + if (listeners && listeners[event] && listeners[event][listener]) { + handler = listeners[event][listener]; + delete listeners[event][listener]; + + if (Object.keys(listeners[event]).length === 0) { + delete listeners[event]; + } + + if (Object.keys(listeners).length === 0) { + delete element.listeners; + } + } + } + + element.removeEventListener(event, handler, options); + }); + } + /** + * Add event listener to the target element. + * @param {Element} element - The event target. + * @param {string} type - The event type(s). + * @param {Function} listener - The event listener. + * @param {Object} options - The event options. + */ + + function addListener(element, type, listener) { + var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; + var _handler = listener; + type.trim().split(REGEXP_SPACES).forEach(function (event) { + if (options.once && !onceSupported) { + var _element$listeners = element.listeners, + listeners = _element$listeners === void 0 ? {} : _element$listeners; + + _handler = function handler() { + delete listeners[event][listener]; + element.removeEventListener(event, _handler, options); + + for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + args[_key2] = arguments[_key2]; + } + + listener.apply(element, args); + }; + + if (!listeners[event]) { + listeners[event] = {}; + } + + if (listeners[event][listener]) { + element.removeEventListener(event, listeners[event][listener], options); + } + + listeners[event][listener] = _handler; + element.listeners = listeners; + } + + element.addEventListener(event, _handler, options); + }); + } + /** + * Dispatch event on the target element. + * @param {Element} element - The event target. + * @param {string} type - The event type(s). + * @param {Object} data - The additional event data. + * @returns {boolean} Indicate if the event is default prevented or not. + */ + + function dispatchEvent(element, type, data) { + var event; // Event and CustomEvent on IE9-11 are global objects, not constructors + + if (isFunction(Event) && isFunction(CustomEvent)) { + event = new CustomEvent(type, { + detail: data, + bubbles: true, + cancelable: true + }); + } else { + event = document.createEvent('CustomEvent'); + event.initCustomEvent(type, true, true, data); + } + + return element.dispatchEvent(event); + } + /** + * Get the offset base on the document. + * @param {Element} element - The target element. + * @returns {Object} The offset data. + */ + + function getOffset(element) { + var box = element.getBoundingClientRect(); + return { + left: box.left + (window.pageXOffset - document.documentElement.clientLeft), + top: box.top + (window.pageYOffset - document.documentElement.clientTop) + }; + } + var location = WINDOW.location; + var REGEXP_ORIGINS = /^(\w+:)\/\/([^:/?#]*):?(\d*)/i; + /** + * Check if the given URL is a cross origin URL. + * @param {string} url - The target URL. + * @returns {boolean} Returns `true` if the given URL is a cross origin URL, else `false`. + */ + + function isCrossOriginURL(url) { + var parts = url.match(REGEXP_ORIGINS); + return parts !== null && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port); + } + /** + * Add timestamp to the given URL. + * @param {string} url - The target URL. + * @returns {string} The result URL. + */ + + function addTimestamp(url) { + var timestamp = "timestamp=".concat(new Date().getTime()); + return url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp; + } + /** + * Get transforms base on the given object. + * @param {Object} obj - The target object. + * @returns {string} A string contains transform values. + */ + + function getTransforms(_ref) { + var rotate = _ref.rotate, + scaleX = _ref.scaleX, + scaleY = _ref.scaleY, + translateX = _ref.translateX, + translateY = _ref.translateY; + var values = []; + + if (isNumber(translateX) && translateX !== 0) { + values.push("translateX(".concat(translateX, "px)")); + } + + if (isNumber(translateY) && translateY !== 0) { + values.push("translateY(".concat(translateY, "px)")); + } // Rotate should come first before scale to match orientation transform + + + if (isNumber(rotate) && rotate !== 0) { + values.push("rotate(".concat(rotate, "deg)")); + } + + if (isNumber(scaleX) && scaleX !== 1) { + values.push("scaleX(".concat(scaleX, ")")); + } + + if (isNumber(scaleY) && scaleY !== 1) { + values.push("scaleY(".concat(scaleY, ")")); + } + + var transform = values.length ? values.join(' ') : 'none'; + return { + WebkitTransform: transform, + msTransform: transform, + transform: transform + }; + } + /** + * Get the max ratio of a group of pointers. + * @param {string} pointers - The target pointers. + * @returns {number} The result ratio. + */ + + function getMaxZoomRatio(pointers) { + var pointers2 = assign({}, pointers); + var ratios = []; + forEach(pointers, function (pointer, pointerId) { + delete pointers2[pointerId]; + forEach(pointers2, function (pointer2) { + var x1 = Math.abs(pointer.startX - pointer2.startX); + var y1 = Math.abs(pointer.startY - pointer2.startY); + var x2 = Math.abs(pointer.endX - pointer2.endX); + var y2 = Math.abs(pointer.endY - pointer2.endY); + var z1 = Math.sqrt(x1 * x1 + y1 * y1); + var z2 = Math.sqrt(x2 * x2 + y2 * y2); + var ratio = (z2 - z1) / z1; + ratios.push(ratio); + }); + }); + ratios.sort(function (a, b) { + return Math.abs(a) < Math.abs(b); + }); + return ratios[0]; + } + /** + * Get a pointer from an event object. + * @param {Object} event - The target event object. + * @param {boolean} endOnly - Indicates if only returns the end point coordinate or not. + * @returns {Object} The result pointer contains start and/or end point coordinates. + */ + + function getPointer(_ref2, endOnly) { + var pageX = _ref2.pageX, + pageY = _ref2.pageY; + var end = { + endX: pageX, + endY: pageY + }; + return endOnly ? end : assign({ + startX: pageX, + startY: pageY + }, end); + } + /** + * Get the center point coordinate of a group of pointers. + * @param {Object} pointers - The target pointers. + * @returns {Object} The center point coordinate. + */ + + function getPointersCenter(pointers) { + var pageX = 0; + var pageY = 0; + var count = 0; + forEach(pointers, function (_ref3) { + var startX = _ref3.startX, + startY = _ref3.startY; + pageX += startX; + pageY += startY; + count += 1; + }); + pageX /= count; + pageY /= count; + return { + pageX: pageX, + pageY: pageY + }; + } + /** + * Get the max sizes in a rectangle under the given aspect ratio. + * @param {Object} data - The original sizes. + * @param {string} [type='contain'] - The adjust type. + * @returns {Object} The result sizes. + */ + + function getAdjustedSizes(_ref4) // or 'cover' + { + var aspectRatio = _ref4.aspectRatio, + height = _ref4.height, + width = _ref4.width; + var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'contain'; + var isValidWidth = isPositiveNumber(width); + var isValidHeight = isPositiveNumber(height); + + if (isValidWidth && isValidHeight) { + var adjustedWidth = height * aspectRatio; + + if (type === 'contain' && adjustedWidth > width || type === 'cover' && adjustedWidth < width) { + height = width / aspectRatio; + } else { + width = height * aspectRatio; + } + } else if (isValidWidth) { + height = width / aspectRatio; + } else if (isValidHeight) { + width = height * aspectRatio; + } + + return { + width: width, + height: height + }; + } + /** + * Get the new sizes of a rectangle after rotated. + * @param {Object} data - The original sizes. + * @returns {Object} The result sizes. + */ + + function getRotatedSizes(_ref5) { + var width = _ref5.width, + height = _ref5.height, + degree = _ref5.degree; + degree = Math.abs(degree) % 180; + + if (degree === 90) { + return { + width: height, + height: width + }; + } + + var arc = degree % 90 * Math.PI / 180; + var sinArc = Math.sin(arc); + var cosArc = Math.cos(arc); + var newWidth = width * cosArc + height * sinArc; + var newHeight = width * sinArc + height * cosArc; + return degree > 90 ? { + width: newHeight, + height: newWidth + } : { + width: newWidth, + height: newHeight + }; + } + /** + * Get a canvas which drew the given image. + * @param {HTMLImageElement} image - The image for drawing. + * @param {Object} imageData - The image data. + * @param {Object} canvasData - The canvas data. + * @param {Object} options - The options. + * @returns {HTMLCanvasElement} The result canvas. + */ + + function getSourceCanvas(image, _ref6, _ref7, _ref8) { + var imageAspectRatio = _ref6.aspectRatio, + imageNaturalWidth = _ref6.naturalWidth, + imageNaturalHeight = _ref6.naturalHeight, + _ref6$rotate = _ref6.rotate, + rotate = _ref6$rotate === void 0 ? 0 : _ref6$rotate, + _ref6$scaleX = _ref6.scaleX, + scaleX = _ref6$scaleX === void 0 ? 1 : _ref6$scaleX, + _ref6$scaleY = _ref6.scaleY, + scaleY = _ref6$scaleY === void 0 ? 1 : _ref6$scaleY; + var aspectRatio = _ref7.aspectRatio, + naturalWidth = _ref7.naturalWidth, + naturalHeight = _ref7.naturalHeight; + var _ref8$fillColor = _ref8.fillColor, + fillColor = _ref8$fillColor === void 0 ? 'transparent' : _ref8$fillColor, + _ref8$imageSmoothingE = _ref8.imageSmoothingEnabled, + imageSmoothingEnabled = _ref8$imageSmoothingE === void 0 ? true : _ref8$imageSmoothingE, + _ref8$imageSmoothingQ = _ref8.imageSmoothingQuality, + imageSmoothingQuality = _ref8$imageSmoothingQ === void 0 ? 'low' : _ref8$imageSmoothingQ, + _ref8$maxWidth = _ref8.maxWidth, + maxWidth = _ref8$maxWidth === void 0 ? Infinity : _ref8$maxWidth, + _ref8$maxHeight = _ref8.maxHeight, + maxHeight = _ref8$maxHeight === void 0 ? Infinity : _ref8$maxHeight, + _ref8$minWidth = _ref8.minWidth, + minWidth = _ref8$minWidth === void 0 ? 0 : _ref8$minWidth, + _ref8$minHeight = _ref8.minHeight, + minHeight = _ref8$minHeight === void 0 ? 0 : _ref8$minHeight; + var canvas = document.createElement('canvas'); + var context = canvas.getContext('2d'); + var maxSizes = getAdjustedSizes({ + aspectRatio: aspectRatio, + width: maxWidth, + height: maxHeight + }); + var minSizes = getAdjustedSizes({ + aspectRatio: aspectRatio, + width: minWidth, + height: minHeight + }, 'cover'); + var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth)); + var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight)); // Note: should always use image's natural sizes for drawing as + // imageData.naturalWidth === canvasData.naturalHeight when rotate % 180 === 90 + + var destMaxSizes = getAdjustedSizes({ + aspectRatio: imageAspectRatio, + width: maxWidth, + height: maxHeight + }); + var destMinSizes = getAdjustedSizes({ + aspectRatio: imageAspectRatio, + width: minWidth, + height: minHeight + }, 'cover'); + var destWidth = Math.min(destMaxSizes.width, Math.max(destMinSizes.width, imageNaturalWidth)); + var destHeight = Math.min(destMaxSizes.height, Math.max(destMinSizes.height, imageNaturalHeight)); + var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight]; + canvas.width = normalizeDecimalNumber(width); + canvas.height = normalizeDecimalNumber(height); + context.fillStyle = fillColor; + context.fillRect(0, 0, width, height); + context.save(); + context.translate(width / 2, height / 2); + context.rotate(rotate * Math.PI / 180); + context.scale(scaleX, scaleY); + context.imageSmoothingEnabled = imageSmoothingEnabled; + context.imageSmoothingQuality = imageSmoothingQuality; + context.drawImage.apply(context, [image].concat(_toConsumableArray(params.map(function (param) { + return Math.floor(normalizeDecimalNumber(param)); + })))); + context.restore(); + return canvas; + } + var fromCharCode = String.fromCharCode; + /** + * Get string from char code in data view. + * @param {DataView} dataView - The data view for read. + * @param {number} start - The start index. + * @param {number} length - The read length. + * @returns {string} The read result. + */ + + function getStringFromCharCode(dataView, start, length) { + var str = ''; + length += start; + + for (var i = start; i < length; i += 1) { + str += fromCharCode(dataView.getUint8(i)); + } + + return str; + } + var REGEXP_DATA_URL_HEAD = /^data:.*,/; + /** + * Transform Data URL to array buffer. + * @param {string} dataURL - The Data URL to transform. + * @returns {ArrayBuffer} The result array buffer. + */ + + function dataURLToArrayBuffer(dataURL) { + var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, ''); + var binary = atob(base64); + var arrayBuffer = new ArrayBuffer(binary.length); + var uint8 = new Uint8Array(arrayBuffer); + forEach(uint8, function (value, i) { + uint8[i] = binary.charCodeAt(i); + }); + return arrayBuffer; + } + /** + * Transform array buffer to Data URL. + * @param {ArrayBuffer} arrayBuffer - The array buffer to transform. + * @param {string} mimeType - The mime type of the Data URL. + * @returns {string} The result Data URL. + */ + + function arrayBufferToDataURL(arrayBuffer, mimeType) { + var chunks = []; // Chunk Typed Array for better performance (#435) + + var chunkSize = 8192; + var uint8 = new Uint8Array(arrayBuffer); + + while (uint8.length > 0) { + // XXX: Babel's `toConsumableArray` helper will throw error in IE or Safari 9 + // eslint-disable-next-line prefer-spread + chunks.push(fromCharCode.apply(null, toArray(uint8.subarray(0, chunkSize)))); + uint8 = uint8.subarray(chunkSize); + } + + return "data:".concat(mimeType, ";base64,").concat(btoa(chunks.join(''))); + } + /** + * Get orientation value from given array buffer. + * @param {ArrayBuffer} arrayBuffer - The array buffer to read. + * @returns {number} The read orientation value. + */ + + function resetAndGetOrientation(arrayBuffer) { + var dataView = new DataView(arrayBuffer); + var orientation; // Ignores range error when the image does not have correct Exif information + + try { + var littleEndian; + var app1Start; + var ifdStart; // Only handle JPEG image (start by 0xFFD8) + + if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) { + var length = dataView.byteLength; + var offset = 2; + + while (offset + 1 < length) { + if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) { + app1Start = offset; + break; + } + + offset += 1; + } + } + + if (app1Start) { + var exifIDCode = app1Start + 4; + var tiffOffset = app1Start + 10; + + if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') { + var endianness = dataView.getUint16(tiffOffset); + littleEndian = endianness === 0x4949; + + if (littleEndian || endianness === 0x4D4D + /* bigEndian */ + ) { + if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) { + var firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian); + + if (firstIFDOffset >= 0x00000008) { + ifdStart = tiffOffset + firstIFDOffset; + } + } + } + } + } + + if (ifdStart) { + var _length = dataView.getUint16(ifdStart, littleEndian); + + var _offset; + + var i; + + for (i = 0; i < _length; i += 1) { + _offset = ifdStart + i * 12 + 2; + + if (dataView.getUint16(_offset, littleEndian) === 0x0112 + /* Orientation */ + ) { + // 8 is the offset of the current tag's value + _offset += 8; // Get the original orientation value + + orientation = dataView.getUint16(_offset, littleEndian); // Override the orientation with its default value + + dataView.setUint16(_offset, 1, littleEndian); + break; + } + } + } + } catch (error) { + orientation = 1; + } + + return orientation; + } + /** + * Parse Exif Orientation value. + * @param {number} orientation - The orientation to parse. + * @returns {Object} The parsed result. + */ + + function parseOrientation(orientation) { + var rotate = 0; + var scaleX = 1; + var scaleY = 1; + + switch (orientation) { + // Flip horizontal + case 2: + scaleX = -1; + break; + // Rotate left 180° + + case 3: + rotate = -180; + break; + // Flip vertical + + case 4: + scaleY = -1; + break; + // Flip vertical and rotate right 90° + + case 5: + rotate = 90; + scaleY = -1; + break; + // Rotate right 90° + + case 6: + rotate = 90; + break; + // Flip horizontal and rotate right 90° + + case 7: + rotate = 90; + scaleX = -1; + break; + // Rotate left 90° + + case 8: + rotate = -90; + break; + + default: + } + + return { + rotate: rotate, + scaleX: scaleX, + scaleY: scaleY + }; + } + + var render = { + render: function render() { + this.initContainer(); + this.initCanvas(); + this.initCropBox(); + this.renderCanvas(); + + if (this.cropped) { + this.renderCropBox(); + } + }, + initContainer: function initContainer() { + var element = this.element, + options = this.options, + container = this.container, + cropper = this.cropper; + addClass(cropper, CLASS_HIDDEN); + removeClass(element, CLASS_HIDDEN); + var containerData = { + width: Math.max(container.offsetWidth, Number(options.minContainerWidth) || 200), + height: Math.max(container.offsetHeight, Number(options.minContainerHeight) || 100) + }; + this.containerData = containerData; + setStyle(cropper, { + width: containerData.width, + height: containerData.height + }); + addClass(element, CLASS_HIDDEN); + removeClass(cropper, CLASS_HIDDEN); + }, + // Canvas (image wrapper) + initCanvas: function initCanvas() { + var containerData = this.containerData, + imageData = this.imageData; + var viewMode = this.options.viewMode; + var rotated = Math.abs(imageData.rotate) % 180 === 90; + var naturalWidth = rotated ? imageData.naturalHeight : imageData.naturalWidth; + var naturalHeight = rotated ? imageData.naturalWidth : imageData.naturalHeight; + var aspectRatio = naturalWidth / naturalHeight; + var canvasWidth = containerData.width; + var canvasHeight = containerData.height; + + if (containerData.height * aspectRatio > containerData.width) { + if (viewMode === 3) { + canvasWidth = containerData.height * aspectRatio; + } else { + canvasHeight = containerData.width / aspectRatio; + } + } else if (viewMode === 3) { + canvasHeight = containerData.width / aspectRatio; + } else { + canvasWidth = containerData.height * aspectRatio; + } + + var canvasData = { + aspectRatio: aspectRatio, + naturalWidth: naturalWidth, + naturalHeight: naturalHeight, + width: canvasWidth, + height: canvasHeight + }; + canvasData.left = (containerData.width - canvasWidth) / 2; + canvasData.top = (containerData.height - canvasHeight) / 2; + canvasData.oldLeft = canvasData.left; + canvasData.oldTop = canvasData.top; + this.canvasData = canvasData; + this.limited = viewMode === 1 || viewMode === 2; + this.limitCanvas(true, true); + this.initialImageData = assign({}, imageData); + this.initialCanvasData = assign({}, canvasData); + }, + limitCanvas: function limitCanvas(sizeLimited, positionLimited) { + var options = this.options, + containerData = this.containerData, + canvasData = this.canvasData, + cropBoxData = this.cropBoxData; + var viewMode = options.viewMode; + var aspectRatio = canvasData.aspectRatio; + var cropped = this.cropped && cropBoxData; + + if (sizeLimited) { + var minCanvasWidth = Number(options.minCanvasWidth) || 0; + var minCanvasHeight = Number(options.minCanvasHeight) || 0; + + if (viewMode > 1) { + minCanvasWidth = Math.max(minCanvasWidth, containerData.width); + minCanvasHeight = Math.max(minCanvasHeight, containerData.height); + + if (viewMode === 3) { + if (minCanvasHeight * aspectRatio > minCanvasWidth) { + minCanvasWidth = minCanvasHeight * aspectRatio; + } else { + minCanvasHeight = minCanvasWidth / aspectRatio; + } + } + } else if (viewMode > 0) { + if (minCanvasWidth) { + minCanvasWidth = Math.max(minCanvasWidth, cropped ? cropBoxData.width : 0); + } else if (minCanvasHeight) { + minCanvasHeight = Math.max(minCanvasHeight, cropped ? cropBoxData.height : 0); + } else if (cropped) { + minCanvasWidth = cropBoxData.width; + minCanvasHeight = cropBoxData.height; + + if (minCanvasHeight * aspectRatio > minCanvasWidth) { + minCanvasWidth = minCanvasHeight * aspectRatio; + } else { + minCanvasHeight = minCanvasWidth / aspectRatio; + } + } + } + + var _getAdjustedSizes = getAdjustedSizes({ + aspectRatio: aspectRatio, + width: minCanvasWidth, + height: minCanvasHeight + }); + + minCanvasWidth = _getAdjustedSizes.width; + minCanvasHeight = _getAdjustedSizes.height; + canvasData.minWidth = minCanvasWidth; + canvasData.minHeight = minCanvasHeight; + canvasData.maxWidth = Infinity; + canvasData.maxHeight = Infinity; + } + + if (positionLimited) { + if (viewMode > (cropped ? 0 : 1)) { + var newCanvasLeft = containerData.width - canvasData.width; + var newCanvasTop = containerData.height - canvasData.height; + canvasData.minLeft = Math.min(0, newCanvasLeft); + canvasData.minTop = Math.min(0, newCanvasTop); + canvasData.maxLeft = Math.max(0, newCanvasLeft); + canvasData.maxTop = Math.max(0, newCanvasTop); + + if (cropped && this.limited) { + canvasData.minLeft = Math.min(cropBoxData.left, cropBoxData.left + (cropBoxData.width - canvasData.width)); + canvasData.minTop = Math.min(cropBoxData.top, cropBoxData.top + (cropBoxData.height - canvasData.height)); + canvasData.maxLeft = cropBoxData.left; + canvasData.maxTop = cropBoxData.top; + + if (viewMode === 2) { + if (canvasData.width >= containerData.width) { + canvasData.minLeft = Math.min(0, newCanvasLeft); + canvasData.maxLeft = Math.max(0, newCanvasLeft); + } + + if (canvasData.height >= containerData.height) { + canvasData.minTop = Math.min(0, newCanvasTop); + canvasData.maxTop = Math.max(0, newCanvasTop); + } + } + } + } else { + canvasData.minLeft = -canvasData.width; + canvasData.minTop = -canvasData.height; + canvasData.maxLeft = containerData.width; + canvasData.maxTop = containerData.height; + } + } + }, + renderCanvas: function renderCanvas(changed, transformed) { + var canvasData = this.canvasData, + imageData = this.imageData; + + if (transformed) { + var _getRotatedSizes = getRotatedSizes({ + width: imageData.naturalWidth * Math.abs(imageData.scaleX || 1), + height: imageData.naturalHeight * Math.abs(imageData.scaleY || 1), + degree: imageData.rotate || 0 + }), + naturalWidth = _getRotatedSizes.width, + naturalHeight = _getRotatedSizes.height; + + var width = canvasData.width * (naturalWidth / canvasData.naturalWidth); + var height = canvasData.height * (naturalHeight / canvasData.naturalHeight); + canvasData.left -= (width - canvasData.width) / 2; + canvasData.top -= (height - canvasData.height) / 2; + canvasData.width = width; + canvasData.height = height; + canvasData.aspectRatio = naturalWidth / naturalHeight; + canvasData.naturalWidth = naturalWidth; + canvasData.naturalHeight = naturalHeight; + this.limitCanvas(true, false); + } + + if (canvasData.width > canvasData.maxWidth || canvasData.width < canvasData.minWidth) { + canvasData.left = canvasData.oldLeft; + } + + if (canvasData.height > canvasData.maxHeight || canvasData.height < canvasData.minHeight) { + canvasData.top = canvasData.oldTop; + } + + canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth); + canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight); + this.limitCanvas(false, true); + canvasData.left = Math.min(Math.max(canvasData.left, canvasData.minLeft), canvasData.maxLeft); + canvasData.top = Math.min(Math.max(canvasData.top, canvasData.minTop), canvasData.maxTop); + canvasData.oldLeft = canvasData.left; + canvasData.oldTop = canvasData.top; + setStyle(this.canvas, assign({ + width: canvasData.width, + height: canvasData.height + }, getTransforms({ + translateX: canvasData.left, + translateY: canvasData.top + }))); + this.renderImage(changed); + + if (this.cropped && this.limited) { + this.limitCropBox(true, true); + } + }, + renderImage: function renderImage(changed) { + var canvasData = this.canvasData, + imageData = this.imageData; + var width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth); + var height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight); + assign(imageData, { + width: width, + height: height, + left: (canvasData.width - width) / 2, + top: (canvasData.height - height) / 2 + }); + setStyle(this.image, assign({ + width: imageData.width, + height: imageData.height + }, getTransforms(assign({ + translateX: imageData.left, + translateY: imageData.top + }, imageData)))); + + if (changed) { + this.output(); + } + }, + initCropBox: function initCropBox() { + var options = this.options, + canvasData = this.canvasData; + var aspectRatio = options.aspectRatio || options.initialAspectRatio; + var autoCropArea = Number(options.autoCropArea) || 0.8; + var cropBoxData = { + width: canvasData.width, + height: canvasData.height + }; + + if (aspectRatio) { + if (canvasData.height * aspectRatio > canvasData.width) { + cropBoxData.height = cropBoxData.width / aspectRatio; + } else { + cropBoxData.width = cropBoxData.height * aspectRatio; + } + } + + this.cropBoxData = cropBoxData; + this.limitCropBox(true, true); // Initialize auto crop area + + cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth); + cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight); // The width/height of auto crop area must large than "minWidth/Height" + + cropBoxData.width = Math.max(cropBoxData.minWidth, cropBoxData.width * autoCropArea); + cropBoxData.height = Math.max(cropBoxData.minHeight, cropBoxData.height * autoCropArea); + cropBoxData.left = canvasData.left + (canvasData.width - cropBoxData.width) / 2; + cropBoxData.top = canvasData.top + (canvasData.height - cropBoxData.height) / 2; + cropBoxData.oldLeft = cropBoxData.left; + cropBoxData.oldTop = cropBoxData.top; + this.initialCropBoxData = assign({}, cropBoxData); + }, + limitCropBox: function limitCropBox(sizeLimited, positionLimited) { + var options = this.options, + containerData = this.containerData, + canvasData = this.canvasData, + cropBoxData = this.cropBoxData, + limited = this.limited; + var aspectRatio = options.aspectRatio; + + if (sizeLimited) { + var minCropBoxWidth = Number(options.minCropBoxWidth) || 0; + var minCropBoxHeight = Number(options.minCropBoxHeight) || 0; + var maxCropBoxWidth = limited ? Math.min(containerData.width, canvasData.width, canvasData.width + canvasData.left, containerData.width - canvasData.left) : containerData.width; + var maxCropBoxHeight = limited ? Math.min(containerData.height, canvasData.height, canvasData.height + canvasData.top, containerData.height - canvasData.top) : containerData.height; // The min/maxCropBoxWidth/Height must be less than container's width/height + + minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width); + minCropBoxHeight = Math.min(minCropBoxHeight, containerData.height); + + if (aspectRatio) { + if (minCropBoxWidth && minCropBoxHeight) { + if (minCropBoxHeight * aspectRatio > minCropBoxWidth) { + minCropBoxHeight = minCropBoxWidth / aspectRatio; + } else { + minCropBoxWidth = minCropBoxHeight * aspectRatio; + } + } else if (minCropBoxWidth) { + minCropBoxHeight = minCropBoxWidth / aspectRatio; + } else if (minCropBoxHeight) { + minCropBoxWidth = minCropBoxHeight * aspectRatio; + } + + if (maxCropBoxHeight * aspectRatio > maxCropBoxWidth) { + maxCropBoxHeight = maxCropBoxWidth / aspectRatio; + } else { + maxCropBoxWidth = maxCropBoxHeight * aspectRatio; + } + } // The minWidth/Height must be less than maxWidth/Height + + + cropBoxData.minWidth = Math.min(minCropBoxWidth, maxCropBoxWidth); + cropBoxData.minHeight = Math.min(minCropBoxHeight, maxCropBoxHeight); + cropBoxData.maxWidth = maxCropBoxWidth; + cropBoxData.maxHeight = maxCropBoxHeight; + } + + if (positionLimited) { + if (limited) { + cropBoxData.minLeft = Math.max(0, canvasData.left); + cropBoxData.minTop = Math.max(0, canvasData.top); + cropBoxData.maxLeft = Math.min(containerData.width, canvasData.left + canvasData.width) - cropBoxData.width; + cropBoxData.maxTop = Math.min(containerData.height, canvasData.top + canvasData.height) - cropBoxData.height; + } else { + cropBoxData.minLeft = 0; + cropBoxData.minTop = 0; + cropBoxData.maxLeft = containerData.width - cropBoxData.width; + cropBoxData.maxTop = containerData.height - cropBoxData.height; + } + } + }, + renderCropBox: function renderCropBox() { + var options = this.options, + containerData = this.containerData, + cropBoxData = this.cropBoxData; + + if (cropBoxData.width > cropBoxData.maxWidth || cropBoxData.width < cropBoxData.minWidth) { + cropBoxData.left = cropBoxData.oldLeft; + } + + if (cropBoxData.height > cropBoxData.maxHeight || cropBoxData.height < cropBoxData.minHeight) { + cropBoxData.top = cropBoxData.oldTop; + } + + cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth); + cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight); + this.limitCropBox(false, true); + cropBoxData.left = Math.min(Math.max(cropBoxData.left, cropBoxData.minLeft), cropBoxData.maxLeft); + cropBoxData.top = Math.min(Math.max(cropBoxData.top, cropBoxData.minTop), cropBoxData.maxTop); + cropBoxData.oldLeft = cropBoxData.left; + cropBoxData.oldTop = cropBoxData.top; + + if (options.movable && options.cropBoxMovable) { + // Turn to move the canvas when the crop box is equal to the container + setData(this.face, DATA_ACTION, cropBoxData.width >= containerData.width && cropBoxData.height >= containerData.height ? ACTION_MOVE : ACTION_ALL); + } + + setStyle(this.cropBox, assign({ + width: cropBoxData.width, + height: cropBoxData.height + }, getTransforms({ + translateX: cropBoxData.left, + translateY: cropBoxData.top + }))); + + if (this.cropped && this.limited) { + this.limitCanvas(true, true); + } + + if (!this.disabled) { + this.output(); + } + }, + output: function output() { + this.preview(); + dispatchEvent(this.element, EVENT_CROP, this.getData()); + } + }; + + var preview = { + initPreview: function initPreview() { + var element = this.element, + crossOrigin = this.crossOrigin; + var preview = this.options.preview; + var url = crossOrigin ? this.crossOriginUrl : this.url; + var alt = element.alt || 'The image to preview'; + var image = document.createElement('img'); + + if (crossOrigin) { + image.crossOrigin = crossOrigin; + } + + image.src = url; + image.alt = alt; + this.viewBox.appendChild(image); + this.viewBoxImage = image; + + if (!preview) { + return; + } + + var previews = preview; + + if (typeof preview === 'string') { + previews = element.ownerDocument.querySelectorAll(preview); + } else if (preview.querySelector) { + previews = [preview]; + } + + this.previews = previews; + forEach(previews, function (el) { + var img = document.createElement('img'); // Save the original size for recover + + setData(el, DATA_PREVIEW, { + width: el.offsetWidth, + height: el.offsetHeight, + html: el.innerHTML + }); + + if (crossOrigin) { + img.crossOrigin = crossOrigin; + } + + img.src = url; + img.alt = alt; + /** + * Override img element styles + * Add `display:block` to avoid margin top issue + * Add `height:auto` to override `height` attribute on IE8 + * (Occur only when margin-top <= -height) + */ + + img.style.cssText = 'display:block;' + 'width:100%;' + 'height:auto;' + 'min-width:0!important;' + 'min-height:0!important;' + 'max-width:none!important;' + 'max-height:none!important;' + 'image-orientation:0deg!important;"'; + el.innerHTML = ''; + el.appendChild(img); + }); + }, + resetPreview: function resetPreview() { + forEach(this.previews, function (element) { + var data = getData(element, DATA_PREVIEW); + setStyle(element, { + width: data.width, + height: data.height + }); + element.innerHTML = data.html; + removeData(element, DATA_PREVIEW); + }); + }, + preview: function preview() { + var imageData = this.imageData, + canvasData = this.canvasData, + cropBoxData = this.cropBoxData; + var cropBoxWidth = cropBoxData.width, + cropBoxHeight = cropBoxData.height; + var width = imageData.width, + height = imageData.height; + var left = cropBoxData.left - canvasData.left - imageData.left; + var top = cropBoxData.top - canvasData.top - imageData.top; + + if (!this.cropped || this.disabled) { + return; + } + + setStyle(this.viewBoxImage, assign({ + width: width, + height: height + }, getTransforms(assign({ + translateX: -left, + translateY: -top + }, imageData)))); + forEach(this.previews, function (element) { + var data = getData(element, DATA_PREVIEW); + var originalWidth = data.width; + var originalHeight = data.height; + var newWidth = originalWidth; + var newHeight = originalHeight; + var ratio = 1; + + if (cropBoxWidth) { + ratio = originalWidth / cropBoxWidth; + newHeight = cropBoxHeight * ratio; + } + + if (cropBoxHeight && newHeight > originalHeight) { + ratio = originalHeight / cropBoxHeight; + newWidth = cropBoxWidth * ratio; + newHeight = originalHeight; + } + + setStyle(element, { + width: newWidth, + height: newHeight + }); + setStyle(element.getElementsByTagName('img')[0], assign({ + width: width * ratio, + height: height * ratio + }, getTransforms(assign({ + translateX: -left * ratio, + translateY: -top * ratio + }, imageData)))); + }); + } + }; + + var events = { + bind: function bind() { + var element = this.element, + options = this.options, + cropper = this.cropper; + + if (isFunction(options.cropstart)) { + addListener(element, EVENT_CROP_START, options.cropstart); + } + + if (isFunction(options.cropmove)) { + addListener(element, EVENT_CROP_MOVE, options.cropmove); + } + + if (isFunction(options.cropend)) { + addListener(element, EVENT_CROP_END, options.cropend); + } + + if (isFunction(options.crop)) { + addListener(element, EVENT_CROP, options.crop); + } + + if (isFunction(options.zoom)) { + addListener(element, EVENT_ZOOM, options.zoom); + } + + addListener(cropper, EVENT_POINTER_DOWN, this.onCropStart = this.cropStart.bind(this)); + + if (options.zoomable && options.zoomOnWheel) { + addListener(cropper, EVENT_WHEEL, this.onWheel = this.wheel.bind(this), { + passive: false, + capture: true + }); + } + + if (options.toggleDragModeOnDblclick) { + addListener(cropper, EVENT_DBLCLICK, this.onDblclick = this.dblclick.bind(this)); + } + + addListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove = this.cropMove.bind(this)); + addListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd = this.cropEnd.bind(this)); + + if (options.responsive) { + addListener(window, EVENT_RESIZE, this.onResize = this.resize.bind(this)); + } + }, + unbind: function unbind() { + var element = this.element, + options = this.options, + cropper = this.cropper; + + if (isFunction(options.cropstart)) { + removeListener(element, EVENT_CROP_START, options.cropstart); + } + + if (isFunction(options.cropmove)) { + removeListener(element, EVENT_CROP_MOVE, options.cropmove); + } + + if (isFunction(options.cropend)) { + removeListener(element, EVENT_CROP_END, options.cropend); + } + + if (isFunction(options.crop)) { + removeListener(element, EVENT_CROP, options.crop); + } + + if (isFunction(options.zoom)) { + removeListener(element, EVENT_ZOOM, options.zoom); + } + + removeListener(cropper, EVENT_POINTER_DOWN, this.onCropStart); + + if (options.zoomable && options.zoomOnWheel) { + removeListener(cropper, EVENT_WHEEL, this.onWheel, { + passive: false, + capture: true + }); + } + + if (options.toggleDragModeOnDblclick) { + removeListener(cropper, EVENT_DBLCLICK, this.onDblclick); + } + + removeListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove); + removeListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd); + + if (options.responsive) { + removeListener(window, EVENT_RESIZE, this.onResize); + } + } + }; + + var handlers = { + resize: function resize() { + var options = this.options, + container = this.container, + containerData = this.containerData; + var minContainerWidth = Number(options.minContainerWidth) || MIN_CONTAINER_WIDTH; + var minContainerHeight = Number(options.minContainerHeight) || MIN_CONTAINER_HEIGHT; + + if (this.disabled || containerData.width <= minContainerWidth || containerData.height <= minContainerHeight) { + return; + } + + var ratio = container.offsetWidth / containerData.width; // Resize when width changed or height changed + + if (ratio !== 1 || container.offsetHeight !== containerData.height) { + var canvasData; + var cropBoxData; + + if (options.restore) { + canvasData = this.getCanvasData(); + cropBoxData = this.getCropBoxData(); + } + + this.render(); + + if (options.restore) { + this.setCanvasData(forEach(canvasData, function (n, i) { + canvasData[i] = n * ratio; + })); + this.setCropBoxData(forEach(cropBoxData, function (n, i) { + cropBoxData[i] = n * ratio; + })); + } + } + }, + dblclick: function dblclick() { + if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) { + return; + } + + this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP); + }, + wheel: function wheel(event) { + var _this = this; + + var ratio = Number(this.options.wheelZoomRatio) || 0.1; + var delta = 1; + + if (this.disabled) { + return; + } + + event.preventDefault(); // Limit wheel speed to prevent zoom too fast (#21) + + if (this.wheeling) { + return; + } + + this.wheeling = true; + setTimeout(function () { + _this.wheeling = false; + }, 50); + + if (event.deltaY) { + delta = event.deltaY > 0 ? 1 : -1; + } else if (event.wheelDelta) { + delta = -event.wheelDelta / 120; + } else if (event.detail) { + delta = event.detail > 0 ? 1 : -1; + } + + this.zoom(-delta * ratio, event); + }, + cropStart: function cropStart(event) { + var buttons = event.buttons, + button = event.button; + + if (this.disabled // No primary button (Usually the left button) + // Note that touch events have no `buttons` or `button` property + || isNumber(buttons) && buttons !== 1 || isNumber(button) && button !== 0 // Open context menu + || event.ctrlKey) { + return; + } + + var options = this.options, + pointers = this.pointers; + var action; + + if (event.changedTouches) { + // Handle touch event + forEach(event.changedTouches, function (touch) { + pointers[touch.identifier] = getPointer(touch); + }); + } else { + // Handle mouse event and pointer event + pointers[event.pointerId || 0] = getPointer(event); + } + + if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) { + action = ACTION_ZOOM; + } else { + action = getData(event.target, DATA_ACTION); + } + + if (!REGEXP_ACTIONS.test(action)) { + return; + } + + if (dispatchEvent(this.element, EVENT_CROP_START, { + originalEvent: event, + action: action + }) === false) { + return; + } // This line is required for preventing page zooming in iOS browsers + + + event.preventDefault(); + this.action = action; + this.cropping = false; + + if (action === ACTION_CROP) { + this.cropping = true; + addClass(this.dragBox, CLASS_MODAL); + } + }, + cropMove: function cropMove(event) { + var action = this.action; + + if (this.disabled || !action) { + return; + } + + var pointers = this.pointers; + event.preventDefault(); + + if (dispatchEvent(this.element, EVENT_CROP_MOVE, { + originalEvent: event, + action: action + }) === false) { + return; + } + + if (event.changedTouches) { + forEach(event.changedTouches, function (touch) { + // The first parameter should not be undefined (#432) + assign(pointers[touch.identifier] || {}, getPointer(touch, true)); + }); + } else { + assign(pointers[event.pointerId || 0] || {}, getPointer(event, true)); + } + + this.change(event); + }, + cropEnd: function cropEnd(event) { + if (this.disabled) { + return; + } + + var action = this.action, + pointers = this.pointers; + + if (event.changedTouches) { + forEach(event.changedTouches, function (touch) { + delete pointers[touch.identifier]; + }); + } else { + delete pointers[event.pointerId || 0]; + } + + if (!action) { + return; + } + + event.preventDefault(); + + if (!Object.keys(pointers).length) { + this.action = ''; + } + + if (this.cropping) { + this.cropping = false; + toggleClass(this.dragBox, CLASS_MODAL, this.cropped && this.options.modal); + } + + dispatchEvent(this.element, EVENT_CROP_END, { + originalEvent: event, + action: action + }); + } + }; + + var change = { + change: function change(event) { + var options = this.options, + canvasData = this.canvasData, + containerData = this.containerData, + cropBoxData = this.cropBoxData, + pointers = this.pointers; + var action = this.action; + var aspectRatio = options.aspectRatio; + var left = cropBoxData.left, + top = cropBoxData.top, + width = cropBoxData.width, + height = cropBoxData.height; + var right = left + width; + var bottom = top + height; + var minLeft = 0; + var minTop = 0; + var maxWidth = containerData.width; + var maxHeight = containerData.height; + var renderable = true; + var offset; // Locking aspect ratio in "free mode" by holding shift key + + if (!aspectRatio && event.shiftKey) { + aspectRatio = width && height ? width / height : 1; + } + + if (this.limited) { + minLeft = cropBoxData.minLeft; + minTop = cropBoxData.minTop; + maxWidth = minLeft + Math.min(containerData.width, canvasData.width, canvasData.left + canvasData.width); + maxHeight = minTop + Math.min(containerData.height, canvasData.height, canvasData.top + canvasData.height); + } + + var pointer = pointers[Object.keys(pointers)[0]]; + var range = { + x: pointer.endX - pointer.startX, + y: pointer.endY - pointer.startY + }; + + var check = function check(side) { + switch (side) { + case ACTION_EAST: + if (right + range.x > maxWidth) { + range.x = maxWidth - right; + } + + break; + + case ACTION_WEST: + if (left + range.x < minLeft) { + range.x = minLeft - left; + } + + break; + + case ACTION_NORTH: + if (top + range.y < minTop) { + range.y = minTop - top; + } + + break; + + case ACTION_SOUTH: + if (bottom + range.y > maxHeight) { + range.y = maxHeight - bottom; + } + + break; + + default: + } + }; + + switch (action) { + // Move crop box + case ACTION_ALL: + left += range.x; + top += range.y; + break; + // Resize crop box + + case ACTION_EAST: + if (range.x >= 0 && (right >= maxWidth || aspectRatio && (top <= minTop || bottom >= maxHeight))) { + renderable = false; + break; + } + + check(ACTION_EAST); + width += range.x; + + if (width < 0) { + action = ACTION_WEST; + width = -width; + left -= width; + } + + if (aspectRatio) { + height = width / aspectRatio; + top += (cropBoxData.height - height) / 2; + } + + break; + + case ACTION_NORTH: + if (range.y <= 0 && (top <= minTop || aspectRatio && (left <= minLeft || right >= maxWidth))) { + renderable = false; + break; + } + + check(ACTION_NORTH); + height -= range.y; + top += range.y; + + if (height < 0) { + action = ACTION_SOUTH; + height = -height; + top -= height; + } + + if (aspectRatio) { + width = height * aspectRatio; + left += (cropBoxData.width - width) / 2; + } + + break; + + case ACTION_WEST: + if (range.x <= 0 && (left <= minLeft || aspectRatio && (top <= minTop || bottom >= maxHeight))) { + renderable = false; + break; + } + + check(ACTION_WEST); + width -= range.x; + left += range.x; + + if (width < 0) { + action = ACTION_EAST; + width = -width; + left -= width; + } + + if (aspectRatio) { + height = width / aspectRatio; + top += (cropBoxData.height - height) / 2; + } + + break; + + case ACTION_SOUTH: + if (range.y >= 0 && (bottom >= maxHeight || aspectRatio && (left <= minLeft || right >= maxWidth))) { + renderable = false; + break; + } + + check(ACTION_SOUTH); + height += range.y; + + if (height < 0) { + action = ACTION_NORTH; + height = -height; + top -= height; + } + + if (aspectRatio) { + width = height * aspectRatio; + left += (cropBoxData.width - width) / 2; + } + + break; + + case ACTION_NORTH_EAST: + if (aspectRatio) { + if (range.y <= 0 && (top <= minTop || right >= maxWidth)) { + renderable = false; + break; + } + + check(ACTION_NORTH); + height -= range.y; + top += range.y; + width = height * aspectRatio; + } else { + check(ACTION_NORTH); + check(ACTION_EAST); + + if (range.x >= 0) { + if (right < maxWidth) { + width += range.x; + } else if (range.y <= 0 && top <= minTop) { + renderable = false; + } + } else { + width += range.x; + } + + if (range.y <= 0) { + if (top > minTop) { + height -= range.y; + top += range.y; + } + } else { + height -= range.y; + top += range.y; + } + } + + if (width < 0 && height < 0) { + action = ACTION_SOUTH_WEST; + height = -height; + width = -width; + top -= height; + left -= width; + } else if (width < 0) { + action = ACTION_NORTH_WEST; + width = -width; + left -= width; + } else if (height < 0) { + action = ACTION_SOUTH_EAST; + height = -height; + top -= height; + } + + break; + + case ACTION_NORTH_WEST: + if (aspectRatio) { + if (range.y <= 0 && (top <= minTop || left <= minLeft)) { + renderable = false; + break; + } + + check(ACTION_NORTH); + height -= range.y; + top += range.y; + width = height * aspectRatio; + left += cropBoxData.width - width; + } else { + check(ACTION_NORTH); + check(ACTION_WEST); + + if (range.x <= 0) { + if (left > minLeft) { + width -= range.x; + left += range.x; + } else if (range.y <= 0 && top <= minTop) { + renderable = false; + } + } else { + width -= range.x; + left += range.x; + } + + if (range.y <= 0) { + if (top > minTop) { + height -= range.y; + top += range.y; + } + } else { + height -= range.y; + top += range.y; + } + } + + if (width < 0 && height < 0) { + action = ACTION_SOUTH_EAST; + height = -height; + width = -width; + top -= height; + left -= width; + } else if (width < 0) { + action = ACTION_NORTH_EAST; + width = -width; + left -= width; + } else if (height < 0) { + action = ACTION_SOUTH_WEST; + height = -height; + top -= height; + } + + break; + + case ACTION_SOUTH_WEST: + if (aspectRatio) { + if (range.x <= 0 && (left <= minLeft || bottom >= maxHeight)) { + renderable = false; + break; + } + + check(ACTION_WEST); + width -= range.x; + left += range.x; + height = width / aspectRatio; + } else { + check(ACTION_SOUTH); + check(ACTION_WEST); + + if (range.x <= 0) { + if (left > minLeft) { + width -= range.x; + left += range.x; + } else if (range.y >= 0 && bottom >= maxHeight) { + renderable = false; + } + } else { + width -= range.x; + left += range.x; + } + + if (range.y >= 0) { + if (bottom < maxHeight) { + height += range.y; + } + } else { + height += range.y; + } + } + + if (width < 0 && height < 0) { + action = ACTION_NORTH_EAST; + height = -height; + width = -width; + top -= height; + left -= width; + } else if (width < 0) { + action = ACTION_SOUTH_EAST; + width = -width; + left -= width; + } else if (height < 0) { + action = ACTION_NORTH_WEST; + height = -height; + top -= height; + } + + break; + + case ACTION_SOUTH_EAST: + if (aspectRatio) { + if (range.x >= 0 && (right >= maxWidth || bottom >= maxHeight)) { + renderable = false; + break; + } + + check(ACTION_EAST); + width += range.x; + height = width / aspectRatio; + } else { + check(ACTION_SOUTH); + check(ACTION_EAST); + + if (range.x >= 0) { + if (right < maxWidth) { + width += range.x; + } else if (range.y >= 0 && bottom >= maxHeight) { + renderable = false; + } + } else { + width += range.x; + } + + if (range.y >= 0) { + if (bottom < maxHeight) { + height += range.y; + } + } else { + height += range.y; + } + } + + if (width < 0 && height < 0) { + action = ACTION_NORTH_WEST; + height = -height; + width = -width; + top -= height; + left -= width; + } else if (width < 0) { + action = ACTION_SOUTH_WEST; + width = -width; + left -= width; + } else if (height < 0) { + action = ACTION_NORTH_EAST; + height = -height; + top -= height; + } + + break; + // Move canvas + + case ACTION_MOVE: + this.move(range.x, range.y); + renderable = false; + break; + // Zoom canvas + + case ACTION_ZOOM: + this.zoom(getMaxZoomRatio(pointers), event); + renderable = false; + break; + // Create crop box + + case ACTION_CROP: + if (!range.x || !range.y) { + renderable = false; + break; + } + + offset = getOffset(this.cropper); + left = pointer.startX - offset.left; + top = pointer.startY - offset.top; + width = cropBoxData.minWidth; + height = cropBoxData.minHeight; + + if (range.x > 0) { + action = range.y > 0 ? ACTION_SOUTH_EAST : ACTION_NORTH_EAST; + } else if (range.x < 0) { + left -= width; + action = range.y > 0 ? ACTION_SOUTH_WEST : ACTION_NORTH_WEST; + } + + if (range.y < 0) { + top -= height; + } // Show the crop box if is hidden + + + if (!this.cropped) { + removeClass(this.cropBox, CLASS_HIDDEN); + this.cropped = true; + + if (this.limited) { + this.limitCropBox(true, true); + } + } + + break; + + default: + } + + if (renderable) { + cropBoxData.width = width; + cropBoxData.height = height; + cropBoxData.left = left; + cropBoxData.top = top; + this.action = action; + this.renderCropBox(); + } // Override + + + forEach(pointers, function (p) { + p.startX = p.endX; + p.startY = p.endY; + }); + } + }; + + var methods = { + // Show the crop box manually + crop: function crop() { + if (this.ready && !this.cropped && !this.disabled) { + this.cropped = true; + this.limitCropBox(true, true); + + if (this.options.modal) { + addClass(this.dragBox, CLASS_MODAL); + } + + removeClass(this.cropBox, CLASS_HIDDEN); + this.setCropBoxData(this.initialCropBoxData); + } + + return this; + }, + // Reset the image and crop box to their initial states + reset: function reset() { + if (this.ready && !this.disabled) { + this.imageData = assign({}, this.initialImageData); + this.canvasData = assign({}, this.initialCanvasData); + this.cropBoxData = assign({}, this.initialCropBoxData); + this.renderCanvas(); + + if (this.cropped) { + this.renderCropBox(); + } + } + + return this; + }, + // Clear the crop box + clear: function clear() { + if (this.cropped && !this.disabled) { + assign(this.cropBoxData, { + left: 0, + top: 0, + width: 0, + height: 0 + }); + this.cropped = false; + this.renderCropBox(); + this.limitCanvas(true, true); // Render canvas after crop box rendered + + this.renderCanvas(); + removeClass(this.dragBox, CLASS_MODAL); + addClass(this.cropBox, CLASS_HIDDEN); + } + + return this; + }, + + /** + * Replace the image's src and rebuild the cropper + * @param {string} url - The new URL. + * @param {boolean} [hasSameSize] - Indicate if the new image has the same size as the old one. + * @returns {Cropper} this + */ + replace: function replace(url) { + var hasSameSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (!this.disabled && url) { + if (this.isImg) { + this.element.src = url; + } + + if (hasSameSize) { + this.url = url; + this.image.src = url; + + if (this.ready) { + this.viewBoxImage.src = url; + forEach(this.previews, function (element) { + element.getElementsByTagName('img')[0].src = url; + }); + } + } else { + if (this.isImg) { + this.replaced = true; + } + + this.options.data = null; + this.uncreate(); + this.load(url); + } + } + + return this; + }, + // Enable (unfreeze) the cropper + enable: function enable() { + if (this.ready && this.disabled) { + this.disabled = false; + removeClass(this.cropper, CLASS_DISABLED); + } + + return this; + }, + // Disable (freeze) the cropper + disable: function disable() { + if (this.ready && !this.disabled) { + this.disabled = true; + addClass(this.cropper, CLASS_DISABLED); + } + + return this; + }, + + /** + * Destroy the cropper and remove the instance from the image + * @returns {Cropper} this + */ + destroy: function destroy() { + var element = this.element; + + if (!element[NAMESPACE]) { + return this; + } + + element[NAMESPACE] = undefined; + + if (this.isImg && this.replaced) { + element.src = this.originalUrl; + } + + this.uncreate(); + return this; + }, + + /** + * Move the canvas with relative offsets + * @param {number} offsetX - The relative offset distance on the x-axis. + * @param {number} [offsetY=offsetX] - The relative offset distance on the y-axis. + * @returns {Cropper} this + */ + move: function move(offsetX) { + var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : offsetX; + var _this$canvasData = this.canvasData, + left = _this$canvasData.left, + top = _this$canvasData.top; + return this.moveTo(isUndefined(offsetX) ? offsetX : left + Number(offsetX), isUndefined(offsetY) ? offsetY : top + Number(offsetY)); + }, + + /** + * Move the canvas to an absolute point + * @param {number} x - The x-axis coordinate. + * @param {number} [y=x] - The y-axis coordinate. + * @returns {Cropper} this + */ + moveTo: function moveTo(x) { + var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x; + var canvasData = this.canvasData; + var changed = false; + x = Number(x); + y = Number(y); + + if (this.ready && !this.disabled && this.options.movable) { + if (isNumber(x)) { + canvasData.left = x; + changed = true; + } + + if (isNumber(y)) { + canvasData.top = y; + changed = true; + } + + if (changed) { + this.renderCanvas(true); + } + } + + return this; + }, + + /** + * Zoom the canvas with a relative ratio + * @param {number} ratio - The target ratio. + * @param {Event} _originalEvent - The original event if any. + * @returns {Cropper} this + */ + zoom: function zoom(ratio, _originalEvent) { + var canvasData = this.canvasData; + ratio = Number(ratio); + + if (ratio < 0) { + ratio = 1 / (1 - ratio); + } else { + ratio = 1 + ratio; + } + + return this.zoomTo(canvasData.width * ratio / canvasData.naturalWidth, null, _originalEvent); + }, + + /** + * Zoom the canvas to an absolute ratio + * @param {number} ratio - The target ratio. + * @param {Object} pivot - The zoom pivot point coordinate. + * @param {Event} _originalEvent - The original event if any. + * @returns {Cropper} this + */ + zoomTo: function zoomTo(ratio, pivot, _originalEvent) { + var options = this.options, + canvasData = this.canvasData; + var width = canvasData.width, + height = canvasData.height, + naturalWidth = canvasData.naturalWidth, + naturalHeight = canvasData.naturalHeight; + ratio = Number(ratio); + + if (ratio >= 0 && this.ready && !this.disabled && options.zoomable) { + var newWidth = naturalWidth * ratio; + var newHeight = naturalHeight * ratio; + + if (dispatchEvent(this.element, EVENT_ZOOM, { + ratio: ratio, + oldRatio: width / naturalWidth, + originalEvent: _originalEvent + }) === false) { + return this; + } + + if (_originalEvent) { + var pointers = this.pointers; + var offset = getOffset(this.cropper); + var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : { + pageX: _originalEvent.pageX, + pageY: _originalEvent.pageY + }; // Zoom from the triggering point of the event + + canvasData.left -= (newWidth - width) * ((center.pageX - offset.left - canvasData.left) / width); + canvasData.top -= (newHeight - height) * ((center.pageY - offset.top - canvasData.top) / height); + } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) { + canvasData.left -= (newWidth - width) * ((pivot.x - canvasData.left) / width); + canvasData.top -= (newHeight - height) * ((pivot.y - canvasData.top) / height); + } else { + // Zoom from the center of the canvas + canvasData.left -= (newWidth - width) / 2; + canvasData.top -= (newHeight - height) / 2; + } + + canvasData.width = newWidth; + canvasData.height = newHeight; + this.renderCanvas(true); + } + + return this; + }, + + /** + * Rotate the canvas with a relative degree + * @param {number} degree - The rotate degree. + * @returns {Cropper} this + */ + rotate: function rotate(degree) { + return this.rotateTo((this.imageData.rotate || 0) + Number(degree)); + }, + + /** + * Rotate the canvas to an absolute degree + * @param {number} degree - The rotate degree. + * @returns {Cropper} this + */ + rotateTo: function rotateTo(degree) { + degree = Number(degree); + + if (isNumber(degree) && this.ready && !this.disabled && this.options.rotatable) { + this.imageData.rotate = degree % 360; + this.renderCanvas(true, true); + } + + return this; + }, + + /** + * Scale the image on the x-axis. + * @param {number} scaleX - The scale ratio on the x-axis. + * @returns {Cropper} this + */ + scaleX: function scaleX(_scaleX) { + var scaleY = this.imageData.scaleY; + return this.scale(_scaleX, isNumber(scaleY) ? scaleY : 1); + }, + + /** + * Scale the image on the y-axis. + * @param {number} scaleY - The scale ratio on the y-axis. + * @returns {Cropper} this + */ + scaleY: function scaleY(_scaleY) { + var scaleX = this.imageData.scaleX; + return this.scale(isNumber(scaleX) ? scaleX : 1, _scaleY); + }, + + /** + * Scale the image + * @param {number} scaleX - The scale ratio on the x-axis. + * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis. + * @returns {Cropper} this + */ + scale: function scale(scaleX) { + var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX; + var imageData = this.imageData; + var transformed = false; + scaleX = Number(scaleX); + scaleY = Number(scaleY); + + if (this.ready && !this.disabled && this.options.scalable) { + if (isNumber(scaleX)) { + imageData.scaleX = scaleX; + transformed = true; + } + + if (isNumber(scaleY)) { + imageData.scaleY = scaleY; + transformed = true; + } + + if (transformed) { + this.renderCanvas(true, true); + } + } + + return this; + }, + + /** + * Get the cropped area position and size data (base on the original image) + * @param {boolean} [rounded=false] - Indicate if round the data values or not. + * @returns {Object} The result cropped data. + */ + getData: function getData() { + var rounded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + var options = this.options, + imageData = this.imageData, + canvasData = this.canvasData, + cropBoxData = this.cropBoxData; + var data; + + if (this.ready && this.cropped) { + data = { + x: cropBoxData.left - canvasData.left, + y: cropBoxData.top - canvasData.top, + width: cropBoxData.width, + height: cropBoxData.height + }; + var ratio = imageData.width / imageData.naturalWidth; + forEach(data, function (n, i) { + data[i] = n / ratio; + }); + + if (rounded) { + // In case rounding off leads to extra 1px in right or bottom border + // we should round the top-left corner and the dimension (#343). + var bottom = Math.round(data.y + data.height); + var right = Math.round(data.x + data.width); + data.x = Math.round(data.x); + data.y = Math.round(data.y); + data.width = right - data.x; + data.height = bottom - data.y; + } + } else { + data = { + x: 0, + y: 0, + width: 0, + height: 0 + }; + } + + if (options.rotatable) { + data.rotate = imageData.rotate || 0; + } + + if (options.scalable) { + data.scaleX = imageData.scaleX || 1; + data.scaleY = imageData.scaleY || 1; + } + + return data; + }, + + /** + * Set the cropped area position and size with new data + * @param {Object} data - The new data. + * @returns {Cropper} this + */ + setData: function setData(data) { + var options = this.options, + imageData = this.imageData, + canvasData = this.canvasData; + var cropBoxData = {}; + + if (this.ready && !this.disabled && isPlainObject(data)) { + var transformed = false; + + if (options.rotatable) { + if (isNumber(data.rotate) && data.rotate !== imageData.rotate) { + imageData.rotate = data.rotate; + transformed = true; + } + } + + if (options.scalable) { + if (isNumber(data.scaleX) && data.scaleX !== imageData.scaleX) { + imageData.scaleX = data.scaleX; + transformed = true; + } + + if (isNumber(data.scaleY) && data.scaleY !== imageData.scaleY) { + imageData.scaleY = data.scaleY; + transformed = true; + } + } + + if (transformed) { + this.renderCanvas(true, true); + } + + var ratio = imageData.width / imageData.naturalWidth; + + if (isNumber(data.x)) { + cropBoxData.left = data.x * ratio + canvasData.left; + } + + if (isNumber(data.y)) { + cropBoxData.top = data.y * ratio + canvasData.top; + } + + if (isNumber(data.width)) { + cropBoxData.width = data.width * ratio; + } + + if (isNumber(data.height)) { + cropBoxData.height = data.height * ratio; + } + + this.setCropBoxData(cropBoxData); + } + + return this; + }, + + /** + * Get the container size data. + * @returns {Object} The result container data. + */ + getContainerData: function getContainerData() { + return this.ready ? assign({}, this.containerData) : {}; + }, + + /** + * Get the image position and size data. + * @returns {Object} The result image data. + */ + getImageData: function getImageData() { + return this.sized ? assign({}, this.imageData) : {}; + }, + + /** + * Get the canvas position and size data. + * @returns {Object} The result canvas data. + */ + getCanvasData: function getCanvasData() { + var canvasData = this.canvasData; + var data = {}; + + if (this.ready) { + forEach(['left', 'top', 'width', 'height', 'naturalWidth', 'naturalHeight'], function (n) { + data[n] = canvasData[n]; + }); + } + + return data; + }, + + /** + * Set the canvas position and size with new data. + * @param {Object} data - The new canvas data. + * @returns {Cropper} this + */ + setCanvasData: function setCanvasData(data) { + var canvasData = this.canvasData; + var aspectRatio = canvasData.aspectRatio; + + if (this.ready && !this.disabled && isPlainObject(data)) { + if (isNumber(data.left)) { + canvasData.left = data.left; + } + + if (isNumber(data.top)) { + canvasData.top = data.top; + } + + if (isNumber(data.width)) { + canvasData.width = data.width; + canvasData.height = data.width / aspectRatio; + } else if (isNumber(data.height)) { + canvasData.height = data.height; + canvasData.width = data.height * aspectRatio; + } + + this.renderCanvas(true); + } + + return this; + }, + + /** + * Get the crop box position and size data. + * @returns {Object} The result crop box data. + */ + getCropBoxData: function getCropBoxData() { + var cropBoxData = this.cropBoxData; + var data; + + if (this.ready && this.cropped) { + data = { + left: cropBoxData.left, + top: cropBoxData.top, + width: cropBoxData.width, + height: cropBoxData.height + }; + } + + return data || {}; + }, + + /** + * Set the crop box position and size with new data. + * @param {Object} data - The new crop box data. + * @returns {Cropper} this + */ + setCropBoxData: function setCropBoxData(data) { + var cropBoxData = this.cropBoxData; + var aspectRatio = this.options.aspectRatio; + var widthChanged; + var heightChanged; + + if (this.ready && this.cropped && !this.disabled && isPlainObject(data)) { + if (isNumber(data.left)) { + cropBoxData.left = data.left; + } + + if (isNumber(data.top)) { + cropBoxData.top = data.top; + } + + if (isNumber(data.width) && data.width !== cropBoxData.width) { + widthChanged = true; + cropBoxData.width = data.width; + } + + if (isNumber(data.height) && data.height !== cropBoxData.height) { + heightChanged = true; + cropBoxData.height = data.height; + } + + if (aspectRatio) { + if (widthChanged) { + cropBoxData.height = cropBoxData.width / aspectRatio; + } else if (heightChanged) { + cropBoxData.width = cropBoxData.height * aspectRatio; + } + } + + this.renderCropBox(); + } + + return this; + }, + + /** + * Get a canvas drawn the cropped image. + * @param {Object} [options={}] - The config options. + * @returns {HTMLCanvasElement} - The result canvas. + */ + getCroppedCanvas: function getCroppedCanvas() { + var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + + if (!this.ready || !window.HTMLCanvasElement) { + return null; + } + + var canvasData = this.canvasData; + var source = getSourceCanvas(this.image, this.imageData, canvasData, options); // Returns the source canvas if it is not cropped. + + if (!this.cropped) { + return source; + } + + var _this$getData = this.getData(), + initialX = _this$getData.x, + initialY = _this$getData.y, + initialWidth = _this$getData.width, + initialHeight = _this$getData.height; + + var ratio = source.width / Math.floor(canvasData.naturalWidth); + + if (ratio !== 1) { + initialX *= ratio; + initialY *= ratio; + initialWidth *= ratio; + initialHeight *= ratio; + } + + var aspectRatio = initialWidth / initialHeight; + var maxSizes = getAdjustedSizes({ + aspectRatio: aspectRatio, + width: options.maxWidth || Infinity, + height: options.maxHeight || Infinity + }); + var minSizes = getAdjustedSizes({ + aspectRatio: aspectRatio, + width: options.minWidth || 0, + height: options.minHeight || 0 + }, 'cover'); + + var _getAdjustedSizes = getAdjustedSizes({ + aspectRatio: aspectRatio, + width: options.width || (ratio !== 1 ? source.width : initialWidth), + height: options.height || (ratio !== 1 ? source.height : initialHeight) + }), + width = _getAdjustedSizes.width, + height = _getAdjustedSizes.height; + + width = Math.min(maxSizes.width, Math.max(minSizes.width, width)); + height = Math.min(maxSizes.height, Math.max(minSizes.height, height)); + var canvas = document.createElement('canvas'); + var context = canvas.getContext('2d'); + canvas.width = normalizeDecimalNumber(width); + canvas.height = normalizeDecimalNumber(height); + context.fillStyle = options.fillColor || 'transparent'; + context.fillRect(0, 0, width, height); + var _options$imageSmoothi = options.imageSmoothingEnabled, + imageSmoothingEnabled = _options$imageSmoothi === void 0 ? true : _options$imageSmoothi, + imageSmoothingQuality = options.imageSmoothingQuality; + context.imageSmoothingEnabled = imageSmoothingEnabled; + + if (imageSmoothingQuality) { + context.imageSmoothingQuality = imageSmoothingQuality; + } // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.drawImage + + + var sourceWidth = source.width; + var sourceHeight = source.height; // Source canvas parameters + + var srcX = initialX; + var srcY = initialY; + var srcWidth; + var srcHeight; // Destination canvas parameters + + var dstX; + var dstY; + var dstWidth; + var dstHeight; + + if (srcX <= -initialWidth || srcX > sourceWidth) { + srcX = 0; + srcWidth = 0; + dstX = 0; + dstWidth = 0; + } else if (srcX <= 0) { + dstX = -srcX; + srcX = 0; + srcWidth = Math.min(sourceWidth, initialWidth + srcX); + dstWidth = srcWidth; + } else if (srcX <= sourceWidth) { + dstX = 0; + srcWidth = Math.min(initialWidth, sourceWidth - srcX); + dstWidth = srcWidth; + } + + if (srcWidth <= 0 || srcY <= -initialHeight || srcY > sourceHeight) { + srcY = 0; + srcHeight = 0; + dstY = 0; + dstHeight = 0; + } else if (srcY <= 0) { + dstY = -srcY; + srcY = 0; + srcHeight = Math.min(sourceHeight, initialHeight + srcY); + dstHeight = srcHeight; + } else if (srcY <= sourceHeight) { + dstY = 0; + srcHeight = Math.min(initialHeight, sourceHeight - srcY); + dstHeight = srcHeight; + } + + var params = [srcX, srcY, srcWidth, srcHeight]; // Avoid "IndexSizeError" + + if (dstWidth > 0 && dstHeight > 0) { + var scale = width / initialWidth; + params.push(dstX * scale, dstY * scale, dstWidth * scale, dstHeight * scale); + } // All the numerical parameters should be integer for `drawImage` + // https://github.com/fengyuanchen/cropper/issues/476 + + + context.drawImage.apply(context, [source].concat(_toConsumableArray(params.map(function (param) { + return Math.floor(normalizeDecimalNumber(param)); + })))); + return canvas; + }, + + /** + * Change the aspect ratio of the crop box. + * @param {number} aspectRatio - The new aspect ratio. + * @returns {Cropper} this + */ + setAspectRatio: function setAspectRatio(aspectRatio) { + var options = this.options; + + if (!this.disabled && !isUndefined(aspectRatio)) { + // 0 -> NaN + options.aspectRatio = Math.max(0, aspectRatio) || NaN; + + if (this.ready) { + this.initCropBox(); + + if (this.cropped) { + this.renderCropBox(); + } + } + } + + return this; + }, + + /** + * Change the drag mode. + * @param {string} mode - The new drag mode. + * @returns {Cropper} this + */ + setDragMode: function setDragMode(mode) { + var options = this.options, + dragBox = this.dragBox, + face = this.face; + + if (this.ready && !this.disabled) { + var croppable = mode === DRAG_MODE_CROP; + var movable = options.movable && mode === DRAG_MODE_MOVE; + mode = croppable || movable ? mode : DRAG_MODE_NONE; + options.dragMode = mode; + setData(dragBox, DATA_ACTION, mode); + toggleClass(dragBox, CLASS_CROP, croppable); + toggleClass(dragBox, CLASS_MOVE, movable); + + if (!options.cropBoxMovable) { + // Sync drag mode to crop box when it is not movable + setData(face, DATA_ACTION, mode); + toggleClass(face, CLASS_CROP, croppable); + toggleClass(face, CLASS_MOVE, movable); + } + } + + return this; + } + }; + + var AnotherCropper = WINDOW.Cropper; + + var Cropper = + /*#__PURE__*/ + function () { + /** + * Create a new Cropper. + * @param {Element} element - The target element for cropping. + * @param {Object} [options={}] - The configuration options. + */ + function Cropper(element) { + var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + _classCallCheck(this, Cropper); + + if (!element || !REGEXP_TAG_NAME.test(element.tagName)) { + throw new Error('The first argument is required and must be an or element.'); + } + + this.element = element; + this.options = assign({}, DEFAULTS, isPlainObject(options) && options); + this.cropped = false; + this.disabled = false; + this.pointers = {}; + this.ready = false; + this.reloading = false; + this.replaced = false; + this.sized = false; + this.sizing = false; + this.init(); + } + + _createClass(Cropper, [{ + key: "init", + value: function init() { + var element = this.element; + var tagName = element.tagName.toLowerCase(); + var url; + + if (element[NAMESPACE]) { + return; + } + + element[NAMESPACE] = this; + + if (tagName === 'img') { + this.isImg = true; // e.g.: "img/picture.jpg" + + url = element.getAttribute('src') || ''; + this.originalUrl = url; // Stop when it's a blank image + + if (!url) { + return; + } // e.g.: "http://example.com/img/picture.jpg" + + + url = element.src; + } else if (tagName === 'canvas' && window.HTMLCanvasElement) { + url = element.toDataURL(); + } + + this.load(url); + } + }, { + key: "load", + value: function load(url) { + var _this = this; + + if (!url) { + return; + } + + this.url = url; + this.imageData = {}; + var element = this.element, + options = this.options; + + if (!options.rotatable && !options.scalable) { + options.checkOrientation = false; + } // Only IE10+ supports Typed Arrays + + + if (!options.checkOrientation || !window.ArrayBuffer) { + this.clone(); + return; + } // Detect the mime type of the image directly if it is a Data URL + + + if (REGEXP_DATA_URL.test(url)) { + // Read ArrayBuffer from Data URL of JPEG images directly for better performance + if (REGEXP_DATA_URL_JPEG.test(url)) { + this.read(dataURLToArrayBuffer(url)); + } else { + // Only a JPEG image may contains Exif Orientation information, + // the rest types of Data URLs are not necessary to check orientation at all. + this.clone(); + } + + return; + } // 1. Detect the mime type of the image by a XMLHttpRequest. + // 2. Load the image as ArrayBuffer for reading orientation if its a JPEG image. + + + var xhr = new XMLHttpRequest(); + var clone = this.clone.bind(this); + this.reloading = true; + this.xhr = xhr; // 1. Cross origin requests are only supported for protocol schemes: + // http, https, data, chrome, chrome-extension. + // 2. Access to XMLHttpRequest from a Data URL will be blocked by CORS policy + // in some browsers as IE11 and Safari. + + xhr.onabort = clone; + xhr.onerror = clone; + xhr.ontimeout = clone; + + xhr.onprogress = function () { + // Abort the request directly if it not a JPEG image for better performance + if (xhr.getResponseHeader('content-type') !== MIME_TYPE_JPEG) { + xhr.abort(); + } + }; + + xhr.onload = function () { + _this.read(xhr.response); + }; + + xhr.onloadend = function () { + _this.reloading = false; + _this.xhr = null; + }; // Bust cache when there is a "crossOrigin" property to avoid browser cache error + + + if (options.checkCrossOrigin && isCrossOriginURL(url) && element.crossOrigin) { + url = addTimestamp(url); + } + + xhr.open('GET', url); + xhr.responseType = 'arraybuffer'; + xhr.withCredentials = element.crossOrigin === 'use-credentials'; + xhr.send(); + } + }, { + key: "read", + value: function read(arrayBuffer) { + var options = this.options, + imageData = this.imageData; // Reset the orientation value to its default value 1 + // as some iOS browsers will render image with its orientation + + var orientation = resetAndGetOrientation(arrayBuffer); + var rotate = 0; + var scaleX = 1; + var scaleY = 1; + + if (orientation > 1) { + // Generate a new URL which has the default orientation value + this.url = arrayBufferToDataURL(arrayBuffer, MIME_TYPE_JPEG); + + var _parseOrientation = parseOrientation(orientation); + + rotate = _parseOrientation.rotate; + scaleX = _parseOrientation.scaleX; + scaleY = _parseOrientation.scaleY; + } + + if (options.rotatable) { + imageData.rotate = rotate; + } + + if (options.scalable) { + imageData.scaleX = scaleX; + imageData.scaleY = scaleY; + } + + this.clone(); + } + }, { + key: "clone", + value: function clone() { + var element = this.element, + url = this.url; + var crossOrigin = element.crossOrigin; + var crossOriginUrl = url; + + if (this.options.checkCrossOrigin && isCrossOriginURL(url)) { + if (!crossOrigin) { + crossOrigin = 'anonymous'; + } // Bust cache when there is not a "crossOrigin" property (#519) + + + crossOriginUrl = addTimestamp(url); + } + + this.crossOrigin = crossOrigin; + this.crossOriginUrl = crossOriginUrl; + var image = document.createElement('img'); + + if (crossOrigin) { + image.crossOrigin = crossOrigin; + } + + image.src = crossOriginUrl || url; + image.alt = element.alt || 'The image to crop'; + this.image = image; + image.onload = this.start.bind(this); + image.onerror = this.stop.bind(this); + addClass(image, CLASS_HIDE); + element.parentNode.insertBefore(image, element.nextSibling); + } + }, { + key: "start", + value: function start() { + var _this2 = this; + + var image = this.image; + image.onload = null; + image.onerror = null; + this.sizing = true; // Match all browsers that use WebKit as the layout engine in iOS devices, + // such as Safari for iOS, Chrome for iOS, and in-app browsers. + + var isIOSWebKit = WINDOW.navigator && /(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(WINDOW.navigator.userAgent); + + var done = function done(naturalWidth, naturalHeight) { + assign(_this2.imageData, { + naturalWidth: naturalWidth, + naturalHeight: naturalHeight, + aspectRatio: naturalWidth / naturalHeight + }); + _this2.sizing = false; + _this2.sized = true; + + _this2.build(); + }; // Most modern browsers (excepts iOS WebKit) + + + if (image.naturalWidth && !isIOSWebKit) { + done(image.naturalWidth, image.naturalHeight); + return; + } + + var sizingImage = document.createElement('img'); + var body = document.body || document.documentElement; + this.sizingImage = sizingImage; + + sizingImage.onload = function () { + done(sizingImage.width, sizingImage.height); + + if (!isIOSWebKit) { + body.removeChild(sizingImage); + } + }; + + sizingImage.src = image.src; // iOS WebKit will convert the image automatically + // with its orientation once append it into DOM (#279) + + if (!isIOSWebKit) { + sizingImage.style.cssText = 'left:0;' + 'max-height:none!important;' + 'max-width:none!important;' + 'min-height:0!important;' + 'min-width:0!important;' + 'opacity:0;' + 'position:absolute;' + 'top:0;' + 'z-index:-1;'; + body.appendChild(sizingImage); + } + } + }, { + key: "stop", + value: function stop() { + var image = this.image; + image.onload = null; + image.onerror = null; + image.parentNode.removeChild(image); + this.image = null; + } + }, { + key: "build", + value: function build() { + if (!this.sized || this.ready) { + return; + } + + var element = this.element, + options = this.options, + image = this.image; // Create cropper elements + + var container = element.parentNode; + var template = document.createElement('div'); + template.innerHTML = TEMPLATE; + var cropper = template.querySelector(".".concat(NAMESPACE, "-container")); + var canvas = cropper.querySelector(".".concat(NAMESPACE, "-canvas")); + var dragBox = cropper.querySelector(".".concat(NAMESPACE, "-drag-box")); + var cropBox = cropper.querySelector(".".concat(NAMESPACE, "-crop-box")); + var face = cropBox.querySelector(".".concat(NAMESPACE, "-face")); + this.container = container; + this.cropper = cropper; + this.canvas = canvas; + this.dragBox = dragBox; + this.cropBox = cropBox; + this.viewBox = cropper.querySelector(".".concat(NAMESPACE, "-view-box")); + this.face = face; + canvas.appendChild(image); // Hide the original image + + addClass(element, CLASS_HIDDEN); // Inserts the cropper after to the current image + + container.insertBefore(cropper, element.nextSibling); // Show the image if is hidden + + if (!this.isImg) { + removeClass(image, CLASS_HIDE); + } + + this.initPreview(); + this.bind(); + options.initialAspectRatio = Math.max(0, options.initialAspectRatio) || NaN; + options.aspectRatio = Math.max(0, options.aspectRatio) || NaN; + options.viewMode = Math.max(0, Math.min(3, Math.round(options.viewMode))) || 0; + addClass(cropBox, CLASS_HIDDEN); + + if (!options.guides) { + addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-dashed")), CLASS_HIDDEN); + } + + if (!options.center) { + addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-center")), CLASS_HIDDEN); + } + + if (options.background) { + addClass(cropper, "".concat(NAMESPACE, "-bg")); + } + + if (!options.highlight) { + addClass(face, CLASS_INVISIBLE); + } + + if (options.cropBoxMovable) { + addClass(face, CLASS_MOVE); + setData(face, DATA_ACTION, ACTION_ALL); + } + + if (!options.cropBoxResizable) { + addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-line")), CLASS_HIDDEN); + addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-point")), CLASS_HIDDEN); + } + + this.render(); + this.ready = true; + this.setDragMode(options.dragMode); + + if (options.autoCrop) { + this.crop(); + } + + this.setData(options.data); + + if (isFunction(options.ready)) { + addListener(element, EVENT_READY, options.ready, { + once: true + }); + } + + dispatchEvent(element, EVENT_READY); + } + }, { + key: "unbuild", + value: function unbuild() { + if (!this.ready) { + return; + } + + this.ready = false; + this.unbind(); + this.resetPreview(); + this.cropper.parentNode.removeChild(this.cropper); + removeClass(this.element, CLASS_HIDDEN); + } + }, { + key: "uncreate", + value: function uncreate() { + if (this.ready) { + this.unbuild(); + this.ready = false; + this.cropped = false; + } else if (this.sizing) { + this.sizingImage.onload = null; + this.sizing = false; + this.sized = false; + } else if (this.reloading) { + this.xhr.onabort = null; + this.xhr.abort(); + } else if (this.image) { + this.stop(); + } + } + /** + * Get the no conflict cropper class. + * @returns {Cropper} The cropper class. + */ + + }], [{ + key: "noConflict", + value: function noConflict() { + window.Cropper = AnotherCropper; + return Cropper; + } + /** + * Change the default options. + * @param {Object} options - The new default options. + */ + + }, { + key: "setDefaults", + value: function setDefaults(options) { + assign(DEFAULTS, isPlainObject(options) && options); + } + }]); + + return Cropper; + }(); + + assign(Cropper.prototype, render, preview, events, handlers, change, methods); + + return Cropper; + +})); diff --git a/app/assets/javascripts/gallery.js b/app/assets/javascripts/gallery.js index 0dabb60..7321357 100644 --- a/app/assets/javascripts/gallery.js +++ b/app/assets/javascripts/gallery.js @@ -7,13 +7,13 @@ $this = this; $li = this.children('li'); $dropzone = $('#dropzone'); - if(($li.length - _set.onlyOne) == 0) { + if(($li.length - _set.onlyOne) === 0) { $('#dropzone').fadeIn(300); } else { $('#dropzone').fadeOut(300); - }; + } $('#file-list').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true }); - } + }; }(window.jQuery); $(function () { @@ -21,7 +21,7 @@ $(function () { // Initialize the jQuery File Upload widget: if($('#fileupload').length){ $('#fileupload').fileupload({ - maxFileSize: 5000000, + //maxFileSize: 5000000,= acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, dropZone: $('#dropzone'), headers:{ @@ -30,8 +30,96 @@ $(function () { }); } }); +function batch_crop(){ + var check_li = $('#imgholder').find("input[type='checkbox']:checked").parents('li'); + var image_ids =[]; + if (check_li.length>0){ + check_li.each(function(){ + image_ids.push($(this).data('image-id')); + }); + if (navigator.onLine) { + window.location.href = '/admin/galleries/batch_crop?image_ids=' + image_ids.join(',') + } else { + alert('Please connect the network and try again later!') + } + }else{ + alert('Please select at least one') + } +} +function select_all() { + $('#imgholder').find("input[type='checkbox']:not(:checked)").trigger('click') +} +function translate(ele,pretext,text){ + if (navigator.onLine) { + $.ajax({ + url : "/admin/galleries/translate", + dataType : "json", + type : "post", + data:{text:text}, + success:function(data){ + ele.html(pretext + data.translate) + }, + error:function(){ + var back = text.split('.')[1].split('_') + var result = [] + for (i=0;i Close panel'); + translate($('.add-imgs'),' ','gallery.close_panel') $('.rgbody').stop(true, false).animate({'padding-bottom': 280}, 300); $("#edit-order-btn").hide(); $.ajax({ @@ -261,7 +349,7 @@ $(function() { last_image_id = d.last_image_id; }) } else { - $('.add-imgs').html(' Add Image'); + translate($('.add-imgs'),' ','gallery.add_image') $('.files').empty() $('#file-list').checkListLength(); $('.rgbody').stop(true, false).animate({'padding-bottom': 0}, 300); diff --git a/app/assets/javascripts/jquery-cropper.js b/app/assets/javascripts/jquery-cropper.js new file mode 100644 index 0000000..8cbe437 --- /dev/null +++ b/app/assets/javascripts/jquery-cropper.js @@ -0,0 +1,75 @@ +/*! + * jQuery Cropper v1.0.0 + * https://github.com/fengyuanchen/jquery-cropper + * + * Copyright (c) 2018 Chen Fengyuan + * Released under the MIT license + * + * Date: 2018-04-01T06:20:13.168Z + */ + +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery'), require('cropperjs')) : + typeof define === 'function' && define.amd ? define(['jquery', 'cropperjs'], factory) : + (factory(global.jQuery,global.Cropper)); +}(this, (function ($,Cropper) { 'use strict'; + + $ = $ && $.hasOwnProperty('default') ? $['default'] : $; + Cropper = Cropper && Cropper.hasOwnProperty('default') ? Cropper['default'] : Cropper; + + if ($.fn) { + var AnotherCropper = $.fn.cropper; + var NAMESPACE = 'cropper'; + + $.fn.cropper = function jQueryCropper(option) { + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + var result = void 0; + + this.each(function (i, element) { + var $element = $(element); + var isDestroy = option === 'destroy'; + var cropper = $element.data(NAMESPACE); + + if (!cropper) { + if (isDestroy) { + return; + } + + var options = $.extend({}, $element.data(), $.isPlainObject(option) && option); + + cropper = new Cropper(element, options); + $element.data(NAMESPACE, cropper); + } + + if (typeof option === 'string') { + var fn = cropper[option]; + + if ($.isFunction(fn)) { + result = fn.apply(cropper, args); + + if (result === cropper) { + result = undefined; + } + + if (isDestroy) { + $element.removeData(NAMESPACE); + } + } + } + }); + + return result !== undefined ? result : this; + }; + + $.fn.cropper.Constructor = Cropper; + $.fn.cropper.setDefaults = Cropper.setDefaults; + $.fn.cropper.noConflict = function noConflict() { + $.fn.cropper = AnotherCropper; + return this; + }; + } + +}))); \ No newline at end of file diff --git a/app/assets/javascripts/jquery.minicolors.js b/app/assets/javascripts/jquery.minicolors.js new file mode 100644 index 0000000..6c5284a --- /dev/null +++ b/app/assets/javascripts/jquery.minicolors.js @@ -0,0 +1,1127 @@ +// +// jQuery MiniColors: A tiny color picker built on jQuery +// +// Developed by Cory LaViska for A Beautiful Site, LLC +// +// Licensed under the MIT license: http://opensource.org/licenses/MIT +// +(function (factory) { + if(typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else if(typeof exports === 'object') { + // Node/CommonJS + module.exports = factory(require('jquery')); + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + 'use strict'; + + // Defaults + $.minicolors = { + defaults: { + animationSpeed: 50, + animationEasing: 'swing', + change: null, + changeDelay: 0, + control: 'hue', + defaultValue: '', + format: 'hex', + hide: null, + hideSpeed: 100, + inline: false, + keywords: '', + letterCase: 'lowercase', + opacity: false, + position: 'bottom', + show: null, + showSpeed: 100, + theme: 'default', + swatches: [] + } + }; + + // Public methods + $.extend($.fn, { + minicolors: function(method, data) { + + switch(method) { + // Destroy the control + case 'destroy': + $(this).each(function() { + destroy($(this)); + }); + return $(this); + + // Hide the color picker + case 'hide': + hide(); + return $(this); + + // Get/set opacity + case 'opacity': + // Getter + if(data === undefined) { + // Getter + return $(this).attr('data-opacity'); + } else { + // Setter + $(this).each(function() { + updateFromInput($(this).attr('data-opacity', data)); + }); + } + return $(this); + + // Get an RGB(A) object based on the current color/opacity + case 'rgbObject': + return rgbObject($(this), method === 'rgbaObject'); + + // Get an RGB(A) string based on the current color/opacity + case 'rgbString': + case 'rgbaString': + return rgbString($(this), method === 'rgbaString'); + + // Get/set settings on the fly + case 'settings': + if(data === undefined) { + return $(this).data('minicolors-settings'); + } else { + // Setter + $(this).each(function() { + var settings = $(this).data('minicolors-settings') || {}; + destroy($(this)); + $(this).minicolors($.extend(true, settings, data)); + }); + } + return $(this); + + // Show the color picker + case 'show': + show($(this).eq(0)); + return $(this); + + // Get/set the hex color value + case 'value': + if(data === undefined) { + // Getter + return $(this).val(); + } else { + // Setter + $(this).each(function() { + if(typeof(data) === 'object' && data !== null) { + if(data.opacity !== undefined) { + $(this).attr('data-opacity', keepWithin(data.opacity, 0, 1)); + } + if(data.color) { + $(this).val(data.color); + } + } else { + $(this).val(data); + } + updateFromInput($(this)); + }); + } + return $(this); + + // Initializes the control + default: + if(method !== 'create') data = method; + $(this).each(function() { + init($(this), data); + }); + return $(this); + + } + + } + }); + + // Initialize input elements + function init(input, settings) { + var minicolors = $('
'); + var defaults = $.minicolors.defaults; + var name; + var size; + var swatches; + var swatch; + var swatchString; + var panel; + var i; + + // Do nothing if already initialized + if(input.data('minicolors-initialized')) return; + + // Handle settings + settings = $.extend(true, {}, defaults, settings); + + // The wrapper + minicolors + .addClass('minicolors-theme-' + settings.theme) + .toggleClass('minicolors-with-opacity', settings.opacity); + + // Custom positioning + if(settings.position !== undefined) { + $.each(settings.position.split(' '), function() { + minicolors.addClass('minicolors-position-' + this); + }); + } + + // Input size + if(settings.format === 'rgb') { + size = settings.opacity ? '25' : '20'; + } else { + size = settings.keywords ? '11' : '7'; + } + + // The input + input + .addClass('minicolors-input') + .data('minicolors-initialized', false) + .data('minicolors-settings', settings) + .prop('size', size) + .wrap(minicolors) + .after( + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + ); + + // The swatch + if(!settings.inline) { + input.after(''); + input.next('.minicolors-input-swatch').on('click', function(event) { + event.preventDefault(); + input.focus(); + }); + } + + // Prevent text selection in IE + panel = input.parent().find('.minicolors-panel'); + panel.on('selectstart', function() { return false; }).end(); + + // Swatches + if(settings.swatches && settings.swatches.length !== 0) { + panel.addClass('minicolors-with-swatches'); + swatches = $('
    ') + .appendTo(panel); + for(i = 0; i < settings.swatches.length; ++i) { + // allow for custom objects as swatches + if($.type(settings.swatches[i]) === 'object') { + name = settings.swatches[i].name; + swatch = settings.swatches[i].color; + } else { + name = ''; + swatch = settings.swatches[i]; + } + swatchString = swatch; + swatch = isRgb(swatch) ? parseRgb(swatch, true) : hex2rgb(parseHex(swatch, true)); + $('
    • ') + .appendTo(swatches) + .data('swatch-color', swatchString) + .find('.minicolors-swatch-color') + .css({ + backgroundColor: rgb2hex(swatch), + opacity: swatch.a + }); + settings.swatches[i] = swatch; + } + } + + // Inline controls + if(settings.inline) input.parent().addClass('minicolors-inline'); + + updateFromInput(input, false); + + input.data('minicolors-initialized', true); + } + + // Returns the input back to its original state + function destroy(input) { + var minicolors = input.parent(); + + // Revert the input element + input + .removeData('minicolors-initialized') + .removeData('minicolors-settings') + .removeProp('size') + .removeClass('minicolors-input'); + + // Remove the wrap and destroy whatever remains + minicolors.before(input).remove(); + } + + // Shows the specified dropdown panel + function show(input) { + var minicolors = input.parent(); + var panel = minicolors.find('.minicolors-panel'); + var settings = input.data('minicolors-settings'); + + // Do nothing if uninitialized, disabled, inline, or already open + if( + !input.data('minicolors-initialized') || + input.prop('disabled') || + minicolors.hasClass('minicolors-inline') || + minicolors.hasClass('minicolors-focus') + ) return; + + hide(); + + minicolors.addClass('minicolors-focus'); + if (panel.animate) { + panel + .stop(true, true) + .fadeIn(settings.showSpeed, function () { + if (settings.show) settings.show.call(input.get(0)); + }); + } else { + panel.show(); + if (settings.show) settings.show.call(input.get(0)); + } + } + + // Hides all dropdown panels + function hide() { + $('.minicolors-focus').each(function() { + var minicolors = $(this); + var input = minicolors.find('.minicolors-input'); + var panel = minicolors.find('.minicolors-panel'); + var settings = input.data('minicolors-settings'); + + if (panel.animate) { + panel.fadeOut(settings.hideSpeed, function () { + if (settings.hide) settings.hide.call(input.get(0)); + minicolors.removeClass('minicolors-focus'); + }); + } else { + panel.hide(); + if (settings.hide) settings.hide.call(input.get(0)); + minicolors.removeClass('minicolors-focus'); + } + }); + } + + // Moves the selected picker + function move(target, event, animate) { + var input = target.parents('.minicolors').find('.minicolors-input'); + var settings = input.data('minicolors-settings'); + var picker = target.find('[class$=-picker]'); + var offsetX = target.offset().left; + var offsetY = target.offset().top; + var x = Math.round(event.pageX - offsetX); + var y = Math.round(event.pageY - offsetY); + var duration = animate ? settings.animationSpeed : 0; + var wx, wy, r, phi, styles; + + // Touch support + if(event.originalEvent.changedTouches) { + x = event.originalEvent.changedTouches[0].pageX - offsetX; + y = event.originalEvent.changedTouches[0].pageY - offsetY; + } + + // Constrain picker to its container + if(x < 0) x = 0; + if(y < 0) y = 0; + if(x > target.width()) x = target.width(); + if(y > target.height()) y = target.height(); + + // Constrain color wheel values to the wheel + if(target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid')) { + wx = 75 - x; + wy = 75 - y; + r = Math.sqrt(wx * wx + wy * wy); + phi = Math.atan2(wy, wx); + if(phi < 0) phi += Math.PI * 2; + if(r > 75) { + r = 75; + x = 75 - (75 * Math.cos(phi)); + y = 75 - (75 * Math.sin(phi)); + } + x = Math.round(x); + y = Math.round(y); + } + + // Move the picker + styles = { + top: y + 'px' + }; + if(target.is('.minicolors-grid')) { + styles.left = x + 'px'; + } + if (picker.animate) { + picker + .stop(true) + .animate(styles, duration, settings.animationEasing, function() { + updateFromControl(input, target); + }); + } else { + picker + .css(styles); + updateFromControl(input, target); + } + } + + // Sets the input based on the color picker values + function updateFromControl(input, target) { + + function getCoords(picker, container) { + var left, top; + if(!picker.length || !container) return null; + left = picker.offset().left; + top = picker.offset().top; + + return { + x: left - container.offset().left + (picker.outerWidth() / 2), + y: top - container.offset().top + (picker.outerHeight() / 2) + }; + } + + var hue, saturation, brightness, x, y, r, phi; + var hex = input.val(); + var opacity = input.attr('data-opacity'); + + // Helpful references + var minicolors = input.parent(); + var settings = input.data('minicolors-settings'); + var swatch = minicolors.find('.minicolors-input-swatch'); + + // Panel objects + var grid = minicolors.find('.minicolors-grid'); + var slider = minicolors.find('.minicolors-slider'); + var opacitySlider = minicolors.find('.minicolors-opacity-slider'); + + // Picker objects + var gridPicker = grid.find('[class$=-picker]'); + var sliderPicker = slider.find('[class$=-picker]'); + var opacityPicker = opacitySlider.find('[class$=-picker]'); + + // Picker positions + var gridPos = getCoords(gridPicker, grid); + var sliderPos = getCoords(sliderPicker, slider); + var opacityPos = getCoords(opacityPicker, opacitySlider); + + // Handle colors + if(target.is('.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider')) { + + // Determine HSB values + switch(settings.control) { + case 'wheel': + // Calculate hue, saturation, and brightness + x = (grid.width() / 2) - gridPos.x; + y = (grid.height() / 2) - gridPos.y; + r = Math.sqrt(x * x + y * y); + phi = Math.atan2(y, x); + if(phi < 0) phi += Math.PI * 2; + if(r > 75) { + r = 75; + gridPos.x = 69 - (75 * Math.cos(phi)); + gridPos.y = 69 - (75 * Math.sin(phi)); + } + saturation = keepWithin(r / 0.75, 0, 100); + hue = keepWithin(phi * 180 / Math.PI, 0, 360); + brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100); + hex = hsb2hex({ + h: hue, + s: saturation, + b: brightness + }); + + // Update UI + slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 })); + break; + + case 'saturation': + // Calculate hue, saturation, and brightness + hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360); + saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100); + brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100); + hex = hsb2hex({ + h: hue, + s: saturation, + b: brightness + }); + + // Update UI + slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness })); + minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100); + break; + + case 'brightness': + // Calculate hue, saturation, and brightness + hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360); + saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100); + brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100); + hex = hsb2hex({ + h: hue, + s: saturation, + b: brightness + }); + + // Update UI + slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 })); + minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100)); + break; + + default: + // Calculate hue, saturation, and brightness + hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360); + saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100); + brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100); + hex = hsb2hex({ + h: hue, + s: saturation, + b: brightness + }); + + // Update UI + grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 })); + break; + } + + // Handle opacity + if(settings.opacity) { + opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2); + } else { + opacity = 1; + } + + updateInput(input, hex, opacity); + } + else { + // Set swatch color + swatch.find('span').css({ + backgroundColor: hex, + opacity: opacity + }); + + // Handle change event + doChange(input, hex, opacity); + } + } + + // Sets the value of the input and does the appropriate conversions + // to respect settings, also updates the swatch + function updateInput(input, value, opacity) { + var rgb; + + // Helpful references + var minicolors = input.parent(); + var settings = input.data('minicolors-settings'); + var swatch = minicolors.find('.minicolors-input-swatch'); + + if(settings.opacity) input.attr('data-opacity', opacity); + + // Set color string + if(settings.format === 'rgb') { + // Returns RGB(A) string + + // Checks for input format and does the conversion + if(isRgb(value)) { + rgb = parseRgb(value, true); + } + else { + rgb = hex2rgb(parseHex(value, true)); + } + + opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1); + if(isNaN(opacity) || !settings.opacity) opacity = 1; + + if(input.minicolors('rgbObject').a <= 1 && rgb && settings.opacity) { + // Set RGBA string if alpha + value = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')'; + } else { + // Set RGB string (alpha = 1) + value = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')'; + } + } else { + // Returns hex color + + // Checks for input format and does the conversion + if(isRgb(value)) { + value = rgbString2hex(value); + } + + value = convertCase(value, settings.letterCase); + } + + // Update value from picker + input.val(value); + + // Set swatch color + swatch.find('span').css({ + backgroundColor: value, + opacity: opacity + }); + + // Handle change event + doChange(input, value, opacity); + } + + // Sets the color picker values from the input + function updateFromInput(input, preserveInputValue) { + var hex, hsb, opacity, keywords, alpha, value, x, y, r, phi; + + // Helpful references + var minicolors = input.parent(); + var settings = input.data('minicolors-settings'); + var swatch = minicolors.find('.minicolors-input-swatch'); + + // Panel objects + var grid = minicolors.find('.minicolors-grid'); + var slider = minicolors.find('.minicolors-slider'); + var opacitySlider = minicolors.find('.minicolors-opacity-slider'); + + // Picker objects + var gridPicker = grid.find('[class$=-picker]'); + var sliderPicker = slider.find('[class$=-picker]'); + var opacityPicker = opacitySlider.find('[class$=-picker]'); + + // Determine hex/HSB values + if(isRgb(input.val())) { + // If input value is a rgb(a) string, convert it to hex color and update opacity + hex = rgbString2hex(input.val()); + alpha = keepWithin(parseFloat(getAlpha(input.val())).toFixed(2), 0, 1); + if(alpha) { + input.attr('data-opacity', alpha); + } + } else { + hex = convertCase(parseHex(input.val(), true), settings.letterCase); + } + + if(!hex){ + hex = convertCase(parseInput(settings.defaultValue, true), settings.letterCase); + } + hsb = hex2hsb(hex); + + // Get array of lowercase keywords + keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) { + return $.trim(a.toLowerCase()); + }); + + // Set color string + if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) { + value = convertCase(input.val()); + } else { + value = isRgb(input.val()) ? parseRgb(input.val()) : hex; + } + + // Update input value + if(!preserveInputValue) input.val(value); + + // Determine opacity value + if(settings.opacity) { + // Get from data-opacity attribute and keep within 0-1 range + opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1); + if(isNaN(opacity)) opacity = 1; + input.attr('data-opacity', opacity); + swatch.find('span').css('opacity', opacity); + + // Set opacity picker position + y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height()); + opacityPicker.css('top', y + 'px'); + } + + // Set opacity to zero if input value is transparent + if(input.val().toLowerCase() === 'transparent') { + swatch.find('span').css('opacity', 0); + } + + // Update swatch + swatch.find('span').css('backgroundColor', hex); + + // Determine picker locations + switch(settings.control) { + case 'wheel': + // Set grid position + r = keepWithin(Math.ceil(hsb.s * 0.75), 0, grid.height() / 2); + phi = hsb.h * Math.PI / 180; + x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width()); + y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height()); + gridPicker.css({ + top: y + 'px', + left: x + 'px' + }); + + // Set slider position + y = 150 - (hsb.b / (100 / grid.height())); + if(hex === '') y = 0; + sliderPicker.css('top', y + 'px'); + + // Update panel color + slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 })); + break; + + case 'saturation': + // Set grid position + x = keepWithin((5 * hsb.h) / 12, 0, 150); + y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height()); + gridPicker.css({ + top: y + 'px', + left: x + 'px' + }); + + // Set slider position + y = keepWithin(slider.height() - (hsb.s * (slider.height() / 100)), 0, slider.height()); + sliderPicker.css('top', y + 'px'); + + // Update UI + slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b })); + minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100); + break; + + case 'brightness': + // Set grid position + x = keepWithin((5 * hsb.h) / 12, 0, 150); + y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height()); + gridPicker.css({ + top: y + 'px', + left: x + 'px' + }); + + // Set slider position + y = keepWithin(slider.height() - (hsb.b * (slider.height() / 100)), 0, slider.height()); + sliderPicker.css('top', y + 'px'); + + // Update UI + slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 })); + minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (hsb.b / 100)); + break; + + default: + // Set grid position + x = keepWithin(Math.ceil(hsb.s / (100 / grid.width())), 0, grid.width()); + y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height()); + gridPicker.css({ + top: y + 'px', + left: x + 'px' + }); + + // Set slider position + y = keepWithin(slider.height() - (hsb.h / (360 / slider.height())), 0, slider.height()); + sliderPicker.css('top', y + 'px'); + + // Update panel color + grid.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: 100 })); + break; + } + + // Fire change event, but only if minicolors is fully initialized + if(input.data('minicolors-initialized')) { + doChange(input, value, opacity); + } + } + + // Runs the change and changeDelay callbacks + function doChange(input, value, opacity) { + var settings = input.data('minicolors-settings'); + var lastChange = input.data('minicolors-lastChange'); + var obj, sel, i; + + // Only run if it actually changed + if(!lastChange || lastChange.value !== value || lastChange.opacity !== opacity) { + + // Remember last-changed value + input.data('minicolors-lastChange', { + value: value, + opacity: opacity + }); + + // Check and select applicable swatch + if(settings.swatches && settings.swatches.length !== 0) { + if(!isRgb(value)) { + obj = hex2rgb(value); + } + else { + obj = parseRgb(value, true); + } + sel = -1; + for(i = 0; i < settings.swatches.length; ++i) { + if(obj.r === settings.swatches[i].r && obj.g === settings.swatches[i].g && obj.b === settings.swatches[i].b && obj.a === settings.swatches[i].a) { + sel = i; + break; + } + } + + input.parent().find('.minicolors-swatches .minicolors-swatch').removeClass('selected'); + if(sel !== -1) { + input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected'); + } + } + + // Fire change event + if(settings.change) { + if(settings.changeDelay) { + // Call after a delay + clearTimeout(input.data('minicolors-changeTimeout')); + input.data('minicolors-changeTimeout', setTimeout(function() { + settings.change.call(input.get(0), value, opacity); + }, settings.changeDelay)); + } else { + // Call immediately + settings.change.call(input.get(0), value, opacity); + } + } + input.trigger('change').trigger('input'); + } + } + + // Generates an RGB(A) object based on the input's value + function rgbObject(input) { + var rgb, + opacity = $(input).attr('data-opacity'); + if( isRgb($(input).val()) ) { + rgb = parseRgb($(input).val(), true); + } else { + var hex = parseHex($(input).val(), true); + rgb = hex2rgb(hex); + } + if( !rgb ) return null; + if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) }); + return rgb; + } + + // Generates an RGB(A) string based on the input's value + function rgbString(input, alpha) { + var rgb, + opacity = $(input).attr('data-opacity'); + if( isRgb($(input).val()) ) { + rgb = parseRgb($(input).val(), true); + } else { + var hex = parseHex($(input).val(), true); + rgb = hex2rgb(hex); + } + if( !rgb ) return null; + if( opacity === undefined ) opacity = 1; + if( alpha ) { + return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')'; + } else { + return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')'; + } + } + + // Converts to the letter case specified in settings + function convertCase(string, letterCase) { + return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase(); + } + + // Parses a string and returns a valid hex string when possible + function parseHex(string, expand) { + string = string.replace(/^#/g, ''); + if(!string.match(/^[A-F0-9]{3,6}/ig)) return ''; + if(string.length !== 3 && string.length !== 6) return ''; + if(string.length === 3 && expand) { + string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2]; + } + return '#' + string; + } + + // Parses a string and returns a valid RGB(A) string when possible + function parseRgb(string, obj) { + var values = string.replace(/[^\d,.]/g, ''); + var rgba = values.split(','); + + rgba[0] = keepWithin(parseInt(rgba[0], 10), 0, 255); + rgba[1] = keepWithin(parseInt(rgba[1], 10), 0, 255); + rgba[2] = keepWithin(parseInt(rgba[2], 10), 0, 255); + if(rgba[3] !== undefined) { + rgba[3] = keepWithin(parseFloat(rgba[3], 10), 0, 1); + } + + // Return RGBA object + if( obj ) { + if (rgba[3] !== undefined) { + return { + r: rgba[0], + g: rgba[1], + b: rgba[2], + a: rgba[3] + }; + } else { + return { + r: rgba[0], + g: rgba[1], + b: rgba[2] + }; + } + } + + // Return RGBA string + if(typeof(rgba[3]) !== 'undefined' && rgba[3] <= 1) { + return 'rgba(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ', ' + rgba[3] + ')'; + } else { + return 'rgb(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ')'; + } + + } + + // Parses a string and returns a valid color string when possible + function parseInput(string, expand) { + if(isRgb(string)) { + // Returns a valid rgb(a) string + return parseRgb(string); + } else { + return parseHex(string, expand); + } + } + + // Keeps value within min and max + function keepWithin(value, min, max) { + if(value < min) value = min; + if(value > max) value = max; + return value; + } + + // Checks if a string is a valid RGB(A) string + function isRgb(string) { + var rgb = string.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); + return (rgb && rgb.length === 4) ? true : false; + } + + // Function to get alpha from a RGB(A) string + function getAlpha(rgba) { + rgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i); + return (rgba && rgba.length === 6) ? rgba[4] : '1'; + } + + // Converts an HSB object to an RGB object + function hsb2rgb(hsb) { + var rgb = {}; + var h = Math.round(hsb.h); + var s = Math.round(hsb.s * 255 / 100); + var v = Math.round(hsb.b * 255 / 100); + if(s === 0) { + rgb.r = rgb.g = rgb.b = v; + } else { + var t1 = v; + var t2 = (255 - s) * v / 255; + var t3 = (t1 - t2) * (h % 60) / 60; + if(h === 360) h = 0; + if(h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; } + else if(h < 120) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; } + else if(h < 180) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; } + else if(h < 240) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; } + else if(h < 300) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; } + else if(h < 360) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; } + else { rgb.r = 0; rgb.g = 0; rgb.b = 0; } + } + return { + r: Math.round(rgb.r), + g: Math.round(rgb.g), + b: Math.round(rgb.b) + }; + } + + // Converts an RGB string to a hex string + function rgbString2hex(rgb){ + rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); + return (rgb && rgb.length === 4) ? '#' + + ('0' + parseInt(rgb[1],10).toString(16)).slice(-2) + + ('0' + parseInt(rgb[2],10).toString(16)).slice(-2) + + ('0' + parseInt(rgb[3],10).toString(16)).slice(-2) : ''; + } + + // Converts an RGB object to a hex string + function rgb2hex(rgb) { + var hex = [ + rgb.r.toString(16), + rgb.g.toString(16), + rgb.b.toString(16) + ]; + $.each(hex, function(nr, val) { + if(val.length === 1) hex[nr] = '0' + val; + }); + return '#' + hex.join(''); + } + + // Converts an HSB object to a hex string + function hsb2hex(hsb) { + return rgb2hex(hsb2rgb(hsb)); + } + + // Converts a hex string to an HSB object + function hex2hsb(hex) { + var hsb = rgb2hsb(hex2rgb(hex)); + if(hsb.s === 0) hsb.h = 360; + return hsb; + } + + // Converts an RGB object to an HSB object + function rgb2hsb(rgb) { + var hsb = { h: 0, s: 0, b: 0 }; + var min = Math.min(rgb.r, rgb.g, rgb.b); + var max = Math.max(rgb.r, rgb.g, rgb.b); + var delta = max - min; + hsb.b = max; + hsb.s = max !== 0 ? 255 * delta / max : 0; + if(hsb.s !== 0) { + if(rgb.r === max) { + hsb.h = (rgb.g - rgb.b) / delta; + } else if(rgb.g === max) { + hsb.h = 2 + (rgb.b - rgb.r) / delta; + } else { + hsb.h = 4 + (rgb.r - rgb.g) / delta; + } + } else { + hsb.h = -1; + } + hsb.h *= 60; + if(hsb.h < 0) { + hsb.h += 360; + } + hsb.s *= 100/255; + hsb.b *= 100/255; + return hsb; + } + + // Converts a hex string to an RGB object + function hex2rgb(hex) { + hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16); + return { + r: hex >> 16, + g: (hex & 0x00FF00) >> 8, + b: (hex & 0x0000FF) + }; + } + + // Handle events + $([document]) + // Hide on clicks outside of the control + .on('mousedown.minicolors touchstart.minicolors', function(event) { + if(!$(event.target).parents().add(event.target).hasClass('minicolors')) { + hide(); + } + }) + // Start moving + .on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) { + var target = $(this); + event.preventDefault(); + $(event.delegateTarget).data('minicolors-target', target); + move(target, event, true); + }) + // Move pickers + .on('mousemove.minicolors touchmove.minicolors', function(event) { + var target = $(event.delegateTarget).data('minicolors-target'); + if(target) move(target, event); + }) + // Stop moving + .on('mouseup.minicolors touchend.minicolors', function() { + $(this).removeData('minicolors-target'); + }) + // Selected a swatch + .on('click.minicolors', '.minicolors-swatches li', function(event) { + event.preventDefault(); + var target = $(this), input = target.parents('.minicolors').find('.minicolors-input'), color = target.data('swatch-color'); + updateInput(input, color, getAlpha(color)); + updateFromInput(input); + }) + // Show panel when swatch is clicked + .on('mousedown.minicolors touchstart.minicolors', '.minicolors-input-swatch', function(event) { + var input = $(this).parent().find('.minicolors-input'); + event.preventDefault(); + show(input); + }) + // Show on focus + .on('focus.minicolors', '.minicolors-input', function() { + var input = $(this); + if(!input.data('minicolors-initialized')) return; + show(input); + }) + // Update value on blur + .on('blur.minicolors', '.minicolors-input', function() { + var input = $(this); + var settings = input.data('minicolors-settings'); + var keywords; + var hex; + var rgba; + var swatchOpacity; + var value; + + if(!input.data('minicolors-initialized')) return; + + // Get array of lowercase keywords + keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) { + return $.trim(a.toLowerCase()); + }); + + // Set color string + if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) { + value = input.val(); + } else { + // Get RGBA values for easy conversion + if(isRgb(input.val())) { + rgba = parseRgb(input.val(), true); + } else { + hex = parseHex(input.val(), true); + rgba = hex ? hex2rgb(hex) : null; + } + + // Convert to format + if(rgba === null) { + value = settings.defaultValue; + } else if(settings.format === 'rgb') { + value = settings.opacity ? + parseRgb('rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + input.attr('data-opacity') + ')') : + parseRgb('rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ')'); + } else { + value = rgb2hex(rgba); + } + } + + // Update swatch opacity + swatchOpacity = settings.opacity ? input.attr('data-opacity') : 1; + if(value.toLowerCase() === 'transparent') swatchOpacity = 0; + input + .closest('.minicolors') + .find('.minicolors-input-swatch > span') + .css('opacity', swatchOpacity); + + // Set input value + input.val(value); + + // Is it blank? + if(input.val() === '') input.val(parseInput(settings.defaultValue, true)); + + // Adjust case + input.val(convertCase(input.val(), settings.letterCase)); + + }) + // Handle keypresses + .on('keydown.minicolors', '.minicolors-input', function(event) { + var input = $(this); + if(!input.data('minicolors-initialized')) return; + switch(event.which) { + case 9: // tab + hide(); + break; + case 13: // enter + case 27: // esc + hide(); + input.blur(); + break; + } + }) + // Update on keyup + .on('keyup.minicolors', '.minicolors-input', function() { + var input = $(this); + if(!input.data('minicolors-initialized')) return; + updateFromInput(input, true); + }) + // Update on paste + .on('paste.minicolors', '.minicolors-input', function() { + var input = $(this); + if(!input.data('minicolors-initialized')) return; + setTimeout(function() { + updateFromInput(input, true); + }, 1); + }); +})); diff --git a/app/assets/javascripts/theater.js b/app/assets/javascripts/theater.js index cf8f3a9..6ae0264 100644 --- a/app/assets/javascripts/theater.js +++ b/app/assets/javascripts/theater.js @@ -332,6 +332,7 @@ var GalleryTheater = function(){ var setMainPic = function(direction,selectedFromStrip){ var img = null; + $('div.gallery-show-original a').eq(0).attr('href',currentPic.image.url) if(direction == null){ img = $(""); img.hide(); diff --git a/app/assets/stylesheets/cropper.css b/app/assets/stylesheets/cropper.css new file mode 100644 index 0000000..6c5dee5 --- /dev/null +++ b/app/assets/stylesheets/cropper.css @@ -0,0 +1,304 @@ +/*! + * Cropper.js v1.5.5 + * https://fengyuanchen.github.io/cropperjs + * + * Copyright 2015-present Chen Fengyuan + * Released under the MIT license + * + * Date: 2019-08-04T02:26:27.232Z + */ + +.cropper-container { + direction: ltr; + font-size: 0; + line-height: 0; + position: relative; + -ms-touch-action: none; + touch-action: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.cropper-container img { + display: block; + height: 100%; + image-orientation: 0deg; + max-height: none !important; + max-width: none !important; + min-height: 0 !important; + min-width: 0 !important; + width: 100%; +} + +.cropper-wrap-box, +.cropper-canvas, +.cropper-drag-box, +.cropper-crop-box, +.cropper-modal { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; +} + +.cropper-wrap-box, +.cropper-canvas { + overflow: hidden; +} + +.cropper-drag-box { + background-color: #fff; + opacity: 0; +} + +.cropper-modal { + background-color: #000; + opacity: 0.5; +} + +.cropper-view-box { + display: block; + height: 100%; + outline: 1px solid #39f; + outline-color: rgba(51, 153, 255, 0.75); + overflow: hidden; + width: 100%; +} + +.cropper-dashed { + border: 0 dashed #eee; + display: block; + opacity: 0.5; + position: absolute; +} + +.cropper-dashed.dashed-h { + border-bottom-width: 1px; + border-top-width: 1px; + height: calc(100% / 3); + left: 0; + top: calc(100% / 3); + width: 100%; +} + +.cropper-dashed.dashed-v { + border-left-width: 1px; + border-right-width: 1px; + height: 100%; + left: calc(100% / 3); + top: 0; + width: calc(100% / 3); +} + +.cropper-center { + display: block; + height: 0; + left: 50%; + opacity: 0.75; + position: absolute; + top: 50%; + width: 0; +} + +.cropper-center::before, +.cropper-center::after { + background-color: #eee; + content: ' '; + display: block; + position: absolute; +} + +.cropper-center::before { + height: 1px; + left: -3px; + top: 0; + width: 7px; +} + +.cropper-center::after { + height: 7px; + left: 0; + top: -3px; + width: 1px; +} + +.cropper-face, +.cropper-line, +.cropper-point { + display: block; + height: 100%; + opacity: 0.1; + position: absolute; + width: 100%; +} + +.cropper-face { + background-color: #fff; + left: 0; + top: 0; +} + +.cropper-line { + background-color: #39f; +} + +.cropper-line.line-e { + cursor: ew-resize; + right: -3px; + top: 0; + width: 5px; +} + +.cropper-line.line-n { + cursor: ns-resize; + height: 5px; + left: 0; + top: -3px; +} + +.cropper-line.line-w { + cursor: ew-resize; + left: -3px; + top: 0; + width: 5px; +} + +.cropper-line.line-s { + bottom: -3px; + cursor: ns-resize; + height: 5px; + left: 0; +} + +.cropper-point { + background-color: #39f; + height: 5px; + opacity: 0.75; + width: 5px; +} + +.cropper-point.point-e { + cursor: ew-resize; + margin-top: -3px; + right: -3px; + top: 50%; +} + +.cropper-point.point-n { + cursor: ns-resize; + left: 50%; + margin-left: -3px; + top: -3px; +} + +.cropper-point.point-w { + cursor: ew-resize; + left: -3px; + margin-top: -3px; + top: 50%; +} + +.cropper-point.point-s { + bottom: -3px; + cursor: s-resize; + left: 50%; + margin-left: -3px; +} + +.cropper-point.point-ne { + cursor: nesw-resize; + right: -3px; + top: -3px; +} + +.cropper-point.point-nw { + cursor: nwse-resize; + left: -3px; + top: -3px; +} + +.cropper-point.point-sw { + bottom: -3px; + cursor: nesw-resize; + left: -3px; +} + +.cropper-point.point-se { + bottom: -3px; + cursor: nwse-resize; + height: 20px; + opacity: 1; + right: -3px; + width: 20px; +} + +@media (min-width: 768px) { + .cropper-point.point-se { + height: 15px; + width: 15px; + } +} + +@media (min-width: 992px) { + .cropper-point.point-se { + height: 10px; + width: 10px; + } +} + +@media (min-width: 1200px) { + .cropper-point.point-se { + height: 5px; + opacity: 0.75; + width: 5px; + } +} + +.cropper-point.point-se::before { + background-color: #39f; + bottom: -50%; + content: ' '; + display: block; + height: 200%; + opacity: 0; + position: absolute; + right: -50%; + width: 200%; +} + +.cropper-invisible { + opacity: 0; +} + +.cropper-bg { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC'); +} + +.cropper-hide { + display: block; + height: 0; + position: absolute; + width: 0; +} + +.cropper-hidden { + display: none !important; +} + +.cropper-move { + cursor: move; +} + +.cropper-crop { + cursor: crosshair; +} + +.cropper-disabled .cropper-drag-box, +.cropper-disabled .cropper-face, +.cropper-disabled .cropper-line, +.cropper-disabled .cropper-point { + cursor: not-allowed; +} diff --git a/app/assets/stylesheets/gallery.css b/app/assets/stylesheets/gallery.css index 920a349..c6dd415 100644 --- a/app/assets/stylesheets/gallery.css +++ b/app/assets/stylesheets/gallery.css @@ -161,6 +161,13 @@ padding: 0 0 10px; list-style: none; } +.rgalbum .photo_edit{ + right: 100%; + transition-duration: 0.5s; +} +.rgalbum:hover .photo_edit{ + transform: translate(100%); +} #imgholder .rgalbum { position: relative; float: left; diff --git a/app/assets/stylesheets/jquery.minicolors.css b/app/assets/stylesheets/jquery.minicolors.css new file mode 100644 index 0000000..a281101 --- /dev/null +++ b/app/assets/stylesheets/jquery.minicolors.css @@ -0,0 +1,432 @@ +.minicolors { + position: relative; +} + +.minicolors-sprite { + background-image: url(jquery.minicolors.png); +} + +.minicolors-swatch { + position: absolute; + vertical-align: middle; + background-position: -80px 0; + border: solid 1px #ccc; + cursor: text; + padding: 0; + margin: 0; + display: inline-block; +} + +.minicolors-swatch-color { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.minicolors input[type=hidden] + .minicolors-swatch { + width: 28px; + position: static; + cursor: pointer; +} + +.minicolors input[type=hidden][disabled] + .minicolors-swatch { + cursor: default; +} + +/* Panel */ +.minicolors-panel { + position: relative; + width: 173px; + background: white; + border: solid 1px #CCC; + box-shadow: 0 0 20px rgba(0, 0, 0, .2); + z-index: 99999; + box-sizing: content-box; + display: none; +} + +.minicolors-panel.minicolors-visible { + display: block; +} + +/* Panel positioning */ +.minicolors-position-top .minicolors-panel { + top: -154px; +} + +.minicolors-position-right .minicolors-panel { + right: 0; +} + +.minicolors-position-bottom .minicolors-panel { + top: auto; +} + +.minicolors-position-left .minicolors-panel { + left: 0; +} + +.minicolors-with-opacity .minicolors-panel { + width: 194px; +} + +.minicolors .minicolors-grid { + position: relative; + top: 1px; + left: 1px; /* LTR */ + width: 150px; + height: 150px; + margin-bottom: 2px; + background-position: -120px 0; + cursor: crosshair; +} +[dir=rtl] .minicolors .minicolors-grid { + right: 1px; +} + +.minicolors .minicolors-grid-inner { + position: absolute; + top: 0; + left: 0; + width: 150px; + height: 150px; +} + +.minicolors-slider-saturation .minicolors-grid { + background-position: -420px 0; +} + +.minicolors-slider-saturation .minicolors-grid-inner { + background-position: -270px 0; + background-image: inherit; +} + +.minicolors-slider-brightness .minicolors-grid { + background-position: -570px 0; +} + +.minicolors-slider-brightness .minicolors-grid-inner { + background-color: black; +} + +.minicolors-slider-wheel .minicolors-grid { + background-position: -720px 0; +} + +.minicolors-slider, +.minicolors-opacity-slider { + position: absolute; + top: 1px; + left: 152px; /* LTR */ + width: 20px; + height: 150px; + background-color: white; + background-position: 0 0; + cursor: row-resize; +} +[dir=rtl] .minicolors-slider, +[dir=rtl] .minicolors-opacity-slider { + right: 152px; +} + +.minicolors-slider-saturation .minicolors-slider { + background-position: -60px 0; +} + +.minicolors-slider-brightness .minicolors-slider { + background-position: -20px 0; +} + +.minicolors-slider-wheel .minicolors-slider { + background-position: -20px 0; +} + +.minicolors-opacity-slider { + left: 173px; /* LTR */ + background-position: -40px 0; + display: none; +} +[dir=rtl] .minicolors-opacity-slider { + right: 173px; +} + +.minicolors-with-opacity .minicolors-opacity-slider { + display: block; +} + +/* Pickers */ +.minicolors-grid .minicolors-picker { + position: absolute; + top: 70px; + left: 70px; + width: 12px; + height: 12px; + border: solid 1px black; + border-radius: 10px; + margin-top: -6px; + margin-left: -6px; + background: none; +} + +.minicolors-grid .minicolors-picker > div { + position: absolute; + top: 0; + left: 0; + width: 8px; + height: 8px; + border-radius: 8px; + border: solid 2px white; + box-sizing: content-box; +} + +.minicolors-picker { + position: absolute; + top: 0; + left: 0; + width: 18px; + height: 2px; + background: white; + border: solid 1px black; + margin-top: -2px; + box-sizing: content-box; +} + +/* Swatches */ +.minicolors-swatches, +.minicolors-swatches li { + margin: 5px 0 3px 5px; /* LTR */ + padding: 0; + list-style: none; + overflow: hidden; +} +[dir=rtl] .minicolors-swatches, +[dir=rtl] .minicolors-swatches li { + margin: 5px 5px 3px 0; +} + +.minicolors-swatches .minicolors-swatch { + position: relative; + float: left; /* LTR */ + cursor: pointer; + margin:0 4px 0 0; /* LTR */ +} +[dir=rtl] .minicolors-swatches .minicolors-swatch { + float: right; + margin:0 0 0 4px; +} + +.minicolors-with-opacity .minicolors-swatches .minicolors-swatch { + margin-right: 7px; /* LTR */ +} +[dir=rtl] .minicolors-with-opacity .minicolors-swatches .minicolors-swatch { + margin-right: 0; + margin-left: 7px; +} + +.minicolors-swatch.selected { + border-color: #000; +} + +/* Inline controls */ +.minicolors-inline { + display: inline-block; +} + +.minicolors-inline .minicolors-input { + display: none !important; +} + +.minicolors-inline .minicolors-panel { + position: relative; + top: auto; + left: auto; /* LTR */ + box-shadow: none; + z-index: auto; + display: inline-block; +} +[dir=rtl] .minicolors-inline .minicolors-panel { + right: auto; +} + +/* Default theme */ +.minicolors-theme-default .minicolors-swatch { + top: 5px; + left: 5px; /* LTR */ + width: 18px; + height: 18px; +} +[dir=rtl] .minicolors-theme-default .minicolors-swatch { + right: 5px; +} +.minicolors-theme-default .minicolors-swatches .minicolors-swatch { + margin-bottom: 2px; + top: 0; + left: 0; /* LTR */ + width: 18px; + height: 18px; +} +[dir=rtl] .minicolors-theme-default .minicolors-swatches .minicolors-swatch { + right: 0; +} +.minicolors-theme-default.minicolors-position-right .minicolors-swatch { + left: auto; /* LTR */ + right: 5px; /* LTR */ +} +[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-swatch { + right: auto; + left: 5px; +} +.minicolors-theme-default.minicolors { + width: auto; + display: inline-block; +} +.minicolors-theme-default .minicolors-input { + height: 20px; + width: auto; + display: inline-block; + padding-left: 26px; /* LTR */ +} +[dir=rtl] .minicolors-theme-default .minicolors-input { + text-align: right; + unicode-bidi: plaintext; + padding-left: 1px; + padding-right: 26px; +} +.minicolors-theme-default.minicolors-position-right .minicolors-input { + padding-right: 26px; /* LTR */ + padding-left: inherit; /* LTR */ +} +[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-input { + padding-right: inherit; + padding-left: 26px; +} + +/* Bootstrap theme */ +.minicolors-theme-bootstrap .minicolors-swatch { + z-index: 2; + top: 3px; + left: 3px; /* LTR */ + width: 28px; + height: 28px; + border-radius: 3px; +} +[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatch { + right: 3px; +} +.minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch { + margin-bottom: 2px; + top: 0; + left: 0; /* LTR */ + width: 20px; + height: 20px; +} +[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch { + right: 0; +} +.minicolors-theme-bootstrap .minicolors-swatch-color { + border-radius: inherit; +} +.minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch { + left: auto; /* LTR */ + right: 3px; /* LTR */ +} +[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left > .minicolors-swatch { + right: auto; + left: 3px; +} +.minicolors-theme-bootstrap .minicolors-input { + float: none; + padding-left: 44px; /* LTR */ +} +[dir=rtl] .minicolors-theme-bootstrap .minicolors-input { + text-align: right; + unicode-bidi: plaintext; + padding-left: 12px; + padding-right: 44px; +} +.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input { + padding-right: 44px; /* LTR */ + padding-left: 12px; /* LTR */ +} +[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left .minicolors-input { + padding-right: 12px; + padding-left: 44px; +} +.minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch { + top: 4px; + left: 4px; /* LTR */ + width: 37px; + height: 37px; + border-radius: 5px; +} +[dir=rtl] .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch { + right: 4px; +} +.minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch { + width: 24px; + height: 24px; +} +.minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch { + width: 18px; + height: 18px; +} +.input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input { + border-top-left-radius: 0; /* LTR */ + border-bottom-left-radius: 0; /* LTR */ +} +[dir=rtl] .input-group .minicolors-theme-bootstrap .minicolors-input { + border-radius: 4px; +} +[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:last-child) .minicolors-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +/* bootstrap input-group rtl override */ +[dir=rtl] .input-group .form-control, +[dir=rtl] .input-group-addon, +[dir=rtl] .input-group-btn > .btn, +[dir=rtl] .input-group-btn > .btn-group > .btn, +[dir=rtl] .input-group-btn > .dropdown-toggle { + border: 1px solid #ccc; + border-radius: 4px; +} +[dir=rtl] .input-group .form-control:first-child, +[dir=rtl] .input-group-addon:first-child, +[dir=rtl] .input-group-btn:first-child > .btn, +[dir=rtl] .input-group-btn:first-child > .btn-group > .btn, +[dir=rtl] .input-group-btn:first-child > .dropdown-toggle, +[dir=rtl] .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +[dir=rtl] .input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: 0; +} +[dir=rtl] .input-group .form-control:last-child, +[dir=rtl] .input-group-addon:last-child, +[dir=rtl] .input-group-btn:last-child > .btn, +[dir=rtl] .input-group-btn:last-child > .btn-group > .btn, +[dir=rtl] .input-group-btn:last-child > .dropdown-toggle, +[dir=rtl] .input-group-btn:first-child > .btn:not(:first-child), +[dir=rtl] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +/* Semantic Ui theme */ +.minicolors-theme-semanticui .minicolors-swatch { + top: 0; + left: 0; /* LTR */ + padding: 18px; +} +[dir=rtl] .minicolors-theme-semanticui .minicolors-swatch { + right: 0; +} +.minicolors-theme-semanticui input { + text-indent: 30px; +} diff --git a/app/controllers/admin/galleries_controller.rb b/app/controllers/admin/galleries_controller.rb index adf9e5d..627acf3 100644 --- a/app/controllers/admin/galleries_controller.rb +++ b/app/controllers/admin/galleries_controller.rb @@ -1,10 +1,138 @@ require 'rubyXL' class Admin::GalleriesController < OrbitAdminController include Admin::GalleriesHelper - before_filter :setup_vars + before_filter :setup_vars before_action :authenticate_user, :except => "imgs" before_action :log_user_action + def save_crop + begin + images = AlbumImage.all.select{|value| params[:id].include? value.id.to_s} + id = images.first.album_id.to_s + x = params['x'] + y = params['y'] + w = params['w'] + h = params['h'] + cords = x.zip(y,w,h) + count = cords.length + images.each_with_index do |image,index| + cord = cords[index] + if image.album_crops.first.nil? + image.album_crops.create(crop_x: cord[0],crop_y: cord[1],crop_w: cord[2],crop_h: cord[3]) + else + image.album_crops.first.update_attributes(crop_x: cord[0],crop_y: cord[1],crop_w: cord[2],crop_h: cord[3]) + end + end + @@finish = false + @@start = false + Thread.new do + @@start = true + images.each_with_index do |image,index| + @@progress_percent = (index*100.0/count).floor.to_s+'%' + all_version = image.file.versions.map{|k,v| k} + begin + #org_fname = image.file.path + #org_extname = File.extname(org_fname) + #org_fname.slice! org_extname + #FileUtils.cp(org_fname + org_extname, org_fname + '_resized' + org_extname) + @@progress_filename = image[:file].to_s + all_version.each do |version| + if !(version.to_s == 'resized' && crop_but_no_backup(image)) + image.file.recreate_versions! version + image.save! + end + end + rescue => e + @@progress_filename = e.inspect.to_s + puts e.inspect + end + end + @@finish = true + end + rescue => e + puts e.inspect + end + redirect_url = "/admin/galleries/crop_process" + render :json => {'href' => redirect_url}.to_json + end + def call_translate + text = params['text'] + render :json => {'translate' => "#{t(text.to_s)}" }.to_json + end + def recreate_image + notalive = @@progress_percent.nil? rescue true + if notalive + if !params['album_id'].to_s.empty? + choice_ids = params['album_id'].split(',') + albums = Album.all.select { |value| (choice_ids.include? value.id.to_s)} + if !(params['use_default']=='true') + color = params['color_choice'].to_s.empty? ? 'transparent' : params['color_choice'] + albums.each do |album| + if album.album_colors.first.nil? + album.album_colors.create('color' => color) + else + album.album_colors.first.update_attributes('color' => color, 'updated_at' => Time.now) + end + end + end + @@start = false + count = 0 + albums.each{|album| count+=album.album_images.count } + @@finish = false + Thread.new do + @@start = true + i = 0 + albums.each do |album| + album.album_images.each do |image| + error = nil + all_version = image.file.versions.map{|k,v| k} + begin + all_version.each do |version| + if !(version.to_s == 'resized' && crop_but_no_backup(image)) + image.file.recreate_versions! version + image.save! + end + end + rescue => error + end + @@progress_percent = (i*100.0/count).floor.to_s+'%' + if !error.nil? + @@progress_filename = error.inspect.to_s.encode('UTF-8', invalid: :replace, undef: :replace, replace: '?') + sleep(1) + else + @@progress_filename = image[:file].to_s + end + i+=1 + end + end + @@finish = true + end + else + @@start = true + @@progress_filename = '' + @@finish = true + @@progress_percent = '100%' + end + end + end + def finish_recreate + @@progress_percent = nil + @@progress_filename = nil + @@start = false + render :text => '' + end + def recreate_progress + if @@start + render :json => {'percent' => (@@progress_percent rescue '0%'), 'filename' => (@@progress_filename rescue ''), 'finish' => (@@finish rescue false) }.to_json + else + render :json => {'percent' => '0%', 'filename' => '', 'finish' => false }.to_json + end + end def index + Album.each do |album| + if album.album_colors.first.nil? + album.album_colors.create('color' => '#000000') + end + end @tags = @module_app.tags categories = @module_app.categories.enabled @filter_fields = filter_fields(categories, @tags) @@ -14,7 +142,15 @@ class Admin::GalleriesController < OrbitAdminController albums = Album.where(:order.gt => -1).asc(:order).with_categories(filters("category")).with_tags(filters("tag")) albums = search_data(albums,[:name]) @albums = @albums.concat(albums) - + if AlbumColor.count!=0 + if AlbumColor.all.desc('updated_at').first[:color] == 'transparent' + @color_save = '' + else + @color_save = AlbumColor.desc('updated_at').first[:color] + end + else + @color_save = '#000000' + end if request.xhr? render :partial => "album", :collection => @albums end @@ -190,19 +326,53 @@ class Admin::GalleriesController < OrbitAdminController end - - def upload_image - @album = Album.find(params[:album_id]) - @files = params['files'] - a = Array.new - @files.each do |file| - @image = @album.album_images.new - @image.file = file - @image.tags = @album.tags rescue [] - @image.save! - a << {"thumbnail_url"=>@image.file.thumb.url,"url"=>admin_image_path(@image)} + def upload_process + if @@upload_success == true + count = @@image_unprocessed.length + Thread.new do + begin + @@start = true + @@image_unprocessed.each_with_index do |image,i| + @@progress_filename = @@file[i].original_filename + image.file = @@file[i] + image.save! + @@progress_percent = ((i+1)*100.0/count).floor.to_s + '%' + end + rescue => e + puts e.inspect + end + @@file = [] + @@image_unprocessed = [] + @upload_success = false + @@finish = true + end end - render :json=>{"files"=>a}.to_json + end + def start_upload_process + @@upload_success = true + render :json => {}.to_json + end + def init_upload + @@image_unprocessed = [] + @@start = false + @@finish = false + @@file = [] + @@progress_percent = '0%' + @@progress_filename = 'processing!!' + render :json => {}.to_json + end + def upload_image + if !(@@image_unprocessed.nil?) + album = Album.find(params[:album_id]) + files = params['files'] + files.each do |file| + image = album.album_images.new + @@file << file + image.tags = (album.tags rescue []) + @@image_unprocessed << image + end + end + render :json=>{"files"=>[{}]}.to_json end def last_image_id @@ -276,7 +446,13 @@ class Admin::GalleriesController < OrbitAdminController end private - + def crop_but_no_backup image + fname = image.file.path + extension = File.extname(fname) + base_name = fname.chomp(extension) + base_name += ('_resized'+ extension) + File.file?(base_name) + end def setup_vars @module_app = ModuleApp.where(:key=>"gallery").first end diff --git a/app/controllers/admin/images_controller.rb b/app/controllers/admin/images_controller.rb index 536d78b..ccf622b 100644 --- a/app/controllers/admin/images_controller.rb +++ b/app/controllers/admin/images_controller.rb @@ -1,5 +1,17 @@ class Admin::ImagesController < OrbitAdminController before_filter :setup_vars + def batch_crop + images = params['image_ids'].split(',') + @img = [] + images.each do |image| + @img << AlbumImage.find(image) + end + render 'batch_crop' + end + def edit + @image = AlbumImage.find(params[:id]) + render 'edit_image' + end def show @image = AlbumImage.find(params[:id]) @albumid = @image.album_id @@ -35,6 +47,7 @@ class Admin::ImagesController < OrbitAdminController images = params['images'] images.each do |image| img = AlbumImage.find(image) + FileUtils.rm_rf(File.dirname(img.file.path)) img.delete end if params['delete_cover'] == "true" diff --git a/app/controllers/galleries_controller.rb b/app/controllers/galleries_controller.rb index d68a7f5..6bdb0b5 100644 --- a/app/controllers/galleries_controller.rb +++ b/app/controllers/galleries_controller.rb @@ -67,6 +67,7 @@ class GalleriesController < ApplicationController { "link_to_show" => OrbitHelper.widget_more_url + "/" + a.album.to_param + "#" + a.id.to_s, "alt_title" => alt_text, + "src" => a.file.url, "thumb-src" => a.file.thumb.url, "thumb-large-src" => a.file.thumb_large.url, "image_description" => a.description, @@ -86,14 +87,15 @@ class GalleriesController < ApplicationController images = album.album_images.asc(:order) output = Array.new images.each do |values| - alt_text = (values.description.nil? || values.description == "" ? "gallery image" : values.description) - output << { _id: values.id.to_s, - description: values.description, - title: values.title, - alt_title: alt_text, - file: values.file.as_json[:file], - gallery_album_id: values.album_id, - tags: values.tags} + alt_text = (values.description.nil? || values.description == "" ? "gallery image" : values.description) + output << { _id: values.id.to_s, + description: values.description, + title: values.title, + alt_title: alt_text, + url: values.file.url, + file: values.file.as_json[:file], + gallery_album_id: values.album_id, + tags: values.tags} end return output end @@ -105,7 +107,6 @@ class GalleriesController < ApplicationController images = album.album_images.asc(:order) data = { "album" => album, - # "images" => images, "image" => image.id.to_s, "images" => imgs(albumid) } diff --git a/app/models/album.rb b/app/models/album.rb index b235329..8f738be 100644 --- a/app/models/album.rb +++ b/app/models/album.rb @@ -17,7 +17,9 @@ class Album # has_and_belongs_to_many :tags, :class_name => "GalleryTag" has_many :album_images, :autosave => true, :dependent => :destroy + has_many :album_colors, :autosave => true, :dependent => :destroy accepts_nested_attributes_for :album_images, :allow_destroy => true + accepts_nested_attributes_for :album_colors, :allow_destroy => true def self.find_by_param(input) self.find_by(uid: input) diff --git a/app/models/album_color.rb b/app/models/album_color.rb new file mode 100644 index 0000000..1295e00 --- /dev/null +++ b/app/models/album_color.rb @@ -0,0 +1,6 @@ +class AlbumColor + include Mongoid::Document + include Mongoid::Timestamps + field :color, type: String + belongs_to :album +end \ No newline at end of file diff --git a/app/models/album_crop.rb b/app/models/album_crop.rb new file mode 100644 index 0000000..889048c --- /dev/null +++ b/app/models/album_crop.rb @@ -0,0 +1,8 @@ +class AlbumCrop + include Mongoid::Document + field :crop_x, type: String + field :crop_y, type: String + field :crop_w, type: String + field :crop_h, type: String + belongs_to :album_image +end \ No newline at end of file diff --git a/app/models/album_image.rb b/app/models/album_image.rb index 447dd9d..b08ccc5 100644 --- a/app/models/album_image.rb +++ b/app/models/album_image.rb @@ -14,5 +14,6 @@ class AlbumImage # has_and_belongs_to_many :tags, :class_name => "GalleryTag" belongs_to :album - + has_many :album_crops, :autosave => true, :dependent => :destroy + accepts_nested_attributes_for :album_crops, :allow_destroy => true end \ No newline at end of file diff --git a/app/uploaders/gallery_uploader.rb b/app/uploaders/gallery_uploader.rb index e76a56d..25b0901 100644 --- a/app/uploaders/gallery_uploader.rb +++ b/app/uploaders/gallery_uploader.rb @@ -2,14 +2,8 @@ module CarrierWave module Uploader module Versions - def recreate_version!(version) - already_cached = cached? - cache_stored_file! if !already_cached - send(version).store! - if !already_cached && @cache_id - tmp_dir = File.expand_path(File.join(cache_dir, cache_id), CarrierWave.root) - FileUtils.rm_rf(tmp_dir) - end + def store_dir + "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" end end end @@ -21,7 +15,6 @@ class GalleryUploader < CarrierWave::Uploader::Base # include CarrierWave::RMagick # include CarrierWave::ImageScience include CarrierWave::MiniMagick - # Choose what kind of storage to use for this uploader: # storage :file # storage :s3 @@ -31,7 +24,13 @@ class GalleryUploader < CarrierWave::Uploader::Base def store_dir "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" end - + def get_org_url + if have_crop? + model.file.resized.url + else + model.file.url + end + end def fix_exif_rotation manipulate! do |img| img.tap(&:auto_orient) @@ -53,37 +52,45 @@ class GalleryUploader < CarrierWave::Uploader::Base # version :thumb do # process :scale => [50, 50] # end - + process :resizer + process :optimize + version :resized, :if => :have_crop? do #backup + def full_filename(for_file) + extension = File.extname(super(for_file)) + base_name = super(for_file).split('resized_').join('').chomp(extension) + base_name + '_resized'+ extension + end + end + version :crop_from_org, :if => :have_crop? do + process :crop_it + def full_filename(for_file) + super(for_file).split('crop_from_org_').join('') + end + end version :thumb do - process :fix_exif_rotation - process :resize_to_fill => [200, 200] + process :convert => 'png', :if => :transparent? + process :pad_process => [200,200] end - version :thumb_large do - process :fix_exif_rotation - process :resize_to_fill => [600, 600] + process :convert => 'png', :if => :transparent? + process :pad_process => [600,600] end - version :theater do - process :fix_exif_rotation - process :resize_to_limit => [1920, 1080] + process :limit_process => [1920, 1080] end - version :mobile do - process :fix_exif_rotation - process :resize_to_limit => [1152, 768] + process :limit_process => [1152, 768] end +# Add a white list of extensions which are allowed to be uploaded. +# For images you might use something like this: +# def extension_white_list +# %w(jpg jpeg gif png) +# end - # Add a white list of extensions which are allowed to be uploaded. - # For images you might use something like this: - # def extension_white_list - # %w(jpg jpeg gif png) - # end - - # Override the filename of the uploaded files: - # def filename - # "something.jpg" if original_filename - # end +# Override the filename of the uploaded files: +# def filename +# "something.jpg" if original_filename +# end # def manipulate! # raise current_path.inspect @@ -94,6 +101,66 @@ class GalleryUploader < CarrierWave::Uploader::Base # rescue ::MiniMagick::Error, ::MiniMagick::Invalid => e # raise CarrierWave::ProcessingError.new("Failed to manipulate with MiniMagick, maybe it is not an image? Original Error: #{e}") # end - + def optimize (*arg) + manipulate! do |img| + return img unless img.mime_type.match /image\/jpeg/ + img.strip + img.combine_options do |c| + c.quality "90" + c.depth "24" + c.interlace "plane" + end + img + end + end + private + def resizer + size_of_file = size.to_f / (2**20) + if size_of_file > 5 + img = MiniMagick::Image.open(path) + img_width = img[:width] + img_height = img[:height] + multiple = [img_width/Math.sqrt(size_of_file/5)/1920,img_height/Math.sqrt(size_of_file/5)/1080].max + if (multiple - multiple.to_i)>0.5 + multiple = multiple.to_i + 0.5 + else + multiple = multiple.to_i + end + resize_to_limit(multiple*1920,multiple*1080) + else + manipulate! do |img| + img + end + end + end + def limit_process(w,h) + resize_to_limit(w,h) + end + def have_crop?(*arg) + !(model.album_crops.first.nil?) + end + def crop_it + crops = model.album_crops.first + x=(crops.crop_x).to_i.abs.to_s + y=(crops.crop_y).to_i.abs.to_s + w=crops.crop_w.to_i + h=crops.crop_h.to_i + crop_image("#{w}x#{h}+#{x}+#{y}") + end + def crop_image(geometry) + img = MiniMagick::Image.open(model.file.resized.path) + img.crop(geometry) + img.write(model.file.crop_from_org.path) + end + def transparent?(*arg) + now_id = model.album_id.to_s + now_album = Album.all.select { |value| (now_id==value.id.to_s)}[0] + now_album.album_colors.first['color']=='transparent' + end + def pad_process (w,h) + now_id = model.album_id.to_s + now_album = Album.all.select { |value| (now_id==value.id.to_s)}[0] + resize_and_pad(w, h, (now_album.album_colors.first['color']=='transparent' ? :transparent : now_album.album_colors.first['color']), 'Center') + end end diff --git a/app/views/admin/galleries/_album.html.erb b/app/views/admin/galleries/_album.html.erb index 5562c90..8e9645f 100644 --- a/app/views/admin/galleries/_album.html.erb +++ b/app/views/admin/galleries/_album.html.erb @@ -1,4 +1,7 @@
  • +
    + +
    <% if album.cover == "default" %> <%= image_tag "gallery/default.jpg" %> diff --git a/app/views/admin/galleries/_form.html.erb b/app/views/admin/galleries/_form.html.erb index 84c85fe..e48d91a 100644 --- a/app/views/admin/galleries/_form.html.erb +++ b/app/views/admin/galleries/_form.html.erb @@ -2,6 +2,7 @@ <%= stylesheet_link_tag "lib/main-forms" %> <%= stylesheet_link_tag "lib/fileupload" %> <%= stylesheet_link_tag "lib/main-list" %> + <%= stylesheet_link_tag "jquery.minicolors" %> <% end %> <% content_for :page_specific_javascript do %> <%= javascript_include_tag "lib/bootstrap-fileupload" %> @@ -9,7 +10,55 @@ <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %> <%= javascript_include_tag "lib/modal-preview" %> <%= javascript_include_tag "lib/file-type" %> + <%= javascript_include_tag "jquery.minicolors" %> <% end %> + +
    @@ -23,6 +72,9 @@
  • <%= t(:tags) %>
    • +
  • + <%= t('gallery.recreate_thumb') %> +
    • @@ -40,7 +92,7 @@
    • - +
    @@ -48,52 +100,69 @@ <%= select_tags(f, @module_app) %>
    - - + + <% if @album.album_colors.first.nil? %> + <% @album.album_colors.new('color' => '#000000') %> + <% end %> + <%= f.fields_for :album_colors do |album_color_form| %> +
    + +
    + + <%= album_color_form.text_field :color , :class => 'input-block-level minicolors-input' %> + + + <%= t('gallery.transparent') %> + +
    +
    + <% end %> -
    <%= t(:language) %>
    - -
    - - +
    +
    +
    <%= t(:language) %>
    +
      + <% @site_in_use_locales.each_with_index do |locale, i| %> +
    • > + <%= t(locale.to_s) %> +
      • + <% end %> +
    +
    + + + + <% @site_in_use_locales.each_with_index do |locale, i| %> + +
    +
    + <%= f.fields_for :name_translations do |name| %> + <%= label_tag(locale, t("gallery.album_name"),:class=>"control-label muted") %> +
    + <%= name.text_field locale, :class => "input-block-level", :placeholder=>"Title",:value => (@album.name_translations[locale] rescue nil) %> +
    + <% end %> +
    +
    + <%= f.fields_for :description_translations do |desc| %> + <%= label_tag(locale, t("gallery.album_desc"), :class=>"control-label muted") %> +
    +
    + <%= desc.text_area locale, :class => "ckeditor input-block-level", :value => (@album.description_translations[locale] rescue nil)%> +
    +
    + <% end %> +
    +
    + <% end %> + +
    - <% @site_in_use_locales.each_with_index do |locale, i| %> - -
    -
    - <%= f.fields_for :name_translations do |name| %> - <%= label_tag(locale, t("gallery.album_name"),:class=>"control-label muted") %> -
    - <%= name.text_field locale, :class => "input-block-level", :placeholder=>"Title",:value => (@album.name_translations[locale] rescue nil) %> -
    - <% end %> -
    -
    - <%= f.fields_for :description_translations do |desc| %> - <%= label_tag(locale, t("gallery.album_desc"), :class=>"control-label muted") %> -
    -
    - <%= desc.text_area locale, :class => "ckeditor input-block-level", :value => (@album.description_translations[locale] rescue nil)%> -
    -
    - <% end %> -
    -
    - <% end %> - -
    - + + +
    + <%= f.submit t("gallery.save"), :class=> "btn btn-primary bt-form-save" %> +
    - -
    - <%= f.submit t("gallery.save"), :class=> "btn btn-primary bt-form-save" %> -
    - \ No newline at end of file diff --git a/app/views/admin/galleries/_image.html.erb b/app/views/admin/galleries/_image.html.erb index 20a34f7..c1a7194 100644 --- a/app/views/admin/galleries/_image.html.erb +++ b/app/views/admin/galleries/_image.html.erb @@ -3,6 +3,9 @@ <% if can_edit_or_delete?(@album) %> + + + ">edit
    - Cancel + <%= t('gallery.cancel') %>
    @@ -160,7 +160,7 @@ <% end %>
    - Cancel + <%= t('gallery.cancel') %>
    @@ -242,7 +242,7 @@

  • {%=file.name%}

    -

    Success File uploaded successfully!

    +

    <%= t('gallery.success') %><%= t('gallery.file_uploaded_successfully') %>!

    {%=o.formatFileSize(file.size)%}

    • {% } %} diff --git a/app/views/admin/galleries/upload_panel.html.erb b/app/views/admin/galleries/upload_panel.html.erb index d5f563f..1c3ec5e 100755 --- a/app/views/admin/galleries/upload_panel.html.erb +++ b/app/views/admin/galleries/upload_panel.html.erb @@ -12,12 +12,12 @@ <%= form_for @album, :url => panel_gallery_back_end_upload_image_path, :html => {:class => 'clear'} do |f| %>
    - - + +
    diff --git a/app/views/admin/galleries/upload_process.html.erb b/app/views/admin/galleries/upload_process.html.erb new file mode 100644 index 0000000..c6e12cd --- /dev/null +++ b/app/views/admin/galleries/upload_process.html.erb @@ -0,0 +1,39 @@ +<%= t('gallery.progressbar')+':' %> +
    +
    +
    0
    +
    +
    +
    + \ No newline at end of file diff --git a/app/views/admin/images/batch_crop.html.erb b/app/views/admin/images/batch_crop.html.erb new file mode 100644 index 0000000..fc7c9cf --- /dev/null +++ b/app/views/admin/images/batch_crop.html.erb @@ -0,0 +1,102 @@ + + + + +
    +
    + + + + + + +
    + +
    +
    + <% @img.each do |image| %> +
    + +
    + <% end %> +
    + + \ No newline at end of file diff --git a/app/views/admin/images/crop_process.html.erb b/app/views/admin/images/crop_process.html.erb new file mode 100644 index 0000000..c6e12cd --- /dev/null +++ b/app/views/admin/images/crop_process.html.erb @@ -0,0 +1,39 @@ +<%= t('gallery.progressbar')+':' %> +
    +
    +
    0
    +
    +
    +
    + \ No newline at end of file diff --git a/app/views/admin/images/edit_image.html.erb b/app/views/admin/images/edit_image.html.erb new file mode 100644 index 0000000..b21fed7 --- /dev/null +++ b/app/views/admin/images/edit_image.html.erb @@ -0,0 +1,59 @@ + + + + +
    + + \ No newline at end of file diff --git a/app/views/galleries/show.html.erb b/app/views/galleries/show.html.erb index 01300b6..d7273f4 100644 --- a/app/views/galleries/show.html.erb +++ b/app/views/galleries/show.html.erb @@ -15,6 +15,9 @@
    +
    + +
    diff --git a/config/locales/en.yml b/config/locales/en.yml index f682298..bb43f49 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1,6 +1,37 @@ en: gallery: + show_original_image: Show the original picture + width: Width + height: Height + batch_crop: Batch crop images + use_set: Use the previously configured color + add_files: Add files + start_upload: Start upload + cancel_upload: Cancel upload + drop_files_here: Drop files here + success: Success + file_uploaded_successfully: File uploaded successfully + close_panel: Close panel + no_choose: Please select at least one before apply + edit_order: Edit Order + save_order: Save Order + add_tags: Add tags + import: Import + delete_photo: Delete Photo + delete: Delete + deselect: Deselect + back: Back + edit: Edit + add_image: Add Image + progressbar: 'Progress bar' + error: 'Recreate thumb failed, please contact service agent or try again later' + 'sure?': 'Are yoy sure to apply? it will recreate all the thumbs of you choose' + recreate_thumb: 'Frame color' + 'recreate': 'Apply' + transparent: transparent + checked: select all + unchecked: unselect all add_album: Add Album add_images: Add Images all: All diff --git a/config/locales/zh_tw.yml b/config/locales/zh_tw.yml index 08475a2..9cf8397 100644 --- a/config/locales/zh_tw.yml +++ b/config/locales/zh_tw.yml @@ -1,6 +1,39 @@ zh_tw: gallery: + show_original_image: 顯示原始圖片 + width: 寬 + height: 高 + batch_crop: 批量裁減圖片 + use_set: 使用先前已設定的顏色 + add_files: 新增檔案 + start_upload: 開始上傳 + cancel_upload: 取消上傳 + drop_files_here: 拖移檔案到此 + success: 成功 + file_uploaded_successfully: 檔案上傳成功 + close_panel: 關閉面板 + no_choose: 請至少選擇一項再按套用 + edit_order: 改變排序 + save_order: 儲存排序 + add_tags: 新增標籤 + import: 匯入 + delete_photo: 刪除圖片 + delete: 刪除 + deselect: 反選 + back: 返回 + edit: 編輯 + add_image: 新增圖片 + cancel: 關閉 + dashboard: 儀表板 + progressbar: 進度條 + error: '重新產生縮圖失敗，請聯絡客服或稍後再試' + 'sure?': '您真的确定要套用嗎? 會重新產生整個相簿的縮圖喔!' + recreate_thumb: 相框底色 + transparent: 透明 + checked: 全選 + unchecked: 全部反選 + recreate: 套用 add_album: 新增相冊 add_images: 新增影像 album: 相冊 @@ -25,15 +58,15 @@ zh_tw: no_description: 沒有描述 photo_tag: 相片標籤 pic_not_found: 找不到圖片 - img_link: Image Link - img_description: Image Description + img_link: 圖片連結 + img_description: 圖片描述 save: 儲存 save_changes: 儲存變更 search_tags: 搜尋標籤 select_category: 選擇類別 set_cover: 設定為封面 widget: - widget1: Widget1 + widget1: 插件1 widget_option: horizontal: 水平 vertical: 垂直 \ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index 1fb1b14..5b42776 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -6,7 +6,11 @@ Rails.application.routes.draw do get "/xhr/galleries/theater/:id" => "galleries#theater" namespace :admin do get "galleries/get_photoData_json" => "galleries#get_photoData_json" - + get "galleries/recreate_image" => "galleries#recreate_image" + get "galleries/crop_process" => "images#crop_process" + post "galleries/recreate_image/recreate_progress" => "galleries#recreate_progress" + get "galleries/recreate_image/finish_recreate" => "galleries#finish_recreate" + get "galleries/batch_crop" => "images#batch_crop" get "galleries/new_images" => "galleries#new_images" get "galleries/last_image_id" => "galleries#last_image_id" post "galleries/set_cover" => "galleries#set_cover" @@ -14,7 +18,11 @@ Rails.application.routes.draw do post "galleries/update_image" => "images#update_image" post "galleries/image_tagging" => "images#image_tagging" post "galleries/order" => "images#changeorder" - + post "galleries/translate" => "galleries#call_translate" + post "galleries/save_crop" => "galleries#save_crop" + get "galleries/upload_process" => "galleries#upload_process" + post "galleries/start_upload_process" => "galleries#start_upload_process" + post "galleries/init_upload" => "galleries#init_upload" resources :galleries do get "imgs" => "galleries#imgs" member do