Skip to content
Browse files

first commit

  • Loading branch information...
0 parents commit fe2533d2652a61fe6b96dee406a750aea93b8b07 Paul Rouget committed Mar 9, 2011
274 demo.html
@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+
+<html>
+ <head>
+
+ <meta charset="utf8">
+ <title>Motivational poster</title>
+ <script src="main.js"></script>
+
+ <script>
+ var targetOrigin = '*';
+
+ window.addEventListener("load", function() {
+ window.parent.postMessage('loaded', targetOrigin);
+ }, true);
+
+ window.addEventListener("message", function(e) {
+ if ("stop_demo" == e.data) {
+ window.parent.postMessage('finished_exit', targetOrigin);
+ }
+ }, true);
+ </script>
+
+
+ <style>
+ html {
+ height: 100%;
+ background-color: black;
+ background: url(imgs/bg_home.jpg);
+ background: -moz-element(#background), url(imgs/bg_home.jpg);
+ background-size: 100% 100%, 100% 100%;
+ background-repeat: no-repeat, no-repeat;
+ font-family: "Times New Roman";
+ }
+
+ #hiddenbag {
+ height: 0; overflow: hidden;
+ }
+
+ #poster.dragging {
+ -moz-transform: scale(1.1);
+ }
+
+ #poster { display: block; }
+ .editor #posterView { display: none; }
+
+ .viewer #poster { display: none; }
+ .viewer #posterView { display: block; }
+
+ #share:before {
+ content: "Share:";
+ display: block;
+ font-size: 20px;
+ margin-bottom: 5px;
+ }
+ #share {
+ position: absolute;
+ background-color: rgba(0, 0, 0, 0.8);
+ border: 2px solid white;
+ top: 20px;
+ right: 100px;
+ padding: 10px;
+ display: none;
+ color: white;
+ width: 100px;
+ }
+
+ #share button {
+ border: 2px solid grey;
+ background-color: black;
+ color: white;
+ cursor: pointer;
+ }
+
+ #share p {
+ display: inline;
+ cursor: pointer;
+ }
+
+ .viewer #share {
+ display: block;
+ }
+
+ #poster, #posterView {
+ margin: auto;
+ margin-top: 50px;
+ width: 640px;
+ max-width: 640px;
+ -moz-transition-duration: 0.5s;
+ box-shadow: 0px 0px 10px black;
+ background-color: black;
+ min-width: 100px;
+ min-height: 100px;
+ }
+
+ #veil {
+ position: fixed;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background-color: rgba(0, 0, 0, 0.8);
+ opacity: 0;
+ -moz-transition-duration: 0.5s;
+ pointer-events: none;
+ }
+
+ .showveil #veil {
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ #status {
+ width: 100%;
+ margin-top: 250px;
+ text-align: center;
+ font-size: 50px;
+ color: white;
+ }
+ #veil img {
+ display: block;
+ margin: auto;
+ }
+
+
+
+ .showEditor #editor {
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ #editor {
+ position: absolute;
+ background-color: rgba(0, 0, 0, 0.8);
+ opacity: 0;
+ pointer-events: none;
+ border: 2px solid white;
+ top: 20px;
+ left: 10px;
+ padding: 20px;
+ }
+
+ #editor input {
+ font-family: "Times New Roman";
+ background-color: rgba(0, 0, 0, 1);
+ color: white;
+ text-align: center;
+ border: 1px dashed white;
+ vertical-align: middle;
+ height: 33px;
+ }
+
+ #editor img {
+ vertical-align: middle;
+ margin-right: 15px;
+ }
+
+ #editor button {
+ background-color: transparent;
+ border: none;
+ margin-top: 20px;
+ float: right;
+ cursor: pointer;
+ }
+
+ #title {
+ font-size: 30px;
+ width: 250px;
+ text-transform: uppercase;
+ }
+
+ #comment {
+ font-size: 15px;
+ width: 250px;
+ }
+
+ .viewer #tb, .showEditor #tb {
+ display: none;
+ }
+
+ #tb {
+ width: 620px;
+ margin: auto;
+ margin-top: 20px;
+
+ box-shadow: 0px 0px 10px black;
+ background-color: black;
+ color: white;
+ padding-top: 10px;
+ padding-right: 10px;
+ padding-left: 10px;
+ font-size: 18px;
+ }
+ #tb * { vertical-align: top; display: inline;}
+ #tb:before {
+ content: url("imgs/tb.png");
+ vertical-align: top;
+ margin-right: 10px;
+ }
+ #tb img { height: 23px; cursor: pointer;}
+ #tb > div {position: relative;}
+ #tb .tb { height: 100px; width: auto; position: absolute; top: -120px; left: -200%; border: 5px solid black; box-shadow: 0px 0px 10px white; opacity: 0; pointer-events: none; -moz-transition-duration: 0.4s;}
+ #tb > div:hover > .tb {opacity: 1;}
+
+ #credits {
+ position: fixed;
+ bottom: 10px; right: 10px;
+ width: 120px;
+ font-size: 14px;
+ font-family: Arial;
+ }
+ #credits a {
+ color: black;
+ text-decoration: none;
+ }
+ /* Mozilla Badge position override */
+ a#gobackbutton, a#gobackbutton:hover { top: 230px; }
+ </style>
+
+ </head>
+
+ <body onload="init()" class="showveil">
+ <canvas id="poster" width="5" height="4"></canvas>
+ <div id="tb"><strong>Or</strong> select <em>one of these:</em>
+ <div><img class="tb" src="pictures/9.jpg"><img src="pictures/9.jpg"></div>
+ <div><img class="tb" src="pictures/1.jpg"><img src="pictures/1.jpg"></div>
+ <div><img class="tb" src="pictures/4.jpg"><img src="pictures/4.jpg"></div>
+ <div><img class="tb" src="pictures/5.jpg"><img src="pictures/5.jpg"></div>
+ <div><img class="tb" src="pictures/6.jpg"><img src="pictures/6.jpg"></div>
+ <div><img class="tb" src="pictures/11.jpg"><img src="pictures/11.jpg"></div>
+ <div><img class="tb" src="pictures/10.jpg"><img src="pictures/10.jpg"></div>
+ <div><img class="tb" src="pictures/8.jpg"><img src="pictures/8.jpg"></div>
+ <div><img class="tb" src="pictures/3.jpg"><img src="pictures/3.jpg"></div>
+ <div><img class="tb" src="pictures/2.jpg"><img src="pictures/2.jpg"></div>
+ <div><img class="tb" src="pictures/7.jpg"><img src="pictures/7.jpg"></div>
+ <div><img class="tb" src="pictures/12.jpg"><img src="pictures/12.jpg"></div>
+ </div>
+ <img id="posterView">
+
+ <div id="hiddenbag">
+ <img id="dropbox" src="imgs/placeholder.jpg">
+ <img id="placeholder">
+ <canvas id="background"></canvas>
+ <input type="file" id="filepicker" onchange="processFile(this.files[0])">
+ </div>
+
+ <div id="veil">
+ <p id="status">loading...</p>
+ <img src="imgs/loader.gif">
+ </div>
+
+ <div id="editor">
+ <p>
+ <img src="imgs/title_icon.png"><input id="title" placeholder="Title">
+ </p>
+ <p>
+ <img src="imgs/subtitle_icon.png"><input id="comment" placeholder="Comment">
+ </p>
+ <button onclick="upload()"><img src="imgs/valid.png"</button>
+ <button onclick="cancel()"><img src="imgs/cancel.png"</button>
+ </div>
+
+ <div id="share">
+ <p id="imgur" title="Imgur link" onclick="new_window('http://imgur.com/' + document.location.hash.split('#')[1], 800, 800)"><img src="imgs/imgur_icon.png"></p>
+ <p id="twitter" title="Tweet This" onclick="new_window('http://twitter.com/share?url=' + encodeURIComponent(document.location), 550, 425)"><img src="imgs/twitt_icon.png"></p>
+ <p id="facebook" title="Share This on Facebook" onclick="new_window('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(document.location), 755, 425)"><img src="imgs/fb_icon.png"></p>
+ <p id="reddit" title="Submit This to Reddit" onclick="new_window('http://reddit.com/submit?url=' + encodeURIComponent(document.location), 900, 680)"><img src="imgs/reddit_icon.png"></p>
+ <button onclick="initEditor()">Create your own</button>
+ </div>
+
+ <div id="credits">
+ <a href="http://imgur.com">Powered by:<img src="imgs/imgur_small.png"></a>
+ </div>
+ <script src="../../shared/mozilla-badge.js" defer></script>
+ </body>
+</html>
BIN imgs/bg_home.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/cancel.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/fb_icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/imgur.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/imgur_icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/imgur_small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/loader.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/placeholder.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/reddit_icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/subtitle_icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/tb.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/title_icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/twitt_icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN imgs/valid.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
280 main.js
@@ -0,0 +1,280 @@
+var MAX_WIDTH = 800;
+var MAX_HEIGHT = 600;
+var IMG_COUNT = 12;
+
+var frameSize, imgWidth, imgHeight, poster;
+var targetOrigin = "*";
+
+function addFrame(img) {
+ var width, height;
+
+ if (img) {
+ width = img.width;
+ height = img.height;
+
+ if (width > height) {
+ if (width > MAX_WIDTH) {
+ height *= MAX_WIDTH / width;
+ width = MAX_WIDTH;
+ }
+ } else {
+ if (height > MAX_HEIGHT) {
+ width *= MAX_HEIGHT / height;
+ height = MAX_HEIGHT;
+ }
+ }
+ } else {
+ width = MAX_WIDTH;
+ height = MAX_HEIGHT;
+ }
+
+ frameSize = Math.round(width / 14);
+
+ poster.width = width + 2 * frameSize;
+ poster.height = height + 4 * frameSize;
+ poster.style.width = poster.width + "px";
+
+ var ctx = poster.getContext("2d");
+
+ ctx.fillStyle = "black";
+ ctx.lineWidth = 4;
+ ctx.strokeStyle = "white";
+ ctx.fillRect(0, 0, poster.width, poster.height);
+ ctx.drawImage(img, frameSize, frameSize, width, height);
+ ctx.strokeRect(frameSize - 8, frameSize - 8, width + 16, height + 16);
+
+ frameSize = frameSize;
+ imgWidth = width;
+ imgHeight = height;
+
+ document.getElementById("title").value = "";
+ document.getElementById("comment").value = "";
+}
+
+function updateText() {
+ var title = document.getElementById("title").value;
+ var comment = document.getElementById("comment").value;
+ drawText(title, comment);
+}
+
+function drawText(title, comment) {
+ title = title.toUpperCase();
+
+ var ctx = poster.getContext("2d");
+
+ ctx.fillStyle = "black";
+ ctx.fillRect(0, poster.height - 3 * frameSize, poster.width, 3 * frameSize);
+
+ ctx.strokeStyle = "white";
+ ctx.strokeRect(frameSize - 8, frameSize - 8, imgWidth + 16, imgHeight + 16);
+
+ ctx.fillStyle = "white";
+ ctx.textAlign = "center";
+ ctx.textBaseline = "middle";
+ ctx.font = Math.round(1.8 * frameSize) + "px Times New Roman";
+
+ ctx.fillText(title, poster.width / 2, poster.height - 1.8 * frameSize, imgWidth);
+
+ ctx.font = Math.round(1.4 * frameSize / 2) + "px Times New Roman";
+ ctx.fillText(comment, poster.width / 2, poster.height - 0.7 * frameSize, imgWidth);
+}
+
+function init() {
+
+ stoploading();
+
+ if (document.location.hash == "") {
+ initEditor();
+ } else {
+ initViewer(document.location.hash.split("#")[1]);
+ }
+
+ var imgs = document.querySelectorAll("#tb img:not(.tb)");
+ for (var i = 0; i < imgs.length; i++) {
+ imgs[i].onclick = (function(i) {
+ return function() {
+ var url = imgs[i].src;
+
+ var placeholder = document.getElementById("placeholder");
+ placeholder.src = url;
+ placeholder.onload = function() {
+ addFrame(placeholder);
+
+ var bg = document.getElementById("background");
+ bg.width = 5; bg.height = 5;
+ bg.getContext("2d").drawImage(placeholder, 0, 0, bg.width, bg.height);
+
+ stoploading();
+ document.body.classList.add("showEditor");
+ }
+ }
+ })(i);
+ }
+}
+function cancel() {
+ document.body.classList.remove("showEditor");
+ initEditor();
+}
+
+function initViewer(url) {
+ document.body.classList.add("viewer");
+ document.body.classList.remove("editor");
+ var url = "http://i.imgur.com/" + url + ".png";
+ var pv = document.getElementById("posterView");
+ pv.src = url;
+
+ pv.onload = function() {
+ var bg = document.getElementById("background");
+ bg.width = 5; bg.height = 5;
+ bg.getContext("2d").drawImage(pv, 0, 0, bg.width, bg.height);
+ window.parent.postMessage('show_exit_ui', targetOrigin);
+ }
+}
+
+function initEditor() {
+ /* Reset the bg Canvas */
+ document.getElementById("background").width = 1;
+ document.getElementById("background").width = 5;
+
+ document.location.hash = "";
+ document.body.classList.add("editor");
+ document.body.classList.remove("viewer");
+ poster = document.getElementById("poster");
+
+ addFrame(document.getElementById("dropbox"));
+ drawText("Drop an image", "It's for your own good");
+
+ poster.addEventListener("dragover", function(e) { e.preventDefault(); }, true);
+ poster.addEventListener("dragleave", function(e) { poster.classList.remove("dragging"); }, true);
+ poster.addEventListener("dragenter", function(e) { e.preventDefault(); poster.classList.add("dragging"); }, false);
+
+ poster.onclick = function(e) {
+ document.getElementById("filepicker").click();
+ }
+
+ poster.addEventListener("drop", function(e) {
+ e.preventDefault();
+ poster.classList.remove("dragging");
+ if (e.dataTransfer.files.length < 1) {
+ var url = e.dataTransfer.getData("URL");
+ if (url) loadImage(url);
+ return;
+ }
+ var file = e.dataTransfer.files[0];
+ processFile(file);
+ }, false);
+
+ var title = document.getElementById("title");
+ var comment = document.getElementById("comment");
+
+ title.addEventListener("input", updateText, true);
+ comment.addEventListener("input", updateText, true);
+}
+
+function processFile(file) {
+ var imageType = /image.*/;
+ if (!file.type.match(imageType)) return;
+ loading("resizing");
+ var placeholder = document.getElementById("placeholder");
+ setTimeout(function() {
+
+ var setupURL = function(url) {
+ placeholder.src = url;
+ placeholder.onload = function() {
+ addFrame(placeholder);
+
+ var bg = document.getElementById("background");
+ bg.width = 5; bg.height = 5;
+ bg.getContext("2d").drawImage(placeholder, 0, 0, bg.width, bg.height);
+
+ stoploading();
+ document.body.classList.add("showEditor");
+ }
+ }
+
+
+ if ("URL" in window) {
+ var url = window.URL.createObjectURL(file);
+ setupURL(url);
+ } else {
+ var reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onload = function(e) {
+ setupURL(e.target.result);
+ }
+ }
+ }, 1000);
+}
+
+function upload() {
+ loading("uploading");
+ document.body.classList.remove("showEditor");
+
+ var fd = new FormData();
+ var toSend;
+ if ("mozGetAsFile" in poster) {
+ toSend = poster.mozGetAsFile("foo.png");
+ } else {
+ toSend = poster.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/, "");
+ }
+ fd.append("image", toSend)
+ fd.append("key", "6528448c258cff474ca9701c5bab6927");
+ var xhr = new XMLHttpRequest();
+ xhr.open("POST", "http://api.imgur.com/2/upload.json");
+ xhr.addEventListener("error", function() {
+ loading("Upload Error :(");
+ setTimeout(stoploading, 2000);
+ }, false);
+ xhr.addEventListener("load", function() {
+ try {
+ var links = JSON.parse(xhr.responseText).upload.links;
+ var hash = links.original;
+ hash = hash.replace("http://imgur.com/", "");
+ hash = hash.replace(".png", "");
+ document.location.hash = "#" + hash;
+ initViewer(hash);
+ stoploading();
+ } catch(e) {
+ loading("Upload Error :" + e);
+ setTimeout(stoploading, 2000);
+ }
+ }, false);
+ xhr.send(fd);
+}
+
+function loading(msg) {
+ document.body.classList.add("showveil");
+ document.getElementById("status").innerHTML = msg;
+}
+function stoploading() {
+ document.body.classList.remove("showveil");
+}
+
+function getARandomImage() {
+ var idx = Math.floor((Math.random() * 12)) + 1;
+ var url = "pictures/" + idx + ".jpg";
+ loadImage(url);
+}
+
+function loadImage(url) {
+ var placeholder = document.getElementById("placeholder");
+ loading("loading");
+ setTimeout(function() {
+ placeholder.src = url;
+ placeholder.onerror = function() {
+ stoploading();
+ }
+ placeholder.onload = function() {
+ addFrame(placeholder);
+
+ var bg = document.getElementById("background");
+ bg.width = 5; bg.height = 5;
+ bg.getContext("2d").drawImage(placeholder, 0, 0, bg.width, bg.height);
+
+ stoploading();
+ document.body.classList.add("showEditor");
+ }
+ }, 1000);
+}
+
+function new_window(url, width, height) { window.open(url, "t", "scrollbars=yes,toolbar=0,resizable=1,status=0,width=" + width + ",height=" + height); }
BIN pictures/1.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN pictures/10.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN pictures/11.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN pictures/12.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN pictures/2.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN pictures/3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN pictures/4.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN pictures/5.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN pictures/6.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN pictures/7.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN pictures/8.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN pictures/9.jpg
Diff not rendered.
3 pictures/foo.sh
@@ -0,0 +1,3 @@
+#!/bin/sh
+
+convert $1 -pointsize $3 -undercolor white -draw "gravity SouthEast text 5,5 '$2'" $1
BIN screenshot.jpg
Diff not rendered.

0 comments on commit fe2533d

Please sign in to comment.
Something went wrong with that request. Please try again.