Merge pull request #4 from opus1269/new

Add background setting. fix bug with 500px photo loadng. remove all preload code - all done by iron-image
opus1269 · Nov 13, 2015 · 0ab96ec · 0ab96ec
2 parents 2bb2224 + d96d2e7
commit 0ab96ec
Show file tree

Hide file tree

Showing 14 changed files with 226 additions and 207 deletions.
diff --git a/app/elements/elements.html b/app/elements/elements.html
@@ -14,6 +14,7 @@
 <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-button/paper-button.html">
 <link rel="import" href="../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../bower_components/paper-material/paper-material.html">
 <link rel="import" href="../bower_components/paper-menu/paper-menu.html">

diff --git a/app/elements/pages/settings-page.html b/app/elements/pages/settings-page.html
@@ -18,6 +18,7 @@
 <link rel="import" href="../setting-slider/setting-slider.html">
 <link rel="import" href="../setting-dropdown/setting-dropdown.html">
 <link rel="import" href="../setting-time/setting-time.html">
+<link rel="import" href="../setting-background/setting-background.html">
 
 <dom-module id="settings-page">
 	<template>
@@ -86,6 +87,10 @@
 		        <setting-toggle name="showPhotog"
 		                main-label="Show photographer label for photos you own"
 		                secondary-label="(Always shows in Frame mode)"
+		                disabled$="[[!enabled]]"></setting-toggle>
+						<setting-background name="background"
+		                main-label="Choose background style"
+		                secondary-label="Set the background for the slide show"
 		                noseparator
 		                disabled$="[[!enabled]]"></setting-toggle>
 					</div>
@@ -141,7 +146,7 @@
 		                main-label="Extension developer"
 		                secondary-label="Photos from the guy who wrote this"
 		                disabled$="[[!enabled]]"></setting-toggle>
-						<paper-item tabindex="-1">Click mouse to view the site for Flickr and 500px photos</paper-item>
+						<paper-item tabindex="-1">Click mouse to view the website for Flickr and 500px photos</paper-item>
 						<paper-item tabindex="-1">This product uses the Flickr API but is not endorsed or certified by Flickr</paper-item>
 					</div>
 				</iron-pages>

diff --git a/app/elements/setting-background/setting-background.html b/app/elements/setting-background/setting-background.html
@@ -0,0 +1,166 @@
+<!--
+@@license
+-->
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
+<link rel="import" href="../../bower_components/iron-localstorage/iron-localstorage.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="../../bower_components/iron-selector/iron-selector.html">
+<link rel="import" href="../../bower_components/iron-label/iron-label.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
+<link rel="import" href="../../bower_components/paper-ripple/paper-ripple.html">
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
+
+<dom-module id="setting-background">
+	<template>
+		<style include="shared-styles"></style>
+		<style>
+
+		:host {
+			display: block;
+			position: relative;
+		}
+
+		:host([disabled]) {
+			pointer-events: none;
+		}
+
+		:host paper-item {
+			display: block;
+			position: relative;
+			cursor: pointer;
+		}
+
+		:host([indent]) paper-item {
+			padding-left: 24px;
+		}
+
+		:host .container {
+			width: 640px;
+		}
+
+		:host .background {
+			width: 200px;
+			height: 112px;
+			border: 2px solid white;
+		}
+
+		:host .iron-selected {
+			border: 2px solid red;
+		}
+
+		:host .selected-background {
+			width: 100px;
+			height: 56px;
+		}
+
+		</style>
+
+		<paper-dialog id="dialog" modal entry-animation="scale-up-animation"
+			exit-animation="fade-out-animation">
+			<h2>Select background style</h2>
+			<iron-selector class="container horizontal layout wrap" attr-for-selected="id" selected="{{selected}}">
+				<div id="b1" class="background" style="background:linear-gradient(to bottom, #3a3a3a, #b5bdc8)"></div>
+				<div id="b2" class="background" style="background:linear-gradient(to bottom, #003973 10%, #E5E5BE 90%)"></div>
+				<div id="b3" class="background" style="background:linear-gradient(to top, #649173 10%, #DBD5A4 90%)"></div>
+				<div id="b4" class="background" style="background:radial-gradient(ellipse at center, #ebe9f9 0%, #ebe9f9 23%, #d8d0ef 50%, #cec7ec 51%, #ebe9f9 77%, #c1bfea 100%)"></div>
+				<div id="b5" class="background" style="background:radial-gradient(ellipse farthest-corner at 0px 0px , #fd5c6e 0%, rgba(0, 0, 255, 0) 50%, #0ce4e1 95%)"></div>
+				<div id="b6" class="background" style="background:black"></div>
+			</iron-selector>
+			<div class="buttons">
+				<paper-button dialog-dismiss>CANCEL</paper-button>
+				<paper-button dialog-confirm autofocus on-tap="_onOK">OK</paper-button>
+			</div>
+		</paper-dialog>
+
+		<div class="section-title setting-label" tabindex="-1" hidden$="[[!sectionTitle]]">{{sectionTitle}}</div>
+
+		<paper-item class="center horizontal layout" on-tap="_onTap">
+			<paper-item-body class="flex" two-line>
+				<div class="setting-label" hidden$="[[!mainLabel]]">{{mainLabel}}</div>
+				<div class="setting-label" secondary hidden$="[[!secondaryLabel]]">{{secondaryLabel}}</div>
+			</paper-item-body>
+			<div class="selected-background" style$="[[value]]"></div>
+			<paper-ripple center></paper-ripple>
+		</paper-item>
+		<hr hidden$="[[noseparator]]" />
+		<iron-localstorage name="{{name}}" value="{{value}}" on-iron-localstorage-load-empty="_init"></iron-localstorage>
+
+	</template>
+</dom-module>
+
+<script>
+'use-strict';
+
+Polymer({
+	is: 'setting-background',
+
+	hostAttributes: {
+		role: 'group',
+		tabIndex: -1
+	},
+
+	properties: {
+
+		name: {
+			type: String,
+			value: 'store'
+		},
+
+		selected: {
+			type: String,
+			value: 'b1',
+			notify: true
+		},
+
+		value: {
+			type: String,
+			value: 'background:linear-gradient(to bottom, #3a3a3a, #b5bdc8)',
+			notify: true
+		},
+
+		mainLabel: {
+			type: String,
+			value: ''
+		},
+
+		secondaryLabel: {
+			type: String,
+			value: ''
+		},
+
+		sectionTitle: {
+			type: String,
+			value: ''
+		},
+
+		disabled: {
+			type: Boolean,
+			value: false
+		},
+
+		noseparator: {
+			type: Boolean,
+			value: false
+		}
+
+	},
+
+	// initialize value if it is not in localstorage
+	_init: function() {
+		this.set('value', 'background:linear-gradient(to bottom, #3a3a3a, #b5bdc8)');
+	},
+
+	_onTap: function() {
+		this.$.dialog.open();
+	},
+
+	// save the currently selected background
+	_onOK: function() {
+		var el = document.getElementById(this.selected);
+		this.set('value','background:' + el.style.background);
+	}
+
+});
+</script>
diff --git a/app/manifest.json b/app/manifest.json
@@ -3,7 +3,7 @@
 	"name": "Photo Screen Saver",
 	"short_name": "Photo Screen Saver",
 	"description": "A screensaver with multiple photo sources",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"minimum_chrome_version": "38",
 	"icons": {
 		"19": "/images/icon_19.png",

diff --git a/app/scripts/background.js b/app/scripts/background.js
@@ -12,14 +12,24 @@ function initData() {
 	var oldVer = parseInt(localStorage.version,10);
 
 	// latest version
-	localStorage.version = '2';
+	localStorage.version = '3';
+
+	// Add the new version 3 values
+	if (!oldVer || (oldVer < 3)) {
+		localStorage.background = '"background:linear-gradient(to bottom, #3a3a3a, #b5bdc8)"';
+		// these not implemented yet
+		localStorage.useFlickr = 'true';
+		localStorage.useFlickrSelections = '[]';
+		localStorage.use500px = 'true';
+		localStorage.use500pxSelections = '[]';
+	}
 
 	// Add the new version 2 values
 	if (!oldVer || (oldVer < 2)) {
 		localStorage.allDisplays = 'false';
 		localStorage.activeStart = '"00:00"'; // 24 hr time
 		localStorage.activeStop = '"00:00"';	// 24 hr time
-		localStorage.allowSuspend = 'false';	// 24 hr time
+		localStorage.allowSuspend = 'false';
 		localStorage.showTime = '1'; // 12 hour format
 		localStorage.showPhotog = 'true';
 		localStorage.usePopular500px = 'false';
@@ -42,8 +52,8 @@ function initData() {
 		localStorage.useAuthors = 'false';
 		localStorage.useGoogle = 'true';
 		localStorage.albumSelections = '[]';
-		localStorage.isPreview = 'false'; // no longer used
-		localStorage.windowID = '-1';	// no longer used
+		//localStorage.isPreview = 'false'; // no longer used
+		//localStorage.windowID = '-1';	// no longer used
 	}
 
 	// remove unused variables
@@ -68,7 +78,7 @@ function setBadgeText() {
 	}
 }
 
-// return true is screensaver can be displayed
+// return true if screensaver can be displayed
 function isActive() {
 	var enabled = JSON.parse(localStorage.enabled);
 	var aStart = JSON.parse(localStorage.activeStart);
@@ -128,7 +138,7 @@ function processAlarms() {
 		chrome.alarms.clear('activeStop');
 	}
 
-	// Add daily alarm to update 500px and flickr photoS
+	// Add daily alarm to update 500px and flickr photos
 	chrome.alarms.get('updatePhotos', function(alarm) {
 		if (!alarm) {
 			chrome.alarms.create('updatePhotos', {
@@ -157,35 +167,35 @@ function processIdleTime() {
 function processUseAuthors() {
 	localStorage.removeItem('authorImages');
 	if (JSON.parse(localStorage.useAuthors)) {
-		gPhotos.loadAuthorImages(false);
+		gPhotos.loadAuthorImages();
 	}
 }
 
 function processUseChromecast() {
 	localStorage.removeItem('ccImages');
 	if (JSON.parse(localStorage.useChromecast)) {
-		chromeCast.loadImages(false);
+		chromeCast.loadImages();
 	}
 }
 
 function processUsePopular500px() {
 	localStorage.removeItem('popular500pxImages');
 	if (JSON.parse(localStorage.usePopular500px)) {
-		use500px.loadImages(use500px.TYPE_ENUM.popular, 'popular500pxImages', false);
+		use500px.loadImages('popular', 'popular500pxImages');
 	}
 }
 
 function processUseYesterday500px() {
 	localStorage.removeItem('yesterday500pxImages');
 	if (JSON.parse(localStorage.useYesterday500px)) {
-		use500px.loadImages(use500px.TYPE_ENUM.yesterday, 'yesterday500pxImages', false);
+		use500px.loadImages('fresh_yesterday', 'yesterday500pxImages');
 	}
 }
 
 function processUseInterestingFlickr() {
 	localStorage.removeItem('flickrInterestingImages');
 	if (JSON.parse(localStorage.useInterestingFlickr)) {
-		flickr.loadImages(flickr.TYPE_ENUM.interesting, false);
+		flickr.loadImages();
 	}
 }
 

diff --git a/app/scripts/chromecast.js b/app/scripts/chromecast.js
@@ -7,53 +7,22 @@ var chromeCast = (function() {
 
 	var ccImages;
 
-	// read chromecast.json and save to localStorage
-	function _loadChromecast(cb) {
-		var xhttp = new XMLHttpRequest();
-		xhttp.onreadystatechange = function() {
-			if (xhttp.readyState === 4 && xhttp.status === 200) {
-				ccImages = JSON.parse(xhttp.responseText);
-				for (var i = 0; i < ccImages.length; i++) {
-					ccImages[i].asp = 16 / 9;
-				}
-				localStorage.ccImages = JSON.stringify(ccImages);
-				cb();
-			}
-		};
-		xhttp.open('GET', '/assets/chromecast.json', true);
-		xhttp.send();
-	}
-
 	return {
 
-		// read chromecast.json and optionally preload the images
-		loadImages: function(preload) {
-
-			_loadChromecast(function() {
-				if (!preload) {
-					return;
-				}
-				var imgs = [], img;
-				var numImages = ccImages.length;
-
-				for (var i = 0; i < numImages; i++) {
-					img = new Image();
-
-					// cut out bad images
-					img.onerror = function() {
-						/*jshint validthis: true */
-						var ims = JSON.parse(localStorage.ccImages);
-						var ind = ims.map(function(e) {return e.url;}).indexOf(this.src);
-						if (ind >= 0) {
-							ims.splice(ind, 1);
-							localStorage.ccImages = JSON.stringify(ims);
-						}
-					};
-
-					img.src = ccImages[i].url;
-					imgs.push(img);
+		// read chromecast.json and save to localStorage
+		loadImages: function() {
+			var xhttp = new XMLHttpRequest();
+			xhttp.onreadystatechange = function() {
+				if (xhttp.readyState === 4 && xhttp.status === 200) {
+					ccImages = JSON.parse(xhttp.responseText);
+					for (var i = 0; i < ccImages.length; i++) {
+						ccImages[i].asp = 16 / 9;
+					}
+					localStorage.ccImages = JSON.stringify(ccImages);
 				}
-			});
+			};
+			xhttp.open('GET', '/assets/chromecast.json', true);
+			xhttp.send();
 		}
 	};
 })();