Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

first commit

  • Loading branch information...
commit fe2533d2652a61fe6b96dee406a750aea93b8b07 0 parents
Paul Rouget authored
274 demo.html
... ... @@ -0,0 +1,274 @@
  1 +<!DOCTYPE html>
  2 +
  3 +<html>
  4 + <head>
  5 +
  6 + <meta charset="utf8">
  7 + <title>Motivational poster</title>
  8 + <script src="main.js"></script>
  9 +
  10 + <script>
  11 + var targetOrigin = '*';
  12 +
  13 + window.addEventListener("load", function() {
  14 + window.parent.postMessage('loaded', targetOrigin);
  15 + }, true);
  16 +
  17 + window.addEventListener("message", function(e) {
  18 + if ("stop_demo" == e.data) {
  19 + window.parent.postMessage('finished_exit', targetOrigin);
  20 + }
  21 + }, true);
  22 + </script>
  23 +
  24 +
  25 + <style>
  26 + html {
  27 + height: 100%;
  28 + background-color: black;
  29 + background: url(imgs/bg_home.jpg);
  30 + background: -moz-element(#background), url(imgs/bg_home.jpg);
  31 + background-size: 100% 100%, 100% 100%;
  32 + background-repeat: no-repeat, no-repeat;
  33 + font-family: "Times New Roman";
  34 + }
  35 +
  36 + #hiddenbag {
  37 + height: 0; overflow: hidden;
  38 + }
  39 +
  40 + #poster.dragging {
  41 + -moz-transform: scale(1.1);
  42 + }
  43 +
  44 + #poster { display: block; }
  45 + .editor #posterView { display: none; }
  46 +
  47 + .viewer #poster { display: none; }
  48 + .viewer #posterView { display: block; }
  49 +
  50 + #share:before {
  51 + content: "Share:";
  52 + display: block;
  53 + font-size: 20px;
  54 + margin-bottom: 5px;
  55 + }
  56 + #share {
  57 + position: absolute;
  58 + background-color: rgba(0, 0, 0, 0.8);
  59 + border: 2px solid white;
  60 + top: 20px;
  61 + right: 100px;
  62 + padding: 10px;
  63 + display: none;
  64 + color: white;
  65 + width: 100px;
  66 + }
  67 +
  68 + #share button {
  69 + border: 2px solid grey;
  70 + background-color: black;
  71 + color: white;
  72 + cursor: pointer;
  73 + }
  74 +
  75 + #share p {
  76 + display: inline;
  77 + cursor: pointer;
  78 + }
  79 +
  80 + .viewer #share {
  81 + display: block;
  82 + }
  83 +
  84 + #poster, #posterView {
  85 + margin: auto;
  86 + margin-top: 50px;
  87 + width: 640px;
  88 + max-width: 640px;
  89 + -moz-transition-duration: 0.5s;
  90 + box-shadow: 0px 0px 10px black;
  91 + background-color: black;
  92 + min-width: 100px;
  93 + min-height: 100px;
  94 + }
  95 +
  96 + #veil {
  97 + position: fixed;
  98 + top: 0; left: 0;
  99 + width: 100%; height: 100%;
  100 + background-color: rgba(0, 0, 0, 0.8);
  101 + opacity: 0;
  102 + -moz-transition-duration: 0.5s;
  103 + pointer-events: none;
  104 + }
  105 +
  106 + .showveil #veil {
  107 + opacity: 1;
  108 + pointer-events: auto;
  109 + }
  110 +
  111 + #status {
  112 + width: 100%;
  113 + margin-top: 250px;
  114 + text-align: center;
  115 + font-size: 50px;
  116 + color: white;
  117 + }
  118 + #veil img {
  119 + display: block;
  120 + margin: auto;
  121 + }
  122 +
  123 +
  124 +
  125 + .showEditor #editor {
  126 + opacity: 1;
  127 + pointer-events: auto;
  128 + }
  129 +
  130 + #editor {
  131 + position: absolute;
  132 + background-color: rgba(0, 0, 0, 0.8);
  133 + opacity: 0;
  134 + pointer-events: none;
  135 + border: 2px solid white;
  136 + top: 20px;
  137 + left: 10px;
  138 + padding: 20px;
  139 + }
  140 +
  141 + #editor input {
  142 + font-family: "Times New Roman";
  143 + background-color: rgba(0, 0, 0, 1);
  144 + color: white;
  145 + text-align: center;
  146 + border: 1px dashed white;
  147 + vertical-align: middle;
  148 + height: 33px;
  149 + }
  150 +
  151 + #editor img {
  152 + vertical-align: middle;
  153 + margin-right: 15px;
  154 + }
  155 +
  156 + #editor button {
  157 + background-color: transparent;
  158 + border: none;
  159 + margin-top: 20px;
  160 + float: right;
  161 + cursor: pointer;
  162 + }
  163 +
  164 + #title {
  165 + font-size: 30px;
  166 + width: 250px;
  167 + text-transform: uppercase;
  168 + }
  169 +
  170 + #comment {
  171 + font-size: 15px;
  172 + width: 250px;
  173 + }
  174 +
  175 + .viewer #tb, .showEditor #tb {
  176 + display: none;
  177 + }
  178 +
  179 + #tb {
  180 + width: 620px;
  181 + margin: auto;
  182 + margin-top: 20px;
  183 +
  184 + box-shadow: 0px 0px 10px black;
  185 + background-color: black;
  186 + color: white;
  187 + padding-top: 10px;
  188 + padding-right: 10px;
  189 + padding-left: 10px;
  190 + font-size: 18px;
  191 + }
  192 + #tb * { vertical-align: top; display: inline;}
  193 + #tb:before {
  194 + content: url("imgs/tb.png");
  195 + vertical-align: top;
  196 + margin-right: 10px;
  197 + }
  198 + #tb img { height: 23px; cursor: pointer;}
  199 + #tb > div {position: relative;}
  200 + #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;}
  201 + #tb > div:hover > .tb {opacity: 1;}
  202 +
  203 + #credits {
  204 + position: fixed;
  205 + bottom: 10px; right: 10px;
  206 + width: 120px;
  207 + font-size: 14px;
  208 + font-family: Arial;
  209 + }
  210 + #credits a {
  211 + color: black;
  212 + text-decoration: none;
  213 + }
  214 + /* Mozilla Badge position override */
  215 + a#gobackbutton, a#gobackbutton:hover { top: 230px; }
  216 + </style>
  217 +
  218 + </head>
  219 +
  220 + <body onload="init()" class="showveil">
  221 + <canvas id="poster" width="5" height="4"></canvas>
  222 + <div id="tb"><strong>Or</strong> select <em>one of these:</em>
  223 + <div><img class="tb" src="pictures/9.jpg"><img src="pictures/9.jpg"></div>
  224 + <div><img class="tb" src="pictures/1.jpg"><img src="pictures/1.jpg"></div>
  225 + <div><img class="tb" src="pictures/4.jpg"><img src="pictures/4.jpg"></div>
  226 + <div><img class="tb" src="pictures/5.jpg"><img src="pictures/5.jpg"></div>
  227 + <div><img class="tb" src="pictures/6.jpg"><img src="pictures/6.jpg"></div>
  228 + <div><img class="tb" src="pictures/11.jpg"><img src="pictures/11.jpg"></div>
  229 + <div><img class="tb" src="pictures/10.jpg"><img src="pictures/10.jpg"></div>
  230 + <div><img class="tb" src="pictures/8.jpg"><img src="pictures/8.jpg"></div>
  231 + <div><img class="tb" src="pictures/3.jpg"><img src="pictures/3.jpg"></div>
  232 + <div><img class="tb" src="pictures/2.jpg"><img src="pictures/2.jpg"></div>
  233 + <div><img class="tb" src="pictures/7.jpg"><img src="pictures/7.jpg"></div>
  234 + <div><img class="tb" src="pictures/12.jpg"><img src="pictures/12.jpg"></div>
  235 + </div>
  236 + <img id="posterView">
  237 +
  238 + <div id="hiddenbag">
  239 + <img id="dropbox" src="imgs/placeholder.jpg">
  240 + <img id="placeholder">
  241 + <canvas id="background"></canvas>
  242 + <input type="file" id="filepicker" onchange="processFile(this.files[0])">
  243 + </div>
  244 +
  245 + <div id="veil">
  246 + <p id="status">loading...</p>
  247 + <img src="imgs/loader.gif">
  248 + </div>
  249 +
  250 + <div id="editor">
  251 + <p>
  252 + <img src="imgs/title_icon.png"><input id="title" placeholder="Title">
  253 + </p>
  254 + <p>
  255 + <img src="imgs/subtitle_icon.png"><input id="comment" placeholder="Comment">
  256 + </p>
  257 + <button onclick="upload()"><img src="imgs/valid.png"</button>
  258 + <button onclick="cancel()"><img src="imgs/cancel.png"</button>
  259 + </div>
  260 +
  261 + <div id="share">
  262 + <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>
  263 + <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>
  264 + <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>
  265 + <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>
  266 + <button onclick="initEditor()">Create your own</button>
  267 + </div>
  268 +
  269 + <div id="credits">
  270 + <a href="http://imgur.com">Powered by:<img src="imgs/imgur_small.png"></a>
  271 + </div>
  272 + <script src="../../shared/mozilla-badge.js" defer></script>
  273 + </body>
  274 +</html>
BIN  imgs/bg_home.jpg
BIN  imgs/cancel.png
BIN  imgs/fb_icon.png
BIN  imgs/imgur.png
BIN  imgs/imgur_icon.png
BIN  imgs/imgur_small.png
BIN  imgs/loader.gif
BIN  imgs/placeholder.jpg
BIN  imgs/reddit_icon.png
BIN  imgs/subtitle_icon.png
BIN  imgs/tb.png
BIN  imgs/title_icon.png
BIN  imgs/twitt_icon.png
BIN  imgs/valid.png
280 main.js
... ... @@ -0,0 +1,280 @@
  1 +var MAX_WIDTH = 800;
  2 +var MAX_HEIGHT = 600;
  3 +var IMG_COUNT = 12;
  4 +
  5 +var frameSize, imgWidth, imgHeight, poster;
  6 +var targetOrigin = "*";
  7 +
  8 +function addFrame(img) {
  9 + var width, height;
  10 +
  11 + if (img) {
  12 + width = img.width;
  13 + height = img.height;
  14 +
  15 + if (width > height) {
  16 + if (width > MAX_WIDTH) {
  17 + height *= MAX_WIDTH / width;
  18 + width = MAX_WIDTH;
  19 + }
  20 + } else {
  21 + if (height > MAX_HEIGHT) {
  22 + width *= MAX_HEIGHT / height;
  23 + height = MAX_HEIGHT;
  24 + }
  25 + }
  26 + } else {
  27 + width = MAX_WIDTH;
  28 + height = MAX_HEIGHT;
  29 + }
  30 +
  31 + frameSize = Math.round(width / 14);
  32 +
  33 + poster.width = width + 2 * frameSize;
  34 + poster.height = height + 4 * frameSize;
  35 + poster.style.width = poster.width + "px";
  36 +
  37 + var ctx = poster.getContext("2d");
  38 +
  39 + ctx.fillStyle = "black";
  40 + ctx.lineWidth = 4;
  41 + ctx.strokeStyle = "white";
  42 + ctx.fillRect(0, 0, poster.width, poster.height);
  43 + ctx.drawImage(img, frameSize, frameSize, width, height);
  44 + ctx.strokeRect(frameSize - 8, frameSize - 8, width + 16, height + 16);
  45 +
  46 + frameSize = frameSize;
  47 + imgWidth = width;
  48 + imgHeight = height;
  49 +
  50 + document.getElementById("title").value = "";
  51 + document.getElementById("comment").value = "";
  52 +}
  53 +
  54 +function updateText() {
  55 + var title = document.getElementById("title").value;
  56 + var comment = document.getElementById("comment").value;
  57 + drawText(title, comment);
  58 +}
  59 +
  60 +function drawText(title, comment) {
  61 + title = title.toUpperCase();
  62 +
  63 + var ctx = poster.getContext("2d");
  64 +
  65 + ctx.fillStyle = "black";
  66 + ctx.fillRect(0, poster.height - 3 * frameSize, poster.width, 3 * frameSize);
  67 +
  68 + ctx.strokeStyle = "white";
  69 + ctx.strokeRect(frameSize - 8, frameSize - 8, imgWidth + 16, imgHeight + 16);
  70 +
  71 + ctx.fillStyle = "white";
  72 + ctx.textAlign = "center";
  73 + ctx.textBaseline = "middle";
  74 + ctx.font = Math.round(1.8 * frameSize) + "px Times New Roman";
  75 +
  76 + ctx.fillText(title, poster.width / 2, poster.height - 1.8 * frameSize, imgWidth);
  77 +
  78 + ctx.font = Math.round(1.4 * frameSize / 2) + "px Times New Roman";
  79 + ctx.fillText(comment, poster.width / 2, poster.height - 0.7 * frameSize, imgWidth);
  80 +}
  81 +
  82 +function init() {
  83 +
  84 + stoploading();
  85 +
  86 + if (document.location.hash == "") {
  87 + initEditor();
  88 + } else {
  89 + initViewer(document.location.hash.split("#")[1]);
  90 + }
  91 +
  92 + var imgs = document.querySelectorAll("#tb img:not(.tb)");
  93 + for (var i = 0; i < imgs.length; i++) {
  94 + imgs[i].onclick = (function(i) {
  95 + return function() {
  96 + var url = imgs[i].src;
  97 +
  98 + var placeholder = document.getElementById("placeholder");
  99 + placeholder.src = url;
  100 + placeholder.onload = function() {
  101 + addFrame(placeholder);
  102 +
  103 + var bg = document.getElementById("background");
  104 + bg.width = 5; bg.height = 5;
  105 + bg.getContext("2d").drawImage(placeholder, 0, 0, bg.width, bg.height);
  106 +
  107 + stoploading();
  108 + document.body.classList.add("showEditor");
  109 + }
  110 + }
  111 + })(i);
  112 + }
  113 +}
  114 +function cancel() {
  115 + document.body.classList.remove("showEditor");
  116 + initEditor();
  117 +}
  118 +
  119 +function initViewer(url) {
  120 + document.body.classList.add("viewer");
  121 + document.body.classList.remove("editor");
  122 + var url = "http://i.imgur.com/" + url + ".png";
  123 + var pv = document.getElementById("posterView");
  124 + pv.src = url;
  125 +
  126 + pv.onload = function() {
  127 + var bg = document.getElementById("background");
  128 + bg.width = 5; bg.height = 5;
  129 + bg.getContext("2d").drawImage(pv, 0, 0, bg.width, bg.height);
  130 + window.parent.postMessage('show_exit_ui', targetOrigin);
  131 + }
  132 +}
  133 +
  134 +function initEditor() {
  135 + /* Reset the bg Canvas */
  136 + document.getElementById("background").width = 1;
  137 + document.getElementById("background").width = 5;
  138 +
  139 + document.location.hash = "";
  140 + document.body.classList.add("editor");
  141 + document.body.classList.remove("viewer");
  142 + poster = document.getElementById("poster");
  143 +
  144 + addFrame(document.getElementById("dropbox"));
  145 + drawText("Drop an image", "It's for your own good");
  146 +
  147 + poster.addEventListener("dragover", function(e) { e.preventDefault(); }, true);
  148 + poster.addEventListener("dragleave", function(e) { poster.classList.remove("dragging"); }, true);
  149 + poster.addEventListener("dragenter", function(e) { e.preventDefault(); poster.classList.add("dragging"); }, false);
  150 +
  151 + poster.onclick = function(e) {
  152 + document.getElementById("filepicker").click();
  153 + }
  154 +
  155 + poster.addEventListener("drop", function(e) {
  156 + e.preventDefault();
  157 + poster.classList.remove("dragging");
  158 + if (e.dataTransfer.files.length < 1) {
  159 + var url = e.dataTransfer.getData("URL");
  160 + if (url) loadImage(url);
  161 + return;
  162 + }
  163 + var file = e.dataTransfer.files[0];
  164 + processFile(file);
  165 + }, false);
  166 +
  167 + var title = document.getElementById("title");
  168 + var comment = document.getElementById("comment");
  169 +
  170 + title.addEventListener("input", updateText, true);
  171 + comment.addEventListener("input", updateText, true);
  172 +}
  173 +
  174 +function processFile(file) {
  175 + var imageType = /image.*/;
  176 + if (!file.type.match(imageType)) return;
  177 + loading("resizing");
  178 + var placeholder = document.getElementById("placeholder");
  179 + setTimeout(function() {
  180 +
  181 + var setupURL = function(url) {
  182 + placeholder.src = url;
  183 + placeholder.onload = function() {
  184 + addFrame(placeholder);
  185 +
  186 + var bg = document.getElementById("background");
  187 + bg.width = 5; bg.height = 5;
  188 + bg.getContext("2d").drawImage(placeholder, 0, 0, bg.width, bg.height);
  189 +
  190 + stoploading();
  191 + document.body.classList.add("showEditor");
  192 + }
  193 + }
  194 +
  195 +
  196 + if ("URL" in window) {
  197 + var url = window.URL.createObjectURL(file);
  198 + setupURL(url);
  199 + } else {
  200 + var reader = new FileReader();
  201 + reader.readAsDataURL(file);
  202 + reader.onload = function(e) {
  203 + setupURL(e.target.result);
  204 + }
  205 + }
  206 + }, 1000);
  207 +}
  208 +
  209 +function upload() {
  210 + loading("uploading");
  211 + document.body.classList.remove("showEditor");
  212 +
  213 + var fd = new FormData();
  214 + var toSend;
  215 + if ("mozGetAsFile" in poster) {
  216 + toSend = poster.mozGetAsFile("foo.png");
  217 + } else {
  218 + toSend = poster.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/, "");
  219 + }
  220 + fd.append("image", toSend)
  221 + fd.append("key", "6528448c258cff474ca9701c5bab6927");
  222 + var xhr = new XMLHttpRequest();
  223 + xhr.open("POST", "http://api.imgur.com/2/upload.json");
  224 + xhr.addEventListener("error", function() {
  225 + loading("Upload Error :(");
  226 + setTimeout(stoploading, 2000);
  227 + }, false);
  228 + xhr.addEventListener("load", function() {
  229 + try {
  230 + var links = JSON.parse(xhr.responseText).upload.links;
  231 + var hash = links.original;
  232 + hash = hash.replace("http://imgur.com/", "");
  233 + hash = hash.replace(".png", "");
  234 + document.location.hash = "#" + hash;
  235 + initViewer(hash);
  236 + stoploading();
  237 + } catch(e) {
  238 + loading("Upload Error :" + e);
  239 + setTimeout(stoploading, 2000);
  240 + }
  241 + }, false);
  242 + xhr.send(fd);
  243 +}
  244 +
  245 +function loading(msg) {
  246 + document.body.classList.add("showveil");
  247 + document.getElementById("status").innerHTML = msg;
  248 +}
  249 +function stoploading() {
  250 + document.body.classList.remove("showveil");
  251 +}
  252 +
  253 +function getARandomImage() {
  254 + var idx = Math.floor((Math.random() * 12)) + 1;
  255 + var url = "pictures/" + idx + ".jpg";
  256 + loadImage(url);
  257 +}
  258 +
  259 +function loadImage(url) {
  260 + var placeholder = document.getElementById("placeholder");
  261 + loading("loading");
  262 + setTimeout(function() {
  263 + placeholder.src = url;
  264 + placeholder.onerror = function() {
  265 + stoploading();
  266 + }
  267 + placeholder.onload = function() {
  268 + addFrame(placeholder);
  269 +
  270 + var bg = document.getElementById("background");
  271 + bg.width = 5; bg.height = 5;
  272 + bg.getContext("2d").drawImage(placeholder, 0, 0, bg.width, bg.height);
  273 +
  274 + stoploading();
  275 + document.body.classList.add("showEditor");
  276 + }
  277 + }, 1000);
  278 +}
  279 +
  280 +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
BIN  pictures/10.jpg
BIN  pictures/11.jpg
BIN  pictures/12.jpg
BIN  pictures/2.jpg
BIN  pictures/3.jpg
BIN  pictures/4.jpg
BIN  pictures/5.jpg
BIN  pictures/6.jpg
BIN  pictures/7.jpg
BIN  pictures/8.jpg
BIN  pictures/9.jpg
3  pictures/foo.sh
... ... @@ -0,0 +1,3 @@
  1 +#!/bin/sh
  2 +
  3 +convert $1 -pointsize $3 -undercolor white -draw "gravity SouthEast text 5,5 '$2'" $1
BIN  screenshot.jpg

0 comments on commit fe2533d

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