diff options
| -rw-r--r-- | js/user.js | 36 | ||||
| -rw-r--r-- | shader-picker.html | 25 |
2 files changed, 55 insertions, 6 deletions
diff --git a/js/user.js b/js/user.js new file mode 100644 index 0000000..de95274 --- /dev/null +++ b/js/user.js @@ -0,0 +1,36 @@ +var user = new function(){} +user.init = function(){ + user.username = user.getCookie() + $("#username").val(user.username) + user.bind() +} +user.bind = function(){ + $("#username").on("input", user.save) +} +user.sanitize = function(){ + return $("#username").val().replace(/[^-_ a-zA-Z0-9]/g,"") +} +user.getCookie = function () { + var username = localStorage.getItem("im.name") || ""; + if (document.cookie && ! username.length) { + var cookies = document.cookie.split(";") + for (i in cookies) { + var cookie = cookies[i].split("=") + if (cookie[0].indexOf("imname") !== -1) { + if (cookie[1] !== 'false' && cookie[1] !== 'undefined' && cookie[1].length) { + return cookie[1] + } + } + } + } + return username +} +user.save = function(){ + var username = user.sanitize() + if (username != user.username) user.setCookie(username); +} +user.setCookie = function(username){ + console.log("setting to " + username) + document.cookie = "imname="+username+";path=/;domain=.asdf.us;max-age=1086400" + localStorage.setItem("im.name", username); +} diff --git a/shader-picker.html b/shader-picker.html index 177bc76..9c3f50c 100644 --- a/shader-picker.html +++ b/shader-picker.html @@ -31,6 +31,7 @@ form { display: inline-block; } #gallery { clear: right; width:100%; padding: 0; } #gallery-images { display: block; max-height: 210px; overflow-y: auto; } #gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; } +#username { width: 40px; } </style> </head> <body> @@ -70,6 +71,7 @@ form { display: inline-block; } gif delay <input type="text" id="framedelay" value="0.1s"> background <input type="text" id="background" value="#fff"> + your name here → <input type="text" id="username" value=""> <br> <br> <button id="help">help</button> @@ -108,6 +110,7 @@ form { display: inline-block; } <script type="text/javascript" src="js/gallery.js"></script> <script type="text/javascript" src="js/color.js"></script> <script type="text/javascript" src="js/image.js"></script> +<script type="text/javascript" src="js/user.js"></script> <script type="text/javascript" src="js/util.js"></script> <script type="text/javascript"> @@ -165,6 +168,9 @@ function init(){ gallery.init() console.log("gallery init") + user.init() + console.log("signed in as ", user.username) + document.getElementById('shader').addEventListener('input', shader_build); shader_build() @@ -432,6 +438,7 @@ encoder.on("rendered-url", function(url){ var image = new Image () lastGif = image.src = url $("#rendered").append(image) + $("#uploaded-url").hide().val("") $("#save,#upload,#rendered").show() $("#pause,#render,#add-frame,#save,#upload").enable() $("#render").html("render") @@ -439,20 +446,27 @@ encoder.on("rendered-url", function(url){ pause(true) }) +function get_filename(){ + var basename = $("#url").val().replace(/^.*\//,"").replace(/\..*$/,"").replace(/[^-_ a-zA-Z0-9]/g,"") + var username = get_username() + var filename = basename + "-" + username + "-" + (+new Date()) + ".gif" + return filename.replace(/ /g,"_").replace(/-+/g,"-") +} function save (){ if (! lastGif) return; - var filename = document.getElementById("url").value.replace(/^.*\//,"").replace(/\.gif.*$/,"") + var filename = get_filename() var blob = dataUriToBlob(lastGif) - saveAs(blob, filename + "-" + (+new Date()) + ".gif"); + saveAs(blob, filename); } function upload(){ - var filename = document.getElementById("url").value.replace(/^.*\//,"").replace(/\.gif.*$/,"") + var filename = get_filename() + var username = get_username() var blob = dataUriToBlob(lastGif) uploadImage({ blob: blob, - filename: filename + "-" + (+new Date()) + ".gif", - username: "", + filename: filename, + username: username, success: function(data){ // data.url @@ -461,7 +475,6 @@ function upload(){ console.log(data); status("uploaded"); - $("#uploaded-url").show().focus().val(data.url) }, error: function(data){ |