jketreno/ketr.photos
1
0
Fork 0
Code Issues 1 Activity

Folder searching now hooked in

Browse Source 
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2018-09-09 20:44:44 -07:00
parent 9a5ea06eee
commit 0cf0ae2ce1
2 changed files with 66 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/bower.json
View File

@ -23,7 +23,7 @@
"paper-header-panel": "PolymerElements/paper-header-panel#^1.1.6",
"paper-toolbar": "PolymerElements/paper-toolbar#^1.1.4",
"paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.9",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.1.2",
"paper-icon-button": "PolymerElements/paper-icon-button#^2.2.0",
"iron-icons": "PolymerElements/iron-icons#^1.1.3",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.2.1",
@ -58,6 +58,7 @@
"paper-spinner": "^1.0.0",
"iron-resizable-behavior": "^1.0.4",
"paper-checkbox": "^1.2.0",
"webcomponentsjs": "^v1.1.0"
"webcomponentsjs": "^v1.1.0",
"paper-icon-button": "^1.1.2"
}
}

84
frontend/src/ketr-photos/ketr-photos.html
View File

@ -19,6 +19,7 @@
<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="../../bower_components/paper-radio-button/paper-radio-button.html">
@ -90,6 +91,22 @@
color: white;
}
#yearSlider {
margin-top: 0.5em;
position: fixed;
display: block;
opacity: 0;
right: 5px;
bottom: 0px;
padding: 0.5em;
width: 120px;
background-color: rgb(16, 0, 16);
color: white;
text-align: center;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
}
#pager {
margin-top: 0.5em;
position: fixed;
@ -176,8 +193,8 @@
<app-location route="{{route}}"></app-location>
<app-drawer-layout id="albumLayout">
<app-drawer persistent id="albumList" slot="drawer">
<app-drawer-layout id="albumLayout" force-narrow=true>
<app-drawer id="searchBox" slot="drawer">
<div id="albums" class="layout vertical">
<template is="dom-repeat" items="[[breadcrumb(path)]]">
<div on-tap="loadPath">[[item.name]] /</div>
@ -189,7 +206,8 @@
</app-drawer>
<app-header-layout>
<app-header reveals slot="header">
<div id="header" class="layout horizontal center justified">
<div id="header" class="layout horizontal center">
<paper-icon-button icon="search" on-tap="searchBoxToggle"></paper-icon-button>
<div id="breadcrumb" class="horizontal layout center">
<template is="dom-repeat" items="[[breadcrumb(path)]]">
<div on-tap="loadPath">[[item.name]] /</div>
@ -205,6 +223,11 @@
</div>
</app-drawer-layout>
<div id="pager">pager</div>
<div id="yearSlider">
<template is="dom-repeat" items="[[years]]">
<div>item</div>
</template>
</div>
<paper-toast id="toast"></paper-toast>
<photo-lightbox tabindex="0" id="lightbox" on-close="lightBoxClose" on-next="lightBoxNext" on-previous="lightBoxPrevious"></photo-lightbox>
</template>
@ -215,6 +238,10 @@
Polymer({
is: "ketr-photos",
properties: {
years: {
type: Array,
value: []
},
order: {
type: String,
value: "by-date"
@ -271,22 +298,19 @@
},
observers: [
"widthChanged(calcWidth)",
"orderChanged(order)"
"widthChanged(calcWidth)"
],
orderChanged: function(order) {
console.log("Order: " + order);
if (order == "by-album") {
this.$.albumLayout.forceNarrow = false;
this.$.albumList.open();
this.$.albumList.persistent = true;
} else if (order == "by-date") {
this.$.albumList.close();
searchBoxToggle: function(event) {
if (this.$.searchBox.opened) {
this.$.searchBox.close();
this.$.albumLayout.forceNarrow = true;
this.$.albumList.resetLayout();
this.$.searchBox.resetLayout();
} else {
this.$.searchBox.open();
this.$.albumLayout.forceNarrow = false;
this.$.searchBox.persistent = true;
}
Polymer.dom(this.$.thumbnails).innerHTML = "";
},
listeners: {
@ -295,25 +319,29 @@
},
loadPath: function(event) {
this.path = event.model.item.path;
Polymer.dom(this.$.thumbnails).innerHTML = "";
this.next = false;
this._loadAlbums();
this._loadPhotos();
this._pathLoad(event.model.item.path);
},
loadAlbum: function(event) {
this._pathLoad(event.detail);
},
_pathLoad: function(path) {
this.path = path;
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
this.path = event.detail;
this.pendingPhotos = [];
this.visibleThumbs = [];
this.thumbnails = [];
this.cursor = null;
Polymer.dom(this.$.thumbnails).innerHTML = "";
this.next = false;
this.limit = undefined;
this._loadAlbums();
this._loadPhotos();
},
onScroll: function(event) {
if (this.disableScrolling) {
event.preventDefault();
@ -571,6 +599,18 @@
return;
}
var i = 0;
photos.forEach(function(photo) {
var datetime = new Date((photo.taken || photo.modified || photo.added) + " GMT"),
year = datetime.getFullYear();
for (; i < this.years.length; i++) {
if (this.years[i] == year) {
return;
}
}
this.push("years", year);
}.bind(this));
this.pendingPhotos = this.pendingPhotos.concat(photos);
this.async(this.processItems.bind(this));