diff --git a/muk_web_utils/__manifest__.py b/muk_web_utils/__manifest__.py index b632d82..3d1d1d2 100644 --- a/muk_web_utils/__manifest__.py +++ b/muk_web_utils/__manifest__.py @@ -20,7 +20,7 @@ { "name": "MuK Web Utils", "summary": """Utility Features""", - "version": "12.0.2.8.4", + "version": "12.0.2.8.5", "category": "Extra Tools", "license": "AGPL-3", "author": "MuK IT", diff --git a/muk_web_utils/static/src/js/core/dropzone.js b/muk_web_utils/static/src/js/core/dropzone.js index 7643743..127623e 100644 --- a/muk_web_utils/static/src/js/core/dropzone.js +++ b/muk_web_utils/static/src/js/core/dropzone.js @@ -27,28 +27,39 @@ var QWeb = core.qweb; var DropzoneMixin = { dropzoneData: {}, - dropzoneClasses: 'mk_dropzone', - dropzoneEvents: { - 'dragenter .mk_dropzone': '_dragenterDropzone', - 'dragover .mk_dropzone': '_dragoverDropzone', - 'dragleave .mk_dropzone': '_dragleaveDropzone', - 'drop .mk_dropzone': '_dropDropzone', - }, + dropzoneClasses: ['mk_dropzone'], _checkDropzoneEvent: function(event) { return true; }, - _renderDropzone: function($dropzone) { + _startDropzone: function($dropzone) { + if(this.$dropzone) { + this._destroyDropzone(); + } this.$dropzone = $dropzone; this.$dropzone.dndHover().on({ - 'dndHoverStart': this._hoverDropzoneEnter.bind(this), - 'dndHoverEnd': this._hoverDropzoneLeave.bind(this), + 'dndHoverStart.dropzone': this._hoverDropzoneEnter.bind(this), + 'dndHoverEnd.dropzone': this._hoverDropzoneLeave.bind(this), }); + this.$dropzone.on('dragenter.dropzone', this._dragenterDropzone.bind(this)); + this.$dropzone.on('dragover.dropzone', this._dragoverDropzone.bind(this)); + this.$dropzone.on('dragleave.dropzone', this._dragleaveDropzone.bind(this)); + this.$dropzone.on('drop.dropzone', this._dropDropzone.bind(this)); _.each(this.dropzoneData, function(value, key) { this.$dropzone.attr(key, value) }, this); }, + _destroyDropzone: function() { + if(this.$dropzone) { + this.$dropzone.off('.dropzone'); + this.$dropzone.dndHover('destroy'); + _.each(this.dropzoneData, function(value, key) { + this.$dropzone.removeAttr(key) + }, this); + this.$dropzone = false; + } + }, _toggleDropzone: function(state) { - this.$dropzone.toggleClass(this.dropzoneClasses, state); + this.$dropzone.toggleClass(this.dropzoneClasses.join(" "), state); }, _hoverDropzoneEnter: function(event, originalEvent) { if(this._checkDropzoneEvent(originalEvent)) { @@ -96,7 +107,7 @@ var FileDropzoneMixin = _.extend({}, DropzoneMixin, { dropzoneData: { 'data-dropzone-text': _t("Drop files here to upload!"), }, - dropzoneClasses: DropzoneMixin.dropzoneClasses + ' mk_dropzone_file', + dropzoneClasses: DropzoneMixin.dropzoneClasses.concat(['mk_dropzone_file']), dropzoneCheck: window.File && window.FileReader && window.FileList && window.Blob, _checkDropzoneEvent: function(event) { var dataTransfer = event.originalEvent && event.originalEvent.dataTransfer; diff --git a/muk_web_utils/static/src/js/libs/jquery.js b/muk_web_utils/static/src/js/libs/jquery.js index 68a4a22..bb78c42 100644 --- a/muk_web_utils/static/src/js/libs/jquery.js +++ b/muk_web_utils/static/src/js/libs/jquery.js @@ -24,28 +24,37 @@ $.fn.textWidth = function(text, font) { }; $.fn.dndHover = function(options) { - return this.each(function() { + return this.each(function() { var self = $(this); var collection = $(); - self.on('dragenter', function(event) { + var dragenter = function(event) { if (collection.size() === 0) { self.trigger('dndHoverStart', [event]); } collection = collection.add(event.target); - }); - self.on('dragleave', function(event) { + }; + var dragleave = function(event) { setTimeout(function() { collection = collection.not(event.target); if (collection.size() === 0) { self.trigger('dndHoverEnd', [event]); } }, 1); - }); - self.on('drop', function(event) { + }; + var drop = function(event) { setTimeout(function() { collection = $(); self.trigger('dndHoverEnd', [event]); }, 1); - }); + }; + if(options && options === 'destroy') { + self.off('dragenter.dnd_hover'); + self.off('dragleave.dnd_hover'); + self.off('drop.dnd_hover'); + } else { + self.on('dragenter.dnd_hover', dragenter); + self.on('dragleave.dnd_hover', dragleave); + self.on('drop.dnd_hover', drop); + } }); }; diff --git a/muk_web_utils/static/src/scss/dropzone.scss b/muk_web_utils/static/src/scss/dropzone.scss index 83dc51b..a4284c1 100644 --- a/muk_web_utils/static/src/scss/dropzone.scss +++ b/muk_web_utils/static/src/scss/dropzone.scss @@ -27,10 +27,10 @@ align-items: center; justify-content: center; width: #{"calc(100% - 20px)"}; - height: #{"calc(100% - 10px)"}; + height: #{"calc(100% - 20px)"}; border: 2px dashed gray('700'); @include gradient-y($white, gray('100')); - @include o-position-absolute(0, 0, 0, 10px); + @include o-position-absolute(10px, 0, 0, 10px); } &:after { display:flex;