diff options
| -rw-r--r-- | share/frontend/imgradient/css/style.css | 13 | ||||
| -rwxr-xr-x | share/frontend/imgradient/index.html | 3 | ||||
| -rw-r--r-- | share/frontend/imgradient/js/main.js | 33 |
3 files changed, 46 insertions, 3 deletions
diff --git a/share/frontend/imgradient/css/style.css b/share/frontend/imgradient/css/style.css index 9012be3..55b60a9 100644 --- a/share/frontend/imgradient/css/style.css +++ b/share/frontend/imgradient/css/style.css @@ -51,6 +51,19 @@ h1 display: none; position: fixed; } +#colorswitcheroo + { + width: 19px; + height:38px; + display: inline-block; + position: absolute; + background-image: url(http://i.asdf.us/im/7e/user_convo_1353562627_1355449919.png); + //background-image: url( http://i.asdf.us/im/7b/user_convo_1353562627.png); + background-repeat:no-repeat; + background-position: 3px 10px; + cursor: pointer; + } + #instructions { position: absolute; diff --git a/share/frontend/imgradient/index.html b/share/frontend/imgradient/index.html index 75310c3..de355b3 100755 --- a/share/frontend/imgradient/index.html +++ b/share/frontend/imgradient/index.html @@ -68,6 +68,7 @@ <label><span style="font-weight:bold; color:black;">COLOR 1</span><span class="arrow">→</span></label> <input type="text" id="img-color1" value="white" class="color1" /> <a href="http://asdf.us/im/colors" target="_blank" class="color1">color list</a> + <div id="colorswitcheroo"></div> <br/> <span class="shim"></span> @@ -197,7 +198,7 @@ </div> <div id="result"> - → <input type="text" id="output-url"/><br/> + <span id="result-arrow">→ </span><input type="text" id="output-url"/><br/> <span id="output-cmd"></span><br/> <img id="output-img" /> diff --git a/share/frontend/imgradient/js/main.js b/share/frontend/imgradient/js/main.js index 1862de3..a81c6ac 100644 --- a/share/frontend/imgradient/js/main.js +++ b/share/frontend/imgradient/js/main.js @@ -87,20 +87,44 @@ var Main = if (data.name.length > 0){ document.cookie = "imname="+data.name+";path=/;domain=.asdf.us;max-age=1086400" } - $.post("/im/api/imgradient", data, Main.callback) + $.ajax({ + url: '/im/api/imgradient', + type: 'post', + dataType: 'json', + data: data, + success: function(data){ Main.callback(data) }, + error: function(data){ + switch(data.status){ + case 500: + Main.error("Problem with server") + console.log(data) + break; + case 410: + Main.error(JSON.parse(data.responseText).message) + break; + default: + Main.error("Something went wrong") + console.log(data) + } + Main.generating = false + } + }); $("#controls").css('margin',"") }, error: function (s) { $("#output-cmd").html("<span class='error'>ERROR: " + s + "</span>").show() + $("#result-arrow").hide() $("#output-url").hide() $("#output-img").hide() }, callback: function (data) { + console.log(data) if (data.error){ return Main.error(data.error) } + $("#result-arrow").show() $("#output-cmd").html("size: "+Main.filesize(data.size)+"<br/>"+data.height + " x " + data.width) $("#output-url").val(data.url) $("#output-img").hide().attr("src", data.url).fadeIn(700) @@ -145,7 +169,12 @@ $(document).ready(function(){ $('form').submit(function() { return false; }); - $(document).keydown(Main.enter) + $("#colorswitcheroo").click(function() { + a = $("#img-color1").val(); + b = $("#img-color2").val(); + $("#img-color1").val(b); + $("#img-color2").val(a); + }); $("#img-generate").click(Main.go) document.getElementById("reset").reset() }) |