|
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 | } |
|
576 | 576 | var maxHeight = 0; |
577 | 577 | _.each(nodes, function(n) { |
578 | 578 | if (n._id === null) { |
579 | | - n.el.remove(); |
| 579 | + if (n.el) { |
| 580 | + n.el.remove(); |
| 581 | + } |
580 | 582 | } else { |
581 | 583 | n.el |
582 | 584 | .attr('data-gs-x', n.x) |
|
671 | 673 | if (typeof self.opts.removable === 'string') { |
672 | 674 | var trashZone = $(self.opts.removable); |
673 | 675 | if (!trashZone.data('droppable')) { |
674 | | - trashZone.droppable({}); |
| 676 | + trashZone.droppable({ |
| 677 | + accept: '.' + self.opts.itemClass |
| 678 | + }); |
675 | 679 | } |
676 | 680 | trashZone |
677 | 681 | .on('dropover', function(event, ui) { |
|
691 | 695 | self._clearRemovingTimeout(el); |
692 | 696 | }); |
693 | 697 | } |
| 698 | + |
| 699 | + if (self.opts.acceptWidgets) { |
| 700 | + var draggingElement = null; |
| 701 | + |
| 702 | + var onDrag = function(event, ui) { |
| 703 | + var el = draggingElement; |
| 704 | + var node = el.data('_gridstack_node'); |
| 705 | + var pos = self.getCellFromPixel(ui.offset, true); |
| 706 | + var x = Math.max(0, pos.x); |
| 707 | + var y = Math.max(0, pos.y); |
| 708 | + if (!node._added) { |
| 709 | + node._added = true; |
| 710 | + |
| 711 | + node.el = el; |
| 712 | + node.x = x; |
| 713 | + node.y = y; |
| 714 | + self.grid.cleanNodes(); |
| 715 | + self.grid.beginUpdate(node); |
| 716 | + self.grid.addNode(node); |
| 717 | + |
| 718 | + self.container.append(self.placeholder); |
| 719 | + self.placeholder |
| 720 | + .attr('data-gs-x', node.x) |
| 721 | + .attr('data-gs-y', node.y) |
| 722 | + .attr('data-gs-width', node.width) |
| 723 | + .attr('data-gs-height', node.height) |
| 724 | + .show(); |
| 725 | + node.el = self.placeholder; |
| 726 | + node._beforeDragX = node.x; |
| 727 | + node._beforeDragY = node.y; |
| 728 | + |
| 729 | + self._updateContainerHeight(); |
| 730 | + } else { |
| 731 | + if (!self.grid.canMoveNode(node, x, y)) { |
| 732 | + return; |
| 733 | + } |
| 734 | + self.grid.moveNode(node, x, y); |
| 735 | + self._updateContainerHeight(); |
| 736 | + } |
| 737 | + }; |
| 738 | + |
| 739 | + $(self.container).droppable({ |
| 740 | + accept: function(el) { |
| 741 | + el = $(el); |
| 742 | + var node = el.data('_gridstack_node'); |
| 743 | + if (node && node._grid === self) { |
| 744 | + return false; |
| 745 | + } |
| 746 | + return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets); |
| 747 | + }, |
| 748 | + over: function(event, ui) { |
| 749 | + var offset = self.container.offset(); |
| 750 | + var el = $(ui.draggable); |
| 751 | + var cellWidth = self.cellWidth(); |
| 752 | + var cellHeight = self.cellHeight(); |
| 753 | + var origNode = el.data('_gridstack_node'); |
| 754 | + |
| 755 | + var width = origNode ? origNode.width : (Math.ceil(el.outerWidth() / cellWidth)); |
| 756 | + var height = origNode ? origNode.height : (Math.ceil(el.outerHeight() / cellHeight)); |
| 757 | + |
| 758 | + draggingElement = el; |
| 759 | + |
| 760 | + var node = self.grid._prepareNode({width: width, height: height, _added: false, _temporary: true}); |
| 761 | + el.data('_gridstack_node', node); |
| 762 | + el.data('_gridstack_node_orig', origNode); |
| 763 | + |
| 764 | + el.on('drag', onDrag); |
| 765 | + }, |
| 766 | + out: function(event, ui) { |
| 767 | + var el = $(ui.draggable); |
| 768 | + el.unbind('drag', onDrag); |
| 769 | + var node = el.data('_gridstack_node'); |
| 770 | + node.el = null; |
| 771 | + self.grid.removeNode(node); |
| 772 | + self.placeholder.detach(); |
| 773 | + self._updateContainerHeight(); |
| 774 | + el.data('_gridstack_node', el.data('_gridstack_node_orig')); |
| 775 | + }, |
| 776 | + drop: function(event, ui) { |
| 777 | + self.placeholder.detach(); |
| 778 | + |
| 779 | + var node = $(ui.draggable).data('_gridstack_node'); |
| 780 | + node._grid = self; |
| 781 | + var el = $(ui.draggable).clone(false); |
| 782 | + el.data('_gridstack_node', node); |
| 783 | + $(ui.draggable).remove(); |
| 784 | + node.el = el; |
| 785 | + self.placeholder.hide(); |
| 786 | + el |
| 787 | + .attr('data-gs-x', node.x) |
| 788 | + .attr('data-gs-y', node.y) |
| 789 | + .attr('data-gs-width', node.width) |
| 790 | + .attr('data-gs-height', node.height) |
| 791 | + .addClass(self.opts.itemClass) |
| 792 | + .removeAttr('style') |
| 793 | + .enableSelection() |
| 794 | + .removeData('draggable') |
| 795 | + .removeClass('ui-draggable ui-draggable-dragging ui-draggable-disabled') |
| 796 | + .unbind('drag', onDrag); |
| 797 | + self.container.append(el); |
| 798 | + self._prepareElementByNode(el, node); |
| 799 | + self._updateContainerHeight(); |
| 800 | + self._triggerChangeEvent(); |
| 801 | + |
| 802 | + self.grid.endUpdate(); |
| 803 | + } |
| 804 | + }); |
| 805 | + } |
694 | 806 | }; |
695 | 807 |
|
696 | 808 | GridStack.prototype._triggerChangeEvent = function(forceTrigger) { |
|
840 | 952 | }; |
841 | 953 |
|
842 | 954 | GridStack.prototype._clearRemovingTimeout = function(el) { |
843 | | - var self = this; |
844 | 955 | var node = $(el).data('_gridstack_node'); |
845 | 956 |
|
846 | 957 | if (!node._removeTimeout) { |
|
852 | 963 | node._isAboutToRemove = false; |
853 | 964 | }; |
854 | 965 |
|
855 | | - GridStack.prototype._prepareElement = function(el, triggerAddEvent) { |
856 | | - triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false; |
| 966 | + GridStack.prototype._prepareElementByNode = function(el, node) { |
857 | 967 | 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 | 968 |
|
880 | 969 | var cellWidth; |
881 | 970 | var cellHeight; |
|
962 | 1051 | }; |
963 | 1052 |
|
964 | 1053 | var onEndMoving = function(event, ui) { |
| 1054 | + var o = $(this); |
| 1055 | + if (!o.data('_gridstack_node')) { |
| 1056 | + return; |
| 1057 | + } |
| 1058 | + |
965 | 1059 | var forceNotify = false; |
966 | 1060 | self.placeholder.detach(); |
967 | | - var o = $(this); |
968 | 1061 | node.el = o; |
969 | 1062 | self.placeholder.hide(); |
970 | 1063 |
|
|
1031 | 1124 | el.attr('data-gs-locked', node.locked ? 'yes' : null); |
1032 | 1125 | }; |
1033 | 1126 |
|
| 1127 | + GridStack.prototype._prepareElement = function(el, triggerAddEvent) { |
| 1128 | + triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false; |
| 1129 | + var self = this; |
| 1130 | + el = $(el); |
| 1131 | + |
| 1132 | + el.addClass(this.opts.itemClass); |
| 1133 | + var node = self.grid.addNode({ |
| 1134 | + x: el.attr('data-gs-x'), |
| 1135 | + y: el.attr('data-gs-y'), |
| 1136 | + width: el.attr('data-gs-width'), |
| 1137 | + height: el.attr('data-gs-height'), |
| 1138 | + maxWidth: el.attr('data-gs-max-width'), |
| 1139 | + minWidth: el.attr('data-gs-min-width'), |
| 1140 | + maxHeight: el.attr('data-gs-max-height'), |
| 1141 | + minHeight: el.attr('data-gs-min-height'), |
| 1142 | + autoPosition: Utils.toBool(el.attr('data-gs-auto-position')), |
| 1143 | + noResize: Utils.toBool(el.attr('data-gs-no-resize')), |
| 1144 | + noMove: Utils.toBool(el.attr('data-gs-no-move')), |
| 1145 | + locked: Utils.toBool(el.attr('data-gs-locked')), |
| 1146 | + el: el, |
| 1147 | + id: el.attr('data-gs-id'), |
| 1148 | + _grid: self |
| 1149 | + }, triggerAddEvent); |
| 1150 | + el.data('_gridstack_node', node); |
| 1151 | + |
| 1152 | + this._prepareElementByNode(el, node); |
| 1153 | + }; |
| 1154 | + |
1034 | 1155 | GridStack.prototype.setAnimation = function(enable) { |
1035 | 1156 | if (enable) { |
1036 | 1157 | this.container.addClass('grid-stack-animate'); |
|
1360 | 1481 |
|
1361 | 1482 | GridStack.prototype.cellWidth = function() { |
1362 | 1483 | var o = this.container.children('.' + this.opts.itemClass).first(); |
1363 | | - return Math.ceil(o.outerWidth() / o.attr('data-gs-width')); |
| 1484 | + return Math.ceil(o.outerWidth() / parseInt(o.attr('data-gs-width'), 10)); |
1364 | 1485 | }; |
1365 | 1486 |
|
1366 | 1487 | GridStack.prototype.getCellFromPixel = function(position, useOffset) { |
|
1417 | 1538 | this.grid.commit(); |
1418 | 1539 | }; |
1419 | 1540 |
|
1420 | | - GridStack.prototype.setGridWidth = function(gridWidth) { |
| 1541 | + GridStack.prototype.setGridWidth = function(gridWidth,doNotPropagate) { |
1421 | 1542 | this.container.removeClass('grid-stack-' + this.opts.width); |
1422 | | - this._updateNodeWidths(this.opts.width, gridWidth); |
| 1543 | + if (doNotPropagate !== true) { |
| 1544 | + this._updateNodeWidths(this.opts.width, gridWidth); |
| 1545 | + } |
1423 | 1546 | this.opts.width = gridWidth; |
| 1547 | + this.grid.width = gridWidth; |
1424 | 1548 | this.container.addClass('grid-stack-' + gridWidth); |
1425 | 1549 | }; |
1426 | 1550 |
|
|
1466 | 1590 | GridStack.prototype._update_container_height = obsolete(GridStack.prototype._updateContainerHeight, |
1467 | 1591 | '_update_container_height', '_updateContainerHeight'); |
1468 | 1592 | GridStack.prototype._is_one_column_mode = obsolete(GridStack.prototype._isOneColumnMode, |
1469 | | - '_is_one_column_mode',' _isOneColumnMode'); |
| 1593 | + '_is_one_column_mode','_isOneColumnMode'); |
1470 | 1594 | GridStack.prototype._prepare_element = obsolete(GridStack.prototype._prepareElement, |
1471 | 1595 | '_prepare_element', '_prepareElement'); |
1472 | 1596 | GridStack.prototype.set_animation = obsolete(GridStack.prototype.setAnimation, |
|
0 commit comments