magic-mirror/mmm-unsplash
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added support for specifying image div id

Browse Source 
This enables multiple Unsplash modules to load and function side-by-side which is necessary when you want, for example, to use a profile switcher to display different collections at different times.

Fixes #1
This commit is contained in:
Chris Pickett
2019-01-07 22:41:11 -06:00
committed by Chris Pickett
parent 98fdcb3e53
commit 0845c6ea90
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
MMM-Unsplash.js
View File

@ -6,7 +6,8 @@ Module.register("MMM-Unsplash", {
height: 1920, height: 1920,
orientation: "portrait", orientation: "portrait",
apiKey: "", apiKey: "",
updateInterval: 1800 updateInterval: 1800,
divName: "mmm-unsplash-placeholder"
}, },
start: function() { start: function() {
@ -27,16 +28,16 @@ Module.register("MMM-Unsplash", {
req.addEventListener("load", function() { req.addEventListener("load", function() {
if (this.status == 200) { if (this.status == 200) {
var obj = JSON.parse(this.responseText) var obj = JSON.parse(this.responseText)
var img1 = document.getElementById("mmm-unsplash-placeholder1") var img1 = document.getElementById(self.config.divName + "1")
var img2 = document.getElementById("mmm-unsplash-placeholder2") var img2 = document.getElementById(self.config.divName + "2")
img1.addEventListener("load", function() { img1.addEventListener("load", function() {
fade(img1, self.config.opacity, function() { fade(img1, self.config.opacity, function() {
img1.id = "mmm-unsplash-placeholder2" img1.id = self.config.divName + "2"
}) })
fade(img2, 0, function() { fade(img2, 0, function() {
img2.id = "mmm-unsplash-placeholder1" img2.id = self.config.divName + "1"
}) })
}) })
@ -56,7 +57,7 @@ Module.register("MMM-Unsplash", {
getDom: function() { getDom: function() {
var wrapper = document.createElement("div") var wrapper = document.createElement("div")
wrapper.innerHTML = "<img id=\"mmm-unsplash-placeholder1\" style=\"opacity: 0; position: absolute; top: 0\" /><img id=\"mmm-unsplash-placeholder2\" style=\"opacity: 0; position: absolute; top: 0\" />" wrapper.innerHTML = "<img id=\"" + this.config.divName + "1\" style=\"opacity: 0; position: absolute; top: 0\" /><img id=\"" + this.config.divName + "2\" style=\"opacity: 0; position: absolute; top: 0\" />"
return wrapper return wrapper
} }
}) })