Skip to content

Commit

Permalink
move onto card chrome/safari hack ☠️
Browse files Browse the repository at this point in the history
  • Loading branch information
@sean-codes
sean-codes committed Nov 18, 2017
1 parent be72de3 commit c237cfc
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 61 deletions.
47 changes: 19 additions & 28 deletions dist/scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ var KanbanBoard = function () {
}, {
key: 'mouseEnterLane',
value: function mouseEnterLane(lane) {
console.log('board knows: mouse enter lane');
if (this.heldCard) {
this.putCardInLane(this.heldCard.id, lane.id);
}
Expand Down Expand Up @@ -147,7 +148,7 @@ var KanbanBoard = function () {
}, {
key: 'mouseMove',
value: function mouseMove(x, y) {
console.log('board knows: mouse move');
//console.log('board knows: mouse move')
if (this.heldCard) {
if (!this.heldCard.moved) {
this.heldCard.hold();
Expand All @@ -156,26 +157,6 @@ var KanbanBoard = function () {
this.ghost.move(x, y);
}
}
}, {
key: 'cardDragOver',
value: function cardDragOver(ele) {
// Chrome - Safari: Move to lane hack
if (!this.held || ele == this.held) return;
if (ele.tagName.toLowerCase() == 'lane-cards') {
// Safari calls child first skip this
if (!this.movedToCardAndLane) ele.appendChild(this.held);
this.movedToLane = true;
this.movedToCardAndLane = false;
return;
}

// Chrome calls parent first
// If that happened OR safari calls child first. Set above
this.movedToCardAndLane = ele.parentElement != this.held.parentElement;
ele.nextSibling == this.held || this.movedToLane || this.movedToCardAndLane ? ele.parentElement.insertBefore(this.held, ele) : ele.parentElement.insertBefore(this.held, ele.nextSibling);

this.movedToLane = false;
}

// This one will get scarey

Expand Down Expand Up @@ -377,34 +358,44 @@ var KanbanLane = function () {
value: function listen() {
var _this5 = this;

this.html.cards.addEventListener('mouseenter', function () {
_this5.mouseenter();
this.html.cards.addEventListener('mouseenter', function (e) {
_this5.mouseenter(e);
});
this.html.title.addEventListener('click', function () {
_this5.toggle();
this.html.title.addEventListener('click', function (e) {
_this5.toggle(e);
});
}
}, {
key: 'mouseenter',
value: function mouseenter() {
value: function mouseenter(e) {
this.onMouseEnterLane(this);
}
}, {
key: 'toggle',
value: function toggle() {
this.html.lane.classList.toggle('collapse');
}

// These are a bit spookey I would just leave them alone for now

}, {
key: 'append',
value: function append(card) {
this.html.cards.appendChild(card.html);
card.lane = this.id;
if (!card.movedToCardAndLane) this.html.cards.appendChild(card.html);
card.movedToCardAndLane = false;
}
}, {
key: 'appendCardAroundCard',
value: function appendCardAroundCard(card1, card2) {
!card2.html.nextSibling ? this.append(card1) : this.html.cards.insertBefore(card1.html, card2.html);
card1.lane = this.id;
card1.movedToCardAndLane = card1.html.parentElement != card2.html.parentElement;
if (!card2.html.nextSibling && !card1.movedToCardAndLane) {
this.append(card1);
return;
}

this.html.cards.insertBefore(card1.html, card2.html);
}
}]);

Expand Down
2 changes: 1 addition & 1 deletion dist/scripts.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions example/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@
mykanban.addLane(new KanbanLane('lane5', 'Lane 5', laneTemplate))

// Add Cards
mykanban.addCard(new KanbanCard('card1', 'lane1', 'demo', cardTemplate))
mykanban.addCard(new KanbanCard('card2', 'lane2', 'demo', cardTemplate))
mykanban.addCard(new KanbanCard('card1', 'lane1', 'demo 1', cardTemplate))
mykanban.addCard(new KanbanCard('card3', 'lane1', 'demo 3', cardTemplate))
mykanban.addCard(new KanbanCard('card2', 'lane2', 'demo 2', cardTemplate))

/*
Expand Down
25 changes: 2 additions & 23 deletions src/Board.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ class KanbanBoard {

// All the events
mouseEnterLane(lane) {
console.log('board knows: mouse enter lane')
if(this.heldCard) {
this.putCardInLane(this.heldCard.id, lane.id)
}
Expand Down Expand Up @@ -98,7 +99,7 @@ class KanbanBoard {
}

mouseMove(x, y) {
console.log('board knows: mouse move')
//console.log('board knows: mouse move')
if(this.heldCard) {
if(!this.heldCard.moved) {
this.heldCard.hold()
Expand All @@ -108,28 +109,6 @@ class KanbanBoard {
}
}

cardDragOver(ele){
// Chrome - Safari: Move to lane hack
if(!this.held || ele == this.held) return
if(ele.tagName.toLowerCase() == 'lane-cards'){
// Safari calls child first skip this
if(!this.movedToCardAndLane)
ele.appendChild(this.held)
this.movedToLane = true
this.movedToCardAndLane = false
return
}

// Chrome calls parent first
// If that happened OR safari calls child first. Set above
this.movedToCardAndLane = ele.parentElement != this.held.parentElement
ele.nextSibling == this.held || this.movedToLane || this.movedToCardAndLane
? ele.parentElement.insertBefore(this.held, ele)
: ele.parentElement.insertBefore(this.held, ele.nextSibling)

this.movedToLane = false
}

// This one will get scarey
scroll() { }
}
20 changes: 13 additions & 7 deletions src/Lane.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,27 +25,33 @@ class KanbanLane {
}

listen() {
this.html.cards.addEventListener('mouseenter', () => { this.mouseenter() })
this.html.title.addEventListener('click', () => { this.toggle() })
this.html.cards.addEventListener('mouseenter', (e) => { this.mouseenter(e) })
this.html.title.addEventListener('click', (e) => { this.toggle(e) })
}

mouseenter() {
mouseenter(e) {
this.onMouseEnterLane(this)
}

toggle() {
this.html.lane.classList.toggle('collapse')
}

// These are a bit spookey I would just leave them alone for now
append(card) {
this.html.cards.appendChild(card.html)
card.lane = this.id
if(!card.movedToCardAndLane) this.html.cards.appendChild(card.html)
card.movedToCardAndLane = false
}

appendCardAroundCard(card1, card2){
!card2.html.nextSibling
? this.append(card1)
: this.html.cards.insertBefore(card1.html, card2.html)
card1.lane = this.id
card1.movedToCardAndLane = card1.html.parentElement != card2.html.parentElement
if(!card2.html.nextSibling && !card1.movedToCardAndLane){
this.append(card1)
return
}

this.html.cards.insertBefore(card1.html, card2.html)
}
}

0 comments on commit c237cfc

Please sign in to comment.