');\n\n if (response.sites.length === 1) {\n $('', {text: response.sites[0].name}).appendTo($header);\n } else {\n var $siteSelectContainer = $('
').appendTo($header);\n\n this.$siteSelect = $('').appendTo($siteSelectContainer);\n this.$siteSpinner = $('').appendTo($header);\n\n for (var i = 0; i < response.sites.length; i++) {\n var siteInfo = response.sites[i];\n $('').appendTo(this.$siteSelect);\n }\n\n this.addListener(this.$siteSelect, 'change', 'switchSite');\n }\n\n $hudContents = $hudContents.add($header);\n }\n\n this.$form = $('');\n this.$fieldsContainer = $('
').appendTo(this.$form);\n\n this.updateForm(response, true);\n\n this.onCreateForm(this.$form);\n\n var $footer = $('
').appendTo(this.$form),\n $buttonsContainer = $('').appendTo($footer);\n this.$cancelBtn = $('', {\n type: 'button',\n class: 'btn',\n text: Craft.t('app', 'Cancel'),\n }).appendTo($buttonsContainer);\n this.$saveBtn = $('', {\n type: 'submit',\n class: 'btn submit',\n text: Craft.t('app', 'Save'),\n }).appendTo($buttonsContainer);\n this.$spinner = $('').appendTo($buttonsContainer);\n\n $hudContents = $hudContents.add(this.$form);\n\n if (!this.hud) {\n var hudTrigger = (this.settings.hudTrigger || this.$element);\n\n this.hud = new Garnish.HUD(hudTrigger, $hudContents, {\n bodyClass: 'body elementeditor',\n closeOtherHUDs: false,\n hideOnEsc: false,\n hideOnShadeClick: false,\n onShow: this.onShowHud.bind(this),\n onHide: this.onHideHud.bind(this),\n onSubmit: this.saveElement.bind(this),\n });\n\n this.hud.$hud.data('elementEditor', this);\n\n // Disable browser input validation\n this.hud.$body.attr('novalidate', '');\n\n this.hud.on('hide', $.proxy(function() {\n delete this.hud;\n }, this));\n } else {\n this.hud.updateBody($hudContents);\n this.hud.updateSizeAndPosition();\n }\n\n // Focus on the first text input\n $hudContents.find('.text:first').trigger('focus');\n\n this.addListener(this.$cancelBtn, 'click', function() {\n this.hud.hide();\n });\n }\n },\n\n switchSite: function() {\n if (\n this.hud.$body.serialize() !== this.initialData &&\n !confirm(Craft.t('app', 'Switching sites will lose unsaved changes. Are you sure you want to switch sites?'))\n ) {\n this.$siteSelect.val(this.siteId);\n return;\n }\n\n var newSiteId = this.$siteSelect.val();\n\n if (newSiteId == this.siteId) {\n return;\n }\n\n this.$siteSpinner.removeClass('hidden');\n\n this.reloadForm({siteId: newSiteId}, $.proxy(function(textStatus) {\n this.$siteSpinner.addClass('hidden');\n if (textStatus !== 'success') {\n // Reset the site select\n this.$siteSelect.val(this.siteId);\n }\n }, this));\n },\n\n reloadForm: function(data, callback) {\n data = $.extend(this.getBaseData(), data);\n\n Craft.postActionRequest('elements/get-editor-html', data, $.proxy(function(response, textStatus) {\n if (textStatus === 'success') {\n this.updateForm(response, true);\n }\n\n if (callback) {\n callback(textStatus);\n }\n }, this));\n },\n\n updateForm: function(response, refreshInitialData) {\n this.siteId = response.siteId;\n this.$fieldsContainer.html(response.html);\n\n if (refreshInitialData !== false) {\n this.deltaNames = response.deltaNames;\n }\n\n // Swap any instruction text with info icons\n let $allInstructions = this.$fieldsContainer.find('> .meta > .field > .instructions');\n\n for (let i = 0; i < $allInstructions.length; i++) {\n let $instructions = $allInstructions.eq(i);\n let $label = $instructions.siblings('.heading').children('label');\n $('', {\n 'class': 'info',\n 'html': $instructions.children().html()\n }).appendTo($label);\n $instructions.remove();\n }\n\n Garnish.requestAnimationFrame($.proxy(function() {\n Craft.appendHeadHtml(response.headHtml);\n Craft.appendFootHtml(response.footHtml);\n Craft.initUiElements(this.$fieldsContainer);\n\n if (refreshInitialData) {\n this.initialData = this.hud.$body.serialize();\n }\n }, this));\n },\n\n saveElement: function() {\n var validators = this.settings.validators;\n\n if ($.isArray(validators)) {\n for (var i = 0; i < validators.length; i++) {\n if ($.isFunction(validators[i]) && !validators[i].call()) {\n return false;\n }\n }\n }\n\n this.$spinner.removeClass('hidden');\n\n var data = $.param(this.getBaseData()) + '&' + this.hud.$body.serialize();\n data = Craft.findDeltaData(this.initialData, data, this.deltaNames);\n\n Craft.postActionRequest('elements/save-element', data, $.proxy(function(response, textStatus) {\n this.$spinner.addClass('hidden');\n\n if (textStatus === 'success') {\n if (response.success) {\n if (this.$element && this.siteId == this.$element.data('site-id')) {\n // Update the label\n var $title = this.$element.find('.title'),\n $a = $title.find('a');\n\n if ($a.length && response.cpEditUrl) {\n $a.attr('href', response.cpEditUrl);\n $a.text(response.newTitle);\n } else {\n $title.text(response.newTitle);\n }\n }\n\n if (this.settings.elementType && Craft.elementTypeNames[this.settings.elementType]) {\n Craft.cp.displayNotice(Craft.t('app', '{type} saved.', {\n type: Craft.elementTypeNames[this.settings.elementType][0],\n }));\n }\n\n this.closeHud();\n this.onSaveElement(response);\n } else {\n this.updateForm(response, false);\n Garnish.shake(this.hud.$hud);\n }\n }\n }, this));\n },\n\n closeHud: function() {\n this.hud.hide();\n delete this.hud;\n },\n\n // Events\n // -------------------------------------------------------------------------\n\n onShowHud: function() {\n Garnish.shortcutManager.registerShortcut({\n keyCode: Garnish.S_KEY,\n ctrl: true,\n }, this.saveElement.bind(this));\n this.settings.onShowHud();\n this.trigger('showHud');\n },\n\n onHideHud: function() {\n this.settings.onHideHud();\n this.trigger('hideHud');\n },\n\n onBeginLoading: function() {\n if (this.$element) {\n this.$element.addClass('loading');\n }\n\n this.settings.onBeginLoading();\n this.trigger('beginLoading');\n },\n\n onEndLoading: function() {\n if (this.$element) {\n this.$element.removeClass('loading');\n }\n\n this.settings.onEndLoading();\n this.trigger('endLoading');\n },\n\n onSaveElement: function(response) {\n this.settings.onSaveElement(response);\n this.trigger('saveElement', {\n response: response\n });\n\n // There may be a new background job that needs to be run\n Craft.cp.runQueue();\n },\n\n onCreateForm: function($form) {\n this.settings.onCreateForm($form);\n }\n },\n {\n defaults: {\n hudTrigger: null,\n showSiteSwitcher: true,\n elementId: null,\n elementType: null,\n siteId: null,\n attributes: null,\n params: null,\n prevalidate: false,\n elementIndex: null,\n\n onShowHud: $.noop,\n onHideHud: $.noop,\n onBeginLoading: $.noop,\n onEndLoading: $.noop,\n onCreateForm: $.noop,\n onSaveElement: $.noop,\n\n validators: []\n }\n });\n\n/** global: Craft */\n/** global: Garnish */\n/**\n * Element index class\n */\nCraft.BaseElementIndex = Garnish.Base.extend(\n {\n initialized: false,\n elementType: null,\n\n instanceState: null,\n sourceStates: null,\n sourceStatesStorageKey: null,\n\n searchTimeout: null,\n sourceSelect: null,\n\n $container: null,\n $main: null,\n isIndexBusy: false,\n\n $sidebar: null,\n showingSidebar: null,\n sourceKey: null,\n sourceViewModes: null,\n $source: null,\n sourcesByKey: null,\n $visibleSources: null,\n\n $customizeSourcesBtn: null,\n customizeSourcesModal: null,\n\n $toolbar: null,\n toolbarOffset: null,\n\n $search: null,\n searching: false,\n searchText: null,\n trashed: false,\n drafts: false,\n $clearSearchBtn: null,\n\n $statusMenuBtn: null,\n $statusMenuContainer: null,\n statusMenu: null,\n status: null,\n\n $siteMenuBtn: null,\n siteMenu: null,\n siteId: null,\n\n $sortMenuBtn: null,\n sortMenu: null,\n $sortAttributesList: null,\n $sortDirectionsList: null,\n $scoreSortAttribute: null,\n $structureSortAttribute: null,\n\n $elements: null,\n $viewModeBtnContainer: null,\n viewModeBtns: null,\n viewMode: null,\n view: null,\n _autoSelectElements: null,\n $countSpinner: null,\n $countContainer: null,\n page: 1,\n resultSet: null,\n totalResults: null,\n $exportBtn: null,\n\n actions: null,\n actionsHeadHtml: null,\n actionsFootHtml: null,\n $selectAllContainer: null,\n $selectAllCheckbox: null,\n showingActionTriggers: false,\n exporters: null,\n _$detachedToolbarItems: null,\n _$triggers: null,\n\n _ignoreFailedRequest: false,\n _cancelToken: null,\n\n /**\n * Constructor\n */\n init: function(elementType, $container, settings) {\n this.elementType = elementType;\n this.$container = $container;\n this.setSettings(settings, Craft.BaseElementIndex.defaults);\n\n // Set the state objects\n // ---------------------------------------------------------------------\n\n this.instanceState = this.getDefaultInstanceState();\n\n this.sourceStates = {};\n\n // Instance states (selected source) are stored by a custom storage key defined in the settings\n if (this.settings.storageKey) {\n $.extend(this.instanceState, Craft.getLocalStorage(this.settings.storageKey), {});\n }\n\n // Source states (view mode, etc.) are stored by the element type and context\n this.sourceStatesStorageKey = 'BaseElementIndex.' + this.elementType + '.' + this.settings.context;\n $.extend(this.sourceStates, Craft.getLocalStorage(this.sourceStatesStorageKey, {}));\n\n // Find the DOM elements\n // ---------------------------------------------------------------------\n\n this.$main = this.$container.find('.main');\n this.$toolbar = this.$container.find(this.settings.toolbarSelector);\n this.$statusMenuBtn = this.$toolbar.find('.statusmenubtn:first');\n this.$statusMenuContainer = this.$statusMenuBtn.parent();\n this.$siteMenuBtn = this.$container.find('.sitemenubtn:first');\n this.$sortMenuBtn = this.$toolbar.find('.sortmenubtn:first');\n this.$search = this.$toolbar.find('.search:first input:first');\n this.$clearSearchBtn = this.$toolbar.find('.search:first > .clear');\n this.$sidebar = this.$container.find('.sidebar:first');\n this.$customizeSourcesBtn = this.$sidebar.find('.customize-sources');\n this.$elements = this.$container.find('.elements:first');\n this.$countSpinner = this.$container.find('#count-spinner');\n this.$countContainer = this.$container.find('#count-container');\n this.$exportBtn = this.$container.find('#export-btn');\n\n // Hide sidebar if needed\n if (this.settings.hideSidebar) {\n this.$sidebar.hide();\n $('.body, .content', this.$container).removeClass('has-sidebar');\n }\n\n // Initialize the sources\n // ---------------------------------------------------------------------\n\n if (!this.initSources()) {\n return;\n }\n\n // Customize button\n if (this.$customizeSourcesBtn.length) {\n this.addListener(this.$customizeSourcesBtn, 'click', 'createCustomizeSourcesModal');\n }\n\n // Initialize the status menu\n // ---------------------------------------------------------------------\n\n if (this.$statusMenuBtn.length) {\n this.statusMenu = this.$statusMenuBtn.menubtn().data('menubtn').menu;\n this.statusMenu.on('optionselect', $.proxy(this, '_handleStatusChange'));\n }\n\n // Initialize the site menu\n // ---------------------------------------------------------------------\n\n // Is there a site menu?\n if (this.$siteMenuBtn.length) {\n this.siteMenu = this.$siteMenuBtn.menubtn().data('menubtn').menu;\n\n // Figure out the initial site\n var $option = this.siteMenu.$options.filter('.sel:first');\n\n if (!$option.length) {\n $option = this.siteMenu.$options.first();\n }\n\n if ($option.length) {\n this._setSite($option.data('site-id'));\n } else {\n // No site options -- they must not have any site permissions\n this.settings.criteria = {id: '0'};\n }\n\n this.siteMenu.on('optionselect', $.proxy(this, '_handleSiteChange'));\n\n if (this.siteId) {\n // Should we be using a different default site?\n var defaultSiteId = this.settings.defaultSiteId || Craft.cp.getSiteId();\n\n if (defaultSiteId && defaultSiteId != this.siteId) {\n // Is that one available here?\n var $storedSiteOption = this.siteMenu.$options.filter('[data-site-id=\"' + defaultSiteId + '\"]:first');\n\n if ($storedSiteOption.length) {\n // Todo: switch this to siteMenu.selectOption($storedSiteOption) once Menu is updated to support that\n $storedSiteOption.trigger('click');\n }\n }\n }\n } else if (this.settings.criteria && this.settings.criteria.siteId && this.settings.criteria.siteId !== '*') {\n this._setSite(this.settings.criteria.siteId);\n } else {\n this._setSite(Craft.siteId);\n }\n\n // Initialize the search input\n // ---------------------------------------------------------------------\n\n // Automatically update the elements after new search text has been sitting for a 1/2 second\n this.addListener(this.$search, 'input', $.proxy(function() {\n if (!this.searching && this.$search.val()) {\n this.startSearching();\n } else if (this.searching && !this.$search.val()) {\n this.stopSearching();\n }\n\n if (this.searchTimeout) {\n clearTimeout(this.searchTimeout);\n }\n\n this.searchTimeout = setTimeout($.proxy(this, 'updateElementsIfSearchTextChanged'), 500);\n }, this));\n\n // Update the elements when the Return key is pressed\n this.addListener(this.$search, 'keypress', $.proxy(function(ev) {\n if (ev.keyCode === Garnish.RETURN_KEY) {\n ev.preventDefault();\n\n if (this.searchTimeout) {\n clearTimeout(this.searchTimeout);\n }\n\n this.updateElementsIfSearchTextChanged();\n }\n }, this));\n\n // Clear the search when the X button is clicked\n this.addListener(this.$clearSearchBtn, 'click', $.proxy(function() {\n this.$search.val('');\n\n if (this.searchTimeout) {\n clearTimeout(this.searchTimeout);\n }\n\n if (!Garnish.isMobileBrowser(true)) {\n this.$search.trigger('focus');\n }\n\n this.stopSearching();\n\n this.updateElementsIfSearchTextChanged();\n }, this));\n\n // Auto-focus the Search box\n if (!Garnish.isMobileBrowser(true)) {\n this.$search.trigger('focus');\n }\n\n // Initialize the sort menu\n // ---------------------------------------------------------------------\n\n // Is there a sort menu?\n if (this.$sortMenuBtn.length) {\n this.sortMenu = this.$sortMenuBtn.menubtn().data('menubtn').menu;\n this.$sortAttributesList = this.sortMenu.$container.children('.sort-attributes');\n this.$sortDirectionsList = this.sortMenu.$container.children('.sort-directions');\n\n this.sortMenu.on('optionselect', $.proxy(this, '_handleSortChange'));\n }\n\n // Initialize the Export button\n // ---------------------------------------------------------------------\n\n this.addListener(this.$exportBtn, 'click', '_showExportHud');\n\n // Let everyone know that the UI is initialized\n // ---------------------------------------------------------------------\n\n this.initialized = true;\n this.afterInit();\n\n // Select the initial source\n // ---------------------------------------------------------------------\n\n this.selectDefaultSource();\n\n // Load the first batch of elements!\n // ---------------------------------------------------------------------\n\n // Default to whatever page is in the URL\n this.setPage(Craft.pageNum);\n\n this.updateElements(true);\n },\n\n afterInit: function() {\n this.onAfterInit();\n },\n\n _createCancelToken: function() {\n this._cancelToken = axios.CancelToken.source();\n return this._cancelToken.token;\n },\n\n _cancelRequests: function() {\n if (this._cancelToken) {\n this._ignoreFailedRequest = true;\n this._cancelToken.cancel();\n Garnish.requestAnimationFrame(() => {\n this._ignoreFailedRequest = false;\n });\n }\n },\n\n getSourceContainer: function() {\n return this.$sidebar.find('nav>ul');\n },\n\n get $sources() {\n if (!this.sourceSelect) {\n return undefined;\n }\n\n return this.sourceSelect.$items;\n },\n\n initSources: function() {\n var $sources = this._getSourcesInList(this.getSourceContainer());\n\n // No source, no party.\n if ($sources.length === 0) {\n return false;\n }\n\n // The source selector\n if (!this.sourceSelect) {\n this.sourceSelect = new Garnish.Select(this.$sidebar.find('nav'), {\n multi: false,\n allowEmpty: false,\n vertical: true,\n onSelectionChange: $.proxy(this, '_handleSourceSelectionChange')\n });\n }\n\n this.sourcesByKey = {};\n this._initSources($sources);\n\n return true;\n },\n\n selectDefaultSource: function() {\n var sourceKey = this.getDefaultSourceKey(),\n $source;\n\n if (sourceKey) {\n $source = this.getSourceByKey(sourceKey);\n\n // Make sure it's visible\n if (this.$visibleSources.index($source) === -1) {\n $source = null;\n }\n }\n\n if (!sourceKey || !$source) {\n // Select the first source by default\n $source = this.$visibleSources.first();\n }\n\n if ($source.length) {\n this.selectSource($source);\n }\n },\n\n refreshSources: function() {\n this.sourceSelect.removeAllItems();\n\n var params = {\n context: this.settings.context,\n elementType: this.elementType\n };\n\n this.setIndexBusy();\n\n Craft.sendActionRequest('POST', this.settings.refreshSourcesAction, {\n data: params,\n }).then((response) => {\n this.setIndexAvailable();\n this.getSourceContainer().replaceWith(response.data.html);\n this.initSources();\n this.selectDefaultSource();\n }).catch(() => {\n this.setIndexAvailable();\n if (!this._ignoreFailedRequest) {\n Craft.cp.displayError(Craft.t('app', 'A server error occurred.'));\n }\n });\n },\n\n initSource: function($source) {\n this.sourceSelect.addItems($source);\n this.initSourceToggle($source);\n this.sourcesByKey[$source.data('key')] = $source;\n\n if ($source.data('hasNestedSources') && this.instanceState.expandedSources.indexOf($source.data('key')) !== -1) {\n this._expandSource($source);\n }\n },\n\n initSourceToggle: function($source) {\n // Remove handlers for the same thing. Just in case.\n this.deinitSourceToggle($source);\n\n var $toggle = this._getSourceToggle($source);\n\n if ($toggle.length) {\n this.addListener($source, 'dblclick', '_handleSourceDblClick');\n this.addListener($toggle, 'click', '_handleSourceToggleClick');\n $source.data('hasNestedSources', true);\n } else {\n $source.data('hasNestedSources', false);\n }\n },\n\n deinitSource: function($source) {\n this.sourceSelect.removeItems($source);\n this.deinitSourceToggle($source);\n delete this.sourcesByKey[$source.data('key')];\n },\n\n deinitSourceToggle: function($source) {\n if ($source.data('hasNestedSources')) {\n this.removeListener($source, 'dblclick');\n this.removeListener(this._getSourceToggle($source), 'click');\n }\n\n $source.removeData('hasNestedSources');\n },\n\n getDefaultInstanceState: function() {\n return {\n selectedSource: null,\n expandedSources: []\n };\n },\n\n getDefaultSourceKey: function() {\n if (this.settings.defaultSource) {\n var paths = this.settings.defaultSource.split('/'),\n path = '';\n\n // Expand the tree\n for (var i = 0; i < paths.length; i++) {\n path += paths[i];\n var $source = this.getSourceByKey(path);\n\n // If the folder can't be found, then just go to the stored instance source.\n if (!$source) {\n return this.instanceState.selectedSource;\n }\n\n this._expandSource($source);\n path += '/';\n }\n\n // Just make sure that the modal is aware of the newly expanded sources, too.\n this._setSite(this.siteId);\n\n return this.settings.defaultSource;\n }\n\n return this.instanceState.selectedSource;\n },\n\n getDefaultExpandedSources: function() {\n return this.instanceState.expandedSources;\n },\n\n startSearching: function() {\n // Show the clear button and add/select the Score sort option\n this.$clearSearchBtn.removeClass('hidden');\n\n if (!this.$scoreSortAttribute) {\n this.$scoreSortAttribute = $('' + Craft.t('app', 'Score') + ' ');\n this.sortMenu.addOptions(this.$scoreSortAttribute.children());\n }\n\n this.$scoreSortAttribute.prependTo(this.$sortAttributesList);\n\n this.searching = true;\n\n this._updateStructureSortOption();\n this.setSortAttribute('score');\n },\n\n stopSearching: function() {\n // Hide the clear button and Score sort option\n this.$clearSearchBtn.addClass('hidden');\n\n this.$scoreSortAttribute.detach();\n\n this.searching = false;\n\n this._updateStructureSortOption();\n },\n\n setInstanceState: function(key, value) {\n if (typeof key === 'object') {\n $.extend(this.instanceState, key);\n } else {\n this.instanceState[key] = value;\n }\n\n this.storeInstanceState();\n },\n\n storeInstanceState: function() {\n if (this.settings.storageKey) {\n Craft.setLocalStorage(this.settings.storageKey, this.instanceState);\n }\n },\n\n getSourceState: function(source, key, defaultValue) {\n if (typeof this.sourceStates[source] === 'undefined') {\n // Set it now so any modifications to it by whoever's calling this will be stored.\n this.sourceStates[source] = {};\n }\n\n if (typeof key === 'undefined') {\n return this.sourceStates[source];\n } else if (typeof this.sourceStates[source][key] !== 'undefined') {\n return this.sourceStates[source][key];\n } else {\n return (typeof defaultValue !== 'undefined' ? defaultValue : null);\n }\n },\n\n getSelectedSourceState: function(key, defaultValue) {\n return this.getSourceState(this.instanceState.selectedSource, key, defaultValue);\n },\n\n setSelecetedSourceState: function(key, value) {\n var viewState = this.getSelectedSourceState();\n\n if (typeof key === 'object') {\n $.extend(viewState, key);\n } else {\n viewState[key] = value;\n }\n\n this.sourceStates[this.instanceState.selectedSource] = viewState;\n\n // Store it in localStorage too\n Craft.setLocalStorage(this.sourceStatesStorageKey, this.sourceStates);\n },\n\n storeSortAttributeAndDirection: function() {\n var attr = this.getSelectedSortAttribute();\n\n if (attr !== 'score') {\n this.setSelecetedSourceState({\n order: attr,\n sort: this.getSelectedSortDirection()\n });\n }\n },\n\n /**\n * Sets the page number.\n */\n setPage: function(page) {\n if (this.settings.context !== 'index') {\n return;\n }\n\n page = Math.max(page, 1);\n this.page = page;\n\n // Update the URL\n var url = document.location.href\n .replace(/\\?.*$/, '')\n .replace(new RegExp('/' + Craft.pageTrigger.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&') + '\\\\d+$'), '')\n .replace(/\\/+$/, '');\n\n if (this.page !== 1) {\n if (Craft.pageTrigger[0] !== '?') {\n url += '/';\n }\n url += Craft.pageTrigger + this.page;\n }\n\n history.replaceState({}, '', url);\n },\n\n _resetCount: function() {\n this.resultSet = null;\n this.totalResults = null;\n },\n\n /**\n * Returns the data that should be passed to the elementIndex/getElements controller action\n * when loading elements.\n */\n getViewParams: function() {\n var criteria = {\n siteId: this.siteId,\n search: this.searchText,\n offset: this.settings.batchSize * (this.page - 1),\n limit: this.settings.batchSize,\n trashed: this.trashed ? 1 : 0,\n drafts: this.drafts ? 1 : 0,\n };\n\n if (!Garnish.hasAttr(this.$source, 'data-override-status')) {\n criteria.status = this.status;\n }\n\n $.extend(criteria, this.settings.criteria);\n\n var params = {\n context: this.settings.context,\n elementType: this.elementType,\n source: this.instanceState.selectedSource,\n criteria: criteria,\n disabledElementIds: this.settings.disabledElementIds,\n viewState: $.extend({}, this.getSelectedSourceState()),\n paginated: this._isViewPaginated() ? 1 : 0,\n };\n\n // Possible that the order/sort isn't entirely accurate if we're sorting by Score\n params.viewState.order = this.getSelectedSortAttribute();\n params.viewState.sort = this.getSelectedSortDirection();\n\n if (this.getSelectedSortAttribute() === 'structure') {\n if (typeof this.instanceState.collapsedElementIds === 'undefined') {\n this.instanceState.collapsedElementIds = [];\n }\n params.collapsedElementIds = this.instanceState.collapsedElementIds;\n }\n\n // Give plugins a chance to hook in here\n this.trigger('registerViewParams', {\n params: params,\n });\n\n return params;\n },\n\n updateElements: function(preservePagination) {\n // Ignore if we're not fully initialized yet\n if (!this.initialized) {\n return;\n }\n\n // Cancel any ongoing requests\n this._cancelRequests();\n\n this.setIndexBusy();\n\n // Kill the old view class\n if (this.view) {\n this.view.destroy();\n delete this.view;\n }\n\n if (preservePagination !== true) {\n this.setPage(1);\n this._resetCount();\n }\n\n var params = this.getViewParams();\n\n Craft.sendActionRequest('POST', this.settings.updateElementsAction, {\n data: params,\n cancelToken: this._createCancelToken(),\n }).then((response) => {\n this.setIndexAvailable();\n this._updateView(params, response.data);\n }).catch(() => {\n this.setIndexAvailable();\n if (!this._ignoreFailedRequest) {\n Craft.cp.displayError(Craft.t('app', 'A server error occurred.'));\n }\n });\n },\n\n updateElementsIfSearchTextChanged: function() {\n if (this.searchText !== (this.searchText = this.searching ? this.$search.val() : null)) {\n this.updateElements();\n }\n },\n\n showActionTriggers: function() {\n // Ignore if they're already shown\n if (this.showingActionTriggers) {\n return;\n }\n\n // Hard-code the min toolbar height in case it was taller than the actions toolbar\n // (prevents the elements from jumping if this ends up being a double-click)\n this.$toolbar.css('min-height', this.$toolbar.height());\n\n // Hide any toolbar inputs\n this._$detachedToolbarItems = this.$toolbar.children();\n this._$detachedToolbarItems.detach();\n\n if (!this._$triggers) {\n this._createTriggers();\n } else {\n this._$triggers.appendTo(this.$toolbar);\n }\n\n this.showingActionTriggers = true;\n },\n\n submitAction: function(action, actionParams) {\n // Make sure something's selected\n var selectedElementIds = this.view.getSelectedElementIds(),\n totalSelected = selectedElementIds.length;\n\n if (totalSelected === 0) {\n return;\n }\n\n if (typeof action === 'string') {\n action = this._findAction(action);\n }\n\n if (action.confirm && !confirm(action.confirm)) {\n return;\n }\n\n // Cancel any ongoing requests\n this._cancelRequests();\n\n // Get ready to submit\n var viewParams = this.getViewParams();\n\n actionParams = actionParams ? Craft.expandPostArray(actionParams) : {};\n var params = $.extend(viewParams, action.settings || {}, actionParams, {\n elementAction: action.type,\n elementIds: selectedElementIds\n });\n\n // Do it\n this.setIndexBusy();\n this._autoSelectElements = selectedElementIds;\n\n if (action.download) {\n if (Craft.csrfTokenName) {\n params[Craft.csrfTokenName] = Craft.csrfTokenValue;\n }\n Craft.downloadFromUrl('POST', Craft.getActionUrl(this.settings.submitActionsAction), params).then(response => {\n this.setIndexAvailable();\n }).catch(e => {\n this.setIndexAvailable();\n });\n } else {\n Craft.sendActionRequest('POST', this.settings.submitActionsAction, {\n data: params,\n cancelToken: this._createCancelToken(),\n }).then((response) => {\n this.setIndexAvailable();\n if (response.data.success) {\n // Update the count text too\n this._resetCount();\n this._updateView(viewParams, response.data);\n\n if (response.data.message) {\n Craft.cp.displayNotice(response.data.message);\n }\n\n this.afterAction(action, params);\n } else {\n Craft.cp.displayError(response.data.message);\n }\n }).catch(() => {\n this.setIndexAvailable();\n });\n }\n },\n\n _findAction: function(actionClass) {\n for (var i = 0; i < this.actions.length; i++) {\n if (this.actions[i].type === actionClass) {\n return this.actions[i];\n }\n }\n throw `Invalid element action: ${actionClass}`;\n },\n\n afterAction: function(action, params) {\n // There may be a new background job that needs to be run\n Craft.cp.runQueue();\n\n this.onAfterAction(action, params);\n },\n\n hideActionTriggers: function() {\n // Ignore if there aren't any\n if (!this.showingActionTriggers) {\n return;\n }\n\n this._$detachedToolbarItems.appendTo(this.$toolbar);\n this._$triggers.detach();\n // this._$detachedToolbarItems.removeClass('hidden');\n\n // Unset the min toolbar height\n this.$toolbar.css('min-height', '');\n\n this.showingActionTriggers = false;\n },\n\n updateActionTriggers: function() {\n // Do we have an action UI to update?\n if (this.actions) {\n var totalSelected = this.view.getSelectedElements().length;\n\n if (totalSelected !== 0) {\n if (totalSelected === this.view.getEnabledElements().length) {\n this.$selectAllCheckbox.removeClass('indeterminate');\n this.$selectAllCheckbox.addClass('checked');\n this.$selectAllContainer.attr('aria-checked', 'true');\n } else {\n this.$selectAllCheckbox.addClass('indeterminate');\n this.$selectAllCheckbox.removeClass('checked');\n this.$selectAllContainer.attr('aria-checked', 'mixed');\n }\n\n this.showActionTriggers();\n } else {\n this.$selectAllCheckbox.removeClass('indeterminate checked');\n this.$selectAllContainer.attr('aria-checked', 'false');\n this.hideActionTriggers();\n }\n }\n },\n\n getSelectedElements: function() {\n return this.view ? this.view.getSelectedElements() : $();\n },\n\n getSelectedElementIds: function() {\n return this.view ? this.view.getSelectedElementIds() : [];\n },\n\n setStatus: function(status) {\n // Find the option (and make sure it actually exists)\n var $option = this.statusMenu.$options.filter('a[data-status=\"' + status + '\"]:first');\n\n if ($option.length) {\n this.statusMenu.selectOption($option[0]);\n }\n },\n\n getSortAttributeOption: function(attr) {\n return this.$sortAttributesList.find('a[data-attr=\"' + attr + '\"]:first');\n },\n\n getSelectedSortAttribute: function() {\n return this.$sortAttributesList.find('a.sel:first').data('attr');\n },\n\n setSortAttribute: function(attr) {\n // Find the option (and make sure it actually exists)\n var $option = this.getSortAttributeOption(attr);\n\n if ($option.length) {\n this.$sortAttributesList.find('a.sel').removeClass('sel');\n $option.addClass('sel');\n\n var label = $option.text();\n this.$sortMenuBtn.attr('title', Craft.t('app', 'Sort by {attribute}', {attribute: label}));\n this.$sortMenuBtn.text(label);\n\n if (attr === 'score') {\n this.setSortDirection('desc');\n } else {\n this.setSortDirection($option.data('default-dir') || 'asc');\n }\n\n if (attr === 'structure') {\n this.$sortDirectionsList.find('a').addClass('disabled');\n } else {\n this.$sortDirectionsList.find('a').removeClass('disabled');\n }\n }\n },\n\n getSortDirectionOption: function(dir) {\n return this.$sortDirectionsList.find('a[data-dir=' + dir + ']:first');\n },\n\n getSelectedSortDirection: function() {\n return this.$sortDirectionsList.find('a.sel:first').data('dir');\n },\n\n getSelectedViewMode: function() {\n return this.getSelectedSourceState('mode');\n },\n\n setSortDirection: function(dir) {\n if (dir !== 'desc') {\n dir = 'asc';\n }\n\n this.$sortMenuBtn.attr('data-icon', dir);\n this.$sortDirectionsList.find('a.sel').removeClass('sel');\n this.getSortDirectionOption(dir).addClass('sel');\n },\n\n getSourceByKey: function(key) {\n if (typeof this.sourcesByKey[key] === 'undefined') {\n return null;\n }\n\n return this.sourcesByKey[key];\n },\n\n selectSource: function($source) {\n if (!$source || !$source.length) {\n return false;\n }\n\n if (this.$source && this.$source[0] && this.$source[0] === $source[0] && $source.data('key') === this.sourceKey) {\n return false;\n }\n\n // Hide action triggers if they're currently being shown\n this.hideActionTriggers();\n\n this.$source = $source;\n this.sourceKey = $source.data('key');\n this.setInstanceState('selectedSource', this.sourceKey);\n this.sourceSelect.selectItem($source);\n\n Craft.cp.updateSidebarMenuLabel();\n\n if (this.searching) {\n // Clear the search value without causing it to update elements\n this.searchText = null;\n this.$search.val('');\n this.stopSearching();\n }\n\n // Sort menu\n // ----------------------------------------------------------------------\n\n // Remove any existing custom sort options from the menu\n this.$sortAttributesList.children('li[data-extra]').remove();\n\n // Does this source have any custom sort options?\n let sortOptions = this.$source.data('sort-options')\n if (sortOptions) {\n for (let i = 0; i < sortOptions.length; i++) {\n let $option = $('', {\n 'data-extra': true,\n })\n .append(\n $('', {\n text: sortOptions[i][0],\n 'data-attr': sortOptions[i][1],\n })\n )\n .appendTo(this.$sortAttributesList);\n this.sortMenu.addOptions($option.children());\n }\n }\n\n // Does this source have a structure?\n if (Garnish.hasAttr(this.$source, 'data-has-structure')) {\n if (!this.$structureSortAttribute) {\n this.$structureSortAttribute = $('' + Craft.t('app', 'Structure') + ' ');\n this.sortMenu.addOptions(this.$structureSortAttribute.children());\n }\n\n this.$structureSortAttribute.prependTo(this.$sortAttributesList);\n } else if (this.$structureSortAttribute) {\n this.$structureSortAttribute.removeClass('sel').detach();\n }\n\n this.setStoredSortOptionsForSource();\n\n // Status menu\n // ----------------------------------------------------------------------\n\n if (this.$statusMenuBtn.length) {\n if (Garnish.hasAttr(this.$source, 'data-override-status')) {\n this.$statusMenuContainer.addClass('hidden');\n } else {\n this.$statusMenuContainer.removeClass('hidden');\n }\n\n if (this.trashed) {\n // Swap to the initial status\n var $firstOption = this.statusMenu.$options.first();\n this.setStatus($firstOption.data('status'));\n }\n }\n\n // View mode buttons\n // ----------------------------------------------------------------------\n\n // Clear out any previous view mode data\n if (this.$viewModeBtnContainer) {\n this.$viewModeBtnContainer.remove();\n }\n\n this.viewModeBtns = {};\n this.viewMode = null;\n\n // Get the new list of view modes\n this.sourceViewModes = this.getViewModesForSource();\n\n // Create the buttons if there's more than one mode available to this source\n if (this.sourceViewModes.length > 1) {\n this.$viewModeBtnContainer = $('
').appendTo(this.$toolbar);\n\n for (var i = 0; i < this.sourceViewModes.length; i++) {\n let sourceViewMode = this.sourceViewModes[i];\n\n let $viewModeBtn = $('', {\n type: 'button',\n class: 'btn' + (typeof sourceViewMode.className !== 'undefined' ? ` ${sourceViewMode.className}` : ''),\n 'data-view': sourceViewMode.mode,\n 'data-icon': sourceViewMode.icon,\n }).appendTo(this.$viewModeBtnContainer);\n\n this.viewModeBtns[sourceViewMode.mode] = $viewModeBtn;\n\n this.addListener($viewModeBtn, 'click', {mode: sourceViewMode.mode}, function(ev) {\n this.selectViewMode(ev.data.mode);\n this.updateElements();\n });\n }\n }\n\n // Figure out which mode we should start with\n var viewMode = this.getSelectedViewMode();\n\n if (!viewMode || !this.doesSourceHaveViewMode(viewMode)) {\n // Try to keep using the current view mode\n if (this.viewMode && this.doesSourceHaveViewMode(this.viewMode)) {\n viewMode = this.viewMode;\n }\n // Just use the first one\n else {\n viewMode = this.sourceViewModes[0].mode;\n }\n }\n\n this.selectViewMode(viewMode);\n\n this.onSelectSource();\n\n return true;\n },\n\n selectSourceByKey: function(key) {\n var $source = this.getSourceByKey(key);\n\n if ($source) {\n return this.selectSource($source);\n } else {\n return false;\n }\n },\n\n setStoredSortOptionsForSource: function() {\n var sortAttr = this.getSelectedSourceState('order'),\n sortDir = this.getSelectedSourceState('sort');\n\n if (!sortAttr || !sortDir) {\n // Get the default\n sortAttr = this.getDefaultSort();\n\n if (Garnish.isArray(sortAttr)) {\n sortDir = sortAttr[1];\n sortAttr = sortAttr[0];\n }\n }\n\n if (sortDir !== 'asc' && sortDir !== 'desc') {\n sortDir = 'asc';\n }\n\n this.setSortAttribute(sortAttr);\n this.setSortDirection(sortDir);\n },\n\n getDefaultSort: function() {\n // Does the source specify what to do?\n if (this.$source && Garnish.hasAttr(this.$source, 'data-default-sort')) {\n return this.$source.attr('data-default-sort').split(':');\n } else {\n // Default to whatever's first\n return [this.$sortAttributesList.find('a:first').data('attr'), 'asc'];\n }\n },\n\n getViewModesForSource: function() {\n var viewModes = [\n {mode: 'table', title: Craft.t('app', 'Display in a table'), icon: 'list'}\n ];\n\n if (this.$source && Garnish.hasAttr(this.$source, 'data-has-thumbs')) {\n viewModes.push({mode: 'thumbs', title: Craft.t('app', 'Display as thumbnails'), icon: 'grid'});\n }\n\n return viewModes;\n },\n\n doesSourceHaveViewMode: function(viewMode) {\n for (var i = 0; i < this.sourceViewModes.length; i++) {\n if (this.sourceViewModes[i].mode === viewMode) {\n return true;\n }\n }\n\n return false;\n },\n\n selectViewMode: function(viewMode, force) {\n // Make sure that the current source supports it\n if (!force && !this.doesSourceHaveViewMode(viewMode)) {\n viewMode = this.sourceViewModes[0].mode;\n }\n\n // Has anything changed?\n if (viewMode === this.viewMode) {\n return;\n }\n\n // Deselect the previous view mode\n if (this.viewMode && typeof this.viewModeBtns[this.viewMode] !== 'undefined') {\n this.viewModeBtns[this.viewMode].removeClass('active');\n }\n\n this.viewMode = viewMode;\n this.setSelecetedSourceState('mode', this.viewMode);\n\n if (typeof this.viewModeBtns[this.viewMode] !== 'undefined') {\n this.viewModeBtns[this.viewMode].addClass('active');\n }\n },\n\n createView: function(mode, settings) {\n var viewClass = this.getViewClass(mode);\n return new viewClass(this, this.$elements, settings);\n },\n\n getViewClass: function(mode) {\n switch (mode) {\n case 'table':\n return Craft.TableElementIndexView;\n case 'thumbs':\n return Craft.ThumbsElementIndexView;\n default:\n throw 'View mode \"' + mode + '\" not supported.';\n }\n },\n\n rememberDisabledElementId: function(id) {\n var index = $.inArray(id, this.settings.disabledElementIds);\n\n if (index === -1) {\n this.settings.disabledElementIds.push(id);\n }\n },\n\n forgetDisabledElementId: function(id) {\n var index = $.inArray(id, this.settings.disabledElementIds);\n\n if (index !== -1) {\n this.settings.disabledElementIds.splice(index, 1);\n }\n },\n\n enableElements: function($elements) {\n $elements.removeClass('disabled').parents('.disabled').removeClass('disabled');\n\n for (var i = 0; i < $elements.length; i++) {\n var id = $($elements[i]).data('id');\n this.forgetDisabledElementId(id);\n }\n\n this.onEnableElements($elements);\n },\n\n disableElements: function($elements) {\n $elements.removeClass('sel').addClass('disabled');\n\n for (var i = 0; i < $elements.length; i++) {\n var id = $($elements[i]).data('id');\n this.rememberDisabledElementId(id);\n }\n\n this.onDisableElements($elements);\n },\n\n getElementById: function(id) {\n return this.view.getElementById(id);\n },\n\n enableElementsById: function(ids) {\n ids = $.makeArray(ids);\n\n for (var i = 0; i < ids.length; i++) {\n var id = ids[i],\n $element = this.getElementById(id);\n\n if ($element && $element.length) {\n this.enableElements($element);\n } else {\n this.forgetDisabledElementId(id);\n }\n }\n },\n\n disableElementsById: function(ids) {\n ids = $.makeArray(ids);\n\n for (var i = 0; i < ids.length; i++) {\n var id = ids[i],\n $element = this.getElementById(id);\n\n if ($element && $element.length) {\n this.disableElements($element);\n } else {\n this.rememberDisabledElementId(id);\n }\n }\n },\n\n selectElementAfterUpdate: function(id) {\n if (this._autoSelectElements === null) {\n this._autoSelectElements = [];\n }\n\n this._autoSelectElements.push(id);\n },\n\n addButton: function($button) {\n this.getButtonContainer().append($button);\n },\n\n isShowingSidebar: function() {\n if (this.showingSidebar === null) {\n this.showingSidebar = (this.$sidebar.length && !this.$sidebar.hasClass('hidden'));\n }\n\n return this.showingSidebar;\n },\n\n getButtonContainer: function() {\n // Is there a predesignated place where buttons should go?\n if (this.settings.buttonContainer) {\n return $(this.settings.buttonContainer);\n } else {\n var $container = $('#action-button');\n\n if (!$container.length) {\n $container = $('
').appendTo($('#header'));\n }\n\n return $container;\n }\n },\n\n setIndexBusy: function() {\n this.$elements.addClass('busy');\n this.isIndexBusy = true;\n },\n\n setIndexAvailable: function() {\n this.$elements.removeClass('busy');\n this.isIndexBusy = false;\n },\n\n createCustomizeSourcesModal: function() {\n // Recreate it each time\n var modal = new Craft.CustomizeSourcesModal(this, {\n onHide: function() {\n modal.destroy();\n }\n });\n\n return modal;\n },\n\n disable: function() {\n if (this.sourceSelect) {\n this.sourceSelect.disable();\n }\n\n if (this.view) {\n this.view.disable();\n }\n\n this.base();\n },\n\n enable: function() {\n if (this.sourceSelect) {\n this.sourceSelect.enable();\n }\n\n if (this.view) {\n this.view.enable();\n }\n\n this.base();\n },\n\n onAfterInit: function() {\n this.settings.onAfterInit();\n this.trigger('afterInit');\n },\n\n onSelectSource: function() {\n this.settings.onSelectSource(this.sourceKey);\n this.trigger('selectSource', {sourceKey: this.sourceKey});\n },\n\n onSelectSite: function() {\n this.settings.onSelectSite(this.siteId);\n this.trigger('selectSite', {siteId: this.siteId});\n },\n\n onUpdateElements: function() {\n this.settings.onUpdateElements();\n this.trigger('updateElements');\n },\n\n onSelectionChange: function() {\n this.settings.onSelectionChange();\n this.trigger('selectionChange');\n },\n\n onEnableElements: function($elements) {\n this.settings.onEnableElements($elements);\n this.trigger('enableElements', {elements: $elements});\n },\n\n onDisableElements: function($elements) {\n this.settings.onDisableElements($elements);\n this.trigger('disableElements', {elements: $elements});\n },\n\n onAfterAction: function(action, params) {\n this.settings.onAfterAction(action, params);\n this.trigger('afterAction', {action: action, params: params});\n },\n\n // UI state handlers\n // -------------------------------------------------------------------------\n\n _handleSourceSelectionChange: function() {\n // If the selected source was just removed (maybe because its parent was collapsed),\n // there won't be a selected source\n if (!this.sourceSelect.totalSelected) {\n this.sourceSelect.selectItem(this.$visibleSources.first());\n return;\n }\n\n if (this.selectSource(this.sourceSelect.$selectedItems)) {\n this.updateElements();\n }\n },\n\n _handleActionTriggerSubmit: function(ev) {\n ev.preventDefault();\n\n var $form = $(ev.currentTarget);\n\n // Make sure Craft.ElementActionTrigger isn't overriding this\n if ($form.hasClass('disabled') || $form.data('custom-handler')) {\n return;\n }\n\n this.submitAction($form.data('action'), Garnish.getPostData($form));\n },\n\n _handleMenuActionTriggerSubmit: function(ev) {\n var $option = $(ev.option);\n\n // Make sure Craft.ElementActionTrigger isn't overriding this\n if ($option.hasClass('disabled') || $option.data('custom-handler')) {\n return;\n }\n\n this.submitAction($option.data('action'));\n },\n\n _handleStatusChange: function(ev) {\n this.statusMenu.$options.removeClass('sel');\n var $option = $(ev.selectedOption).addClass('sel');\n this.$statusMenuBtn.html($option.html());\n\n this.trashed = false;\n this.drafts = false;\n this.status = null;\n\n if (Garnish.hasAttr($option, 'data-trashed')) {\n this.trashed = true;\n } else if (Garnish.hasAttr($option, 'data-drafts')) {\n this.drafts = true;\n } else {\n this.status = $option.data('status');\n }\n\n this._updateStructureSortOption();\n this.updateElements();\n },\n\n _handleSiteChange: function(ev) {\n this.siteMenu.$options.removeClass('sel');\n var $option = $(ev.selectedOption).addClass('sel');\n this.$siteMenuBtn.html($option.html());\n this._setSite($option.data('site-id'));\n this.onSelectSite();\n },\n\n _setSite: function(siteId) {\n this.siteId = siteId;\n this.$visibleSources = $();\n\n // Hide any sources that aren't available for this site\n var $firstVisibleSource;\n var $source;\n var selectNewSource = false;\n\n for (var i = 0; i < this.$sources.length; i++) {\n $source = this.$sources.eq(i);\n if (typeof $source.data('sites') === 'undefined' || $source.data('sites').toString().split(',').indexOf(siteId.toString()) !== -1) {\n $source.parent().removeClass('hidden');\n this.$visibleSources = this.$visibleSources.add($source);\n if (!$firstVisibleSource) {\n $firstVisibleSource = $source;\n }\n } else {\n $source.parent().addClass('hidden');\n\n // Is this the currently selected source?\n if (this.$source && this.$source.get(0) == $source.get(0)) {\n selectNewSource = true;\n }\n }\n }\n\n if (selectNewSource) {\n this.selectSource($firstVisibleSource);\n }\n\n // Hide any empty-nester headings\n var $headings = this.getSourceContainer().children('.heading');\n var $heading;\n\n for (i = 0; i < $headings.length; i++) {\n $heading = $headings.eq(i);\n if ($heading.nextUntil('.heading', ':not(.hidden)').length !== 0) {\n $heading.removeClass('hidden');\n } else {\n $heading.addClass('hidden');\n }\n }\n\n if (this.initialized) {\n if (this.settings.context === 'index') {\n // Remember this site for later\n Craft.cp.setSiteId(siteId);\n }\n\n // Update the elements\n this.updateElements();\n }\n },\n\n _handleSortChange: function(ev) {\n var $option = $(ev.selectedOption);\n\n if ($option.hasClass('disabled') || $option.hasClass('sel')) {\n return;\n }\n\n // Is this an attribute or a direction?\n if ($option.parent().parent().is(this.$sortAttributesList)) {\n this.setSortAttribute($option.data('attr'));\n } else {\n this.setSortDirection($option.data('dir'));\n }\n\n this.storeSortAttributeAndDirection();\n this.updateElements();\n },\n\n _handleSelectionChange: function() {\n this.updateActionTriggers();\n this.onSelectionChange();\n },\n\n _handleSourceDblClick: function(ev) {\n this._toggleSource($(ev.currentTarget));\n ev.stopPropagation();\n },\n\n _handleSourceToggleClick: function(ev) {\n this._toggleSource($(ev.currentTarget).prev('a'));\n ev.stopPropagation();\n },\n\n _updateStructureSortOption: function() {\n var $option = this.getSortAttributeOption('structure');\n\n if (!$option.length) {\n return;\n }\n\n if (this.trashed || this.drafts || this.searching) {\n $option.addClass('disabled');\n if (this.getSelectedSortAttribute() === 'structure') {\n // Temporarily set the sort to the first option\n var $firstOption = this.$sortAttributesList.find('a:not(.disabled):first')\n this.setSortAttribute($firstOption.data('attr'));\n this.setSortDirection('asc');\n }\n } else {\n $option.removeClass('disabled');\n this.setStoredSortOptionsForSource();\n }\n },\n\n // Source managemnet\n // -------------------------------------------------------------------------\n\n _getSourcesInList: function($list) {\n return $list.children('li').children('a');\n },\n\n _getChildSources: function($source) {\n var $list = $source.siblings('ul');\n return this._getSourcesInList($list);\n },\n\n _getSourceToggle: function($source) {\n return $source.siblings('.toggle');\n },\n\n _initSources: function($sources) {\n for (var i = 0; i < $sources.length; i++) {\n this.initSource($($sources[i]));\n }\n },\n\n _deinitSources: function($sources) {\n for (var i = 0; i < $sources.length; i++) {\n this.deinitSource($($sources[i]));\n }\n },\n\n _toggleSource: function($source) {\n if ($source.parent('li').hasClass('expanded')) {\n this._collapseSource($source);\n } else {\n this._expandSource($source);\n }\n },\n\n _expandSource: function($source) {\n $source.parent('li').addClass('expanded');\n\n var $childSources = this._getChildSources($source);\n this._initSources($childSources);\n\n var key = $source.data('key');\n if (this.instanceState.expandedSources.indexOf(key) === -1) {\n this.instanceState.expandedSources.push(key);\n this.storeInstanceState();\n }\n },\n\n _collapseSource: function($source) {\n $source.parent('li').removeClass('expanded');\n\n var $childSources = this._getChildSources($source);\n this._deinitSources($childSources);\n\n var i = this.instanceState.expandedSources.indexOf($source.data('key'));\n if (i !== -1) {\n this.instanceState.expandedSources.splice(i, 1);\n this.storeInstanceState();\n }\n },\n\n // View\n // -------------------------------------------------------------------------\n\n _isViewPaginated: function() {\n return this.settings.context === 'index' && this.getSelectedSortAttribute() !== 'structure';\n },\n\n _updateView: function(params, response) {\n // Cleanup\n // -------------------------------------------------------------\n\n // Get rid of the old action triggers regardless of whether the new batch has actions or not\n if (this.actions) {\n this.hideActionTriggers();\n this.actions = this.actionsHeadHtml = this.actionsFootHtml = this._$triggers = null;\n }\n\n // Update the count text\n // -------------------------------------------------------------\n\n if (this.$countContainer.length) {\n this.$countSpinner.removeClass('hidden');\n this.$countContainer.html('');\n\n this._countResults()\n .then((total) => {\n this.$countSpinner.addClass('hidden');\n\n let itemLabel = Craft.elementTypeNames[this.elementType] ? Craft.elementTypeNames[this.elementType][2] : 'element';\n let itemsLabel = Craft.elementTypeNames[this.elementType] ? Craft.elementTypeNames[this.elementType][3] : 'elements';\n\n if (!this._isViewPaginated()) {\n let countLabel = Craft.t('app', '{total, number} {total, plural, =1{{item}} other{{items}}}', {\n total: total,\n item: itemLabel,\n items: itemsLabel,\n });\n this.$countContainer.text(countLabel);\n } else {\n let first = Math.min(this.settings.batchSize * (this.page - 1) + 1, total);\n let last = Math.min(first + (this.settings.batchSize - 1), total);\n let countLabel = Craft.t('app', '{first, number}-{last, number} of {total, number} {total, plural, =1{{item}} other{{items}}}', {\n first: first,\n last: last,\n total: total,\n item: itemLabel,\n items: itemsLabel,\n });\n\n let $paginationContainer = $('').appendTo(this.$countContainer);\n let totalPages = Math.max(Math.ceil(total / this.settings.batchSize), 1);\n\n let $prevBtn = $('', {\n 'class': 'page-link prev-page' + (this.page > 1 ? '' : ' disabled'),\n title: Craft.t('app', 'Previous Page')\n }).appendTo($paginationContainer);\n let $nextBtn = $('', {\n 'class': 'page-link next-page' + (this.page < totalPages ? '' : ' disabled'),\n title: Craft.t('app', 'Next Page')\n }).appendTo($paginationContainer);\n\n $('', {\n 'class': 'page-info',\n text: countLabel\n }).appendTo($paginationContainer);\n\n if (this.page > 1) {\n this.addListener($prevBtn, 'click', function() {\n this.removeListener($prevBtn, 'click');\n this.removeListener($nextBtn, 'click');\n this.setPage(this.page - 1);\n this.updateElements(true);\n });\n }\n\n if (this.page < totalPages) {\n this.addListener($nextBtn, 'click', function() {\n this.removeListener($prevBtn, 'click');\n this.removeListener($nextBtn, 'click');\n this.setPage(this.page + 1);\n this.updateElements(true);\n });\n }\n }\n })\n .catch(() => {\n this.$countSpinner.addClass('hidden');\n });\n }\n\n // Update the view with the new container + elements HTML\n // -------------------------------------------------------------\n\n this.$elements.html(response.html);\n Craft.appendHeadHtml(response.headHtml);\n Craft.appendFootHtml(response.footHtml);\n\n // Batch actions setup\n // -------------------------------------------------------------\n\n this.$selectAllContainer = this.$elements.find('.selectallcontainer:first');\n\n if (response.actions && response.actions.length) {\n if (this.$selectAllContainer.length) {\n this.actions = response.actions;\n this.actionsHeadHtml = response.actionsHeadHtml;\n this.actionsFootHtml = response.actionsFootHtml;\n\n // Create the select all checkbox\n this.$selectAllCheckbox = $('
').prependTo(this.$selectAllContainer);\n\n this.$selectAllContainer.attr({\n 'role': 'checkbox',\n 'tabindex': '0',\n 'aria-checked': 'false'\n });\n\n this.addListener(this.$selectAllContainer, 'click', function() {\n if (this.view.getSelectedElements().length === 0) {\n this.view.selectAllElements();\n } else {\n this.view.deselectAllElements();\n }\n });\n\n this.addListener(this.$selectAllContainer, 'keydown', function(ev) {\n if (ev.keyCode === Garnish.SPACE_KEY) {\n ev.preventDefault();\n\n $(ev.currentTarget).trigger('click');\n }\n });\n }\n } else {\n if (!this.$selectAllContainer.siblings().length) {\n this.$selectAllContainer.parent('.header').remove();\n }\n this.$selectAllContainer.remove();\n }\n\n // Exporters setup\n // -------------------------------------------------------------\n\n this.exporters = response.exporters;\n\n if (this.exporters && this.exporters.length) {\n this.$exportBtn.removeClass('hidden');\n } else {\n this.$exportBtn.addClass('hidden');\n }\n\n // Create the view\n // -------------------------------------------------------------\n\n // Should we make the view selectable?\n var selectable = (this.actions || this.settings.selectable);\n\n this.view = this.createView(this.getSelectedViewMode(), {\n context: this.settings.context,\n batchSize: this.settings.context !== 'index' || this.getSelectedSortAttribute() === 'structure' ? this.settings.batchSize : null,\n params: params,\n selectable: selectable,\n multiSelect: (this.actions || this.settings.multiSelect),\n checkboxMode: !!this.actions,\n onSelectionChange: $.proxy(this, '_handleSelectionChange')\n });\n\n // Auto-select elements\n // -------------------------------------------------------------\n\n if (this._autoSelectElements) {\n if (selectable) {\n for (var i = 0; i < this._autoSelectElements.length; i++) {\n this.view.selectElementById(this._autoSelectElements[i]);\n }\n }\n\n this._autoSelectElements = null;\n }\n\n // Trigger the event\n // -------------------------------------------------------------\n\n this.onUpdateElements();\n },\n\n _countResults: function() {\n return new Promise((resolve, reject) => {\n if (this.totalResults !== null) {\n resolve(this.totalResults);\n } else {\n var params = this.getViewParams();\n delete params.criteria.offset;\n delete params.criteria.limit;\n\n // Make sure we've got an active result set ID\n if (this.resultSet === null) {\n this.resultSet = Math.floor(Math.random() * 100000000);\n }\n params.resultSet = this.resultSet;\n\n Craft.sendActionRequest('POST', this.settings.countElementsAction, {\n data: params,\n cancelToken: this._createCancelToken(),\n }).then((response) => {\n if (response.data.resultSet == this.resultSet) {\n this.totalResults = response.data.count;\n resolve(response.data.count);\n } else {\n reject();\n }\n }).catch(reject);\n }\n });\n },\n\n _createTriggers: function() {\n var triggers = [],\n safeMenuActions = [],\n destructiveMenuActions = [];\n\n var i;\n\n for (i = 0; i < this.actions.length; i++) {\n var action = this.actions[i];\n\n if (action.trigger) {\n var $form = $('')\n .data('action', action)\n .append(action.trigger);\n\n this.addListener($form, 'submit', '_handleActionTriggerSubmit');\n triggers.push($form);\n } else {\n if (!action.destructive) {\n safeMenuActions.push(action);\n } else {\n destructiveMenuActions.push(action);\n }\n }\n }\n\n var $btn;\n\n if (safeMenuActions.length || destructiveMenuActions.length) {\n var $menuTrigger = $('');\n\n $btn = $('', {\n type: 'button',\n class: 'btn menubtn',\n 'data-icon': 'settings',\n title: Craft.t('app', 'Actions'),\n }).appendTo($menuTrigger);\n\n var $menu = $('
- ').appendTo($menuTrigger),\n $safeList = this._createMenuTriggerList(safeMenuActions, false),\n $destructiveList = this._createMenuTriggerList(destructiveMenuActions, true);\n\n if ($safeList) {\n $safeList.appendTo($menu);\n }\n\n if ($safeList && $destructiveList) {\n $('
').appendTo($menu);\n }\n\n if ($destructiveList) {\n $destructiveList.appendTo($menu);\n }\n\n triggers.push($menuTrigger);\n }\n\n this._$triggers = $();\n\n for (i = 0; i < triggers.length; i++) {\n var $div = $('').append(triggers[i]);\n this._$triggers = this._$triggers.add($div);\n }\n\n this._$triggers.appendTo(this.$toolbar);\n Craft.appendHeadHtml(this.actionsHeadHtml);\n Craft.appendFootHtml(this.actionsFootHtml);\n\n Craft.initUiElements(this._$triggers);\n\n if ($btn) {\n $btn.data('menubtn').on('optionSelect', $.proxy(this, '_handleMenuActionTriggerSubmit'));\n }\n },\n\n _showExportHud: function() {\n this.$exportBtn.addClass('active');\n\n var $form = $('
' +\n '' +\n '
'\n ).insertAfter(this.$container);\n\n // Get the actual elements container and its child elements\n this.$elementContainer = this.getElementContainer();\n var $elements = this.$elementContainer.children();\n\n this.setTotalVisible($elements.length);\n this.setMorePending(this.settings.batchSize && $elements.length == this.settings.batchSize);\n\n // Instantiate the thumb loader\n this.thumbLoader = new Craft.ElementThumbLoader();\n this.thumbLoader.load($elements);\n\n if (this.settings.selectable) {\n this.elementSelect = new Garnish.Select(\n this.$elementContainer,\n $elements.filter(':not(.disabled)'),\n {\n multi: this.settings.multiSelect,\n vertical: this.isVerticalList(),\n handle: (this.settings.context === 'index' ? '.checkbox, .element:first' : null),\n filter: ':not(a):not(.toggle)',\n checkboxMode: this.settings.checkboxMode,\n onSelectionChange: $.proxy(this, 'onSelectionChange')\n }\n );\n\n this._handleEnableElements = $.proxy(function(ev) {\n this.elementSelect.addItems(ev.elements);\n }, this);\n\n this._handleDisableElements = $.proxy(function(ev) {\n this.elementSelect.removeItems(ev.elements);\n }, this);\n\n this.elementIndex.on('enableElements', this._handleEnableElements);\n this.elementIndex.on('disableElements', this._handleDisableElements);\n }\n\n // Enable inline element editing if this is an index page\n if (this.settings.context === 'index') {\n this._handleElementEditing = $.proxy(function(ev) {\n var $target = $(ev.target);\n\n if ($target.prop('nodeName') === 'A') {\n // Let the link do its thing\n return;\n }\n\n var $element;\n\n if ($target.hasClass('element')) {\n $element = $target;\n }\n else {\n $element = $target.closest('.element');\n\n if (!$element.length) {\n return;\n }\n }\n\n if (Garnish.hasAttr($element, 'data-editable')) {\n this.createElementEditor($element);\n }\n }, this);\n\n if (!this.elementIndex.trashed) {\n this.addListener(this.$elementContainer, 'dblclick', this._handleElementEditing);\n if ($.isTouchCapable()) {\n this.addListener(this.$elementContainer, 'taphold', this._handleElementEditing);\n }\n }\n }\n\n // Give sub-classes a chance to do post-initialization stuff here\n this.afterInit();\n\n // Set up lazy-loading\n if (this.settings.batchSize) {\n if (this.settings.context === 'index') {\n this.$scroller = Garnish.$scrollContainer;\n }\n else {\n this.$scroller = this.elementIndex.$main;\n }\n\n this.$scroller.scrollTop(0);\n this.addListener(this.$scroller, 'scroll', 'maybeLoadMore');\n this.maybeLoadMore();\n }\n },\n\n getElementContainer: function() {\n throw 'Classes that extend Craft.BaseElementIndexView must supply a getElementContainer() method.';\n },\n\n afterInit: function() {\n },\n\n getAllElements: function() {\n return this.$elementContainer.children();\n },\n\n getEnabledElements: function() {\n return this.$elementContainer.children(':not(.disabled)');\n },\n\n getElementById: function(id) {\n var $element = this.$elementContainer.children('[data-id=\"' + id + '\"]:first');\n\n if ($element.length) {\n return $element;\n }\n else {\n return null;\n }\n },\n\n getSelectedElements: function() {\n if (!this.elementSelect) {\n throw 'This view is not selectable.';\n }\n\n return this.elementSelect.$selectedItems;\n },\n\n getSelectedElementIds: function() {\n let $selectedElements;\n try {\n $selectedElements = this.getSelectedElements();\n } catch (e) {\n }\n\n let ids = [];\n if ($selectedElements) {\n for (var i = 0; i < $selectedElements.length; i++) {\n ids.push($selectedElements.eq(i).data('id'));\n }\n }\n return ids;\n },\n\n selectElement: function($element) {\n if (!this.elementSelect) {\n throw 'This view is not selectable.';\n }\n\n this.elementSelect.selectItem($element, true);\n return true;\n },\n\n selectElementById: function(id) {\n if (!this.elementSelect) {\n throw 'This view is not selectable.';\n }\n\n var $element = this.getElementById(id);\n\n if ($element) {\n this.elementSelect.selectItem($element, true);\n return true;\n }\n else {\n return false;\n }\n },\n\n selectAllElements: function() {\n this.elementSelect.selectAll();\n },\n\n deselectAllElements: function() {\n this.elementSelect.deselectAll();\n },\n\n isVerticalList: function() {\n return false;\n },\n\n getTotalVisible: function() {\n return this._totalVisible;\n },\n\n setTotalVisible: function(totalVisible) {\n this._totalVisible = totalVisible;\n },\n\n getMorePending: function() {\n return this._morePending;\n },\n\n setMorePending: function(morePending) {\n this._morePending = morePending;\n },\n\n /**\n * Checks if the user has reached the bottom of the scroll area, and if so, loads the next batch of elemets.\n */\n maybeLoadMore: function() {\n if (this.canLoadMore()) {\n this.loadMore();\n }\n },\n\n /**\n * Returns whether the user has reached the bottom of the scroll area.\n */\n canLoadMore: function() {\n if (!this.getMorePending() || !this.settings.batchSize) {\n return false;\n }\n\n // Check if the user has reached the bottom of the scroll area\n var containerHeight;\n\n if (this.$scroller[0] === Garnish.$win[0]) {\n var winHeight = Garnish.$win.innerHeight(),\n winScrollTop = Garnish.$win.scrollTop(),\n containerOffset = this.$container.offset().top;\n containerHeight = this.$container.height();\n\n return (winHeight + winScrollTop >= containerOffset + containerHeight);\n }\n else {\n var containerScrollHeight = this.$scroller.prop('scrollHeight'),\n containerScrollTop = this.$scroller.scrollTop();\n containerHeight = this.$scroller.outerHeight();\n\n return (containerScrollHeight - containerScrollTop <= containerHeight + 15);\n }\n },\n\n /**\n * Loads the next batch of elements.\n */\n loadMore: function() {\n if (!this.getMorePending() || this.loadingMore || !this.settings.batchSize) {\n return;\n }\n\n this.loadingMore = true;\n this.$loadingMoreSpinner.removeClass('hidden');\n this.removeListener(this.$scroller, 'scroll');\n\n var data = this.getLoadMoreParams();\n\n Craft.postActionRequest(this.settings.loadMoreElementsAction, data, $.proxy(function(response, textStatus) {\n this.loadingMore = false;\n this.$loadingMoreSpinner.addClass('hidden');\n\n if (textStatus === 'success') {\n var $newElements = $(response.html);\n\n this.appendElements($newElements);\n Craft.appendHeadHtml(response.headHtml);\n Craft.appendFootHtml(response.footHtml);\n\n if (this.elementSelect) {\n this.elementSelect.addItems($newElements.filter(':not(.disabled)'));\n this.elementIndex.updateActionTriggers();\n }\n\n this.setTotalVisible(this.getTotalVisible() + $newElements.length);\n this.setMorePending($newElements.length == this.settings.batchSize);\n\n // Is there room to load more right now?\n this.addListener(this.$scroller, 'scroll', 'maybeLoadMore');\n this.maybeLoadMore();\n }\n }, this));\n },\n\n getLoadMoreParams: function() {\n // Use the same params that were passed when initializing this view\n var params = $.extend(true, {}, this.settings.params);\n params.criteria.offset = this.getTotalVisible();\n return params;\n },\n\n appendElements: function($newElements) {\n $newElements.appendTo(this.$elementContainer);\n this.thumbLoader.load($newElements);\n this.onAppendElements($newElements);\n },\n\n onAppendElements: function($newElements) {\n this.settings.onAppendElements($newElements);\n this.trigger('appendElements', {\n newElements: $newElements\n });\n },\n\n onSelectionChange: function() {\n this.settings.onSelectionChange();\n this.trigger('selectionChange');\n },\n\n createElementEditor: function($element) {\n Craft.createElementEditor($element.data('type'), $element, {\n elementIndex: this.elementIndex\n });\n },\n\n disable: function() {\n if (this.elementSelect) {\n this.elementSelect.disable();\n }\n },\n\n enable: function() {\n if (this.elementSelect) {\n this.elementSelect.enable();\n }\n },\n\n destroy: function() {\n // Remove the \"loading-more\" spinner, since we added that outside of the view container\n this.$loadingMoreSpinner.remove();\n\n // Kill the thumb loader\n this.thumbLoader.destroy();\n delete this.thumbLoader;\n\n // Delete the element select\n if (this.elementSelect) {\n this.elementIndex.off('enableElements', this._handleEnableElements);\n this.elementIndex.off('disableElements', this._handleDisableElements);\n\n this.elementSelect.destroy();\n delete this.elementSelect;\n }\n\n this.base();\n }\n },\n {\n defaults: {\n context: 'index',\n batchSize: null,\n params: null,\n selectable: false,\n multiSelect: false,\n checkboxMode: false,\n loadMoreElementsAction: 'element-indexes/get-more-elements',\n onAppendElements: $.noop,\n onSelectionChange: $.noop\n }\n });\n\n/** global: Craft */\n/** global: Garnish */\n/**\n * Element Select input\n */\nCraft.BaseElementSelectInput = Garnish.Base.extend(\n {\n thumbLoader: null,\n elementSelect: null,\n elementSort: null,\n modal: null,\n elementEditor: null,\n\n $container: null,\n $elementsContainer: null,\n $elements: null,\n $addElementBtn: null,\n\n _initialized: false,\n\n init: function(settings) {\n // Normalize the settings and set them\n // ---------------------------------------------------------------------\n\n // Are they still passing in a bunch of arguments?\n if (!$.isPlainObject(settings)) {\n // Loop through all of the old arguments and apply them to the settings\n var normalizedSettings = {},\n args = ['id', 'name', 'elementType', 'sources', 'criteria', 'sourceElementId', 'limit', 'modalStorageKey', 'fieldId'];\n\n for (var i = 0; i < args.length; i++) {\n if (typeof arguments[i] !== 'undefined') {\n normalizedSettings[args[i]] = arguments[i];\n }\n else {\n break;\n }\n }\n\n settings = normalizedSettings;\n }\n\n this.setSettings(settings, Craft.BaseElementSelectInput.defaults);\n\n // Apply the storage key prefix\n if (this.settings.modalStorageKey) {\n this.modalStorageKey = 'BaseElementSelectInput.' + this.settings.modalStorageKey;\n }\n\n // No reason for this to be sortable if we're only allowing 1 selection\n if (this.settings.limit == 1) {\n this.settings.sortable = false;\n }\n\n this.$container = this.getContainer();\n\n // Store a reference to this class\n this.$container.data('elementSelect', this);\n\n this.$elementsContainer = this.getElementsContainer();\n this.$addElementBtn = this.getAddElementsBtn();\n\n if (this.$addElementBtn && this.settings.limit == 1) {\n this.$addElementBtn\n .css('position', 'absolute')\n .css('top', 0)\n .css(Craft.left, 0);\n }\n\n this.thumbLoader = new Craft.ElementThumbLoader();\n\n this.initElementSelect();\n this.initElementSort();\n this.resetElements();\n\n if (this.$addElementBtn) {\n this.addListener(this.$addElementBtn, 'activate', 'showModal');\n }\n\n this._initialized = true;\n },\n\n get totalSelected() {\n return this.$elements.length;\n },\n\n getContainer: function() {\n return $('#' + this.settings.id);\n },\n\n getElementsContainer: function() {\n return this.$container.children('.elements');\n },\n\n getElements: function() {\n return this.$elementsContainer.children();\n },\n\n getAddElementsBtn: function() {\n return this.$container.children('.btn.add');\n },\n\n initElementSelect: function() {\n if (this.settings.selectable) {\n this.elementSelect = new Garnish.Select({\n multi: this.settings.sortable,\n filter: ':not(.delete)'\n });\n }\n },\n\n initElementSort: function() {\n if (this.settings.sortable) {\n this.elementSort = new Garnish.DragSort({\n container: this.$elementsContainer,\n filter: (this.settings.selectable ? $.proxy(function() {\n // Only return all the selected items if the target item is selected\n if (this.elementSort.$targetItem.hasClass('sel')) {\n return this.elementSelect.getSelectedItems();\n }\n else {\n return this.elementSort.$targetItem;\n }\n }, this) : null),\n ignoreHandleSelector: '.delete',\n axis: this.getElementSortAxis(),\n collapseDraggees: true,\n magnetStrength: 4,\n helperLagBase: 1.5,\n onSortChange: (this.settings.selectable ? $.proxy(function() {\n this.elementSelect.resetItemOrder();\n }, this) : null)\n });\n }\n },\n\n getElementSortAxis: function() {\n return (this.settings.viewMode === 'list' ? 'y' : null);\n },\n\n canAddMoreElements: function() {\n return (!this.settings.limit || this.$elements.length < this.settings.limit);\n },\n\n updateAddElementsBtn: function() {\n if (this.canAddMoreElements()) {\n this.enableAddElementsBtn();\n }\n else {\n this.disableAddElementsBtn();\n }\n },\n\n disableAddElementsBtn: function() {\n if (this.$addElementBtn && !this.$addElementBtn.hasClass('disabled')) {\n this.$addElementBtn.addClass('disabled');\n\n if (this.settings.limit == 1) {\n if (this._initialized) {\n this.$addElementBtn.velocity('fadeOut', Craft.BaseElementSelectInput.ADD_FX_DURATION);\n }\n else {\n this.$addElementBtn.hide();\n }\n }\n }\n },\n\n enableAddElementsBtn: function() {\n if (this.$addElementBtn && this.$addElementBtn.hasClass('disabled')) {\n this.$addElementBtn.removeClass('disabled');\n\n if (this.settings.limit == 1) {\n if (this._initialized) {\n this.$addElementBtn.velocity('fadeIn', Craft.BaseElementSelectInput.REMOVE_FX_DURATION);\n }\n else {\n this.$addElementBtn.show();\n }\n }\n }\n },\n\n resetElements: function() {\n if (this.$elements !== null) {\n this.removeElements(this.$elements);\n } else {\n this.$elements = $();\n }\n\n this.addElements(this.getElements());\n },\n\n addElements: function($elements) {\n this.thumbLoader.load($elements);\n\n if (this.settings.selectable) {\n this.elementSelect.addItems($elements);\n }\n\n if (this.settings.sortable) {\n this.elementSort.addItems($elements);\n }\n\n if (this.settings.editable) {\n this._handleShowElementEditor = $.proxy(function(ev) {\n var $element = $(ev.currentTarget);\n if (Garnish.hasAttr($element, 'data-editable') && !$element.hasClass('disabled') && !$element.hasClass('loading')) {\n this.elementEditor = this.createElementEditor($element);\n }\n }, this);\n\n this.addListener($elements, 'dblclick', this._handleShowElementEditor);\n\n if ($.isTouchCapable()) {\n this.addListener($elements, 'taphold', this._handleShowElementEditor);\n }\n }\n\n $elements.find('.delete').on('click dblclick', $.proxy(function(ev) {\n this.removeElement($(ev.currentTarget).closest('.element'));\n // Prevent this from acting as one of a double-click\n ev.stopPropagation();\n }, this));\n\n this.$elements = this.$elements.add($elements);\n this.updateAddElementsBtn();\n },\n\n createElementEditor: function($element, settings) {\n if (!settings) {\n settings = {};\n }\n settings.prevalidate = this.settings.prevalidate;\n return Craft.createElementEditor(this.settings.elementType, $element, settings);\n },\n\n removeElements: function($elements) {\n if (this.settings.selectable) {\n this.elementSelect.removeItems($elements);\n }\n\n if (this.modal) {\n var ids = [];\n\n for (var i = 0; i < $elements.length; i++) {\n var id = $elements.eq(i).data('id');\n\n if (id) {\n ids.push(id);\n }\n }\n\n if (ids.length) {\n this.modal.elementIndex.enableElementsById(ids);\n }\n }\n\n // Disable the hidden input in case the form is submitted before this element gets removed from the DOM\n $elements.children('input').prop('disabled', true);\n\n this.$elements = this.$elements.not($elements);\n this.updateAddElementsBtn();\n\n this.onRemoveElements();\n },\n\n removeElement: function($element) {\n this.removeElements($element);\n this.animateElementAway($element, function() {\n $element.remove();\n });\n },\n\n animateElementAway: function($element, callback) {\n $element.css('z-index', 0);\n\n var animateCss = {\n opacity: -1\n };\n animateCss['margin-' + Craft.left] = -($element.outerWidth() + parseInt($element.css('margin-' + Craft.right)));\n\n if (this.settings.viewMode === 'list' || this.$elements.length === 0) {\n animateCss['margin-bottom'] = -($element.outerHeight() + parseInt($element.css('margin-bottom')));\n }\n\n // Pause the draft editor\n if (window.draftEditor) {\n window.draftEditor.pause();\n }\n\n $element.velocity(animateCss, Craft.BaseElementSelectInput.REMOVE_FX_DURATION, () => {\n callback();\n\n // Resume the draft editor\n if (window.draftEditor) {\n window.draftEditor.resume();\n }\n });\n },\n\n showModal: function() {\n // Make sure we haven't reached the limit\n if (!this.canAddMoreElements()) {\n return;\n }\n\n if (!this.modal) {\n this.modal = this.createModal();\n }\n else {\n this.modal.show();\n }\n },\n\n createModal: function() {\n return Craft.createElementSelectorModal(this.settings.elementType, this.getModalSettings());\n },\n\n getModalSettings: function() {\n return $.extend({\n closeOtherModals: false,\n storageKey: this.modalStorageKey,\n sources: this.settings.sources,\n criteria: this.settings.criteria,\n multiSelect: (this.settings.limit != 1),\n showSiteMenu: this.settings.showSiteMenu,\n disabledElementIds: this.getDisabledElementIds(),\n onSelect: $.proxy(this, 'onModalSelect')\n }, this.settings.modalSettings);\n },\n\n getSelectedElementIds: function() {\n var ids = [];\n\n for (var i = 0; i < this.$elements.length; i++) {\n ids.push(this.$elements.eq(i).data('id'));\n }\n\n return ids;\n },\n\n getDisabledElementIds: function() {\n var ids = this.getSelectedElementIds();\n\n if (!this.settings.allowSelfRelations && this.settings.sourceElementId) {\n ids.push(this.settings.sourceElementId);\n }\n\n if (this.settings.disabledElementIds) {\n ids.push(...this.settings.disabledElementIds);\n }\n\n return ids;\n },\n\n onModalSelect: function(elements) {\n if (this.settings.limit) {\n // Cut off any excess elements\n var slotsLeft = this.settings.limit - this.$elements.length;\n\n if (elements.length > slotsLeft) {\n elements = elements.slice(0, slotsLeft);\n }\n }\n\n this.selectElements(elements);\n this.updateDisabledElementsInModal();\n },\n\n selectElements: function(elements) {\n for (let i = 0; i < elements.length; i++) {\n let elementInfo = elements[i],\n $element = this.createNewElement(elementInfo);\n\n this.appendElement($element);\n this.addElements($element);\n this.animateElementIntoPlace(elementInfo.$element, $element);\n\n // Override the element reference with the new one\n elementInfo.$element = $element;\n }\n\n this.onSelectElements(elements);\n },\n\n createNewElement: function(elementInfo) {\n var $element = elementInfo.$element.clone();\n\n // Make a couple tweaks\n Craft.setElementSize($element, (this.settings.viewMode === 'large' ? 'large' : 'small'));\n $element.addClass('removable');\n $element.prepend('' +\n '');\n\n return $element;\n },\n\n appendElement: function($element) {\n $element.appendTo(this.$elementsContainer);\n },\n\n animateElementIntoPlace: function($modalElement, $inputElement) {\n var origOffset = $modalElement.offset(),\n destOffset = $inputElement.offset(),\n $helper = $inputElement.clone().appendTo(Garnish.$bod);\n\n $inputElement.css('visibility', 'hidden');\n\n $helper.css({\n position: 'absolute',\n zIndex: 10000,\n top: origOffset.top,\n left: origOffset.left\n });\n\n var animateCss = {\n top: destOffset.top,\n left: destOffset.left\n };\n\n $helper.velocity(animateCss, Craft.BaseElementSelectInput.ADD_FX_DURATION, function() {\n $helper.remove();\n $inputElement.css('visibility', 'visible');\n });\n },\n\n updateDisabledElementsInModal: function() {\n if (this.modal.elementIndex) {\n this.modal.elementIndex.disableElementsById(this.getDisabledElementIds());\n }\n },\n\n getElementById: function(id) {\n for (var i = 0; i < this.$elements.length; i++) {\n var $element = this.$elements.eq(i);\n\n if ($element.data('id') == id) {\n return $element;\n }\n }\n },\n\n onSelectElements: function(elements) {\n this.trigger('selectElements', {elements: elements});\n this.settings.onSelectElements(elements);\n\n if (window.draftEditor) {\n window.draftEditor.checkForm();\n }\n },\n\n onRemoveElements: function() {\n this.trigger('removeElements');\n this.settings.onRemoveElements();\n }\n },\n {\n ADD_FX_DURATION: 200,\n REMOVE_FX_DURATION: 200,\n\n defaults: {\n id: null,\n name: null,\n fieldId: null,\n elementType: null,\n sources: null,\n criteria: {},\n allowSelfRelations: false,\n sourceElementId: null,\n disabledElementIds: null,\n viewMode: 'list',\n limit: null,\n showSiteMenu: false,\n modalStorageKey: null,\n modalSettings: {},\n onSelectElements: $.noop,\n onRemoveElements: $.noop,\n sortable: true,\n selectable: true,\n editable: true,\n prevalidate: false,\n editorSettings: {}\n }\n });\n\n/** global: Craft */\n/** global: Garnish */\n/**\n * Element selector modal class\n */\nCraft.BaseElementSelectorModal = Garnish.Modal.extend(\n {\n elementType: null,\n elementIndex: null,\n\n $body: null,\n $selectBtn: null,\n $sidebar: null,\n $sources: null,\n $sourceToggles: null,\n $main: null,\n $search: null,\n $elements: null,\n $tbody: null,\n $primaryButtons: null,\n $secondaryButtons: null,\n $cancelBtn: null,\n $footerSpinner: null,\n\n init: function(elementType, settings) {\n this.elementType = elementType;\n this.setSettings(settings, Craft.BaseElementSelectorModal.defaults);\n\n // Build the modal\n var $container = $('').appendTo(Garnish.$bod),\n $body = $('').appendTo($container),\n $footer = $('
').appendTo($container);\n\n this.base($container, this.settings);\n\n this.$footerSpinner = $('').appendTo($footer);\n this.$primaryButtons = $('').appendTo($footer);\n this.$secondaryButtons = $('').appendTo($footer);\n this.$cancelBtn = $('', {\n type: 'button',\n class: 'btn',\n text: Craft.t('app', 'Cancel'),\n }).appendTo(this.$primaryButtons);\n this.$selectBtn = $('', {\n type: 'button',\n class: 'btn disabled submit',\n text: Craft.t('app', 'Select'),\n }).appendTo(this.$primaryButtons);\n\n this.$body = $body;\n\n this.addListener(this.$cancelBtn, 'activate', 'cancel');\n this.addListener(this.$selectBtn, 'activate', 'selectElements');\n },\n\n onFadeIn: function() {\n if (!this.elementIndex) {\n this._createElementIndex();\n }\n else {\n // Auto-focus the Search box\n if (!Garnish.isMobileBrowser(true)) {\n this.elementIndex.$search.trigger('focus');\n }\n }\n\n this.base();\n },\n\n onSelectionChange: function() {\n this.updateSelectBtnState();\n },\n\n updateSelectBtnState: function() {\n if (this.$selectBtn) {\n if (this.elementIndex.getSelectedElements().length) {\n this.enableSelectBtn();\n }\n else {\n this.disableSelectBtn();\n }\n }\n },\n\n enableSelectBtn: function() {\n this.$selectBtn.removeClass('disabled');\n },\n\n disableSelectBtn: function() {\n this.$selectBtn.addClass('disabled');\n },\n\n enableCancelBtn: function() {\n this.$cancelBtn.removeClass('disabled');\n },\n\n disableCancelBtn: function() {\n this.$cancelBtn.addClass('disabled');\n },\n\n showFooterSpinner: function() {\n this.$footerSpinner.removeClass('hidden');\n },\n\n hideFooterSpinner: function() {\n this.$footerSpinner.addClass('hidden');\n },\n\n cancel: function() {\n if (!this.$cancelBtn.hasClass('disabled')) {\n this.hide();\n }\n },\n\n selectElements: function() {\n if (this.elementIndex && this.elementIndex.getSelectedElements().length) {\n // TODO: This code shouldn't know about views' elementSelect objects\n this.elementIndex.view.elementSelect.clearMouseUpTimeout();\n\n var $selectedElements = this.elementIndex.getSelectedElements(),\n elementInfo = this.getElementInfo($selectedElements);\n\n this.onSelect(elementInfo);\n\n if (this.settings.disableElementsOnSelect) {\n this.elementIndex.disableElements(this.elementIndex.getSelectedElements());\n }\n\n if (this.settings.hideOnSelect) {\n this.hide();\n }\n }\n },\n\n getElementInfo: function($selectedElements) {\n var info = [];\n\n for (var i = 0; i < $selectedElements.length; i++) {\n var $element = $($selectedElements[i]);\n var elementInfo = Craft.getElementInfo($element);\n\n info.push(elementInfo);\n }\n\n return info;\n },\n\n show: function() {\n this.updateSelectBtnState();\n this.base();\n },\n\n onSelect: function(elementInfo) {\n this.settings.onSelect(elementInfo);\n },\n\n disable: function() {\n if (this.elementIndex) {\n this.elementIndex.disable();\n }\n\n this.base();\n },\n\n enable: function() {\n if (this.elementIndex) {\n this.elementIndex.enable();\n }\n\n this.base();\n },\n\n _createElementIndex: function() {\n // Get the modal body HTML based on the settings\n var data = {\n context: 'modal',\n elementType: this.elementType,\n sources: this.settings.sources\n };\n\n if (this.settings.showSiteMenu !== null && this.settings.showSiteMenu !== 'auto') {\n data.showSiteMenu = this.settings.showSiteMenu ? '1' : '0';\n }\n\n Craft.postActionRequest('elements/get-modal-body', data, $.proxy(function(response, textStatus) {\n if (textStatus === 'success') {\n this.$body.html(response.html);\n\n if (this.$body.has('.sidebar:not(.hidden)').length) {\n this.$body.addClass('has-sidebar');\n }\n\n // Initialize the element index\n this.elementIndex = Craft.createElementIndex(this.elementType, this.$body, {\n context: 'modal',\n modal: this,\n storageKey: this.settings.storageKey,\n criteria: this.settings.criteria,\n disabledElementIds: this.settings.disabledElementIds,\n selectable: true,\n multiSelect: this.settings.multiSelect,\n buttonContainer: this.$secondaryButtons,\n onSelectionChange: $.proxy(this, 'onSelectionChange'),\n hideSidebar: this.settings.hideSidebar,\n defaultSiteId: this.settings.defaultSiteId,\n defaultSource: this.settings.defaultSource\n });\n\n // Double-clicking or double-tapping should select the elements\n this.addListener(this.elementIndex.$elements, 'doubletap', function(ev, touchData) {\n // Make sure the touch targets are the same\n // (they may be different if Command/Ctrl/Shift-clicking on multiple elements quickly)\n if (touchData.firstTap.target === touchData.secondTap.target) {\n this.selectElements();\n }\n });\n }\n }, this));\n }\n },\n {\n defaults: {\n resizable: true,\n storageKey: null,\n sources: null,\n criteria: null,\n multiSelect: false,\n showSiteMenu: null,\n disabledElementIds: [],\n disableElementsOnSelect: false,\n hideOnSelect: true,\n onCancel: $.noop,\n onSelect: $.noop,\n hideSidebar: false,\n defaultSiteId: null,\n defaultSource: null\n }\n });\n\n/** global: Craft */\n/** global: Garnish */\n/**\n * Input Generator\n */\nCraft.BaseInputGenerator = Garnish.Base.extend(\n {\n $source: null,\n $target: null,\n $form: null,\n settings: null,\n\n listening: null,\n timeout: null,\n\n init: function(source, target, settings) {\n this.$source = $(source);\n this.$target = $(target);\n this.$form = this.$source.closest('form');\n\n this.setSettings(settings);\n\n this.startListening();\n },\n\n setNewSource: function(source) {\n var listening = this.listening;\n this.stopListening();\n\n this.$source = $(source);\n\n if (listening) {\n this.startListening();\n }\n },\n\n startListening: function() {\n if (this.listening) {\n return;\n }\n\n this.listening = true;\n\n this.addListener(this.$source, 'input', 'onSourceTextChange');\n this.addListener(this.$target, 'input', 'onTargetTextChange');\n this.addListener(this.$form, 'submit', 'onFormSubmit');\n },\n\n stopListening: function() {\n if (!this.listening) {\n return;\n }\n\n this.listening = false;\n\n if (this.timeout) {\n clearTimeout(this.timeout);\n }\n\n this.removeAllListeners(this.$source);\n this.removeAllListeners(this.$target);\n this.removeAllListeners(this.$form);\n },\n\n onSourceTextChange: function() {\n if (this.timeout) {\n clearTimeout(this.timeout);\n }\n\n this.timeout = setTimeout($.proxy(this, 'updateTarget'), 250);\n },\n\n onTargetTextChange: function() {\n if (this.$target.get(0) === document.activeElement) {\n this.stopListening();\n }\n },\n\n onFormSubmit: function() {\n if (this.timeout) {\n clearTimeout(this.timeout);\n }\n\n this.updateTarget();\n },\n\n updateTarget: function() {\n if (!this.$target.is(':visible')) {\n return;\n }\n\n var sourceVal = this.$source.val();\n\n if (typeof sourceVal === 'undefined') {\n // The source input may not exist anymore\n return;\n }\n\n var targetVal = this.generateTargetValue(sourceVal);\n\n this.$target.val(targetVal);\n this.$target.trigger('change');\n this.$target.trigger('input');\n\n // If the target already has focus, select its whole value to mimic\n // the behavior if the value had already been generated and they just tabbed in\n if (this.$target.is(':focus')) {\n Craft.selectFullValue(this.$target);\n }\n },\n\n generateTargetValue: function(sourceVal) {\n return sourceVal;\n }\n });\n\n/** global: Craft */\n/** global: Garnish */\n/**\n * Admin table class\n */\nCraft.AdminTable = Garnish.Base.extend(\n {\n settings: null,\n totalItems: null,\n sorter: null,\n\n $noItems: null,\n $table: null,\n $tbody: null,\n $deleteBtns: null,\n\n init: function(settings) {\n this.setSettings(settings, Craft.AdminTable.defaults);\n\n if (!this.settings.allowDeleteAll) {\n this.settings.minItems = 1;\n }\n\n this.$noItems = $(this.settings.noItemsSelector);\n this.$table = $(this.settings.tableSelector);\n this.$tbody = this.$table.children('tbody');\n this.totalItems = this.$tbody.children().length;\n\n if (this.settings.sortable) {\n this.sorter = new Craft.DataTableSorter(this.$table, {\n onSortChange: $.proxy(this, 'reorderItems')\n });\n }\n\n this.$deleteBtns = this.$table.find('.delete:not(.disabled)');\n this.addListener(this.$deleteBtns, 'click', 'handleDeleteBtnClick');\n\n this.updateUI();\n },\n\n addRow: function(row) {\n if (this.settings.maxItems && this.totalItems >= this.settings.maxItems) {\n // Sorry pal.\n return;\n }\n\n var $row = $(row).appendTo(this.$tbody),\n $deleteBtn = $row.find('.delete');\n\n if (this.settings.sortable) {\n this.sorter.addItems($row);\n }\n\n this.$deleteBtns = this.$deleteBtns.add($deleteBtn);\n\n this.addListener($deleteBtn, 'click', 'handleDeleteBtnClick');\n this.totalItems++;\n\n this.updateUI();\n },\n\n reorderItems: function() {\n if (!this.settings.sortable) {\n return;\n }\n\n // Get the new field order\n var ids = [];\n\n for (var i = 0; i < this.sorter.$items.length; i++) {\n var id = $(this.sorter.$items[i]).attr(this.settings.idAttribute);\n ids.push(id);\n }\n\n // Send it to the server\n var data = {\n ids: JSON.stringify(ids)\n };\n\n Craft.postActionRequest(this.settings.reorderAction, data, $.proxy(function(response, textStatus) {\n if (textStatus === 'success') {\n if (response.success) {\n this.onReorderItems(ids);\n Craft.cp.displayNotice(Craft.t('app', this.settings.reorderSuccessMessage));\n }\n else {\n Craft.cp.displayError(Craft.t('app', this.settings.reorderFailMessage));\n }\n }\n }, this));\n },\n\n handleDeleteBtnClick: function(event) {\n if (this.settings.minItems && this.totalItems <= this.settings.minItems) {\n // Sorry pal.\n return;\n }\n\n var $row = $(event.target).closest('tr');\n\n if (this.confirmDeleteItem($row)) {\n this.deleteItem($row);\n }\n },\n\n confirmDeleteItem: function($row) {\n var name = this.getItemName($row);\n return confirm(Craft.t('app', this.settings.confirmDeleteMessage, {name: name}));\n },\n\n deleteItem: function($row) {\n var data = {\n id: this.getItemId($row)\n };\n\n Craft.postActionRequest(this.settings.deleteAction, data, $.proxy(function(response, textStatus) {\n if (textStatus === 'success') {\n this.handleDeleteItemResponse(response, $row);\n }\n }, this));\n },\n\n handleDeleteItemResponse: function(response, $row) {\n var id = this.getItemId($row),\n name = this.getItemName($row);\n\n if (response.success) {\n if (this.sorter) {\n this.sorter.removeItems($row);\n }\n\n $row.remove();\n this.totalItems--;\n this.updateUI();\n this.onDeleteItem(id);\n\n Craft.cp.displayNotice(Craft.t('app', this.settings.deleteSuccessMessage, {name: name}));\n }\n else {\n Craft.cp.displayError(Craft.t('app', this.settings.deleteFailMessage, {name: name}));\n }\n },\n\n onReorderItems: function(ids) {\n this.settings.onReorderItems(ids);\n },\n\n onDeleteItem: function(id) {\n this.settings.onDeleteItem(id);\n },\n\n getItemId: function($row) {\n return $row.attr(this.settings.idAttribute);\n },\n\n getItemName: function($row) {\n return Craft.escapeHtml($row.attr(this.settings.nameAttribute));\n },\n\n updateUI: function() {\n // Show the \"No Whatever Exists\" message if there aren't any\n if (this.totalItems === 0) {\n this.$table.hide();\n this.$noItems.removeClass('hidden');\n }\n else {\n this.$table.show();\n this.$noItems.addClass('hidden');\n }\n\n // Disable the sort buttons if there's only one row\n if (this.settings.sortable) {\n var $moveButtons = this.$table.find('.move');\n\n if (this.totalItems === 1) {\n $moveButtons.addClass('disabled');\n }\n else {\n $moveButtons.removeClass('disabled');\n }\n }\n\n // Disable the delete buttons if we've reached the minimum items\n if (this.settings.minItems && this.totalItems <= this.settings.minItems) {\n this.$deleteBtns.addClass('disabled');\n }\n else {\n this.$deleteBtns.removeClass('disabled');\n }\n\n // Hide the New Whatever button if we've reached the maximum items\n if (this.settings.newItemBtnSelector) {\n if (this.settings.maxItems && this.totalItems >= this.settings.maxItems) {\n $(this.settings.newItemBtnSelector).addClass('hidden');\n }\n else {\n $(this.settings.newItemBtnSelector).removeClass('hidden');\n }\n }\n }\n },\n {\n defaults: {\n tableSelector: null,\n noItemsSelector: null,\n newItemBtnSelector: null,\n idAttribute: 'data-id',\n nameAttribute: 'data-name',\n sortable: false,\n allowDeleteAll: true,\n minItems: 0,\n maxItems: null,\n reorderAction: null,\n deleteAction: null,\n reorderSuccessMessage: Craft.t('app', 'New order saved.'),\n reorderFailMessage: Craft.t('app', 'Couldn’t save new order.'),\n confirmDeleteMessage: Craft.t('app', 'Are you sure you want to delete “{name}”?'),\n deleteSuccessMessage: Craft.t('app', '“{name}” deleted.'),\n deleteFailMessage: Craft.t('app', 'Couldn’t delete “{name}”.'),\n onReorderItems: $.noop,\n onDeleteItem: $.noop\n }\n });\n\n/** global: Craft */\n/** global: Garnish */\n/**\n * Asset index class\n */\nCraft.AssetEditor = Craft.BaseElementEditor.extend(\n {\n reloadIndex: false,\n\n updateForm: function(response, refreshInitialData) {\n this.base(response, refreshInitialData);\n\n if (this.$element.data('id')) {\n var $imageEditorTrigger = this.$fieldsContainer.find('> .meta > .preview-thumb-container.editable');\n\n if ($imageEditorTrigger.length) {\n this.addListener($imageEditorTrigger, 'click', 'showImageEditor');\n }\n }\n },\n\n showImageEditor: function()\n {\n new Craft.AssetImageEditor(this.$element.data('id'), {\n onSave: function () {\n this.reloadIndex = true;\n this.reloadForm();\n }.bind(this),\n allowDegreeFractions: Craft.isImagick\n });\n },\n\n onHideHud: function () {\n if (this.reloadIndex && this.settings.elementIndex) {\n this.settings.elementIndex.updateElements();\n } else if (this.reloadIndex && this.settings.input) {\n this.settings.input.refreshThumbnail(this.$element.data('id'));\n }\n\n this.base();\n }\n });\n\n// Register it!\nCraft.registerElementEditorClass('craft\\\\elements\\\\Asset', Craft.AssetEditor);\n\n/** global: Craft */\n/** global: Garnish */\n\n/**\n * Asset image editor class\n */\n\nCraft.AssetImageEditor = Garnish.Modal.extend(\n {\n // jQuery objects\n $body: null,\n $footer: null,\n $imageTools: null,\n $buttons: null,\n $cancelBtn: null,\n $replaceBtn: null,\n $saveBtn: null,\n $editorContainer: null,\n $straighten: null,\n $croppingCanvas: null,\n $spinnerCanvas: null,\n\n // FabricJS objects\n canvas: null,\n image: null,\n viewport: null,\n focalPoint: null,\n grid: null,\n croppingCanvas: null,\n clipper: null,\n croppingRectangle: null,\n cropperHandles: null,\n cropperGrid: null,\n croppingShade: null,\n croppingAreaText: null,\n\n // Image state attributes\n imageStraightenAngle: 0,\n viewportRotation: 0,\n originalWidth: 0,\n originalHeight: 0,\n imageVerticeCoords: null,\n zoomRatio: 1,\n\n // Editor state attributes\n animationInProgress: false,\n currentView: '',\n assetId: null,\n cacheBust: null,\n draggingCropper: false,\n scalingCropper: false,\n draggingFocal: false,\n previousMouseX: 0,\n previousMouseY: 0,\n shiftKeyHeld: false,\n editorHeight: 0,\n editorWidth: 0,\n cropperState: false,\n scaleFactor: 1,\n flipData: {},\n focalPointState: false,\n spinnerInterval: null,\n maxImageSize: null,\n lastLoadedDimensions: null,\n imageIsLoading: false,\n mouseMoveEvent: null,\n croppingConstraint: false,\n constraintOrientation: 'landscape',\n showingCustomConstraint: false,\n\n // Rendering proxy functions\n renderImage: null,\n renderCropper: null,\n\n init: function(assetId, settings) {\n this.cacheBust = Date.now();\n\n this.setSettings(settings, Craft.AssetImageEditor.defaults);\n\n this.assetId = assetId;\n this.flipData = {x: 0, y: 0};\n\n // Build the modal\n this.$container = $('').appendTo(Garnish.$bod);\n this.$body = $('').appendTo(this.$container);\n this.$footer = $('
').appendTo(this.$container);\n\n this.base(this.$container, this.settings);\n\n this.$buttons = $('').appendTo(this.$footer);\n this.$cancelBtn = $('', {\n type: 'button',\n class: 'btn cancel',\n text: Craft.t('app', 'Cancel'),\n }).appendTo(this.$buttons);\n this.$replaceBtn = $('', {\n type: 'button',\n class: 'btn submit save replace',\n text: Craft.t('app', 'Save'),\n }).appendTo(this.$buttons);\n\n if (this.settings.allowSavingAsNew) {\n this.$saveBtn = $('', {\n type: 'button',\n class: 'btn submit save copy',\n text: Craft.t('app', 'Save as a new asset'),\n }).appendTo(this.$buttons);\n this.addListener(this.$saveBtn, 'activate', this.saveImage);\n }\n\n this.addListener(this.$replaceBtn, 'activate', this.saveImage);\n this.addListener(this.$cancelBtn, 'activate', this.hide);\n this.removeListener(this.$shade, 'click');\n\n this.maxImageSize = this.getMaxImageSize();\n\n Craft.postActionRequest('assets/image-editor', {assetId: assetId}, $.proxy(this, 'loadEditor'));\n },\n\n /**\n * Get the max image size that is viewable in the editor currently\n */\n getMaxImageSize: function() {\n var browserViewportWidth = Garnish.$doc.get(0).documentElement.clientWidth;\n var browserViewportHeight = Garnish.$doc.get(0).documentElement.clientHeight;\n\n return Math.max(browserViewportHeight, browserViewportWidth) * (window.devicePixelRatio > 1 ? 2 : 1);\n },\n\n /**\n * Load the editor markup and start loading components and the image.\n *\n * @param data\n */\n loadEditor: function(data) {\n if (!data.html) {\n alert(Craft.t('app', 'Could not load the image editor.'));\n }\n\n this.$body.html(data.html);\n this.$tabs = $('.tabs li', this.$body);\n this.$viewsContainer = $('.views', this.$body);\n this.$views = $('> div', this.$viewsContainer);\n this.$imageTools = $('.image-container .image-tools', this.$body);\n this.$editorContainer = $('.image-container .image', this.$body);\n this.editorHeight = this.$editorContainer.innerHeight();\n this.editorWidth = this.$editorContainer.innerWidth();\n\n this._showSpinner();\n\n this.updateSizeAndPosition();\n\n // Load the canvas on which we'll host our image and set up the proxy render function\n this.canvas = new fabric.StaticCanvas('image-canvas');\n\n // Set up the cropping canvas jquery element for tracking all the nice events\n this.$croppingCanvas = $('#cropping-canvas', this.$editorContainer);\n this.$croppingCanvas.width(this.editorWidth);\n this.$croppingCanvas.height(this.editorHeight);\n\n this.canvas.enableRetinaScaling = true;\n this.renderImage = function() {\n Garnish.requestAnimationFrame(this.canvas.renderAll.bind(this.canvas));\n }.bind(this);\n\n // Load the image from URL\n var imageUrl = Craft.getActionUrl('assets/edit-image', {\n assetId: this.assetId,\n size: this.maxImageSize,\n cacheBust: this.cacheBust\n });\n\n // Load image and set up the initial properties\n fabric.Image.fromURL(imageUrl, $.proxy(function(imageObject) {\n this.image = imageObject;\n this.image.set({\n originX: 'center',\n originY: 'center',\n left: this.editorWidth / 2,\n top: this.editorHeight / 2\n });\n this.canvas.add(this.image);\n\n this.originalHeight = this.image.getHeight();\n this.originalWidth = this.image.getWidth();\n this.zoomRatio = 1;\n\n this.lastLoadedDimensions = this.getScaledImageDimensions();\n\n // Set up the image bounding box, viewport and position everything\n this._setFittedImageVerticeCoordinates();\n this._repositionEditorElements();\n\n // Set up the focal point\n var focalState = {\n imageDimensions: this.getScaledImageDimensions(),\n offsetX: 0,\n offsetY: 0\n };\n\n var focal = false;\n if (data.focalPoint) {\n // Transform the focal point coordinates from relative to absolute\n var focalData = data.focalPoint;\n\n // Resolve for the current image dimensions.\n var adjustedX = focalState.imageDimensions.width * focalData.x;\n var adjustedY = focalState.imageDimensions.height * focalData.y;\n\n focalState.offsetX = adjustedX - focalState.imageDimensions.width / 2;\n focalState.offsetY = adjustedY - focalState.imageDimensions.height / 2;\n\n focal = true;\n }\n\n this.storeFocalPointState(focalState);\n\n if (focal) {\n this._createFocalPoint();\n }\n\n this._createViewport();\n this.storeCropperState();\n\n // Add listeners to buttons\n this._addControlListeners();\n\n // Add mouse event listeners\n this.addListener(this.$croppingCanvas, 'mousemove,touchmove', this._handleMouseMove);\n this.addListener(this.$croppingCanvas, 'mousedown,touchstart', this._handleMouseDown);\n this.addListener(this.$croppingCanvas, 'mouseup,touchend', this._handleMouseUp);\n this.addListener(this.$croppingCanvas, 'mouseout,touchcancel', this._handleMouseOut);\n\n this._hideSpinner();\n\n // Render it, finally\n this.renderImage();\n\n // Make sure verything gets fired for the first tab\n this.$tabs.first().trigger('click');\n }, this));\n },\n\n /**\n * Reload the image to better fit the current available image editor viewport.\n */\n _reloadImage: function () {\n if (this.imageIsLoading) {\n return;\n }\n\n this.imageIsLoading = true;\n this.maxImageSize = this.getMaxImageSize();\n\n // Load the image from URL\n var imageUrl = Craft.getActionUrl('assets/edit-image', {\n assetId: this.assetId,\n size: this.maxImageSize,\n cacheBust: this.cacheBust\n });\n\n this.image.setSrc(imageUrl, function(imageObject) {\n this.originalHeight = imageObject.getHeight();\n this.originalWidth = imageObject.getWidth();\n this.lastLoadedDimensions = {width: this.originalHeight, height: this.originalWidth};\n this.updateSizeAndPosition();\n this.renderImage();\n this.imageIsLoading = false;\n }.bind(this));\n },\n\n /**\n * Update the modal size and position on browser resize\n */\n updateSizeAndPosition: function() {\n if (!this.$container) {\n return;\n }\n\n // Fullscreen modal\n var innerWidth = window.innerWidth;\n var innerHeight = window.innerHeight;\n\n this.$container.css({\n 'width': innerWidth,\n 'min-width': innerWidth,\n 'left': 0,\n\n 'height': innerHeight,\n 'min-height': innerHeight,\n 'top': 0\n });\n\n this.$body.css({\n 'height': innerHeight - 62\n });\n\n if (innerWidth < innerHeight) {\n this.$container.addClass('vertical');\n }\n else {\n this.$container.removeClass('vertical');\n }\n\n if (this.$spinnerCanvas) {\n this.$spinnerCanvas.css({\n left: ((this.$spinnerCanvas.parent().width()/2)-(this.$spinnerCanvas.width()/2))+'px',\n top: ((this.$spinnerCanvas.parent().height()/2)-(this.$spinnerCanvas.height()/2))+'px'\n });\n }\n\n // If image is already loaded, make sure it looks pretty.\n if (this.$editorContainer && this.image) {\n this._repositionEditorElements();\n }\n },\n\n /**\n * Reposition the editor elements to accurately reflect the editor state with current dimensions\n */\n _repositionEditorElements: function() {\n // Remember what the dimensions were before the resize took place\n var previousEditorDimensions = {\n width: this.editorWidth,\n height: this.editorHeight\n };\n\n this.editorHeight = this.$editorContainer.innerHeight();\n this.editorWidth = this.$editorContainer.innerWidth();\n\n this.canvas.setDimensions({\n width: this.editorWidth,\n height: this.editorHeight\n });\n\n var currentScaledDimensions = this.getScaledImageDimensions();\n\n // If we're cropping now, we have to reposition the cropper correctly in case\n // the area for image changes, forcing the image size to change as well.\n if (this.currentView === 'crop') {\n this.zoomRatio = this.getZoomToFitRatio(this.getScaledImageDimensions());\n var previouslyOccupiedArea = this._getBoundingRectangle(this.imageVerticeCoords);\n this._setFittedImageVerticeCoordinates();\n this._repositionCropper(previouslyOccupiedArea);\n } else {\n // Otherwise just recalculate the image zoom ratio\n this.zoomRatio = this.getZoomToCoverRatio(this.getScaledImageDimensions()) * this.scaleFactor;\n }\n\n // Reposition the image relatively to the previous editor dimensions.\n this._repositionImage(previousEditorDimensions);\n this._repositionViewport();\n this._repositionFocalPoint(previousEditorDimensions);\n this._zoomImage();\n\n this.renderImage();\n\n if (currentScaledDimensions.width / this.lastLoadedDimensions.width > 1.5 || currentScaledDimensions.height / this.lastLoadedDimensions.height > 1.5) {\n this._reloadImage();\n }\n },\n\n /**\n * Reposition image based on how the editor dimensions have changed.\n * This ensures keeping the image center offset, if there is any.\n *\n * @param previousEditorDimensions\n */\n _repositionImage: function(previousEditorDimensions) {\n this.image.set({\n left: this.image.left - (previousEditorDimensions.width - this.editorWidth) / 2,\n top: this.image.top - (previousEditorDimensions.height - this.editorHeight) / 2\n });\n },\n\n /**\n * Create the viewport for image editor.\n */\n _createViewport: function() {\n this.viewport = new fabric.Rect({\n width: this.image.width,\n height: this.image.height,\n fill: 'rgba(127,0,0,1)',\n originX: 'center',\n originY: 'center',\n globalCompositeOperation: 'destination-in', // This clips everything outside of the viewport\n left: this.image.left,\n top: this.image.top\n });\n this.canvas.add(this.viewport);\n this.renderImage();\n },\n\n /**\n * Create the focal point.\n */\n _createFocalPoint: function() {\n var focalPointState = this.focalPointState;\n var sizeFactor = this.getScaledImageDimensions().width / focalPointState.imageDimensions.width;\n\n var focalX = focalPointState.offsetX * sizeFactor * this.zoomRatio * this.scaleFactor;\n var focalY = focalPointState.offsetY * sizeFactor * this.zoomRatio * this.scaleFactor;\n\n // Adjust by image margins\n focalX += this.image.left;\n focalY += this.image.top;\n\n var deltaX = 0;\n var deltaY = 0;\n\n // When creating a fresh focal point, drop it dead in the center of the viewport, not the image.\n if (this.viewport && focalPointState.offsetX === 0 && focalPointState.offsetY === 0) {\n if (this.currentView !== 'crop') {\n deltaX = this.viewport.left - this.image.left;\n deltaY = this.viewport.top - this.image.top;\n } else {\n // Unless we have a cropper showing, in which case drop it in the middle of the cropper\n deltaX = this.clipper.left - this.image.left;\n deltaY = this.clipper.top - this.image.top;\n }\n\n // Bump focal to middle of viewport\n focalX += deltaX;\n focalY += deltaY;\n\n // Reflect changes in saved state\n focalPointState.offsetX += deltaX / (sizeFactor * this.zoomRatio * this.scaleFactor);\n focalPointState.offsetY += deltaY / (sizeFactor * this.zoomRatio * this.scaleFactor);\n }\n\n this.focalPoint = new fabric.Group([\n new fabric.Circle({radius: 8, fill: 'rgba(0,0,0,0.5)', strokeWidth: 2, stroke: 'rgba(255,255,255,0.8)', left: 0, top: 0, originX: 'center', originY: 'center'}),\n new fabric.Circle({radius: 1, fill: 'rgba(255,255,255,0)', strokeWidth: 2, stroke: 'rgba(255,255,255,0.8)', left: 0, top: 0, originX: 'center', originY: 'center'})\n ], {\n originX: 'center',\n originY: 'center',\n left: focalX,\n top: focalY\n });\n\n this.storeFocalPointState(focalPointState);\n this.canvas.add(this.focalPoint);\n },\n\n /**\n * Toggle focal point\n */\n toggleFocalPoint: function() {\n if (!this.focalPoint) {\n this._createFocalPoint();\n } else {\n this.canvas.remove(this.focalPoint);\n this.focalPoint = null;\n }\n\n this.renderImage();\n },\n\n /**\n * Reposition the viewport to handle editor resizing.\n */\n _repositionViewport: function() {\n if (this.viewport) {\n var dimensions = {\n left: this.editorWidth / 2,\n top: this.editorHeight / 2\n };\n\n // If we're cropping, nothing exciting happens for the viewport\n if (this.currentView === 'crop') {\n dimensions.width = this.editorWidth;\n dimensions.height = this.editorHeight;\n } else {\n // If this is the first initial reposition, no cropper state yet\n if (this.cropperState) {\n // Recall the state\n var state = this.cropperState;\n\n var scaledImageDimensions = this.getScaledImageDimensions();\n // Make sure we have the correct current image size\n var sizeFactor = scaledImageDimensions.width / state.imageDimensions.width;\n\n // Set the viewport dimensions\n dimensions.width = state.width * sizeFactor * this.zoomRatio;\n dimensions.height = state.height * sizeFactor * this.zoomRatio;\n\n // Adjust the image position to show the correct part of the image in the viewport\n this.image.set({\n left: (this.editorWidth / 2) - (state.offsetX * sizeFactor),\n top: (this.editorHeight / 2) - (state.offsetY * sizeFactor)\n });\n } else {\n $.extend(dimensions, this.getScaledImageDimensions());\n }\n }\n this.viewport.set(dimensions);\n }\n },\n\n _repositionFocalPoint: function(previousEditorDimensions) {\n if (this.focalPoint) {\n var offsetX = this.focalPoint.left - this.editorWidth / 2;\n var offsetY = this.focalPoint.top - this.editorHeight / 2;\n\n var currentWidth = this.image.width;\n var newWidth = this.getScaledImageDimensions().width * this.zoomRatio;\n var ratio = newWidth / currentWidth / this.scaleFactor;\n\n offsetX -= (previousEditorDimensions.width - this.editorWidth) / 2;\n offsetY -= (previousEditorDimensions.height - this.editorHeight) / 2;\n\n offsetX *= ratio;\n offsetY *= ratio;\n\n this.focalPoint.set({\n left: this.editorWidth / 2 + offsetX,\n top: this.editorHeight / 2 + offsetY\n });\n }\n },\n\n /**\n * Return true if the image orientation has changed\n */\n hasOrientationChanged: function() {\n return this.viewportRotation % 180 !== 0;\n },\n\n /**\n * Return the current image dimensions that would be used in the current image area with no straightening or rotation applied.\n */\n getScaledImageDimensions: function() {\n if (typeof this.getScaledImageDimensions._ === 'undefined') {\n this.getScaledImageDimensions._ = {};\n }\n\n this.getScaledImageDimensions._.imageRatio = this.originalHeight / this.originalWidth;\n this.getScaledImageDimensions._.editorRatio = this.editorHeight / this.editorWidth;\n\n this.getScaledImageDimensions._.dimensions = {};\n if (this.getScaledImageDimensions._.imageRatio > this.getScaledImageDimensions._.editorRatio) {\n this.getScaledImageDimensions._.dimensions.height = Math.min(this.editorHeight, this.originalHeight);\n this.getScaledImageDimensions._.dimensions.width = Math.round(this.originalWidth / (this.originalHeight / this.getScaledImageDimensions._.dimensions.height));\n } else {\n this.getScaledImageDimensions._.dimensions.width = Math.min(this.editorWidth, this.originalWidth);\n this.getScaledImageDimensions._.dimensions.height = Math.round(this.originalHeight * (this.getScaledImageDimensions._.dimensions.width / this.originalWidth));\n }\n\n return this.getScaledImageDimensions._.dimensions;\n },\n\n /**\n * Set the image dimensions to reflect the current zoom ratio.\n */\n _zoomImage: function() {\n if (typeof this._zoomImage._ === 'undefined') {\n this._zoomImage._ = {};\n }\n\n this._zoomImage._.imageDimensions = this.getScaledImageDimensions();\n this.image.set({\n width: this._zoomImage._.imageDimensions.width * this.zoomRatio,\n height: this._zoomImage._.imageDimensions.height * this.zoomRatio\n });\n },\n\n /**\n * Set up listeners for the controls.\n */\n _addControlListeners: function() {\n // Tabs\n this.addListener(this.$tabs, 'click', this._handleTabClick);\n\n // Focal point\n this.addListener($('.focal-point'), 'click', this.toggleFocalPoint);\n\n // Rotate controls\n this.addListener($('.rotate-left'), 'click', function() {\n this.rotateImage(-90);\n });\n this.addListener($('.rotate-right'), 'click', function() {\n this.rotateImage(90);\n });\n this.addListener($('.flip-vertical'), 'click', function() {\n this.flipImage('y');\n });\n this.addListener($('.flip-horizontal'), 'click', function() {\n this.flipImage('x');\n });\n\n // Straighten slider\n this.straighteningInput = new Craft.SlideRuleInput(\"slide-rule\", {\n onStart: function() {\n this._showGrid();\n }.bind(this),\n onChange: function(slider) {\n this.straighten(slider);\n }.bind(this),\n onEnd: function() {\n this._hideGrid();\n this._cleanupFocalPointAfterStraighten();\n }.bind(this)\n });\n\n // Cropper scale modifier key\n this.addListener(Garnish.$doc, 'keydown', function(ev) {\n if (ev.keyCode === Garnish.SHIFT_KEY) {\n this.shiftKeyHeld = true;\n }\n });\n this.addListener(Garnish.$doc, 'keyup', function(ev) {\n if (ev.keyCode === Garnish.SHIFT_KEY) {\n this.shiftKeyHeld = false;\n }\n });\n\n this.addListener($('.constraint-buttons .constraint', this.$container), 'click', this._handleConstraintClick);\n this.addListener($('.orientation input', this.$container), 'click', this._handleOrientationClick);\n this.addListener($('.constraint-buttons .custom-input input', this.$container), 'keyup', this._applyCustomConstraint);\n },\n\n /**\n * Handle a constraint button click.\n *\n * @param ev\n */\n _handleConstraintClick: function (ev) {\n var constraint = $(ev.currentTarget).data('constraint');\n var $target = $(ev.currentTarget);\n $target.siblings().removeClass('active');\n $target.addClass('active');\n\n if (constraint == 'custom') {\n this._showCustomConstraint();\n this._applyCustomConstraint();\n return;\n }\n\n this._hideCustomConstraint();\n\n this.setCroppingConstraint(constraint);\n this.enforceCroppingConstraint();\n },\n\n /**\n * Handle an orientation switch click.\n *\n * @param ev\n */\n _handleOrientationClick: function (ev) {\n if (ev.currentTarget.value === this.constraintOrientation) {\n return;\n }\n this.constraintOrientation = ev.currentTarget.value;\n\n var $constraints = $('.constraint.flip', this.$container);\n\n for (var i = 0; i < $constraints.length; i++) {\n var $constraint = $($constraints[i]);\n $constraint.data('constraint', 1 / $constraint.data('constraint'));\n $constraint.html($constraint.html().split(':').reverse().join(':'));\n }\n\n $constraints.filter('.active').click();\n },\n\n /**\n * Apply the custom ratio set in the inputs\n */\n _applyCustomConstraint: function () {\n var constraint = this._getCustomConstraint();\n\n if (constraint.w > 0 && constraint.h > 0) {\n this.setCroppingConstraint(constraint.w / constraint.h);\n this.enforceCroppingConstraint();\n }\n },\n\n /**\n * Get the custom constraint.\n *\n * @returns {{w: *, h: *}}\n */\n _getCustomConstraint: function () {\n var w = parseFloat($('.custom-constraint-w').val());\n var h = parseFloat($('.custom-constraint-h').val());\n return {\n w: isNaN(w) ? 0 : w,\n h: isNaN(h) ? 0 : h,\n }\n },\n\n /**\n * Set the custom constraint.\n *\n * @param w\n * @param h\n */\n _setCustomConstraint: function (w, h) {\n $('.custom-constraint-w').val(parseFloat(w));\n $('.custom-constraint-h').val(parseFloat(h));\n },\n\n /**\n * Hide the custom constraint inputs.\n */\n _hideCustomConstraint: function () {\n this.showingCustomConstraint = false;\n $('.constraint.custom .custom-input', this.$container).addClass('hidden');\n $('.constraint.custom .custom-label', this.$container).removeClass('hidden');\n $('.orientation', this.$container).removeClass('hidden');\n },\n\n /**\n * Show the custom constraint inputs.\n */\n _showCustomConstraint: function () {\n if (this.showingCustomConstraint) {\n return;\n }\n\n this.showingCustomConstraint = true;\n $('.constraint.custom .custom-input', this.$container).removeClass('hidden');\n $('.constraint.custom .custom-label', this.$container).addClass('hidden');\n $('.orientation', this.$container).addClass('hidden');\n },\n\n /**\n * Handle tab click.\n *\n * @param ev\n */\n _handleTabClick: function(ev) {\n if (!this.animationInProgress) {\n var $tab = $(ev.currentTarget);\n var view = $tab.data('view');\n this.$tabs.removeClass('selected');\n $tab.addClass('selected');\n this.showView(view);\n }\n },\n\n /**\n * Show a view.\n *\n * @param view\n */\n showView: function(view) {\n if (this.currentView === view) {\n return;\n }\n\n this.$views.addClass('hidden');\n var $view = this.$views.filter('[data-view=\"' + view + '\"]');\n $view.removeClass('hidden');\n\n if (view === 'rotate') {\n this.enableSlider();\n } else {\n this.disableSlider();\n }\n\n\n // Now that most likely our editor dimensions have changed, time to reposition stuff\n this.updateSizeAndPosition();\n\n // See if we have to enable or disable crop mode as we transition between tabs\n if (this.currentView === 'crop' && view !== 'crop') {\n this.disableCropMode();\n } else if (this.currentView !== 'crop' && view === 'crop') {\n this.enableCropMode();\n }\n\n // Mark the current view\n this.currentView = view;\n },\n\n /**\n * Store the current cropper state.\n *\n * Cropper state is always assumed to be saved at a zoom ratio of 1 to be used\n * as the basis for recalculating the cropper position and dimensions.\n *\n * @param [state]\n */\n storeCropperState: function(state) {\n if (typeof this.storeCropperState._ === 'undefined') {\n this.storeCropperState._ = {};\n }\n\n // If we're asked to store a specific state.\n if (state) {\n this.cropperState = state;\n } else if (this.clipper) {\n this.storeCropperState._.zoomFactor = 1 / this.zoomRatio;\n\n this.cropperState = {\n offsetX: (this.clipper.left - this.image.left) * this.storeCropperState._.zoomFactor,\n offsetY: (this.clipper.top - this.image.top) * this.storeCropperState._.zoomFactor,\n height: this.clipper.height * this.storeCropperState._.zoomFactor,\n width: this.clipper.width * this.storeCropperState._.zoomFactor,\n imageDimensions: this.getScaledImageDimensions()\n };\n } else {\n this.storeCropperState._.dimensions = this.getScaledImageDimensions();\n this.cropperState = {\n offsetX: 0,\n offsetY: 0,\n height: this.storeCropperState._.dimensions.height,\n width: this.storeCropperState._.dimensions.width,\n imageDimensions: this.storeCropperState._.dimensions\n };\n }\n },\n\n /**\n * Store focal point coordinates in a manner that is not tied to zoom ratio and rotation.\n */\n storeFocalPointState: function(state) {\n if (typeof this.storeFocalPointState._ === 'undefined') {\n this.storeFocalPointState._ = {};\n }\n\n // If we're asked to store a specific state.\n if (state) {\n this.focalPointState = state;\n } else if (this.focalPoint) {\n this.storeFocalPointState._.zoomFactor = 1 / this.zoomRatio;\n this.focalPointState = {\n offsetX: (this.focalPoint.left - this.image.left) * this.storeFocalPointState._.zoomFactor / this.scaleFactor,\n offsetY: (this.focalPoint.top - this.image.top) * this.storeFocalPointState._.zoomFactor / this.scaleFactor,\n imageDimensions: this.getScaledImageDimensions()\n };\n }\n },\n\n /**\n * Rotate the image along with the viewport.\n *\n * @param degrees\n */\n rotateImage: function(degrees) {\n if (!this.animationInProgress) {\n // We're not that kind of an establishment, sir.\n if (degrees !== 90 && degrees !== -90) {\n return false;\n }\n\n this.animationInProgress = true;\n this.viewportRotation += degrees;\n\n // Normalize the viewport rotation angle so it's between 0 and 359\n this.viewportRotation = parseInt((this.viewportRotation + 360) % 360, 10);\n\n var newAngle = this.image.angle + degrees;\n var scaledImageDimensions = this.getScaledImageDimensions();\n var imageZoomRatio;\n\n if (this.hasOrientationChanged()) {\n imageZoomRatio = this.getZoomToCoverRatio({height: scaledImageDimensions.width, width: scaledImageDimensions.height});\n } else {\n imageZoomRatio = this.getZoomToCoverRatio(scaledImageDimensions);\n }\n\n // In cases when for some reason we've already zoomed in on the image,\n // use existing zoom.\n if (this.zoomRatio > imageZoomRatio) {\n imageZoomRatio = this.zoomRatio;\n }\n\n var viewportProperties = {\n angle: degrees === 90 ? '+=90' : '-=90'\n };\n\n var imageProperties = {\n angle: newAngle,\n width: scaledImageDimensions.width * imageZoomRatio,\n height: scaledImageDimensions.height * imageZoomRatio\n };\n\n var scaleFactor = 1;\n if (this.scaleFactor < 1) {\n scaleFactor = 1 / this.scaleFactor;\n this.scaleFactor = 1;\n } else {\n if (this.viewport.width > this.editorHeight) {\n scaleFactor = this.editorHeight / this.viewport.width;\n } else if (this.viewport.height > this.editorWidth) {\n scaleFactor = this.editorWidth / this.viewport.height;\n }\n this.scaleFactor = scaleFactor;\n }\n\n if (scaleFactor < 1) {\n imageProperties.width *= scaleFactor;\n imageProperties.height *= scaleFactor;\n }\n\n var state = this.cropperState;\n\n // Make sure we reposition the image as well to focus on the same image area\n var deltaX = state.offsetX;\n var deltaY = state.offsetY;\n var angleInRadians = degrees * (Math.PI / 180);\n\n // Calculate how the cropper would need to move in a circle to maintain\n // the focus on the same region if the image was rotated with zoom intact.\n var newDeltaX = deltaX * Math.cos(angleInRadians) - deltaY * Math.sin(angleInRadians);\n var newDeltaY = deltaX * Math.sin(angleInRadians) + deltaY * Math.cos(angleInRadians);\n\n var sizeFactor = scaledImageDimensions.width / state.imageDimensions.width;\n\n var modifiedDeltaX = newDeltaX * sizeFactor * this.zoomRatio * this.scaleFactor;\n var modifiedDeltaY = newDeltaY * sizeFactor * this.zoomRatio * this.scaleFactor;\n\n imageProperties.left = this.editorWidth / 2 - modifiedDeltaX;\n imageProperties.top = this.editorHeight / 2 - modifiedDeltaY;\n\n state.offsetX = newDeltaX;\n state.offsetY = newDeltaY;\n\n var temp = state.width;\n state.width = state.height;\n state.height = temp;\n\n this.storeCropperState(state);\n\n if (this.focalPoint) {\n this.canvas.remove(this.focalPoint);\n }\n\n this.viewport.animate(viewportProperties, {\n duration: this.settings.animationDuration,\n onComplete: function() {\n // If we're zooming the image in or out, better do the same to viewport\n var temp = this.viewport.height * scaleFactor;\n this.viewport.height = this.viewport.width * scaleFactor;\n this.viewport.width = temp;\n this.viewport.set({angle: 0});\n }.bind(this)\n });\n\n // Animate the rotation and dimension change\n this.image.animate(imageProperties, {\n onChange: this.canvas.renderAll.bind(this.canvas),\n duration: this.settings.animationDuration,\n onComplete: function() {\n var cleanAngle = parseFloat((this.image.angle + 360) % 360);\n this.image.set({angle: cleanAngle});\n this.animationInProgress = false;\n if (this.focalPoint) {\n this._adjustFocalPointByAngle(degrees);\n this.straighten(this.straighteningInput);\n this.canvas.add(this.focalPoint);\n } else {\n this._resetFocalPointPosition();\n }\n }.bind(this)\n });\n }\n },\n\n /**\n * Flip an image along an axis.\n *\n * @param axis\n */\n flipImage: function(axis) {\n if (!this.animationInProgress) {\n this.animationInProgress = true;\n\n if (this.hasOrientationChanged()) {\n axis = axis === 'y' ? 'x' : 'y';\n }\n\n if (this.focalPoint) {\n this.canvas.remove(this.focalPoint);\n } else {\n this._resetFocalPointPosition();\n }\n\n var editorCenter = {x: this.editorWidth / 2, y: this.editorHeight / 2};\n this.straighteningInput.setValue(-this.imageStraightenAngle);\n this.imageStraightenAngle = -this.imageStraightenAngle;\n var properties = {\n angle: this.viewportRotation + this.imageStraightenAngle\n };\n\n var deltaY, deltaX;\n var cropperState = this.cropperState;\n var focalPointState = this.focalPointState;\n\n // Reposition the image, viewport, and stored cropper and focal point states.\n if ((axis === 'y' && this.hasOrientationChanged()) || (axis !== 'y' && !this.hasOrientationChanged())) {\n cropperState.offsetX = -cropperState.offsetX;\n focalPointState.offsetX = -focalPointState.offsetX;\n deltaX = this.image.left - editorCenter.x;\n properties.left = editorCenter.x - deltaX;\n } else {\n cropperState.offsetY = -cropperState.offsetY;\n focalPointState.offsetY = -focalPointState.offsetY;\n deltaY = this.image.top - editorCenter.y;\n properties.top = editorCenter.y - deltaY;\n }\n\n if (axis === 'y') {\n properties.scaleY = this.image.scaleY * -1;\n this.flipData.y = 1 - this.flipData.y;\n } else {\n properties.scaleX = this.image.scaleX * -1;\n this.flipData.x = 1 - this.flipData.x;\n }\n\n this.storeCropperState(cropperState);\n this.storeFocalPointState(focalPointState);\n\n this.image.animate(properties, {\n onChange: this.canvas.renderAll.bind(this.canvas),\n duration: this.settings.animationDuration,\n onComplete: function() {\n this.animationInProgress = false;\n if (this.focalPoint) {\n // Well this is handy\n this._adjustFocalPointByAngle(0);\n this.canvas.add(this.focalPoint);\n }\n }.bind(this)\n });\n }\n },\n\n /**\n * Perform the straightening with input slider.\n *\n * @param {Craft.SlideRuleInput} slider\n */\n straighten: function(slider) {\n if (!this.animationInProgress) {\n this.animationInProgress = true;\n\n var previousAngle = this.image.angle;\n\n this.imageStraightenAngle = (this.settings.allowDegreeFractions ? parseFloat(slider.value) : Math.round(parseFloat(slider.value))) % 360;\n\n // Straighten the image\n this.image.set({\n angle: this.viewportRotation + this.imageStraightenAngle\n });\n\n // Set the new zoom ratio\n this.zoomRatio = this.getZoomToCoverRatio(this.getScaledImageDimensions()) * this.scaleFactor;\n this._zoomImage();\n\n if (this.cropperState) {\n this._adjustEditorElementsOnStraighten(previousAngle);\n }\n\n this.renderImage();\n\n this.animationInProgress = false;\n }\n },\n\n /**\n * Adjust the cropped viewport when straightening the image to correct for\n * bumping into edges, keeping focus on the cropped area center and to\n * maintain the illusion that the image is being straightened relative to the viewport center.\n *\n * @param {integer} previousAngle integer the previous image angle before straightening\n */\n _adjustEditorElementsOnStraighten: function(previousAngle) {\n var scaledImageDimensions = this.getScaledImageDimensions();\n var angleDelta = this.image.angle - previousAngle;\n var state = this.cropperState;\n\n var currentZoomRatio = this.zoomRatio;\n var adjustmentRatio = 1;\n\n var deltaX, deltaY, newCenterX, newCenterY, sizeFactor;\n\n do {\n // Get the cropper center coordinates\n var cropperCenterX = state.offsetX;\n var cropperCenterY = state.offsetY;\n var angleInRadians = angleDelta * (Math.PI / 180);\n\n // Calculate how the cropper would need to move in a circle to maintain\n // the focus on the same region if the image was rotated with zoom intact.\n newCenterX = cropperCenterX * Math.cos(angleInRadians) - cropperCenterY * Math.sin(angleInRadians);\n newCenterY = cropperCenterX * Math.sin(angleInRadians) + cropperCenterY * Math.cos(angleInRadians);\n\n sizeFactor = scaledImageDimensions.width / state.imageDimensions.width;\n\n // Figure out the final image offset to keep the viewport focused where we need it\n deltaX = newCenterX * currentZoomRatio * sizeFactor;\n deltaY = newCenterY * currentZoomRatio * sizeFactor;\n\n // If the image would creep in the viewport, figure out how to math around it.\n var imageVertices = this.getImageVerticeCoords(currentZoomRatio);\n var rectangle = {\n width: this.viewport.width,\n height: this.viewport.height,\n left: this.editorWidth / 2 - this.viewport.width / 2 + deltaX,\n top: this.editorHeight / 2 - this.viewport.height / 2 + deltaY\n };\n adjustmentRatio = this._getZoomRatioToFitRectangle(rectangle, imageVertices);\n currentZoomRatio = currentZoomRatio * adjustmentRatio;\n\n // If we had to make adjustments, do the calculations again\n } while (adjustmentRatio !== 1);\n\n // Reposition the image correctly\n this.image.set({\n left: this.editorWidth / 2 - deltaX,\n top: this.editorHeight / 2 - deltaY\n });\n\n // Finally, store the new cropper state to reflect the rotation change.\n state.offsetX = newCenterX;\n state.offsetY = newCenterY;\n state.width = this.viewport.width / currentZoomRatio / sizeFactor;\n state.height = this.viewport.height / currentZoomRatio / sizeFactor;\n\n this.storeCropperState(state);\n\n // Zoom the image in and we're done.\n this.zoomRatio = currentZoomRatio;\n\n if (this.focalPoint) {\n this._adjustFocalPointByAngle(angleDelta);\n\n if (!this._isCenterInside(this.focalPoint, this.viewport)) {\n this.focalPoint.set({opacity: 0});\n } else {\n this.focalPoint.set({opacity: 1});\n }\n } else if (angleDelta !== 0) {\n this._resetFocalPointPosition();\n }\n\n this._zoomImage();\n },\n\n /**\n * If focal point is active and outside of viewport after straightening, reset it.\n */\n _cleanupFocalPointAfterStraighten: function() {\n if (this.focalPoint && !this._isCenterInside(this.focalPoint, this.viewport)) {\n this.focalPoint.set({opacity: 1});\n var state = this.focalPointState;\n state.offsetX = 0;\n state.offsetY = 0;\n this.storeFocalPointState(state);\n this.toggleFocalPoint();\n }\n },\n\n /**\n * Reset focal point to the middle of image.\n */\n _resetFocalPointPosition: function () {\n var state = this.focalPointState;\n state.offsetX = 0;\n state.offsetY = 0;\n this.storeFocalPointState(state);\n },\n\n /**\n * Returns true if a center of an object is inside another rectangle shaped object that is not rotated.\n *\n * @param object\n * @param containingObject\n *\n * @returns {boolean}\n */\n _isCenterInside: function(object, containingObject) {\n return (object.left > containingObject.left - containingObject.width / 2\n && object.top > containingObject.top - containingObject.height / 2\n && object.left < containingObject.left + containingObject.width / 2\n && object.top < containingObject.top + containingObject.height / 2\n );\n },\n\n /**\n * Adjust the focal point by an angle in degrees.\n * @param angle\n */\n _adjustFocalPointByAngle: function(angle) {\n var angleInRadians = angle * (Math.PI / 180);\n var state = this.focalPointState;\n\n var focalX = state.offsetX;\n var focalY = state.offsetY;\n\n // Calculate how the focal point would need to move in a circle to keep on the same spot\n // on the image if it was rotated with zoom intact.\n var newFocalX = focalX * Math.cos(angleInRadians) - focalY * Math.sin(angleInRadians);\n var newFocalY = focalX * Math.sin(angleInRadians) + focalY * Math.cos(angleInRadians);\n var sizeFactor = this.getScaledImageDimensions().width / state.imageDimensions.width;\n\n var adjustedFocalX = newFocalX * sizeFactor * this.zoomRatio;\n var adjustedFocalY = newFocalY * sizeFactor * this.zoomRatio;\n\n this.focalPoint.left = this.image.left + adjustedFocalX;\n this.focalPoint.top = this.image.top + adjustedFocalY;\n\n state.offsetX = newFocalX;\n state.offsetY = newFocalY;\n this.storeFocalPointState(state);\n },\n\n /**\n * Get the zoom ratio required to fit a rectangle within another rectangle, that is defined by vertices.\n * If the rectangle fits, 1 will be returned.\n *\n * @param rectangle\n * @param containingVertices\n */\n _getZoomRatioToFitRectangle: function(rectangle, containingVertices) {\n var rectangleVertices = this._getRectangleVertices(rectangle);\n var vertex;\n\n // Check if any of the viewport vertices end up out of bounds\n for (var verticeIndex = 0; verticeIndex < rectangleVertices.length; verticeIndex++) {\n vertex = rectangleVertices[verticeIndex];\n\n if (!this.arePointsInsideRectangle([vertex], containingVertices)) {\n break;\n }\n\n vertex = false;\n }\n\n // If there's no vertex set after loop, it means that all of them are inside the image rectangle\n var adjustmentRatio;\n\n if (!vertex) {\n adjustmentRatio = 1;\n } else {\n // Find out which edge got crossed by the vertex\n var edge = this._getEdgeCrossed(containingVertices, vertex);\n\n var rectangleCenter = {\n x: rectangle.left + rectangle.width / 2,\n y: rectangle.top + rectangle.height / 2\n };\n\n // Calculate how much further that edge needs to be.\n // https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_two_points\n var distanceFromVertexToEdge = Math.abs((edge[1].y - edge[0].y) * vertex.x - (edge[1].x - edge[0].x) * vertex.y + edge[1].x * edge[0].y - edge[1].y * edge[0].x) / Math.sqrt(Math.pow(edge[1].y - edge[0].y, 2) + Math.pow(edge[1].x - edge[0].x, 2));\n var distanceFromCenterToEdge = Math.abs((edge[1].y - edge[0].y) * rectangleCenter.x - (edge[1].x - edge[0].x) * rectangleCenter.y + edge[1].x * edge[0].y - edge[1].y * edge[0].x) / Math.sqrt(Math.pow(edge[1].y - edge[0].y, 2) + Math.pow(edge[1].x - edge[0].x, 2));\n\n // Adjust the zoom ratio\n adjustmentRatio = ((distanceFromVertexToEdge + distanceFromCenterToEdge) / distanceFromCenterToEdge);\n }\n\n return adjustmentRatio;\n },\n\n /**\n * Save the image.\n *\n * @param ev\n */\n saveImage: function(ev) {\n var $button = $(ev.currentTarget);\n if ($button.hasClass('disabled')) {\n return false;\n }\n\n $('.btn', this.$buttons).addClass('disabled');\n this.$buttons.append('');\n\n var postData = {\n assetId: this.assetId,\n viewportRotation: this.viewportRotation,\n imageRotation: this.imageStraightenAngle,\n replace: $button.hasClass('replace') ? 1 : 0\n };\n\n if (this.cropperState) {\n var cropData = {};\n\n cropData.height = this.cropperState.height;\n cropData.width = this.cropperState.width;\n cropData.offsetX = this.cropperState.offsetX;\n cropData.offsetY = this.cropperState.offsetY;\n\n postData.imageDimensions = this.cropperState.imageDimensions;\n\n postData.cropData = cropData;\n } else {\n postData.imageDimensions = this.getScaledImageDimensions();\n }\n\n if (this.focalPoint) {\n postData.focalPoint = this.focalPointState;\n }\n\n postData.flipData = this.flipData;\n postData.zoom = this.zoomRatio;\n\n Craft.postActionRequest('assets/save-image', postData, function(data) {\n this.$buttons.find('.btn').removeClass('disabled').end().find('.spinner').remove();\n\n if (data.error) {\n alert(data.error);\n return;\n }\n\n this.onSave();\n this.hide();\n Craft.cp.runQueue();\n }.bind(this));\n },\n\n /**\n * Return image zoom ratio depending on the straighten angle to cover a viewport by given dimensions.\n *\n * @param dimensions\n */\n getZoomToCoverRatio: function(dimensions) {\n // Convert the angle to radians\n var angleInRadians = Math.abs(this.imageStraightenAngle) * (Math.PI / 180);\n\n // Calculate the dimensions of the scaled image using the magic of math\n var scaledWidth = Math.sin(angleInRadians) * dimensions.height + Math.cos(angleInRadians) * dimensions.width;\n var scaledHeight = Math.sin(angleInRadians) * dimensions.width + Math.cos(angleInRadians) * dimensions.height;\n\n // Calculate the ratio\n return Math.max(scaledWidth / dimensions.width, scaledHeight / dimensions.height);\n },\n\n /**\n * Return image zoom ratio depending on the straighten angle to fit inside a viewport by given dimensions.\n *\n * @param dimensions\n */\n getZoomToFitRatio: function(dimensions) {\n // Get the bounding box for a rotated image\n var boundingBox = this._getImageBoundingBox(dimensions);\n\n // Scale the bounding box to fit\n var scale = 1;\n if (boundingBox.height > this.editorHeight || boundingBox.width > this.editorWidth) {\n var vertScale = this.editorHeight / boundingBox.height;\n var horiScale = this.editorWidth / boundingBox.width;\n scale = Math.min(horiScale, vertScale);\n }\n\n return scale;\n },\n\n /**\n * Return the combined zoom ratio to fit a rectangle inside image that's been zoomed to fit.\n */\n getCombinedZoomRatio: function(dimensions) {\n return this.getZoomToCoverRatio(dimensions) / this.getZoomToFitRatio(dimensions);\n },\n\n /**\n * Draw the grid.\n *\n * @private\n */\n _showGrid: function() {\n if (!this.grid) {\n var strokeOptions = {\n strokeWidth: 1,\n stroke: 'rgba(255,255,255,0.5)'\n };\n\n var lineCount = 8;\n var gridWidth = this.viewport.width;\n var gridHeight = this.viewport.height;\n var xStep = gridWidth / (lineCount + 1);\n var yStep = gridHeight / (lineCount + 1);\n\n var grid = [\n new fabric.Rect({\n strokeWidth: 2,\n stroke: 'rgba(255,255,255,1)',\n originX: 'center',\n originY: 'center',\n width: gridWidth,\n height: gridHeight,\n left: gridWidth / 2,\n top: gridHeight / 2,\n fill: 'rgba(255,255,255,0)'\n })\n ];\n\n var i;\n for (i = 1; i <= lineCount; i++) {\n grid.push(new fabric.Line([i * xStep, 0, i * xStep, gridHeight], strokeOptions));\n }\n for (i = 1; i <= lineCount; i++) {\n grid.push(new fabric.Line([0, i * yStep, gridWidth, i * yStep], strokeOptions));\n }\n\n this.grid = new fabric.Group(grid, {\n left: this.editorWidth / 2,\n top: this.editorHeight / 2,\n originX: 'center',\n originY: 'center',\n angle: this.viewport.angle\n });\n\n this.canvas.add(this.grid);\n this.renderImage();\n }\n },\n\n /**\n * Hide the grid\n */\n _hideGrid: function() {\n this.canvas.remove(this.grid);\n this.grid = null;\n this.renderImage();\n },\n\n /**\n * Remove all the events when hiding the editor.\n */\n onFadeOut: function() {\n this.destroy();\n },\n\n /**\n * Make sure underlying content is not scrolled by accident.\n */\n show: function() {\n this.base();\n\n $('html').addClass('noscroll');\n },\n\n /**\n * Allow the content to scroll.\n */\n hide: function() {\n this.removeAllListeners();\n this.straighteningInput.removeAllListeners();\n $('html').removeClass('noscroll');\n this.base();\n },\n\n /**\n * onSave callback.\n */\n onSave: function() {\n this.settings.onSave();\n this.trigger('save');\n },\n\n /**\n * Enable the rotation slider.\n */\n enableSlider: function() {\n this.$imageTools.removeClass('hidden');\n },\n\n /**\n * Disable the rotation slider.\n */\n disableSlider: function() {\n this.$imageTools.addClass('hidden');\n },\n\n /**\n * Switch to crop mode.\n */\n enableCropMode: function() {\n var imageDimensions = this.getScaledImageDimensions();\n this.zoomRatio = this.getZoomToFitRatio(imageDimensions);\n\n var viewportProperties = {\n width: this.editorWidth,\n height: this.editorHeight\n };\n\n var imageProperties = {\n width: imageDimensions.width * this.zoomRatio,\n height: imageDimensions.height * this.zoomRatio,\n left: this.editorWidth / 2,\n top: this.editorHeight / 2\n };\n\n var callback = function() {\n this._setFittedImageVerticeCoordinates();\n\n // Restore cropper\n var state = this.cropperState;\n var scaledImageDimensions = this.getScaledImageDimensions();\n var sizeFactor = scaledImageDimensions.width / state.imageDimensions.width;\n\n // Restore based on the stored information\n var cropperData = {\n left: this.image.left + (state.offsetX * sizeFactor * this.zoomRatio),\n top: this.image.top + (state.offsetY * sizeFactor * this.zoomRatio),\n width: state.width * sizeFactor * this.zoomRatio,\n height: state.height * sizeFactor * this.zoomRatio\n };\n\n this._showCropper(cropperData);\n\n if (this.focalPoint) {\n sizeFactor = scaledImageDimensions.width / this.focalPointState.imageDimensions.width;\n this.focalPoint.left = this.image.left + (this.focalPointState.offsetX * sizeFactor * this.zoomRatio);\n this.focalPoint.top = this.image.top + (this.focalPointState.offsetY * sizeFactor * this.zoomRatio);\n this.canvas.add(this.focalPoint);\n }\n }.bind(this);\n\n this._editorModeTransition(callback, imageProperties, viewportProperties);\n },\n\n /**\n * Switch out of crop mode.\n */\n disableCropMode: function() {\n var viewportProperties = {};\n\n this._hideCropper();\n var imageDimensions = this.getScaledImageDimensions();\n var targetZoom = this.getZoomToCoverRatio(imageDimensions) * this.scaleFactor;\n var inverseZoomFactor = targetZoom / this.zoomRatio;\n this.zoomRatio = targetZoom;\n\n var imageProperties = {\n width: imageDimensions.width * this.zoomRatio,\n height: imageDimensions.height * this.zoomRatio,\n left: this.editorWidth / 2,\n top: this.editorHeight / 2\n };\n\n var offsetX = this.clipper.left - this.image.left;\n var offsetY = this.clipper.top - this.image.top;\n\n var imageOffsetX = offsetX * inverseZoomFactor;\n var imageOffsetY = offsetY * inverseZoomFactor;\n imageProperties.left = (this.editorWidth / 2) - imageOffsetX;\n imageProperties.top = (this.editorHeight / 2) - imageOffsetY;\n\n // Calculate the cropper dimensions after all the zooming\n viewportProperties.height = this.clipper.height * inverseZoomFactor;\n viewportProperties.width = this.clipper.width * inverseZoomFactor;\n\n if (!this.focalPoint || (this.focalPoint && !this._isCenterInside(this.focalPoint, this.clipper))) {\n if (this.focalPoint) {\n this.toggleFocalPoint();\n }\n\n this._resetFocalPointPosition();\n }\n\n var callback = function() {\n // Reposition focal point correctly\n if (this.focalPoint) {\n var sizeFactor = this.getScaledImageDimensions().width / this.focalPointState.imageDimensions.width;\n this.focalPoint.left = this.image.left + (this.focalPointState.offsetX * sizeFactor * this.zoomRatio);\n this.focalPoint.top = this.image.top + (this.focalPointState.offsetY * sizeFactor * this.zoomRatio);\n this.canvas.add(this.focalPoint);\n }\n }.bind(this);\n\n this._editorModeTransition(callback, imageProperties, viewportProperties);\n },\n\n /**\n * Transition between cropping end editor modes\n *\n * @param callback\n * @param imageProperties\n * @param viewportProperties\n * @private\n */\n _editorModeTransition: function (callback, imageProperties, viewportProperties) {\n if (!this.animationInProgress) {\n this.animationInProgress = true;\n\n // Without this it looks semi-broken during animation\n if (this.focalPoint) {\n this.canvas.remove(this.focalPoint);\n this.renderImage();\n }\n\n this.image.animate(imageProperties, {\n onChange: this.canvas.renderAll.bind(this.canvas),\n duration: this.settings.animationDuration,\n onComplete: function() {\n callback();\n this.animationInProgress = false;\n this.renderImage();\n }.bind(this)\n });\n\n this.viewport.animate(viewportProperties, {\n duration: this.settings.animationDuration\n });\n }\n },\n\n _showSpinner: function() {\n this.$spinnerCanvas = $('').appendTo($('.image', this.$container));\n var canvas = document.getElementById('spinner-canvas');\n var context = canvas.getContext('2d');\n var start = new Date();\n var lines = 16,\n cW = context.canvas.width,\n cH = context.canvas.height;\n\n var draw = function() {\n var rotation = parseInt(((new Date() - start) / 1000) * lines) / lines;\n context.save();\n context.clearRect(0, 0, cW, cH);\n context.translate(cW / 2, cH / 2);\n context.rotate(Math.PI * 2 * rotation);\n for (var i = 0; i < lines; i++) {\n context.beginPath();\n context.rotate(Math.PI * 2 / lines);\n context.moveTo(cW / 10, 0);\n context.lineTo(cW / 4, 0);\n context.lineWidth = cW / 30;\n context.strokeStyle = \"rgba(255,255,255,\" + i / lines + \")\";\n context.stroke();\n }\n context.restore();\n };\n this.spinnerInterval = window.setInterval(draw, 1000 / 30);\n },\n\n _hideSpinner: function () {\n window.clearInterval(this.spinnerInterval);\n this.$spinnerCanvas.remove();\n this.$spinnerCanvas = null;\n },\n\n /**\n * Show the cropper.\n *\n * @param clipperData\n */\n _showCropper: function(clipperData) {\n this._setupCropperLayer(clipperData);\n this._redrawCropperElements();\n this.renderCropper();\n },\n\n /**\n * Hide the cropper.\n */\n _hideCropper: function() {\n if (this.clipper) {\n this.croppingCanvas.remove(this.clipper);\n this.croppingCanvas.remove(this.croppingShade);\n this.croppingCanvas.remove(this.cropperHandles);\n this.croppingCanvas.remove(this.cropperGrid);\n this.croppingCanvas.remove(this.croppingRectangle);\n this.croppingCanvas.remove(this.croppingAreaText);\n\n this.croppingCanvas = null;\n this.renderCropper = null;\n }\n },\n\n /**\n * Draw the cropper.\n *\n * @param clipperData\n */\n _setupCropperLayer: function(clipperData) {\n // Set up the canvas for cropper\n this.croppingCanvas = new fabric.StaticCanvas('cropping-canvas', {\n backgroundColor: 'rgba(0,0,0,0)',\n hoverCursor: 'default',\n selection: false\n });\n\n this.croppingCanvas.setDimensions({\n width: this.editorWidth,\n height: this.editorHeight\n });\n\n this.renderCropper = function() {\n Garnish.requestAnimationFrame(this.croppingCanvas.renderAll.bind(this.croppingCanvas));\n }.bind(this);\n\n\n $('#cropping-canvas', this.$editorContainer).css({\n position: 'absolute',\n top: 0,\n left: 0\n });\n\n this.croppingShade = new fabric.Rect({\n left: this.editorWidth / 2,\n top: this.editorHeight / 2,\n originX: 'center',\n originY: 'center',\n width: this.editorWidth,\n height: this.editorHeight,\n fill: 'rgba(0,0,0,0.7)'\n });\n\n // Calculate the cropping rectangle size\n var imageDimensions = this.getScaledImageDimensions();\n var rectangleRatio = this.imageStraightenAngle === 0 ? 1 : this.getCombinedZoomRatio(imageDimensions) * 1.2;\n var rectWidth = imageDimensions.width / rectangleRatio;\n var rectHeight = imageDimensions.height / rectangleRatio;\n\n if (this.hasOrientationChanged()) {\n var temp = rectHeight;\n rectHeight = rectWidth;\n rectWidth = temp;\n }\n\n // Set up the cropping viewport rectangle\n this.clipper = new fabric.Rect({\n left: this.editorWidth / 2,\n top: this.editorHeight / 2,\n originX: 'center',\n originY: 'center',\n width: rectWidth,\n height: rectHeight,\n stroke: 'black',\n fill: 'rgba(128,0,0,1)',\n strokeWidth: 0\n });\n\n // Set from clipper data\n if (clipperData) {\n this.clipper.set(clipperData);\n }\n\n this.clipper.globalCompositeOperation = 'destination-out';\n this.croppingCanvas.add(this.croppingShade);\n this.croppingCanvas.add(this.clipper);\n },\n\n /**\n * Redraw the cropper boundaries\n */\n _redrawCropperElements: function() {\n if (typeof this._redrawCropperElements._ === 'undefined') {\n this._redrawCropperElements._ = {};\n }\n\n if (this.cropperHandles) {\n this.croppingCanvas.remove(this.cropperHandles);\n this.croppingCanvas.remove(this.cropperGrid);\n this.croppingCanvas.remove(this.croppingRectangle);\n this.croppingCanvas.remove(this.croppingAreaText);\n }\n this._redrawCropperElements._.lineOptions = {\n strokeWidth: 4,\n stroke: 'rgb(255,255,255)',\n fill: false\n };\n\n this._redrawCropperElements._.gridOptions = {\n strokeWidth: 2,\n stroke: 'rgba(255,255,255,0.5)'\n };\n\n // Draw the handles\n this._redrawCropperElements._.pathGroup = [\n new fabric.Path('M 0,10 L 0,0 L 10,0', this._redrawCropperElements._.lineOptions),\n new fabric.Path('M ' + (this.clipper.width - 8) + ',0 L ' + (this.clipper.width + 4) + ',0 L ' + (this.clipper.width + 4) + ',10', this._redrawCropperElements._.lineOptions),\n new fabric.Path('M ' + (this.clipper.width + 4) + ',' + (this.clipper.height - 8) + ' L' + (this.clipper.width + 4) + ',' + (this.clipper.height + 4) + ' L ' + (this.clipper.width - 8) + ',' + (this.clipper.height + 4), this._redrawCropperElements._.lineOptions),\n new fabric.Path('M 10,' + (this.clipper.height + 4) + ' L 0,' + (this.clipper.height + 4) + ' L 0,' + (this.clipper.height - 8), this._redrawCropperElements._.lineOptions)\n ];\n\n this.cropperHandles = new fabric.Group(this._redrawCropperElements._.pathGroup, {\n left: this.clipper.left,\n top: this.clipper.top,\n originX: 'center',\n originY: 'center'\n });\n\n // Don't forget the rectangle\n this.croppingRectangle = new fabric.Rect({\n left: this.clipper.left,\n top: this.clipper.top,\n width: this.clipper.width,\n height: this.clipper.height,\n fill: 'rgba(0,0,0,0)',\n stroke: 'rgba(255,255,255,0.8)',\n strokeWidth: 2,\n originX: 'center',\n originY: 'center'\n });\n\n this.cropperGrid = new fabric.Group(\n [\n new fabric.Line([this.clipper.width * 0.33, 0, this.clipper.width * 0.33, this.clipper.height], this._redrawCropperElements._.gridOptions),\n new fabric.Line([this.clipper.width * 0.66, 0, this.clipper.width * 0.66, this.clipper.height], this._redrawCropperElements._.gridOptions),\n new fabric.Line([0, this.clipper.height * 0.33, this.clipper.width, this.clipper.height * 0.33], this._redrawCropperElements._.gridOptions),\n new fabric.Line([0, this.clipper.height * 0.66, this.clipper.width, this.clipper.height * 0.66], this._redrawCropperElements._.gridOptions)\n ], {\n left: this.clipper.left,\n top: this.clipper.top,\n originX: 'center',\n originY: 'center'\n }\n );\n\n this._redrawCropperElements._.cropTextTop = this.croppingRectangle.top + (this.clipper.height / 2) + 12;\n this._redrawCropperElements._.cropTextBackgroundColor = 'rgba(0,0,0,0)';\n\n if (this._redrawCropperElements._.cropTextTop + 12 > this.editorHeight - 2) {\n this._redrawCropperElements._.cropTextTop -= 24;\n this._redrawCropperElements._.cropTextBackgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n this.croppingAreaText = new fabric.Textbox(Math.round(this.clipper.width) + ' x ' + Math.round(this.clipper.height), {\n left: this.croppingRectangle.left,\n top: this._redrawCropperElements._.cropTextTop,\n fontSize: 13,\n fill: 'rgb(200,200,200)',\n backgroundColor: this._redrawCropperElements._.cropTextBackgroundColor,\n font: 'Craft',\n width: 70,\n height: 15,\n originX: 'center',\n originY: 'center',\n textAlign: 'center'\n });\n\n this.croppingCanvas.add(this.cropperHandles);\n this.croppingCanvas.add(this.cropperGrid);\n this.croppingCanvas.add(this.croppingRectangle);\n this.croppingCanvas.add(this.croppingAreaText);\n },\n\n /**\n * Reposition the cropper when the image editor dimensions change.\n *\n * @param previousImageArea\n */\n _repositionCropper: function(previousImageArea) {\n if (!this.croppingCanvas) {\n return;\n }\n\n // Get the current clipper offset relative to center\n var currentOffset = {\n x: this.clipper.left - this.croppingCanvas.width / 2,\n y: this.clipper.top - this.croppingCanvas.height / 2\n };\n\n // Resize the cropping canvas\n this.croppingCanvas.setDimensions({\n width: this.editorWidth,\n height: this.editorHeight\n });\n\n // Check by what factor will the new final bounding box be different\n var currentArea = this._getBoundingRectangle(this.imageVerticeCoords);\n var areaFactor = currentArea.width / previousImageArea.width;\n\n // Adjust the cropper size to scale along with the bounding box\n this.clipper.width = Math.round(this.clipper.width * areaFactor);\n this.clipper.height = Math.round(this.clipper.height * areaFactor);\n\n // Adjust the coordinates: re-position clipper in relation to the new center to adjust\n // for editor size changes and then multiply by the size factor to adjust for image size changes\n this.clipper.left = this.editorWidth / 2 + (currentOffset.x * areaFactor);\n this.clipper.top = this.editorHeight / 2 + (currentOffset.y * areaFactor);\n\n // Resize the cropping shade\n this.croppingShade.set({\n width: this.editorWidth,\n height: this.editorHeight,\n left: this.editorWidth / 2,\n top: this.editorHeight / 2\n });\n\n this._redrawCropperElements();\n this.renderCropper();\n },\n\n /**\n * Get the dimensions of a bounding rectangle by a set of four coordinates.\n *\n * @param coordinateSet\n */\n _getBoundingRectangle: function(coordinateSet) {\n return {\n width: Math.max(coordinateSet.a.x, coordinateSet.b.x, coordinateSet.c.x, coordinateSet.d.x) - Math.min(coordinateSet.a.x, coordinateSet.b.x, coordinateSet.c.x, coordinateSet.d.x),\n height: Math.max(coordinateSet.a.y, coordinateSet.b.y, coordinateSet.c.y, coordinateSet.d.y) - Math.min(coordinateSet.a.y, coordinateSet.b.y, coordinateSet.c.y, coordinateSet.d.y)\n };\n },\n\n /**\n * Handle the mouse being clicked.\n *\n * @param ev\n */\n _handleMouseDown: function(ev) {\n // Focal before resize before dragging\n var focal = this.focalPoint && this._isMouseOver(ev, this.focalPoint);\n var move = this.croppingCanvas && this._isMouseOver(ev, this.clipper);\n var handle = this.croppingCanvas && this._cropperHandleHitTest(ev);\n\n if (handle || move || focal) {\n this.previousMouseX = ev.pageX;\n this.previousMouseY = ev.pageY;\n\n if (focal) {\n this.draggingFocal = true;\n } else if (handle) {\n this.scalingCropper = handle;\n } else if (move) {\n this.draggingCropper = true;\n }\n }\n },\n\n /**\n * Handle the mouse being moved.\n *\n * @param ev\n */\n _handleMouseMove: function(ev) {\n if (this.mouseMoveEvent !== null) {\n Garnish.requestAnimationFrame(this._handleMouseMoveInternal.bind(this));\n }\n this.mouseMoveEvent = ev;\n },\n\n _handleMouseMoveInternal: function() {\n if (this.mouseMoveEvent === null) {\n return;\n }\n\n if (this.focalPoint && this.draggingFocal) {\n this._handleFocalDrag(this.mouseMoveEvent);\n this.storeFocalPointState();\n this.renderImage();\n } else if (this.draggingCropper || this.scalingCropper) {\n if (this.draggingCropper) {\n this._handleCropperDrag(this.mouseMoveEvent);\n } else {\n this._handleCropperResize(this.mouseMoveEvent);\n }\n\n this._redrawCropperElements();\n\n this.storeCropperState();\n this.renderCropper();\n } else {\n this._setMouseCursor(this.mouseMoveEvent);\n }\n\n this.previousMouseX = this.mouseMoveEvent.pageX;\n this.previousMouseY = this.mouseMoveEvent.pageY;\n\n this.mouseMoveEvent = null;\n },\n\n /**\n * Handle mouse being released.\n *\n * @param ev\n */\n _handleMouseUp: function(ev) {\n this.draggingCropper = false;\n this.scalingCropper = false;\n this.draggingFocal = false;\n },\n\n /**\n * Handle mouse out\n *\n * @param ev\n */\n _handleMouseOut: function(ev) {\n this._handleMouseUp(ev);\n this.mouseMoveEvent = ev;\n this._handleMouseMoveInternal();\n },\n\n /**\n * Handle cropper being dragged.\n *\n * @param ev\n */\n _handleCropperDrag: function(ev) {\n if (typeof this._handleCropperDrag._ === 'undefined') {\n this._handleCropperDrag._ = {};\n }\n\n this._handleCropperDrag._.deltaX = ev.pageX - this.previousMouseX;\n this._handleCropperDrag._.deltaY = ev.pageY - this.previousMouseY;\n\n if (this._handleCropperDrag._.deltaX === 0 && this._handleCropperDrag._.deltaY === 0) {\n return false;\n }\n\n this._handleCropperDrag._.rectangle = {\n left: this.clipper.left - this.clipper.width / 2,\n top: this.clipper.top - this.clipper.height / 2,\n width: this.clipper.width,\n height: this.clipper.height\n };\n\n this._handleCropperDrag._.vertices = this._getRectangleVertices(this._handleCropperDrag._.rectangle, this._handleCropperDrag._.deltaX, this._handleCropperDrag._.deltaY);\n\n // If this would drag it outside of the image\n if (!this.arePointsInsideRectangle(this._handleCropperDrag._.vertices, this.imageVerticeCoords)) {\n // Try to find the furthest point in the same general direction where we can drag it\n\n // Delta iterator setup\n this._handleCropperDrag._.dxi = 0;\n this._handleCropperDrag._.dyi = 0;\n this._handleCropperDrag._.xStep = this._handleCropperDrag._.deltaX > 0 ? -1 : 1;\n this._handleCropperDrag._.yStep = this._handleCropperDrag._.deltaY > 0 ? -1 : 1;\n\n // The furthest we can move\n this._handleCropperDrag._.furthest = 0;\n this._handleCropperDrag._.furthestDeltas = {};\n\n // Loop through every combination of dragging it not so far\n for (this._handleCropperDrag._.dxi = Math.min(Math.abs(this._handleCropperDrag._.deltaX), 10); this._handleCropperDrag._.dxi >= 0; this._handleCropperDrag._.dxi--) {\n for (this._handleCropperDrag._.dyi = Math.min(Math.abs(this._handleCropperDrag._.deltaY), 10); this._handleCropperDrag._.dyi >= 0; this._handleCropperDrag._.dyi--) {\n this._handleCropperDrag._.vertices = this._getRectangleVertices(this._handleCropperDrag._.rectangle, this._handleCropperDrag._.dxi * (this._handleCropperDrag._.deltaX > 0 ? 1 : -1), this._handleCropperDrag._.dyi * (this._handleCropperDrag._.deltaY > 0 ? 1 : -1));\n\n if (this.arePointsInsideRectangle(this._handleCropperDrag._.vertices, this.imageVerticeCoords)) {\n if (this._handleCropperDrag._.dxi + this._handleCropperDrag._.dyi > this._handleCropperDrag._.furthest) {\n this._handleCropperDrag._.furthest = this._handleCropperDrag._.dxi + this._handleCropperDrag._.dyi;\n this._handleCropperDrag._.furthestDeltas = {\n x: this._handleCropperDrag._.dxi * (this._handleCropperDrag._.deltaX > 0 ? 1 : -1),\n y: this._handleCropperDrag._.dyi * (this._handleCropperDrag._.deltaY > 0 ? 1 : -1)\n }\n }\n }\n }\n }\n\n // REALLY can't drag along the cursor movement\n if (this._handleCropperDrag._.furthest == 0) {\n return;\n } else {\n this._handleCropperDrag._.deltaX = this._handleCropperDrag._.furthestDeltas.x;\n this._handleCropperDrag._.deltaY = this._handleCropperDrag._.furthestDeltas.y;\n }\n }\n\n this.clipper.set({\n left: this.clipper.left + this._handleCropperDrag._.deltaX,\n top: this.clipper.top + this._handleCropperDrag._.deltaY\n });\n },\n\n /**\n * Handle focal point being dragged.\n *\n * @param ev\n */\n _handleFocalDrag: function(ev) {\n if (typeof this._handleFocalDrag._ === 'undefined') {\n this._handleFocalDrag._ = {};\n }\n\n if (this.focalPoint) {\n this._handleFocalDrag._.deltaX = ev.pageX - this.previousMouseX;\n this._handleFocalDrag._.deltaY = ev.pageY - this.previousMouseY;\n\n if (this._handleFocalDrag._.deltaX === 0 && this._handleFocalDrag._.deltaY === 0) {\n return;\n }\n\n this._handleFocalDrag._.newX = this.focalPoint.left + this._handleFocalDrag._.deltaX;\n this._handleFocalDrag._.newY = this.focalPoint.top + this._handleFocalDrag._.deltaY;\n\n // Just make sure that the focal point stays inside the image\n if (this.currentView === 'crop') {\n if (!this.arePointsInsideRectangle([{x: this._handleFocalDrag._.newX, y: this._handleFocalDrag._.newY}], this.imageVerticeCoords)) {\n return;\n }\n } else {\n if (!(this.viewport.left - this.viewport.width / 2 - this._handleFocalDrag._.newX < 0 && this.viewport.left + this.viewport.width / 2 - this._handleFocalDrag._.newX > 0\n && this.viewport.top - this.viewport.height / 2 - this._handleFocalDrag._.newY < 0 && this.viewport.top + this.viewport.height / 2 - this._handleFocalDrag._.newY > 0)) {\n return;\n }\n }\n\n this.focalPoint.set({\n left: this.focalPoint.left + this._handleFocalDrag._.deltaX,\n top: this.focalPoint.top + this._handleFocalDrag._.deltaY\n });\n }\n },\n\n /**\n * Set the cropping constraint\n * @param constraint\n */\n setCroppingConstraint: function(constraint) {\n // In case this caused the sidebar width to change.\n this.updateSizeAndPosition();\n\n switch (constraint) {\n case 'none':\n this.croppingConstraint = false;\n break;\n\n case 'original':\n this.croppingConstraint = this.originalWidth / this.originalHeight;\n break;\n\n case 'current':\n this.croppingConstraint = this.clipper.width / this.clipper.height;\n break;\n\n case 'custom':\n\n break;\n default:\n this.croppingConstraint = parseFloat(constraint);\n\n break;\n }\n },\n\n /**\n * Enforce the cropping constraint\n */\n enforceCroppingConstraint: function () {\n if (typeof this.enforceCroppingConstraint._ === 'undefined') {\n this.enforceCroppingConstraint._ = {};\n }\n\n if (this.animationInProgress || !this.croppingConstraint) {\n return;\n }\n\n this.animationInProgress = true;\n\n // Mock the clipping rectangle for collision tests\n this.enforceCroppingConstraint._.rectangle = {\n left: this.clipper.left - this.clipper.width / 2,\n top: this.clipper.top - this.clipper.height / 2,\n width: this.clipper.width,\n height: this.clipper.height\n };\n\n // If wider than it should be\n if (this.clipper.width > this.clipper.height * this.croppingConstraint)\n {\n this.enforceCroppingConstraint._.previousHeight = this.enforceCroppingConstraint._.rectangle.height;\n\n // Make it taller!\n this.enforceCroppingConstraint._.rectangle.height = this.clipper.width / this.croppingConstraint;\n\n // Getting really awkward having to convert between 0;0 being center or top-left corner.\n this.enforceCroppingConstraint._.rectangle.top -= (this.enforceCroppingConstraint._.rectangle.height - this.enforceCroppingConstraint._.previousHeight) / 2;\n\n // If the clipper would end up out of bounds, make it narrower instead.\n if (!this.arePointsInsideRectangle(this._getRectangleVertices(this.enforceCroppingConstraint._.rectangle), this.imageVerticeCoords)) {\n this.enforceCroppingConstraint._.rectangle.width = this.clipper.height * this.croppingConstraint;\n this.enforceCroppingConstraint._.rectangle.height = this.enforceCroppingConstraint._.rectangle.width / this.croppingConstraint;\n }\n } else {\n // Follow the same pattern, if taller than it should be.\n this.enforceCroppingConstraint._.previousWidth = this.enforceCroppingConstraint._.rectangle.width;\n this.enforceCroppingConstraint._.rectangle.width = this.clipper.height * this.croppingConstraint;\n this.enforceCroppingConstraint._.rectangle.left -= (this.enforceCroppingConstraint._.rectangle.width - this.enforceCroppingConstraint._.previousWidth) / 2;\n\n if (!this.arePointsInsideRectangle(this._getRectangleVertices(this.enforceCroppingConstraint._.rectangle), this.imageVerticeCoords)) {\n this.enforceCroppingConstraint._.rectangle.height = this.clipper.width / this.croppingConstraint;\n this.enforceCroppingConstraint._.rectangle.width = this.enforceCroppingConstraint._.rectangle.height * this.croppingConstraint;\n }\n }\n\n this.enforceCroppingConstraint._.properties = {\n height: this.enforceCroppingConstraint._.rectangle.height,\n width: this.enforceCroppingConstraint._.rectangle.width\n };\n\n // Make sure to redraw cropper handles and gridlines when resizing\n this.clipper.animate(this.enforceCroppingConstraint._.properties, {\n onChange: function() {\n this._redrawCropperElements();\n this.croppingCanvas.renderAll();\n }.bind(this),\n duration: this.settings.animationDuration,\n onComplete: function() {\n this._redrawCropperElements();\n this.animationInProgress = false;\n this.renderCropper();\n this.storeCropperState();\n }.bind(this)\n });\n },\n\n /**\n * Handle cropper being resized.\n *\n * @param ev\n */\n _handleCropperResize: function(ev) {\n if (typeof this._handleCropperResize._ === 'undefined') {\n this._handleCropperResize._ = {};\n }\n\n // Size deltas\n this._handleCropperResize._.deltaX = ev.pageX - this.previousMouseX;\n this._handleCropperResize._.deltaY = ev.pageY - this.previousMouseY;\n\n if (this.scalingCropper === 'b' || this.scalingCropper === 't') {\n this._handleCropperResize._.deltaX = 0;\n }\n\n if (this.scalingCropper === 'l' || this.scalingCropper === 'r') {\n this._handleCropperResize._.deltaY = 0;\n }\n\n if (this._handleCropperResize._.deltaX === 0 && this._handleCropperResize._.deltaY === 0) {\n return;\n }\n\n // Translate from center-center origin to absolute coords\n this._handleCropperResize._.startingRectangle = {\n left: this.clipper.left - this.clipper.width / 2,\n top: this.clipper.top - this.clipper.height / 2,\n width: this.clipper.width,\n height: this.clipper.height\n }\n\n this._handleCropperResize._.rectangle = this._calculateNewCropperSizeByDeltas(this._handleCropperResize._.startingRectangle, this._handleCropperResize._.deltaX, this._handleCropperResize._.deltaY, this.scalingCropper);\n\n if (this._handleCropperResize._.rectangle.height < 30 || this._handleCropperResize._.rectangle.width < 30) {\n return;\n }\n\n if (!this.arePointsInsideRectangle(this._getRectangleVertices(this._handleCropperResize._.rectangle), this.imageVerticeCoords)) {\n return;\n }\n\n // Translate back to center-center origin.\n this.clipper.set({\n top: this._handleCropperResize._.rectangle.top + this._handleCropperResize._.rectangle.height / 2,\n left: this._handleCropperResize._.rectangle.left + this._handleCropperResize._.rectangle.width / 2,\n width: this._handleCropperResize._.rectangle.width,\n height: this._handleCropperResize._.rectangle.height\n });\n\n this._redrawCropperElements();\n },\n\n _calculateNewCropperSizeByDeltas: function (startingRectangle, deltaX, deltaY, cropperDirection) {\n if (typeof this._calculateNewCropperSizeByDeltas._ === 'undefined') {\n this._calculateNewCropperSizeByDeltas._ = {};\n }\n\n // Center deltas\n this._calculateNewCropperSizeByDeltas._.topDelta = 0;\n this._calculateNewCropperSizeByDeltas._.leftDelta = 0;\n\n this._calculateNewCropperSizeByDeltas._.rectangle = startingRectangle;\n this._calculateNewCropperSizeByDeltas._.deltaX = deltaX;\n this._calculateNewCropperSizeByDeltas._.deltaY = deltaY;\n\n // Lock the aspect ratio if needed\n if (this.croppingConstraint) {\n this._calculateNewCropperSizeByDeltas._.change = 0;\n\n // Take into account the mouse direction and figure out the \"real\" change in cropper size\n switch (cropperDirection) {\n case 't':\n this._calculateNewCropperSizeByDeltas._.change = -this._calculateNewCropperSizeByDeltas._.deltaY;\n break;\n case 'b':\n this._calculateNewCropperSizeByDeltas._.change = this._calculateNewCropperSizeByDeltas._.deltaY;\n break;\n case 'r':\n this._calculateNewCropperSizeByDeltas._.change = this._calculateNewCropperSizeByDeltas._.deltaX;\n break;\n case 'l':\n this._calculateNewCropperSizeByDeltas._.change = -this._calculateNewCropperSizeByDeltas._.deltaX;\n break;\n case 'tr':\n this._calculateNewCropperSizeByDeltas._.change = Math.abs(this._calculateNewCropperSizeByDeltas._.deltaY) > Math.abs(this._calculateNewCropperSizeByDeltas._.deltaX) ? -this._calculateNewCropperSizeByDeltas._.deltaY : this._calculateNewCropperSizeByDeltas._.deltaX;\n break;\n case 'tl':\n this._calculateNewCropperSizeByDeltas._.change = Math.abs(this._calculateNewCropperSizeByDeltas._.deltaY) > Math.abs(this._calculateNewCropperSizeByDeltas._.deltaX) ? -this._calculateNewCropperSizeByDeltas._.deltaY : -this._calculateNewCropperSizeByDeltas._.deltaX;\n break;\n case 'br':\n this._calculateNewCropperSizeByDeltas._.change = Math.abs(this._calculateNewCropperSizeByDeltas._.deltaY) > Math.abs(this._calculateNewCropperSizeByDeltas._.deltaX) ? this._calculateNewCropperSizeByDeltas._.deltaY : this._calculateNewCropperSizeByDeltas._.deltaX;\n break;\n case 'bl':\n this._calculateNewCropperSizeByDeltas._.change = Math.abs(this._calculateNewCropperSizeByDeltas._.deltaY) > Math.abs(this._calculateNewCropperSizeByDeltas._.deltaX) ? this._calculateNewCropperSizeByDeltas._.deltaY : -this._calculateNewCropperSizeByDeltas._.deltaX;\n break;\n }\n\n if (this.croppingConstraint > 1) {\n this._calculateNewCropperSizeByDeltas._.deltaX = this._calculateNewCropperSizeByDeltas._.change;\n this._calculateNewCropperSizeByDeltas._.deltaY = this._calculateNewCropperSizeByDeltas._.deltaX / this.croppingConstraint;\n } else {\n this._calculateNewCropperSizeByDeltas._.deltaY = this._calculateNewCropperSizeByDeltas._.change;\n this._calculateNewCropperSizeByDeltas._.deltaX = this._calculateNewCropperSizeByDeltas._.deltaY * this.croppingConstraint;\n }\n\n this._calculateNewCropperSizeByDeltas._.rectangle.height += this._calculateNewCropperSizeByDeltas._.deltaY;\n this._calculateNewCropperSizeByDeltas._.rectangle.width += this._calculateNewCropperSizeByDeltas._.deltaX;\n\n // Make the cropper compress/expand relative to the correct edge to make it feel \"right\"\n switch (cropperDirection) {\n case 't':\n this._calculateNewCropperSizeByDeltas._.rectangle.top -= this._calculateNewCropperSizeByDeltas._.deltaY;\n this._calculateNewCropperSizeByDeltas._.rectangle.left -= this._calculateNewCropperSizeByDeltas._.deltaX / 2;\n break;\n case 'b':\n this._calculateNewCropperSizeByDeltas._.rectangle.left += -this._calculateNewCropperSizeByDeltas._.deltaX / 2;\n break;\n case 'r':\n this._calculateNewCropperSizeByDeltas._.rectangle.top += -this._calculateNewCropperSizeByDeltas._.deltaY / 2;\n break;\n case 'l':\n this._calculateNewCropperSizeByDeltas._.rectangle.top -= this._calculateNewCropperSizeByDeltas._.deltaY / 2;\n this._calculateNewCropperSizeByDeltas._.rectangle.left -= this._calculateNewCropperSizeByDeltas._.deltaX;\n break;\n case 'tr':\n this._calculateNewCropperSizeByDeltas._.rectangle.top -= this._calculateNewCropperSizeByDeltas._.deltaY;\n break;\n case 'tl':\n this._calculateNewCropperSizeByDeltas._.rectangle.top -= this._calculateNewCropperSizeByDeltas._.deltaY;\n this._calculateNewCropperSizeByDeltas._.rectangle.left -= this._calculateNewCropperSizeByDeltas._.deltaX;\n break;\n case 'bl':\n this._calculateNewCropperSizeByDeltas._.rectangle.left -= this._calculateNewCropperSizeByDeltas._.deltaX;\n break;\n }\n } else {\n // Lock the aspect ratio\n if (this.shiftKeyHeld &&\n (cropperDirection === 'tl' || cropperDirection === 'tr' ||\n cropperDirection === 'bl' || cropperDirection === 'br')\n ) {\n this._calculateNewCropperSizeByDeltas._.ratio;\n if (Math.abs(deltaX) > Math.abs(deltaY)) {\n this._calculateNewCropperSizeByDeltas._.ratio = startingRectangle.width / startingRectangle.height;\n this._calculateNewCropperSizeByDeltas._.deltaY = this._calculateNewCropperSizeByDeltas._.deltaX / this._calculateNewCropperSizeByDeltas._.ratio;\n this._calculateNewCropperSizeByDeltas._.deltaY *= (cropperDirection === 'tr' || cropperDirection === 'bl') ? -1 : 1;\n } else {\n this._calculateNewCropperSizeByDeltas._.ratio = startingRectangle.width / startingRectangle.height;\n this._calculateNewCropperSizeByDeltas._.deltaX = this._calculateNewCropperSizeByDeltas._.deltaY * this._calculateNewCropperSizeByDeltas._.ratio;\n this._calculateNewCropperSizeByDeltas._.deltaX *= (cropperDirection === 'tr' || cropperDirection === 'bl') ? -1 : 1;\n }\n }\n\n if (cropperDirection.match(/t/)) {\n this._calculateNewCropperSizeByDeltas._.rectangle.top += this._calculateNewCropperSizeByDeltas._.deltaY;\n this._calculateNewCropperSizeByDeltas._.rectangle.height -= this._calculateNewCropperSizeByDeltas._.deltaY;\n }\n if (cropperDirection.match(/b/)) {\n this._calculateNewCropperSizeByDeltas._.rectangle.height += this._calculateNewCropperSizeByDeltas._.deltaY;\n }\n if (cropperDirection.match(/r/)) {\n this._calculateNewCropperSizeByDeltas._.rectangle.width += this._calculateNewCropperSizeByDeltas._.deltaX;\n }\n if (cropperDirection.match(/l/)) {\n this._calculateNewCropperSizeByDeltas._.rectangle.left += this._calculateNewCropperSizeByDeltas._.deltaX;\n this._calculateNewCropperSizeByDeltas._.rectangle.width -= this._calculateNewCropperSizeByDeltas._.deltaX;\n }\n }\n\n this._calculateNewCropperSizeByDeltas._.rectangle.top = this._calculateNewCropperSizeByDeltas._.rectangle.top;\n this._calculateNewCropperSizeByDeltas._.rectangle.left = this._calculateNewCropperSizeByDeltas._.rectangle.left;\n this._calculateNewCropperSizeByDeltas._.rectangle.width = this._calculateNewCropperSizeByDeltas._.rectangle.width;\n this._calculateNewCropperSizeByDeltas._.rectangle.height = this._calculateNewCropperSizeByDeltas._.rectangle.height;\n\n return this._calculateNewCropperSizeByDeltas._.rectangle;\n },\n\n /**\n * Set mouse cursor by it's position over cropper.\n *\n * @param ev\n */\n _setMouseCursor: function(ev) {\n if (typeof this._setMouseCursor._ === 'undefined') {\n this._setMouseCursor._ = {};\n }\n\n if (Garnish.isMobileBrowser(true)) {\n return;\n }\n this._setMouseCursor._.cursor = 'default';\n this._setMouseCursor._.handle = this.croppingCanvas && this._cropperHandleHitTest(ev);\n if (this.focalPoint && this._isMouseOver(ev, this.focalPoint)) {\n this._setMouseCursor._.cursor = 'pointer';\n } else if (this._setMouseCursor._.handle) {\n if (this._setMouseCursor._.handle === 't' || this._setMouseCursor._.handle === 'b') {\n this._setMouseCursor._.cursor = 'ns-resize';\n } else if (this._setMouseCursor._.handle === 'l' || this._setMouseCursor._.handle === 'r') {\n this._setMouseCursor._.cursor = 'ew-resize';\n } else if (this._setMouseCursor._.handle === 'tl' || this._setMouseCursor._.handle === 'br') {\n this._setMouseCursor._.cursor = 'nwse-resize';\n } else if (this._setMouseCursor._.handle === 'bl' || this._setMouseCursor._.handle === 'tr') {\n this._setMouseCursor._.cursor = 'nesw-resize';\n }\n } else if (this.croppingCanvas && this._isMouseOver(ev, this.clipper)) {\n this._setMouseCursor._.cursor = 'move';\n }\n\n $('.body').css('cursor', this._setMouseCursor._.cursor);\n },\n\n /**\n * Test whether the mouse cursor is on any cropper handles.\n *\n * @param ev\n */\n _cropperHandleHitTest: function(ev) {\n if (typeof this._cropperHandleHitTest._ === 'undefined') {\n this._cropperHandleHitTest._ = {};\n }\n\n this._cropperHandleHitTest._.parentOffset = this.$croppingCanvas.offset();\n this._cropperHandleHitTest._.mouseX = ev.pageX - this._cropperHandleHitTest._.parentOffset.left;\n this._cropperHandleHitTest._.mouseY = ev.pageY - this._cropperHandleHitTest._.parentOffset.top;\n\n // Compensate for center origin coordinate-wise\n this._cropperHandleHitTest._.lb = this.clipper.left - this.clipper.width / 2;\n this._cropperHandleHitTest._.rb = this._cropperHandleHitTest._.lb + this.clipper.width;\n this._cropperHandleHitTest._.tb = this.clipper.top - this.clipper.height / 2;\n this._cropperHandleHitTest._.bb = this._cropperHandleHitTest._.tb + this.clipper.height;\n\n // Left side top/bottom\n if (this._cropperHandleHitTest._.mouseX < this._cropperHandleHitTest._.lb + 10 && this._cropperHandleHitTest._.mouseX > this._cropperHandleHitTest._.lb - 3) {\n if (this._cropperHandleHitTest._.mouseY < this._cropperHandleHitTest._.tb + 10 && this._cropperHandleHitTest._.mouseY > this._cropperHandleHitTest._.tb - 3) {\n return 'tl';\n } else if (this._cropperHandleHitTest._.mouseY < this._cropperHandleHitTest._.bb + 3 && this._cropperHandleHitTest._.mouseY > this._cropperHandleHitTest._.bb - 10) {\n return 'bl';\n }\n }\n // Right side top/bottom\n if (this._cropperHandleHitTest._.mouseX > this._cropperHandleHitTest._.rb - 13 && this._cropperHandleHitTest._.mouseX < this._cropperHandleHitTest._.rb + 3) {\n if (this._cropperHandleHitTest._.mouseY < this._cropperHandleHitTest._.tb + 10 && this._cropperHandleHitTest._.mouseY > this._cropperHandleHitTest._.tb - 3) {\n return 'tr';\n } else if (this._cropperHandleHitTest._.mouseY < this._cropperHandleHitTest._.bb + 2 && this._cropperHandleHitTest._.mouseY > this._cropperHandleHitTest._.bb - 10) {\n return 'br';\n }\n }\n\n // Left or right\n if (this._cropperHandleHitTest._.mouseX < this._cropperHandleHitTest._.lb + 3 && this._cropperHandleHitTest._.mouseX > this._cropperHandleHitTest._.lb - 3 && this._cropperHandleHitTest._.mouseY < this._cropperHandleHitTest._.bb - 10 && this._cropperHandleHitTest._.mouseY > this._cropperHandleHitTest._.tb + 10) {\n return 'l';\n }\n if (this._cropperHandleHitTest._.mouseX < this._cropperHandleHitTest._.rb + 1 && this._cropperHandleHitTest._.mouseX > this._cropperHandleHitTest._.rb - 5 && this._cropperHandleHitTest._.mouseY < this._cropperHandleHitTest._.bb - 10 && this._cropperHandleHitTest._.mouseY > this._cropperHandleHitTest._.tb + 10) {\n return 'r';\n }\n\n // Top or bottom\n if (this._cropperHandleHitTest._.mouseY < this._cropperHandleHitTest._.tb + 4 && this._cropperHandleHitTest._.mouseY > this._cropperHandleHitTest._.tb - 2 && this._cropperHandleHitTest._.mouseX > this._cropperHandleHitTest._.lb + 10 && this._cropperHandleHitTest._.mouseX < this._cropperHandleHitTest._.rb - 10) {\n return 't';\n }\n if (this._cropperHandleHitTest._.mouseY < this._cropperHandleHitTest._.bb + 2 && this._cropperHandleHitTest._.mouseY > this._cropperHandleHitTest._.bb - 4 && this._cropperHandleHitTest._.mouseX > this._cropperHandleHitTest._.lb + 10 && this._cropperHandleHitTest._.mouseX < this._cropperHandleHitTest._.rb - 10) {\n return 'b';\n }\n\n return false;\n },\n\n /**\n * Test whether the mouse cursor is on a fabricJS object.\n *\n * @param object\n * @param event\n *\n * @return boolean\n */\n\n _isMouseOver: function(event, object) {\n if (typeof this._isMouseOver._ === 'undefined') {\n this._isMouseOver._ = {};\n }\n\n this._isMouseOver._.parentOffset = this.$croppingCanvas.offset();\n this._isMouseOver._.mouseX = event.pageX - this._isMouseOver._.parentOffset.left;\n this._isMouseOver._.mouseY = event.pageY - this._isMouseOver._.parentOffset.top;\n\n // Compensate for center origin coordinate-wise\n this._isMouseOver._.lb = object.left - object.width / 2;\n this._isMouseOver._.rb = this._isMouseOver._.lb + object.width;\n this._isMouseOver._.tb = object.top - object.height / 2;\n this._isMouseOver._.bb = this._isMouseOver._.tb + object.height;\n\n return (\n this._isMouseOver._.mouseX >= this._isMouseOver._.lb &&\n this._isMouseOver._.mouseX <= this._isMouseOver._.rb &&\n this._isMouseOver._.mouseY >= this._isMouseOver._.tb &&\n this._isMouseOver._.mouseY <= this._isMouseOver._.bb\n );\n },\n\n /**\n * Get vertices of a rectangle defined by left,top,height and width properties.\n * Optionally it's possible to provide offsetX and offsetY values.\n * Left and top properties of rectangle reference the top-left corner.\n *\n * @param rectangle\n * @param [offsetX]\n * @param [offsetY]\n */\n _getRectangleVertices: function(rectangle, offsetX, offsetY) {\n if (typeof this._getRectangleVertices._ === 'undefined') {\n this._getRectangleVertices._ = {};\n }\n\n if (typeof offsetX === 'undefined') {\n offsetX = 0;\n }\n if (typeof offsetY === 'undefined') {\n offsetY = 0;\n }\n\n this._getRectangleVertices._.topLeft = {\n x: rectangle.left + offsetX,\n y: rectangle.top + offsetY\n };\n\n this._getRectangleVertices._.topRight = {x: this._getRectangleVertices._.topLeft.x + rectangle.width, y: this._getRectangleVertices._.topLeft.y};\n this._getRectangleVertices._.bottomRight = {x: this._getRectangleVertices._.topRight.x, y: this._getRectangleVertices._.topRight.y + rectangle.height};\n this._getRectangleVertices._.bottomLeft = {x: this._getRectangleVertices._.topLeft.x, y: this._getRectangleVertices._.bottomRight.y};\n\n return [this._getRectangleVertices._.topLeft, this._getRectangleVertices._.topRight, this._getRectangleVertices._.bottomRight, this._getRectangleVertices._.bottomLeft];\n },\n\n /**\n * Set image vertice coordinates for an image that's been zoomed to fit.\n */\n _setFittedImageVerticeCoordinates: function() {\n this.imageVerticeCoords = this.getImageVerticeCoords('fit');\n },\n\n /**\n * Get image vertice coords by a zoom mode and taking into account the straightening angle.\n * The zoomMode can be either \"cover\", \"fit\" or a discrete float value.\n *\n * @param zoomMode\n */\n getImageVerticeCoords: function(zoomMode) {\n var angleInRadians = -1 * ((this.hasOrientationChanged() ? 90 : 0) + this.imageStraightenAngle) * (Math.PI / 180);\n\n var imageDimensions = this.getScaledImageDimensions();\n\n var ratio;\n\n if (typeof zoomMode === \"number\") {\n ratio = zoomMode;\n } else if (zoomMode === \"cover\") {\n ratio = this.getZoomToCoverRatio(imageDimensions);\n } else {\n ratio = this.getZoomToFitRatio(imageDimensions);\n }\n\n // Get the dimensions of the scaled image\n var scaledHeight = imageDimensions.height * ratio;\n var scaledWidth = imageDimensions.width * ratio;\n\n // Calculate the segments of the containing box for the image.\n // When referring to top/bottom or right/left segments, these are on the\n // right-side and bottom projection of the containing box for the zoomed out image.\n var topVerticalSegment = Math.cos(angleInRadians) * scaledHeight;\n var bottomVerticalSegment = Math.sin(angleInRadians) * scaledWidth;\n var rightHorizontalSegment = Math.cos(angleInRadians) * scaledWidth;\n var leftHorizontalSegment = Math.sin(angleInRadians) * scaledHeight;\n\n // Calculate the offsets from editor box for the image-containing box\n var verticalOffset = (this.editorHeight - (topVerticalSegment + bottomVerticalSegment)) / 2;\n var horizontalOffset = (this.editorWidth - (leftHorizontalSegment + rightHorizontalSegment)) / 2;\n\n // Finally, calculate the image vertice coordinates\n return {\n a: {\n x: horizontalOffset + rightHorizontalSegment,\n y: verticalOffset\n },\n b: {\n x: this.editorWidth - horizontalOffset,\n y: verticalOffset + topVerticalSegment\n },\n c: {\n x: horizontalOffset + leftHorizontalSegment,\n y: this.editorHeight - verticalOffset\n },\n d: {\n x: horizontalOffset,\n y: verticalOffset + bottomVerticalSegment\n }\n };\n },\n\n /**\n * Debug stuff by continuously rendering a fabric object on canvas.\n *\n * @param fabricObj\n */\n _debug: function(fabricObj) {\n this.canvas.remove(this.debugger);\n this.debugger = fabricObj;\n this.canvas.add(this.debugger);\n },\n\n /**\n * Given an array of points in the form of {x: int, y:int} and a rectangle in the form of\n * {a:{x:int, y:int}, b:{x:int, y:int}, c:{x:int, y:int}} (the fourth vertice is unnecessary)\n * return true if the point is in the rectangle.\n *\n * Adapted from: http://stackoverflow.com/a/2763387/2040791\n *\n * @param points\n * @param rectangle\n */\n arePointsInsideRectangle: function(points, rectangle) {\n if (typeof this.arePointsInsideRectangle._ === 'undefined') {\n this.arePointsInsideRectangle._ = {};\n }\n\n // Pre-calculate the vectors and scalar products for two rectangle edges\n this.arePointsInsideRectangle._.ab = this._getVector(rectangle.a, rectangle.b);\n this.arePointsInsideRectangle._.bc = this._getVector(rectangle.b, rectangle.c);\n this.arePointsInsideRectangle._.scalarAbAb = this._getScalarProduct(this.arePointsInsideRectangle._.ab, this.arePointsInsideRectangle._.ab);\n this.arePointsInsideRectangle._.scalarBcBc = this._getScalarProduct(this.arePointsInsideRectangle._.bc, this.arePointsInsideRectangle._.bc);\n\n for (this.arePointsInsideRectangle._.i = 0; this.arePointsInsideRectangle._.i < points.length; this.arePointsInsideRectangle._.i++) {\n this.arePointsInsideRectangle._.point = points[this.arePointsInsideRectangle._.i];\n\n // Calculate the vectors for two rectangle sides and for\n // the vector from vertices a and b to the point P\n this.arePointsInsideRectangle._.ap = this._getVector(rectangle.a, this.arePointsInsideRectangle._.point);\n this.arePointsInsideRectangle._.bp = this._getVector(rectangle.b, this.arePointsInsideRectangle._.point);\n\n // Calculate scalar or dot products for some vector combinations\n this.arePointsInsideRectangle._.scalarAbAp = this._getScalarProduct(this.arePointsInsideRectangle._.ab, this.arePointsInsideRectangle._.ap);\n this.arePointsInsideRectangle._.scalarBcBp = this._getScalarProduct(this.arePointsInsideRectangle._.bc, this.arePointsInsideRectangle._.bp);\n\n this.arePointsInsideRectangle._.projectsOnAB = 0 <= this.arePointsInsideRectangle._.scalarAbAp && this.arePointsInsideRectangle._.scalarAbAp <= this.arePointsInsideRectangle._.scalarAbAb;\n this.arePointsInsideRectangle._.projectsOnBC = 0 <= this.arePointsInsideRectangle._.scalarBcBp && this.arePointsInsideRectangle._.scalarBcBp <= this.arePointsInsideRectangle._.scalarBcBc;\n\n if (!(this.arePointsInsideRectangle._.projectsOnAB && this.arePointsInsideRectangle._.projectsOnBC)) {\n return false;\n }\n }\n\n return true;\n },\n\n /**\n * Returns an object representing the vector between points a and b.\n *\n * @param a\n * @param b\n */\n _getVector: function(a, b) {\n return {x: b.x - a.x, y: b.y - a.y};\n },\n\n /**\n * Returns the scalar product of two vectors\n *\n * @param a\n * @param b\n */\n _getScalarProduct: function(a, b) {\n return a.x * b.x + a.y * b.y;\n },\n\n /**\n * Returns the magnitude of a vector_redrawCropperElements\n * .\n *\n * @param vector\n */\n _getVectorMagnitude: function(vector) {\n return Math.sqrt(vector.x * vector.x + vector.y * vector.y);\n },\n\n /**\n * Returns the angle between two vectors in degrees with two decimal points\n *\n * @param a\n * @param b\n */\n _getAngleBetweenVectors: function(a, b) {\n return Math.round(Math.acos(Math.min(1, this._getScalarProduct(a, b) / (this._getVectorMagnitude(a) * this._getVectorMagnitude(b)))) * 180 / Math.PI * 100) / 100;\n },\n\n /**\n * Return the rectangle edge crossed by an imaginary line drawn from editor center to a vertex\n *\n * @param rectangle\n * @param vertex\n *\n * @returns {*}\n */\n _getEdgeCrossed: function(rectangle, vertex) {\n // Determine over which edge the vertex is\n var edgePoints = [\n [rectangle.a, rectangle.b],\n [rectangle.b, rectangle.c],\n [rectangle.c, rectangle.d],\n [rectangle.d, rectangle.a]\n ];\n\n var centerPoint = {x: this.editorWidth / 2, y: this.editorHeight / 2};\n var smallestDiff = 180;\n var edgeCrossed = null;\n\n // Test each edge\n for (var edgeIndex = 0; edgeIndex < edgePoints.length; edgeIndex++) {\n var edge = edgePoints[edgeIndex];\n var toCenter = this._getVector(edge[0], centerPoint);\n var edgeVector = this._getVector(edge[0], edge[1]);\n var toVertex = this._getVector(edge[0], vertex);\n\n // If the angle between toCenter/toVertex is the sum of\n // angles between edgeVector/toCenter and edgeVector/toVertex, it means that\n // the edgeVector is between the other two meaning that this is the offending vertex.\n // To avoid the rounding errors, we'll take the closest match\n var diff = Math.abs(this._getAngleBetweenVectors(toCenter, toVertex) - (this._getAngleBetweenVectors(toCenter, edgeVector) + this._getAngleBetweenVectors(edgeVector, toVertex)));\n\n if (diff < smallestDiff) {\n smallestDiff = diff;\n edgeCrossed = edge;\n }\n }\n\n return edgeCrossed;\n },\n\n /**\n * Get the image bounding box by image scaled dimensions, taking ingo account the straightening angle.\n *\n * @param dimensions\n */\n _getImageBoundingBox: function(dimensions) {\n var box = {};\n\n var angleInRadians = Math.abs(this.imageStraightenAngle) * (Math.PI / 180);\n\n var proportion = dimensions.height / dimensions.width;\n box.height = dimensions.width * (Math.sin(angleInRadians) + Math.cos(angleInRadians) * proportion);\n box.width = dimensions.width * (Math.cos(angleInRadians) + Math.sin(angleInRadians) * proportion);\n\n if (this.hasOrientationChanged()) {\n var temp = box.width;\n box.width = box.height;\n box.height = temp;\n }\n\n return box;\n }\n },\n {\n defaults: {\n animationDuration: 100,\n allowSavingAsNew: true,\n onSave: $.noop,\n allowDegreeFractions: true\n }\n }\n);\n\n/** global: Craft */\n/** global: Garnish */\n/**\n * Asset index class\n */\nCraft.AssetIndex = Craft.BaseElementIndex.extend(\n {\n $includeSubfoldersContainer: null,\n $includeSubfoldersCheckbox: null,\n showingIncludeSubfoldersCheckbox: false,\n\n $uploadButton: null,\n $uploadInput: null,\n $progressBar: null,\n $folders: null,\n\n uploader: null,\n promptHandler: null,\n progressBar: null,\n\n _uploadTotalFiles: 0,\n _uploadFileProgress: {},\n _uploadedAssetIds: [],\n _currentUploaderSettings: {},\n\n _assetDrag: null,\n _folderDrag: null,\n _expandDropTargetFolderTimeout: null,\n _tempExpandedFolders: [],\n\n _fileConflictTemplate: {\n choices: [\n {value: 'keepBoth', title: Craft.t('app', 'Keep both')},\n {value: 'replace', title: Craft.t('app', 'Replace it')}\n ]\n },\n _folderConflictTemplate: {\n choices: [\n {value: 'replace', title: Craft.t('app', 'Replace the folder (all existing files will be deleted)')},\n {value: 'merge', title: Craft.t('app', 'Merge the folder (any conflicting files will be replaced)')}\n ]\n },\n\n init: function(elementType, $container, settings) {\n this.base(elementType, $container, settings);\n\n if (this.settings.context === 'index') {\n if (!this._folderDrag) {\n this._initIndexPageMode();\n }\n\n this.addListener(Garnish.$win, 'resize,scroll', '_positionProgressBar');\n } else {\n this.addListener(this.$main, 'scroll', '_positionProgressBar');\n\n if (this.settings.modal) {\n this.settings.modal.on('updateSizeAndPosition', $.proxy(this, '_positionProgressBar'));\n }\n }\n },\n\n initSources: function() {\n if (this.settings.context === 'index' && !this._folderDrag) {\n this._initIndexPageMode();\n }\n\n return this.base();\n },\n\n initSource: function($source) {\n this.base($source);\n\n this._createFolderContextMenu($source);\n\n if (this.settings.context === 'index') {\n if (this._folderDrag && this._getSourceLevel($source) > 1) {\n if ($source.data('folder-id')) {\n this._folderDrag.addItems($source.parent());\n }\n }\n\n if (this._assetDrag) {\n this._assetDrag.updateDropTargets();\n }\n }\n },\n\n deinitSource: function($source) {\n this.base($source);\n\n // Does this source have a context menu?\n var contextMenu = $source.data('contextmenu');\n\n if (contextMenu) {\n contextMenu.destroy();\n }\n\n if (this.settings.context === 'index') {\n if (this._folderDrag && this._getSourceLevel($source) > 1) {\n this._folderDrag.removeItems($source.parent());\n }\n\n if (this._assetDrag) {\n this._assetDrag.updateDropTargets();\n }\n }\n },\n\n _getSourceLevel: function($source) {\n return $source.parentsUntil('nav', 'ul').length;\n },\n\n /**\n * Initialize the index page-specific features\n */\n _initIndexPageMode: function() {\n if (this._folderDrag) {\n return;\n }\n\n // Make the elements selectable\n this.settings.selectable = true;\n this.settings.multiSelect = true;\n\n var onDragStartProxy = $.proxy(this, '_onDragStart'),\n onDropTargetChangeProxy = $.proxy(this, '_onDropTargetChange');\n\n // Asset dragging\n // ---------------------------------------------------------------------\n\n this._assetDrag = new Garnish.DragDrop({\n activeDropTargetClass: 'sel',\n helperOpacity: 0.75,\n\n filter: $.proxy(function() {\n return this.view.getSelectedElements().has('div.element[data-movable]');\n }, this),\n\n helper: $.proxy(function($file) {\n return this._getFileDragHelper($file);\n }, this),\n\n dropTargets: $.proxy(function() {\n // Which data attribute should we be checking?\n var attr;\n if (this._assetDrag.$draggee && this._assetDrag.$draggee.has('.element[data-peer-file]').length) {\n attr = 'data-can-move-peer-files-to';\n } else {\n attr = 'data-can-move-to';\n }\n\n var targets = [];\n\n for (var i = 0; i < this.$sources.length; i++) {\n // Make sure it's a volume folder\n var $source = this.$sources.eq(i);\n if (Garnish.hasAttr($source, attr)) {\n targets.push($source);\n }\n }\n\n return targets;\n }, this),\n\n onDragStart: onDragStartProxy,\n onDropTargetChange: onDropTargetChangeProxy,\n onDragStop: $.proxy(this, '_onFileDragStop')\n });\n\n // Folder dragging\n // ---------------------------------------------------------------------\n\n this._folderDrag = new Garnish.DragDrop(\n {\n activeDropTargetClass: 'sel',\n helperOpacity: 0.75,\n\n filter: $.proxy(function() {\n // Return each of the selected 's parent s, except for top level drag attempts.\n var $selected = this.sourceSelect.getSelectedItems(),\n draggees = [];\n\n for (var i = 0; i < $selected.length; i++) {\n var $source = $selected.eq(i);\n\n if (!this._getFolderUidFromSourceKey($source.data('key'))) {\n continue;\n }\n\n if ($source.hasClass('sel') && this._getSourceLevel($source) > 1) {\n draggees.push($source.parent()[0]);\n }\n }\n\n return $(draggees);\n }, this),\n\n helper: $.proxy(function($draggeeHelper) {\n var $helperSidebar = $(''),\n $helperNav = $('').appendTo($helperSidebar),\n $helperUl = $('
').appendTo($outerContainer);\n var $table = $('').appendTo($innerContainer);\n var $tbody = $('').appendTo($table);\n\n $element.appendTo($tbody);\n\n // Copy the column widths\n this._$firstRowCells = this.view.$table.children('tbody').children('tr:first').children();\n var $helperCells = $element.children();\n\n for (var i = 0; i < $helperCells.length; i++) {\n // Hard-set the cell widths\n var $helperCell = $($helperCells[i]);\n\n // Skip the checkbox cell\n if ($helperCell.hasClass('checkbox-cell')) {\n $helperCell.remove();\n $outerContainer.css('margin-' + Craft.left, 19); // 26 - 7\n continue;\n }\n\n var $firstRowCell = $(this._$firstRowCells[i]),\n width = $firstRowCell.width();\n\n $firstRowCell.width(width);\n $helperCell.width(width);\n }\n\n return $outerContainer;\n }\n case 'thumbs': {\n $outerContainer = $('').appendTo(Garnish.$bod);\n $innerContainer = $('
' +\n '
'\n ).appendTo($form);\n let $buttons = $('').appendTo($body);\n let $cancelBtn = $('', {\n type: 'button',\n class: 'btn',\n text: Craft.t('app', 'Cancel'),\n }).appendTo($buttons);\n\n if (settings.contentSummary.length) {\n for (let i = 0; i < settings.contentSummary.length; i++) {\n $body.find('ul').append($('' +\n '
' +\n '' + Craft.t('app', 'What do you want to do with their content?') + '
' +\n '' +\n '' +\n '
' +\n '' +\n '' +\n '' +\n '
' +\n '' +\n '' +\n '
' +\n '' + Craft.t('app', 'The draft has been saved.') + '
';\n } else {\n bodyHtml = '' + Craft.t('app', 'The draft could not be saved.') + '
';\n\n if (this.errors.length) {\n bodyHtml += '- ';\n for (i = 0; i < this.errors.length; i++) {\n bodyHtml += '
- ' + Craft.escapeHtml(this.errors[i]) + ' ';\n }\n bodyHtml += '
').appendTo($hudBody);\n $inputContainer = $('
').appendTo($field);\n this.$nameTextInput = $('').appendTo($inputContainer).val(this.settings.draftName);\n\n // Add the Notes field\n $field = $('
').appendTo($hudBody);\n $inputContainer = $('
').appendTo($field);\n this.$notesTextInput = $('