initial shit version of new search

author: tim b <timb@camcompu.home> 2010-09-22 21:23:20 -0700
committer: tim b <timb@camcompu.home> 2010-09-22 21:23:20 -0700
commit: 177ed4b6aa9c6c4e93a4a5a95ea24fb6db66077a (patch)
tree: 5340aa780f8452889c1008478fd160d9516d8a63
parent: c14c9b94c87a5a0d54158a1b45c20f66d4607aa1 (diff)
4 files changed, 537 insertions, 0 deletions
diff --git a/static/tests/space.packing/index.html b/static/tests/space.packing/index.html
new file mode 100755
index 0000000..644758a
--- /dev/null
+++ b/static/tests/space.packing/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>dump.fm image packing test</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="dump.fm - Talk with pictures!" />
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+    <script type="text/javascript" src="spacefill.js"></script>
+
+  <style>
+  html,body,img,div{margin:0; border:0; padding:0}
+  img { max-width: 400px; max-height: 400px;}
+  h1 { display:inline-block; margin: 20px; font-size: 30px;}
+  #content { position: relative; width: 100%; }
+  fieldset { display: inline }
+  p { margin-left: 20px; display: inline-block; }
+  </style>
+
+<script>
+
+function go(){
+
+  $("#content").html("")
+
+  columnSize = parseInt($("#settings-columnSize").val()) || 300
+
+  minImageSize = parseInt($("#settings-minSize").val()) || 16
+  maxImageSize = columnSize
+
+  columnSpacingStyle = $('input:radio[name=settings-column-spacing]:checked').val();
+
+  getWindowSize()
+
+  SpaceFill.init({
+    "container": "#content",
+    "width": Width,
+    "height": Height,
+    "type": "columns",
+    "spacing": columnSpacingStyle,
+    "minMargin": 16,
+    "columnWidth": columnSize
+  })
+
+
+  setTimeout(fill, 50)
+}
+
+
+function fill(){
+
+  if (ColumnFill.isSpaceFilled()) return;
+
+  var img = randomImage()
+
+  SpaceFill.add(img)
+
+  setTimeout(fill, 50)
+
+}
+
+function randomImage(){
+
+  var d = document.createElement("div")
+  d.style.backgroundColor = "#" + rand16() + rand16() + rand16() + rand16() + rand16() + rand16()
+  d.style.width = Math.floor(Math.random() * (maxImageSize - minImageSize) + minImageSize) + "px"
+  d.style.height = Math.floor(Math.random() * (maxImageSize - minImageSize) + minImageSize) + "px"
+
+  return d
+
+}
+
+function rand16(){
+  return Math.floor(Math.random() * 16).toString(16)
+ }
+
+function getWindowSize(){
+  Width = $(document).width()
+  Height = $(document).height()
+}
+
+
+
+</script>
+</head>
+  <body>
+
+  <h1> space packing test. </h1>
+  <p>
+  <fieldset><legend>type: <select><option>columns</option></select></legend>
+  <div>
+  <br>column size <input name="settings-columnSize" id="settings-columnSize" type="text" value="200" size="4" />
+  <br>min image size <input name="settings-minSize" id="settings-minSize" type="text" value="40" size="4" />
+  <br>
+    center <input name="settings-column-spacing" value="center" checked="checked" type="radio">
+    justify <input name="settings-column-spacing" value="justify" type="radio">
+  </div>
+  <br><button onclick="go()">go</button>
+  </fieldset>
+
+
+
+
+  </p>
+
+
+
+
+
+  <div id="content"></div>
+
+
+
+
+  </body>
+ </html>
diff --git a/static/tests/space.packing/search.html b/static/tests/space.packing/search.html
new file mode 100755
index 0000000..ce59fe9
--- /dev/null
+++ b/static/tests/space.packing/search.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>dump.fm image packing test</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="dump.fm - Talk with pictures!" />
+    <link rel="stylesheet" type="text/css" href="http://dump.fm/static/css/dump.css">
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+    <script type="text/javascript" src="http://dump.fm/static/js/pichat.js"></script>
+    <script type="text/javascript" src="spacefill.js"></script>
+    <script type="text/javascript" src="search.js"></script>
+
+  <style>
+  html,body,img,div{margin:0; border:0; padding:0}
+  body { overflow: visible;}
+  img { max-width: 400px; max-height: 400px;}
+  h1 { display:inline-block; margin: 20px; font-size: 30px;}
+  #content { position: relative; width: 100%; overflow: visible; }
+  fieldset { display: inline }
+  p { margin-left: 20px; display: inline-block; }
+  #content a.animating canvas { display: none }
+  </style>
+
+<script>
+
+$(document).ready(Search.init)
+
+function go(){
+
+  $("#content").html("")
+
+  getWindowSize()
+
+  SpaceFill.init({
+    "container": "#content",
+    "width": Width,
+    "height": Height,
+    "type": "columns",
+    "spacing": "justify",
+    "minMargin": 16,
+    "columnWidth": 200
+  })
+
+
+  setTimeout(fill, 50)
+}
+
+
+function fill(){
+
+  if (ColumnFill.isSpaceFilled()) return;
+
+  if(Search.imageCache.loadedImages.length) {
+    var img = Search.imageCache.loadedImages.shift()
+
+    var j = Search.imageCache.displayedImages.length
+    Search.imageCache.displayedImages.push(img)    
+    var width = img.width
+    var height = img.height
+    
+    if (width > SpaceFill.config.columnWidth) {
+      scaleFactor = SpaceFill.config.columnWidth / width
+      width = SpaceFill.config.columnWidth
+      height = Math.floor(height * scaleFactor)
+    }
+    img.adjWidth = width
+    img.adjHeight = height
+    
+    var c = document.createElement("canvas")
+    c.width = width
+    c.height = height
+
+    var ctx = c.getContext('2d');
+    ctx.drawImage(img, 0, 0, c.width, c.height)
+
+    var a = document.createElement("a")
+    a.index = j
+    a.href = img.src
+    a.style.width = width + "px"
+    a.style.height = height + "px"
+    a.id = "imagelink-" + j;
+
+    a.appendChild(c)
+    
+    SpaceFill.add(a)
+  }
+
+  setTimeout(fill, 200)
+
+}
+
+function getWindowSize(){
+  Width = $(document).width()
+  Height = $(document).height()
+}
+
+
+
+</script>
+</head>
+<body>
+
+  <center>search dumps: <input type="text" name="search-query" id="search-query" /></center><br><br>
+  <center><div id="message"></div><br><br></center>
+  <div id="content"></div>
+
+
+<script>go()</script>
+
+</body>
+</html>
diff --git a/static/tests/space.packing/search.js b/static/tests/space.packing/search.js
new file mode 100755
index 0000000..5d03a3c
--- /dev/null
+++ b/static/tests/space.packing/search.js
@@ -0,0 +1,218 @@
+// just a general object to hold global timers...
+Timers = {
+  
+}
+
+
+var ImageCache = function(config){
+  
+  config = config || {"token": Math.random(), 'timerName': "search"}
+  this.timerName = config.timerName
+  clearTimeout(Timers[config.timerName])
+  this.urls = ('urls' in config) ? config.urls : []
+  this.loadingImages = []
+  this.loadedImages = []
+  this.displayedImages = []
+  this.loadAtATime = 10
+  this.token = config.token 
+  this.loadWatcher = makeImageCacheWatcher(this)
+  this.loadWatcher()
+}
+
+
+function makeImageCacheWatcher(imageCache){ return function(){
+
+  var newLoadingImages = []
+  
+//  console.log("hi " + imageCache.token)
+
+  imageCache.loadingImages.forEach(function(img){
+    if (img.complete) {
+      if (img.height == 0 || img.width == 0 || img.height == NaN || img.width == NaN) {
+        // call server... dump.fm/cmd/thisImageIsFuckingBrokenY'all?img=foo
+      } else {
+        imageCache.loadedImages.push(img)
+//        console.log("loaded +" + img.src)
+      }
+    } else newLoadingImages.push(img)
+  })
+
+  delete imageCache['loadingImages'];
+  imageCache.loadingImages = newLoadingImages
+
+  while (imageCache.loadingImages.length < imageCache.loadAtATime && imageCache.urls.length) {
+    var img = new Image()
+    img.src = imageCache.urls.shift()
+    img.animated = (parseUri(img.src)["file"].toLowerCase().substr(-3) == "gif") ? true : false;
+    imageCache.loadingImages.push(img)
+  }
+  
+  Timers[imageCache.timerName] = setTimeout(makeImageCacheWatcher(imageCache), 500)   
+    
+}}
+
+
+/*
+imagecache.add()
+imagecache.add()
+imagecache.add()
+
+periodically... if (loaded)... (display)
+
+pause & start
+*/
+
+
+/*
+  search adds a script to the page... the script will call either Search.searchResult() or Search.searchError()
+  todo: clean this up. remove duplicated function names etc
+*/
+
+var Search = {
+  
+  'term': "",
+  'images': [],
+  'tokens': [],
+  'imageCache': new ImageCache(),
+  
+  'init': function(){
+    $("#search-query").val("search dump.fm")
+    $("#search-query").focus(function(){
+      if ($("#search-query").val() == 'search dump.fm')
+        $("#search-query").val("")
+    })
+    $("#search-query").blur(function(){
+      if ($("#search-query").val().trim() == '')
+        $("#search-query").val("search dump.fm")
+    })
+    $("#search-query").keydown(ifEnter(Search.doSearch))
+    $("#search-results-images a").live("mouseup", Search.click)
+  },
+
+  'addScript': function(term) {
+    $("#search-script").remove()
+    $("head").append("<scr"+"ipt src='http://dump.fm/cmd/ghettosearch/"+term+"' id='search-script'></sc"+"ript>")
+  },
+  'setContent': function(x){
+    $("#search-results-images").html(x)
+  },
+  'setMessage': function(x){
+    $("#search-controls").css("display", "block")
+    $("#search-control-text").html(x)
+  },
+  'searchError': function(error){
+    Search.setContent("")
+    $('#search-control-previous').css("visibility", "hidden")
+    $('#search-control-next').css("visibility", "hidden")
+    Search.setMessage(error)
+  },
+
+  'doSearch': function(){
+    term = $("#search-query").val().trim().toLowerCase()
+    var rawTokens = term.split(" ")
+    Search.tokens = []
+    rawTokens.forEach(function(t){ if (t.length > 2) Search.tokens.push(t) })
+    if (Search.tokens.length == 0) {
+      Search.setMessage("search query too small")
+    } else {
+      Search.setMessage("searching for '"+Search.tokens.join(" and ")+"'")
+      Search.addScript(Search.tokens.join("+"))
+    }
+  },
+
+  'renderPage': function(num){
+    $("#search-results-images").css("display", "block")
+    $("#search-controls").css("display", "block")
+    if (Search.images.length > 0)
+        Search.setMessage("results for '"+Search.tokens.join(" and ")+"' (page " + (num + 1) + ")");
+    var contentString = ''
+    var start = num * Search.imagesPerPage
+    var imageCounter = 0
+    for(var i = start; i < Search.images.length; i++){
+        if(imageCounter > Search.imagesPerPage) break;
+        contentString += '<a href="'+Search.images[i]+'" target="_blank" onclick="return false"><img src="'+Search.images[i]+'"></a>'
+        imageCounter += 1
+    }
+    contentString += '<br><br><div id="search-commands">'
+    if(num > 0) {
+      $('#search-control-previous').attr("href", 'javascript:Search.renderPage('+(num-1)+')')
+      $('#search-control-previous').css("visibility", "visible")
+    } else {
+      $('#search-control-previous').attr("href", 'javascript:void()')
+      $('#search-control-previous').css("visibility", "hidden")
+    }
+    
+    if (Search.images.length > start + imageCounter) {
+      $('#search-control-next').attr("href", 'javascript:Search.renderPage('+(num+1)+')')
+      $('#search-control-next').css("visibility", "visible")
+    } else {
+      $('#search-control-next').attr("href", 'javascript:void()')
+      $('#search-control-next').css("visibility", "hidden")
+    }
+    Search.setContent(contentString)
+  },
+
+  'click': function(e){
+    if (e.which == 1) // left click
+      if (Search.addToChatBoxIfPossible(this))
+        window.open(this.href)
+    else if (e.which == 2) // middle click
+      window.open(this.href)
+  },
+
+  'addToChatBoxIfPossible': function(img){
+    var chatBoxExists = $("#msgInput").length
+    if (chatBoxExists) {
+      var chatText = $("#msgInput").val()
+      if (chatText.length && chatText[chatText.length - 1] != " ")
+        chatText += " "
+      chatText += $(img).attr("href") + " "
+      $("#msgInput").val(chatText)
+      $("#msgInput").focus().val($("#msgInput").val()) //http://stackoverflow.com/questions/1056359/
+      return false
+    } else return true
+  },
+
+  'searchResult': function(results){
+    Search.images = []
+    if(results === null || results.length == 0) {
+        Search.setContent("")
+        Search.setMessage("no results found")        
+    } else {
+        results.forEach(function(r){ Search.images.push(r.url) })
+        Search.display()
+    }
+  },
+  'display': function(){
+    //console.log(Search.images)
+    Search.imageCache = new ImageCache({"urls": Search.images, "token": Math.random(), 'timerName': "search"})
+  },
+  'close': function(){
+    Search.setContent("")
+    $('#search-control-previous').css("visibility", "hidden")
+    $('#search-control-next').css("visibility", "hidden")
+    $("#search-results-images").css("display", "none")
+    $("#search-controls").css("display", "none")
+  }
+  
+
+}
+
+$('#content a').live('hover', function(event) {
+    if (event.type == 'mouseover') {
+      var img = Search.imageCache.displayedImages[this.index]
+      if (img.animated) {
+        img.width = img.adjWidth
+        img.height = img.adjHeight
+        $(this).addClass("animating")
+        $(this).append(img)
+      }
+    } else {
+      var img = Search.imageCache.displayedImages[this.index]
+      if (img.animated) {
+        $(this).removeClass("animating")
+        this.removeChild(img)
+      }
+    }
+});
+    
+\ No newline at end of file
diff --git a/static/tests/space.packing/spacefill.js b/static/tests/space.packing/spacefill.js
new file mode 100755
index 0000000..6a2e0a5
--- /dev/null
+++ b/static/tests/space.packing/spacefill.js
@@ -0,0 +1,93 @@
+var ColumnFill = {
+  "init": function(){
+    var cfg = SpaceFill.config
+    var numColumns = ColumnFill.calcColumns()
+    ColumnFill.columns = []
+    for (var i = 0; i < numColumns; i++) {
+        ColumnFill.columns.push({"height": 0})
+    }
+
+    cfg.marginWidth = cfg.marginHeight = cfg.minMargin
+
+    if (cfg.spacing == "center") {
+      cfg.columnSpacingAmt = (cfg.width - (numColumns * (cfg.columnWidth + cfg.marginWidth) + cfg.marginWidth)) / 2
+    } else if (cfg.spacing == "justify") {
+      cfg.marginWidth = (cfg.width - (numColumns * cfg.columnWidth)) / (numColumns + 1)
+    }
+
+
+  },
+  "add": function(obj){
+    var cfg = SpaceFill.config
+    var colIndex = ColumnFill.shortestColumn()
+    var col = ColumnFill.columns[colIndex]
+
+    if (cfg.spacing == "center") {
+      var colLeft = colIndex * (cfg.marginWidth + cfg.columnWidth) + cfg.columnSpacingAmt
+      var imgLeft = Math.floor((cfg.marginWidth / 2) + (cfg.columnWidth / 2) - (parseInt(obj.style.width) / 2)) + colLeft + "px"
+    } else if (cfg.spacing == "justify") {
+      var colLeft = (colIndex * (cfg.marginWidth + cfg.columnWidth))
+      var imgLeft = Math.floor((cfg.marginWidth / 2) + (cfg.columnWidth / 2) - (parseInt(obj.style.width) / 2)) + colLeft + "px"
+    }
+
+    obj.style.position = 'absolute'
+    obj.style.top = col.height + cfg.marginHeight + "px"
+    obj.style.left = imgLeft
+
+    col.height += cfg.marginHeight + parseInt(obj.style.height)
+
+    $(cfg.container).append(obj)
+
+  },
+  "calcColumns": function(){
+    var cfg = SpaceFill.config
+    var numColumns = 0
+    var width = cfg.width - cfg.minMargin
+    var columnSub = cfg.columnWidth + cfg.minMargin
+    while (width > columnSub) {
+      width -= columnSub
+      numColumns++
+    }
+    return numColumns
+  },
+  "shortestColumn": function(){
+    var min = Infinity
+    var mindex = 0
+    for(var i = 0; i< ColumnFill.columns.length; i++){
+      var col = ColumnFill.columns[i]
+      if ( min > col.height) {
+        min = col.height
+        mindex = i
+      }
+    }
+
+    return mindex
+  },
+  "isSpaceFilled": function(){
+    var config = SpaceFill.config
+    var colIndex = ColumnFill.shortestColumn()
+    var col = ColumnFill.columns[colIndex]
+
+    if (col.height > 4 * config.height) return true;
+    else return false;
+
+
+  }
+
+}
+
+var SpaceFill = {
+
+  "init": function(config){
+    config.type = "columns"
+    SpaceFill.config = config
+
+    SpaceFill.types[config.type].init()
+    SpaceFill.add = SpaceFill.types[config.type].add
+
+
+  },
+
+  "types": { "columns": ColumnFill }
+
+}
+\ No newline at end of file
author	tim b <timb@camcompu.home>	2010-09-22 21:23:20 -0700
committer	tim b <timb@camcompu.home>	2010-09-22 21:23:20 -0700
commit	177ed4b6aa9c6c4e93a4a5a95ea24fb6db66077a (patch)
tree	5340aa780f8452889c1008478fd160d9516d8a63
parent	c14c9b94c87a5a0d54158a1b45c20f66d4607aa1 (diff)