' +\n '
' +\n '
' +\n '
');\n\n $wrapper.find('.modaljs-modals-container').append($modal);\n\n $wrapper.find('.modaljs').scroll(function () {\n $(window).trigger('resize');\n });\n\n this.$modal = $modal;\n this.classname = '';\n\n this.cancelHandler = null;\n\n $(window).resize(function () {\n _this.fixPosition();\n });\n\n $('body').on('imagerResize', function () {\n _this.fixPosition();\n });\n };\n\n Modal.prototype.setTitle = function (title) {\n this.$modal.find('header').html(title);\n };\n\n Modal.prototype.setTemplate = function (template) {\n this.$modal.find('.modaljs-template-container').append($(template));\n };\n\n Modal.prototype.fixPosition = function () {\n if ($wrapper.find('.modaljs').length < 1) {\n return;\n }\n\n var headerHeight = $wrapper.find('.modaljs > header')\n [0].getBoundingClientRect().height;\n var bodyHeight = $wrapper.find('.modaljs > .modaljs-template-container')\n [0].getBoundingClientRect().height;\n var footerHeight = $wrapper.find('.modaljs > footer')\n [0].getBoundingClientRect().height;\n\n var fullContentHeight = headerHeight + bodyHeight + footerHeight;\n\n if ($(window).height() <= fullContentHeight) {\n $wrapper.addClass('fullheight');\n } else {\n $wrapper.removeClass('fullheight');\n }\n };\n\n Modal.prototype.addCancelButton = function (buttonText, handler) {\n var _this = this;\n\n _this.cancelHandler = handler;\n\n var $button = $('
').text(buttonText);\n $button.on('click', function () {\n _this.hide();\n if (_this.cancelHandler) {\n _this.cancelHandler();\n }\n });\n\n _this.$modal.find('footer').append($button);\n\n _this._fixButtonsSize();\n };\n\n Modal.prototype.addClass = function (classname) {\n this.classname += ' ' + classname;\n this.$modal.addClass(classname);\n };\n\n Modal.prototype.addActionButton = function (buttonText, handler) {\n var _this = this;\n\n var $button = $('
')\n .addClass('modaljs-action-button')\n .text(buttonText);\n\n $button.on('click', function () {\n var handlerResponse = handler();\n if (handlerResponse === undefined && handlerResponse !== false) {\n _this.hide();\n }\n });\n\n _this.$modal.find('footer').append($button);\n\n _this._fixButtonsSize();\n };\n\n Modal.prototype._fixButtonsSize = function () {\n var $buttons = this.$modal.find('footer button');\n $buttons.css('width', (100 / $buttons.length) + '%');\n };\n\n Modal.prototype.show = function () {\n var _this = this;\n\n $overlay.addClass(this.classname);\n\n $overlay.removeClass('hidden-add-end');\n $overlay.removeClass('hidden');\n $overlay.css('height', $('body').height());\n $overlay.on('click', function () {\n _this.hide();\n if (_this.cancelHandler) {\n _this.cancelHandler();\n }\n });\n\n $wrapper.removeClass('hidden');\n\n this.$modal.removeClass('hidden');\n\n var bodyWidthBefore = $body.width();\n this.overflowBefore = $body.css('overflow');\n\n $body.css('overflow', 'hidden');\n this.widthDiff = $body.width() - bodyWidthBefore;\n this.paddingBefore = $body.css('padding-right');\n\n $body.css('padding-right', this.widthDiff + 'px');\n };\n\n Modal.prototype.hide = function () {\n $overlay.removeClass(this.classname);\n\n $overlay.addClass('hidden');\n setTimeout(function () {\n $overlay.addClass('hidden-add-end');\n }, 400);\n\n $overlay.off('click');\n\n $wrapper.addClass('hidden');\n this.$modal.addClass('hidden');\n\n $body.css('overflow', this.overflowBefore);\n $body.css('padding-right', this.paddingBefore);\n };\n\n Modal.prototype.remove = function () {\n this.$modal.remove();\n this.cancelHandler = false;\n };\n\n namespace.Modal = Modal;\n})(jQuery, window);","(function ($, namespace, util) {\n var Toolbar = function ToolbarPlugin(options) {\n var _this = this;\n\n options = options || {};\n\n var defaultOptions = {\n tooltipEnabled: true,\n tooltipCss: null\n };\n\n _this.options = $.extend(defaultOptions, options);\n\n _this.$toolbar = $('
')\n .attr('contenteditable', 'false')\n .addClass('noselect')\n .addClass('toolbar-topLeft');\n\n _this.tooltips = [];\n _this.buttonsGroups = {};\n };\n\n Toolbar.prototype.getElement = function () {\n return this.$toolbar;\n };\n\n Toolbar.prototype.addButton = function (className, iconClass,\n tooltipText, clickHandler) {\n var $button = this.createButton(className, iconClass, clickHandler);\n\n this.$toolbar.append($button);\n this.createTooltip($button.find('a'), className, tooltipText, 'bottom');\n\n return $button;\n };\n\n Toolbar.prototype.createButton = function (className, iconClass,\n clickHandler) {\n var _this = this;\n\n var $button = $(\n '
' +\n '' +\n ' ' +\n ' ').addClass(className);\n\n util.bindClick($button.find('a'), 'imager-button', function () {\n return clickHandler(_this);\n });\n\n return $button;\n };\n\n /**\n * Add a button to this toolbar. Button will be appended to group.\n * Group is a one button which will show dropdown with its buttons on click.\n *\n * @param className {String} Add specified class to button's
element.\n * @param iconClass {String} Add specified class to button's element.\n * @param tooltipText {String} Tooltip text that will be shown on mouse over.\n * @param group {Object} Group object with group class name and tooltip text\n * @param group.name {String} Group unique id\n * @param group.tooltip {String} A tooltip text that will be shown on mouse over\n * @param clickHandler {Function} function that will be invoked\n * when user clicks on this button.\n */\n Toolbar.prototype.addButtonToGroup = function (className, iconClass,\n tooltipText, group,\n clickHandler) {\n var $groupContainer = null;\n if (!this.buttonsGroups[group.name]) {\n $groupContainer = $(\n '' +\n '' +\n ' ' +\n '' +\n ' ');\n\n this.buttonsGroups[group.name] = $groupContainer;\n this.$toolbar.append($groupContainer);\n\n util.bindClick($groupContainer.children('a'),\n 'drawer-toolbar-group-button', function () {\n $groupContainer.find('ul.group-items-container').toggleClass('hidden');\n }\n );\n\n this.createTooltip(\n $groupContainer.children('a'), group.name, group.tooltip, 'bottom'\n );\n }\n\n $groupContainer = this.buttonsGroups[group.name];\n\n var $button = this.createButton(className, iconClass,\n function (clickEvent) {\n $groupContainer.find('ul.group-items-container').toggleClass('hidden');\n\n clickHandler(clickEvent);\n\n $groupContainer.attr('class', $button.attr('class'))\n .addClass('btn-group');\n $groupContainer.children('a')\n .attr('class', $button.children('a').attr('class'));\n $groupContainer.children('a')\n .html($button.children('a').html());\n });\n\n $groupContainer.find('.group-items-container').append($button);\n\n this.createTooltip($button.find('a'),\n className + ' group-item', tooltipText, 'right');\n\n return $button;\n };\n\n\n Toolbar.prototype.createTooltip = function ($button, className, title,\n align) {\n if (!this.options.tooltipEnabled) {\n return;\n }\n\n var $tooltip = $('')\n .addClass('toolbar-tooltip tooltip-' + className)\n .html(title);\n\n $tooltip.appendTo('body');\n this.tooltips.push($tooltip);\n\n if (this.options.tooltipCss) {\n $tooltip.css(this.options.tooltipCss);\n }\n\n $button.on('mouseenter', function () {\n if ($(this).hasClass('disabled')) return;\n\n var btnPos = $button.offset();\n var btnHeight = $button.innerHeight();\n var btnWidth = $button.innerWidth();\n\n $tooltip.addClass('active');\n\n var top = 0;\n var left = 0;\n\n switch (align) {\n case 'right':\n top = btnPos.top + (($button.height() - $tooltip.outerHeight()) / 2);\n left = btnPos.left + btnWidth;\n break;\n default:\n top = (btnPos.top + btnHeight);\n left = (btnPos.left + btnWidth / 2 - $tooltip.innerWidth() / 2);\n break;\n }\n $tooltip.css({\n top: top + 'px',\n left: left + 'px'\n });\n });\n\n $button.on('mouseout', function () {\n $tooltip.removeClass('active');\n });\n };\n\n Toolbar.prototype.setActiveButton = function (buttonClassName) {\n this.$toolbar.find('li.' + buttonClassName).children('a').addClass('active');\n };\n\n Toolbar.prototype.clearActiveButton = function () {\n this.$toolbar.find('li').children('a').removeClass('active');\n };\n\n Toolbar.prototype.remove = function () {\n if (this.$toolbar) {\n this.$toolbar.remove();\n this.$toolbar = null;\n }\n\n if (this.tooltips) {\n this.tooltips.map(function ($tooltip) {\n $tooltip.remove();\n $tooltip = null;\n return null;\n });\n this.tooltips = null;\n }\n };\n\n namespace.Toolbar = Toolbar;\n\n})(jQuery, window, ImagerJs.util);","(function ($, translations, namespace) {\n /**\n *\n * Provides a select that could be used to change imager quality.\n *\n * @param imagerInstance\n * @constructor\n *\n */\n var QualitySelector = function (imagerInstance, options) {\n var _this = this;\n\n _this.defaultOptions = {\n sizes: [\n {label: 'Original', scale: 1, quality: 1.0, percentage: 100},\n {label: 'Large', scale: 0.5, quality: 0.5, percentage: 50},\n {label: 'Medium', scale: 0.2, quality: 0.2, percentage: 20},\n {label: 'Small', scale: 0.05, quality: 0.05, percentage: 5}\n ],\n allowCustomSetting: true\n };\n\n options = options ? options : {};\n _this.options = $.extend(true, _this.defaultOptions, options);\n \n if (_this.options.allowCustomSetting) {\n _this.options.sizes.push(\n { label: 'Custom' }\n ); \n }\n \n _this.imager = imagerInstance;\n\n _this.$qualitySelector = $(\n ''\n )\n .addClass('hidden');\n\n _this.$qualitySelector.find('input.imager-quality-custom')\n .change(function () {\n var customQuality = parseInt($(this).val());\n\n _this.imager.quality = customQuality / 100;\n _this.imager.targetScale = customQuality / 100;\n _this.imager.render();\n\n var size = _this.imager.getDataSize() / 1024;\n var sizeText = Math.round(size) + ' ' + translations.t('KB');\n _this.$qualitySelector.find('.size-in-kb').text(sizeText);\n });\n\n _this.$qualitySelector.find('select').on('change', function () {\n var value = parseInt($(this).val());\n\n var selectedQuality = _this.options.sizes[value];\n\n if (selectedQuality === null || selectedQuality === undefined) {\n selectedQuality = _this.options.sizes[0];\n }\n\n if (selectedQuality.label == 'Custom') {\n _this.$qualitySelector.find('form.custom-quality').removeClass('hidden');\n _this.$qualitySelector.addClass('custom-quality-visible');\n _this.imager.$imageElement.addClass('custom-quality-visible');\n } else {\n _this.$qualitySelector.find('form.custom-quality').addClass('hidden');\n _this.$qualitySelector.removeClass('custom-quality-visible');\n _this.imager.$imageElement.removeClass('custom-quality-visible');\n }\n\n $('body').trigger('imagerResize');\n\n _this.imager.adjustEditContainer();\n\n _this.imager.quality = selectedQuality.quality ? selectedQuality.quality : 0.5;\n _this.imager.targetScale = selectedQuality.scale ? selectedQuality.scale : 0.5;\n _this.imager.render();\n });\n };\n\n QualitySelector.prototype.getElement = function () {\n return this.$qualitySelector;\n };\n\n QualitySelector.prototype.update = function () {\n var selected = this.$qualitySelector.find('option:selected').val();\n this.$qualitySelector.find('option').remove();\n\n for (var i = 0; i < this.options.sizes.length; i++) {\n var s = this.options.sizes[i];\n\n var label = translations.t(s.label);\n\n if (s.percentage !== undefined) {\n this.imager.quality = s.quality;\n this.imager.targetScale = s.scale;\n this.imager.render();\n\n var size = this.imager.getDataSize() / 1024;\n\n label += ' - ' + Math.round(size) + ' ' + translations.t('KB') +\n ' (' + s.percentage + '%)';\n }\n\n var $swatch = $(\n '' +\n label +\n ' ');\n\n this.$qualitySelector.find('select').append($swatch);\n }\n\n if (selected) {\n this.$qualitySelector.find('select').val(selected);\n } else {\n this.$qualitySelector.find('select').val(0);\n }\n\n this.$qualitySelector.find('select').trigger('change');\n };\n\n QualitySelector.prototype.val = function () {\n this.$qualitySelector.find('select')\n .val.apply(this.$qualitySelector, arguments);\n };\n\n QualitySelector.prototype.show = function () {\n this.$qualitySelector.removeClass('hidden');\n };\n\n QualitySelector.prototype.hide = function () {\n this.$qualitySelector.addClass('hidden');\n };\n\n namespace.ImagerQualitySelector = QualitySelector;\n\n})(jQuery, ImagerJs.translations, window);","(function ($, namespace) {\n namespace.set = function(strings){\n strings = strings ? strings : {};\n namespace.translations = $.extend(true, namespace.translations, strings);\n };\n\n namespace.translations = {\n 'Incorrect file type': 'Incorrect file type',\n 'Insert': 'Insert',\n 'Cancel': 'Cancel',\n 'Add image': 'Add image',\n 'Quality': 'Quality',\n\n 'Rotate': 'Rotate',\n 'Crop': 'Crop',\n\n 'Original': 'Original',\n 'KB': 'KB',\n 'Large': 'Large',\n 'Medium': 'Medium',\n 'Small': 'Small',\n 'Custom quality percent': 'Custom quality percent',\n 'Custom': 'Custom',\n\n 'Image properties': 'Image properties',\n 'Size:': 'Size:',\n 'width in px': 'width in px',\n 'height in px': 'height in px',\n 'Left': 'Left',\n 'Right': 'Right',\n 'Center': 'Center',\n 'Inline': 'Inline',\n 'Floating': 'Floating',\n 'Transparent background': 'Transparent background',\n 'Apply': 'Apply',\n 'Reject': 'Reject',\n 'Delete image': 'Delete image',\n 'Move image': 'Move image',\n 'Are you sure want to delete this image?': 'Are you sure want to delete this image?',\n 'Or drop files here': 'Or drop files here',\n 'No file selected.': 'No file selected.',\n 'Please wait...': 'Please wait...',\n 'Save': 'Save',\n 'Undo': 'Undo',\n 'Rotate manually': 'Rotate manually',\n 'Rotate 90 left': 'Rotate 90° left',\n 'Rotate 90 right': 'Rotate 90° left',\n\n 'Image is too big and could cause very poor performance.': 'Image is too big and could cause very poor performance.'\n };\n\n namespace.t = function (textString) {\n if (namespace.translations[textString]) {\n return namespace.translations[textString];\n } else {\n console.warn('String not found in texts:' + textString);\n return textString;\n }\n };\n})(jQuery, ImagerJs.translations);","(function ($, namespace, pluginsCatalog, util, translations) {\n var imagerInstances = [];\n\n var PLATFORM = {\n ios: 'ios',\n android: 'android',\n windowsMobile: 'windowsMobile',\n genericMobile: 'genericMobile'\n };\n\n /**\n *\n * @param $imageElement \n * {\n * \"background\": \"url(assets/transparent.png)\"\n * }\n * \n * {\n * \"border\": \"1px dashed green\"\n * }\n * true or false.\n * true means that touch device is detected and ImagerJs should\n * adjust its toolbar size, add touch events etc.\n * function() { return false; } url(path/to/cursor.cur), default } Image data base64 string\n */\n Imager.prototype.fixImageSizeAndRotation = function ($image) {\n // first of all we need to avoid HUGE problems that safari has when displaying\n // images that have exif orientation other than 1.\n // So first step is to remove any exif data from image.\n // Since we can do that only on base64 string - here we check whether our image is a base64\n // encoded string. If yes - we can start right away. If not, we need to download it as data first using\n // XMLHttpRequest.\n\n var _this = this;\n var deferred = $.Deferred();\n\n var imageSrc = $image.attr('src');\n\n if(imageSrc.length < 1) {\n return $.when('');\n }\n else if (imageSrc.indexOf('data:image') === 0) {\n return this._fixBase64ImageSizeAndRotation(imageSrc);\n } else if (imageSrc.indexOf('http') === 0) {\n var xhr = new XMLHttpRequest();\n xhr.responseType = 'blob';\n xhr.onload = function () {\n var reader = new FileReader();\n reader.onloadend = function () {\n _this._fixBase64ImageSizeAndRotation(reader.result)\n .then(function (imageData) {\n deferred.resolve(imageData);\n });\n };\n reader.onerror = function (err) {\n deferred.reject(err);\n };\n reader.readAsDataURL(xhr.response);\n };\n xhr.open('GET', imageSrc);\n xhr.send();\n return deferred.promise();\n } else {\n console.error('Unsupported image `src`!');\n return $.when('');\n }\n };\n\n /**\n * Base64 image data could contain EXIF data which causes\n * @param imageBase64Data\n * @returns {*}\n * @private\n */\n Imager.prototype._fixBase64ImageSizeAndRotation = function (imageBase64Data) {\n var _this = this;\n var deferred = $.Deferred();\n\n var imageFormat = _this.getImageFormat(_this.$imageElement.attr('src'));\n\n if(imageFormat === 'jpeg' || imageFormat === 'jpg') {\n // first of all - get rid of any rotation in exif\n this.originalExif = piexif.load(imageBase64Data);\n var originalOrientation = this.originalExif['0th'][piexif.ImageIFD.Orientation];\n this.originalExif['0th'][piexif.ImageIFD.Orientation] = 1;\n imageBase64Data = piexif.insert(piexif.dump(this.originalExif), imageBase64Data);\n }\n\n var image = document.createElement('img');\n image.onload = imageLoaded;\n image.src = imageBase64Data;\n\n function imageLoaded() {\n var canvas = document.createElement('canvas');\n canvas.width = image.naturalWidth;\n canvas.height = image.naturalHeight;\n\n var ctx = canvas.getContext('2d');\n\n if(imageFormat === 'jpeg' || imageFormat === 'jpg') {\n switch (originalOrientation) {\n case 2:\n // horizontal flip\n ctx.translate(canvas.width, 0);\n ctx.scale(-1, 1);\n break;\n case 3:\n // 180° rotate left\n ctx.translate(canvas.width, canvas.height);\n ctx.rotate(Math.PI);\n break;\n case 4:\n // vertical flip\n ctx.translate(0, canvas.height);\n ctx.scale(1, -1);\n break;\n case 5:\n // vertical flip + 90 rotate right\n canvas.width = image.naturalHeight;\n canvas.height = image.naturalWidth;\n\n ctx.rotate(0.5 * Math.PI);\n ctx.scale(1, -1);\n break;\n case 6:\n // 90° rotate right and flip canvas width and height\n canvas.width = image.naturalHeight;\n canvas.height = image.naturalWidth;\n\n ctx.translate(canvas.width, 0);\n ctx.rotate(0.5 * Math.PI);\n break;\n case 7:\n // horizontal flip + 90 rotate right\n\n canvas.width = image.naturalHeight;\n canvas.height = image.naturalWidth;\n\n ctx.rotate(0.5 * Math.PI);\n ctx.translate(canvas.width, -canvas.height);\n ctx.scale(-1, 1);\n break;\n case 8:\n // 90° rotate left\n canvas.width = image.naturalHeight;\n canvas.height = image.naturalWidth;\n\n ctx.rotate(-0.5 * Math.PI);\n ctx.translate(-canvas.width, 0);\n break;\n }\n }\n\n ctx.drawImage(image, 0, 0);\n\n if (canvas.width > _this.options.maxImageWidth) {\n var newWidth = _this.options.maxImageWidth;\n\n var scalePercent = _this.options.maxImageWidth * 100 / canvas.width;\n\n var newHeight = scalePercent * canvas.height / 100;\n\n _this.log('Image is bigger than we could handle, resizing to', newWidth, newHeight);\n\n util.resizeImage(canvas,\n canvas.width, canvas.height, newWidth, newHeight);\n }\n\n deferred.resolve(canvas.toDataURL(_this.options.format));\n }\n\n return deferred.promise();\n };\n\n Imager.prototype.startSelector = function () {\n var _this = this;\n\n this.$selectorContainer = $(\n '
'\n );\n\n var onImagerReady = function () {\n _this.off('ready', onImagerReady);\n\n _this.startEditing();\n _this.$selectorContainer.remove();\n _this.$selectorContainer = null;\n };\n\n var onImageLoad = function () {\n _this.$imageElement.off('load', onImageLoad);\n\n _this.handleImageElementSrcChanged();\n _this.on('ready', onImagerReady);\n };\n\n var fileSelector = new util.FileSelector('image/*');\n fileSelector.onFileSelected(function (file) {\n util.setWaiting(_this.$selectorContainer, translations.t('Please wait...'));\n\n setTimeout(function () {\n _this.$imageElement.attr('src', file.data);\n _this.$imageElement.css('height', 'auto');\n _this.$imageElement.css('min-height', 'inherit');\n _this.$imageElement.css('min-width', 'inherit');\n\n _this.$imageElement.on('load', onImageLoad);\n }, 200);\n });\n\n this.$selectorContainer.append(fileSelector.getElement());\n\n $('body').append(this.$selectorContainer);\n\n var imageOffset = this.$imageElement.offset();\n\n this.$selectorContainer.css({\n left: imageOffset.left,\n top: imageOffset.top,\n width: this.$imageElement.width(),\n height: this.$imageElement.height()\n });\n };\n\n Imager.prototype.startEditing = function () {\n this.log('startEditing()');\n\n this.hideOriginalImage();\n\n if (!this.$imageElement[0].complete) {\n throw new Error('Trying to start editing image that was not yet loaded. ' +\n 'Please add `ready` event listener to imager.');\n }\n\n this.originalPreviewWidth = this.$imageElement.width();\n this.originalPreviewHeight = this.$imageElement.height();\n\n this.$editContainer = $(\n '
'\n );\n\n if (this.options.editModeCss) {\n this.$editContainer.css(this.options.editModeCss);\n }\n\n $('body').append(this.$editContainer);\n\n this._createEditCanvas();\n\n this.adjustEditContainer();\n\n this.trigger('editStart');\n\n this.render();\n\n this._isInEditMode = true;\n\n this.$editContainer.focus();\n\n var sizeInBytes = this.getDataSize();\n if (sizeInBytes > this.options.imageSizeForPerformanceWarning) {\n util.setOverlayMessage(\n this.$editContainer,\n 'Image is too big and could cause very poor performance.',\n 'default',\n 'Ok',\n function () {\n util.removeOverlayMessage(this.$editContainer);\n }.bind(this));\n }\n\n this._adjustElementsSize('toolbar-button',\n this.touchDevice ?\n this.options.toolbarButtonSizeTouch :\n this.options.toolbarButtonSize\n );\n\n // clean up the history\n if (this.history.length === 0) {\n this.commitChanges('Original');\n }\n\n this.trigger('historyChange');\n };\n\n Imager.prototype.stopEditing = function () {\n if (!this._isInEditMode) {\n return;\n }\n\n this.showOriginalImage();\n\n this.render();\n\n var pluginsDataRaw = this.invokePluginsMethod('serialize');\n var pluginsData = {};\n $(pluginsDataRaw).each(function (i, d) {\n pluginsData[d.name] = d.result;\n });\n\n var imageData = null;\n\n try {\n imageData = this.canvas.toDataURL('image/' + this.options.format, this.quality);\n } catch (err) {\n if (err.name && err.name === 'SecurityError') {\n console.error('Failed to get image data from canvas because of security error.' +\n 'Usually this happens when image drawed on canvas is located on separate domain without' +\n 'proper access-control headers.');\n } else {\n console.error(err);\n }\n }\n\n if (!imageData) {\n console.error('Failed to get image data from canvas.');\n }\n\n // save current changes to image\n this.$imageElement.attr('src', imageData);\n\n this.$editContainer.remove();\n this.$editContainer = null;\n\n this.canvas = null;\n this.tempCanvas = null;\n\n this.trigger('editStop', {imageData: imageData, pluginsData: pluginsData});\n\n this._isInEditMode = false;\n };\n\n /**\n * Change the container's z-index property.\n *\n * @param zIndexValue\n */\n Imager.prototype.setZindex = function (zIndexValue) {\n if (this.$editContainer) {\n this.$editContainer.css('z-index', zIndexValue);\n }\n };\n\n /**\n * Stores current image to history, then renders current canvas into image.\n *\n * @param operationMessage\n */\n Imager.prototype.commitChanges = function (operationMessage, callback) {\n var _this = this;\n\n var originalQuality = this.quality;\n var originalTargetScale = this.targetScale;\n\n this.quality = 1;\n this.targetScale = 1;\n this.adjustCanvasSize();\n this.render();\n\n // save current canvas image to image element\n var imageData = this.canvas.toDataURL('image/' + this.options.format, 100);\n\n // set image loading handlers\n this.$imageElement.on('load', imageLoadHandler);\n this.$imageElement.on('error', onImageLoadError);\n\n // load image\n this.$imageElement.attr('src', imageData);\n\n function imageLoadHandler() {\n _this.$imageElement.off('load', imageLoadHandler);\n\n _this.quality = originalQuality;\n _this.targetScale = originalTargetScale;\n _this.adjustCanvasSize();\n\n _this.history.push({\n message: operationMessage,\n image: imageData,\n width: _this.$imageElement.width(),\n height: _this.$imageElement.height()\n });\n\n _this.originalPreviewWidth = _this.$imageElement.width();\n _this.originalPreviewHeight = _this.$imageElement.height();\n\n _this.render();\n _this.trigger('historyChange');\n\n if (callback && (callback instanceof Function)) {\n callback();\n }\n }\n\n function onImageLoadError(event) {\n console.warn('commitChanges() : image failed to load :', event);\n console.trace();\n }\n };\n\n Imager.prototype.isInEditMode = function () {\n return this._isInEditMode;\n };\n\n /**\n * Creates canvas for showing temporary edited image.\n * Created temporary canvas for drawing temporary data by plugins etc.\n *\n * Those canvases could be accessed as this.canvas and this.tempCanvas.\n *\n * @private\n */\n Imager.prototype._createEditCanvas = function () {\n var imageWidth = this.$imageElement.width();\n var imageHeight = this.$imageElement.height();\n\n var imageNaturalWidth = this.$imageElement[0].naturalWidth;\n var imageNaturalHeight = this.$imageElement[0].naturalHeight;\n\n var $canvas = $('');\n $canvas.css({\n width: imageWidth,\n height: imageHeight\n });\n\n this.canvas = $canvas[0];\n\n this.adjustCanvasSize();\n\n this.$editContainer.append($canvas);\n\n this.tempCanvas = document.createElement('canvas');\n this.tempCanvas.width = imageNaturalWidth;\n this.tempCanvas.height = imageNaturalHeight;\n\n if (this.showTemporaryCanvas) {\n $('body').append(this.tempCanvas);\n $(this.tempCanvas).css({\n position: 'absolute',\n left: '50px',\n top: '50px',\n width: imageWidth\n });\n }\n };\n\n /**\n * Renders image on temporary canvas and then invokes plugin methods\n * that shoul modify image.\n *\n * @param [ctx] Context on which to draw image.\n */\n Imager.prototype.render = function (ctx) {\n ctx = ctx !== undefined ? ctx : this.canvas.getContext('2d');\n\n var realWidth = this.$imageElement[0].naturalWidth;\n var realHeight = this.$imageElement[0].naturalHeight;\n\n if (realWidth === 0 || realHeight === 0) {\n console.warn('Trying to render canvas with zero width or height');\n console.trace();\n return;\n }\n\n // reset canvas size to image natural size\n ctx.canvas.width = realWidth * this.targetScale;\n ctx.canvas.height = realHeight * this.targetScale;\n\n this.tempCanvas.width = realWidth;\n this.tempCanvas.height = realHeight;\n\n var destWidth = ctx.canvas.width;\n var destHeight = ctx.canvas.height;\n\n var viewPort = {\n sourceLeft: 0,\n sourceTop: 0,\n sourceWidth: realWidth,\n sourceHeight: realHeight,\n destLeft: 0,\n destTop: 0,\n destWidth: destWidth,\n destHeight: destHeight,\n paddingWidth: 0,\n paddingHeight: 0\n };\n\n this.drawImage(this.$imageElement, ctx, viewPort);\n\n this.invokePluginsMethod('render', ctx);\n };\n\n Imager.prototype.clearCanvas = function (ctx) {\n ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n\n if (this.options.format == 'jpeg') {\n ctx.fillStyle = \"#FFFFFF\"; // jpeg does not support transparency\n // so without this line all non painted areas will be black.\n ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n }\n };\n\n Imager.prototype.drawImage = function ($img, ctx, viewPort) {\n if (ctx.canvas.width === 0 || ctx.canvas.height === 0) {\n console.warn('Imager.drawImage() : Trying to render canvas with either width or height equal to 0');\n return;\n }\n\n this._drawWithScaling($img, ctx, this.tempCanvas.getContext('2d'),\n viewPort.sourceLeft, viewPort.sourceTop,\n viewPort.sourceWidth, viewPort.sourceHeight,\n\n viewPort.destLeft, viewPort.destTop,\n viewPort.destWidth, viewPort.destHeight,\n\n viewPort.paddingWidth, viewPort.paddingHeight\n );\n };\n\n /**\n * Draws image on canvas with specified dimensions.\n * Drawing is performed in few steps to make image smooth.\n *\n * More information about interpolation here:\n * http://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing\n *\n * @param {HTMLImageElement} $img Image to draw\n * @param ctx Canvas context to draw on\n * @param tempCtx Temporary canvas context to draw on interpolation steps\n * @param sourceLeft Source image x coordinate\n * @param sourceTop Source image y coordinate\n * @param sourceWidth Source image width\n * @param sourceHeight Source image height\n * @param destLeft Destination image x coordinate\n * @param destTop Destination image y coordinate\n * @param destWidth Destination image width\n * @param destHeight Destination image height\n * @param paddingWidth Width padding that will be applied to target image\n * @param paddingHeight Height padding that will be applied to target image\n * @private\n */\n Imager.prototype._drawWithScaling = function ($img, ctx, tempCtx,\n sourceLeft, sourceTop,\n sourceWidth, sourceHeight,\n destLeft, destTop,\n destWidth, destHeight,\n paddingWidth, paddingHeight) {\n\n paddingWidth = paddingWidth !== undefined ? paddingWidth : 0;\n paddingHeight = paddingHeight !== undefined ? paddingHeight : 0;\n\n sourceLeft = sourceLeft !== undefined ? sourceLeft : 0;\n sourceTop = sourceTop !== undefined ? sourceTop : 0;\n\n var paddingWidthHalf = paddingWidth / 2;\n var paddingHeightHalf = paddingHeight / 2;\n\n var tempCanvas = tempCtx.canvas;\n\n tempCtx.clearRect(0, 0, sourceWidth, sourceHeight);\n\n var img = $img[0];\n\n var steps = 3;\n\n var step = 0.5;\n\n var currentStepWidth = sourceWidth;\n var currentStepHeight = sourceHeight;\n\n var currentStepSourceLeft = sourceLeft;\n var currentStepSourceTop = sourceTop;\n\n tempCtx.drawImage(img,\n currentStepSourceLeft, currentStepSourceTop,\n sourceWidth, sourceHeight,\n 0, 0, currentStepWidth, currentStepHeight);\n\n for (var s = 0; s < steps; s++) {\n if (currentStepWidth <= destWidth * 2 ||\n currentStepHeight <= destHeight * 2) {\n break;\n }\n\n var prevStepWidth = currentStepWidth;\n var prevStepHeight = currentStepHeight;\n\n currentStepWidth *= step;\n currentStepHeight *= step;\n\n currentStepSourceLeft *= step;\n currentStepSourceTop *= step;\n\n var stepTempCanvas = document.createElement('canvas');\n stepTempCanvas.width = tempCtx.canvas.width;\n stepTempCanvas.height = tempCtx.canvas.height;\n\n var stepTempCtx = stepTempCanvas.getContext('2d');\n stepTempCtx.clearRect(0, 0, stepTempCanvas.width, stepTempCanvas.height);\n\n stepTempCtx.drawImage(tempCanvas,\n currentStepSourceLeft, currentStepSourceTop, prevStepWidth, prevStepHeight,\n 0, 0, currentStepWidth, currentStepHeight);\n\n tempCtx.clearRect(0, 0, tempCtx.canvas.width, tempCtx.canvas.height);\n\n tempCtx.drawImage(stepTempCanvas,\n 0, 0, currentStepWidth, currentStepHeight,\n 0, 0, currentStepWidth, currentStepHeight\n );\n }\n\n ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n\n ctx.drawImage(tempCanvas,\n 0, 0, currentStepWidth, currentStepHeight,\n destLeft + paddingWidthHalf, destTop + paddingHeightHalf,\n destWidth - paddingWidth, destHeight - paddingHeight\n );\n };\n\n /**\n * Sets preview area dimensions.\n * Note that this affects only the size of image that user sees.\n * Internal image size is not affected.\n *\n * @param {number} width\n * @param {number} height\n */\n Imager.prototype.setPreviewSize = function (width, height) {\n this.$imageElement.css({\n width: width,\n height: height\n });\n\n $(this.canvas).css({\n width: width,\n height: height\n });\n\n $('body').trigger('imagerResize');\n this.log('resize trigger');\n\n this.originalPreviewWidth = this.$imageElement.width();\n this.originalPreviewHeight = this.$imageElement.height();\n };\n\n Imager.prototype.getPreviewSize = function () {\n return {\n width: this.$imageElement.width(),\n height: this.$imageElement.height()\n };\n };\n\n Imager.prototype.getImageRealSize = function () {\n return {\n width: this.$imageElement[0].naturalWidth,\n height: this.$imageElement[0].naturalHeight\n };\n };\n\n Imager.prototype.getCanvasSize = function () {\n return {\n width: this.canvas.width,\n height: this.canvas.height\n };\n };\n\n Imager.prototype.convertScale = function (value, sourceMax, targetMax) {\n var valueInPercents = value * 100 / sourceMax;\n\n return valueInPercents * targetMax / 100;\n };\n\n Imager.prototype.hideOriginalImage = function () {\n this.$imageElement.css('opacity', 0);\n };\n\n Imager.prototype.showOriginalImage = function () {\n this.$imageElement.css('opacity', 1);\n };\n\n /**\n * Takes image's real size (naturalWidth & naturalHeight)\n * and adjust canvas size to match that\n * but with respect to aspect ratio of preview viewport size.\n */\n Imager.prototype.adjustCanvasSize = function () {\n var imageRealSize = this.getImageRealSize();\n var previewSize = this.getPreviewSize();\n\n var newCanvasWidth = 0;\n var newCanvasHeight = 0;\n\n var aspectRatio = 0;\n\n if (previewSize.width > previewSize.height) {\n newCanvasWidth = imageRealSize.width;\n\n aspectRatio = previewSize.height * 100 / previewSize.width;\n newCanvasHeight = aspectRatio * newCanvasWidth / 100;\n }\n else {\n newCanvasHeight = imageRealSize.height;\n\n aspectRatio = previewSize.width * 100 / previewSize.height;\n newCanvasWidth = aspectRatio * newCanvasHeight / 100;\n }\n\n this.canvas.width = newCanvasWidth * this.targetScale;\n this.canvas.height = newCanvasHeight * this.targetScale;\n\n // if canvas size limit is set - check canvas size\n this.canvasSizeLimit = 1 * 1024 * 1024;\n if (this.canvasSizeLimit) {\n if (this.canvas.width * this.canvas.height > this.canvasSizeLimit) {\n console.warn('adjustCanvasSize(): canvas size is too big : ', this.canvas.width, this.canvas.height);\n var ratio = 0.95 * this.canvasSizeLimit / (this.canvas.width * this.canvas.height);\n\n this.canvas.width = this.canvas.width * ratio;\n this.canvas.height = this.canvas.height * ratio;\n console.warn('adjustCanvasSize(): canvas was reduced to : ', this.canvas.width, this.canvas.height);\n }\n }\n\n };\n\n /**\n * Positions $editContained with absolute coordinates\n * to be on top of $imageElement.\n */\n Imager.prototype.adjustEditContainer = function () {\n var _this = this;\n\n var imageOffset = _this.$imageElement.offset();\n\n if (_this.$editContainer) {\n _this.$editContainer.css({\n left: imageOffset.left,\n top: imageOffset.top,\n width: _this.$imageElement.width(),\n height: _this.$imageElement.height()\n });\n }\n\n if (_this.$selectorContainer) {\n _this.$selectorContainer.css({\n left: imageOffset.left,\n top: imageOffset.top,\n width: this.$imageElement.width(),\n height: this.$imageElement.attr('src') ? this.$imageElement.height() : 'auto'\n });\n }\n };\n\n Imager.prototype.restoreOriginal = function () {\n this.$imageElement.replaceWith(this.$originalImage);\n };\n\n Imager.prototype.historyUndo = function () {\n if (this.history.length < 2) {\n return;\n }\n\n var _this = this;\n\n var lastEntry = this.history[this.history.length - 2];\n\n this.$imageElement.on('load', imageLoadHandler);\n this.$imageElement.attr('src', lastEntry.image);\n\n this.$imageElement.width(lastEntry.width);\n this.$imageElement.height(lastEntry.height);\n\n function imageLoadHandler() {\n _this.$imageElement.off('load', imageLoadHandler);\n\n _this.originalPreviewWidth = _this.$imageElement.width();\n _this.originalPreviewHeight = _this.$imageElement.height();\n\n _this.setPreviewSize(lastEntry.width, lastEntry.height);\n\n _this.render();\n _this.history.splice(_this.history.length - 1, 1);\n\n _this.trigger('historyChange');\n }\n };\n\n Imager.prototype.remove = function (removeImage) {\n this.trigger('remove');\n\n this.$imageElement.removeAttr('imager-attached');\n this.stopEditing();\n this.showOriginalImage();\n var index = imagerInstances.indexOf(this);\n imagerInstances.splice(index, 1);\n\n this.$originalImage = null;\n this.pluginsInstances = null;\n\n if (removeImage) {\n this.$imageElement.remove();\n }\n };\n\n /**\n * Returns current image data in bytes.\n *\n * @returns {number} Bytes number\n */\n Imager.prototype.getDataSize = function () {\n var head = 'data:' + 'image/' + this.options.format + ';base64,';\n var data = this.canvas.toDataURL('image/' + this.options.format, this.quality);\n\n var size = Math.round((data.length - head.length) * 3 / 4);\n\n return size;\n };\n\n /**\n * Tries to find Imager instance associated with provided img element.\n *\n * @param $img {HTMLImageElement|jQuery}\n * @returns {Imager|undefined}\n */\n Imager.getImagerFor = function ($img) {\n for (var i = 0; i < imagerInstances.length; i++) {\n var imager = imagerInstances[i];\n\n if (imager.id == $($img).attr('data-imager-id')) {\n return imager;\n }\n }\n\n return undefined;\n };\n\n Imager.isImagerAttached = function ($elem) {\n return $($elem).attr('imager-attached') !== undefined;\n };\n\n /**\n * @param {boolean} waiting Waiting status. TRUE for adding 'waiting' text,\n * false to remove.\n */\n Imager.prototype.setWaiting = function (waiting) {\n if (waiting) {\n if (this.$editContainer) {\n util.setWaiting(\n this.$editContainer, translations.t('Please wait...'),\n this.options.waitingCursor\n );\n }\n } else {\n util.stopWaiting(this.$editContainer);\n }\n };\n\n /**\n * Detects image format for either base64 encoded string or http:// url.\n * @param {string} imageSrc\n */\n Imager.prototype.getImageFormat = function (imageSrc) {\n if (!imageSrc) {\n return;\n }\n\n var extension;\n\n if (imageSrc.indexOf('http') === 0) {\n extension = imageSrc.split('.').pop();\n\n if (extension == 'jpeg') {\n extension = 'jpeg';\n } else if (extension == 'jpg') {\n extension = 'jpeg';\n } else if (extension == 'png') {\n extension = 'png';\n }\n } else if (imageSrc.indexOf('data:image') === 0) {\n if (imageSrc[11] == 'j') {\n extension = 'jpeg';\n } else if (imageSrc[11] == 'p') {\n extension = 'png';\n }\n }\n\n return extension;\n };\n\n /**\n * This method allows dynamical size adjustment of elements.\n * Elements which needs to be resized should have two attributes:\n *\n * data-sizeable=\"someNamespace\",\n * where someNamespace is unique id for the group of elements tht will be\n * resized together.\n *\n * data-cssrules=width,height,font-size:($v / 2.5)\n * which provides a list of css rules on which a new size will be applied.\n * If resulting size needs to be modififed in some way, the one could\n * specify a function like in font-size.\n *\n * @private\n */\n Imager.prototype._adjustElementsSize = function (namespace, newSize) {\n var elementsToResize =\n $('[data-sizeable=' + namespace + ']');\n\n for (var i = 0; i < elementsToResize.length; i++) {\n var elem = elementsToResize[i];\n var attributesToChange = $(elem)\n .attr('data-cssrules')\n .split(',');\n\n for (var a = 0; a < attributesToChange.length; a++) {\n var attrName = attributesToChange[a];\n var attrVal = newSize;\n\n if (attrName[0] == '-') {\n attrName = attrName.substr(1);\n attrVal = '-' + newSize;\n }\n\n var matches = attrName.match(/:\\((.+)\\)/);\n if (matches) {\n attrName = attrName.replace(matches[0], '');\n var expression = matches[1];\n expression = expression.replace('$v', attrVal);\n var result = new Function(\"return \" + expression)();\n attrVal = result;\n }\n\n $(elem).css(attrName, attrVal + 'px');\n }\n }\n };\n\n /**\n * Crude detection of device and platform.\n * Sets this.platform and this.touchDevice.\n * @todo this is BAD. Use more precise methods or some lib\n */\n Imager.prototype.detectPlatform = function () {\n // crude check of platform\n if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {\n this.platform = PLATFORM.ios;\n } else if (/Android|BlackBerry/i.test(navigator.userAgent)) {\n this.platform = PLATFORM.android;\n } else if (/IEMobile/i.test(navigator.userAgent)) {\n this.platform = PLATFORM.windowsMobile;\n }\n\n // check if options.detectTouch is function\n if (this.options.detectTouch && (this.options.detectTouch.constructor.name !== 'Function')) {\n console.error('detectTouch should be a function which will be ' +\n 'called when Imager needs to determine whether it is working ' +\n 'on touch device');\n this.options.detectTouch = null;\n }\n\n // crude check of touch\n if (this.options.detectTouch) {\n this.touchDevice = this.options.detectTouch(this);\n } else {\n this.touchDevice = /(iPhone|iPod|iPad|BlackBerry|Android)/i.test(navigator.userAgent);\n }\n\n // one more touch check\n var _this = this;\n $('body').on('touchstart.DrawerTouchCheck', function () {\n _this.touchDevice = true;\n $('body').off('touchstart.DrawerTouchCheck');\n _this.log('Found touch screen.');\n });\n };\n\n\n namespace.Imager = Imager;\n\n})(jQuery, ImagerJs, ImagerJs.plugins, ImagerJs.util, ImagerJs.translations);\n","(function ($, namespace, translations) {\n /**\n *\n * @param accept\n *\n * @constructor\n * @memberof ImagerJs.util\n */\n var FileSelector = function (accept) {\n var _this = this;\n\n _this.acceptTypes = accept;\n\n _this.$element = $('' +\n '
' +\n '
' +\n translations.t('Or drop files here') +\n '
' +\n '
' +\n '
' + actionButtonText + '
' :\n '';\n\n $(element).append(\n '' +\n '
' +\n text +\n actionButton +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
').css('position', 'absolute').css('top', '50px').css({\n width: originalPreviewSize.width,\n height: originalPreviewSize.height,\n position: 'absolute',\n right: '50px',\n top: '50px'\n });\n\n _this.previewCanvas = _this.$preview.find('canvas.imager-crop-preview')[0];\n _this.previewCanvas.__previewCanvas = true;\n\n _this.previewCanvas.width = originalPreviewSize.width * 1.5;\n _this.previewCanvas.height = originalPreviewSize.height * 1.5;\n\n $(_this.previewCanvas).css({\n height: '400px'\n });\n\n _this.imager.$editContainer.after(this.$preview);\n };\n\n Crop.prototype.adjustPreview = function () {\n var _this = this;\n\n //_this.$preview.find('canvas').css({\n // width: _this.croppedWidth,\n // height: _this.croppedHeight//,\n // //left: _this.croppedLeft,\n // //top: _this.croppedTop\n //});\n //\n //_this.previewCanvas.width = _this.croppedWidth * 1.5;\n //_this.previewCanvas.height = _this.croppedHeight * 1.5;\n };\n\n Crop.prototype.render = function (ctx) {\n if (this.croppedWidth === null || !this.enableRendering) {\n return;\n }\n\n var previewSize = this.imager.getPreviewSize();\n\n var previewWidth = previewSize.width;\n var previewHeight = previewSize.height;\n\n if (this.sizeBeforeCrop) {\n previewWidth = this.sizeBeforeCrop.width;\n previewHeight = this.sizeBeforeCrop.height;\n }\n\n var tempCtx = this.imager.tempCanvas.getContext('2d');\n\n // firstly find selection size in global coordinate syztem and scale\n var scaledWidth = this.imager.convertScale(\n this.croppedWidth, previewWidth, ctx.canvas.width\n );\n var scaledHeight = this.imager.convertScale(\n this.croppedHeight, previewHeight, ctx.canvas.height\n );\n\n var left = this.imager.convertScale(\n this.croppedLeft, previewWidth, ctx.canvas.width\n );\n var top = this.imager.convertScale(\n this.croppedTop, previewHeight, ctx.canvas.height\n );\n\n left *= -1;\n top *= -1;\n\n // then calculate the difference to know how to translate temporary canvas\n var widthDiff = ctx.canvas.width - scaledWidth;\n var heightDiff = ctx.canvas.height - scaledHeight;\n\n tempCtx.canvas.width = scaledWidth;\n tempCtx.canvas.height = scaledHeight;\n\n tempCtx.clearRect(0, 0, tempCtx.canvas.width, tempCtx.canvas.height);\n\n tempCtx.drawImage(ctx.canvas,\n 0, 0, ctx.canvas.width, ctx.canvas.height,\n left, top, tempCtx.canvas.width + widthDiff, tempCtx.canvas.height + heightDiff);\n\n ctx.canvas.width = scaledWidth;\n ctx.canvas.height = scaledHeight;\n\n this.imager.clearCanvas(ctx);\n ctx.drawImage(tempCtx.canvas,\n 0, 0, tempCtx.canvas.width, tempCtx.canvas.height,\n 0, 0, ctx.canvas.width, ctx.canvas.height);\n };\n\n Crop.prototype.onToolSelected = function (btn) {\n if (btn.plugin.constructor.name == 'RotatePlugin') {\n this.croppedLeft = null;\n this.croppedTop = null;\n this.croppedWidth = null;\n this.croppedHeight = null;\n\n this.sizeBeforeCrop = null;\n }\n };\n\n Crop.prototype.deserialize = function (savedState) {\n if (savedState) {\n this.croppedLeft = croppedLeft;\n this.croppedTop = croppedTop;\n this.croppedWidth = croppedWidth;\n this.croppedHeight = croppedHeight;\n this.sizeBeforeCrop = sizeBeforeCrop;\n }\n };\n\n Crop.prototype.serialize = function () {\n return {\n croppedLeft: this.croppedLeft,\n croppedTop: this.croppedTop,\n croppedWidth: this.croppedWidth,\n croppedHeight: this.croppedHeight,\n sizeBeforeCrop: this.sizeBeforeCrop\n };\n };\n\n Crop.prototype.reset = function () {\n this.croppedLeft = null;\n this.croppedTop = null;\n this.croppedWidth = null;\n this.croppedHeight = null;\n\n this.sizeBeforeCrop = null;\n };\n\n pluginsCatalog.Crop = Crop;\n\n})(jQuery, ImagerJs.plugins, ImagerJs.util, ImagerJs.translations);","(function ($, pluginsCatalog, translations, util) {\n /**\n * This plugin provides a button that will remove image & editing controls\n * from it.\n *\n * @param {ImagerJs} imagerInstance\n * @param {Object} options\n * @param {boolean} [options.fullRemove=false] Whether to fully remove imager.\n * If true, everything will be removed from DOM.\n * If false, a selector for new image will be left\n *\n * @constructor\n *\n * @memberof ImagerJs.progins\n */\n var Delete = function DeletePlugin(imagerInstance, options) {\n var _this = this;\n\n /**\n *\n * @type {ImagerJs}\n */\n _this.imager = imagerInstance;\n\n _this.defaultOptions = {\n fullRemove: false\n };\n\n options = options ? options : {};\n _this.options = $.extend(true, _this.defaultOptions, options);\n\n _this.weight = 500;\n };\n\n Delete.prototype.getButtons = function () {\n var _this = this;\n\n return [{\n classes: 'btn-delete',\n iconClasses: 'fa-times',\n tooltip: translations.t('Delete image'),\n enabledHandler: function (toolbar) {\n var question =\n translations.t('Are you sure want to delete this image?');\n var response = confirm(question);\n if (response) {\n _this.imager.setWaiting(true);\n\n setTimeout(function () {\n if (_this.options.fullRemove) {\n _this.imager.remove(true);\n } else {\n _this.imager.stopEditing();\n _this.imager.$imageElement.attr('src', '');\n\n _this.imager.startSelector();\n _this.imager.adjustEditContainer();\n }\n }, 1);\n }\n }\n }];\n };\n\n pluginsCatalog.Delete = Delete;\n})(jQuery, ImagerJs.plugins, ImagerJs.translations, ImagerJs.util);","(function ($, pluginsCatalog, util, translations, Modal) {\n 'use strict';\n\n var MOUSE_DOWN = util.mouseDown('MovableFloatingMode');\n var MOUSE_MOVE = util.mouseMove('MovableFloatingMode');\n var MOUSE_UP = util.mouseUp('MovableFloatingMode');\n\n /**\n * Provides a button which shows modal window with image properties line\n * aligment and size.\n *\n * @param imagerInstance\n * @param options\n * @constructor\n */\n var Properties = function PropertiesPlugin(imagerInstance, options) {\n var _this = this;\n\n _this.imager = imagerInstance;\n\n _this.defaultOptions = {\n minWidth: 50,\n minHeight: 50\n };\n\n options = options ? options : {};\n _this.options = $.extend(true, _this.defaultOptions, options);\n\n _this.weight = 100;\n\n _this.imager.log('[PropertiesPlugin]', 'init');\n };\n\n Properties.prototype.getButtons = function () {\n var _this = this;\n\n return [{\n classes: 'btn-properties',\n iconClasses: 'fa-cog',\n tooltip: translations.t('Image properties'),\n enabledHandler: function (toolbar) {\n _this.showPropertiesModal();\n }\n }];\n };\n\n Properties.prototype.showPropertiesModal = function () {\n var _this = this;\n\n var modal = new Modal();\n modal.setTitle(translations.t('Image properties'));\n modal.addClass('canvas-properties imager-click-stop');\n\n var $template = $('' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
');\n\n if(_this.imager.touchDevice){\n $resizeSquare.css(_this.options.controlsTouchCss);\n } else {\n $resizeSquare.css(_this.options.controlsCss);\n }\n\n _this.imager.$editContainer.append($resizeSquare);\n\n var $body = $('body');\n\n $resizeSquare.on(MOUSE_DOWN, function (downEvent) {\n var startPos = util.getEventPosition(downEvent);\n\n var startDimensions = _this.imager.getPreviewSize();\n\n var ratioWidth = startDimensions.height / startDimensions.width;\n var ratioHeight = startDimensions.width / startDimensions.height;\n\n $body.on(MOUSE_MOVE, function (moveEvent) {\n var movePos = util.getEventPosition(moveEvent);\n\n var leftDiff = movePos.left - startPos.left;\n var topDiff = movePos.top - startPos.top;\n\n if(_this.options.doubleDiff){\n leftDiff *= 2;\n topDiff *= 2;\n }\n\n\n var newWidth = startDimensions.width + leftDiff;\n var newHeight = startDimensions.height + topDiff;\n\n var fitSize = _this.calcAspectRatio(\n startDimensions.width, startDimensions.height, newWidth, newHeight\n );\n\n newWidth = fitSize.width;\n newHeight = fitSize.height;\n\n if (newWidth < _this.options.minWidth) {\n newWidth = _this.options.minWidth;\n }\n\n if (newHeight < _this.options.minHeight) {\n newHeight = _this.options.minHeight;\n }\n\n _this.imager.setPreviewSize(newWidth, newHeight);\n\n moveEvent.stopPropagation();\n moveEvent.preventDefault();\n return false;\n });\n\n $body.on(MOUSE_UP, function (upEvent) {\n $body.off(MOUSE_UP);\n $body.off(MOUSE_MOVE);\n });\n\n downEvent.stopPropagation();\n downEvent.preventDefault();\n return false;\n });\n\n this.$resizeSquare = $resizeSquare;\n };\n\n /**\n * Conserve aspect ratio of the orignal region.\n * Useful when shrinking/enlarging\n * images to fit into a certain area.\n *\n * @param {Number} srcWidth Source area width\n * @param {Number} srcHeight Source area height\n * @param {Number} maxWidth Fittable area maximum available width\n * @param {Number} maxHeight Fittable area maximum available height\n * @return {Object} { width, heigth }\n */\n Resize.prototype.calcAspectRatio = function calculateAspectRatioFit(\n srcWidth, srcHeight, maxWidth, maxHeight) {\n\n var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);\n\n return { width: srcWidth*ratio, height: srcHeight*ratio };\n };\n\n pluginsCatalog.Resize = Resize;\n})(jQuery, ImagerJs.plugins, ImagerJs.util);","(function ($, pluginsCatalog, util, translations) {\n var MOUSE_DOWN = util.mouseDown('imagerjsRotate');\n var MOUSE_UP = util.mouseUp('imagerjsRotate');\n var MOUSE_MOVE = util.mouseMove('imagerjsRotate');\n\n /**\n * Rotate plugins. Allows image rotation.\n *\n * @param imagerInstance\n *\n * @param options {Object} Rotating controls options.\n * @param options.controlsCss {Object} Css properties that will be applied to\n * rotating controls.\n *\n * @param options.controlsTouchCss {Object} Css properties that will\n * be applied to rotating controls when on touch device.\n *\n * @constructor\n * @memberof ImagerJs.plugins\n */\n var Rotate = function RotatePlugin(imagerInstance, options) {\n var _this = this;\n\n _this.imager = imagerInstance;\n\n _this.defaultOptions = {\n controlsCss: {},\n controlsTouchCss: {}\n };\n\n options = options ? options : {};\n _this.options = $.extend(true, _this.defaultOptions, options);\n\n _this.weight = -100;\n\n _this.angle = 0;\n\n var previewSize = this.imager.getPreviewSize();\n\n _this.controlsStartWidth = previewSize.width;\n _this.controlsStartHeight = previewSize.height;\n\n _this.widthDiff = 0;\n _this.heightDiff = 0;\n };\n\n Rotate.prototype.getButtons = function () {\n var _this = this;\n\n var group = {\n name: 'Rotate',\n tooltip: translations.t('Rotate')\n };\n\n return [{\n classes: 'btn-rotate',\n iconClasses: 'fa-repeat',\n tooltip: translations.t('Rotate manually'),\n group: group,\n enabledHandler: function (toolbar) {\n _this.startRotate();\n _this.imager.render();\n },\n applyHandler: function () {\n _this.imager.setWaiting(true);\n\n setTimeout(function () {\n _this.applyHandler();\n _this.imager.commitChanges('Rotate');\n _this.reset();\n\n _this.imager.setWaiting(false);\n }, 50);\n },\n rejectHandler: function () {\n _this.setAngle(0);\n _this.stopRotate();\n }\n }, {\n group: group,\n classes: 'btn-rotate btn-rotate-90',\n iconClasses: 'fa-undo',\n tooltip: translations.t('Rotate 90 left'),\n enabledHandler: function (toolbar) {\n _this.imager.setWaiting(true);\n\n setTimeout(function () {\n _this.rotateByAngle(-90 * Math.PI / 180);\n _this.imager.setWaiting(false);\n }, 50);\n }\n }, {\n group: group,\n classes: 'btn-rotate',\n iconClasses: 'fa-repeat',\n tooltip: translations.t('Rotate 90 right'),\n enabledHandler: function (toolbar) {\n _this.imager.setWaiting(true);\n\n setTimeout(function () {\n _this.rotateByAngle(90 * Math.PI / 180);\n _this.imager.setWaiting(false);\n }, 50);\n }\n }];\n };\n\n Rotate.prototype.applyHandler = function () {\n this.stopRotate();\n };\n\n Rotate.prototype.rotateByAngle = function (angle) {\n var prevQuality = this.imager.quality;\n var prevTargetScale = this.imager.targetScale;\n\n this.imager.quality = 1;\n this.imager.targetScale = 1;\n\n this.startRotate();\n this.imager.render();\n this.setAngle(angle);\n this.imager.render();\n this.stopRotate();\n this.imager.commitChanges(translations.t('Rotate'));\n this.reset();\n this.imager.render();\n\n this.imager.quality = prevQuality;\n this.imager.targetScale = prevTargetScale;\n };\n\n Rotate.prototype.startRotate = function () {\n var _this = this;\n\n var previewDimensions = this.imager.getPreviewSize();\n\n _this.controlsStartWidth = _this.imager.originalPreviewWidth;\n _this.controlsStartHeight = _this.imager.originalPreviewHeight;\n\n var $rotateControls = $(\n '' +\n '
' +\n '
' +\n '
' +\n '
' +\n\n '
' +\n '
' +\n '
' +\n '
' +\n '