Current Path : /var/www/www-root/data/www/monolith-realty.ru/bitrix/js/main/kanban/ |
Current File : /var/www/www-root/data/www/monolith-realty.ru/bitrix/js/main/kanban/dropzone.js |
;(function() { "use strict"; BX.namespace("BX.Kanban"); /** * * @param {object} options * @param {string|number} options.id * @param {string} [options.name] * @param {string} [options.color] * @param {object} [options.data] * @constructor */ BX.Kanban.DropZone = function(options) { options = options || {}; if (!BX.Kanban.Utils.isValidId(options.id)) { throw new Error("BX.Kanban.DropZone: 'id' parameter is not valid.") } this.id = options.id; this.name = null; this.color = null; this.data = Object.create(null); /** @var {BX.Kanban.DropZoneArea} **/ this.dropZoneArea = null; this.setOptions(options); this.layout = { container: null, name: null, bg: null, cancel: null }; /** @var {BX.Kanban.Item} **/ this.droppedItem = null; this.captureTimeout = null; }; BX.Kanban.DropZone.DEFAULT_COLOR = "1eae43"; BX.Kanban.DropZone.prototype = { /** * * @returns {number|string} */ getId: function() { return this.id; }, /** * * @param {object} options * @param {string} [options.name] * @param {string} [options.color] * @param {object} [options.data] */ setOptions: function(options) { if (!options) { return; } this.setName(options.name); this.setColor(options.color); this.setData(options.data); }, /** * * @param {string} name */ setName: function(name) { if (BX.type.isNotEmptyString(name)) { this.name = name; } }, /** * * @returns {string|null} */ getName: function() { return this.name; }, /** * * @param {string} color */ setColor: function(color) { if (BX.Kanban.Utils.isValidColor(color)) { this.color = color.toLowerCase(); } }, /** * * @returns {string} */ getColor: function() { return this.color !== null ? this.color : BX.Kanban.DropZone.DEFAULT_COLOR; }, /** * * @returns {object} */ getData: function() { return this.data; }, /** * * @param {object} data */ setData: function(data) { if (BX.type.isPlainObject(data)) { this.data = data; } }, /** * * @returns {object} */ getGridData: function() { return this.getGrid().getData(); }, /** * * @param {BX.Kanban.DropZoneArea} dropZoneArea */ setDropZoneArea: function(dropZoneArea) { this.dropZoneArea = dropZoneArea; }, /** * * @returns {BX.Kanban.DropZoneArea} */ getDropZoneArea: function() { return this.dropZoneArea; }, /** * @returns {BX.Kanban.Grid} */ getGrid: function() { return this.getDropZoneArea().getGrid(); }, makeDroppable: function() { var container = this.getContainer(); container.onbxdestdraghover = BX.delegate(this.onDragEnter, this); container.onbxdestdraghout = BX.delegate(this.onDragLeave, this); container.onbxdestdragfinish = BX.delegate(this.onDragDrop, this); jsDD.registerDest(container, 10); }, setActive: function() { this.getContainer().classList.add("main-kanban-dropzone-active"); }, unsetActive: function() { this.getContainer().classList.remove("main-kanban-dropzone-active"); }, setCaptured: function() { this.getContainer().classList.add("main-kanban-dropzone-captured"); }, unsetCaptured: function() { this.getContainer().classList.remove("main-kanban-dropzone-captured"); }, /** * * @param {Element} itemNode * @param {number} x * @param {number} y */ onDragEnter: function(itemNode, x, y) { this.setActive(); this.getDropZoneArea().setActive(); }, /** * * @param {Element} itemNode * @param {number} x * @param {number} y */ onDragLeave: function(itemNode, x, y) { this.unsetActive(); this.getDropZoneArea().unsetActive(); }, /** * * @param {Element} itemNode * @param {number} x * @param {number} y */ onDragDrop: function(itemNode, x, y) { var draggableItem = this.getGrid().getItemByElement(itemNode); this.captureItem(draggableItem); this.getDropZoneArea().unsetActive(); }, /** * * @param {BX.Kanban.Item} item */ captureItem: function(item) { var event = new BX.Kanban.DropZoneEvent(); event.setItem(item); event.setDropZone(this); BX.onCustomEvent(this.getGrid(), "Kanban.DropZone:onBeforeItemCaptured", [event]); if (!event.isActionAllowed()) { return; } this.empty(); this.droppedItem = item; this.getDropZoneArea().show(); this.setCaptured(); this.unsetActive(); this.animateRemove(item.layout.container); this.getGrid().hideItem(item); BX.onCustomEvent(this.getGrid(), "Kanban.DropZone:onItemCaptured", [item, this]); this.captureTimeout = setTimeout( function() { this.empty(); this.getDropZoneArea().hide(); }.bind(this), this.getDropZoneArea().getDropZoneTimeout() ); }, animateRemove: function(itemNode) { // itemNode.style.width = itemNode.offsetWidth + "px"; // itemNode.style.top = "-" + (itemNode.offsetHeight / 2 + 20) + "px"; // itemNode.style.left = "-" + itemNode.offsetWidth / 2 + "px"; this.dropZoneArea.layout.container.parentNode.style.overflow = "hidden"; // this.layout.container.appendChild(itemNode); setTimeout(function() { this.dropZoneArea.layout.container.parentNode.style.overflow = "inherit"; }.bind(this), 250); // BX.bind(itemNode, "animationend",function() // { // itemNode.removeAttribute("style"); // itemNode.parentNode.removeChild(itemNode); // BX.unbindAll(itemNode); // }.bind(this)); }, restore: function() { if (this.captureTimeout) { clearTimeout(this.captureTimeout); } if (this.droppedItem === null) { return; } var event = new BX.Kanban.DropZoneEvent(); event.setItem(this.droppedItem); event.setDropZone(this); BX.onCustomEvent(this.getGrid(), "Kanban.DropZone:onBeforeItemRestored", [event]); if (!event.isActionAllowed()) { return; } this.unsetActive(); this.unsetCaptured(); this.getGrid().unhideItem(this.droppedItem); BX.onCustomEvent(this.getGrid(), "Kanban.DropZone:onItemRestored", [this.droppedItem, this]); this.droppedItem = null; }, empty: function() { if (this.captureTimeout) { clearTimeout(this.captureTimeout); } if (this.droppedItem === null) { return; } this.unsetActive(); this.unsetCaptured(); this.getGrid().removeItem(this.droppedItem); BX.onCustomEvent(this.getGrid(), "Kanban.DropZone:onItemEmptied", [this.droppedItem, this]); this.droppedItem = null; }, /** * * @returns {Element} */ getContainer: function() { if (this.layout.container !== null) { return this.layout.container } this.layout.container = BX.create("div", { attrs: { className: "main-kanban-dropzone", "data-id": this.getId() }, children: [ this.getNameContainer(), this.getCancelLink(), this.getBgContainer() ] }); this.makeDroppable(); return this.layout.container; }, /** * * @returns {Element} */ getNameContainer: function() { if (!this.layout.name) { var isDark = BX.Kanban.Utils.isDarkColor(this.getColor()); this.layout.name = BX.create("div", { attrs: { className: isDark ? "main-kanban-dropzone-title" : "main-kanban-dropzone-title main-kanban-dropzone-title-light" } }) } return this.layout.name; }, /** * * @returns {Element} */ getCancelLink: function() { if (!this.layout.cancel) { this.layout.cancel = BX.create("div", { attrs: { className: "main-kanban-dropzone-cancel" }, children: [ BX.create("span", { attrs: { className: "main-kanban-dropzone-cancel-link" }, events: { click: this.handleCancelClick.bind(this) }, html: this.getGrid().getMessage("DROPZONE_CANCEL") }) ] }); } return this.layout.cancel; }, handleCancelClick: function(event) { this.restore(); this.getDropZoneArea().hide(); }, /** * * @returns {Element} */ getBgContainer: function() { if (!this.layout.bg) { this.layout.bg = BX.create("div", { attrs: { className: "main-kanban-dropzone-bg" } }) } return this.layout.bg; }, /** * * @returns {Element} */ render: function() { this.getNameContainer().textContent = this.getName(); this.getBgContainer().style.backgroundColor = "#" + this.getColor(); return this.getContainer(); } }; BX.Kanban.DropZoneEvent = function(options) { options = BX.type.isPlainObject(options) || {}; this.action = BX.type.isBoolean(options.action) ? options.action : true; this.item = null; this.dropZone = null; }; BX.Kanban.DropZoneEvent.prototype = { allowAction: function() { this.action = true; }, denyAction: function() { this.action = false; }, isActionAllowed: function() { return this.action; }, /** * * @param {BX.Kanban.Item} item */ setItem: function(item) { this.item = item; }, /** * * @returns {BX.Kanban.Item} */ getItem: function() { return this.item; }, /** * * @param {BX.Kanban.DropZone} dropZone */ setDropZone: function(dropZone) { this.dropZone = dropZone; }, /** * * @returns {BX.Kanban.DropZone} */ getDropZone: function() { return this.dropZone; } } })();