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

Fixed column widths

Browse Source 
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2018-08-26 21:14:27 -07:00
parent 050ce39186
commit 29dafae886
4 changed files with 93 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@ -1,4 +1,22 @@
#### Upgrade to Node >v6
```bash
wget -qO- https://deb.nodesource.com/setup_6.x | sudo bash -
sudo apt-get install --yes nodejs
```
You can then install the latest npm, polymer-cli, and bower:
```bash
sudo npm install --global npm@latest
sudo npm install --global polymer-cli
sudo npm install --global bower
```
###
NEF processing uses ufraw-batch
```
sudo apt install ufraw-batch
```
### Create `photos` user for DB

5
frontend/bower.json
View File

@ -34,7 +34,7 @@
"paper-button": "PolymerElements/paper-button#^1.0.11",
"app-route": "PolymerElements/app-route#~0.9.1",
"app-layout": "PolymerElements/app-layout#^0.9.1",
"paper-checkbox": "PolymerElements/paper-checkbox#^1.2.0",
"paper-checkbox": "PolymerElements/paper-checkbox#^2.0.4",
"iron-form": "PolymerElements/iron-form#^1.0.16",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^2.1.1",
"paper-dialog": "PolymerElements/paper-dialog#^1.1.0",
@ -55,6 +55,7 @@
"iron-location": "^1.0.0",
"iron-collapse": "^1.2.1",
"paper-spinner": "^1.0.0",
"iron-resizable-behavior": "^1.0.4"
"iron-resizable-behavior": "^1.0.4",
"paper-checkbox": "^1.2.0"
}
}

5
frontend/elements/photo-thumbnail.html
View File

@ -11,6 +11,7 @@
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
:host {
@apply --photo-thumbnail;
display: inline-block;
position: relative;
background-repeat: no-repeat;
@ -20,6 +21,10 @@
cursor: pointer;
color: white;
overflow: hidden;
box-sizing: border-box;
width: 200px;
height: 200px;
}
:host > div {

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

@ -13,6 +13,7 @@
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<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-input/paper-input.html">
@ -93,11 +94,15 @@
}
photo-thumbnail {
border: 3px solid rgba(0, 0, 0, 0);
--photo-thumbnail: {
border: 3px solid rgba(0, 0, 0, 0);
};
}
photo-thumbnail[selected] {
border-color: blue;
--photo-thumbnail: {
border-color: blue;
};
}
</style>
@ -114,6 +119,8 @@
<paper-radio-button name="by-date">By date</paper-radio-button>
<paper-radio-button name="by-album">By album</paper-radio-button>
</paper-radio-group>
<paper-checkbox checked$="[[limitPerFolder]]" on-checked-changed="onLimitPerFolderChecked">Limit per folder</paper-checkbox>
<paper-checkbox checked$="[[breakOnDayChange]]" on-checked-changed="onBreakOnDayChanged">Break on day change</paper-checkbox>
<div>[[path]]</div>
</div>
</app-header>
@ -154,6 +161,16 @@
next: {
type: Boolean,
value: false
},
breakOnDayChange: {
type: Boolean,
value: true,
reflectToAttribute: true
},
limitPerFolder: {
type: Boolean,
value: false,
reflectToAttribute: true
}
},
@ -161,6 +178,29 @@
"widthChanged(calcWidth)"
],
onLimitPerFolder: function(event) {
if (!this.photos) {
return;
}
this.limitPerFolder = event.detail.value;
Polymer.dom(this.$.thumbnails).innerHTML = "";
this.appendItems(this.photos);
},
onBreakOnDayChanged: function(event) {
if (!this.photos) {
return;
}
this.breakOnDayChange = event.detail.value;
Polymer.dom(this.$.thumbnails).innerHTML = "";
this.appendItems(this.photos);
},
listeners: {
"scroll": "onScroll",
"iron-resize" : "onResize"
@ -269,6 +309,28 @@
this._loadPhotos(cursor.taken.toString().replace(/T.*/, "") + "_" + cursor.id, +1);
},
appendItems: function(photos) {
photos.forEach(function(photo) {
var thumbnail = document.createElement("photo-thumbnail");
thumbnail.item = photo;
thumbnail.width = this.calcWidth;
thumbnail.addEventListener("click", this._imageTap.bind(this));
if (this.breakOnDayChange) {
var datetime = (photo.taken || photo.modified || photo.added).replace(/T.*$/, ""),
dateBlock = this.querySelector("#date-" + datetime);
if (!dateBlock) {
dateBlock = document.createElement("div");
dateBlock.id = "date-" + datetime;
dateBlock.classList.add("date-line");
dateBlock.textContent = datetime;
Polymer.dom(this.$.thumbnails).appendChild(dateBlock);
}
}
Polymer.dom(this.$.thumbnails).appendChild(thumbnail);
}.bind(this));
},
_loadPhotos: function(start, dir, append) {
if (this.loading == true) {
return;
@ -321,23 +383,7 @@
this.base = "";
}
results.items.forEach(function(photo) {
var thumbnail = document.createElement("photo-thumbnail");
thumbnail.item = photo;
thumbnail.width = this.calcWidth;
thumbnail.addEventListener("click", this._imageTap.bind(this));
var datetime = (photo.taken || photo.modified || photo.added).replace(/T.*$/, ""),
dateBlock = this.querySelector("#date-" + datetime);
if (!dateBlock) {
dateBlock = document.createElement("div");
dateBlock.id = "date-" + datetime;
dateBlock.classList.add("date-line");
dateBlock.textContent = datetime;
Polymer.dom(this.$.thumbnails).appendChild(dateBlock);
}
Polymer.dom(this.$.thumbnails).appendChild(thumbnail);
}.bind(this));
this.appendItems(results.items);
if (append) {
this.photos = this.photos.concat(results.items);
@ -360,9 +406,9 @@
this.debounce("resize", function() {
var width = Math.max(this.$.placeholder.offsetWidth || 0, 200);
this.cols = Math.floor(this.clientWidth / width);
this.cols = Math.floor(this.$.thumbnails.clientWidth / width);
var calc = width + Math.floor((this.clientWidth % width) / this.cols);
var calc = width + Math.floor((this.$.thumbnails.clientWidth % width) / this.cols);
if (calc != this.calcWidth) {
this.calcWidth = calc;
}