hagb4rd/image.gallery.js

## image.gallery.js
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"));

## imgur.runkit.js
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;
})();

## index.html
<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>
	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"));
	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;
	})();
	<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>