\\n ' + value + '\\n
\\n ');\n\t },\n\t item: function item(data) {\n\t var _classNames2;\n\n\t var localClasses = (0, _classnames2.default)(globalClasses.item, (_classNames2 = {}, _defineProperty(_classNames2, globalClasses.highlightedState, data.highlighted), _defineProperty(_classNames2, globalClasses.itemSelectable, !data.highlighted), _defineProperty(_classNames2, globalClasses.placeholder, data.placeholder), _classNames2));\n\n\t if (_this22.config.removeItemButton) {\n\t var _classNames3;\n\n\t localClasses = (0, _classnames2.default)(globalClasses.item, (_classNames3 = {}, _defineProperty(_classNames3, globalClasses.highlightedState, data.highlighted), _defineProperty(_classNames3, globalClasses.itemSelectable, !data.disabled), _defineProperty(_classNames3, globalClasses.placeholder, data.placeholder), _classNames3));\n\n\t return (0, _utils.strToEl)('\\n ' + data.value + '
\\n \\n ');\n\t },\n\t choice: function choice(data) {\n\t var _classNames5;\n\n\t var localClasses = (0, _classnames2.default)(globalClasses.item, globalClasses.itemChoice, (_classNames5 = {}, _defineProperty(_classNames5, globalClasses.itemDisabled, data.disabled), _defineProperty(_classNames5, globalClasses.itemSelectable, !data.disabled), _defineProperty(_classNames5, globalClasses.placeholder, data.placeholder), _classNames5));\n\n\t return (0, _utils.strToEl)('\\n \\n ' + label + '\\n
\\n ');\n\t },\n\t option: function option(data) {\n\t return (0, _utils.strToEl)('\\n \\n ');\n\t }\n\t };\n\n\t // User's custom templates\n\t var callbackTemplate = this.config.callbackOnCreateTemplates;\n\t var userTemplates = {};\n\t if (callbackTemplate && (0, _utils.isType)('Function', callbackTemplate)) {\n\t userTemplates = callbackTemplate.call(this, _utils.strToEl);\n\t }\n\n\t this.config.templates = (0, _utils.extend)(templates, userTemplates);\n\t }\n\t }, {\n\t key: '_setLoading',\n\t value: function _setLoading(isLoading) {\n\t this.store.dispatch((0, _index3.setIsLoading)(isLoading));\n\t }\n\n\t /**\n\t * Create DOM structure around passed select element\n\t * @return\n\t * @private\n\t */\n\n\t }, {\n\t key: '_createInput',\n\t value: function _createInput() {\n\t var _this23 = this;\n\n\t var direction = this.passedElement.getAttribute('dir') || 'ltr';\n\t var containerOuter = this._getTemplate('containerOuter', direction);\n\t var containerInner = this._getTemplate('containerInner');\n\t var itemList = this._getTemplate('itemList');\n\t var choiceList = this._getTemplate('choiceList');\n\t var input = this._getTemplate('input');\n\t var dropdown = this._getTemplate('dropdown');\n\n\t this.containerOuter = containerOuter;\n\t this.containerInner = containerInner;\n\t this.input = input;\n\t this.choiceList = choiceList;\n\t this.itemList = itemList;\n\t this.dropdown = dropdown;\n\n\t // Hide passed input\n\t this.passedElement.classList.add(this.config.classNames.input, this.config.classNames.hiddenState);\n\n\t // Remove element from tab index\n\t this.passedElement.tabIndex = '-1';\n\n\t // Backup original styles if any\n\t var origStyle = this.passedElement.getAttribute('style');\n\n\t if (Boolean(origStyle)) {\n\t this.passedElement.setAttribute('data-choice-orig-style', origStyle);\n\t }\n\n\t this.passedElement.setAttribute('style', 'display:none;');\n\t this.passedElement.setAttribute('aria-hidden', 'true');\n\t this.passedElement.setAttribute('data-choice', 'active');\n\n\t // Wrap input in container preserving DOM ordering\n\t (0, _utils.wrap)(this.passedElement, containerInner);\n\n\t // Wrapper inner container with outer container\n\t (0, _utils.wrap)(containerInner, containerOuter);\n\n\t if (this.isSelectOneElement) {\n\t input.placeholder = this.config.searchPlaceholderValue || '';\n\t } else if (this.placeholder) {\n\t input.placeholder = this.placeholder;\n\t input.style.width = (0, _utils.getWidthOfInput)(input);\n\t }\n\n\t if (!this.config.addItems) {\n\t this.disable();\n\t }\n\n\t containerOuter.appendChild(containerInner);\n\t containerOuter.appendChild(dropdown);\n\t containerInner.appendChild(itemList);\n\n\t if (!this.isTextElement) {\n\t dropdown.appendChild(choiceList);\n\t }\n\n\t if (this.isSelectMultipleElement || this.isTextElement) {\n\t containerInner.appendChild(input);\n\t } else if (this.canSearch) {\n\t dropdown.insertBefore(input, dropdown.firstChild);\n\t }\n\n\t if (this.isSelectElement) {\n\t var passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));\n\n\t this.highlightPosition = 0;\n\t this.isSearching = false;\n\n\t this._setLoading(true);\n\n\t if (passedGroups && passedGroups.length) {\n\t passedGroups.forEach(function (group) {\n\t _this23._addGroup(group, group.id || null);\n\t });\n\t } else {\n\t var passedOptions = Array.from(this.passedElement.options);\n\t var filter = this.config.sortFilter;\n\t var allChoices = this.presetChoices;\n\n\t // Create array of options from option elements\n\t passedOptions.forEach(function (o) {\n\t allChoices.push({\n\t value: o.value,\n\t label: o.innerHTML,\n\t selected: o.selected,\n\t disabled: o.disabled || o.parentNode.disabled,\n\t placeholder: o.hasAttribute('placeholder')\n\t });\n\t });\n\n\t // If sorting is enabled or the user is searching, filter choices\n\t if (this.config.shouldSort) {\n\t allChoices.sort(filter);\n\t }\n\n\t // Determine whether there is a selected choice\n\t var hasSelectedChoice = allChoices.some(function (choice) {\n\t return choice.selected;\n\t });\n\n\t // Add each choice\n\t allChoices.forEach(function (choice, index) {\n\t // Pre-select first choice if it's a single select\n\t if (_this23.isSelectOneElement) {\n\t // If there is a selected choice already or the choice is not\n\t // the first in the array, add each choice normally\n\t // Otherwise pre-select the first choice in the array\n\t var shouldPreselect = hasSelectedChoice || !hasSelectedChoice && index > 0;\n\t _this23._addChoice(choice.value, choice.label, shouldPreselect ? choice.selected : true, shouldPreselect ? choice.disabled : false, undefined, choice.customProperties, choice.placeholder);\n\t } else {\n\t _this23._addChoice(choice.value, choice.label, choice.selected, choice.disabled, undefined, choice.customProperties, choice.placeholder);\n\t }\n\t });\n\t }\n\n\t this._setLoading(false);\n\t } else if (this.isTextElement) {\n\t // Add any preset values seperated by delimiter\n\t this.presetItems.forEach(function (item) {\n\t var itemType = (0, _utils.getType)(item);\n\t if (itemType === 'Object') {\n\t if (!item.value) {\n\t return;\n\t }\n\t _this23._addItem(item.value, item.label, item.id, undefined, item.customProperties, item.placeholder);\n\t } else if (itemType === 'String') {\n\t _this23._addItem(item);\n\t }\n\t });\n\t }\n\t }\n\n\t /*===== End of Private functions ======*/\n\n\t }]);\n\n\t return Choices;\n\t}();\n\n\t\tmodule.exports = Choices;\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/**\n\t * @license\n\t * Fuse - Lightweight fuzzy-search\n\t *\n\t * Copyright (c) 2012-2016 Kirollos Risk ' + '
';\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n return typeof obj;\n} : function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n};\n\n\n\n\n\n\n\n\n\n\n\nvar classCallCheck = function (instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n};\n\nvar createClass = function () {\n function defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n }\n\n return function (Constructor, protoProps, staticProps) {\n if (protoProps) defineProperties(Constructor.prototype, protoProps);\n if (staticProps) defineProperties(Constructor, staticProps);\n return Constructor;\n };\n}();\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar toConsumableArray = function (arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];\n\n return arr2;\n } else {\n return Array.from(arr);\n }\n};\n\n/**\n * Check if the given value is not a number.\n */\nvar isNaN = Number.isNaN || WINDOW.isNaN;\n\n/**\n * Check if the given value is a number.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is a number, else `false`.\n */\nfunction isNumber(value) {\n return typeof value === 'number' && !isNaN(value);\n}\n\n/**\n * Check if the given value is undefined.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is undefined, else `false`.\n */\nfunction isUndefined(value) {\n return typeof value === 'undefined';\n}\n\n/**\n * Check if the given value is an object.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is an object, else `false`.\n */\nfunction isObject(value) {\n return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && value !== null;\n}\n\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\n\n/**\n * Check if the given value is a plain object.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is a plain object, else `false`.\n */\n\nfunction isPlainObject(value) {\n if (!isObject(value)) {\n return false;\n }\n\n try {\n var _constructor = value.constructor;\n var prototype = _constructor.prototype;\n\n\n return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf');\n } catch (e) {\n return false;\n }\n}\n\n/**\n * Check if the given value is a function.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is a function, else `false`.\n */\nfunction isFunction(value) {\n return typeof value === 'function';\n}\n\n/**\n * Iterate the given data.\n * @param {*} data - The data to iterate.\n * @param {Function} callback - The process function for each element.\n * @returns {*} The original data.\n */\nfunction each(data, callback) {\n if (data && isFunction(callback)) {\n if (Array.isArray(data) || isNumber(data.length) /* array-like */) {\n var length = data.length;\n\n var i = void 0;\n\n for (i = 0; i < length; i += 1) {\n if (callback.call(data, data[i], i, data) === false) {\n break;\n }\n }\n } else if (isObject(data)) {\n Object.keys(data).forEach(function (key) {\n callback.call(data, data[key], key, data);\n });\n }\n }\n\n return data;\n}\n\n/**\n * Extend the given object.\n * @param {*} obj - The object to be extended.\n * @param {*} args - The rest objects which will be merged to the first object.\n * @returns {Object} The extended object.\n */\nfunction extend(obj) {\n for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n if (isObject(obj) && args.length > 0) {\n if (Object.assign) {\n return Object.assign.apply(Object, [obj].concat(args));\n }\n\n args.forEach(function (arg) {\n if (isObject(arg)) {\n Object.keys(arg).forEach(function (key) {\n obj[key] = arg[key];\n });\n }\n });\n }\n\n return obj;\n}\n\n/**\n * Takes a function and returns a new one that will always have a particular context.\n * @param {Function} fn - The target function.\n * @param {Object} context - The new context for the function.\n * @returns {boolean} The new function.\n */\nfunction proxy(fn, context) {\n for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {\n args[_key2 - 2] = arguments[_key2];\n }\n\n return function () {\n for (var _len3 = arguments.length, args2 = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {\n args2[_key3] = arguments[_key3];\n }\n\n return fn.apply(context, args.concat(args2));\n };\n}\n\nvar REGEXP_DECIMALS = /\\.\\d*(?:0|9){12}\\d*$/i;\n\n/**\n * Normalize decimal number.\n * Check out {@link http://0.30000000000000004.com/ }\n * @param {number} value - The value to normalize.\n * @param {number} [times=100000000000] - The times for normalizing.\n * @returns {number} Returns the normalized number.\n */\nfunction normalizeDecimalNumber(value) {\n var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000000000;\n\n return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value;\n}\n\nvar REGEXP_SUFFIX = /^(width|height|left|top|marginLeft|marginTop)$/;\n\n/**\n * Apply styles to the given element.\n * @param {Element} element - The target element.\n * @param {Object} styles - The styles for applying.\n */\nfunction setStyle(element, styles) {\n var style = element.style;\n\n\n each(styles, function (value, property) {\n if (REGEXP_SUFFIX.test(property) && isNumber(value)) {\n value += 'px';\n }\n\n style[property] = value;\n });\n}\n\n/**\n * Check if the given element has a special class.\n * @param {Element} element - The element to check.\n * @param {string} value - The class to search.\n * @returns {boolean} Returns `true` if the special class was found.\n */\nfunction hasClass(element, value) {\n return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1;\n}\n\n/**\n * Add classes to the given element.\n * @param {Element} element - The target element.\n * @param {string} value - The classes to be added.\n */\nfunction addClass(element, value) {\n if (!value) {\n return;\n }\n\n if (isNumber(element.length)) {\n each(element, function (elem) {\n addClass(elem, value);\n });\n return;\n }\n\n if (element.classList) {\n element.classList.add(value);\n return;\n }\n\n var className = element.className.trim();\n\n if (!className) {\n element.className = value;\n } else if (className.indexOf(value) < 0) {\n element.className = className + ' ' + value;\n }\n}\n\n/**\n * Remove classes from the given element.\n * @param {Element} element - The target element.\n * @param {string} value - The classes to be removed.\n */\nfunction removeClass(element, value) {\n if (!value) {\n return;\n }\n\n if (isNumber(element.length)) {\n each(element, function (elem) {\n removeClass(elem, value);\n });\n return;\n }\n\n if (element.classList) {\n element.classList.remove(value);\n return;\n }\n\n if (element.className.indexOf(value) >= 0) {\n element.className = element.className.replace(value, '');\n }\n}\n\n/**\n * Add or remove classes from the given element.\n * @param {Element} element - The target element.\n * @param {string} value - The classes to be toggled.\n * @param {boolean} added - Add only.\n */\nfunction toggleClass(element, value, added) {\n if (!value) {\n return;\n }\n\n if (isNumber(element.length)) {\n each(element, function (elem) {\n toggleClass(elem, value, added);\n });\n return;\n }\n\n // IE10-11 doesn't support the second parameter of `classList.toggle`\n if (added) {\n addClass(element, value);\n } else {\n removeClass(element, value);\n }\n}\n\nvar REGEXP_HYPHENATE = /([a-z\\d])([A-Z])/g;\n\n/**\n * Hyphenate the given value.\n * @param {string} value - The value to hyphenate.\n * @returns {string} The hyphenated value.\n */\nfunction hyphenate(value) {\n return value.replace(REGEXP_HYPHENATE, '$1-$2').toLowerCase();\n}\n\n/**\n * Get data from the given element.\n * @param {Element} element - The target element.\n * @param {string} name - The data key to get.\n * @returns {string} The data value.\n */\nfunction getData(element, name) {\n if (isObject(element[name])) {\n return element[name];\n } else if (element.dataset) {\n return element.dataset[name];\n }\n\n return element.getAttribute('data-' + hyphenate(name));\n}\n\n/**\n * Set data to the given element.\n * @param {Element} element - The target element.\n * @param {string} name - The data key to set.\n * @param {string} data - The data value.\n */\nfunction setData(element, name, data) {\n if (isObject(data)) {\n element[name] = data;\n } else if (element.dataset) {\n element.dataset[name] = data;\n } else {\n element.setAttribute('data-' + hyphenate(name), data);\n }\n}\n\n/**\n * Remove data from the given element.\n * @param {Element} element - The target element.\n * @param {string} name - The data key to remove.\n */\nfunction removeData(element, name) {\n if (isObject(element[name])) {\n try {\n delete element[name];\n } catch (e) {\n element[name] = null;\n }\n } else if (element.dataset) {\n // #128 Safari not allows to delete dataset property\n try {\n delete element.dataset[name];\n } catch (e) {\n element.dataset[name] = null;\n }\n } else {\n element.removeAttribute('data-' + hyphenate(name));\n }\n}\n\nvar REGEXP_SPACES = /\\s+/;\n\n/**\n * Remove event listener from the target element.\n * @param {Element} element - The event target.\n * @param {string} type - The event type(s).\n * @param {Function} listener - The event listener.\n * @param {Object} options - The event options.\n */\nfunction removeListener(element, type, listener) {\n var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n\n if (!isFunction(listener)) {\n return;\n }\n\n var types = type.trim().split(REGEXP_SPACES);\n\n if (types.length > 1) {\n each(types, function (t) {\n removeListener(element, t, listener, options);\n });\n return;\n }\n\n if (element.removeEventListener) {\n element.removeEventListener(type, listener, options);\n } else if (element.detachEvent) {\n element.detachEvent('on' + type, listener);\n }\n}\n\n/**\n * Add event listener to the target element.\n * @param {Element} element - The event target.\n * @param {string} type - The event type(s).\n * @param {Function} listener - The event listener.\n * @param {Object} options - The event options.\n */\nfunction addListener(element, type, _listener) {\n var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n\n if (!isFunction(_listener)) {\n return;\n }\n\n var types = type.trim().split(REGEXP_SPACES);\n\n if (types.length > 1) {\n each(types, function (t) {\n addListener(element, t, _listener, options);\n });\n return;\n }\n\n if (options.once) {\n var originalListener = _listener;\n\n _listener = function listener() {\n for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {\n args[_key4] = arguments[_key4];\n }\n\n removeListener(element, type, _listener, options);\n return originalListener.apply(element, args);\n };\n }\n\n if (element.addEventListener) {\n element.addEventListener(type, _listener, options);\n } else if (element.attachEvent) {\n element.attachEvent('on' + type, _listener);\n }\n}\n\n/**\n * Dispatch event on the target element.\n * @param {Element} element - The event target.\n * @param {string} type - The event type(s).\n * @param {Object} data - The additional event data.\n * @returns {boolean} Indicate if the event is default prevented or not.\n */\nfunction dispatchEvent(element, type, data) {\n if (element.dispatchEvent) {\n var event = void 0;\n\n // Event and CustomEvent on IE9-11 are global objects, not constructors\n if (isFunction(Event) && isFunction(CustomEvent)) {\n if (isUndefined(data)) {\n event = new Event(type, {\n bubbles: true,\n cancelable: true\n });\n } else {\n event = new CustomEvent(type, {\n detail: data,\n bubbles: true,\n cancelable: true\n });\n }\n } else if (isUndefined(data)) {\n event = document.createEvent('Event');\n event.initEvent(type, true, true);\n } else {\n event = document.createEvent('CustomEvent');\n event.initCustomEvent(type, true, true, data);\n }\n\n // IE9+\n return element.dispatchEvent(event);\n } else if (element.fireEvent) {\n // IE6-10 (native events only)\n return element.fireEvent('on' + type);\n }\n\n return true;\n}\n\n/**\n * Get the offset base on the document.\n * @param {Element} element - The target element.\n * @returns {Object} The offset data.\n */\nfunction getOffset(element) {\n var doc = document.documentElement;\n var box = element.getBoundingClientRect();\n\n return {\n left: box.left + ((window.scrollX || doc && doc.scrollLeft || 0) - (doc && doc.clientLeft || 0)),\n top: box.top + ((window.scrollY || doc && doc.scrollTop || 0) - (doc && doc.clientTop || 0))\n };\n}\n\n/**\n * Empty an element.\n * @param {Element} element - The element to empty.\n */\nfunction empty(element) {\n while (element.firstChild) {\n element.removeChild(element.firstChild);\n }\n}\n\nvar location = WINDOW.location;\n\nvar REGEXP_ORIGINS = /^(https?:)\\/\\/([^:/?#]+):?(\\d*)/i;\n\n/**\n * Check if the given URL is a cross origin URL.\n * @param {string} url - The target URL.\n * @returns {boolean} Returns `true` if the given URL is a cross origin URL, else `false`.\n */\nfunction isCrossOriginURL(url) {\n var parts = url.match(REGEXP_ORIGINS);\n\n return parts && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port);\n}\n\n/**\n * Add timestamp to the given URL.\n * @param {string} url - The target URL.\n * @returns {string} The result URL.\n */\nfunction addTimestamp(url) {\n var timestamp = 'timestamp=' + new Date().getTime();\n\n return url + (url.indexOf('?') === -1 ? '?' : '&') + timestamp;\n}\n\n/**\n * Get transforms base on the given object.\n * @param {Object} obj - The target object.\n * @returns {string} A string contains transform values.\n */\nfunction getTransforms(_ref) {\n var rotate = _ref.rotate,\n scaleX = _ref.scaleX,\n scaleY = _ref.scaleY,\n translateX = _ref.translateX,\n translateY = _ref.translateY;\n\n var values = [];\n\n if (isNumber(translateX) && translateX !== 0) {\n values.push('translateX(' + translateX + 'px)');\n }\n\n if (isNumber(translateY) && translateY !== 0) {\n values.push('translateY(' + translateY + 'px)');\n }\n\n // Rotate should come first before scale to match orientation transform\n if (isNumber(rotate) && rotate !== 0) {\n values.push('rotate(' + rotate + 'deg)');\n }\n\n if (isNumber(scaleX) && scaleX !== 1) {\n values.push('scaleX(' + scaleX + ')');\n }\n\n if (isNumber(scaleY) && scaleY !== 1) {\n values.push('scaleY(' + scaleY + ')');\n }\n\n var transform = values.length ? values.join(' ') : 'none';\n\n return {\n WebkitTransform: transform,\n msTransform: transform,\n transform: transform\n };\n}\n\nvar navigator = WINDOW.navigator;\n\nvar IS_SAFARI_OR_UIWEBVIEW = navigator && /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);\n\n/**\n * Get an image's natural sizes.\n * @param {string} image - The target image.\n * @param {Function} callback - The callback function.\n */\nfunction getImageNaturalSizes(image, callback) {\n // Modern browsers (except Safari)\n if (image.naturalWidth && !IS_SAFARI_OR_UIWEBVIEW) {\n callback(image.naturalWidth, image.naturalHeight);\n return;\n }\n\n var newImage = document.createElement('img');\n var body = document.body || document.documentElement;\n\n newImage.onload = function () {\n callback(newImage.width, newImage.height);\n\n if (!IS_SAFARI_OR_UIWEBVIEW) {\n body.removeChild(newImage);\n }\n };\n\n newImage.src = image.src;\n\n // iOS Safari will convert the image automatically\n // with its orientation once append it into DOM (#279)\n if (!IS_SAFARI_OR_UIWEBVIEW) {\n newImage.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;';\n body.appendChild(newImage);\n }\n}\n\n/**\n * Get the max ratio of a group of pointers.\n * @param {string} pointers - The target pointers.\n * @returns {number} The result ratio.\n */\nfunction getMaxZoomRatio(pointers) {\n var pointers2 = extend({}, pointers);\n var ratios = [];\n\n each(pointers, function (pointer, pointerId) {\n delete pointers2[pointerId];\n\n each(pointers2, function (pointer2) {\n var x1 = Math.abs(pointer.startX - pointer2.startX);\n var y1 = Math.abs(pointer.startY - pointer2.startY);\n var x2 = Math.abs(pointer.endX - pointer2.endX);\n var y2 = Math.abs(pointer.endY - pointer2.endY);\n var z1 = Math.sqrt(x1 * x1 + y1 * y1);\n var z2 = Math.sqrt(x2 * x2 + y2 * y2);\n var ratio = (z2 - z1) / z1;\n\n ratios.push(ratio);\n });\n });\n\n ratios.sort(function (a, b) {\n return Math.abs(a) < Math.abs(b);\n });\n\n return ratios[0];\n}\n\n/**\n * Get a pointer from an event object.\n * @param {Object} event - The target event object.\n * @param {boolean} endOnly - Indicates if only returns the end point coordinate or not.\n * @returns {Object} The result pointer contains start and/or end point coordinates.\n */\nfunction getPointer(_ref2, endOnly) {\n var pageX = _ref2.pageX,\n pageY = _ref2.pageY;\n\n var end = {\n endX: pageX,\n endY: pageY\n };\n\n if (endOnly) {\n return end;\n }\n\n return extend({\n startX: pageX,\n startY: pageY\n }, end);\n}\n\n/**\n * Get the center point coordinate of a group of pointers.\n * @param {Object} pointers - The target pointers.\n * @returns {Object} The center point coordinate.\n */\nfunction getPointersCenter(pointers) {\n var pageX = 0;\n var pageY = 0;\n var count = 0;\n\n each(pointers, function (_ref3) {\n var startX = _ref3.startX,\n startY = _ref3.startY;\n\n pageX += startX;\n pageY += startY;\n count += 1;\n });\n\n pageX /= count;\n pageY /= count;\n\n return {\n pageX: pageX,\n pageY: pageY\n };\n}\n\n/**\n * Check if the given value is a finite number.\n */\nvar isFinite = Number.isFinite || WINDOW.isFinite;\n\n/**\n * Get the max sizes in a rectangle under the given aspect ratio.\n * @param {Object} data - The original sizes.\n * @returns {Object} The result sizes.\n */\nfunction getContainSizes(_ref4) {\n var aspectRatio = _ref4.aspectRatio,\n height = _ref4.height,\n width = _ref4.width;\n\n var isValidNumber = function isValidNumber(value) {\n return isFinite(value) && value > 0;\n };\n\n if (isValidNumber(width) && isValidNumber(height)) {\n if (height * aspectRatio > width) {\n height = width / aspectRatio;\n } else {\n width = height * aspectRatio;\n }\n } else if (isValidNumber(width)) {\n height = width / aspectRatio;\n } else if (isValidNumber(height)) {\n width = height * aspectRatio;\n }\n\n return {\n width: width,\n height: height\n };\n}\n\n/**\n * Get the new sizes of a rectangle after rotated.\n * @param {Object} data - The original sizes.\n * @returns {Object} The result sizes.\n */\nfunction getRotatedSizes(_ref5) {\n var width = _ref5.width,\n height = _ref5.height,\n degree = _ref5.degree;\n\n degree = Math.abs(degree) % 180;\n\n if (degree === 90) {\n return {\n width: height,\n height: width\n };\n }\n\n var arc = degree % 90 * Math.PI / 180;\n var sinArc = Math.sin(arc);\n var cosArc = Math.cos(arc);\n var newWidth = width * cosArc + height * sinArc;\n var newHeight = width * sinArc + height * cosArc;\n\n return degree > 90 ? {\n width: newHeight,\n height: newWidth\n } : {\n width: newWidth,\n height: newHeight\n };\n}\n\n/**\n * Get a canvas which drew the given image.\n * @param {HTMLImageElement} image - The image for drawing.\n * @param {Object} imageData - The image data.\n * @param {Object} canvasData - The canvas data.\n * @param {Object} options - The options.\n * @returns {HTMLCanvasElement} The result canvas.\n */\nfunction getSourceCanvas(image, _ref6, _ref7, _ref8) {\n var imageNaturalWidth = _ref6.naturalWidth,\n imageNaturalHeight = _ref6.naturalHeight,\n _ref6$rotate = _ref6.rotate,\n rotate = _ref6$rotate === undefined ? 0 : _ref6$rotate,\n _ref6$scaleX = _ref6.scaleX,\n scaleX = _ref6$scaleX === undefined ? 1 : _ref6$scaleX,\n _ref6$scaleY = _ref6.scaleY,\n scaleY = _ref6$scaleY === undefined ? 1 : _ref6$scaleY;\n var aspectRatio = _ref7.aspectRatio,\n naturalWidth = _ref7.naturalWidth,\n naturalHeight = _ref7.naturalHeight;\n var _ref8$fillColor = _ref8.fillColor,\n fillColor = _ref8$fillColor === undefined ? 'transparent' : _ref8$fillColor,\n _ref8$imageSmoothingE = _ref8.imageSmoothingEnabled,\n imageSmoothingEnabled = _ref8$imageSmoothingE === undefined ? true : _ref8$imageSmoothingE,\n _ref8$imageSmoothingQ = _ref8.imageSmoothingQuality,\n imageSmoothingQuality = _ref8$imageSmoothingQ === undefined ? 'low' : _ref8$imageSmoothingQ,\n _ref8$maxWidth = _ref8.maxWidth,\n maxWidth = _ref8$maxWidth === undefined ? Infinity : _ref8$maxWidth,\n _ref8$maxHeight = _ref8.maxHeight,\n maxHeight = _ref8$maxHeight === undefined ? Infinity : _ref8$maxHeight,\n _ref8$minWidth = _ref8.minWidth,\n minWidth = _ref8$minWidth === undefined ? 0 : _ref8$minWidth,\n _ref8$minHeight = _ref8.minHeight,\n minHeight = _ref8$minHeight === undefined ? 0 : _ref8$minHeight;\n\n var canvas = document.createElement('canvas');\n var context = canvas.getContext('2d');\n var maxSizes = getContainSizes({\n aspectRatio: aspectRatio,\n width: maxWidth,\n height: maxHeight\n });\n var minSizes = getContainSizes({\n aspectRatio: aspectRatio,\n width: minWidth,\n height: minHeight\n });\n var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));\n var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight));\n var params = [-imageNaturalWidth / 2, -imageNaturalHeight / 2, imageNaturalWidth, imageNaturalHeight];\n\n canvas.width = normalizeDecimalNumber(width);\n canvas.height = normalizeDecimalNumber(height);\n context.fillStyle = fillColor;\n context.fillRect(0, 0, width, height);\n context.save();\n context.translate(width / 2, height / 2);\n context.rotate(rotate * Math.PI / 180);\n context.scale(scaleX, scaleY);\n context.imageSmoothingEnabled = imageSmoothingEnabled;\n context.imageSmoothingQuality = imageSmoothingQuality;\n context.drawImage.apply(context, [image].concat(toConsumableArray(params.map(function (param) {\n return Math.floor(normalizeDecimalNumber(param));\n }))));\n context.restore();\n return canvas;\n}\n\nvar fromCharCode = String.fromCharCode;\n\n/**\n * Get string from char code in data view.\n * @param {DataView} dataView - The data view for read.\n * @param {number} start - The start index.\n * @param {number} length - The read length.\n * @returns {string} The read result.\n */\n\nfunction getStringFromCharCode(dataView, start, length) {\n var str = '';\n var i = void 0;\n\n length += start;\n\n for (i = start; i < length; i += 1) {\n str += fromCharCode(dataView.getUint8(i));\n }\n\n return str;\n}\n\nvar REGEXP_DATA_URL_HEAD = /^data:.*,/;\n\n/**\n * Transform Data URL to array buffer.\n * @param {string} dataURL - The Data URL to transform.\n * @returns {ArrayBuffer} The result array buffer.\n */\nfunction dataURLToArrayBuffer(dataURL) {\n var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, '');\n var binary = atob(base64);\n var arrayBuffer = new ArrayBuffer(binary.length);\n var uint8 = new Uint8Array(arrayBuffer);\n\n each(uint8, function (value, i) {\n uint8[i] = binary.charCodeAt(i);\n });\n\n return arrayBuffer;\n}\n\n/**\n * Transform array buffer to Data URL.\n * @param {ArrayBuffer} arrayBuffer - The array buffer to transform.\n * @param {string} mimeType - The mime type of the Data URL.\n * @returns {string} The result Data URL.\n */\nfunction arrayBufferToDataURL(arrayBuffer, mimeType) {\n var uint8 = new Uint8Array(arrayBuffer);\n var data = '';\n\n // TypedArray.prototype.forEach is not supported in some browsers.\n each(uint8, function (value) {\n data += fromCharCode(value);\n });\n\n return 'data:' + mimeType + ';base64,' + btoa(data);\n}\n\n/**\n * Get orientation value from given array buffer.\n * @param {ArrayBuffer} arrayBuffer - The array buffer to read.\n * @returns {number} The read orientation value.\n */\nfunction getOrientation(arrayBuffer) {\n var dataView = new DataView(arrayBuffer);\n var orientation = void 0;\n var littleEndian = void 0;\n var app1Start = void 0;\n var ifdStart = void 0;\n\n // Only handle JPEG image (start by 0xFFD8)\n if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {\n var length = dataView.byteLength;\n var offset = 2;\n\n while (offset < length) {\n if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {\n app1Start = offset;\n break;\n }\n\n offset += 1;\n }\n }\n\n if (app1Start) {\n var exifIDCode = app1Start + 4;\n var tiffOffset = app1Start + 10;\n\n if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {\n var endianness = dataView.getUint16(tiffOffset);\n\n littleEndian = endianness === 0x4949;\n\n if (littleEndian || endianness === 0x4D4D /* bigEndian */) {\n if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {\n var firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);\n\n if (firstIFDOffset >= 0x00000008) {\n ifdStart = tiffOffset + firstIFDOffset;\n }\n }\n }\n }\n }\n\n if (ifdStart) {\n var _length = dataView.getUint16(ifdStart, littleEndian);\n var _offset = void 0;\n var i = void 0;\n\n for (i = 0; i < _length; i += 1) {\n _offset = ifdStart + i * 12 + 2;\n\n if (dataView.getUint16(_offset, littleEndian) === 0x0112 /* Orientation */) {\n // 8 is the offset of the current tag's value\n _offset += 8;\n\n // Get the original orientation value\n orientation = dataView.getUint16(_offset, littleEndian);\n\n // Override the orientation with its default value\n dataView.setUint16(_offset, 1, littleEndian);\n break;\n }\n }\n }\n\n return orientation;\n}\n\n/**\n * Parse Exif Orientation value.\n * @param {number} orientation - The orientation to parse.\n * @returns {Object} The parsed result.\n */\nfunction parseOrientation(orientation) {\n var rotate = 0;\n var scaleX = 1;\n var scaleY = 1;\n\n switch (orientation) {\n // Flip horizontal\n case 2:\n scaleX = -1;\n break;\n\n // Rotate left 180°\n case 3:\n rotate = -180;\n break;\n\n // Flip vertical\n case 4:\n scaleY = -1;\n break;\n\n // Flip vertical and rotate right 90°\n case 5:\n rotate = 90;\n scaleY = -1;\n break;\n\n // Rotate right 90°\n case 6:\n rotate = 90;\n break;\n\n // Flip horizontal and rotate right 90°\n case 7:\n rotate = 90;\n scaleX = -1;\n break;\n\n // Rotate left 90°\n case 8:\n rotate = -90;\n break;\n\n default:\n }\n\n return {\n rotate: rotate,\n scaleX: scaleX,\n scaleY: scaleY\n };\n}\n\nvar render = {\n render: function render() {\n this.initContainer();\n this.initCanvas();\n this.initCropBox();\n this.renderCanvas();\n\n if (this.cropped) {\n this.renderCropBox();\n }\n },\n initContainer: function initContainer() {\n var element = this.element,\n options = this.options,\n container = this.container,\n cropper = this.cropper;\n\n\n addClass(cropper, CLASS_HIDDEN);\n removeClass(element, CLASS_HIDDEN);\n\n var containerData = {\n width: Math.max(container.offsetWidth, Number(options.minContainerWidth) || 200),\n height: Math.max(container.offsetHeight, Number(options.minContainerHeight) || 100)\n };\n\n this.containerData = containerData;\n\n setStyle(cropper, {\n width: containerData.width,\n height: containerData.height\n });\n\n addClass(element, CLASS_HIDDEN);\n removeClass(cropper, CLASS_HIDDEN);\n },\n\n\n // Canvas (image wrapper)\n initCanvas: function initCanvas() {\n var containerData = this.containerData,\n imageData = this.imageData;\n var viewMode = this.options.viewMode;\n\n var rotated = Math.abs(imageData.rotate) % 180 === 90;\n var naturalWidth = rotated ? imageData.naturalHeight : imageData.naturalWidth;\n var naturalHeight = rotated ? imageData.naturalWidth : imageData.naturalHeight;\n var aspectRatio = naturalWidth / naturalHeight;\n var canvasWidth = containerData.width;\n var canvasHeight = containerData.height;\n\n if (containerData.height * aspectRatio > containerData.width) {\n if (viewMode === 3) {\n canvasWidth = containerData.height * aspectRatio;\n } else {\n canvasHeight = containerData.width / aspectRatio;\n }\n } else if (viewMode === 3) {\n canvasHeight = containerData.width / aspectRatio;\n } else {\n canvasWidth = containerData.height * aspectRatio;\n }\n\n var canvasData = {\n aspectRatio: aspectRatio,\n naturalWidth: naturalWidth,\n naturalHeight: naturalHeight,\n width: canvasWidth,\n height: canvasHeight\n };\n\n canvasData.left = (containerData.width - canvasWidth) / 2;\n canvasData.top = (containerData.height - canvasHeight) / 2;\n canvasData.oldLeft = canvasData.left;\n canvasData.oldTop = canvasData.top;\n\n this.canvasData = canvasData;\n this.limited = viewMode === 1 || viewMode === 2;\n this.limitCanvas(true, true);\n this.initialImageData = extend({}, imageData);\n this.initialCanvasData = extend({}, canvasData);\n },\n limitCanvas: function limitCanvas(sizeLimited, positionLimited) {\n var options = this.options,\n containerData = this.containerData,\n canvasData = this.canvasData,\n cropBoxData = this.cropBoxData;\n var viewMode = options.viewMode;\n var aspectRatio = canvasData.aspectRatio;\n\n var cropped = this.cropped && cropBoxData;\n\n if (sizeLimited) {\n var minCanvasWidth = Number(options.minCanvasWidth) || 0;\n var minCanvasHeight = Number(options.minCanvasHeight) || 0;\n\n if (viewMode > 1) {\n minCanvasWidth = Math.max(minCanvasWidth, containerData.width);\n minCanvasHeight = Math.max(minCanvasHeight, containerData.height);\n\n if (viewMode === 3) {\n if (minCanvasHeight * aspectRatio > minCanvasWidth) {\n minCanvasWidth = minCanvasHeight * aspectRatio;\n } else {\n minCanvasHeight = minCanvasWidth / aspectRatio;\n }\n }\n } else if (viewMode > 0) {\n if (minCanvasWidth) {\n minCanvasWidth = Math.max(minCanvasWidth, cropped ? cropBoxData.width : 0);\n } else if (minCanvasHeight) {\n minCanvasHeight = Math.max(minCanvasHeight, cropped ? cropBoxData.height : 0);\n } else if (cropped) {\n minCanvasWidth = cropBoxData.width;\n minCanvasHeight = cropBoxData.height;\n\n if (minCanvasHeight * aspectRatio > minCanvasWidth) {\n minCanvasWidth = minCanvasHeight * aspectRatio;\n } else {\n minCanvasHeight = minCanvasWidth / aspectRatio;\n }\n }\n }\n\n var _getContainSizes = getContainSizes({\n aspectRatio: aspectRatio,\n width: minCanvasWidth,\n height: minCanvasHeight\n });\n\n minCanvasWidth = _getContainSizes.width;\n minCanvasHeight = _getContainSizes.height;\n\n\n canvasData.minWidth = minCanvasWidth;\n canvasData.minHeight = minCanvasHeight;\n canvasData.maxWidth = Infinity;\n canvasData.maxHeight = Infinity;\n }\n\n if (positionLimited) {\n if (viewMode) {\n var newCanvasLeft = containerData.width - canvasData.width;\n var newCanvasTop = containerData.height - canvasData.height;\n\n canvasData.minLeft = Math.min(0, newCanvasLeft);\n canvasData.minTop = Math.min(0, newCanvasTop);\n canvasData.maxLeft = Math.max(0, newCanvasLeft);\n canvasData.maxTop = Math.max(0, newCanvasTop);\n\n if (cropped && this.limited) {\n canvasData.minLeft = Math.min(cropBoxData.left, cropBoxData.left + (cropBoxData.width - canvasData.width));\n canvasData.minTop = Math.min(cropBoxData.top, cropBoxData.top + (cropBoxData.height - canvasData.height));\n canvasData.maxLeft = cropBoxData.left;\n canvasData.maxTop = cropBoxData.top;\n\n if (viewMode === 2) {\n if (canvasData.width >= containerData.width) {\n canvasData.minLeft = Math.min(0, newCanvasLeft);\n canvasData.maxLeft = Math.max(0, newCanvasLeft);\n }\n\n if (canvasData.height >= containerData.height) {\n canvasData.minTop = Math.min(0, newCanvasTop);\n canvasData.maxTop = Math.max(0, newCanvasTop);\n }\n }\n }\n } else {\n canvasData.minLeft = -canvasData.width;\n canvasData.minTop = -canvasData.height;\n canvasData.maxLeft = containerData.width;\n canvasData.maxTop = containerData.height;\n }\n }\n },\n renderCanvas: function renderCanvas(changed, transformed) {\n var canvasData = this.canvasData,\n imageData = this.imageData;\n\n\n if (transformed) {\n var _getRotatedSizes = getRotatedSizes({\n width: imageData.naturalWidth * Math.abs(imageData.scaleX || 1),\n height: imageData.naturalHeight * Math.abs(imageData.scaleY || 1),\n degree: imageData.rotate || 0\n }),\n naturalWidth = _getRotatedSizes.width,\n naturalHeight = _getRotatedSizes.height;\n\n var width = canvasData.width * (naturalWidth / canvasData.naturalWidth);\n var height = canvasData.height * (naturalHeight / canvasData.naturalHeight);\n\n canvasData.left -= (width - canvasData.width) / 2;\n canvasData.top -= (height - canvasData.height) / 2;\n canvasData.width = width;\n canvasData.height = height;\n canvasData.aspectRatio = naturalWidth / naturalHeight;\n canvasData.naturalWidth = naturalWidth;\n canvasData.naturalHeight = naturalHeight;\n this.limitCanvas(true, false);\n }\n\n if (canvasData.width > canvasData.maxWidth || canvasData.width < canvasData.minWidth) {\n canvasData.left = canvasData.oldLeft;\n }\n\n if (canvasData.height > canvasData.maxHeight || canvasData.height < canvasData.minHeight) {\n canvasData.top = canvasData.oldTop;\n }\n\n canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth);\n canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight);\n\n this.limitCanvas(false, true);\n\n canvasData.left = Math.min(Math.max(canvasData.left, canvasData.minLeft), canvasData.maxLeft);\n canvasData.top = Math.min(Math.max(canvasData.top, canvasData.minTop), canvasData.maxTop);\n canvasData.oldLeft = canvasData.left;\n canvasData.oldTop = canvasData.top;\n\n setStyle(this.canvas, extend({\n width: canvasData.width,\n height: canvasData.height\n }, getTransforms({\n translateX: canvasData.left,\n translateY: canvasData.top\n })));\n\n this.renderImage(changed);\n\n if (this.cropped && this.limited) {\n this.limitCropBox(true, true);\n }\n },\n renderImage: function renderImage(changed) {\n var canvasData = this.canvasData,\n imageData = this.imageData;\n\n var width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth);\n var height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight);\n\n extend(imageData, {\n width: width,\n height: height,\n left: (canvasData.width - width) / 2,\n top: (canvasData.height - height) / 2\n });\n setStyle(this.image, extend({\n width: imageData.width,\n height: imageData.height\n }, getTransforms(extend({\n translateX: imageData.left,\n translateY: imageData.top\n }, imageData))));\n\n if (changed) {\n this.output();\n }\n },\n initCropBox: function initCropBox() {\n var options = this.options,\n canvasData = this.canvasData;\n var aspectRatio = options.aspectRatio;\n\n var autoCropArea = Number(options.autoCropArea) || 0.8;\n var cropBoxData = {\n width: canvasData.width,\n height: canvasData.height\n };\n\n if (aspectRatio) {\n if (canvasData.height * aspectRatio > canvasData.width) {\n cropBoxData.height = cropBoxData.width / aspectRatio;\n } else {\n cropBoxData.width = cropBoxData.height * aspectRatio;\n }\n }\n\n this.cropBoxData = cropBoxData;\n this.limitCropBox(true, true);\n\n // Initialize auto crop area\n cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);\n cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight);\n\n // The width/height of auto crop area must large than \"minWidth/Height\"\n cropBoxData.width = Math.max(cropBoxData.minWidth, cropBoxData.width * autoCropArea);\n cropBoxData.height = Math.max(cropBoxData.minHeight, cropBoxData.height * autoCropArea);\n cropBoxData.left = canvasData.left + (canvasData.width - cropBoxData.width) / 2;\n cropBoxData.top = canvasData.top + (canvasData.height - cropBoxData.height) / 2;\n cropBoxData.oldLeft = cropBoxData.left;\n cropBoxData.oldTop = cropBoxData.top;\n\n this.initialCropBoxData = extend({}, cropBoxData);\n },\n limitCropBox: function limitCropBox(sizeLimited, positionLimited) {\n var options = this.options,\n containerData = this.containerData,\n canvasData = this.canvasData,\n cropBoxData = this.cropBoxData,\n limited = this.limited;\n var aspectRatio = options.aspectRatio;\n\n\n if (sizeLimited) {\n var minCropBoxWidth = Number(options.minCropBoxWidth) || 0;\n var minCropBoxHeight = Number(options.minCropBoxHeight) || 0;\n var maxCropBoxWidth = Math.min(containerData.width, limited ? canvasData.width : containerData.width);\n var maxCropBoxHeight = Math.min(containerData.height, limited ? canvasData.height : containerData.height);\n\n // The min/maxCropBoxWidth/Height must be less than container's width/height\n minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width);\n minCropBoxHeight = Math.min(minCropBoxHeight, containerData.height);\n\n if (aspectRatio) {\n if (minCropBoxWidth && minCropBoxHeight) {\n if (minCropBoxHeight * aspectRatio > minCropBoxWidth) {\n minCropBoxHeight = minCropBoxWidth / aspectRatio;\n } else {\n minCropBoxWidth = minCropBoxHeight * aspectRatio;\n }\n } else if (minCropBoxWidth) {\n minCropBoxHeight = minCropBoxWidth / aspectRatio;\n } else if (minCropBoxHeight) {\n minCropBoxWidth = minCropBoxHeight * aspectRatio;\n }\n\n if (maxCropBoxHeight * aspectRatio > maxCropBoxWidth) {\n maxCropBoxHeight = maxCropBoxWidth / aspectRatio;\n } else {\n maxCropBoxWidth = maxCropBoxHeight * aspectRatio;\n }\n }\n\n // The minWidth/Height must be less than maxWidth/Height\n cropBoxData.minWidth = Math.min(minCropBoxWidth, maxCropBoxWidth);\n cropBoxData.minHeight = Math.min(minCropBoxHeight, maxCropBoxHeight);\n cropBoxData.maxWidth = maxCropBoxWidth;\n cropBoxData.maxHeight = maxCropBoxHeight;\n }\n\n if (positionLimited) {\n if (limited) {\n cropBoxData.minLeft = Math.max(0, canvasData.left);\n cropBoxData.minTop = Math.max(0, canvasData.top);\n cropBoxData.maxLeft = Math.min(containerData.width, canvasData.left + canvasData.width) - cropBoxData.width;\n cropBoxData.maxTop = Math.min(containerData.height, canvasData.top + canvasData.height) - cropBoxData.height;\n } else {\n cropBoxData.minLeft = 0;\n cropBoxData.minTop = 0;\n cropBoxData.maxLeft = containerData.width - cropBoxData.width;\n cropBoxData.maxTop = containerData.height - cropBoxData.height;\n }\n }\n },\n renderCropBox: function renderCropBox() {\n var options = this.options,\n containerData = this.containerData,\n cropBoxData = this.cropBoxData;\n\n\n if (cropBoxData.width > cropBoxData.maxWidth || cropBoxData.width < cropBoxData.minWidth) {\n cropBoxData.left = cropBoxData.oldLeft;\n }\n\n if (cropBoxData.height > cropBoxData.maxHeight || cropBoxData.height < cropBoxData.minHeight) {\n cropBoxData.top = cropBoxData.oldTop;\n }\n\n cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);\n cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight);\n\n this.limitCropBox(false, true);\n\n cropBoxData.left = Math.min(Math.max(cropBoxData.left, cropBoxData.minLeft), cropBoxData.maxLeft);\n cropBoxData.top = Math.min(Math.max(cropBoxData.top, cropBoxData.minTop), cropBoxData.maxTop);\n cropBoxData.oldLeft = cropBoxData.left;\n cropBoxData.oldTop = cropBoxData.top;\n\n if (options.movable && options.cropBoxMovable) {\n // Turn to move the canvas when the crop box is equal to the container\n setData(this.face, DATA_ACTION, cropBoxData.width >= containerData.width && cropBoxData.height >= containerData.height ? ACTION_MOVE : ACTION_ALL);\n }\n\n setStyle(this.cropBox, extend({\n width: cropBoxData.width,\n height: cropBoxData.height\n }, getTransforms({\n translateX: cropBoxData.left,\n translateY: cropBoxData.top\n })));\n\n if (this.cropped && this.limited) {\n this.limitCanvas(true, true);\n }\n\n if (!this.disabled) {\n this.output();\n }\n },\n output: function output() {\n this.preview();\n\n if (this.complete) {\n dispatchEvent(this.element, EVENT_CROP, this.getData());\n }\n }\n};\n\nvar preview = {\n initPreview: function initPreview() {\n var crossOrigin = this.crossOrigin;\n var preview = this.options.preview;\n\n var url = crossOrigin ? this.crossOriginUrl : this.url;\n var image = document.createElement('img');\n\n if (crossOrigin) {\n image.crossOrigin = crossOrigin;\n }\n\n image.src = url;\n this.viewBox.appendChild(image);\n this.image2 = image;\n\n if (!preview) {\n return;\n }\n\n var previews = preview.querySelector ? [preview] : document.querySelectorAll(preview);\n\n this.previews = previews;\n\n each(previews, function (element) {\n var img = document.createElement('img');\n\n // Save the original size for recover\n setData(element, DATA_PREVIEW, {\n width: element.offsetWidth,\n height: element.offsetHeight,\n html: element.innerHTML\n });\n\n if (crossOrigin) {\n img.crossOrigin = crossOrigin;\n }\n\n img.src = url;\n\n /**\n * Override img element styles\n * Add `display:block` to avoid margin top issue\n * Add `height:auto` to override `height` attribute on IE8\n * (Occur only when margin-top <= -height)\n */\n 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;\"';\n\n empty(element);\n element.appendChild(img);\n });\n },\n resetPreview: function resetPreview() {\n each(this.previews, function (element) {\n var data = getData(element, DATA_PREVIEW);\n\n setStyle(element, {\n width: data.width,\n height: data.height\n });\n\n element.innerHTML = data.html;\n removeData(element, DATA_PREVIEW);\n });\n },\n preview: function preview() {\n var imageData = this.imageData,\n canvasData = this.canvasData,\n cropBoxData = this.cropBoxData;\n var cropBoxWidth = cropBoxData.width,\n cropBoxHeight = cropBoxData.height;\n var width = imageData.width,\n height = imageData.height;\n\n var left = cropBoxData.left - canvasData.left - imageData.left;\n var top = cropBoxData.top - canvasData.top - imageData.top;\n\n if (!this.cropped || this.disabled) {\n return;\n }\n\n setStyle(this.image2, extend({\n width: width,\n height: height\n }, getTransforms(extend({\n translateX: -left,\n translateY: -top\n }, imageData))));\n\n each(this.previews, function (element) {\n var data = getData(element, DATA_PREVIEW);\n var originalWidth = data.width;\n var originalHeight = data.height;\n var newWidth = originalWidth;\n var newHeight = originalHeight;\n var ratio = 1;\n\n if (cropBoxWidth) {\n ratio = originalWidth / cropBoxWidth;\n newHeight = cropBoxHeight * ratio;\n }\n\n if (cropBoxHeight && newHeight > originalHeight) {\n ratio = originalHeight / cropBoxHeight;\n newWidth = cropBoxWidth * ratio;\n newHeight = originalHeight;\n }\n\n setStyle(element, {\n width: newWidth,\n height: newHeight\n });\n\n setStyle(element.getElementsByTagName('img')[0], extend({\n width: width * ratio,\n height: height * ratio\n }, getTransforms(extend({\n translateX: -left * ratio,\n translateY: -top * ratio\n }, imageData))));\n });\n }\n};\n\nvar events = {\n bind: function bind() {\n var element = this.element,\n options = this.options,\n cropper = this.cropper;\n\n\n if (isFunction(options.cropstart)) {\n addListener(element, EVENT_CROP_START, options.cropstart);\n }\n\n if (isFunction(options.cropmove)) {\n addListener(element, EVENT_CROP_MOVE, options.cropmove);\n }\n\n if (isFunction(options.cropend)) {\n addListener(element, EVENT_CROP_END, options.cropend);\n }\n\n if (isFunction(options.crop)) {\n addListener(element, EVENT_CROP, options.crop);\n }\n\n if (isFunction(options.zoom)) {\n addListener(element, EVENT_ZOOM, options.zoom);\n }\n\n addListener(cropper, EVENT_POINTER_DOWN, this.onCropStart = proxy(this.cropStart, this));\n\n if (options.zoomable && options.zoomOnWheel) {\n addListener(cropper, EVENT_WHEEL, this.onWheel = proxy(this.wheel, this));\n }\n\n if (options.toggleDragModeOnDblclick) {\n addListener(cropper, EVENT_DBLCLICK, this.onDblclick = proxy(this.dblclick, this));\n }\n\n addListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove = proxy(this.cropMove, this));\n addListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd = proxy(this.cropEnd, this));\n\n if (options.responsive) {\n addListener(window, EVENT_RESIZE, this.onResize = proxy(this.resize, this));\n }\n },\n unbind: function unbind() {\n var element = this.element,\n options = this.options,\n cropper = this.cropper;\n\n\n if (isFunction(options.cropstart)) {\n removeListener(element, EVENT_CROP_START, options.cropstart);\n }\n\n if (isFunction(options.cropmove)) {\n removeListener(element, EVENT_CROP_MOVE, options.cropmove);\n }\n\n if (isFunction(options.cropend)) {\n removeListener(element, EVENT_CROP_END, options.cropend);\n }\n\n if (isFunction(options.crop)) {\n removeListener(element, EVENT_CROP, options.crop);\n }\n\n if (isFunction(options.zoom)) {\n removeListener(element, EVENT_ZOOM, options.zoom);\n }\n\n removeListener(cropper, EVENT_POINTER_DOWN, this.onCropStart);\n\n if (options.zoomable && options.zoomOnWheel) {\n removeListener(cropper, EVENT_WHEEL, this.onWheel);\n }\n\n if (options.toggleDragModeOnDblclick) {\n removeListener(cropper, EVENT_DBLCLICK, this.onDblclick);\n }\n\n removeListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove);\n removeListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd);\n\n if (options.responsive) {\n removeListener(window, EVENT_RESIZE, this.onResize);\n }\n }\n};\n\nvar handlers = {\n resize: function resize() {\n var options = this.options,\n container = this.container,\n containerData = this.containerData;\n\n var minContainerWidth = Number(options.minContainerWidth) || 200;\n var minContainerHeight = Number(options.minContainerHeight) || 100;\n\n if (this.disabled || containerData.width <= minContainerWidth || containerData.height <= minContainerHeight) {\n return;\n }\n\n var ratio = container.offsetWidth / containerData.width;\n\n // Resize when width changed or height changed\n if (ratio !== 1 || container.offsetHeight !== containerData.height) {\n var canvasData = void 0;\n var cropBoxData = void 0;\n\n if (options.restore) {\n canvasData = this.getCanvasData();\n cropBoxData = this.getCropBoxData();\n }\n\n this.render();\n\n if (options.restore) {\n this.setCanvasData(each(canvasData, function (n, i) {\n canvasData[i] = n * ratio;\n }));\n this.setCropBoxData(each(cropBoxData, function (n, i) {\n cropBoxData[i] = n * ratio;\n }));\n }\n }\n },\n dblclick: function dblclick() {\n if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) {\n return;\n }\n\n this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP);\n },\n wheel: function wheel(e) {\n var _this = this;\n\n var ratio = Number(this.options.wheelZoomRatio) || 0.1;\n var delta = 1;\n\n if (this.disabled) {\n return;\n }\n\n e.preventDefault();\n\n // Limit wheel speed to prevent zoom too fast (#21)\n if (this.wheeling) {\n return;\n }\n\n this.wheeling = true;\n\n setTimeout(function () {\n _this.wheeling = false;\n }, 50);\n\n if (e.deltaY) {\n delta = e.deltaY > 0 ? 1 : -1;\n } else if (e.wheelDelta) {\n delta = -e.wheelDelta / 120;\n } else if (e.detail) {\n delta = e.detail > 0 ? 1 : -1;\n }\n\n this.zoom(-delta * ratio, e);\n },\n cropStart: function cropStart(e) {\n if (this.disabled) {\n return;\n }\n\n var options = this.options,\n pointers = this.pointers;\n\n var action = void 0;\n\n if (e.changedTouches) {\n // Handle touch event\n each(e.changedTouches, function (touch) {\n pointers[touch.identifier] = getPointer(touch);\n });\n } else {\n // Handle mouse event and pointer event\n pointers[e.pointerId || 0] = getPointer(e);\n }\n\n if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) {\n action = ACTION_ZOOM;\n } else {\n action = getData(e.target, DATA_ACTION);\n }\n\n if (!REGEXP_ACTIONS.test(action)) {\n return;\n }\n\n if (dispatchEvent(this.element, EVENT_CROP_START, {\n originalEvent: e,\n action: action\n }) === false) {\n return;\n }\n\n e.preventDefault();\n\n this.action = action;\n this.cropping = false;\n\n if (action === ACTION_CROP) {\n this.cropping = true;\n addClass(this.dragBox, CLASS_MODAL);\n }\n },\n cropMove: function cropMove(e) {\n var action = this.action;\n\n\n if (this.disabled || !action) {\n return;\n }\n\n var pointers = this.pointers;\n\n\n e.preventDefault();\n\n if (dispatchEvent(this.element, EVENT_CROP_MOVE, {\n originalEvent: e,\n action: action\n }) === false) {\n return;\n }\n\n if (e.changedTouches) {\n each(e.changedTouches, function (touch) {\n extend(pointers[touch.identifier], getPointer(touch, true));\n });\n } else {\n extend(pointers[e.pointerId || 0], getPointer(e, true));\n }\n\n this.change(e);\n },\n cropEnd: function cropEnd(e) {\n if (this.disabled) {\n return;\n }\n\n var action = this.action,\n pointers = this.pointers;\n\n\n if (e.changedTouches) {\n each(e.changedTouches, function (touch) {\n delete pointers[touch.identifier];\n });\n } else {\n delete pointers[e.pointerId || 0];\n }\n\n if (!action) {\n return;\n }\n\n e.preventDefault();\n\n if (!Object.keys(pointers).length) {\n this.action = '';\n }\n\n if (this.cropping) {\n this.cropping = false;\n toggleClass(this.dragBox, CLASS_MODAL, this.cropped && this.options.modal);\n }\n\n dispatchEvent(this.element, EVENT_CROP_END, {\n originalEvent: e,\n action: action\n });\n }\n};\n\nvar change = {\n change: function change(e) {\n var options = this.options,\n canvasData = this.canvasData,\n containerData = this.containerData,\n cropBoxData = this.cropBoxData,\n pointers = this.pointers;\n var action = this.action;\n var aspectRatio = options.aspectRatio;\n var left = cropBoxData.left,\n top = cropBoxData.top,\n width = cropBoxData.width,\n height = cropBoxData.height;\n\n var right = left + width;\n var bottom = top + height;\n var minLeft = 0;\n var minTop = 0;\n var maxWidth = containerData.width;\n var maxHeight = containerData.height;\n var renderable = true;\n var offset = void 0;\n\n // Locking aspect ratio in \"free mode\" by holding shift key\n if (!aspectRatio && e.shiftKey) {\n aspectRatio = width && height ? width / height : 1;\n }\n\n if (this.limited) {\n minLeft = cropBoxData.minLeft;\n minTop = cropBoxData.minTop;\n\n maxWidth = minLeft + Math.min(containerData.width, canvasData.width, canvasData.left + canvasData.width);\n maxHeight = minTop + Math.min(containerData.height, canvasData.height, canvasData.top + canvasData.height);\n }\n\n var pointer = pointers[Object.keys(pointers)[0]];\n var range = {\n x: pointer.endX - pointer.startX,\n y: pointer.endY - pointer.startY\n };\n var check = function check(side) {\n switch (side) {\n case ACTION_EAST:\n if (right + range.x > maxWidth) {\n range.x = maxWidth - right;\n }\n\n break;\n\n case ACTION_WEST:\n if (left + range.x < minLeft) {\n range.x = minLeft - left;\n }\n\n break;\n\n case ACTION_NORTH:\n if (top + range.y < minTop) {\n range.y = minTop - top;\n }\n\n break;\n\n case ACTION_SOUTH:\n if (bottom + range.y > maxHeight) {\n range.y = maxHeight - bottom;\n }\n\n break;\n\n default:\n }\n };\n\n switch (action) {\n // Move crop box\n case ACTION_ALL:\n left += range.x;\n top += range.y;\n break;\n\n // Resize crop box\n case ACTION_EAST:\n if (range.x >= 0 && (right >= maxWidth || aspectRatio && (top <= minTop || bottom >= maxHeight))) {\n renderable = false;\n break;\n }\n\n check(ACTION_EAST);\n width += range.x;\n\n if (aspectRatio) {\n height = width / aspectRatio;\n top -= range.x / aspectRatio / 2;\n }\n\n if (width < 0) {\n action = ACTION_WEST;\n width = 0;\n }\n\n break;\n\n case ACTION_NORTH:\n if (range.y <= 0 && (top <= minTop || aspectRatio && (left <= minLeft || right >= maxWidth))) {\n renderable = false;\n break;\n }\n\n check(ACTION_NORTH);\n height -= range.y;\n top += range.y;\n\n if (aspectRatio) {\n width = height * aspectRatio;\n left += range.y * aspectRatio / 2;\n }\n\n if (height < 0) {\n action = ACTION_SOUTH;\n height = 0;\n }\n\n break;\n\n case ACTION_WEST:\n if (range.x <= 0 && (left <= minLeft || aspectRatio && (top <= minTop || bottom >= maxHeight))) {\n renderable = false;\n break;\n }\n\n check(ACTION_WEST);\n width -= range.x;\n left += range.x;\n\n if (aspectRatio) {\n height = width / aspectRatio;\n top += range.x / aspectRatio / 2;\n }\n\n if (width < 0) {\n action = ACTION_EAST;\n width = 0;\n }\n\n break;\n\n case ACTION_SOUTH:\n if (range.y >= 0 && (bottom >= maxHeight || aspectRatio && (left <= minLeft || right >= maxWidth))) {\n renderable = false;\n break;\n }\n\n check(ACTION_SOUTH);\n height += range.y;\n\n if (aspectRatio) {\n width = height * aspectRatio;\n left -= range.y * aspectRatio / 2;\n }\n\n if (height < 0) {\n action = ACTION_NORTH;\n height = 0;\n }\n\n break;\n\n case ACTION_NORTH_EAST:\n if (aspectRatio) {\n if (range.y <= 0 && (top <= minTop || right >= maxWidth)) {\n renderable = false;\n break;\n }\n\n check(ACTION_NORTH);\n height -= range.y;\n top += range.y;\n width = height * aspectRatio;\n } else {\n check(ACTION_NORTH);\n check(ACTION_EAST);\n\n if (range.x >= 0) {\n if (right < maxWidth) {\n width += range.x;\n } else if (range.y <= 0 && top <= minTop) {\n renderable = false;\n }\n } else {\n width += range.x;\n }\n\n if (range.y <= 0) {\n if (top > minTop) {\n height -= range.y;\n top += range.y;\n }\n } else {\n height -= range.y;\n top += range.y;\n }\n }\n\n if (width < 0 && height < 0) {\n action = ACTION_SOUTH_WEST;\n height = 0;\n width = 0;\n } else if (width < 0) {\n action = ACTION_NORTH_WEST;\n width = 0;\n } else if (height < 0) {\n action = ACTION_SOUTH_EAST;\n height = 0;\n }\n\n break;\n\n case ACTION_NORTH_WEST:\n if (aspectRatio) {\n if (range.y <= 0 && (top <= minTop || left <= minLeft)) {\n renderable = false;\n break;\n }\n\n check(ACTION_NORTH);\n height -= range.y;\n top += range.y;\n width = height * aspectRatio;\n left += range.y * aspectRatio;\n } else {\n check(ACTION_NORTH);\n check(ACTION_WEST);\n\n if (range.x <= 0) {\n if (left > minLeft) {\n width -= range.x;\n left += range.x;\n } else if (range.y <= 0 && top <= minTop) {\n renderable = false;\n }\n } else {\n width -= range.x;\n left += range.x;\n }\n\n if (range.y <= 0) {\n if (top > minTop) {\n height -= range.y;\n top += range.y;\n }\n } else {\n height -= range.y;\n top += range.y;\n }\n }\n\n if (width < 0 && height < 0) {\n action = ACTION_SOUTH_EAST;\n height = 0;\n width = 0;\n } else if (width < 0) {\n action = ACTION_NORTH_EAST;\n width = 0;\n } else if (height < 0) {\n action = ACTION_SOUTH_WEST;\n height = 0;\n }\n\n break;\n\n case ACTION_SOUTH_WEST:\n if (aspectRatio) {\n if (range.x <= 0 && (left <= minLeft || bottom >= maxHeight)) {\n renderable = false;\n break;\n }\n\n check(ACTION_WEST);\n width -= range.x;\n left += range.x;\n height = width / aspectRatio;\n } else {\n check(ACTION_SOUTH);\n check(ACTION_WEST);\n\n if (range.x <= 0) {\n if (left > minLeft) {\n width -= range.x;\n left += range.x;\n } else if (range.y >= 0 && bottom >= maxHeight) {\n renderable = false;\n }\n } else {\n width -= range.x;\n left += range.x;\n }\n\n if (range.y >= 0) {\n if (bottom < maxHeight) {\n height += range.y;\n }\n } else {\n height += range.y;\n }\n }\n\n if (width < 0 && height < 0) {\n action = ACTION_NORTH_EAST;\n height = 0;\n width = 0;\n } else if (width < 0) {\n action = ACTION_SOUTH_EAST;\n width = 0;\n } else if (height < 0) {\n action = ACTION_NORTH_WEST;\n height = 0;\n }\n\n break;\n\n case ACTION_SOUTH_EAST:\n if (aspectRatio) {\n if (range.x >= 0 && (right >= maxWidth || bottom >= maxHeight)) {\n renderable = false;\n break;\n }\n\n check(ACTION_EAST);\n width += range.x;\n height = width / aspectRatio;\n } else {\n check(ACTION_SOUTH);\n check(ACTION_EAST);\n\n if (range.x >= 0) {\n if (right < maxWidth) {\n width += range.x;\n } else if (range.y >= 0 && bottom >= maxHeight) {\n renderable = false;\n }\n } else {\n width += range.x;\n }\n\n if (range.y >= 0) {\n if (bottom < maxHeight) {\n height += range.y;\n }\n } else {\n height += range.y;\n }\n }\n\n if (width < 0 && height < 0) {\n action = ACTION_NORTH_WEST;\n height = 0;\n width = 0;\n } else if (width < 0) {\n action = ACTION_SOUTH_WEST;\n width = 0;\n } else if (height < 0) {\n action = ACTION_NORTH_EAST;\n height = 0;\n }\n\n break;\n\n // Move canvas\n case ACTION_MOVE:\n this.move(range.x, range.y);\n renderable = false;\n break;\n\n // Zoom canvas\n case ACTION_ZOOM:\n this.zoom(getMaxZoomRatio(pointers), e);\n renderable = false;\n break;\n\n // Create crop box\n case ACTION_CROP:\n if (!range.x || !range.y) {\n renderable = false;\n break;\n }\n\n offset = getOffset(this.cropper);\n left = pointer.startX - offset.left;\n top = pointer.startY - offset.top;\n width = cropBoxData.minWidth;\n height = cropBoxData.minHeight;\n\n if (range.x > 0) {\n action = range.y > 0 ? ACTION_SOUTH_EAST : ACTION_NORTH_EAST;\n } else if (range.x < 0) {\n left -= width;\n action = range.y > 0 ? ACTION_SOUTH_WEST : ACTION_NORTH_WEST;\n }\n\n if (range.y < 0) {\n top -= height;\n }\n\n // Show the crop box if is hidden\n if (!this.cropped) {\n removeClass(this.cropBox, CLASS_HIDDEN);\n this.cropped = true;\n\n if (this.limited) {\n this.limitCropBox(true, true);\n }\n }\n\n break;\n\n default:\n }\n\n if (renderable) {\n cropBoxData.width = width;\n cropBoxData.height = height;\n cropBoxData.left = left;\n cropBoxData.top = top;\n this.action = action;\n this.renderCropBox();\n }\n\n // Override\n each(pointers, function (p) {\n p.startX = p.endX;\n p.startY = p.endY;\n });\n }\n};\n\nvar methods = {\n // Show the crop box manually\n crop: function crop() {\n if (this.ready && !this.disabled) {\n if (!this.cropped) {\n this.cropped = true;\n this.limitCropBox(true, true);\n\n if (this.options.modal) {\n addClass(this.dragBox, CLASS_MODAL);\n }\n\n removeClass(this.cropBox, CLASS_HIDDEN);\n }\n\n this.setCropBoxData(this.initialCropBoxData);\n }\n\n return this;\n },\n\n\n // Reset the image and crop box to their initial states\n reset: function reset() {\n if (this.ready && !this.disabled) {\n this.imageData = extend({}, this.initialImageData);\n this.canvasData = extend({}, this.initialCanvasData);\n this.cropBoxData = extend({}, this.initialCropBoxData);\n this.renderCanvas();\n\n if (this.cropped) {\n this.renderCropBox();\n }\n }\n\n return this;\n },\n\n\n // Clear the crop box\n clear: function clear() {\n if (this.cropped && !this.disabled) {\n extend(this.cropBoxData, {\n left: 0,\n top: 0,\n width: 0,\n height: 0\n });\n\n this.cropped = false;\n this.renderCropBox();\n this.limitCanvas(true, true);\n\n // Render canvas after crop box rendered\n this.renderCanvas();\n removeClass(this.dragBox, CLASS_MODAL);\n addClass(this.cropBox, CLASS_HIDDEN);\n }\n\n return this;\n },\n\n\n /**\n * Replace the image's src and rebuild the cropper\n * @param {string} url - The new URL.\n * @param {boolean} [onlyColorChanged] - Indicate if the new image only changed color.\n * @returns {Object} this\n */\n replace: function replace(url) {\n var onlyColorChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n\n if (!this.disabled && url) {\n if (this.isImg) {\n this.element.src = url;\n }\n\n if (onlyColorChanged) {\n this.url = url;\n this.image.src = url;\n\n if (this.ready) {\n this.image2.src = url;\n\n each(this.previews, function (element) {\n element.getElementsByTagName('img')[0].src = url;\n });\n }\n } else {\n if (this.isImg) {\n this.replaced = true;\n }\n\n // Clear previous data\n this.options.data = null;\n this.load(url);\n }\n }\n\n return this;\n },\n\n\n // Enable (unfreeze) the cropper\n enable: function enable() {\n if (this.ready) {\n this.disabled = false;\n removeClass(this.cropper, CLASS_DISABLED);\n }\n\n return this;\n },\n\n\n // Disable (freeze) the cropper\n disable: function disable() {\n if (this.ready) {\n this.disabled = true;\n addClass(this.cropper, CLASS_DISABLED);\n }\n\n return this;\n },\n\n\n // Destroy the cropper and remove the instance from the image\n destroy: function destroy() {\n var element = this.element,\n image = this.image;\n\n\n if (this.loaded) {\n if (this.isImg && this.replaced) {\n element.src = this.originalUrl;\n }\n\n this.unbuild();\n removeClass(element, CLASS_HIDDEN);\n } else if (this.isImg) {\n removeListener(element, EVENT_LOAD, this.onStart);\n } else if (image) {\n image.parentNode.removeChild(image);\n }\n\n removeData(element, NAMESPACE);\n\n return this;\n },\n\n\n /**\n * Move the canvas with relative offsets\n * @param {number} offsetX - The relative offset distance on the x-axis.\n * @param {number} offsetY - The relative offset distance on the y-axis.\n * @returns {Object} this\n */\n move: function move(offsetX, offsetY) {\n var _canvasData = this.canvasData,\n left = _canvasData.left,\n top = _canvasData.top;\n\n\n return this.moveTo(isUndefined(offsetX) ? offsetX : left + Number(offsetX), isUndefined(offsetY) ? offsetY : top + Number(offsetY));\n },\n\n\n /**\n * Move the canvas to an absolute point\n * @param {number} x - The x-axis coordinate.\n * @param {number} [y=x] - The y-axis coordinate.\n * @returns {Object} this\n */\n moveTo: function moveTo(x) {\n var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;\n var canvasData = this.canvasData;\n\n var changed = false;\n\n x = Number(x);\n y = Number(y);\n\n if (this.ready && !this.disabled && this.options.movable) {\n if (isNumber(x)) {\n canvasData.left = x;\n changed = true;\n }\n\n if (isNumber(y)) {\n canvasData.top = y;\n changed = true;\n }\n\n if (changed) {\n this.renderCanvas(true);\n }\n }\n\n return this;\n },\n\n\n /**\n * Zoom the canvas with a relative ratio\n * @param {number} ratio - The target ratio.\n * @param {Event} _originalEvent - The original event if any.\n * @returns {Object} this\n */\n zoom: function zoom(ratio, _originalEvent) {\n var canvasData = this.canvasData;\n\n\n ratio = Number(ratio);\n\n if (ratio < 0) {\n ratio = 1 / (1 - ratio);\n } else {\n ratio = 1 + ratio;\n }\n\n return this.zoomTo(canvasData.width * ratio / canvasData.naturalWidth, null, _originalEvent);\n },\n\n\n /**\n * Zoom the canvas to an absolute ratio\n * @param {number} ratio - The target ratio.\n * @param {Object} pivot - The zoom pivot point coordinate.\n * @param {Event} _originalEvent - The original event if any.\n * @returns {Object} this\n */\n zoomTo: function zoomTo(ratio, pivot, _originalEvent) {\n var options = this.options,\n canvasData = this.canvasData;\n var width = canvasData.width,\n height = canvasData.height,\n naturalWidth = canvasData.naturalWidth,\n naturalHeight = canvasData.naturalHeight;\n\n\n ratio = Number(ratio);\n\n if (ratio >= 0 && this.ready && !this.disabled && options.zoomable) {\n var newWidth = naturalWidth * ratio;\n var newHeight = naturalHeight * ratio;\n\n if (dispatchEvent(this.element, EVENT_ZOOM, {\n originalEvent: _originalEvent,\n oldRatio: width / naturalWidth,\n ratio: newWidth / naturalWidth\n }) === false) {\n return this;\n }\n\n if (_originalEvent) {\n var pointers = this.pointers;\n\n var offset = getOffset(this.cropper);\n var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : {\n pageX: _originalEvent.pageX,\n pageY: _originalEvent.pageY\n };\n\n // Zoom from the triggering point of the event\n canvasData.left -= (newWidth - width) * ((center.pageX - offset.left - canvasData.left) / width);\n canvasData.top -= (newHeight - height) * ((center.pageY - offset.top - canvasData.top) / height);\n } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {\n canvasData.left -= (newWidth - width) * ((pivot.x - canvasData.left) / width);\n canvasData.top -= (newHeight - height) * ((pivot.y - canvasData.top) / height);\n } else {\n // Zoom from the center of the canvas\n canvasData.left -= (newWidth - width) / 2;\n canvasData.top -= (newHeight - height) / 2;\n }\n\n canvasData.width = newWidth;\n canvasData.height = newHeight;\n this.renderCanvas(true);\n }\n\n return this;\n },\n\n\n /**\n * Rotate the canvas with a relative degree\n * @param {number} degree - The rotate degree.\n * @returns {Object} this\n */\n rotate: function rotate(degree) {\n return this.rotateTo((this.imageData.rotate || 0) + Number(degree));\n },\n\n\n /**\n * Rotate the canvas to an absolute degree\n * @param {number} degree - The rotate degree.\n * @returns {Object} this\n */\n rotateTo: function rotateTo(degree) {\n degree = Number(degree);\n\n if (isNumber(degree) && this.ready && !this.disabled && this.options.rotatable) {\n this.imageData.rotate = degree % 360;\n this.renderCanvas(true, true);\n }\n\n return this;\n },\n\n\n /**\n * Scale the image on the x-axis.\n * @param {number} scaleX - The scale ratio on the x-axis.\n * @returns {Object} this\n */\n scaleX: function scaleX(_scaleX) {\n var scaleY = this.imageData.scaleY;\n\n\n return this.scale(_scaleX, isNumber(scaleY) ? scaleY : 1);\n },\n\n\n /**\n * Scale the image on the y-axis.\n * @param {number} scaleY - The scale ratio on the y-axis.\n * @returns {Object} this\n */\n scaleY: function scaleY(_scaleY) {\n var scaleX = this.imageData.scaleX;\n\n\n return this.scale(isNumber(scaleX) ? scaleX : 1, _scaleY);\n },\n\n\n /**\n * Scale the image\n * @param {number} scaleX - The scale ratio on the x-axis.\n * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.\n * @returns {Object} this\n */\n scale: function scale(scaleX) {\n var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX;\n var imageData = this.imageData;\n\n var transformed = false;\n\n scaleX = Number(scaleX);\n scaleY = Number(scaleY);\n\n if (this.ready && !this.disabled && this.options.scalable) {\n if (isNumber(scaleX)) {\n imageData.scaleX = scaleX;\n transformed = true;\n }\n\n if (isNumber(scaleY)) {\n imageData.scaleY = scaleY;\n transformed = true;\n }\n\n if (transformed) {\n this.renderCanvas(true, true);\n }\n }\n\n return this;\n },\n\n\n /**\n * Get the cropped area position and size data (base on the original image)\n * @param {boolean} [rounded=false] - Indicate if round the data values or not.\n * @returns {Object} The result cropped data.\n */\n getData: function getData$$1() {\n var rounded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var options = this.options,\n imageData = this.imageData,\n canvasData = this.canvasData,\n cropBoxData = this.cropBoxData;\n\n var data = void 0;\n\n if (this.ready && this.cropped) {\n data = {\n x: cropBoxData.left - canvasData.left,\n y: cropBoxData.top - canvasData.top,\n width: cropBoxData.width,\n height: cropBoxData.height\n };\n\n var ratio = imageData.width / imageData.naturalWidth;\n\n each(data, function (n, i) {\n n /= ratio;\n data[i] = rounded ? Math.round(n) : n;\n });\n } else {\n data = {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n };\n }\n\n if (options.rotatable) {\n data.rotate = imageData.rotate || 0;\n }\n\n if (options.scalable) {\n data.scaleX = imageData.scaleX || 1;\n data.scaleY = imageData.scaleY || 1;\n }\n\n return data;\n },\n\n\n /**\n * Set the cropped area position and size with new data\n * @param {Object} data - The new data.\n * @returns {Object} this\n */\n setData: function setData$$1(data) {\n var options = this.options,\n imageData = this.imageData,\n canvasData = this.canvasData;\n\n var cropBoxData = {};\n\n if (isFunction(data)) {\n data = data.call(this.element);\n }\n\n if (this.ready && !this.disabled && isPlainObject(data)) {\n var transformed = false;\n\n if (options.rotatable) {\n if (isNumber(data.rotate) && data.rotate !== imageData.rotate) {\n imageData.rotate = data.rotate;\n transformed = true;\n }\n }\n\n if (options.scalable) {\n if (isNumber(data.scaleX) && data.scaleX !== imageData.scaleX) {\n imageData.scaleX = data.scaleX;\n transformed = true;\n }\n\n if (isNumber(data.scaleY) && data.scaleY !== imageData.scaleY) {\n imageData.scaleY = data.scaleY;\n transformed = true;\n }\n }\n\n if (transformed) {\n this.renderCanvas(true, true);\n }\n\n var ratio = imageData.width / imageData.naturalWidth;\n\n if (isNumber(data.x)) {\n cropBoxData.left = data.x * ratio + canvasData.left;\n }\n\n if (isNumber(data.y)) {\n cropBoxData.top = data.y * ratio + canvasData.top;\n }\n\n if (isNumber(data.width)) {\n cropBoxData.width = data.width * ratio;\n }\n\n if (isNumber(data.height)) {\n cropBoxData.height = data.height * ratio;\n }\n\n this.setCropBoxData(cropBoxData);\n }\n\n return this;\n },\n\n\n /**\n * Get the container size data.\n * @returns {Object} The result container data.\n */\n getContainerData: function getContainerData() {\n return this.ready ? extend({}, this.containerData) : {};\n },\n\n\n /**\n * Get the image position and size data.\n * @returns {Object} The result image data.\n */\n getImageData: function getImageData() {\n return this.loaded ? extend({}, this.imageData) : {};\n },\n\n\n /**\n * Get the canvas position and size data.\n * @returns {Object} The result canvas data.\n */\n getCanvasData: function getCanvasData() {\n var canvasData = this.canvasData;\n\n var data = {};\n\n if (this.ready) {\n each(['left', 'top', 'width', 'height', 'naturalWidth', 'naturalHeight'], function (n) {\n data[n] = canvasData[n];\n });\n }\n\n return data;\n },\n\n\n /**\n * Set the canvas position and size with new data.\n * @param {Object} data - The new canvas data.\n * @returns {Object} this\n */\n setCanvasData: function setCanvasData(data) {\n var canvasData = this.canvasData;\n var aspectRatio = canvasData.aspectRatio;\n\n\n if (isFunction(data)) {\n data = data.call(this.element);\n }\n\n if (this.ready && !this.disabled && isPlainObject(data)) {\n if (isNumber(data.left)) {\n canvasData.left = data.left;\n }\n\n if (isNumber(data.top)) {\n canvasData.top = data.top;\n }\n\n if (isNumber(data.width)) {\n canvasData.width = data.width;\n canvasData.height = data.width / aspectRatio;\n } else if (isNumber(data.height)) {\n canvasData.height = data.height;\n canvasData.width = data.height * aspectRatio;\n }\n\n this.renderCanvas(true);\n }\n\n return this;\n },\n\n\n /**\n * Get the crop box position and size data.\n * @returns {Object} The result crop box data.\n */\n getCropBoxData: function getCropBoxData() {\n var cropBoxData = this.cropBoxData;\n\n var data = void 0;\n\n if (this.ready && this.cropped) {\n data = {\n left: cropBoxData.left,\n top: cropBoxData.top,\n width: cropBoxData.width,\n height: cropBoxData.height\n };\n }\n\n return data || {};\n },\n\n\n /**\n * Set the crop box position and size with new data.\n * @param {Object} data - The new crop box data.\n * @returns {Object} this\n */\n setCropBoxData: function setCropBoxData(data) {\n var cropBoxData = this.cropBoxData;\n var aspectRatio = this.options.aspectRatio;\n\n var widthChanged = void 0;\n var heightChanged = void 0;\n\n if (isFunction(data)) {\n data = data.call(this.element);\n }\n\n if (this.ready && this.cropped && !this.disabled && isPlainObject(data)) {\n if (isNumber(data.left)) {\n cropBoxData.left = data.left;\n }\n\n if (isNumber(data.top)) {\n cropBoxData.top = data.top;\n }\n\n if (isNumber(data.width) && data.width !== cropBoxData.width) {\n widthChanged = true;\n cropBoxData.width = data.width;\n }\n\n if (isNumber(data.height) && data.height !== cropBoxData.height) {\n heightChanged = true;\n cropBoxData.height = data.height;\n }\n\n if (aspectRatio) {\n if (widthChanged) {\n cropBoxData.height = cropBoxData.width / aspectRatio;\n } else if (heightChanged) {\n cropBoxData.width = cropBoxData.height * aspectRatio;\n }\n }\n\n this.renderCropBox();\n }\n\n return this;\n },\n\n\n /**\n * Get a canvas drawn the cropped image.\n * @param {Object} [options={}] - The config options.\n * @returns {HTMLCanvasElement} - The result canvas.\n */\n getCroppedCanvas: function getCroppedCanvas() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n if (!this.ready || !window.HTMLCanvasElement) {\n return null;\n }\n\n var canvasData = this.canvasData;\n\n var source = getSourceCanvas(this.image, this.imageData, canvasData, options);\n\n // Returns the source canvas if it is not cropped.\n if (!this.cropped) {\n return source;\n }\n\n var _getData = this.getData(),\n x = _getData.x,\n y = _getData.y,\n initialWidth = _getData.width,\n initialHeight = _getData.height;\n\n var aspectRatio = initialWidth / initialHeight;\n var maxSizes = getContainSizes({\n aspectRatio: aspectRatio,\n width: options.maxWidth || Infinity,\n height: options.maxHeight || Infinity\n });\n var minSizes = getContainSizes({\n aspectRatio: aspectRatio,\n width: options.minWidth || 0,\n height: options.minHeight || 0\n });\n\n var _getContainSizes = getContainSizes({\n aspectRatio: aspectRatio,\n width: options.width || initialWidth,\n height: options.height || initialHeight\n }),\n width = _getContainSizes.width,\n height = _getContainSizes.height;\n\n width = Math.min(maxSizes.width, Math.max(minSizes.width, width));\n height = Math.min(maxSizes.height, Math.max(minSizes.height, height));\n\n var canvas = document.createElement('canvas');\n var context = canvas.getContext('2d');\n\n canvas.width = normalizeDecimalNumber(width);\n canvas.height = normalizeDecimalNumber(height);\n\n context.fillStyle = options.fillColor || 'transparent';\n context.fillRect(0, 0, width, height);\n\n var _options$imageSmoothi = options.imageSmoothingEnabled,\n imageSmoothingEnabled = _options$imageSmoothi === undefined ? true : _options$imageSmoothi,\n imageSmoothingQuality = options.imageSmoothingQuality;\n\n\n context.imageSmoothingEnabled = imageSmoothingEnabled;\n\n if (imageSmoothingQuality) {\n context.imageSmoothingQuality = imageSmoothingQuality;\n }\n\n // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.drawImage\n var sourceWidth = source.width;\n var sourceHeight = source.height;\n\n // Source canvas parameters\n var srcX = x;\n var srcY = y;\n var srcWidth = void 0;\n var srcHeight = void 0;\n\n // Destination canvas parameters\n var dstX = void 0;\n var dstY = void 0;\n var dstWidth = void 0;\n var dstHeight = void 0;\n\n if (srcX <= -initialWidth || srcX > sourceWidth) {\n srcX = 0;\n srcWidth = 0;\n dstX = 0;\n dstWidth = 0;\n } else if (srcX <= 0) {\n dstX = -srcX;\n srcX = 0;\n srcWidth = Math.min(sourceWidth, initialWidth + srcX);\n dstWidth = srcWidth;\n } else if (srcX <= sourceWidth) {\n dstX = 0;\n srcWidth = Math.min(initialWidth, sourceWidth - srcX);\n dstWidth = srcWidth;\n }\n\n if (srcWidth <= 0 || srcY <= -initialHeight || srcY > sourceHeight) {\n srcY = 0;\n srcHeight = 0;\n dstY = 0;\n dstHeight = 0;\n } else if (srcY <= 0) {\n dstY = -srcY;\n srcY = 0;\n srcHeight = Math.min(sourceHeight, initialHeight + srcY);\n dstHeight = srcHeight;\n } else if (srcY <= sourceHeight) {\n dstY = 0;\n srcHeight = Math.min(initialHeight, sourceHeight - srcY);\n dstHeight = srcHeight;\n }\n\n // All the numerical parameters should be integer for `drawImage`\n // https://github.com/fengyuanchen/cropper/issues/476\n var params = [srcX, srcY, srcWidth, srcHeight];\n\n // Avoid \"IndexSizeError\"\n if (dstWidth > 0 && dstHeight > 0) {\n var scale = width / initialWidth;\n\n params.push(dstX * scale, dstY * scale, dstWidth * scale, dstHeight * scale);\n }\n\n context.drawImage.apply(context, [source].concat(toConsumableArray(params.map(function (param) {\n return Math.floor(normalizeDecimalNumber(param));\n }))));\n\n return canvas;\n },\n\n\n /**\n * Change the aspect ratio of the crop box.\n * @param {number} aspectRatio - The new aspect ratio.\n * @returns {Object} this\n */\n setAspectRatio: function setAspectRatio(aspectRatio) {\n var options = this.options;\n\n\n if (!this.disabled && !isUndefined(aspectRatio)) {\n // 0 -> NaN\n options.aspectRatio = Math.max(0, aspectRatio) || NaN;\n\n if (this.ready) {\n this.initCropBox();\n\n if (this.cropped) {\n this.renderCropBox();\n }\n }\n }\n\n return this;\n },\n\n\n /**\n * Change the drag mode.\n * @param {string} mode - The new drag mode.\n * @returns {Object} this\n */\n setDragMode: function setDragMode(mode) {\n var options = this.options,\n dragBox = this.dragBox,\n face = this.face;\n\n\n if (this.loaded && !this.disabled) {\n var croppable = mode === DRAG_MODE_CROP;\n var movable = options.movable && mode === DRAG_MODE_MOVE;\n\n mode = croppable || movable ? mode : DRAG_MODE_NONE;\n\n setData(dragBox, DATA_ACTION, mode);\n toggleClass(dragBox, CLASS_CROP, croppable);\n toggleClass(dragBox, CLASS_MOVE, movable);\n\n if (!options.cropBoxMovable) {\n // Sync drag mode to crop box when it is not movable\n setData(face, DATA_ACTION, mode);\n toggleClass(face, CLASS_CROP, croppable);\n toggleClass(face, CLASS_MOVE, movable);\n }\n }\n\n return this;\n }\n};\n\nvar AnotherCropper = WINDOW.Cropper;\n\nvar Cropper = function () {\n /**\n * Create a new Cropper.\n * @param {Element} element - The target element for cropping.\n * @param {Object} [options={}] - The configuration options.\n */\n function Cropper(element) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n classCallCheck(this, Cropper);\n\n if (!element || !REGEXP_TAG_NAME.test(element.tagName)) {\n throw new Error('The first argument is required and must be an ' + '' + '
' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
' + '