beenull/photoprism
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Frontend: Refactor photo range selection #159

Browse source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2019-12-15 12:39:36 +01:00
parent d2eac5aacf
commit 784fad44b7
5 changed files with 37 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
frontend/src/common/clipboard.js
View file

@ -11,6 +11,7 @@ class Clipboard {
this.storage = storage;
this.selectionMap = {};
this.selection = [];
this.lastId = "";
this.loadFromStorage();
}
@ -43,9 +44,11 @@ class Clipboard {
if (index === -1) {
this.selection.push(id);
this.selectionMap["id:" + id] = true;
this.lastId = id;
} else {
this.selection.splice(index, 1);
delete this.selectionMap["id:" + id];
this.lastId = "";
}
this.saveToStorage();
@ -67,10 +70,37 @@ class Clipboard {
this.selection.push(id);
this.selectionMap["id:" + id] = true;
this.lastId = id;
this.saveToStorage();
}
addRange(rangeEnd, models) {
if(!models || !models[rangeEnd] || !(models[rangeEnd] instanceof Abstract)) {
console.warn("Clipboard::addRange() - invalid arguments:", rangeEnd, models);
return;
}
let rangeStart = models.findIndex((photo) => photo.PhotoUUID === this.lastId);
if(rangeStart === -1) {
this.toggle(models[rangeEnd]);
return 1;
}
if (rangeStart > rangeEnd) {
const newEnd = rangeStart;
rangeStart = rangeEnd;
rangeEnd = newEnd;
}
for (let i = rangeStart; i <= rangeEnd; i++) {
this.add(models[i])
}
return (rangeEnd - rangeStart) + 1;
}
has(model) {
if(!model || !(model instanceof Abstract)) {
console.log("Clipboard::has() - not a model:", model);
@ -97,6 +127,7 @@ class Clipboard {
const index = this.selection.indexOf(id);
this.selection.splice(index, 1);
this.lastId = "";
delete this.selectionMap["id:" + id];
this.saveToStorage();
@ -111,6 +142,7 @@ class Clipboard {
this.selection = ids;
this.selectionMap = {};
this.lastId = "";
for (let i = 0; i < this.selection.length; i++) {
this.selectionMap["id:" + this.selection[i]] = true;
@ -118,6 +150,7 @@ class Clipboard {
}
clear() {
this.lastId = "";
this.selectionMap = {};
this.selection.splice(0, this.selection.length);
this.storage.removeItem(this.storageKey);

16
frontend/src/component/p-photo-details.vue
View file

@ -41,7 +41,7 @@
<v-btn v-if="hover || selection.length > 0" :flat="!hover" :ripple="false"
icon large absolute
class="p-photo-select"
@click.shift.prevent="selectRange(photo)"
@click.shift.prevent="$clipboard.addRange(index, photos)"
@click.exact.stop.prevent="$clipboard.toggle(photo)">
<v-icon v-if="selection.length && $clipboard.has(photo)" color="white" class="t-select t-on">check_circle</v-icon>
<v-icon v-else color="accent lighten-3" class="t-select t-off">radio_button_off</v-icon>
@ -94,20 +94,6 @@
album: Object,
},
methods: {
selectRange(photo) {
var selection = this.$clipboard.getIds();
if (selection.length) {
var lastAddedId = selection[selection.length - 1];
var rangeStart = this.photos.findIndex((photo) => photo.getId() == lastAddedId);
var rangeEnd = this.photos.indexOf(photo);
var photosToBeAdded = this.photos.slice(Math.min(rangeStart, rangeEnd), Math.max(rangeStart, rangeEnd) + 1);
for (var photo of photosToBeAdded) {
this.$clipboard.add(photo);
}
} else {
this.$clipboard.add(photo);
}
}
}
};
</script>

16
frontend/src/component/p-photo-mosaic.vue
View file

@ -40,7 +40,7 @@
<v-btn v-if="hover || selection.length > 0" :flat="!hover" :ripple="false"
icon small absolute
class="p-photo-select"
@click.shift.prevent="selectRange(photo)"
@click.shift.prevent="$clipboard.addRange(index, photos)"
@click.exact.stop.prevent="$clipboard.toggle(photo)">
<v-icon v-if="selection.length && $clipboard.has(photo)" color="white" class="t-select t-on">check_circle</v-icon>
<v-icon v-else color="accent lighten-3" class="t-select t-off">radio_button_off</v-icon>
@ -71,20 +71,6 @@
album: Object,
},
methods: {
selectRange(photo) {
var selection = this.$clipboard.getIds();
if (selection.length) {
var lastAddedId = selection[selection.length - 1];
var rangeStart = this.photos.findIndex((photo) => photo.getId() == lastAddedId);
var rangeEnd = this.photos.indexOf(photo);
var photosToBeAdded = this.photos.slice(Math.min(rangeStart, rangeEnd), Math.max(rangeStart, rangeEnd) + 1);
for (var photo of photosToBeAdded) {
this.$clipboard.add(photo);
}
} else {
this.$clipboard.add(photo);
}
}
},
};
</script>

16
frontend/src/component/p-photo-tiles.vue
View file

@ -40,7 +40,7 @@
<v-btn v-if="hover || selection.length > 0" :flat="!hover" :ripple="false"
icon large absolute
class="p-photo-select"
@click.shift.prevent="selectRange(photo)"
@click.shift.prevent="$clipboard.addRange(index, photos)"
@click.exact.stop.prevent="$clipboard.toggle(photo)">
<v-icon v-if="selection.length && $clipboard.has(photo)" color="white" class="t-select t-on">check_circle</v-icon>
<v-icon v-else-if="!$clipboard.has(photo)" color="accent lighten-3" class="t-select t-off">radio_button_off</v-icon>
@ -71,20 +71,6 @@
album: Object,
},
methods: {
selectRange(photo) {
var selection = this.$clipboard.getIds();
if (selection.length) {
var lastAddedId = selection[selection.length - 1];
var rangeStart = this.photos.findIndex((photo) => photo.getId() == lastAddedId);
var rangeEnd = this.photos.indexOf(photo);
var photosToBeAdded = this.photos.slice(Math.min(rangeStart, rangeEnd), Math.max(rangeStart, rangeEnd) + 1);
for (var photo of photosToBeAdded) {
this.$clipboard.add(photo);
}
} else {
this.$clipboard.add(photo);
}
}
}
};
</script>

2
frontend/src/pages/photos.vue
View file

@ -222,7 +222,7 @@
}).catch(() => this.loading = false);
},
onKeypress(event) {
if (event.key == "Escape") {
if (event.key === "Escape") {
this.$clipboard.clear();
}
},