|
99 | 99 | var height = val; |
100 | 100 | var heightUnit = 'px'; |
101 | 101 | if (height && _.isString(height)) { |
102 | | - var match = height.match(/^([0-9]*\.[0-9]+|[0-9]+)(px|em|rem|vh|vw)?$/); |
| 102 | + var match = height.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw)?$/); |
103 | 103 | if (!match) { |
104 | 104 | throw new Error('Invalid height'); |
105 | 105 | } |
|
477 | 477 | opts.placeholderText = opts.placeholder_text; |
478 | 478 | obsoleteOpts('placeholder_text', 'placeholderText'); |
479 | 479 | } |
480 | | - if (typeof opts.item_class !== 'undefined') { |
481 | | - opts.itemClass = opts.item_class; |
482 | | - obsoleteOpts('item_class', 'itemClass'); |
483 | | - } |
484 | 480 | if (typeof opts.cell_height !== 'undefined') { |
485 | 481 | opts.cellHeight = opts.cell_height; |
486 | 482 | obsoleteOpts('cell_height', 'cellHeight'); |
|
576 | 572 | var maxHeight = 0; |
577 | 573 | _.each(nodes, function(n) { |
578 | 574 | if (n._id === null) { |
579 | | - n.el.remove(); |
| 575 | + if (n.el) { |
| 576 | + n.el.remove(); |
| 577 | + } |
580 | 578 | } else { |
581 | 579 | n.el |
582 | 580 | .attr('data-gs-x', n.x) |
|
671 | 669 | if (typeof self.opts.removable === 'string') { |
672 | 670 | var trashZone = $(self.opts.removable); |
673 | 671 | if (!trashZone.data('droppable')) { |
674 | | - trashZone.droppable({}); |
| 672 | + trashZone.droppable({ |
| 673 | + accept: '.' + self.opts.itemClass |
| 674 | + }); |
675 | 675 | } |
676 | 676 | trashZone |
677 | 677 | .on('dropover', function(event, ui) { |
|
691 | 691 | self._clearRemovingTimeout(el); |
692 | 692 | }); |
693 | 693 | } |
| 694 | + |
| 695 | + if (self.opts.acceptWidgets) { |
| 696 | + var draggingElement = null; |
| 697 | + |
| 698 | + var onDrag = function(event, ui) { |
| 699 | + var el = draggingElement; |
| 700 | + var node = el.data('_gridstack_node'); |
| 701 | + var pos = self.getCellFromPixel(ui.offset, true); |
| 702 | + var x = Math.max(0, pos.x); |
| 703 | + var y = Math.max(0, pos.y); |
| 704 | + if (!node._added) { |
| 705 | + node._added = true; |
| 706 | + |
| 707 | + node.el = el; |
| 708 | + node.x = x; |
| 709 | + node.y = y; |
| 710 | + self.grid.cleanNodes(); |
| 711 | + self.grid.beginUpdate(node); |
| 712 | + self.grid.addNode(node); |
| 713 | + |
| 714 | + self.container.append(self.placeholder); |
| 715 | + self.placeholder |
| 716 | + .attr('data-gs-x', node.x) |
| 717 | + .attr('data-gs-y', node.y) |
| 718 | + .attr('data-gs-width', node.width) |
| 719 | + .attr('data-gs-height', node.height) |
| 720 | + .show(); |
| 721 | + node.el = self.placeholder; |
| 722 | + node._beforeDragX = node.x; |
| 723 | + node._beforeDragY = node.y; |
| 724 | + |
| 725 | + self._updateContainerHeight(); |
| 726 | + } else { |
| 727 | + if (!self.grid.canMoveNode(node, x, y)) { |
| 728 | + return; |
| 729 | + } |
| 730 | + self.grid.moveNode(node, x, y); |
| 731 | + self._updateContainerHeight(); |
| 732 | + } |
| 733 | + }; |
| 734 | + |
| 735 | + $(self.container).droppable({ |
| 736 | + accept: function(el) { |
| 737 | + el = $(el); |
| 738 | + var node = el.data('_gridstack_node'); |
| 739 | + if (node && node._grid === self) { |
| 740 | + return false; |
| 741 | + } |
| 742 | + return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets); |
| 743 | + }, |
| 744 | + over: function(event, ui) { |
| 745 | + var offset = self.container.offset(); |
| 746 | + var el = $(ui.draggable); |
| 747 | + var cellWidth = self.cellWidth(); |
| 748 | + var cellHeight = self.cellHeight(); |
| 749 | + var origNode = el.data('_gridstack_node'); |
| 750 | + |
| 751 | + var width = origNode ? origNode.width : (Math.ceil(el.outerWidth() / cellWidth)); |
| 752 | + var height = origNode ? origNode.height : (Math.ceil(el.outerHeight() / cellHeight)); |
| 753 | + |
| 754 | + draggingElement = el; |
| 755 | + |
| 756 | + var node = self.grid._prepareNode({width: width, height: height, _added: false, _temporary: true}); |
| 757 | + el.data('_gridstack_node', node); |
| 758 | + el.data('_gridstack_node_orig', origNode); |
| 759 | + |
| 760 | + el.on('drag', onDrag); |
| 761 | + }, |
| 762 | + out: function(event, ui) { |
| 763 | + var el = $(ui.draggable); |
| 764 | + el.unbind('drag', onDrag); |
| 765 | + var node = el.data('_gridstack_node'); |
| 766 | + node.el = null; |
| 767 | + self.grid.removeNode(node); |
| 768 | + self.placeholder.detach(); |
| 769 | + self._updateContainerHeight(); |
| 770 | + el.data('_gridstack_node', el.data('_gridstack_node_orig')); |
| 771 | + }, |
| 772 | + drop: function(event, ui) { |
| 773 | + self.placeholder.detach(); |
| 774 | + |
| 775 | + var node = $(ui.draggable).data('_gridstack_node'); |
| 776 | + node._grid = self; |
| 777 | + var el = $(ui.draggable).clone(false); |
| 778 | + el.data('_gridstack_node', node); |
| 779 | + $(ui.draggable).remove(); |
| 780 | + node.el = el; |
| 781 | + self.placeholder.hide(); |
| 782 | + el |
| 783 | + .attr('data-gs-x', node.x) |
| 784 | + .attr('data-gs-y', node.y) |
| 785 | + .attr('data-gs-width', node.width) |
| 786 | + .attr('data-gs-height', node.height) |
| 787 | + .addClass(self.opts.itemClass) |
| 788 | + .removeAttr('style') |
| 789 | + .enableSelection() |
| 790 | + .removeData('draggable') |
| 791 | + .removeClass('ui-draggable ui-draggable-dragging ui-draggable-disabled') |
| 792 | + .unbind('drag', onDrag); |
| 793 | + self.container.append(el); |
| 794 | + self._prepareElementByNode(el, node); |
| 795 | + self._updateContainerHeight(); |
| 796 | + self._triggerChangeEvent(); |
| 797 | + |
| 798 | + self.grid.endUpdate(); |
| 799 | + } |
| 800 | + }); |
| 801 | + } |
694 | 802 | }; |
695 | 803 |
|
696 | 804 | GridStack.prototype._triggerChangeEvent = function(forceTrigger) { |
|
840 | 948 | }; |
841 | 949 |
|
842 | 950 | GridStack.prototype._clearRemovingTimeout = function(el) { |
843 | | - var self = this; |
844 | 951 | var node = $(el).data('_gridstack_node'); |
845 | 952 |
|
846 | 953 | if (!node._removeTimeout) { |
|
852 | 959 | node._isAboutToRemove = false; |
853 | 960 | }; |
854 | 961 |
|
855 | | - GridStack.prototype._prepareElement = function(el, triggerAddEvent) { |
856 | | - triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false; |
| 962 | + GridStack.prototype._prepareElementByNode = function(el, node) { |
857 | 963 | var self = this; |
858 | | - el = $(el); |
859 | | - |
860 | | - el.addClass(this.opts.itemClass); |
861 | | - var node = self.grid.addNode({ |
862 | | - x: el.attr('data-gs-x'), |
863 | | - y: el.attr('data-gs-y'), |
864 | | - width: el.attr('data-gs-width'), |
865 | | - height: el.attr('data-gs-height'), |
866 | | - maxWidth: el.attr('data-gs-max-width'), |
867 | | - minWidth: el.attr('data-gs-min-width'), |
868 | | - maxHeight: el.attr('data-gs-max-height'), |
869 | | - minHeight: el.attr('data-gs-min-height'), |
870 | | - autoPosition: Utils.toBool(el.attr('data-gs-auto-position')), |
871 | | - noResize: Utils.toBool(el.attr('data-gs-no-resize')), |
872 | | - noMove: Utils.toBool(el.attr('data-gs-no-move')), |
873 | | - locked: Utils.toBool(el.attr('data-gs-locked')), |
874 | | - el: el, |
875 | | - id: el.attr('data-gs-id'), |
876 | | - _grid: self |
877 | | - }, triggerAddEvent); |
878 | | - el.data('_gridstack_node', node); |
879 | 964 |
|
880 | 965 | var cellWidth; |
881 | 966 | var cellHeight; |
|
962 | 1047 | }; |
963 | 1048 |
|
964 | 1049 | var onEndMoving = function(event, ui) { |
| 1050 | + var o = $(this); |
| 1051 | + if (!o.data('_gridstack_node')) { |
| 1052 | + return; |
| 1053 | + } |
| 1054 | + |
965 | 1055 | var forceNotify = false; |
966 | 1056 | self.placeholder.detach(); |
967 | | - var o = $(this); |
968 | 1057 | node.el = o; |
969 | 1058 | self.placeholder.hide(); |
970 | 1059 |
|
|
1031 | 1120 | el.attr('data-gs-locked', node.locked ? 'yes' : null); |
1032 | 1121 | }; |
1033 | 1122 |
|
| 1123 | + GridStack.prototype._prepareElement = function(el, triggerAddEvent) { |
| 1124 | + triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false; |
| 1125 | + var self = this; |
| 1126 | + el = $(el); |
| 1127 | + |
| 1128 | + el.addClass(this.opts.itemClass); |
| 1129 | + var node = self.grid.addNode({ |
| 1130 | + x: el.attr('data-gs-x'), |
| 1131 | + y: el.attr('data-gs-y'), |
| 1132 | + width: el.attr('data-gs-width'), |
| 1133 | + height: el.attr('data-gs-height'), |
| 1134 | + maxWidth: el.attr('data-gs-max-width'), |
| 1135 | + minWidth: el.attr('data-gs-min-width'), |
| 1136 | + maxHeight: el.attr('data-gs-max-height'), |
| 1137 | + minHeight: el.attr('data-gs-min-height'), |
| 1138 | + autoPosition: Utils.toBool(el.attr('data-gs-auto-position')), |
| 1139 | + noResize: Utils.toBool(el.attr('data-gs-no-resize')), |
| 1140 | + noMove: Utils.toBool(el.attr('data-gs-no-move')), |
| 1141 | + locked: Utils.toBool(el.attr('data-gs-locked')), |
| 1142 | + el: el, |
| 1143 | + id: el.attr('data-gs-id'), |
| 1144 | + _grid: self |
| 1145 | + }, triggerAddEvent); |
| 1146 | + el.data('_gridstack_node', node); |
| 1147 | + |
| 1148 | + this._prepareElementByNode(el, node); |
| 1149 | + }; |
| 1150 | + |
1034 | 1151 | GridStack.prototype.setAnimation = function(enable) { |
1035 | 1152 | if (enable) { |
1036 | 1153 | this.container.addClass('grid-stack-animate'); |
|
1417 | 1534 | this.grid.commit(); |
1418 | 1535 | }; |
1419 | 1536 |
|
1420 | | - GridStack.prototype.setGridWidth = function(gridWidth) { |
| 1537 | + GridStack.prototype.setGridWidth = function(gridWidth,doNotPropagate) { |
1421 | 1538 | this.container.removeClass('grid-stack-' + this.opts.width); |
1422 | | - this._updateNodeWidths(this.opts.width, gridWidth); |
| 1539 | + if (doNotPropagate !== true) { |
| 1540 | + this._updateNodeWidths(this.opts.width, gridWidth); |
| 1541 | + } |
1423 | 1542 | this.opts.width = gridWidth; |
| 1543 | + this.grid.width = gridWidth; |
1424 | 1544 | this.container.addClass('grid-stack-' + gridWidth); |
1425 | 1545 | }; |
1426 | 1546 |
|
|
0 commit comments