${content}
`)\n break;\n case MESSAGE_TYPE.SUCCESS:\n $messageHolder.append(`${content}
`)\n break;\n case MESSAGE_TYPE.INFO:\n $messageHolder.append(`${content}
`)\n break;\n default:\n break;\n }\n\n $messageHolder.css(\"display\", \"block\");\n }\n}\n\n/**\n * 14.08.2020\n * Smooth scrolling to top of page, after successfully save, or something else.\n */\nexport const scrollToTop = () => {\n window.scroll({\n top: 0,\n left: 0,\n behavior: 'smooth'\n });\n}\n","import {getStorageItems, removeStorageItem} from \"../helpers/helper\";\nimport {sendRequest, sendStandardRequest} from \"../helpers/ajax\";\n\nlet previousLink = \"\";\n\n$(document).ready(function() {\n console.log(\"CURRENT ORDER\", getStorageItems(\"currentOrder\"));\n\n // Load all string language text variables\n const string_language_text = JSON.parse(string_variables);\n\n // Check if a button for question to a product is available\n const $questionButton = $('button[data-target=\"#loginModal\"]');\n\n let isQuestionButton = false\n if ($questionButton.length > 0){\n $questionButton.on(\"click\", function (){\n if ($(this).data(\"order-type\") === \"question\"){\n isQuestionButton = true;\n } else {\n isQuestionButton = false;\n }\n })\n }\n\n // Open Login-Modal on Press the login and register button\n $(\".btn-login-register\").on(\"click\", function (){\n $(\"#loginModal\").modal(\"show\");\n })\n\n // Show only loginModal and not register or anything else\n $(\"#loginModal\").on(\"show.bs.modal\", function (){\n $(\".modal:not(#loginModal)\").modal('hide');\n\n // If Question button available -> Show register as guest\n if (isQuestionButton){\n $(\"#registerGuestBtn\").css(\"display\", \"inline-block\")\n } else {\n $(\"#registerGuestBtn\").css(\"display\", \"none\")\n }\n })\n\n // Perform AJAX login on form submit\n const $login = $('form#hmhajaxlogin');\n const $status = $('form#hmhajaxlogin .status');\n $status.fadeOut();\n\n $login.on('submit', function(e){\n e.preventDefault();\n\n $status.removeClass(\"alert-danger\").removeClass(\"alert-success\").fadeOut();\n\n const $form = $(this);\n const data = $form.serializeArray();\n let error = 0;\n\n const errorMessages = [];\n data.forEach(d => {\n switch(d.name){\n case \"username\":\n if (!d.value || d.value === \"\"){\n error+=1;\n errorMessages.push(string_language_text.please_provide_user_email);\n }\n break;\n case \"password\":\n if (!d.value || d.value === \"\"){\n error+=1;\n errorMessages.push(string_language_text.please_provide_password);\n }\n break;\n default:\n break;\n }\n });\n\n if (error === 0){\n $status.addClass(\"alert-success\").fadeIn().html(ajax_login_object.loadingmessage);\n\n // Send login request\n sendRequest(data, \"ajax_login\", ajax_login_object.security, ajax_login_object.ajaxurl, null, (err, data) => {\n\n if (err){\n $status.addClass(\"alert-danger\").fadeIn().html(data.message);\n } else {\n $status.addClass(\"alert-success\").fadeIn().html(data.message);\n //if (data.loggedin === true){\n if (previousLink) {\n window.location.href = previousLink;\n } else {\n window.location.reload();\n }\n //}\n }\n })\n } else {\n $status.addClass(\"alert-danger\").fadeIn().html(errorMessages.join(\"\"));\n }\n });\n\n // Perform ajax register process\n grecaptcha.ready(function() {\n const $form = $('form#register');\n const $status = $('form#register .status');\n $status.fadeOut();\n\n $form.on('submit', function(e){\n e.preventDefault();\n\n $status.removeClass(\"alert-danger\").removeClass(\"alert-success\").fadeOut();\n\n const data = $(this).serializeArray();\n\n const additionalError = [];\n const username = data.find(d => d.name === \"username\");\n\n const validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/;\n if (username && username.value && username.value.match(validRegex)){\n additionalError.push({name: \"username\", value: ajax_login_object.usernamenotemail});\n }\n\n if ($(this)[0].checkValidity() === false) {\n e.stopPropagation();\n } else {\n if (additionalError.length > 0){\n $(\"input[name='username']\").removeClass(\"is-valid\").attr(\"valid\", \"false\").addClass(\"is-invalid\")\n $status.removeClass(\"alert-success\").addClass(\"alert-danger\").fadeIn().html(ajax_login_object.usernamenotemail);\n } else {\n $status.removeClass(\"alert-success\").addClass(\"alert-success\").fadeIn().html(ajax_login_object.loadingmessage);\n\n const orderData = getStorageItems(\"currentOrder\");\n\n // Check recaptcha before processing register\n grecaptcha.execute('6LfkG-wUAAAAAMiYEi-pK4GWlGDn5npzXpsy4_jt', {action: 'ajax_register'}).then(function (token) {\n data.push({name: 'recaptcha_response', value: token});\n\n\n const urlParams = new URLSearchParams(window.location.search);\n urlParams.append(\"modal\", \"open\");\n\n if (orderData.order && orderData.product){\n data.push({name: \"orderData\", value: JSON.stringify(orderData.order)});\n data.push({name: \"orderProduct\", value: orderData.product});\n }\n\n data.push({name: 'link', value: window.location.origin + window.location.pathname + \"?\" + urlParams.toString()});\n\n /*if (typeof order !== 'undefined') {\n data.push({name: \"data\", value: order})\n }*/\n\n console.log(\"SUBMIT END\", data);\n\n sendRequest(data, \"ajax_register\", ajax_login_object.security, ajax_login_object.ajaxurl, null, (err, data) => {\n if (err){\n $status.removeClass(\"alert-success\").addClass(\"alert-danger\").fadeIn().html(data.message);\n } else {\n if (data.guest_action){\n const user_id = data.user_id;\n const $question_modal = $(\"#modalDateHolder\");\n if ($question_modal.length > 0){\n $question_modal.find(\"#username\").val(user_id);\n }\n }\n\n console.log(\"AJAX REGISTER\", data);\n\n if (data.order_type === \"question\") {\n const user_id = data.user_id;\n const $question_modal = $(\"#hmh_woo_modal_info\");\n if ($question_modal.length > 0){\n console.log(\"AJAX REGISTER START REQUEST\", user_id, $question_modal, data);\n\n $question_modal.find(\"#username\").val(user_id);\n\n\n console.log(\"AJAX REGISTER GET FORM\")\n const $form = $question_modal.find(\"form\");\n let data = $form.serializeArray();\n\n console.log(\"AJAX REGISTER PROCEED ORDER\")\n for (const key in orderData.order){\n if (Array.isArray(orderData.order[key])){\n orderData.order[key].forEach(function (o,i) {\n for (const k in o){\n data.push({name: `acf[${key}][${i}][${k}]`, value: o[k]});\n }\n });\n } else {\n data.push({name: `acf[${key}]`, value: orderData.order[key]});\n }\n }\n\n console.log(\"AJAX REGISTER FILTER DATA\")\n data = data.filter(d => d.name !== \"security\")\n .filter(d => d.name !== \"post_type\")\n .filter(d => d.name !== \"buy_request\")\n .filter(d => d.name !== \"action\")\n\n data.push({name: \"post_type\", value: \"product_offer_question\"})\n data.push({name: \"buy_request\", value: false})\n\n //data.push({name: 'security', value: hmh_product_manager.security})\n data.push({name: \"action\", value: \"hmh_product_new_offer\"})\n\n console.log(\"SEND NEW QUESTION AFTER REGISTER\", orderData.order, data);\n\n sendRequest(data, \"hmh_product_new_offer\", hmh_product_manager.security, hmh_product_manager.ajaxurl, null, (err, data) => {\n console.log(\"PRODUCT NEW OFFER AFTER REGISTER\", err, data);\n if (err){\n console.error(err, data);\n }\n });\n }\n }\n\n $status.addClass(\"alert-success\").fadeIn().html(data.message);\n removeStorageItem(\"currentOrder\");\n\n $(\"#registerModal\").modal(\"hide\");\n\n if (data.guest_action){\n $(\"#registerGuestSecond\").find(\".mail-info\").text(data.email)\n $(\"#registerGuestSecond\").modal(\"show\");\n } else {\n $(\"#registerModalSecond\").find(\".mail-info\").text(data.email)\n $(\"#registerModalSecond\").modal(\"show\");\n }\n }\n })\n });\n }\n }\n $(this).addClass(\"was-validated\");\n });\n });\n\n\n const $lostPasswordForm = $('form#requestlostPassword');\n const $statusLostPassword = $('form#requestlostPassword .status');\n $statusLostPassword.fadeOut();\n\n $lostPasswordForm.on('submit', function(e){\n e.preventDefault();\n\n $statusLostPassword.removeClass(\"alert-danger\").removeClass(\"alert-success\").fadeOut();\n\n const dataSend = $(this).serializeArray();\n\n if ($lostPasswordForm[0].checkValidity() === false) {\n e.stopPropagation();\n } else {\n $statusLostPassword.addClass(\"alert-success\").fadeIn().html(ajax_login_object.loadingmessage);\n\n sendRequest(dataSend, \"ajax_password_lost\", ajax_login_object.security, ajax_login_object.ajaxurl, null, (err, data) => {\n console.log(data, dataSend)\n if (err){\n $statusLostPassword.removeClass(\"alert-success\").addClass(\"alert-danger\").fadeIn().html(data.messages.error.map(message => message.notice));\n } else {\n $statusLostPassword.addClass(\"alert-success\").fadeIn().html(data.message);\n\n $(\"#passwordLostModal\").modal(\"hide\");\n $(\"#passwordLostModalSecond\").find(\".mail-info\").text(dataSend.find(d => d.name === \"user_login\").value)\n $(\"#passwordLostModalSecond\").modal(\"show\");\n }\n })\n }\n $lostPasswordForm.addClass(\"was-validated\");\n });\n\n const $resetPasswordForm = $('form#requestResetPassword');\n const $statusResetPassword = $('form#requestResetPassword .status');\n $statusResetPassword.fadeOut();\n\n $resetPasswordForm.on('submit', function(e){\n e.preventDefault();\n\n $statusResetPassword.removeClass(\"alert-danger\").removeClass(\"alert-success\").fadeOut();\n\n const data = $(this).serializeArray();\n\n if ($resetPasswordForm[0].checkValidity() === false) {\n e.stopPropagation();\n } else {\n data.push({name: 'security', value: ajax_login_object.security});\n data.push({name: 'action', value: \"hmh_reset_password\"});\n $statusResetPassword.addClass(\"alert-success\").fadeIn().html(ajax_login_object.loadingmessage);\n\n sendStandardRequest(hmh_product_manager.adminurl, \"POST\", data);\n }\n $resetPasswordForm.addClass(\"was-validated\");\n });\n\n\n const urlParams = new URLSearchParams(window.location.search);\n if (urlParams.get(\"prevLink\")) {\n previousLink = urlParams.get(\"prevLink\");\n }\n if (urlParams.get(\"login\") && urlParams.get(\"openModal\")) {\n $(\"#loginModal\").modal('toggle')\n }\n\n\n});\n","import {getStorageItems} from \"../helpers/helper\";\nimport moment from \"moment\";\nimport {defineDropzone} from \"../helpers/dropzone\";\nimport {sendRequest} from \"../helpers/ajax\";\nimport {MESSAGE_TYPE, scrollToTop, setNewMessage, toggleLoadingScreen} from \"../helpers/loading\";\nimport {dateRangepickerLocale} from \"../helpers/date\";\n\nlet userImage = null;\n\nconst initUserProfilePage = () => {\n $('[data-toggle=\"tooltip\"]').tooltip()\n\n const $userImageFiled = $(\"#userImage\");\n $(\".datetimepicker\").daterangepicker({\n maxDate: moment().subtract(18, 'years').toDate(),\n startDate: moment().subtract(18, 'years').toDate(),\n singleDatePicker: true,\n showDropdowns: true,\n autoUpdateInput: false,\n locale: {\n ...dateRangepickerLocale,\n format: 'DD.MM.YYYY'\n }\n })\n\n $('.datetimepicker').on('apply.daterangepicker', function(ev, picker) {\n $(this).val(picker.startDate.format('DD.MM.YYYY'));\n });\n\n if ($(\".hmh_img_user_upload_dropzone\").length){\n defineDropzone(\".hmh_img_user_upload_dropzone\",\n ajax_login_object.ajaxurl,\n 2,\n document.querySelector(\"#hmhImagePreviews\").innerHTML,\n \"user\", true, $(\"#userID\").data(\"user\"), function (error, files, action) {\n if (!error){\n //console.log(files);\n\n switch(action){\n case \"add\":\n userImage = files;\n $userImageFiled.val(files.id);\n break;\n\n case \"delete\":\n userImage = null;\n $userImageFiled.val(\"\");\n break;\n\n default:\n break;\n }\n }\n })\n }\n\n const $trustedUserFile = $(\"#trusted_user\");\n if ($trustedUserFile.length > 0){\n\n $trustedUserFile.on(\"change select\", function () {\n //console.log(\"FILE ADDED\", $trustedUserFile[0]);\n\n if ($trustedUserFile[0].files.length > 0){\n\n $trustedUserFile.closest(\".upload-btn-wrapper\").find(\".btn.btn-file\").attr(\"disabled\", true);\n $trustedUserFile.closest(\".upload-btn-wrapper\").find(\".file-input\").attr(\"disabled\", true);\n\n const formData = new FormData();\n\n const userID = $(\"#userID\").data(\"user\");\n\n formData.append(\"action\", 'hmh_profile_trusted');\n formData.append(\"trusted_user\", true);\n formData.append(\"userId\", userID)\n formData.append(\"security\", ajax_login_object.security);\n formData.append($trustedUserFile[0].files[0].name, $trustedUserFile[0].files[0]);\n\n //console.log($trustedUserFile[0].files[0].name, $trustedUserFile[0].files[0]);\n\n $.ajax({\n type: \"POST\",\n url: ajax_login_object.ajaxurl,\n data: formData,\n enctype: 'multipart/form-data',\n contentType: false,\n processData: false,\n success: function (resp) {\n const data = JSON.parse(resp);\n $trustedUserFile.closest(\".upload-btn-wrapper\").fadeOut();\n },\n });\n\n }\n })\n }\n\n const $checkFields = $(\".field_5ed005af63887 .form-check-input\");\n if ($checkFields.length > 0){\n const $box = $(\".field_5ed005af63887 .hmh_admin_group_box\").first();\n\n $box.append(\"\");\n const $tagList = $box.find(\".tag-list\");\n\n $checkFields.each(function () {\n if ($(this).prop(\"checked\") || $(this).prop(\"checked\") === \"checked\"){\n $tagList.append('
' +\n '' + counter + '' +\n '
'\n\n const $btn = $(\".my-hmh-btn\")\n if ($btn.length > 0){\n $btn.append(overlayElement);\n }\n\n $(\".my-messages .counter\").text(\"(\" + counter + \")\");\n }\n\n })\n\n if($(\".woocommerce-MyAccount-content #profilePage\").length > 0 || $(\"#fullProfilemodalEntry\").length > 0 ){\n initUserProfilePage();\n }\n\n if ($(\"#fullProfilemodalEntry\").length > 0){\n initProfileModal();\n }\n\n if ($(\".disable-woocommerce\").length){\n $(\".woocommerce\").addClass(\"woocommerce-hmh\").removeClass(\"woocommerce\").addClass(\"content\");\n }\n\n if ($(\"#savedSearches\").length){\n initSavedSearchPage();\n }\n\n if($(\"#savedBookmarks\").length > 0){\n $(\".deleteBookmark\").on(\"click\", function (){\n const $field = $($(this).data(\"target\"));\n if ($field.length){\n const type = $field.data(\"type\");\n\n const fields = [\"all_number\"]\n if (type === \"exchange\" || type === \"tauschen\"){\n fields.push(\"exchange_number\")\n } else {\n fields.push(\"buy_number\")\n }\n\n fields.forEach(id => {\n const text = parseInt($(\"#\" + id).text());\n $(\"#\" + id).text(text-1)\n })\n\n\n $field.remove();\n\n const data = [\n {name: \"id\", value: $(this).data(\"id\")},\n ];\n\n sendRequest(data, \"hmh_delete_bookmark\", ajax_login_object.security, ajax_login_object.ajaxurl, null, (err, data) => {\n\n });\n }\n })\n }\n\n $(\"#tellAFriend form\").submit(function (e){\n e.preventDefault();\n toggleLoadingScreen();\n\n const data = $(this).serializeArray();\n grecaptcha.ready(function () {\n grecaptcha.execute('6LfkG-wUAAAAAMiYEi-pK4GWlGDn5npzXpsy4_jt', {action: 'hmh_send_to_friend'}).then(function (token) {\n\n console.log(data);\n data.push({name: 'recaptcha_response', value: token});\n\n sendRequest(data, \"hmh_send_to_friend\", hmh_product_manager.security, hmh_product_manager.ajaxurl, null, (err, data) => {\n toggleLoadingScreen();\n\n console.log(err, data);\n\n if (!err) {\n $(\"#tellAFriend input[name='tellafriendemailTo']\").val(\"\");\n $(\"#tellAFriend\").modal(\"hide\")\n }\n });\n })\n\n })\n })\n\n})\n","export const UNIT = {\n en: {\n zero: 0,\n first: 1,\n one: 1,\n second: 2,\n two: 2,\n third: 3,\n thirteenth: 13,\n thirteen: 13,\n three: 3,\n fourth: 4,\n fourteenth: 14,\n fourteen: 14,\n four: 4,\n fifteenth: 15,\n fifteen: 15,\n fifth: 5,\n five: 5,\n sixth: 6,\n sixteenth: 16,\n sixteen: 16,\n six: 6,\n seventeenth: 17,\n seventeen: 17,\n seventh: 7,\n seven: 7,\n eighteenth: 18,\n eighteen: 18,\n eighth: 8,\n eight: 8,\n nineteenth: 19,\n nineteen: 19,\n ninth: 9,\n nine: 9,\n tenth: 10,\n ten: 10,\n eleventh: 11,\n eleven: 11,\n twelfth: 12,\n twelve: 12,\n a: 1\n },\n de: {\n null: 0,\n eins: 1,\n ein: 1,\n zwei: 2,\n drei: 3,\n dreizehn: 13,\n vier: 4,\n vierzehn: 14,\n fünf: 5,\n fuenf: 5,\n fünfzehn: 15,\n fuenfzehn: 15,\n sechs: 6,\n sechszehn: 16,\n sechzehn: 16,\n sex: 6,\n siebzehn: 17,\n sieben: 7,\n achtzehn: 18,\n acht: 8,\n neunzehn: 19,\n neun: 9,\n zehn: 10,\n elf: 11,\n zwölf: 12,\n zwoelf: 12\n }\n};\n\nexport const TEN = {\n en: {\n twenty: 20,\n twentieth: 20,\n thirty: 30,\n thirtieth: 30,\n forty: 40,\n fortieth: 40,\n fifty: 50,\n fiftieth: 50,\n sixty: 60,\n sixtieth: 60,\n seventy: 70,\n seventieth: 70,\n eighty: 80,\n eightieth: 80,\n ninety: 90,\n ninetieth: 90\n },\n de: {\n zwanzig: 20,\n dreizig: 30,\n vierzig: 40,\n fünfzig: 50,\n fuenfzig: 50,\n sechszig: 60,\n siebzig: 70,\n achtzig: 80,\n neunzig: 90\n }\n};\n\nexport const MAGNITUDE = {\n en: {\n hundred: 100,\n hundredth: 100,\n thousand: 1000,\n million: 1000000,\n billion: 1000000000,\n trillion: 1000000000000,\n quadrillion: 1000000000000000,\n quintillion: 1000000000000000000,\n sextillion: 1000000000000000000000,\n septillion: 1000000000000000000000000,\n octillion: 1000000000000000000000000000,\n nonillion: 1000000000000000000000000000000,\n decillion: 1000000000000000000000000000000000\n },\n de: {\n hundert: 100,\n einhundert: 100,\n tausend: 1000,\n million: 1000000,\n milliarde: 1000000000,\n trillion: 1000000000000,\n trilliarde: 1000000000000000,\n quintillion: 1000000000000000000,\n sextillion: 1000000000000000000000,\n septillion: 1000000000000000000000000,\n octillion: 1000000000000000000000000000,\n nonillion: 1000000000000000000000000000000,\n decillion: 1000000000000000000000000000000000\n }\n};\n\nexport const NUMBER = { ...UNIT.de, ...UNIT.en, ...TEN.de, ...TEN.en, ...MAGNITUDE.de, ...MAGNITUDE.en };\n\nexport const UNIT_KEYS = Object.keys({...UNIT.de, ...UNIT.en});\nexport const TEN_KEYS = Object.keys({...TEN.de, ...TEN.en});\nexport const MAGNITUDE_KEYS = Object.keys({...MAGNITUDE.de, ...MAGNITUDE.en});\n\nexport const NUMBER_WORDS = [ ...UNIT_KEYS, ...TEN_KEYS, ...MAGNITUDE_KEYS];\n\nexport const JOINERS = ['and', 'und'];\nexport const DECIMALS = ['point', 'dot', 'punkt'];\n\nexport const PUNCTUATION = [\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\nexport const TOKEN_TYPE = {\n UNIT: 0,\n TEN: 1,\n MAGNITUDE: 2,\n DECIMAL: 3,\n HUNDRED: 4,\n};\n\nexport const ALL_WORDS = [ ...NUMBER_WORDS, ...JOINERS, ...DECIMALS ];\n\nexport const BLACKLIST_SINGULAR_WORDS = ['a'];\n","import clj_fuzzy from 'clj-fuzzy';\nimport itsSet from 'its-set';\n\nimport { ALL_WORDS } from './constants';\n\nexport default (word, haystack) => {\n return (haystack || ALL_WORDS)\n .map(numberWord => ({\n word: numberWord,\n score: clj_fuzzy.metrics.jaro(numberWord, word)\n }))\n .reduce((acc, stat) => !itsSet(acc.score) || stat.score > acc.score ? stat : acc, {})\n .word;\n};\n","/* eslint-disable no-extra-parens */\nimport {\n PUNCTUATION,\n NUMBER_WORDS,\n UNIT_KEYS,\n TEN_KEYS,\n MAGNITUDE_KEYS,\n TOKEN_TYPE,\n JOINERS,\n DECIMALS,\n BLACKLIST_SINGULAR_WORDS,\n NUMBER,\n} from './constants';\nimport fuzzyMatch from './fuzzy';\n\nconst SKIP = 0;\nconst ADD = 1;\nconst START_NEW_REGION = 2;\nconst NOPE = 3;\n\nconst canAddTokenToEndOfSubRegion = (subRegion, currentToken, { impliedHundreds }) => {\n const { tokens } = subRegion;\n const prevToken = tokens[0];\n if (!prevToken) return true;\n if (\n prevToken.type === TOKEN_TYPE.MAGNITUDE &&\n currentToken.type === TOKEN_TYPE.UNIT\n ) return true;\n if (\n prevToken.type === TOKEN_TYPE.MAGNITUDE &&\n currentToken.type === TOKEN_TYPE.TEN\n ) return true;\n if (\n impliedHundreds &&\n subRegion.type === TOKEN_TYPE.MAGNITUDE &&\n prevToken.type === TOKEN_TYPE.TEN &&\n currentToken.type === TOKEN_TYPE.UNIT\n ) return true;\n if (\n impliedHundreds &&\n subRegion.type === TOKEN_TYPE.MAGNITUDE &&\n prevToken.type === TOKEN_TYPE.UNIT &&\n currentToken.type === TOKEN_TYPE.TEN\n ) return true;\n if (\n prevToken.type === TOKEN_TYPE.TEN &&\n currentToken.type === TOKEN_TYPE.UNIT\n ) return true;\n if (\n !impliedHundreds &&\n prevToken.type === TOKEN_TYPE.TEN &&\n currentToken.type === TOKEN_TYPE.UNIT\n ) return true;\n if (\n prevToken.type === TOKEN_TYPE.MAGNITUDE &&\n currentToken.type === TOKEN_TYPE.MAGNITUDE\n ) return true;\n if (\n !impliedHundreds &&\n prevToken.type === TOKEN_TYPE.TEN &&\n currentToken.type === TOKEN_TYPE.TEN\n ) return false;\n if (\n impliedHundreds &&\n prevToken.type === TOKEN_TYPE.TEN &&\n currentToken.type === TOKEN_TYPE.TEN\n ) return true;\n return false;\n};\n\nconst getSubRegionType = (subRegion, currentToken) => {\n if (!subRegion) {\n return { type: currentToken.type };\n }\n const prevToken = subRegion.tokens[0];\n const isHundred = (\n (prevToken.type === TOKEN_TYPE.TEN && currentToken.type === TOKEN_TYPE.UNIT) ||\n (prevToken.type === TOKEN_TYPE.TEN && currentToken.type === TOKEN_TYPE.TEN) ||\n (\n prevToken.type === TOKEN_TYPE.UNIT && currentToken.type === TOKEN_TYPE.TEN &&\n NUMBER[prevToken.lowerCaseValue] > 9\n ) ||\n (prevToken.type === TOKEN_TYPE.UNIT && currentToken.type === TOKEN_TYPE.UNIT) ||\n (prevToken.type === TOKEN_TYPE.TEN && currentToken.type === TOKEN_TYPE.UNIT && subRegion.type === TOKEN_TYPE.MAGNITUDE)\n );\n if (subRegion.type === TOKEN_TYPE.MAGNITUDE) return { type: TOKEN_TYPE.MAGNITUDE, isHundred };\n if (isHundred) return { type: TOKEN_TYPE.HUNDRED, isHundred };\n return { type: currentToken.type, isHundred };\n};\n\nconst checkIfTokenFitsSubRegion = (subRegion, token, options) => {\n const { type, isHundred } = getSubRegionType(subRegion, token);\n if (!subRegion) return { action: START_NEW_REGION, type, isHundred };\n if (canAddTokenToEndOfSubRegion(subRegion, token, options)) {\n return { action: ADD, type, isHundred };\n }\n return { action: START_NEW_REGION, type, isHundred };\n};\n\nconst getSubRegions = (region, options) => {\n const subRegions = [];\n let currentSubRegion;\n const tokensCount = region.tokens.length;\n let i = tokensCount - 1;\n while (i >= 0) {\n const token = region.tokens[i];\n const { action, type, isHundred } = checkIfTokenFitsSubRegion(currentSubRegion, token, options);\n token.type = isHundred ? TOKEN_TYPE.HUNDRED : token.type;\n switch (action) {\n case ADD: {\n currentSubRegion.type = type;\n currentSubRegion.tokens.unshift(token);\n break;\n }\n case START_NEW_REGION: {\n currentSubRegion = {\n tokens: [token],\n type,\n };\n subRegions.unshift(currentSubRegion);\n break;\n }\n // no default\n }\n i--;\n }\n return subRegions;\n};\n\nconst canAddTokenToEndOfRegion = (region, currentToken, { impliedHundreds }) => {\n const { tokens } = region;\n const prevToken = tokens[tokens.length - 1];\n if (\n !impliedHundreds &&\n prevToken.type === TOKEN_TYPE.UNIT &&\n currentToken.type === TOKEN_TYPE.UNIT &&\n !region.hasDecimal\n ) return false;\n if (!impliedHundreds && prevToken.type === TOKEN_TYPE.UNIT && currentToken.type === TOKEN_TYPE.TEN) return false;\n if (!impliedHundreds && prevToken.type === TOKEN_TYPE.TEN && currentToken.type === TOKEN_TYPE.TEN) return false;\n return true;\n};\n\nconst checkIfTokenFitsRegion = (region, token, options) => {\n const isDecimal = DECIMALS.includes(token.lowerCaseValue);\n if ((!region || !region.tokens.length) && isDecimal) {\n return START_NEW_REGION;\n }\n const isPunctuation = PUNCTUATION.includes(token.lowerCaseValue);\n if (isPunctuation) return SKIP;\n const isJoiner = JOINERS.includes(token.lowerCaseValue);\n if (isJoiner) return SKIP;\n if (isDecimal && !region.hasDecimal) {\n return ADD;\n }\n const isNumberWord = NUMBER_WORDS.includes(token.lowerCaseValue);\n if (isNumberWord) {\n if (!region) return START_NEW_REGION;\n if (canAddTokenToEndOfRegion(region, token, options)) {\n return ADD;\n }\n return START_NEW_REGION;\n }\n return NOPE;\n};\n\nconst checkBlacklist = tokens =>\n tokens.length === 1 &&\n BLACKLIST_SINGULAR_WORDS.includes(tokens[0].lowerCaseValue);\n\nconst matchRegions = (tokens, options) => {\n const regions = [];\n\n if (checkBlacklist(tokens)) return regions;\n\n let i = 0;\n let currentRegion;\n const tokensCount = tokens.length;\n while (i < tokensCount) {\n const token = tokens[i];\n const tokenFits = checkIfTokenFitsRegion(currentRegion, token, options);\n switch (tokenFits) {\n case SKIP: {\n break;\n }\n case ADD: {\n if (currentRegion) {\n currentRegion.end = token.end;\n currentRegion.tokens.push(token);\n if (token.type === TOKEN_TYPE.DECIMAL) {\n currentRegion.hasDecimal = true;\n }\n }\n break;\n }\n case START_NEW_REGION: {\n currentRegion = {\n start: token.start,\n end: token.end,\n tokens: [token],\n };\n regions.push(currentRegion);\n if (token.type === TOKEN_TYPE.DECIMAL) {\n currentRegion.hasDecimal = true;\n }\n break;\n }\n case NOPE:\n default: {\n currentRegion = null;\n break;\n }\n }\n i++;\n }\n\n return regions.map(region => ({ ...region, subRegions: getSubRegions(region, options) }));\n};\n\nconst getTokenType = (chunk, options) => {\n if (UNIT_KEYS.includes(chunk.toLowerCase())) return TOKEN_TYPE.UNIT;\n if (TEN_KEYS.includes(chunk.toLowerCase())) return TOKEN_TYPE.TEN;\n if (MAGNITUDE_KEYS.includes(chunk.toLowerCase())) return TOKEN_TYPE.MAGNITUDE;\n if (DECIMALS.includes(chunk.toLowerCase())) return TOKEN_TYPE.DECIMAL;\n};\n\nexport default (text, options) => {\n const tokens = text\n .split(/(\\w+|\\s|[[:punct:]])/i)\n .reduce((acc, chunk) => {\n const unfuzzyChunk = chunk.length && options.fuzzy && !PUNCTUATION.includes(chunk) ?\n fuzzyMatch(chunk) :\n chunk;\n const start = acc.length ? acc[acc.length - 1].end + 1 : 0;\n const end = start + chunk.length;\n return end !== start ?\n acc.concat({\n start,\n end: end - 1,\n value: unfuzzyChunk,\n lowerCaseValue: unfuzzyChunk.toLowerCase(),\n type: getTokenType(unfuzzyChunk, options),\n }) :\n acc;\n }, []);\n const regions = matchRegions(tokens, options);\n return regions;\n};\n","export const splice = (str, index, count, add) => {\n let i = index;\n if (i < 0) {\n i = str.length + i;\n if (i < 0) {\n i = 0;\n }\n }\n return str.slice(0, i) + (add || '') + str.slice(i + count);\n};\n","import { splice } from './util';\nimport { TOKEN_TYPE, NUMBER } from './constants';\n\nconst getNumber = (region) => {\n let sum = 0;\n let decimalReached = false;\n let decimalUnits = [];\n region.subRegions.forEach((subRegion) => {\n const { tokens, type } = subRegion;\n let subRegionSum = 0;\n if (type === TOKEN_TYPE.DECIMAL) {\n decimalReached = true;\n return;\n }\n if (decimalReached) {\n decimalUnits.push(subRegion);\n return;\n }\n switch (type) {\n case TOKEN_TYPE.MAGNITUDE:\n case TOKEN_TYPE.HUNDRED: {\n subRegionSum = 1;\n const tokensCount = tokens.length;\n tokens.reduce((acc, token, i) => {\n if (token.type === TOKEN_TYPE.HUNDRED) {\n let tokensToAdd = tokensCount - 1 ? tokens.slice(i + 1) : [];\n tokensToAdd = tokensToAdd.filter((tokenToAdd, j) =>\n j === 0 || tokensToAdd[j - 1].type > tokenToAdd.type\n );\n const tokensToAddSum = tokensToAdd.reduce((acc2, tokenToAdd) =>\n acc2 + NUMBER[tokenToAdd.lowerCaseValue]\n , 0);\n return acc.concat({\n ...tokens[i + 1],\n numberValue: tokensToAddSum + (NUMBER[token.lowerCaseValue] * 100),\n });\n }\n if (i > 0 && tokens[i - 1].type === TOKEN_TYPE.HUNDRED) return acc;\n if (\n i > 1 &&\n tokens[i - 1].type === TOKEN_TYPE.TEN &&\n tokens[i - 2].type === TOKEN_TYPE.HUNDRED\n ) return acc;\n return acc.concat({ token, numberValue: NUMBER[token.lowerCaseValue] });\n }, []).forEach(({ numberValue }) => {\n subRegionSum *= numberValue;\n });\n break;\n }\n case TOKEN_TYPE.UNIT:\n case TOKEN_TYPE.TEN: {\n tokens.forEach(token => {\n subRegionSum += NUMBER[token.lowerCaseValue];\n });\n break;\n }\n // no default\n }\n sum += subRegionSum;\n });\n\n let currentDecimalPlace = 1;\n decimalUnits.forEach(({ tokens }) => {\n tokens.forEach(({ lowerCaseValue }) => {\n sum += NUMBER[lowerCaseValue] / Math.pow(10, currentDecimalPlace);\n currentDecimalPlace += 1;\n });\n });\n\n return sum;\n};\n\nconst replaceRegionsInText = (regions, text) => {\n let replaced = text;\n let offset = 0;\n regions.forEach(region => {\n const length = region.end - region.start + 1;\n const replaceWith = `${getNumber(region)}`;\n replaced = splice(replaced, region.start + offset, length, replaceWith);\n offset -= length - replaceWith.length;\n });\n return replaced;\n};\n\nexport default ({ regions, text }) => {\n if (!regions) return text;\n if (regions[0].end - regions[0].start === text.length - 1) return getNumber(regions[0]);\n return replaceRegionsInText(regions, text);\n};\n","import parser from './parser';\nimport compiler from './compiler';\n\nexport function wordsToNumbers (text, options = {}) {\n const regions = parser(text, options);\n if (!regions.length) return text;\n const compiled = compiler({ text, regions });\n return compiled;\n}\n\nexport default wordsToNumbers;\n","import wordsToNumbers from \"../helpers/words-to-number\";\n\nlet string_language_text = null;\n\nexport const initMessageCleaner = ($element) => {\n string_language_text = JSON.parse(string_variables);\n $element.on(\"change keypress keyup\", function (){\n let allErrors = [];\n let [message, error] = checkMessageForEmail($(this).val());\n if (error.length > 0){\n allErrors.push(...error);\n }\n [message, error] = checkMessageForTel(message);\n if (error.length > 0){\n allErrors.push(...error);\n }\n [message, error] = checkMessageForUrl(message);\n if (error.length > 0){\n allErrors.push(...error);\n }\n\n console.log(\"MESSAGE\", message);\n\n allErrors = allErrors.filter(x => x !== null);\n //$(this).val(message);\n\n if (allErrors.length > 0){\n if (!$(this).hasClass(\"error\")) {\n $(this).addClass(\"error\");\n\n console.log(\"GET TYPE\", $(this), $(this).data(\"type\"));\n\n if ($(this).data(\"type\") === \"exchange\"){\n $(\"\" + string_language_text.no_mails_allowed_exchanged + \"
\").insertAfter($(this));\n } else {\n $(\"\" + string_language_text.no_mails_allowed + \"
\").insertAfter($(this));\n }\n }\n } else {\n //$(this).removeClass(\"error\");\n //$(\"#errorInMessage\").remove();\n }\n });\n}\n\nexport const proofMessageOnSend = (msg) => {\n let allErrors = [];\n if (string_language_text){\n let message, error = \"\";\n console.log(msg, message, error, allErrors);\n [message, error] = checkMessageForEmail(msg, false);\n if (error.length > 0){\n allErrors.push(...error);\n }\n console.log(msg, message, error, allErrors);\n [message, error] = checkMessageForTel(message, false);\n if (error.length > 0){\n allErrors.push(...error);\n }\n console.log(msg, message, error, allErrors);\n [message, error] = checkMessageForUrl(message, false);\n if (error.length > 0){\n allErrors.push(...error);\n }\n console.log(msg, message, error, allErrors);\n allErrors = allErrors.filter(x => x !== null);\n\n console.log(allErrors);\n\n return allErrors.length > 0;\n }\n return false;\n}\n\nexport const clearMessageOnSend = (msg) => {\n if (string_language_text){\n let [message, error] = checkMessageForEmail(msg, false);\n [message, error] = checkMessageForTel(message, false);\n [message, error] = checkMessageForUrl(message, false);\n\n return message;\n }\n return msg;\n}\n\nconst checkMessageForEmail = (message, clearMessage = false) => {\n const regex = new RegExp(/[a-zA-Z0-9._-]+(@|\\(at\\)|\\s+@\\s+|\\s+\\(at\\)\\s+|_+@_+|_+at+_|_+\\(at\\)_+)[a-zA-Z0-9._-]+(\\.|_)[a-zA-Z]{2,4}/, \"gmi\");\n const foundError = [];\n\n if (clearMessage){\n message = message.replaceAll(regex, string_language_text.no_mails_allowed_message);\n }\n //message = message.replace(regex, '$&');\n foundError.push(message.match(regex));\n foundError.push(message.replaceAll(\" \", \"\").match(regex));\n\n const emailPatternRegex = new RegExp(/(@|\\(at\\))/, \"gmi\");\n const words = message.replaceAll(\" \", \"\").split(emailPatternRegex);\n\n if (words.length > 1){\n const wordsWithPattern = words;\n words.forEach((word, key) => {\n if (word.match(emailPatternRegex)) {\n wordsWithPattern[key] = \"(\" + words[key] + \")\";\n if (key - 1 >= 0) {\n wordsWithPattern[key - 1] = words[key - 1].replaceAll(\"/.$/\", \"\");\n }\n if (key + 1 < words.length) {\n wordsWithPattern[key + 1] = words[key + 1].replaceAll(\"/^./\", \"\");\n wordsWithPattern[key + 1] = wordsWithPattern[key + 1].replaceAll(\"dot\", \".\");\n wordsWithPattern[key + 1] = wordsWithPattern[key + 1].replaceAll(\"/\\s/\", \"\");\n wordsWithPattern[key + 1] = wordsWithPattern[key + 1].replaceAll(\"/.$/\", \".\");\n }\n }\n })\n const testmessage = wordsWithPattern.join(\"\");\n const simpleRegex = new RegExp(/[a-zA-Z0-9._-]+(@|\\(at\\)|\\s+@\\s+|\\s+\\(at\\)\\s+|_+@_+|_+at+_|_+\\(at\\)_+)[a-zA-Z0-9._-]+/, \"gmi\");\n if (clearMessage){\n message = testmessage.replaceAll(simpleRegex, string_language_text.no_mails_allowed_message);\n }\n //message = message.replace(simpleRegex, '$&');\n\n console.log(wordsWithPattern, testmessage, testmessage.replaceAll(simpleRegex, string_language_text.no_mails_allowed));\n\n foundError.push(testmessage.match(simpleRegex))\n }\n\n return [message, foundError];\n}\n\nconst checkMessageForUrl = (message, clearMessage) => {\n const regex = new RegExp(/((http:\\/\\/|https:\\/\\/)(www|\\s|\\n)|.)([a-zA-Z0-9()]{1,256}\\.(com|de|at|eu|org|net|za|nz|cz|hu))(\\n|\\.|( )|\\s)/, \"gmi\");\n const foundError = [];\n\n message = message.replaceAll(\" \", \"\");\n //message = message.replaceAll(\"(at)\", \"@\");\n\n if (clearMessage){\n message = message.replaceAll(regex, string_language_text.no_webpages_allowed_message);\n }\n console.log(\"MESSAGE\", clearMessage, message);\n //message = message.replace(regex, string_language_text.no_webpages_allowed);\n //message = message.replace(regex, \"$1\");\n foundError.push(message.match(regex));\n\n /* const webPatternRegex = new RegExp(/([a-z]*\\.[a-z]{2,})/, \"gmi\");\n const words = message.split(webPatternRegex);\n */\n\n return [message, foundError];\n}\n\nconst checkMessageForTel = (message, clearMessage) => {\n const regex = new RegExp(/[+]*[(]{0,1}[0-9]{6,}[)]{0,1}[-\\s\\./0-9]*/, \"gmi\");\n const replaceRegex = new RegExp(/[-\\._#+\\*~!\"§$%&\\/\\(\\)=\\?\\/]*/, \"gmi\");\n const dateRegex = new RegExp(/[0-9]{1,4}(\\.|\\/|-)[0-9]{1,2}(\\.|\\/|-)[0-9]{1,4}(\\n|\\.(\\s|$)|( )|\\s|$)/, \"gmi\");\n const foundError = [];\n if (clearMessage){\n message = message.replace(regex, string_language_text.no_tels_allowed_message);\n }\n //message = message.replace(regex, string_language_text.no_tels_allowed);\n //message = message.replace(regex, \"$1\");\n foundError.push(message.match(regex));\n\n let numberFormat = wordsToNumbers(message)\n numberFormat = numberFormat.replaceAll(dateRegex, \"\");\n console.log(\"DATE REMOVED NUMBER\", numberFormat);\n numberFormat = numberFormat.replaceAll(replaceRegex, \"\");\n numberFormat = numberFormat.replaceAll(\" \", \"\");\n console.log(\"PHONE NUMBER\", numberFormat);\n //console.log(numberFormat);\n if (clearMessage){\n message = numberFormat.replaceAll(regex, string_language_text.no_tels_allowed_message);\n }\n //message = numberFormat.replace(regex, string_language_text.no_tels_allowed);\n //message = numberFormat.replace(regex, \"$1\");\n foundError.push(numberFormat.match(regex))\n\n return [message, foundError];\n}\n","/* clj-fuzzy - v0.3.3 - Author: Yomguithereal (Guillaume Plique) - Repository: https://github.com/Yomguithereal/clj-fuzzy */\nif(typeof Math.imul==\"undefined\"||Math.imul(4294967295,5)==0){Math.imul=function(a,b){var ah=a>>>16&65535;var al=a&65535;var bh=b>>>16&65535;var bl=b&65535;return al*bl+(ah*bl+al*bh<<16>>>0)|0}}(function(){var f,ba=this;function l(a){var b=typeof a;if(\"object\"==b){if(a){if(a instanceof Array){return\"array\"}if(a instanceof Object){return b}var c=Object.prototype.toString.call(a);if(\"[object Window]\"==c){return\"object\"}if(\"[object Array]\"==c||\"number\"==typeof a.length&&\"undefined\"!=typeof a.splice&&\"undefined\"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable(\"splice\")){return\"array\"}if(\"[object Function]\"==c||\"undefined\"!=typeof a.call&&\"undefined\"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable(\"call\")){return\"function\"}}else{return\"null\"}}else{if(\"function\"==b&&\"undefined\"==typeof a.call){return\"object\"}}return b}var ca=\"closure_uid_\"+(1e9*Math.random()>>>0),da=0;function ea(a,b){var c=a.split(\".\"),d=ba;c[0]in d||!d.execScript||d.execScript(\"var \"+c[0]);for(var e;c.length&&(e=c.shift());){c.length||void 0===b?d=d[e]?d[e]:d[e]={}:d[e]=b}}var fa=String.prototype.trim?function(a){return a.trim()}:function(a){return a.replace(/^[\\s\\xa0]+|[\\s\\xa0]+$/g,\"\")};function ga(a){return Array.prototype.join.call(arguments,\"\")}function ha(a,b){for(var c in a){b.call(void 0,a[c],c,a)}}function ia(a,b){null!=a&&this.append.apply(this,arguments)}f=ia.prototype;f.Ha=\"\";f.set=function(a){this.Ha=\"\"+a};f.append=function(a,b,c){this.Ha+=a;if(null!=b){for(var d=1;d' + '
';\n\n /**\n * Check if the given value is not a number.\n */\n var 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 */\n function isNumber(value) {\n return typeof value === 'number' && !isNaN(value);\n }\n\n /**\n * Check if the given value is a positive number.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is a positive number, else `false`.\n */\n var isPositiveNumber = function isPositiveNumber(value) {\n return value > 0 && value < Infinity;\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 */\n function 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 */\n function isObject(value) {\n return _typeof(value) === 'object' && value !== null;\n }\n var 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 function isPlainObject(value) {\n if (!isObject(value)) {\n return false;\n }\n try {\n var _constructor = value.constructor;\n var prototype = _constructor.prototype;\n return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf');\n } catch (error) {\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 */\n function isFunction(value) {\n return typeof value === 'function';\n }\n var slice = Array.prototype.slice;\n\n /**\n * Convert array-like or iterable object to an array.\n * @param {*} value - The value to convert.\n * @returns {Array} Returns a new array.\n */\n function toArray(value) {\n return Array.from ? Array.from(value) : slice.call(value);\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 */\n function forEach(data, callback) {\n if (data && isFunction(callback)) {\n if (Array.isArray(data) || isNumber(data.length) /* array-like */) {\n toArray(data).forEach(function (value, key) {\n callback.call(data, value, key, data);\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 return data;\n }\n\n /**\n * Extend the given object.\n * @param {*} target - The target object to extend.\n * @param {*} args - The rest objects for merging to the target object.\n * @returns {Object} The extended object.\n */\n var assign = Object.assign || function assign(target) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n if (isObject(target) && args.length > 0) {\n args.forEach(function (arg) {\n if (isObject(arg)) {\n Object.keys(arg).forEach(function (key) {\n target[key] = arg[key];\n });\n }\n });\n }\n return target;\n };\n var REGEXP_DECIMALS = /\\.\\d*(?:0|9){12}\\d*$/;\n\n /**\n * Normalize decimal number.\n * Check out {@link https://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 */\n function normalizeDecimalNumber(value) {\n var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000000000;\n return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value;\n }\n var 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 */\n function setStyle(element, styles) {\n var style = element.style;\n forEach(styles, function (value, property) {\n if (REGEXP_SUFFIX.test(property) && isNumber(value)) {\n value = \"\".concat(value, \"px\");\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 */\n function 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 */\n function addClass(element, value) {\n if (!value) {\n return;\n }\n if (isNumber(element.length)) {\n forEach(element, function (elem) {\n addClass(elem, value);\n });\n return;\n }\n if (element.classList) {\n element.classList.add(value);\n return;\n }\n var className = element.className.trim();\n if (!className) {\n element.className = value;\n } else if (className.indexOf(value) < 0) {\n element.className = \"\".concat(className, \" \").concat(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 */\n function removeClass(element, value) {\n if (!value) {\n return;\n }\n if (isNumber(element.length)) {\n forEach(element, function (elem) {\n removeClass(elem, value);\n });\n return;\n }\n if (element.classList) {\n element.classList.remove(value);\n return;\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 */\n function toggleClass(element, value, added) {\n if (!value) {\n return;\n }\n if (isNumber(element.length)) {\n forEach(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 var REGEXP_CAMEL_CASE = /([a-z\\d])([A-Z])/g;\n\n /**\n * Transform the given string from camelCase to kebab-case\n * @param {string} value - The value to transform.\n * @returns {string} The transformed value.\n */\n function toParamCase(value) {\n return value.replace(REGEXP_CAMEL_CASE, '$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 */\n function getData(element, name) {\n if (isObject(element[name])) {\n return element[name];\n }\n if (element.dataset) {\n return element.dataset[name];\n }\n return element.getAttribute(\"data-\".concat(toParamCase(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 */\n function 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-\".concat(toParamCase(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 */\n function removeData(element, name) {\n if (isObject(element[name])) {\n try {\n delete element[name];\n } catch (error) {\n element[name] = undefined;\n }\n } else if (element.dataset) {\n // #128 Safari not allows to delete dataset property\n try {\n delete element.dataset[name];\n } catch (error) {\n element.dataset[name] = undefined;\n }\n } else {\n element.removeAttribute(\"data-\".concat(toParamCase(name)));\n }\n }\n var REGEXP_SPACES = /\\s\\s*/;\n var onceSupported = function () {\n var supported = false;\n if (IS_BROWSER) {\n var once = false;\n var listener = function listener() {};\n var options = Object.defineProperty({}, 'once', {\n get: function get() {\n supported = true;\n return once;\n },\n /**\n * This setter can fix a `TypeError` in strict mode\n * {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only}\n * @param {boolean} value - The value to set\n */\n set: function set(value) {\n once = value;\n }\n });\n WINDOW.addEventListener('test', listener, options);\n WINDOW.removeEventListener('test', listener, options);\n }\n return supported;\n }();\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 */\n function removeListener(element, type, listener) {\n var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n var handler = listener;\n type.trim().split(REGEXP_SPACES).forEach(function (event) {\n if (!onceSupported) {\n var listeners = element.listeners;\n if (listeners && listeners[event] && listeners[event][listener]) {\n handler = listeners[event][listener];\n delete listeners[event][listener];\n if (Object.keys(listeners[event]).length === 0) {\n delete listeners[event];\n }\n if (Object.keys(listeners).length === 0) {\n delete element.listeners;\n }\n }\n }\n element.removeEventListener(event, handler, options);\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 */\n function addListener(element, type, listener) {\n var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n var _handler = listener;\n type.trim().split(REGEXP_SPACES).forEach(function (event) {\n if (options.once && !onceSupported) {\n var _element$listeners = element.listeners,\n listeners = _element$listeners === void 0 ? {} : _element$listeners;\n _handler = function handler() {\n delete listeners[event][listener];\n element.removeEventListener(event, _handler, options);\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n listener.apply(element, args);\n };\n if (!listeners[event]) {\n listeners[event] = {};\n }\n if (listeners[event][listener]) {\n element.removeEventListener(event, listeners[event][listener], options);\n }\n listeners[event][listener] = _handler;\n element.listeners = listeners;\n }\n element.addEventListener(event, _handler, options);\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 */\n function dispatchEvent(element, type, data) {\n var event;\n\n // Event and CustomEvent on IE9-11 are global objects, not constructors\n if (isFunction(Event) && isFunction(CustomEvent)) {\n event = new CustomEvent(type, {\n detail: data,\n bubbles: true,\n cancelable: true\n });\n } else {\n event = document.createEvent('CustomEvent');\n event.initCustomEvent(type, true, true, data);\n }\n return element.dispatchEvent(event);\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 */\n function getOffset(element) {\n var box = element.getBoundingClientRect();\n return {\n left: box.left + (window.pageXOffset - document.documentElement.clientLeft),\n top: box.top + (window.pageYOffset - document.documentElement.clientTop)\n };\n }\n var location = WINDOW.location;\n var REGEXP_ORIGINS = /^(\\w+:)\\/\\/([^:/?#]*):?(\\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 */\n function isCrossOriginURL(url) {\n var parts = url.match(REGEXP_ORIGINS);\n return parts !== null && (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 */\n function addTimestamp(url) {\n var timestamp = \"timestamp=\".concat(new Date().getTime());\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 */\n function getTransforms(_ref) {\n var rotate = _ref.rotate,\n scaleX = _ref.scaleX,\n scaleY = _ref.scaleY,\n translateX = _ref.translateX,\n translateY = _ref.translateY;\n var values = [];\n if (isNumber(translateX) && translateX !== 0) {\n values.push(\"translateX(\".concat(translateX, \"px)\"));\n }\n if (isNumber(translateY) && translateY !== 0) {\n values.push(\"translateY(\".concat(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(\".concat(rotate, \"deg)\"));\n }\n if (isNumber(scaleX) && scaleX !== 1) {\n values.push(\"scaleX(\".concat(scaleX, \")\"));\n }\n if (isNumber(scaleY) && scaleY !== 1) {\n values.push(\"scaleY(\".concat(scaleY, \")\"));\n }\n var transform = values.length ? values.join(' ') : 'none';\n return {\n WebkitTransform: transform,\n msTransform: transform,\n transform: transform\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 */\n function getMaxZoomRatio(pointers) {\n var pointers2 = _objectSpread2({}, pointers);\n var maxRatio = 0;\n forEach(pointers, function (pointer, pointerId) {\n delete pointers2[pointerId];\n forEach(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 if (Math.abs(ratio) > Math.abs(maxRatio)) {\n maxRatio = ratio;\n }\n });\n });\n return maxRatio;\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 */\n function getPointer(_ref2, endOnly) {\n var pageX = _ref2.pageX,\n pageY = _ref2.pageY;\n var end = {\n endX: pageX,\n endY: pageY\n };\n return endOnly ? end : _objectSpread2({\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 */\n function getPointersCenter(pointers) {\n var pageX = 0;\n var pageY = 0;\n var count = 0;\n forEach(pointers, function (_ref3) {\n var startX = _ref3.startX,\n startY = _ref3.startY;\n pageX += startX;\n pageY += startY;\n count += 1;\n });\n pageX /= count;\n pageY /= count;\n return {\n pageX: pageX,\n pageY: pageY\n };\n }\n\n /**\n * Get the max sizes in a rectangle under the given aspect ratio.\n * @param {Object} data - The original sizes.\n * @param {string} [type='contain'] - The adjust type.\n * @returns {Object} The result sizes.\n */\n function getAdjustedSizes(_ref4) {\n var aspectRatio = _ref4.aspectRatio,\n height = _ref4.height,\n width = _ref4.width;\n var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'contain';\n var isValidWidth = isPositiveNumber(width);\n var isValidHeight = isPositiveNumber(height);\n if (isValidWidth && isValidHeight) {\n var adjustedWidth = height * aspectRatio;\n if (type === 'contain' && adjustedWidth > width || type === 'cover' && adjustedWidth < width) {\n height = width / aspectRatio;\n } else {\n width = height * aspectRatio;\n }\n } else if (isValidWidth) {\n height = width / aspectRatio;\n } else if (isValidHeight) {\n width = height * aspectRatio;\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 */\n function getRotatedSizes(_ref5) {\n var width = _ref5.width,\n height = _ref5.height,\n degree = _ref5.degree;\n degree = Math.abs(degree) % 180;\n if (degree === 90) {\n return {\n width: height,\n height: width\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 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 */\n function getSourceCanvas(image, _ref6, _ref7, _ref8) {\n var imageAspectRatio = _ref6.aspectRatio,\n imageNaturalWidth = _ref6.naturalWidth,\n imageNaturalHeight = _ref6.naturalHeight,\n _ref6$rotate = _ref6.rotate,\n rotate = _ref6$rotate === void 0 ? 0 : _ref6$rotate,\n _ref6$scaleX = _ref6.scaleX,\n scaleX = _ref6$scaleX === void 0 ? 1 : _ref6$scaleX,\n _ref6$scaleY = _ref6.scaleY,\n scaleY = _ref6$scaleY === void 0 ? 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 === void 0 ? 'transparent' : _ref8$fillColor,\n _ref8$imageSmoothingE = _ref8.imageSmoothingEnabled,\n imageSmoothingEnabled = _ref8$imageSmoothingE === void 0 ? true : _ref8$imageSmoothingE,\n _ref8$imageSmoothingQ = _ref8.imageSmoothingQuality,\n imageSmoothingQuality = _ref8$imageSmoothingQ === void 0 ? 'low' : _ref8$imageSmoothingQ,\n _ref8$maxWidth = _ref8.maxWidth,\n maxWidth = _ref8$maxWidth === void 0 ? Infinity : _ref8$maxWidth,\n _ref8$maxHeight = _ref8.maxHeight,\n maxHeight = _ref8$maxHeight === void 0 ? Infinity : _ref8$maxHeight,\n _ref8$minWidth = _ref8.minWidth,\n minWidth = _ref8$minWidth === void 0 ? 0 : _ref8$minWidth,\n _ref8$minHeight = _ref8.minHeight,\n minHeight = _ref8$minHeight === void 0 ? 0 : _ref8$minHeight;\n var canvas = document.createElement('canvas');\n var context = canvas.getContext('2d');\n var maxSizes = getAdjustedSizes({\n aspectRatio: aspectRatio,\n width: maxWidth,\n height: maxHeight\n });\n var minSizes = getAdjustedSizes({\n aspectRatio: aspectRatio,\n width: minWidth,\n height: minHeight\n }, 'cover');\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\n // Note: should always use image's natural sizes for drawing as\n // imageData.naturalWidth === canvasData.naturalHeight when rotate % 180 === 90\n var destMaxSizes = getAdjustedSizes({\n aspectRatio: imageAspectRatio,\n width: maxWidth,\n height: maxHeight\n });\n var destMinSizes = getAdjustedSizes({\n aspectRatio: imageAspectRatio,\n width: minWidth,\n height: minHeight\n }, 'cover');\n var destWidth = Math.min(destMaxSizes.width, Math.max(destMinSizes.width, imageNaturalWidth));\n var destHeight = Math.min(destMaxSizes.height, Math.max(destMinSizes.height, imageNaturalHeight));\n var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight];\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 var 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 function getStringFromCharCode(dataView, start, length) {\n var str = '';\n length += start;\n for (var i = start; i < length; i += 1) {\n str += fromCharCode(dataView.getUint8(i));\n }\n return str;\n }\n var 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 */\n function 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 forEach(uint8, function (value, i) {\n uint8[i] = binary.charCodeAt(i);\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 */\n function arrayBufferToDataURL(arrayBuffer, mimeType) {\n var chunks = [];\n\n // Chunk Typed Array for better performance (#435)\n var chunkSize = 8192;\n var uint8 = new Uint8Array(arrayBuffer);\n while (uint8.length > 0) {\n // XXX: Babel's `toConsumableArray` helper will throw error in IE or Safari 9\n // eslint-disable-next-line prefer-spread\n chunks.push(fromCharCode.apply(null, toArray(uint8.subarray(0, chunkSize))));\n uint8 = uint8.subarray(chunkSize);\n }\n return \"data:\".concat(mimeType, \";base64,\").concat(btoa(chunks.join('')));\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 */\n function resetAndGetOrientation(arrayBuffer) {\n var dataView = new DataView(arrayBuffer);\n var orientation;\n\n // Ignores range error when the image does not have correct Exif information\n try {\n var littleEndian;\n var app1Start;\n var ifdStart;\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 while (offset + 1 < length) {\n if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {\n app1Start = offset;\n break;\n }\n offset += 1;\n }\n }\n if (app1Start) {\n var exifIDCode = app1Start + 4;\n var tiffOffset = app1Start + 10;\n if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {\n var endianness = dataView.getUint16(tiffOffset);\n littleEndian = endianness === 0x4949;\n if (littleEndian || endianness === 0x4D4D /* bigEndian */) {\n if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {\n var firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);\n if (firstIFDOffset >= 0x00000008) {\n ifdStart = tiffOffset + firstIFDOffset;\n }\n }\n }\n }\n }\n if (ifdStart) {\n var _length = dataView.getUint16(ifdStart, littleEndian);\n var _offset;\n var i;\n for (i = 0; i < _length; i += 1) {\n _offset = ifdStart + i * 12 + 2;\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 } catch (error) {\n orientation = 1;\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 */\n function parseOrientation(orientation) {\n var rotate = 0;\n var scaleX = 1;\n var scaleY = 1;\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 return {\n rotate: rotate,\n scaleX: scaleX,\n scaleY: scaleY\n };\n }\n\n var render = {\n render: function render() {\n this.initContainer();\n this.initCanvas();\n this.initCropBox();\n this.renderCanvas();\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 var minWidth = Number(options.minContainerWidth);\n var minHeight = Number(options.minContainerHeight);\n addClass(cropper, CLASS_HIDDEN);\n removeClass(element, CLASS_HIDDEN);\n var containerData = {\n width: Math.max(container.offsetWidth, minWidth >= 0 ? minWidth : MIN_CONTAINER_WIDTH),\n height: Math.max(container.offsetHeight, minHeight >= 0 ? minHeight : MIN_CONTAINER_HEIGHT)\n };\n this.containerData = containerData;\n setStyle(cropper, {\n width: containerData.width,\n height: containerData.height\n });\n addClass(element, CLASS_HIDDEN);\n removeClass(cropper, CLASS_HIDDEN);\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 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 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 var canvasData = {\n aspectRatio: aspectRatio,\n naturalWidth: naturalWidth,\n naturalHeight: naturalHeight,\n width: canvasWidth,\n height: canvasHeight\n };\n this.canvasData = canvasData;\n this.limited = viewMode === 1 || viewMode === 2;\n this.limitCanvas(true, true);\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 canvasData.left = (containerData.width - canvasData.width) / 2;\n canvasData.top = (containerData.height - canvasData.height) / 2;\n canvasData.oldLeft = canvasData.left;\n canvasData.oldTop = canvasData.top;\n this.initialCanvasData = assign({}, 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 var cropped = this.cropped && cropBoxData;\n if (sizeLimited) {\n var minCanvasWidth = Number(options.minCanvasWidth) || 0;\n var minCanvasHeight = Number(options.minCanvasHeight) || 0;\n if (viewMode > 1) {\n minCanvasWidth = Math.max(minCanvasWidth, containerData.width);\n minCanvasHeight = Math.max(minCanvasHeight, containerData.height);\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 if (minCanvasHeight * aspectRatio > minCanvasWidth) {\n minCanvasWidth = minCanvasHeight * aspectRatio;\n } else {\n minCanvasHeight = minCanvasWidth / aspectRatio;\n }\n }\n }\n var _getAdjustedSizes = getAdjustedSizes({\n aspectRatio: aspectRatio,\n width: minCanvasWidth,\n height: minCanvasHeight\n });\n minCanvasWidth = _getAdjustedSizes.width;\n minCanvasHeight = _getAdjustedSizes.height;\n canvasData.minWidth = minCanvasWidth;\n canvasData.minHeight = minCanvasHeight;\n canvasData.maxWidth = Infinity;\n canvasData.maxHeight = Infinity;\n }\n if (positionLimited) {\n if (viewMode > (cropped ? 0 : 1)) {\n var newCanvasLeft = containerData.width - canvasData.width;\n var newCanvasTop = containerData.height - canvasData.height;\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 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 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 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 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 var width = canvasData.width * (naturalWidth / canvasData.naturalWidth);\n var height = canvasData.height * (naturalHeight / canvasData.naturalHeight);\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 if (canvasData.width > canvasData.maxWidth || canvasData.width < canvasData.minWidth) {\n canvasData.left = canvasData.oldLeft;\n }\n if (canvasData.height > canvasData.maxHeight || canvasData.height < canvasData.minHeight) {\n canvasData.top = canvasData.oldTop;\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 this.limitCanvas(false, true);\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 setStyle(this.canvas, assign({\n width: canvasData.width,\n height: canvasData.height\n }, getTransforms({\n translateX: canvasData.left,\n translateY: canvasData.top\n })));\n this.renderImage(changed);\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 var width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth);\n var height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight);\n assign(imageData, {\n width: width,\n height: height,\n left: (canvasData.width - width) / 2,\n top: (canvasData.height - height) / 2\n });\n setStyle(this.image, assign({\n width: imageData.width,\n height: imageData.height\n }, getTransforms(assign({\n translateX: imageData.left,\n translateY: imageData.top\n }, imageData))));\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 || options.initialAspectRatio;\n var autoCropArea = Number(options.autoCropArea) || 0.8;\n var cropBoxData = {\n width: canvasData.width,\n height: canvasData.height\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 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 this.initialCropBoxData = assign({}, 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 if (sizeLimited) {\n var minCropBoxWidth = Number(options.minCropBoxWidth) || 0;\n var minCropBoxHeight = Number(options.minCropBoxHeight) || 0;\n var maxCropBoxWidth = limited ? Math.min(containerData.width, canvasData.width, canvasData.width + canvasData.left, containerData.width - canvasData.left) : containerData.width;\n var maxCropBoxHeight = limited ? Math.min(containerData.height, canvasData.height, canvasData.height + canvasData.top, containerData.height - canvasData.top) : 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 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 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 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 if (cropBoxData.width > cropBoxData.maxWidth || cropBoxData.width < cropBoxData.minWidth) {\n cropBoxData.left = cropBoxData.oldLeft;\n }\n if (cropBoxData.height > cropBoxData.maxHeight || cropBoxData.height < cropBoxData.minHeight) {\n cropBoxData.top = cropBoxData.oldTop;\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 this.limitCropBox(false, true);\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 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 setStyle(this.cropBox, assign({\n width: cropBoxData.width,\n height: cropBoxData.height\n }, getTransforms({\n translateX: cropBoxData.left,\n translateY: cropBoxData.top\n })));\n if (this.cropped && this.limited) {\n this.limitCanvas(true, true);\n }\n if (!this.disabled) {\n this.output();\n }\n },\n output: function output() {\n this.preview();\n dispatchEvent(this.element, EVENT_CROP, this.getData());\n }\n };\n\n var preview = {\n initPreview: function initPreview() {\n var element = this.element,\n crossOrigin = this.crossOrigin;\n var preview = this.options.preview;\n var url = crossOrigin ? this.crossOriginUrl : this.url;\n var alt = element.alt || 'The image to preview';\n var image = document.createElement('img');\n if (crossOrigin) {\n image.crossOrigin = crossOrigin;\n }\n image.src = url;\n image.alt = alt;\n this.viewBox.appendChild(image);\n this.viewBoxImage = image;\n if (!preview) {\n return;\n }\n var previews = preview;\n if (typeof preview === 'string') {\n previews = element.ownerDocument.querySelectorAll(preview);\n } else if (preview.querySelector) {\n previews = [preview];\n }\n this.previews = previews;\n forEach(previews, function (el) {\n var img = document.createElement('img');\n\n // Save the original size for recover\n setData(el, DATA_PREVIEW, {\n width: el.offsetWidth,\n height: el.offsetHeight,\n html: el.innerHTML\n });\n if (crossOrigin) {\n img.crossOrigin = crossOrigin;\n }\n img.src = url;\n img.alt = alt;\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 el.innerHTML = '';\n el.appendChild(img);\n });\n },\n resetPreview: function resetPreview() {\n forEach(this.previews, function (element) {\n var data = getData(element, DATA_PREVIEW);\n setStyle(element, {\n width: data.width,\n height: data.height\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 var left = cropBoxData.left - canvasData.left - imageData.left;\n var top = cropBoxData.top - canvasData.top - imageData.top;\n if (!this.cropped || this.disabled) {\n return;\n }\n setStyle(this.viewBoxImage, assign({\n width: width,\n height: height\n }, getTransforms(assign({\n translateX: -left,\n translateY: -top\n }, imageData))));\n forEach(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 if (cropBoxWidth) {\n ratio = originalWidth / cropBoxWidth;\n newHeight = cropBoxHeight * ratio;\n }\n if (cropBoxHeight && newHeight > originalHeight) {\n ratio = originalHeight / cropBoxHeight;\n newWidth = cropBoxWidth * ratio;\n newHeight = originalHeight;\n }\n setStyle(element, {\n width: newWidth,\n height: newHeight\n });\n setStyle(element.getElementsByTagName('img')[0], assign({\n width: width * ratio,\n height: height * ratio\n }, getTransforms(assign({\n translateX: -left * ratio,\n translateY: -top * ratio\n }, imageData))));\n });\n }\n };\n\n var events = {\n bind: function bind() {\n var element = this.element,\n options = this.options,\n cropper = this.cropper;\n if (isFunction(options.cropstart)) {\n addListener(element, EVENT_CROP_START, options.cropstart);\n }\n if (isFunction(options.cropmove)) {\n addListener(element, EVENT_CROP_MOVE, options.cropmove);\n }\n if (isFunction(options.cropend)) {\n addListener(element, EVENT_CROP_END, options.cropend);\n }\n if (isFunction(options.crop)) {\n addListener(element, EVENT_CROP, options.crop);\n }\n if (isFunction(options.zoom)) {\n addListener(element, EVENT_ZOOM, options.zoom);\n }\n addListener(cropper, EVENT_POINTER_DOWN, this.onCropStart = this.cropStart.bind(this));\n if (options.zoomable && options.zoomOnWheel) {\n addListener(cropper, EVENT_WHEEL, this.onWheel = this.wheel.bind(this), {\n passive: false,\n capture: true\n });\n }\n if (options.toggleDragModeOnDblclick) {\n addListener(cropper, EVENT_DBLCLICK, this.onDblclick = this.dblclick.bind(this));\n }\n addListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove = this.cropMove.bind(this));\n addListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd = this.cropEnd.bind(this));\n if (options.responsive) {\n addListener(window, EVENT_RESIZE, this.onResize = this.resize.bind(this));\n }\n },\n unbind: function unbind() {\n var element = this.element,\n options = this.options,\n cropper = this.cropper;\n if (isFunction(options.cropstart)) {\n removeListener(element, EVENT_CROP_START, options.cropstart);\n }\n if (isFunction(options.cropmove)) {\n removeListener(element, EVENT_CROP_MOVE, options.cropmove);\n }\n if (isFunction(options.cropend)) {\n removeListener(element, EVENT_CROP_END, options.cropend);\n }\n if (isFunction(options.crop)) {\n removeListener(element, EVENT_CROP, options.crop);\n }\n if (isFunction(options.zoom)) {\n removeListener(element, EVENT_ZOOM, options.zoom);\n }\n removeListener(cropper, EVENT_POINTER_DOWN, this.onCropStart);\n if (options.zoomable && options.zoomOnWheel) {\n removeListener(cropper, EVENT_WHEEL, this.onWheel, {\n passive: false,\n capture: true\n });\n }\n if (options.toggleDragModeOnDblclick) {\n removeListener(cropper, EVENT_DBLCLICK, this.onDblclick);\n }\n removeListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove);\n removeListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd);\n if (options.responsive) {\n removeListener(window, EVENT_RESIZE, this.onResize);\n }\n }\n };\n\n var handlers = {\n resize: function resize() {\n if (this.disabled) {\n return;\n }\n var options = this.options,\n container = this.container,\n containerData = this.containerData;\n var ratioX = container.offsetWidth / containerData.width;\n var ratioY = container.offsetHeight / containerData.height;\n var ratio = Math.abs(ratioX - 1) > Math.abs(ratioY - 1) ? ratioX : ratioY;\n\n // Resize when width changed or height changed\n if (ratio !== 1) {\n var canvasData;\n var cropBoxData;\n if (options.restore) {\n canvasData = this.getCanvasData();\n cropBoxData = this.getCropBoxData();\n }\n this.render();\n if (options.restore) {\n this.setCanvasData(forEach(canvasData, function (n, i) {\n canvasData[i] = n * ratio;\n }));\n this.setCropBoxData(forEach(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 this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP);\n },\n wheel: function wheel(event) {\n var _this = this;\n var ratio = Number(this.options.wheelZoomRatio) || 0.1;\n var delta = 1;\n if (this.disabled) {\n return;\n }\n event.preventDefault();\n\n // Limit wheel speed to prevent zoom too fast (#21)\n if (this.wheeling) {\n return;\n }\n this.wheeling = true;\n setTimeout(function () {\n _this.wheeling = false;\n }, 50);\n if (event.deltaY) {\n delta = event.deltaY > 0 ? 1 : -1;\n } else if (event.wheelDelta) {\n delta = -event.wheelDelta / 120;\n } else if (event.detail) {\n delta = event.detail > 0 ? 1 : -1;\n }\n this.zoom(-delta * ratio, event);\n },\n cropStart: function cropStart(event) {\n var buttons = event.buttons,\n button = event.button;\n if (this.disabled\n\n // Handle mouse event and pointer event and ignore touch event\n || (event.type === 'mousedown' || event.type === 'pointerdown' && event.pointerType === 'mouse') && (\n // No primary button (Usually the left button)\n isNumber(buttons) && buttons !== 1 || isNumber(button) && button !== 0\n\n // Open context menu\n || event.ctrlKey)) {\n return;\n }\n var options = this.options,\n pointers = this.pointers;\n var action;\n if (event.changedTouches) {\n // Handle touch event\n forEach(event.changedTouches, function (touch) {\n pointers[touch.identifier] = getPointer(touch);\n });\n } else {\n // Handle mouse event and pointer event\n pointers[event.pointerId || 0] = getPointer(event);\n }\n if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) {\n action = ACTION_ZOOM;\n } else {\n action = getData(event.target, DATA_ACTION);\n }\n if (!REGEXP_ACTIONS.test(action)) {\n return;\n }\n if (dispatchEvent(this.element, EVENT_CROP_START, {\n originalEvent: event,\n action: action\n }) === false) {\n return;\n }\n\n // This line is required for preventing page zooming in iOS browsers\n event.preventDefault();\n this.action = action;\n this.cropping = false;\n if (action === ACTION_CROP) {\n this.cropping = true;\n addClass(this.dragBox, CLASS_MODAL);\n }\n },\n cropMove: function cropMove(event) {\n var action = this.action;\n if (this.disabled || !action) {\n return;\n }\n var pointers = this.pointers;\n event.preventDefault();\n if (dispatchEvent(this.element, EVENT_CROP_MOVE, {\n originalEvent: event,\n action: action\n }) === false) {\n return;\n }\n if (event.changedTouches) {\n forEach(event.changedTouches, function (touch) {\n // The first parameter should not be undefined (#432)\n assign(pointers[touch.identifier] || {}, getPointer(touch, true));\n });\n } else {\n assign(pointers[event.pointerId || 0] || {}, getPointer(event, true));\n }\n this.change(event);\n },\n cropEnd: function cropEnd(event) {\n if (this.disabled) {\n return;\n }\n var action = this.action,\n pointers = this.pointers;\n if (event.changedTouches) {\n forEach(event.changedTouches, function (touch) {\n delete pointers[touch.identifier];\n });\n } else {\n delete pointers[event.pointerId || 0];\n }\n if (!action) {\n return;\n }\n event.preventDefault();\n if (!Object.keys(pointers).length) {\n this.action = '';\n }\n if (this.cropping) {\n this.cropping = false;\n toggleClass(this.dragBox, CLASS_MODAL, this.cropped && this.options.modal);\n }\n dispatchEvent(this.element, EVENT_CROP_END, {\n originalEvent: event,\n action: action\n });\n }\n };\n\n var change = {\n change: function change(event) {\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 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;\n\n // Locking aspect ratio in \"free mode\" by holding shift key\n if (!aspectRatio && event.shiftKey) {\n aspectRatio = width && height ? width / height : 1;\n }\n if (this.limited) {\n minLeft = cropBoxData.minLeft;\n minTop = cropBoxData.minTop;\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 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 break;\n case ACTION_WEST:\n if (left + range.x < minLeft) {\n range.x = minLeft - left;\n }\n break;\n case ACTION_NORTH:\n if (top + range.y < minTop) {\n range.y = minTop - top;\n }\n break;\n case ACTION_SOUTH:\n if (bottom + range.y > maxHeight) {\n range.y = maxHeight - bottom;\n }\n break;\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 check(ACTION_EAST);\n width += range.x;\n if (width < 0) {\n action = ACTION_WEST;\n width = -width;\n left -= width;\n }\n if (aspectRatio) {\n height = width / aspectRatio;\n top += (cropBoxData.height - height) / 2;\n }\n break;\n case ACTION_NORTH:\n if (range.y <= 0 && (top <= minTop || aspectRatio && (left <= minLeft || right >= maxWidth))) {\n renderable = false;\n break;\n }\n check(ACTION_NORTH);\n height -= range.y;\n top += range.y;\n if (height < 0) {\n action = ACTION_SOUTH;\n height = -height;\n top -= height;\n }\n if (aspectRatio) {\n width = height * aspectRatio;\n left += (cropBoxData.width - width) / 2;\n }\n break;\n case ACTION_WEST:\n if (range.x <= 0 && (left <= minLeft || aspectRatio && (top <= minTop || bottom >= maxHeight))) {\n renderable = false;\n break;\n }\n check(ACTION_WEST);\n width -= range.x;\n left += range.x;\n if (width < 0) {\n action = ACTION_EAST;\n width = -width;\n left -= width;\n }\n if (aspectRatio) {\n height = width / aspectRatio;\n top += (cropBoxData.height - height) / 2;\n }\n break;\n case ACTION_SOUTH:\n if (range.y >= 0 && (bottom >= maxHeight || aspectRatio && (left <= minLeft || right >= maxWidth))) {\n renderable = false;\n break;\n }\n check(ACTION_SOUTH);\n height += range.y;\n if (height < 0) {\n action = ACTION_NORTH;\n height = -height;\n top -= height;\n }\n if (aspectRatio) {\n width = height * aspectRatio;\n left += (cropBoxData.width - width) / 2;\n }\n break;\n case ACTION_NORTH_EAST:\n if (aspectRatio) {\n if (range.y <= 0 && (top <= minTop || right >= maxWidth)) {\n renderable = false;\n break;\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 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 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 if (width < 0 && height < 0) {\n action = ACTION_SOUTH_WEST;\n height = -height;\n width = -width;\n top -= height;\n left -= width;\n } else if (width < 0) {\n action = ACTION_NORTH_WEST;\n width = -width;\n left -= width;\n } else if (height < 0) {\n action = ACTION_SOUTH_EAST;\n height = -height;\n top -= height;\n }\n break;\n case ACTION_NORTH_WEST:\n if (aspectRatio) {\n if (range.y <= 0 && (top <= minTop || left <= minLeft)) {\n renderable = false;\n break;\n }\n check(ACTION_NORTH);\n height -= range.y;\n top += range.y;\n width = height * aspectRatio;\n left += cropBoxData.width - width;\n } else {\n check(ACTION_NORTH);\n check(ACTION_WEST);\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 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 if (width < 0 && height < 0) {\n action = ACTION_SOUTH_EAST;\n height = -height;\n width = -width;\n top -= height;\n left -= width;\n } else if (width < 0) {\n action = ACTION_NORTH_EAST;\n width = -width;\n left -= width;\n } else if (height < 0) {\n action = ACTION_SOUTH_WEST;\n height = -height;\n top -= height;\n }\n break;\n case ACTION_SOUTH_WEST:\n if (aspectRatio) {\n if (range.x <= 0 && (left <= minLeft || bottom >= maxHeight)) {\n renderable = false;\n break;\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 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 if (range.y >= 0) {\n if (bottom < maxHeight) {\n height += range.y;\n }\n } else {\n height += range.y;\n }\n }\n if (width < 0 && height < 0) {\n action = ACTION_NORTH_EAST;\n height = -height;\n width = -width;\n top -= height;\n left -= width;\n } else if (width < 0) {\n action = ACTION_SOUTH_EAST;\n width = -width;\n left -= width;\n } else if (height < 0) {\n action = ACTION_NORTH_WEST;\n height = -height;\n top -= height;\n }\n break;\n case ACTION_SOUTH_EAST:\n if (aspectRatio) {\n if (range.x >= 0 && (right >= maxWidth || bottom >= maxHeight)) {\n renderable = false;\n break;\n }\n check(ACTION_EAST);\n width += range.x;\n height = width / aspectRatio;\n } else {\n check(ACTION_SOUTH);\n check(ACTION_EAST);\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 if (range.y >= 0) {\n if (bottom < maxHeight) {\n height += range.y;\n }\n } else {\n height += range.y;\n }\n }\n if (width < 0 && height < 0) {\n action = ACTION_NORTH_WEST;\n height = -height;\n width = -width;\n top -= height;\n left -= width;\n } else if (width < 0) {\n action = ACTION_SOUTH_WEST;\n width = -width;\n left -= width;\n } else if (height < 0) {\n action = ACTION_NORTH_EAST;\n height = -height;\n top -= height;\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), event);\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 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 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 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 if (this.limited) {\n this.limitCropBox(true, true);\n }\n }\n break;\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 forEach(pointers, function (p) {\n p.startX = p.endX;\n p.startY = p.endY;\n });\n }\n };\n\n var methods = {\n // Show the crop box manually\n crop: function crop() {\n if (this.ready && !this.cropped && !this.disabled) {\n this.cropped = true;\n this.limitCropBox(true, true);\n if (this.options.modal) {\n addClass(this.dragBox, CLASS_MODAL);\n }\n removeClass(this.cropBox, CLASS_HIDDEN);\n this.setCropBoxData(this.initialCropBoxData);\n }\n return this;\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 = assign({}, this.initialImageData);\n this.canvasData = assign({}, this.initialCanvasData);\n this.cropBoxData = assign({}, this.initialCropBoxData);\n this.renderCanvas();\n if (this.cropped) {\n this.renderCropBox();\n }\n }\n return this;\n },\n // Clear the crop box\n clear: function clear() {\n if (this.cropped && !this.disabled) {\n assign(this.cropBoxData, {\n left: 0,\n top: 0,\n width: 0,\n height: 0\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 return this;\n },\n /**\n * Replace the image's src and rebuild the cropper\n * @param {string} url - The new URL.\n * @param {boolean} [hasSameSize] - Indicate if the new image has the same size as the old one.\n * @returns {Cropper} this\n */\n replace: function replace(url) {\n var hasSameSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n if (!this.disabled && url) {\n if (this.isImg) {\n this.element.src = url;\n }\n if (hasSameSize) {\n this.url = url;\n this.image.src = url;\n if (this.ready) {\n this.viewBoxImage.src = url;\n forEach(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 this.options.data = null;\n this.uncreate();\n this.load(url);\n }\n }\n return this;\n },\n // Enable (unfreeze) the cropper\n enable: function enable() {\n if (this.ready && this.disabled) {\n this.disabled = false;\n removeClass(this.cropper, CLASS_DISABLED);\n }\n return this;\n },\n // Disable (freeze) the cropper\n disable: function disable() {\n if (this.ready && !this.disabled) {\n this.disabled = true;\n addClass(this.cropper, CLASS_DISABLED);\n }\n return this;\n },\n /**\n * Destroy the cropper and remove the instance from the image\n * @returns {Cropper} this\n */\n destroy: function destroy() {\n var element = this.element;\n if (!element[NAMESPACE]) {\n return this;\n }\n element[NAMESPACE] = undefined;\n if (this.isImg && this.replaced) {\n element.src = this.originalUrl;\n }\n this.uncreate();\n return this;\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=offsetX] - The relative offset distance on the y-axis.\n * @returns {Cropper} this\n */\n move: function move(offsetX) {\n var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : offsetX;\n var _this$canvasData = this.canvasData,\n left = _this$canvasData.left,\n top = _this$canvasData.top;\n return this.moveTo(isUndefined(offsetX) ? offsetX : left + Number(offsetX), isUndefined(offsetY) ? offsetY : top + Number(offsetY));\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 {Cropper} 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 var changed = false;\n x = Number(x);\n y = Number(y);\n if (this.ready && !this.disabled && this.options.movable) {\n if (isNumber(x)) {\n canvasData.left = x;\n changed = true;\n }\n if (isNumber(y)) {\n canvasData.top = y;\n changed = true;\n }\n if (changed) {\n this.renderCanvas(true);\n }\n }\n return this;\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 {Cropper} this\n */\n zoom: function zoom(ratio, _originalEvent) {\n var canvasData = this.canvasData;\n ratio = Number(ratio);\n if (ratio < 0) {\n ratio = 1 / (1 - ratio);\n } else {\n ratio = 1 + ratio;\n }\n return this.zoomTo(canvasData.width * ratio / canvasData.naturalWidth, null, _originalEvent);\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 {Cropper} 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 ratio = Number(ratio);\n if (ratio >= 0 && this.ready && !this.disabled && options.zoomable) {\n var newWidth = naturalWidth * ratio;\n var newHeight = naturalHeight * ratio;\n if (dispatchEvent(this.element, EVENT_ZOOM, {\n ratio: ratio,\n oldRatio: width / naturalWidth,\n originalEvent: _originalEvent\n }) === false) {\n return this;\n }\n if (_originalEvent) {\n var pointers = this.pointers;\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 canvasData.width = newWidth;\n canvasData.height = newHeight;\n this.renderCanvas(true);\n }\n return this;\n },\n /**\n * Rotate the canvas with a relative degree\n * @param {number} degree - The rotate degree.\n * @returns {Cropper} this\n */\n rotate: function rotate(degree) {\n return this.rotateTo((this.imageData.rotate || 0) + Number(degree));\n },\n /**\n * Rotate the canvas to an absolute degree\n * @param {number} degree - The rotate degree.\n * @returns {Cropper} this\n */\n rotateTo: function rotateTo(degree) {\n degree = Number(degree);\n if (isNumber(degree) && this.ready && !this.disabled && this.options.rotatable) {\n this.imageData.rotate = degree % 360;\n this.renderCanvas(true, true);\n }\n return this;\n },\n /**\n * Scale the image on the x-axis.\n * @param {number} scaleX - The scale ratio on the x-axis.\n * @returns {Cropper} this\n */\n scaleX: function scaleX(_scaleX) {\n var scaleY = this.imageData.scaleY;\n return this.scale(_scaleX, isNumber(scaleY) ? scaleY : 1);\n },\n /**\n * Scale the image on the y-axis.\n * @param {number} scaleY - The scale ratio on the y-axis.\n * @returns {Cropper} this\n */\n scaleY: function scaleY(_scaleY) {\n var scaleX = this.imageData.scaleX;\n return this.scale(isNumber(scaleX) ? scaleX : 1, _scaleY);\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 {Cropper} 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 var transformed = false;\n scaleX = Number(scaleX);\n scaleY = Number(scaleY);\n if (this.ready && !this.disabled && this.options.scalable) {\n if (isNumber(scaleX)) {\n imageData.scaleX = scaleX;\n transformed = true;\n }\n if (isNumber(scaleY)) {\n imageData.scaleY = scaleY;\n transformed = true;\n }\n if (transformed) {\n this.renderCanvas(true, true);\n }\n }\n return this;\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() {\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 var data;\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 var ratio = imageData.width / imageData.naturalWidth;\n forEach(data, function (n, i) {\n data[i] = n / ratio;\n });\n if (rounded) {\n // In case rounding off leads to extra 1px in right or bottom border\n // we should round the top-left corner and the dimension (#343).\n var bottom = Math.round(data.y + data.height);\n var right = Math.round(data.x + data.width);\n data.x = Math.round(data.x);\n data.y = Math.round(data.y);\n data.width = right - data.x;\n data.height = bottom - data.y;\n }\n } else {\n data = {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n };\n }\n if (options.rotatable) {\n data.rotate = imageData.rotate || 0;\n }\n if (options.scalable) {\n data.scaleX = imageData.scaleX || 1;\n data.scaleY = imageData.scaleY || 1;\n }\n return data;\n },\n /**\n * Set the cropped area position and size with new data\n * @param {Object} data - The new data.\n * @returns {Cropper} this\n */\n setData: function setData(data) {\n var options = this.options,\n imageData = this.imageData,\n canvasData = this.canvasData;\n var cropBoxData = {};\n if (this.ready && !this.disabled && isPlainObject(data)) {\n var transformed = false;\n if (options.rotatable) {\n if (isNumber(data.rotate) && data.rotate !== imageData.rotate) {\n imageData.rotate = data.rotate;\n transformed = true;\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 if (isNumber(data.scaleY) && data.scaleY !== imageData.scaleY) {\n imageData.scaleY = data.scaleY;\n transformed = true;\n }\n }\n if (transformed) {\n this.renderCanvas(true, true);\n }\n var ratio = imageData.width / imageData.naturalWidth;\n if (isNumber(data.x)) {\n cropBoxData.left = data.x * ratio + canvasData.left;\n }\n if (isNumber(data.y)) {\n cropBoxData.top = data.y * ratio + canvasData.top;\n }\n if (isNumber(data.width)) {\n cropBoxData.width = data.width * ratio;\n }\n if (isNumber(data.height)) {\n cropBoxData.height = data.height * ratio;\n }\n this.setCropBoxData(cropBoxData);\n }\n return this;\n },\n /**\n * Get the container size data.\n * @returns {Object} The result container data.\n */\n getContainerData: function getContainerData() {\n return this.ready ? assign({}, this.containerData) : {};\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.sized ? assign({}, this.imageData) : {};\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 var data = {};\n if (this.ready) {\n forEach(['left', 'top', 'width', 'height', 'naturalWidth', 'naturalHeight'], function (n) {\n data[n] = canvasData[n];\n });\n }\n return data;\n },\n /**\n * Set the canvas position and size with new data.\n * @param {Object} data - The new canvas data.\n * @returns {Cropper} this\n */\n setCanvasData: function setCanvasData(data) {\n var canvasData = this.canvasData;\n var aspectRatio = canvasData.aspectRatio;\n if (this.ready && !this.disabled && isPlainObject(data)) {\n if (isNumber(data.left)) {\n canvasData.left = data.left;\n }\n if (isNumber(data.top)) {\n canvasData.top = data.top;\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 this.renderCanvas(true);\n }\n return this;\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 var data;\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 return data || {};\n },\n /**\n * Set the crop box position and size with new data.\n * @param {Object} data - The new crop box data.\n * @returns {Cropper} this\n */\n setCropBoxData: function setCropBoxData(data) {\n var cropBoxData = this.cropBoxData;\n var aspectRatio = this.options.aspectRatio;\n var widthChanged;\n var heightChanged;\n if (this.ready && this.cropped && !this.disabled && isPlainObject(data)) {\n if (isNumber(data.left)) {\n cropBoxData.left = data.left;\n }\n if (isNumber(data.top)) {\n cropBoxData.top = data.top;\n }\n if (isNumber(data.width) && data.width !== cropBoxData.width) {\n widthChanged = true;\n cropBoxData.width = data.width;\n }\n if (isNumber(data.height) && data.height !== cropBoxData.height) {\n heightChanged = true;\n cropBoxData.height = data.height;\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 this.renderCropBox();\n }\n return this;\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 if (!this.ready || !window.HTMLCanvasElement) {\n return null;\n }\n var canvasData = this.canvasData;\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 var _this$getData = this.getData(options.rounded),\n initialX = _this$getData.x,\n initialY = _this$getData.y,\n initialWidth = _this$getData.width,\n initialHeight = _this$getData.height;\n var ratio = source.width / Math.floor(canvasData.naturalWidth);\n if (ratio !== 1) {\n initialX *= ratio;\n initialY *= ratio;\n initialWidth *= ratio;\n initialHeight *= ratio;\n }\n var aspectRatio = initialWidth / initialHeight;\n var maxSizes = getAdjustedSizes({\n aspectRatio: aspectRatio,\n width: options.maxWidth || Infinity,\n height: options.maxHeight || Infinity\n });\n var minSizes = getAdjustedSizes({\n aspectRatio: aspectRatio,\n width: options.minWidth || 0,\n height: options.minHeight || 0\n }, 'cover');\n var _getAdjustedSizes = getAdjustedSizes({\n aspectRatio: aspectRatio,\n width: options.width || (ratio !== 1 ? source.width : initialWidth),\n height: options.height || (ratio !== 1 ? source.height : initialHeight)\n }),\n width = _getAdjustedSizes.width,\n height = _getAdjustedSizes.height;\n width = Math.min(maxSizes.width, Math.max(minSizes.width, width));\n height = Math.min(maxSizes.height, Math.max(minSizes.height, height));\n var canvas = document.createElement('canvas');\n var context = canvas.getContext('2d');\n canvas.width = normalizeDecimalNumber(width);\n canvas.height = normalizeDecimalNumber(height);\n context.fillStyle = options.fillColor || 'transparent';\n context.fillRect(0, 0, width, height);\n var _options$imageSmoothi = options.imageSmoothingEnabled,\n imageSmoothingEnabled = _options$imageSmoothi === void 0 ? true : _options$imageSmoothi,\n imageSmoothingQuality = options.imageSmoothingQuality;\n context.imageSmoothingEnabled = imageSmoothingEnabled;\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 = initialX;\n var srcY = initialY;\n var srcWidth;\n var srcHeight;\n\n // Destination canvas parameters\n var dstX;\n var dstY;\n var dstWidth;\n var dstHeight;\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 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 var params = [srcX, srcY, srcWidth, srcHeight];\n\n // Avoid \"IndexSizeError\"\n if (dstWidth > 0 && dstHeight > 0) {\n var scale = width / initialWidth;\n params.push(dstX * scale, dstY * scale, dstWidth * scale, dstHeight * scale);\n }\n\n // All the numerical parameters should be integer for `drawImage`\n // https://github.com/fengyuanchen/cropper/issues/476\n context.drawImage.apply(context, [source].concat(_toConsumableArray(params.map(function (param) {\n return Math.floor(normalizeDecimalNumber(param));\n }))));\n return canvas;\n },\n /**\n * Change the aspect ratio of the crop box.\n * @param {number} aspectRatio - The new aspect ratio.\n * @returns {Cropper} this\n */\n setAspectRatio: function setAspectRatio(aspectRatio) {\n var options = this.options;\n if (!this.disabled && !isUndefined(aspectRatio)) {\n // 0 -> NaN\n options.aspectRatio = Math.max(0, aspectRatio) || NaN;\n if (this.ready) {\n this.initCropBox();\n if (this.cropped) {\n this.renderCropBox();\n }\n }\n }\n return this;\n },\n /**\n * Change the drag mode.\n * @param {string} mode - The new drag mode.\n * @returns {Cropper} this\n */\n setDragMode: function setDragMode(mode) {\n var options = this.options,\n dragBox = this.dragBox,\n face = this.face;\n if (this.ready && !this.disabled) {\n var croppable = mode === DRAG_MODE_CROP;\n var movable = options.movable && mode === DRAG_MODE_MOVE;\n mode = croppable || movable ? mode : DRAG_MODE_NONE;\n options.dragMode = mode;\n setData(dragBox, DATA_ACTION, mode);\n toggleClass(dragBox, CLASS_CROP, croppable);\n toggleClass(dragBox, CLASS_MOVE, movable);\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 return this;\n }\n };\n\n var AnotherCropper = WINDOW.Cropper;\n var Cropper = /*#__PURE__*/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 if (!element || !REGEXP_TAG_NAME.test(element.tagName)) {\n throw new Error('The first argument is required and must be an ' + '' + '
' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
' + '