diff options
Diffstat (limited to 'static/html')
| -rw-r--r-- | static/html/search.test.html | 216 | ||||
| -rw-r--r-- | static/html/space.packing.html | 174 |
2 files changed, 390 insertions, 0 deletions
diff --git a/static/html/search.test.html b/static/html/search.test.html new file mode 100644 index 0000000..6db9224 --- /dev/null +++ b/static/html/search.test.html @@ -0,0 +1,216 @@ +<!DOCTYPE html> +<html> + <head> + <title>dump.fm image search</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta name="keywords" content="dump.fm,hot girls, hot guys, image chat, realtime, internet 3.0, dump, dump fm, image dump, pictures, image links, image board"> + <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="http://dump.fm/static/js/jquery-ui-1.8.effects.min.js"></script> + + <script type="text/javascript" src="http://dump.fm/static/js/pichat.js"></script> + <link rel="stylesheet" type="text/css" href="http://dump.fm/static/css/dump.css"> + + + <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" + type="text/css" media="all" /> + <link rel="stylesheet" href="http://dump.fm/static/css/admin.css" + type="text/css" media="all" /> + <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" + type="text/javascript"></script> + <script src="http://dump.fm/static/js/admin.js" type="text/javascript"></script> + + <link rel="shortcut icon" href="http://dump.fm/static/favicon.ico"> + + <!--[if IE]> + <script> + window.location = "http://dump.fm/error/ie"; + </script> + <![endif]--> + <style> + body{margin:6%;} + img { max-width: 400px; max-height: 400px;} + h1 { width: 40%; display:inline-block; margin: 20px; font-size: 30px;} + #content { overflow: visible} + #content a { position: relative; display:inline-block; } + #content a canvas { position:absolute; z-index: 0; top: 0; left: 0; } + #content a img { position:absolute; z-index: 1; top:0; left: 0; } + #content a.animating canvas { display: none } + </style> + </head> + <body class="profile" style="margin:1%;"> + + <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> + + </body> + + + <script> + + + $('#content a').live('hover', function(event) { + if (event.type == 'mouseover') { + var i = imageCache[this.index] + if (i.animated) { + i.img.width = Math.floor(i.width / 2) + i.img.height = Math.floor(i.height / 2) + $(this).addClass("animating") + $(this).append(i.img) + } + } else { + var i = imageCache[this.index] + if (i.animated) { + $(this).removeClass("animating") + this.removeChild(i.img) + } + } +}); + + var term = "" + var imagesPerPage = 25; + var images = [] + + var imageCache = [] + + var Search = {}; + + function addScript(term){ + jQuery("#search-script").remove() + jQuery("head").append("<scr"+"ipt src='http://dump.fm/cmd/ghettosearch/"+term+"' id='search-script'></sc"+"ript>") + } + + function setContent(x){ + jQuery("#content").html(x) + } + + function setMessage(x){ + jQuery("#message").html(x) + } + + Search.searchError = function(error){ + setContent("") + setMessage(error) + } + + var LoadedCheckerTimer = 0; + function startLoadedChecker(){ + stopLoadedChecker() + LoadedCheckerTimer = setTimeout(loadedChecker, 500) + } + function loadedChecker(){ + for(var j =0; j<imageCache.length; j++){ + var i = imageCache[j]; + if (i.img.complete && !i.shown) { + if (i.img.height == 0 || i.img.height == NaN || i.img.width == 0 || i.img.width == NaN) { + i.shown = true; continue; + } + //console.log("loaded " + i.img.src + " " + i.img.width + "x" + i.img.height) + + i.width = i.img.width + i.height = i.img.height + + var width = Math.floor(i.img.width / 2) + var height = Math.floor(i.img.height / 2) + + var c = document.createElement("canvas") + c.width = width + c.height = height + c.index = j + + var ctx = c.getContext('2d'); + ctx.drawImage(i.img, 0, 0, c.width, c.height) + + var a = document.createElement("a") + a.index = j + a.href = i.img.src + a.style.width = width + "px" + a.style.height = height + "px" + a.id = "imagelink-" + j; + + a.appendChild(c) + + $("#content").append(a) + + i.shown = true + } + } + + LoadedCheckerTimer = setTimeout(loadedChecker, 500) + } + function stopLoadedChecker(){ + clearTimeout(LoadedCheckerTimer) + } + + function renderPage(num){ + + setContent("") + delete window['imageCache'] + imageCache = [] + + var tempLimit = 200; + for(var i=0; i<images.length && i<tempLimit; i++) { + var img = new Image(); + img.src = images[i]; + var animated = (parseUri(img.src)["file"].toLowerCase().substr(-3) == "gif") ? true : false; + imageCache.push({"img": img, "shown": false, "animated": animated}) + } + startLoadedChecker(); + + + /*if (images.length > 0) + setMessage("page " + (num + 1)); + var contentString = '' + var start = num * imagesPerPage + var imageCounter = 0 + for(var i = start; i < images.length; i++){ + if(imageCounter > imagesPerPage) break; + contentString += '<a href="'+images[i]+'"><img src="'+images[i]+'"></a>' + imageCounter += 1 + } + contentString += '<br><br>' + if(num > 0) + contentString += '<a href="javascript:renderPage('+(num-1)+')"><h1>previous</h1></a> ' + if (images.length > start + imageCounter) + contentString += ' <a href="javascript:renderPage('+(num+1)+')"><h1>next</h1></a>' + setContent(contentString)*/ + } + + Search.searchResult = function(results){ + images = [] + if(results === null || results.length == 0) { + setContent("") + setMessage("no results found") + } else { + for(var r = 0; r<results.length; r++) + images.push(results[r].url) + renderPage(0) + } + } + + var tokens = [] + + function doSearch(){ + term = jQuery("#search-query").val().trim().toLowerCase() + var rawTokens = term.split(" ") + tokens = [] + for(var t = 0; t < rawTokens.length; t++) { + if (rawTokens[t].length > 2) + tokens.push(rawTokens[t]) + } + if (tokens.length == 0) { + setMessage("search query too small") + } else { + setMessage("searching for '"+tokens.join(" and ")+"'") + addScript(tokens.join("+")) + } + } + + jQuery("#search-query").keydown(ifEnter(doSearch)) + + </script> + +</html> + diff --git a/static/html/space.packing.html b/static/html/space.packing.html new file mode 100644 index 0000000..7f46061 --- /dev/null +++ b/static/html/space.packing.html @@ -0,0 +1,174 @@ +<!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> + + <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> + +var marginWidth = 16 +var marginHeight = 16 + +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() + var numColumns = calcColumns() + Columns = [] + for (var i = 0; i < numColumns; i++) { + Columns.push({"height": 0}) + } + + if (columnSpacingStyle == "center") { + marginWidth = 16 + columnSpacingAmt = (Width - (numColumns * (columnSize + marginWidth) + marginWidth)) / 2 + + } else if (columnSpacingStyle == "justify") + marginWidth = (Width - (numColumns * columnSize)) / (numColumns + 1) + + + setTimeout(fill, 50) +} + + +function fill(){ + var img = randomImage() + + var colIndex = shortestColumn() + var col = Columns[colIndex] + + if (col.height > 2 * Height) return; + + if (columnSpacingStyle == "center") { + var colLeft = colIndex * (marginWidth + columnSize) + columnSpacingAmt + var imgLeft = Math.floor((marginWidth / 2) + (columnSize / 2) - (parseInt(img.style.width) / 2)) + colLeft + "px" + } else if (columnSpacingStyle == "justify") { + var colLeft = (colIndex * (marginWidth + columnSize)) + var imgLeft = Math.floor((marginWidth / 2) + (columnSize / 2) - (parseInt(img.style.width) / 2)) + colLeft + "px" + } + + + + img.style.position = 'absolute' + img.style.top = col.height + marginHeight + "px" + img.style.left = imgLeft + + col.height += marginHeight + parseInt(img.style.height) + + $("#content").append(img) + + setTimeout(fill, 50) + +} + +function shortestColumn(){ + var min = Infinity + var mindex = 0 + for(var i = 0; i< Columns.length; i++){ + var col = Columns[i] + if ( min > col.height) { + min = col.height + mindex = i + } + } + + return mindex + + +} + + + +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 calcColumns(){ + var minMargin = 16 + var columns = 0; + var width = Width - minMargin; + var columnSub = columnSize + minMargin + while (width > columnSub) { + width -= columnSub + columns ++ + } + + return columns + +} + +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> + |