{"version":3,"file":"app/form.elements.file-multi.js","sources":["form.elements.file-multi.js"],"sourcesContent":["/*----------------------------------------------------------------------------*\\\r\n FORM.ELEMENTS.FILE-MULTI\r\n Multi file upload, using dropzone js\r\n\\*----------------------------------------------------------------------------*/\r\n\r\n/**\r\n * Use strict as per:\r\n * http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/\r\n */\r\n'use strict';\r\n\r\n\r\n/**\r\n * Check if oy object exists, otherwise create it\r\n */\r\nvar oy = oy || {};\r\n\r\nvar uploadUrl = '';\r\n\r\n/**\r\n * Jshint global references\r\n * Please define all third party plugins that you use to not break jshinting\r\n */\r\n\r\n/*global plupload */\r\n/*global moxie */\r\n\r\n\r\n\r\n/* Component\r\n\\*----------------------------------------------------------------------------*/\r\n\r\noy.form.elements.fileMulti = {\r\n\r\n init: function () {\r\n if (oy.cutsMustard) {\r\n this.initPluploads();\r\n }\r\n },\r\n\r\n changeUploadUrl(newUrl){\r\n uploadUrl = newUrl;\r\n },\r\n\r\n setupPlupload: function ($plupload) {\r\n var self = this;\r\n var $browseFileButton = $plupload.querySelector('.js--plupload__browse-file');\r\n var $browseFolderButton = $plupload.querySelector('.js--plupload__browse-folder');\r\n var $startUploadButton = $plupload.querySelector('.js--plupload__start-upload');\r\n var $container = $plupload.querySelector('.js--plupload__zone');\r\n var $imagesList = $plupload.querySelector('.js--plupload__image-list');\r\n var $progressWrap = $plupload.querySelector('.js--plupload__progress');\r\n uploadUrl = $plupload.dataset.pluploadUrl;\r\n var $minPixelSize = $plupload.dataset.pluploadMinpixelsize;\r\n var $bgimage = $plupload.dataset.pluploadBgimage;\r\n var uploader = new plupload.Uploader({\r\n browse_button: $browseFileButton, // eslint-disable-line camelcase\r\n dragdrop: true,\r\n prevent_duplicates: true, // eslint-disable-line camelcase\r\n rename: false,\r\n sortable: false,\r\n quality: 5,\r\n views: {\r\n list: false,\r\n thumbs: true\r\n },\r\n drop_element: $container, // eslint-disable-line camelcase\r\n url: uploadUrl,\r\n headers: {\r\n 'Accept': 'application/json'\r\n },\r\n filters: {\r\n mime_types: [ // eslint-disable-line camelcase\r\n {\r\n title: 'Image files', extensions: $plupload.dataset.pluploadExtensions\r\n }\r\n ],\r\n\r\n max_file_size: $plupload.dataset.pluploadMaxsize // eslint-disable-line camelcase\r\n }\r\n });\r\n // add the dom-element to the uploader object, for reuse\r\n uploader.$imagesList = $imagesList;\r\n uploader.$container = $container;\r\n uploader.$minPixelSize = $minPixelSize;\r\n uploader.$bgimage = $bgimage;\r\n uploader.init();\r\n // if the browse-folder button is clicked, add attributes for the js-inserted \r\n if ($browseFolderButton) {\r\n $browseFolderButton.addEventListener('click', function () {\r\n var $input = $plupload.querySelector('input[type=\"file\"]');\r\n\r\n $input.setAttribute('webkitdirectory', '');\r\n $input.setAttribute('mozdirectory', '');\r\n $input.setAttribute('odirectory', '');\r\n $input.setAttribute('msdirectory', '');\r\n $input.setAttribute('directory', '');\r\n // simulate a click on the \r\n $input.click();\r\n });\r\n }\r\n\r\n // if the regular\r\n $browseFileButton.addEventListener('click', function () {\r\n var $input = $plupload.querySelector('input[type=\"file\"]');\r\n\r\n $input.removeAttribute('webkitdirectory', '');\r\n $input.removeAttribute('mozdirectory', '');\r\n $input.removeAttribute('odirectory', '');\r\n $input.removeAttribute('msdirectory', '');\r\n $input.removeAttribute('directory', '');\r\n });\r\n\r\n var $altLink = $container.querySelector('.js--plupload__alt-link');\r\n $altLink.addEventListener('click', function () {\r\n $browseFileButton.click();\r\n });\r\n\r\n // files are added, create thumbs and enable the start upload button\r\n uploader.bind('FilesAdded', function (uploader) {\r\n self.handlePluploadFilesAdded(uploader);\r\n uploader.$container.classList.add('has-files');\r\n $startUploadButton.disabled = false;\r\n });\r\n\r\n $startUploadButton.addEventListener('click', function () {\r\n uploader.start();\r\n });\r\n\r\n uploader.bind('BeforeUpload', function (uploader, file) {\r\n $startUploadButton.disabled = true;\r\n // Check if a file is not renamed or deleted\r\n if (file.getNative() && file.getNative().size === 0) {\r\n uploader.trigger('Error', {'code': -404, 'file': file});\r\n }\r\n uploader.settings.url = uploadUrl;\r\n });\r\n\r\n uploader.bind('UploadProgress', function (uploader, file) {\r\n var $loader = uploader.$imagesList.querySelector('[data-file-id=\"' + file.id + '\"] .js--plupload__progress-bar');\r\n if ($loader) {\r\n $loader.style.width = file.percent + '%';\r\n }\r\n $progressWrap.innerHTML = oy.dictionary.upload.progress + ': ' + uploader.total.percent + '%';\r\n });\r\n\r\n uploader.bind('FileUploaded', function (uploader, file, response) {\r\n if (response.status === 200) {\r\n // upload succeeded, remove the thumb\r\n self.removeThumb(uploader, file);\r\n }\r\n });\r\n\r\n uploader.bind('UploadComplete', function (uploader, files) {\r\n $progressWrap.innerHTML = '';\r\n\r\n var failedFiles = [];\r\n for (var i = 0; i < uploader.files.length; ++i) {\r\n var file = files[i];\r\n if (file.status !== 5) {\r\n failedFiles.push(file);\r\n }\r\n }\r\n\r\n var message = oy.dictionary.upload.uploadFinished;\r\n var buttons = [{\r\n text: oy.dictionary.upload.ok,\r\n action: function() {\r\n oy.modal.closeModal(document, $plupload.dataset.modalId);\r\n }\r\n }];\r\n\r\n if (failedFiles.length) {\r\n if (failedFiles.length === 1) {\r\n message += oy.dictionary.upload.fileNotReceived + ':';\r\n } else {\r\n message += oy.dictionary.upload.filesNotReceived + ':';\r\n }\r\n message += '