Skip to content
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

Fix sorting issues and hybridize to work with Polymer 2.0 #8

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

Fix sorting issues and hybridize to work with Polymer 2.0 #8

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
57b2d0d
Add logic to go up the dom tree until target is a direct child of sor…
WilliamTsao Jul 27, 2018
ae5d25d
Merge pull request #1 from photoshelter/sort-issue-fix
WilliamTsao Jul 27, 2018
87c1b14
typo fix
WilliamTsao Jul 27, 2018
2d252e6
wip
WilliamTsao Jul 27, 2018
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
38 changes: 28 additions & 10 deletions sortable-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@
:host {
display: block;
}
:host ::slotted(*) {
@apply --sortable-list-item;
}
</style>
<slot></slot>
</template>
Expand All @@ -50,19 +53,29 @@
evt.preventDefault();
evt.dataTransfer.dropEffect = "move";

var current = Number(getIndex(evt.target));
// Move up the dom tree until you find the direct child of SORTABLE-LIST
var target = evt.target;
while(target.parentNode.tagName !== 'SORTABLE-LIST') {
target = target.parentNode;
}

var current = Number(getIndex(target));
var move = Number(evt.dataTransfer.getData("index"));

// set the underlying Array model new order
if (move !== current) {

var userTemplate = this.querySelector("template[is='dom-repeat']");

var data = userTemplate.items;
var repeat;
if(Polymer.Element){
// 2.x
repeat = this.querySelector('dom-repeat');
}else {
repeat = this.querySelector("template[is='dom-repeat']");
}

var data = repeat.items;
var item = data.splice(move, 1);
data.splice(current, null, item[0]);

userTemplate.notifySplices('items', [
repeat.notifySplices('items', [
{ index: move, removed: [item], addedCount: 0, object: data, type: "splice" },
{ index: current, removed: [], addedCount: 1, object: data, type: "splice" }
]);
Expand Down Expand Up @@ -91,10 +104,15 @@

this.async(function() {
self.addEventListener('drop', handledrop, false);
var repeat;

var template = this.querySelector("template[is='dom-repeat']");

template.addEventListener('dom-change', function() {
if(Polymer.Element){
// 2.x
repeat = this.querySelector('dom-repeat');
}else {
repeat = this.querySelector("template[is='dom-repeat']");
}
repeat.addEventListener('dom-change', function() {
self._addlisteners();
});

Expand Down