Skip to content

Fix initial loading (see issue) and dispatch a dragging event (because we are cancelling the original) #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yorrd wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Fix initial loading (see issue) and dispatch a dragging event (because we are cancelling the original) #18

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b9281cc
allow for infinite expansion if the respective property is set to true
May 6, 2017
dc45d3d
requested changes
May 9, 2017
20f292b
requested changes
May 9, 2017
cb335e2
requested changes
May 9, 2017
126599d
requested changes
May 19, 2017
c278dcb
Merge pull request #1 from vpusher/master
yorrd Jul 17, 2017
bfacc7e
Merge remote-tracking branch 'origin/master'
Jul 17, 2017
14193d0
fix loading issue and throw a dragging event
Jul 17, 2017
99842c0
only emit if necessary
Jul 17, 2017
4065ffc
only emit if necessary
Jul 17, 2017
951dd4a
add dragging should also be fired on resize but with different type
Jul 18, 2017
9e391f5
also pass the source event for mouse pointer data
Jul 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 62 additions & 10 deletions the-grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,6 @@
super.connectedCallback();
this.addEventListener('dom-change', this._attachEvents);
this._attachEvents();
this.computeStyles();
}

/**
Expand All @@ -230,6 +229,7 @@
let addOrRemoveMoveListener = this.draggable ? 'addListener' : 'removeListener';

Array.prototype.forEach.call(this.children, child => {
this.ensureSpace(child);
let isPlaceholder = child.hasAttribute('placeholder');
if (isPlaceholder) {
this.placeholder = child;
Expand All @@ -248,7 +248,7 @@
child.addEventListener('touchmove', this._safePreventDefault);
}
});

this.computeStyles();
}

/**
Expand Down Expand Up @@ -378,6 +378,30 @@
player.style.left = `${newLeft}px`;
player.style.top = `${newTop}px`;

if(position.col !== +this.placeholder.getAttribute("col")
|| position.row !== +this.placeholder.getAttribute("row")) {
/**
* `dragging` event when resizer/gripper is being moved.
*
* @event TheGrid#dragging
* @type {object}
* @property {HTMLElement} grid - The grid in which the event occurred.
* @property {HTMLElement} tile - The tile that has been resized.
* @property {Event} sourceEvent - The original tracking event.
*/
player.dispatchEvent(new CustomEvent('dragging', {
bubbles: true,
composed: true,
detail: {
grid: this,
tile: player,
col: position.col,
row: position.row,
sourceEvent: e
}
}));
}

// Check for overlaps if enabled.
if (this.overlappable || !this._isOverlapping(position.col, position.row, cols, rows, [player])) {
this.placeholder.setAttribute('row', position.row);
Expand Down Expand Up @@ -408,7 +432,8 @@
composed: true,
detail: {
grid: this,
tile: player
tile: player,
type: "move"
}
}));
}
Expand Down Expand Up @@ -484,6 +509,33 @@
isWidth && newWidth >= this.cellWidth && (player.style.width = `${newWidth}px`);
isHeight && newHeight >= this.cellHeight && (player.style.height = `${newHeight}px`);

if(size.width !== +this.placeholder.getAttribute("width")
|| position.height !== +this.placeholder.getAttribute("height")) {
/**
* `dragging` event when resizer/gripper is being moved.
*
* @event TheGrid#dragging
* @type {object}
* @property {HTMLElement} grid - The grid in which the event occurred.
* @property {HTMLElement} tile - The tile that has been resized.
* @property {Event} sourceEvent - The original tracking event.
*/
player.dispatchEvent(new CustomEvent('dragging', {
bubbles: true,
composed: true,
detail: {
grid: this,
tile: player,
type: "resize",
col: size.col,
row: size.row,
width: size.width,
height: size.height,
sourceEvent: e
}
}));
}

// Check for overlaps if enabled.
if (this.overlappable || !this._isOverlapping(position.col, position.row, size.width, size.height, [player])) {
let isWidthValid = this._isWithinConstraints(size.width, minWidth, maxWidth);
Expand Down Expand Up @@ -584,13 +636,13 @@

}
/**
* Checks if the given width or height as `value` is within grid constraints.
* @param {Number} value in grid unit.
* @param {Number} min in grid unit.
* @param {Number} max in grid unit.
* @return {Boolean} true when within constraints, otherwise false.
* @private
*/
* Checks if the given width or height as `value` is within grid constraints.
* @param {Number} value in grid unit.
* @param {Number} min in grid unit.
* @param {Number} max in grid unit.
* @return {Boolean} true when within constraints, otherwise false.
* @private
*/
_isWithinConstraints(value, min = 1, max = Infinity) {
return value >= min && value <= max;
}
Expand Down