/** * Add image upload dialog for Batchaction buttons. * * The `.productUiVariationuploadimagesUnity()` method adds functionality to open an image upload dialog. * * * ### Examples * Apply .productUiVariationuploadimagesUnity() to Button element. * * JavaScript: * * de_epages('button') * .productUiVariationuploadimagesUnity({ * action: 'myDummyChangeAction', * items: function() { * return []; * } * }); * * HTML: * * <button>Click Me!</button> * * * @class jQuery.ui.productUiVariationuploadimagesUnity * * @uses de_epages * @uses ep * @uses ep.ui.dialog * @uses jquery.ui.widget * @since 7.2.0 */ /** * @cfg {String} action Name of the Changeaction for submitting the image * @cfg {Function} items Function returning an Array of Strings of Object Ids for the target products */ /* * @copyright © Copyright 2006-2010, epages GmbH, All Rights Reserved. * * @module de_epages/product/ui/appointmentpicker */ define('de_epages/product/ui/variationuploadimages-unity', [ 'jquery', 'ep', '$tmpl!de_epages/product/ui/variationuploadimages-unity', '$dict!de_epages/product/ui/variationuploadimages-unity', "jquery/ui/widget", 'ep/ui/dialog' ], function ($, ep, tmplUploadForm, dict) { /* * @dictionary ep.dict * * @translations {Save} * {Cancel} * {UploadImage} * * @dictionary de_epages.product.ui.variationuploadimages * * @translation {UnityUseMasterProductImage} */ // translation object var translations = { Save: dict.translate('Save'), Cancel: dict.translate('Cancel'), UploadImage: dict.translate('UploadImage'), UseMasterProductImage: dict.translate('UnityUseMasterProductImage') }; $.widget('ui.productUiVariationuploadimagesUnity', { templateElements: {}, options: { action: 'myDummyChangeAction', items: function() { return []; } }, _create: function() { var self = this, elem = self.element, o = self.options, templateOptions = [{ tUploadImages: translations.UploadImage, tUseMasterProductImage: translations.UseMasterProductImage }]; // load template and push named tmpl elements to current instance self.dialogContent = tmplUploadForm(templateOptions); $.extend(self.templateElements, self.dialogContent.tmplItem('elements')); // register open dialog action to batch action button elem.on('click', function(evt) { self._openDialog(); }); self._openDialog(); // event handler image uploader self.templateElements.useMasterProductImage.on('change', function(evt) { self._checkSaveButton(); // reset preview image if (!!this.checked) { self._resetPreviewImage(); } }); self.templateElements.fileInput.on('change', function(evt) { self._handleFile(evt); }); /* * * * * * * To use the drag and drop functionality we need to * implement an file upload via ajax and use the * formData object, example see at * http://playground.quaese.de/tutorials/drag_drop_upload_formdata_html5/ * Then the following comment can be removed. * * * * * */ /* self.templateElements.dropzone.on('dragover', function(evt) { self._handleDragOver(evt); }); self.templateElements.dropzone.on('drop', function(evt) { self._handleDrop(evt); }); // register handler for drag and drop and file input // do not allow dropping on body $('body').on('dragover', function (e) { ââââââââââââââââe.stopPropagation(); ââââââââââââââââe.preventDefault(); ââââââââââââââââe.originalEvent.dataTransfer.dropEffect = 'none'; ââââââââââââ}); */ }, _openDialog: function() { var self = this, o = self.options, idString = Array.from(o.items()).map(function(checkbox) { return checkbox.value; }).join(','); self.templateElements.attributeIDs.val(idString); // open if dialog exists, otherwise create new dialog if (self.dialog) { self.dialog.uiDialog('open'); } else { self.dialog = ep(self.dialogContent).uiDialog({ modal: true, autoOpen: true, width: 400, title: translations.UploadImage, form: { action: o.action, method: 'post', enctype: 'multipart/form-data' }, close: function(){ self._resetPreviewImage(); self._resetForm(); }, buttons:{ Ok: { type: 'submit', text: translations.Save, disabled: true }, Cancel: { click: function(){ ep(this).uiDialog('close'); }, text: translations.Cancel } } }); } }, _handleFile: function(evt) { var self = this; if (evt.originalTarget.files.length) { self._fileReader(evt.originalTarget.files[0]); } else { self._resetPreviewImage(); self._checkSaveButton(); } }, _checkSaveButton: function() { var self = this, imageUploaded = self.templateElements.fileInput.prop('files').length, useMasterProductImage = self.templateElements.useMasterProductImage.prop('checked'); self.dialog.uiDialog('option', 'buttons').Ok.prop('disabled', !(imageUploaded || useMasterProductImage)); }, _resetPreviewImage: function() { var self = this; self.templateElements.dropzone.removeClass('ep-variationuploadimage-dropzone-handle'); self.templateElements.dropzone.css('background-image', ''); self.templateElements.dropzoneIcon.show(); self.templateElements.fileInput.val(''); }, _resetForm: function() { var self = this; self.templateElements.attributeIDs.val(''); self.templateElements.useMasterProductImage.prop('checked', false); self.templateElements.fileInput.val(''); }, // FileReader _fileReader: function(file){ var self = this, elem = self.element, o = self.options, reader = new FileReader(); reader.onload = function(evt){ var fileReader = this; // call handler to process file self._readerSuccessHandler(fileReader, file, evt); }; reader.onerror = self._readerErrorHandler; reader.readAsDataURL(file); }, _readerSuccessHandler: function(fileReader, file, evt) { var self = this, img = new Image(); // image source contains content of FileReader img.src = fileReader.result; // load handler for image img.addEventListener('load', function(evt) { // display new image self.templateElements.dropzone.addClass('ep-variationuploadimage-dropzone-handle'); self.templateElements.dropzone.css('background-image', 'url(' + img.src + ')'); self.templateElements.dropzoneIcon.hide(); self.templateElements.useMasterProductImage.prop('checked', false); self._checkSaveButton(); }, false); }, _readerErrorHandler: function() { // error message console.log("readerErrorHandler: ", arguments); }, // DnD _handleDragOver: function(evt) { evt.stopPropagation(); evt.preventDefault(); evt.originalEvent.dataTransfer.dropEffect = 'copy'; }, // Drop-Handler _handleDrop: function(evt) { var self = this; evt.stopPropagation(); evt.preventDefault(); self._fileReader(evt.originalEvent.dataTransfer.files[0]); }, destroy: function () { var self = this; self.dialog.uiDialog('destroy'); self._superApply(arguments); } }); return de_epages; });