Last active
October 1, 2019 20:55
-
-
Save hagb4rd/bf6f2b842a19d58179f58b46a5ae4660 to your computer and use it in GitHub Desktop.
igallery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var gallery = (function(Frame, Display) { | |
var imageQueue, list=[]; | |
var options = { | |
zoom: 3, | |
animation: { | |
duration: 20000, | |
easing: "ease-out", | |
iterations: 1 | |
}, | |
restTime: 20000 | |
}; | |
var fetchImage = (src) => { | |
return new Promise((resolve, reject) => { | |
if (src && src instanceof Image) { | |
resolve(src); | |
} else if (src) { | |
var img = new Image(); | |
img.addEventListener("load", () => resolve(img)); | |
img.addEventListener("error", (e) => reject(e)); | |
img.src = src; | |
} else { | |
reject(new TypeError("missing Argument")); | |
}; | |
}); | |
}; | |
var rand = (...v) => { if(v.length==1) v.push(0); var min=Math.min.apply(null,v); var max=Math.max.apply(null,v); return Math.floor(Math.random()*(max-min) + min) }; | |
var startAnimation = (url) => { | |
return new Promise((resolve, reject) => { | |
fetchImage(url || Display.src).then((img) => { | |
Display.src = img.src; | |
var scale = Frame.clientWidth / Display.naturalWidth; | |
var keyframeB = { | |
position: 'absolute', | |
top: '50%', | |
left: '50%', | |
transform: 'translate(-50%, -50%) scale(' + String((scale).toFixed(2)) + ')' | |
}; | |
var keyframeA = { | |
position: 'absolute', | |
top: rand(30,70) +'%', | |
left: rand(30,70) +'%', | |
transform: 'translate(-50%, -50%) scale(' + String((options.zoom * scale).toFixed(2)) + ')' | |
}; | |
Display.style.transform = keyframeB.transform; | |
var animation = Display.animate([keyframeA, keyframeB], options.animation); | |
animation.onfinish = () => { | |
var timeout = setTimeout(() => { | |
resolve(); | |
}, options.restTime); | |
}; | |
}); | |
}); | |
}; | |
var add = (urls) => { | |
if (urls && urls.length) { | |
urls.forEach(url=>list.push(url)); | |
}; | |
}; | |
var enqueue = (...imageList) => { | |
var p = imageList.reduce((prev, next) => prev.then(() => startAnimation(next)), imageQueue || Promise.resolve()) | |
imageQueue = p; | |
return p; | |
}; | |
return { | |
options: options, | |
list: list, | |
add: add, | |
enqueue: enqueue, | |
startAnimation: startAnimation, | |
fetchImage: fetchImage | |
} | |
})(document.querySelector("#frame"),document.querySelector("#display")); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Imgur = (function() { | |
const runkitUrl = "https://imgur-client-kwc5iikzmzbo.runkit.sh"; | |
const baseAPIUrl = "https://api.imgur.com/3"; | |
class Imgur { | |
constructor(secret) { | |
this.secret = secret||""; | |
this.Authorization = null; | |
} | |
runkitAlbum(albumId) { | |
albumId=albumId||"sn9W2"; | |
return fetch(`${runkitUrl}/?secret=${this.secret}&album=${albumId}`); | |
} | |
getImages(albumId) { | |
if(albumId) { | |
return this.API(`/album/${albumId}/images`) | |
.then(res=>res.data); | |
} else { | |
return this.API('/account/me/images') | |
.then(res=>res.data); | |
} | |
} | |
getAlbums(username, page) { | |
username = username||"me"; | |
if(page) { | |
var p=`/${page}`; | |
} else { | |
var p=""; | |
}; | |
return this.API(`/account/${username}/albums${p}`) | |
} | |
async API(uri, body) { | |
var init = { | |
method: "GET", | |
headers: await this.getHeaders() | |
}; | |
if(body) { | |
init.method = "POST"; | |
init.body = body; | |
}; | |
return fetch(baseAPIUrl + uri, init) | |
.then(res => res.json()) | |
} | |
async getHeaders() { | |
var headers = new Headers(); | |
var bearer = await this.getAuthorization(); | |
headers.append("Authorization", bearer); | |
return headers; | |
} | |
getAuthorization() { | |
if(this.Authorization) { | |
return Promise.resolve(this.Authorization); | |
} else { | |
return fetch(`${runkitUrl}/?secret=${this.secret}&album=sn9W2`) | |
.then(res => res.json()) | |
.then(res => res.request.headers.Authorization) | |
.then(res => (this.Authorization=res, res)); | |
} | |
} | |
}; | |
return Imgur; | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<style> | |
body { | |
color: black; | |
background: grey; | |
} | |
#Frame { | |
background: white; | |
width: 90%; | |
height: 90%; | |
overflow: hidden; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
#Display { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
</style> | |
</head> | |
<body> | |
<div id="frame"> | |
<img id="display" src="http://s0.dili360.com/www/images/loading-2.gif" /> | |
</div> | |
<script src="imgur.runkit.js"></script> | |
<script src="image.gallery.js"></script> | |
<script> | |
var imgur = (function(imgurClient){ | |
var imageMap = new Map(); | |
var albumMap = new Map(); | |
var getAlbums = async() => { | |
var res = await imgurClient.getAlbums(); | |
console.log("Albums", res); | |
var albums = []; | |
res.data.forEach(album=>{ | |
albumMap.set(album.id, album); | |
albums.push(album); | |
}); | |
return albums; | |
}; | |
var getImages = async() => { | |
var res = await imgurClient.getImages(); | |
var imageUrls = []; | |
res.forEach(i=>{ | |
imageMap.set(i.id, i); | |
imageUrls.push(i.link); | |
}); | |
return imageUrls; | |
}; | |
return { | |
client: imgurClient, | |
imageMap: imageMap, | |
albumMap: albumMap, | |
getAlbums: getAlbums, | |
getImages: getImages | |
}; | |
})(new Imgur("asd23")); | |
var test = async() => { | |
gallery.enqueue( | |
"https://media.giphy.com/media/3ohk2FsuYF0HBXnJ4Y/giphy.gif", | |
"https://media.giphy.com/media/3og0IyhQ7KdGu1JzPO/giphy.gif", | |
"https://media.giphy.com/media/l0HlxYp0hiXHTRvyw/giphy.gif" | |
); | |
var links = await imgur.getImages(); | |
gallery.add(links); | |
}; | |
test(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment