diff options
Diffstat (limited to 'search.html')
| -rw-r--r-- | search.html | 141 |
1 files changed, 13 insertions, 128 deletions
diff --git a/search.html b/search.html index f0fe7b0..cf070e5 100644 --- a/search.html +++ b/search.html @@ -4,20 +4,20 @@ <title>Photoblaster Search Widget</title> <style type="text/css"> form { display: inline-block; } - #images img { max-width: 200px; height: 90px; margin: 5px; } + #gallery-images img { max-width: 200px; height: 90px; margin: 5px; } #result { height: 500px; } #result img { max-height: 500px; } </style> <body> -<div id="ui"> - <form id="search"> - <input type="text" id="search-query" value="duck bill"> - <button id="search">DUMP SEARCH</button> +<div id="gallery"> + <form id="gallery-search"> + <input type="text" id="dumpfm-search-query" value="duck bill"> + <button id="gallery-search">DUMP SEARCH</button> </form> - <button id="random">IM RANDOM</button> - <span id="status"></span> - <div id="images"></div> + <button id="gallery-random">IM RANDOM</button> + <span id="gallery-status"></span> + <div id="gallery-images"></div> </div> <div id="result"> @@ -27,133 +27,18 @@ </body> <script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script> +<script type="text/javascript" src="js/asdf.js"></script> +<script type="text/javascript" src="js/gallery.js"></script> <script type="text/javascript"> -var ui = {} -ui.init = function(){ - ui.bind() -} - -ui.bind = function(){ - $("#random").click(asdf.random) - $("#search").submit(dumpfm.search) - $(document).on("click", "#images img", gallery.choose) - status("ready") -} - - -// -// gallery .. the most basic image picker - -var gallery = {} -gallery.load = function(ims){ - status("loading " + ims.length + " images"); - $("#images").empty(); - for (var i = 0; i < ims.length; i++) { - gallery.image(ims[i]); - } -} - -gallery.image = function(im){ - var img = new Image (); - img.onload = function(){ - $("#images").append(img); - } - try { img.src = im.url; } - catch(e){ return; } - if (img.complete) img.onload(); -} +function status(s){ $("#status").html(s); console.log(s) } gallery.choose = function(){ - $("#image").empty().append( $(this).clone() ) + $("#result #image").empty().append( $(this).clone() ) $("#result #url").val(this.src); } -// -// asdf .. asdf.us/im search api - -var asdf = { fetching: false } -asdf.random = function (e){ - status("fetching random photoblasts") - e.preventDefault(); - opt = {}; - opt.data = { random: 1 }; - opt.success = gallery.load; - asdf.fetch(opt); -} - -asdf.fetch = function (opt){ - if (asdf.fetching) return; - asdf.fetching = true; - var params = {random:1}; - $.ajax({ - 'url': "http://asdf.us/cgi-bin/im/list", - 'data': params, - 'dataType': "jsonp", - 'success': function(urls){ - console.log(urls); - asdf.fetching = false; - opt.success && opt.success(urls) - }, - 'error': opt.error || function(err){ - console.log(err); - } - }); -} - -// -// dumpfm .. dump.fm/search api - -var dumpfm = {} -dumpfm.search = function (e){ - e.preventDefault(); - - var term = $("#search-query").val().toLowerCase() - var rawTokens = term.split(" ") - var tokens = [] - rawTokens.forEach(function(t){ if (t.length > 2) tokens.push(t) }) - if (tokens.length == 0 || tokens[0] == "undefined") { - status("search query too small") - } else { - status("searching for '"+tokens.join(" and ")+"'") - dumpfm.fetch({ - query: tokens.join("+"), - success: gallery.load - }) - } -}; - -dumpfm.fetch = function(opt){ - if (dumpfm.fetching) return; - dumpfm.fetching = true; - var params = {}; - $.ajax({ - 'url': "http://dump.fm/cmd/search/" + opt.query, - 'data': params, - 'dataType': "jsonp", - 'success': function(urls){ - dumpfm.fetching = false; - for (var i = 0, len = urls.length; i < len; i++) { - var url = urls[i].url; - if (url.match(/^\d+\//)) { - url = "http://dump.fm/images/" + url; - } - else { - url = "http://" + url; - } - urls[i].url = url; - } - opt.success && opt.success(urls) - }, - 'error': opt.error || function(err){ - console.log(err); - } - }); -} - -function status(s){ $("#status").html(s); console.log(s) } - -$(ui.init); +$(gallery.init); </script> </html> |