incorporate asdf+dump search

author: jules <jules@okfoc.us> 2013-12-27 16:35:14 -0500
committer: jules <jules@okfoc.us> 2013-12-27 16:35:14 -0500
commit: f483f2667690ddc89961cb163a870ce84196374e (patch)
tree: 5579ba8de921c330c1f195f8de76b23c1b453bf8
parent: 58b4227998ff3e674797185d470b6d43852241de (diff)
2 files changed, 236 insertions, 0 deletions
diff --git a/search-random.html b/search-random.html
new file mode 100644
index 0000000..1d0959d
--- /dev/null
+++ b/search-random.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html>
+<head>
+<title>Photoblaster Search Widget</title>
+<style type="text/css">
+  #images img { max-width: 200px; height: 90px; margin: 5px; }
+</style>
+<body>
+
+<div id="ui">
+  <input type="text" id="q">
+  <button id="name">N</button>
+  <button id="search">S</button>
+  <button id="random">R</button>
+  <div id="images"></div>
+</div>
+
+<div id="result">
+  <input type="text" id="url">
+  <div id="image"></div>
+</div>
+
+</body>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript">
+
+$("#random").click(random)
+$(document).on("click", "#images img", choose)
+
+random();
+
+function choose(){
+  $("#image").empty().append( $(this).clone() )
+  $("#result #url").val(this.src);
+}
+
+function load(ims){
+  $("#images").empty();
+  for (var i = 0; i < ims.length; i++) {
+    image(ims[i]);
+  }
+}
+function image(im){
+  var img = new Image ();
+  img.onload = function(){
+    $("#images").append(img);
+  }
+  img.src = im.url;
+  if (img.complete) img.onload();
+}
+
+function random(){
+  opt = {};
+  opt.data = { random: 1 };
+  opt.success = load;
+  fetch(opt);
+}
+
+function fetch(opt){
+  var params = {random:1};
+  $.ajax({
+    'url': "http://asdf.us/cgi-bin/im/list",
+    'data': params,
+    'dataType': "jsonp",
+    'success': opt.success || function(data){
+      console.log(data);
+    },
+    'error': opt.error || function(err){
+      console.log(err);
+    }
+  });
+}
+
+</script>
+</html>
+
diff --git a/search.html b/search.html
new file mode 100644
index 0000000..f0fe7b0
--- /dev/null
+++ b/search.html
@@ -0,0 +1,160 @@
+<!doctype html>
+<html>
+<head>
+<title>Photoblaster Search Widget</title>
+<style type="text/css">
+  form { display: inline-block; }
+  #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>
+  </form>
+  <button id="random">IM RANDOM</button>
+  <span id="status"></span>
+  <div id="images"></div>
+</div>
+
+<div id="result">
+  <input type="text" id="url">
+  <div id="image"></div>
+</div>
+
+</body>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.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();
+}
+
+gallery.choose = function(){
+  $("#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);
+
+</script>
+</html>
+
author	jules <jules@okfoc.us>	2013-12-27 16:35:14 -0500
committer	jules <jules@okfoc.us>	2013-12-27 16:35:14 -0500
commit	f483f2667690ddc89961cb163a870ce84196374e (patch)
tree	5579ba8de921c330c1f195f8de76b23c1b453bf8
parent	58b4227998ff3e674797185d470b6d43852241de (diff)