diff --git a/frontend/elements/photo-lightbox.html b/frontend/elements/photo-lightbox.html index 1fa2123..7e1f238 100644 --- a/frontend/elements/photo-lightbox.html +++ b/frontend/elements/photo-lightbox.html @@ -170,6 +170,10 @@ Polymer({ this.hasFocus = false; }, + delete: function() { + this.fire("action", "delete"); + }, + next: function() { this.fire("next"); }, @@ -187,7 +191,17 @@ Polymer({ return; } + if (this.hasFocus) { + e.preventDefault(); + e.stopPropagation(); + } + switch (e.keyCode) { + case 46: /* delete */ + if (this.hasFocus) { + this.delete(); + } + break; case 39: /* right */ if (this.hasFocus) { this.next(); @@ -206,11 +220,6 @@ Polymer({ console.log(e.keyCode); break; } - - if (this.hasFocus) { - e.preventDefault(); - e.stopPropagation(); - } }, reload: function() { diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html index e961242..fbcb875 100755 --- a/frontend/src/ketr-photos/ketr-photos.html +++ b/frontend/src/ketr-photos/ketr-photos.html @@ -729,7 +729,6 @@ this.thumbnails = []; this.notifyPath("thumbnails.length"); Polymer.dom(this.$.thumbnails).innerHTML = ""; - this.next = false; this.limit = undefined; }, @@ -983,16 +982,6 @@ }); }, - findPhoto: function(photo) { - var photos = this.$.thumbnails.querySelectorAll("photo-thumbnail"); - for (var i = 0; i < photos.length; i++) { - if (photos[i] == photo) { - return { index: i, photos: photos }; - } - } - return { index: -1, photos: photos }; - }, - lightBoxClose: function(event) { this.disableScrolling = false; if (this.lightBoxElement) { @@ -1001,39 +990,50 @@ } }, - lightBoxNext: function(event) { - var results = this.findPhoto(this.lightBoxElement); - - /* If there are less than 2 rows less (2 * cols) then queue up more to load! */ - if (results.index + (this.cols * 2) >= results.photos.length && this.next) { - this.loadNextPhotos(); + lightBoxSet: function(index) { + /* If lightBoxNext / lightBoxPrev is called after the last image + * was deleted, close the lightbox instead of trying to cycle */ + if (index >= this.thumbnails.length) { + this.$.lightbox.close(); + } else { + this.loadLightbox(this.thumbnails[index]); } - if (results.index == -1 || results.index + 1 >= results.photos.length) { - return; - } + this.debounce("load-check", function() { + this.triggerLoadMore(); + this.triggerVisibilityChecks(); + }, 150); + }, - var photo = results.photos[results.index + 1]; - photo.scrollIntoView(false); - this.topStickX = window.scrollX; - this.topStickY = window.scrollY; - this.loadLightbox(photo); - this.triggerVisibilityChecks(); + findThumbnail: function(id) { + for (var i = 0; i < this.thumbnails.length; i++) { + if (this.thumbnails[i].item.id == id) { + return i; + } + } + return -1; + }, + + lightBoxNext: function() { + var index = this.findThumbnail(this.lightBoxElement.item.id); + if (index == -1 || (index + 1) >= this.thumbnails.length) { + index = 0; + } else { + index++; + } + this.lightBoxSet(index); }, - lightBoxPrevious: function(event) { - var results = this.findPhoto(this.lightBoxElement); - if (results.index == -1 || results.index < 1) { - return; + lightBoxPrevious: function() { + var index = this.findThumbnail(this.lightBoxElement.item.id); + if (index == -1 || index == 0) { + index = this.thumbnails.length - 1; + } else { + index--; } - var photo = results.photos[results.index - 1]; - photo.scrollIntoView(false); - this.topStickX = window.scrollX; - this.topStickY = window.scrollY; - this.loadLightbox(photo); - this.triggerVisibilityChecks(); + this.lightBoxSet(index); }, widthChanged: function(calcWidth) { @@ -1065,9 +1065,13 @@ this.lightBoxElement = el; this.lightBoxElement.selected = true; this.disableScrolling = true; + if (this.$.lightbox.opened) { + this.lightBoxElement.scrollIntoView(false); + } else { + this.$.lightbox.open(); + } this.topStickX = window.scrollX; this.topStickY = window.scrollY; - this.$.lightbox.open(); this.updateStyles(); }, @@ -1364,19 +1368,17 @@ * thumb in the main view as well */ if (thumbnail.tagName == "PHOTO-LIGHTBOX") { console.log("Undo from lightbox"); - this.$.lightbox.close(); - var match = null; - for (var i = 0; i < this.thumbnails.length; i++) { - if (this.thumbnails[i].item.id == thumbnail.item.id) { - match = this.thumbnails[i]; - break; - } - } - if (!match) { + var index = this.findThumbnail(thumbnail.item.id); + if (index == -1) { + this.$.lightbox.close(); return; } - - thumbnail = match; + thumbnail = this.thumbnails[index]; + if (this.thumbnails.length == 1) { + this.$.lightbox.close(); + } else { + this.lightBoxNext(); + } } else { console.log("Undo from thumbnail"); } @@ -1393,8 +1395,7 @@ query += "?permanent=1"; } - window.fetch("api/v1/photos/" + thumbnail.item.id + query, - function(thumbnail, error) { + window.fetch("api/v1/photos/" + thumbnail.item.id + query, function(thumbnail, error) { thumbnail.disabled = false; if (error) { @@ -1406,19 +1407,17 @@ * thumb in the main view as well */ if (thumbnail.tagName == "PHOTO-LIGHTBOX") { console.log("Delete from lightbox"); - this.$.lightbox.close(); - var match = null; - for (var i = 0; i < this.thumbnails.length; i++) { - if (this.thumbnails[i].item.id == thumbnail.item.id) { - match = this.thumbnails[i]; - break; - } - } - if (!match) { + var index = this.findThumbnail(thumbnail.item.id); + if (index == -1) { + this.$.lightbox.close(); return; } - - thumbnail = match; + thumbnail = this.thumbnails[index]; + if (this.thumbnails.length == 1) { + this.$.lightbox.close(); + } else { + this.lightBoxNext(); + } } else { console.log("Delete from thumbnail"); } @@ -1526,7 +1525,6 @@ pathTapped: function(event) { this.path = event.currentTarget.path; Polymer.dom(this.$.thumbnails).innerHTML = ""; - this.next = false; this._loadAlbums(); this._loadDays(); this._loadPhotos();