|
1 |
| -/*! gridster.js - v0.1.0 - 2012-09-12 |
| 1 | +/*! gridster.js - v0.1.0 - 2012-10-03 |
2 | 2 | * http://gridster.net/
|
3 | 3 | * Copyright (c) 2012 ducksboard; Licensed MIT */
|
4 | 4 |
|
|
420 | 420 | fn.init = function() {
|
421 | 421 | this.calculate_positions();
|
422 | 422 | this.$container.css('position', 'relative');
|
423 |
| - this.enable(); |
| 423 | + this.disabled = false; |
| 424 | + this.events(); |
424 | 425 |
|
425 | 426 | $(window).bind('resize',
|
426 | 427 | throttle($.proxy(this.calculate_positions, this), 200));
|
427 | 428 | };
|
428 | 429 |
|
| 430 | + fn.events = function() { |
| 431 | + this.$container.on('selectstart', this.on_select_start); |
| 432 | + |
| 433 | + this.$container.on(pointer_events.start, this.options.items, $.proxy( |
| 434 | + this.drag_handler, this)); |
| 435 | + |
| 436 | + this.$body.on(pointer_events.end, $.proxy(function(e) { |
| 437 | + this.is_dragging = false; |
| 438 | + if (this.disabled) { return; } |
| 439 | + this.$body.off(pointer_events.move); |
| 440 | + if (this.drag_start) { |
| 441 | + this.on_dragstop(e); |
| 442 | + } |
| 443 | + }, this)); |
| 444 | + }; |
429 | 445 |
|
430 | 446 | fn.get_actual_pos = function($el) {
|
431 | 447 | var pos = $el.position();
|
|
437 | 453 | if (isTouch) {
|
438 | 454 | var oe = e.originalEvent;
|
439 | 455 | e = oe.touches.length ? oe.touches[0] : oe.changedTouches[0];
|
440 |
| - }; |
| 456 | + } |
441 | 457 |
|
442 | 458 | return {
|
443 | 459 | left: e.clientX,
|
|
496 | 512 | $window.scrollTop(nextScrollTop);
|
497 | 513 | this.scrollOffset = this.scrollOffset + 30;
|
498 | 514 | }
|
499 |
| - }; |
| 515 | + } |
500 | 516 |
|
501 | 517 | if (abs_mouse_top <= mouse_up_zone) {
|
502 | 518 | nextScrollTop = scrollTop - 30;
|
503 | 519 | if (nextScrollTop > 0) {
|
504 | 520 | $window.scrollTop(nextScrollTop);
|
505 | 521 | this.scrollOffset = this.scrollOffset - 30;
|
506 | 522 | }
|
507 |
| - }; |
508 |
| - } |
| 523 | + } |
| 524 | + }; |
509 | 525 |
|
510 | 526 |
|
511 | 527 | fn.calculate_positions = function(e) {
|
512 | 528 | this.window_height = $window.height();
|
513 |
| - } |
| 529 | + }; |
514 | 530 |
|
515 | 531 |
|
516 | 532 | fn.drag_handler = function(e) {
|
517 | 533 | var node = e.target.nodeName;
|
518 |
| - |
519 |
| - if (e.which !== 1 && !isTouch) { |
| 534 | + if (this.disabled || e.which !== 1 && !isTouch) { |
520 | 535 | return;
|
521 | 536 | }
|
522 | 537 |
|
523 | 538 | if (node === 'INPUT' || node === 'TEXTAREA' || node === 'SELECT' ||
|
524 | 539 | node === 'BUTTON') {
|
525 | 540 | return;
|
526 |
| - }; |
| 541 | + } |
527 | 542 |
|
528 | 543 | var self = this;
|
529 | 544 | var first = true;
|
|
551 | 566 | return false;
|
552 | 567 | }
|
553 | 568 |
|
554 |
| - if (self.is_dragging == true) { |
| 569 | + if (self.is_dragging === true) { |
555 | 570 | self.on_dragmove.call(self, mme);
|
556 | 571 | }
|
557 | 572 |
|
|
642 | 657 | };
|
643 | 658 |
|
644 | 659 | fn.on_select_start = function(e) {
|
| 660 | + if (this.disabled) { return; } |
645 | 661 | return false;
|
646 |
| - } |
647 |
| - |
648 |
| - |
649 |
| - fn.enable = function(){ |
650 |
| - this.$container.on('selectstart', this.on_select_start); |
651 |
| - |
652 |
| - this.$container.on(pointer_events.start, this.options.items, $.proxy( |
653 |
| - this.drag_handler, this)); |
654 |
| - |
655 |
| - this.$body.on(pointer_events.end, $.proxy(function(e) { |
656 |
| - this.is_dragging = false; |
657 |
| - this.$body.off(pointer_events.move); |
658 |
| - if (this.drag_start) { |
659 |
| - this.on_dragstop(e); |
660 |
| - } |
661 |
| - }, this)); |
662 | 662 | };
|
663 | 663 |
|
| 664 | + fn.enable = function() { |
| 665 | + this.disabled = false; |
| 666 | + }; |
664 | 667 |
|
665 |
| - fn.disable = function(){ |
666 |
| - this.$container.off(pointer_events.start); |
667 |
| - this.$body.off(pointer_events.end); |
668 |
| - this.$container.off('selectstart', this.on_select_start); |
| 668 | + fn.disable = function() { |
| 669 | + this.disabled = true; |
669 | 670 | };
|
670 | 671 |
|
671 | 672 |
|
|
674 | 675 | $.removeData(this.$container, 'drag');
|
675 | 676 | };
|
676 | 677 |
|
677 |
| - |
678 | 678 | //jQuery adapter
|
679 | 679 | $.fn.drag = function ( options ) {
|
680 | 680 | return this.each(function () {
|
|
859 | 859 | this.register_widget($w);
|
860 | 860 |
|
861 | 861 | this.add_faux_rows(pos.size_y);
|
| 862 | + this.add_faux_cols(pos.size_x); |
862 | 863 |
|
863 | 864 | this.set_dom_grid_height();
|
864 | 865 |
|
|
884 | 885 |
|
885 | 886 | if (size_x > this.cols) {
|
886 | 887 | size_x = this.cols;
|
887 |
| - }; |
| 888 | + } |
888 | 889 |
|
889 | 890 | var old_cells_occupied = this.get_cells_occupied(wgd);
|
890 | 891 | var old_size_x = wgd.size_x;
|
|
898 | 899 | var diff = old_col + (size_x - 1) - this.cols;
|
899 | 900 | var c = old_col - diff;
|
900 | 901 | new_col = Math.max(1, c);
|
901 |
| - }; |
| 902 | + } |
902 | 903 |
|
903 | 904 | var new_grid_data = {
|
904 | 905 | col: new_col,
|
|
913 | 914 | $.each(old_cells_occupied.cols, function(i, col) {
|
914 | 915 | if ($.inArray(col, new_cells_occupied.cols) === -1) {
|
915 | 916 | empty_cols.push(col);
|
916 |
| - }; |
| 917 | + } |
917 | 918 | });
|
918 | 919 |
|
919 | 920 | var occupied_cols = [];
|
|
927 | 928 | $.each(old_cells_occupied.rows, function(i, row) {
|
928 | 929 | if ($.inArray(row, new_cells_occupied.rows) === -1) {
|
929 | 930 | empty_rows.push(row);
|
930 |
| - }; |
| 931 | + } |
931 | 932 | });
|
932 | 933 |
|
933 | 934 | var occupied_rows = [];
|
934 | 935 | $.each(new_cells_occupied.rows, function(i, row) {
|
935 | 936 | if ($.inArray(row, old_cells_occupied.rows) === -1) {
|
936 | 937 | occupied_rows.push(row);
|
937 |
| - }; |
| 938 | + } |
938 | 939 | });
|
939 | 940 |
|
940 | 941 | this.remove_from_gridmap(wgd);
|
|
944 | 945 | new_col, wgd.row, size_x, Math.min(old_size_y, size_y), $widget
|
945 | 946 | ];
|
946 | 947 | this.empty_cells.apply(this, cols_to_empty);
|
947 |
| - }; |
| 948 | + } |
948 | 949 |
|
949 | 950 | if (occupied_rows.length) {
|
950 | 951 | var rows_to_empty = [new_col, wgd.row, size_x, size_y, $widget];
|
951 | 952 | this.empty_cells.apply(this, rows_to_empty);
|
952 |
| - }; |
| 953 | + } |
953 | 954 |
|
954 | 955 | wgd.col = new_col;
|
955 | 956 | wgd.size_x = size_x;
|
|
966 | 967 |
|
967 | 968 | if (size_y > old_size_y) {
|
968 | 969 | this.add_faux_rows(size_y - old_size_y);
|
969 |
| - }; |
| 970 | + } |
| 971 | + |
| 972 | + if (size_x > old_size_x) { |
| 973 | + this.add_faux_cols(size_x - old_size_x); |
| 974 | + } |
970 | 975 |
|
971 | 976 | $widget.attr({
|
972 | 977 | 'data-col': new_col,
|
|
1019 | 1024 |
|
1020 | 1025 | $nexts.not($exclude).each($.proxy(function(i, w) {
|
1021 | 1026 | var wgd = $(w).coords().grid;
|
1022 |
| - if (!(wgd.row <= (row + size_y - 1))) { return; }; |
| 1027 | + if (!(wgd.row <= (row + size_y - 1))) { return; } |
1023 | 1028 | var diff = (row + size_y) - wgd.row;
|
1024 | 1029 | this.move_widget_down($(w), diff);
|
1025 | 1030 | }, this));
|
|
1059 | 1064 | this.set_dom_grid_height();
|
1060 | 1065 |
|
1061 | 1066 | return this;
|
1062 |
| - } |
| 1067 | + }; |
1063 | 1068 |
|
1064 | 1069 |
|
1065 | 1070 | /**
|
|
1077 | 1082 | var ga = this.gridmap;
|
1078 | 1083 | var cols_l = ga.length;
|
1079 | 1084 | var valid_pos = [];
|
| 1085 | + var rows_l; |
1080 | 1086 |
|
1081 | 1087 | for (var c = 1; c < cols_l; c++) {
|
1082 |
| - var rows_l = ga[c].length; |
| 1088 | + rows_l = ga[c].length; |
1083 | 1089 | for (var r = 1; r <= rows_l; r++) {
|
1084 | 1090 | var can_move_to = this.can_move_to({
|
1085 | 1091 | size_x: size_x,
|
|
1211 | 1217 | $el.data('coords').grid = wgd;
|
1212 | 1218 |
|
1213 | 1219 | this.add_to_gridmap(wgd, $el);
|
1214 |
| - this.widgets.push($el); |
| 1220 | + |
1215 | 1221 | return this;
|
1216 | 1222 | };
|
1217 | 1223 |
|
|
1372 | 1378 | //break if dragstop has been fired
|
1373 | 1379 | if (this.$player === null) {
|
1374 | 1380 | return false;
|
1375 |
| - }; |
| 1381 | + } |
1376 | 1382 |
|
1377 | 1383 | var abs_offset = {
|
1378 | 1384 | left: ui.position.left + this.baseX,
|
|
1555 | 1561 | var self = this;
|
1556 | 1562 | if (!no_player) {
|
1557 | 1563 | this.empty_cells_player_occupies();
|
1558 |
| - }; |
| 1564 | + } |
1559 | 1565 | var cell = !no_player ? self.colliders_data[0].el.data : {col: col};
|
1560 | 1566 | var to_col = cell.col;
|
1561 | 1567 | var to_row = row || cell.row;
|
|
1644 | 1650 | if (!a.row) {
|
1645 | 1651 | a = $(a).coords().grid;
|
1646 | 1652 | b = $(b).coords().grid;
|
1647 |
| - }; |
| 1653 | + } |
1648 | 1654 |
|
1649 | 1655 | if (a.row > b.row) {
|
1650 | 1656 | return 1;
|
|
1666 | 1672 | */
|
1667 | 1673 | fn.sort_by_row_and_col_asc = function(widgets) {
|
1668 | 1674 | widgets = widgets.sort(function(a, b) {
|
1669 |
| - if (a.row > b.row || a.row == b.row && a.col > b.col) { |
| 1675 | + if (a.row > b.row || a.row === b.row && a.col > b.col) { |
1670 | 1676 | return 1;
|
1671 | 1677 | }
|
1672 | 1678 | return -1;
|
|
2579 | 2585 | * the widget.
|
2580 | 2586 | * @param {Object} col The col to check.
|
2581 | 2587 | * @param {Object} row The row to check.
|
| 2588 | + * @param {Number} [max_row] The max row allowed. |
2582 | 2589 | * @return {Boolean} Returns true if all cells are empty, else return false.
|
2583 | 2590 | */
|
2584 |
| - fn.can_move_to = function(widget_grid_data, col, row) { |
| 2591 | + fn.can_move_to = function(widget_grid_data, col, row, max_row) { |
2585 | 2592 | var ga = this.gridmap;
|
2586 | 2593 | var $w = widget_grid_data.el;
|
2587 | 2594 | var future_wd = {
|
|
2596 | 2603 | var right_col = col + widget_grid_data.size_x - 1;
|
2597 | 2604 | if (right_col > this.cols) {
|
2598 | 2605 | return false;
|
2599 |
| - }; |
| 2606 | + } |
| 2607 | + |
| 2608 | + if (max_row && max_row < row + widget_grid_data.size_y - 1) { |
| 2609 | + return false; |
| 2610 | + } |
2600 | 2611 |
|
2601 | 2612 | this.for_each_cell_occupied(future_wd, function(tcol, trow) {
|
2602 | 2613 | var $tw = this.is_widget(tcol, trow);
|
|
2904 | 2915 | opts || (opts = {});
|
2905 | 2916 | opts.cols || (opts.cols = this.cols);
|
2906 | 2917 | opts.rows || (opts.rows = this.rows);
|
2907 |
| - opts.namespace || (opts.namespace = ''); |
| 2918 | + opts.namespace || (opts.namespace = this.options.namespace); |
2908 | 2919 | opts.widget_base_dimensions ||
|
2909 | 2920 | (opts.widget_base_dimensions = this.options.widget_base_dimensions);
|
2910 | 2921 | opts.widget_margins ||
|
|
3021 | 3032 | original_row: row
|
3022 | 3033 | }).coords();
|
3023 | 3034 |
|
| 3035 | + if (!$.isArray(this.gridmap[col])) { |
| 3036 | + this.gridmap[col] = []; |
| 3037 | + } |
| 3038 | + |
3024 | 3039 | this.gridmap[col][row] = false;
|
3025 | 3040 | this.faux_grid.push(coords);
|
3026 | 3041 |
|
|
3048 | 3063 | this.rows = max_rows;
|
3049 | 3064 |
|
3050 | 3065 | if (this.options.autogenerate_stylesheet) {
|
3051 |
| - this.generate_stylesheet({namespace: this.options.namespace}); |
| 3066 | + this.generate_stylesheet(); |
| 3067 | + } |
| 3068 | + |
| 3069 | + return this; |
| 3070 | + }; |
| 3071 | + |
| 3072 | + /** |
| 3073 | + * Add cols to the faux grid. |
| 3074 | + * |
| 3075 | + * @method add_faux_cols |
| 3076 | + * @param {Number} cols The number of cols you want to add to the faux grid. |
| 3077 | + * @return {Object} Returns the instance of the Gridster class. |
| 3078 | + */ |
| 3079 | + fn.add_faux_cols = function(cols) { |
| 3080 | + var actual_cols = this.cols; |
| 3081 | + var max_cols = actual_cols + (cols || 1); |
| 3082 | + |
| 3083 | + for (var c = actual_cols; c < max_cols; c++) { |
| 3084 | + for (var r = this.rows; r >= 1; r--) { |
| 3085 | + this.add_faux_cell(r, c); |
| 3086 | + }; |
| 3087 | + }; |
| 3088 | + |
| 3089 | + this.cols = max_cols; |
| 3090 | + |
| 3091 | + if (this.options.autogenerate_stylesheet) { |
| 3092 | + this.generate_stylesheet(); |
3052 | 3093 | }
|
3053 | 3094 |
|
3054 | 3095 | return this;
|
|
3118 | 3159 |
|
3119 | 3160 | // get all rows that could be occupied by the current widgets
|
3120 | 3161 | var max_rows = this.options.extra_rows;
|
3121 |
| - this.$widgets.each(function(i, w){ |
| 3162 | + this.$widgets.each(function(i, w) { |
3122 | 3163 | max_rows += (+$(w).attr('data-sizey'));
|
3123 | 3164 | });
|
3124 | 3165 |
|
|
3145 | 3186 | });
|
3146 | 3187 | };
|
3147 | 3188 |
|
| 3189 | + $.Gridster = fn; |
3148 | 3190 |
|
3149 | 3191 | }(jQuery, window, document));
|
0 commit comments