summaryrefslogtreecommitdiff
path: root/htmljs
diff options
context:
space:
mode:
Diffstat (limited to 'htmljs')
-rwxr-xr-xhtmljs/gallery/gallery706
-rw-r--r--htmljs/gallery/gallery_main.css245
-rw-r--r--htmljs/gallery/gallery_main.js156
-rw-r--r--htmljs/gallery/index.html97
4 files changed, 1204 insertions, 0 deletions
diff --git a/htmljs/gallery/gallery b/htmljs/gallery/gallery
new file mode 100755
index 0000000..2b891f2
--- /dev/null
+++ b/htmljs/gallery/gallery
@@ -0,0 +1,706 @@
+#!/usr/bin/python2.7
+import os
+import cgi
+import re
+
+import random
+
+import db
+db = db.db()
+
+BASE_HREF = "http://i.asdf.us/im/"
+PARAMLIST = "addr start limit name interface random tag"
+SQL_LIMIT = 20
+QUERY_LIMIT = 20;
+
+def get_params (paramlist):
+ paramkeys = paramlist.split()
+ form = {}
+ try:
+ qs = os.environ['QUERY_STRING']
+ except:
+ qs = ""
+ if len(qs):
+ pairs = qs.replace("&", "&").split("&")
+ for pair in pairs:
+ k,v = pair.split("=", 1)
+ form[k] = v
+ params = {}
+ for key in paramkeys:
+ if key in form:
+ if key == "random":
+ params[key] = sanitizeInteger(form["random"])
+ else:
+ params[key] = sanitize(form[key])
+ else:
+ params[key] = None
+ return params
+
+def tagTranslate(s):
+ table = {
+ "grid" : "imGrid",
+ "gradient" : "imGradient",
+ "break" : "imBreak"
+ }
+ if s in table:
+ return table[s]
+ else:
+ return s
+
+def sanitize (str):
+ return re.sub(r'\W+', '', str)
+def sanitizeInteger (str):
+ return re.sub(r'\D+', '', str)
+def get_files (params):
+ sql = "SELECT * FROM im_cmd "
+ args = []
+ where = []
+
+ if params['start'] is not None:
+ where.append("id < %s")
+ args.append(params['start'])
+ if params['name'] is not None:
+ where.append("name=%s")
+ args.append(params['name'])
+ if params['tag'] is not None:
+ where.append("tag=%s")
+ args.append(tagTranslate(params['tag']))
+ if len(where):
+ sql += "WHERE "
+ sql += " AND ".join(where)
+ sql += " "
+
+ if params['random'] is not None:
+ if params['random'] == '1':
+ sql += "ORDER BY RAND(" + str(random.randint(1,2**63)) + ") "
+ else:
+ sql += "ORDER BY RAND(" + params['random'] + ") "
+ else:
+ sql += "ORDER BY id DESC "
+ sql += "LIMIT %s"
+
+ if params['limit'] is not None:
+ args.append( int(params['limit']) )
+ else:
+ args.append( SQL_LIMIT )
+ db.execute(sql, args)
+ rows = db.cursor.fetchall ()
+ return rows
+
+def is_image (img):
+ if "jpeg" in img:
+ return True
+ if "jpg" in img:
+ return True
+ if "gif" in img:
+ return True
+ if "png" in img:
+ return True
+ return False
+
+
+params = get_params(PARAMLIST)
+
+titlephrase = random.choice([
+ 'Keep on pickin\' on..',
+ 'Pickolaus Pickleby by Charles Pickens!',
+ 'You pick potato and I pick potahto...',
+ 'Take your piq!',
+ 'Show em what you got',
+ 'I sure know how to pick \'em',
+ 'Jus pick somethin already!',
+ 'You can\'t pick your friends...',
+ 'Select your image my liege',
+ 'There\'s a time to choose...',
+ 'gimme a choice! gimme lil\' choice-a-that...',
+ 'You choose you lose',
+ 'novels by James CHOICE...',
+ 'Choose away, chooser-man...',
+ ])
+
+print "Content-type: text/html"
+print "Pragma: no-cache"
+print
+print """
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+"""
+print "<title>"+titlephrase+"</title>"
+print"""
+<script type="text/javascript" src="/js/jquery.js"></script>
+<script type="text/javascript" src="/js/titleScrambler.js"></script>
+<script type="text/javascript">
+var imagedata = [ """
+
+files = get_files(params)
+count = 0
+lowest_id = 999999999999
+for f in files:
+ # url = BASE_HREF + f.replace(" ","%20")
+ url = BASE_HREF + f[5] + "/" + f[7]
+ username = f[3]
+ print ' ["%s", "%s"],' % (url, username);
+ lowest_id = min(f[0], lowest_id)
+print " []" #putting this here to handle the last "," which causes a crash in ie
+#print "<div><img src='%s' username='%s' class='pb' /></div>" % (url, username)
+#print "</div>"
+print """]
+$(function(){
+ for (var i=0; i< (imagedata.length - 1); i++){
+ var newDiv = document.createElement("div");
+ var newImage = document.createElement("img");
+ newImage.src = imagedata[i][0];
+ newImage.className = "pb";
+ newDiv.appendChild(newImage);
+// consider calling something like isotope add here...and ONLY APPENDING the image to the parent div once it has loaded
+// $(newImage).load(function(){
+// console.log("like a true playa");
+// })
+ $("#images").append(newDiv);
+ }
+});
+</script>
+<script type="text/javascript" src="/js/jquery.isotope.min.js"></script>
+<script type="text/javascript" src="/js/gallery_isotope_config.js?v=3"></script>
+<style type="text/css">
+
+html,body{width:100%;height:100%;margin:0;padding:0;}
+ """
+if params['interface'] is not None and params['interface'] == "off":
+ print """
+body
+ {
+ background-color: white;
+ padding: 0; margin: 0;
+ }
+#images
+ {
+ margin: 12px 0 0 8px;
+ }
+div, div img
+ {
+ padding: 0; margin: 0;
+ margin-left: -4px;
+ margin-top: -4px;
+ }
+"""
+else:
+ print """
+body
+ {
+ background-color: #eee;
+ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.32, rgb(245,238,235)), color-stop(0.66, rgb(252,252,252)));
+ background-image: -moz-linear-gradient( center bottom, rgb(245,238,235) 32%, rgb(252,252,252) 66%); overflow-y: scroll;
+ }
+"""
+print """
+html
+ {
+ padding-bottom: 200px;
+ }
+#images
+ {
+ width: 100%;
+ margin-top:70px;
+ }
+#images div
+ {
+ width: 200px;
+ display: inline-block;
+ }
+div img
+ {
+ max-width: 200px;
+ max-height: 200px;
+ border: 0;
+ }
+#images img
+ {
+ cursor: pointer;
+ display: none;
+ }
+#dump
+ {
+ position: fixed;
+ left: 0;
+ bottom: 10px;
+ padding: 10px;
+ width: 100%;
+ border-bottom: 2px solid #000;
+ background-color: #f8f8f8;
+ border-top: 1px solid #888;
+ z-index: 1000;
+ }
+#dump #rebus
+ {
+ clear: right;
+ width: 90%;
+ max-height: 700px;
+ overflow-y: scroll;
+ background-color: #fff;
+ padding-bottom: 5px;
+ border-bottom: 1px solid #ddd;
+ margin-bottom: 5px;
+ }
+#dump #rebus img
+ {
+ cursor: pointer;
+ display: inline;
+ max-width: 400px;
+ max-height: 400px;
+ margin-right: -4px;
+ }
+#dump #urlz
+ {
+ width: 90%;
+ font-size: 15px;
+ }
+#actions
+ {
+ position: fixed;
+ top: 10px;
+ left: 10px;
+ cursor: pointer;
+ text-align: left;
+ font-family: sans-serif;
+ z-index:1000;
+ }
+#tags
+ {
+ position: fixed;
+ top: 10px;
+ left: 200px;
+ cursor: pointer;
+ text-align: left;
+ font-family: sans-serif;
+ z-index:1000;
+ }
+#help
+ {
+ position: fixed;
+ top: 10px;
+ right: 10px;
+ cursor: pointer;
+ text-align: right;
+ font-family: sans-serif;
+ z-index:1000;
+ }
+#help b {
+ text-align: right;
+}
+#help div{
+ background: rgba(200,200,200,0.8);
+}
+#keys div{
+ background: none;
+}
+#help .small{
+ font-size: 11px;
+}
+#help b, #actions b, #tags b
+ {
+ padding: 5px;
+ background-color: #f8f4fb;
+ display: block;
+ max-width: 160px;
+ }
+#help b:hover, #actions b:hover, #tags b:hover
+ {
+ color: cyan;
+
+ }
+#help #keys, #sorting-optionsContainer, #tag-optionsContainer
+ {
+ clear: both;
+ padding: 5px;
+ display: none;
+ min-width: 120px;
+ font-size: 14px;
+ }
+.sorting-options, .tag-options {
+ color:black;
+ cursor: pointer;
+ background: rgba(200,200,200,0.8);
+}
+.tag-clear{
+ color:#333;
+ cursor: pointer;
+ background: rgba(200,200,200,0.8);
+
+}
+.sorting-optionsContainer div:hover{
+ color: red;
+}
+.tag-optionsContainer div:hover{
+ color: pink;
+}
+.sorting-options:hover, .tag-options:hover, .tag-clear:hover {
+background: gold;
+}
+#nextpage
+ {
+ position: fixed;
+ right: 190px;
+ font-family: sans-serif;
+ top: 10px;
+ padding: 5px;
+ background-color: rgba(255,255,255,0.7);
+ z-index:9999
+ }
+#nextpage a
+ {
+ color: #33f;
+ }
+.rtlink
+ {
+ display: block;
+ width: 100%;
+ text-align: right;
+ }
+#d_clip_container
+ {
+ display: inline-block;
+ }
+#d_clip_button, #clear
+ {
+ font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
+ color: #333;
+ font-size: 13px;
+ line-height: 13px;
+ text-align: center;
+ margin: 2px; padding: 5px;
+ display: inline-block;
+ border-top: 1px solid #888;
+ border-left: 1px solid #888;
+ border-right: 1px solid #555;
+ border-bottom: 1px solid #333;
+ background-image: linear-gradient(bottom, rgb(235,235,235) 0%, rgb(250,250,250) 53%);
+ background-image: -o-linear-gradient(bottom, rgb(235,235,235) 0%, rgb(250,250,250) 53%);
+ background-image: -moz-linear-gradient(bottom, rgb(235,235,235) 0%, rgb(250,250,250) 53%);
+ background-image: -webkit-linear-gradient(bottom, rgb(235,235,235) 0%, rgb(250,250,250) 53%);
+ background-image: -ms-linear-gradient(bottom, rgb(235,235,235) 0%, rgb(250,250,250) 53%);
+ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(235,235,235)), color-stop(0.53, rgb(250,250,250)));
+ }
+#d_clip_button.hover, #clear:hover
+ {
+ color: #555;
+ background-image: linear-gradient(bottom, rgb(245,240,245) 0%, rgb(255,255,255) 78%);
+ background-image: -o-linear-gradient(bottom, rgb(245,240,245) 0%, rgb(255,255,255) 78%);
+ background-image: -moz-linear-gradient(bottom, rgb(245,240,245) 0%, rgb(255,255,255) 78%);
+ background-image: -webkit-linear-gradient(bottom, rgb(245,240,245) 0%, rgb(255,255,255) 78%);
+ background-image: -ms-linear-gradient(bottom, rgb(245,240,245) 0%, rgb(255,255,255) 78%);
+ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(245,240,245)), color-stop(0.78, rgb(255,255,255)));
+ }
+#d_clip_button.active, #clear:active
+ {
+ color: #111;
+ border-top: 1px solid #333;
+ border-left: 1px solid #555;
+ border-right: 1px solid #555;
+ border-bottom: 1px solid #333;
+ background-image: linear-gradient(bottom, rgb(194,194,194) 0%, rgb(235,235,235) 53%);
+ background-image: -o-linear-gradient(bottom, rgb(194,194,194) 0%, rgb(235,235,235) 53%);
+ background-image: -moz-linear-gradient(bottom, rgb(194,194,194) 0%, rgb(235,235,235) 53%);
+ background-image: -webkit-linear-gradient(bottom, rgb(194,194,194) 0%, rgb(235,235,235) 53%);
+ background-image: -ms-linear-gradient(bottom, rgb(194,194,194) 0%, rgb(235,235,235) 53%);
+ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(194,194,194)), color-stop(0.53, rgb(235,235,235)));
+ }
+
+.pulsate_and_grow {
+ -webkit-animation: pulsate_and_grow 0.5s ease-out;
+ -webkit-animation-iteration-count: 3;
+ opacity: 1.0;
+}
+@-webkit-keyframes pulsate_and_grow {
+ 0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.1;}
+ 50% {opacity: 1.0;}
+ 100% {-webkit-transform: scale(1.0, 1.0); opacity: 0.1;}
+}
+.tag-options:active, .tag-clear:active {
+ -webkit-animation: pulsate_opacity 0.5s ease-out;
+ -webkit-animation-iteration-count: 3;
+ opacity: 1.0;
+
+}
+.sorting-options:active {
+ -webkit-animation: pulsate_opacity 0.5s ease-out;
+ -webkit-animation-iteration-count: 3;
+ opacity: 1.0;
+
+}
+@-webkit-keyframes pulsate_opacity{
+ 0% { opacity: 0.1;}
+ 50% {opacity: 1.0;}
+ 100% {opacity: 0.1;}
+}
+</style>
+<link href="/im/gallery_style.css" type="text/css" rel="stylesheet" />
+<script type="text/javascript">
+$(function(){
+ $("b").addClass("pulsate_and_grow");
+ $(".sorting-options").click(function(){
+
+ $(".sorting-options").click(function(){
+ console.log("wazzup");
+ if ($(this).hasClass("pulsate_opacity")){
+ $(this).removeClass("pulsate_opacity");
+ }
+ $(this).addClass("pulsate_opacity");
+
+ });
+ });
+});
+
+</script>
+</head>
+<body>
+<div id="help">
+ <b>key controls</b>
+ <div id="keys">
+ <br/>
+ <div class="small"><i>when composer is launched...</i></div>
+ <div>ESC toggle</div>
+ <div>C clear</div>
+ <div>R reverse</div>
+ <br/>
+ <div class="small"><i>in the gallery...</i></div>
+ <div>BACKSPACE delete</div>
+ <div>LEFT ARROW newer</div>
+ <div>RIGHT ARROW older</div>
+ </div>
+</div>
+<div id="actions">
+ <b>sort</b>
+ <div id="sorting-optionsContainer">
+ <div class="sorting-options" id="date">date</div>
+ <div class="sorting-options" id="username">username</div>
+ <div class="sorting-options" id="height">height</div>
+ <div class="sorting-options" id="width">width</div>
+ <div class="sorting-options" id="gif">gif</div>
+ <div class="sorting-options" id="shuffle">shuffle</div>
+ <div class="sorting-options" id="lombada">lombada</div>
+ </div>
+</div>
+<div id="tags">
+ <b>tags</b>
+ <div id="tag-optionsContainer">
+
+
+ <div class="tag-clear" ><i>remove tag</i></div>
+ <div class="tag-options" id="transparent">transparent</div>
+ <div class="tag-options" id="break">break</div>
+ <div class="tag-options" id="gradient">gradient</div>
+ <div class="tag-options" id="grid">grid</div>
+ <div class="tag-options" id="shader">shader</div>
+ <div class="tag-options" id="Over">Over</div>
+ <div class="tag-options" id="ATop">ATop</div>
+ <div class="tag-options" id="Dst_Over">Dst_Over</div>
+ <div class="tag-options" id="Dst_In">Dst_In</div>
+ <div class="tag-options" id="Dst_Out">Dst_Out</div>
+ <div class="tag-options" id="Multiply">Multiply</div>
+ <div class="tag-options" id="Screen">Screen</div>
+ <div class="tag-options" id="Divide">Divide</div>
+ <div class="tag-options" id="Plus">Plus</div>
+ <div class="tag-options" id="Difference">Difference</div>
+ <div class="tag-options" id="Exclusion">Exclusion</div>
+ <div class="tag-options" id="Lighten">Lighten</div>
+ <div class="tag-options" id="Darken">Darken</div>
+ <div class="tag-options" id="Overlay">Overlay</div>
+ <div class="tag-options" id="Hard_Light">Hard_Light</div>
+ <div class="tag-options" id="Soft_Light">Soft_Light</div>
+ <div class="tag-options" id="Pegtop_Light">Pegtop_Light</div>
+ <div class="tag-options" id="Linear_Light">Linear_Light</div>
+ <div class="tag-options" id="Vivid_Light">Vivid_Light</div>
+ <div class="tag-options" id="Pin_Light">Pin_Light</div>
+ <div class="tag-options" id="Linear_Dodge">Linear_Dodge</div>
+ <div class="tag-options" id="Linear_Burn">Linear_Burn</div>
+ <div class="tag-options" id="Color_Dodge">Color_Dodge</div>
+ <div class="tag-options" id="Color_Burn">Color_Burn</div>
+
+ </div>
+</div>
+<div id="dump">
+ <div id="rebus"></div>
+ <input id="urlz" type="text" />
+ <div id="d_clip_container" style="position:relative">
+ <div id="d_clip_button">copy</div>
+ </div>
+ <button id="clear">clear</button>
+</div>
+<div id="images">
+"""
+
+
+previous_id = lowest_id + (SQL_LIMIT * 2)
+back = ["start=%d" % lowest_id, "limit=%d" % SQL_LIMIT]
+newer = ["start=%d" % previous_id, "limit=%d" % SQL_LIMIT]
+random_time = ""
+if params['name'] is not None:
+ back.append("name=%s" % params['name'])
+ newer.append("name=%s" % params['name'])
+ random_time = "name=%s" % params['name']
+if params['tag'] is not None:
+ back.append("tag=%s" % params['tag'])
+ newer.append("tag=%s" % params['tag'])
+ random_time = "tag=%s" % params['tag']
+
+newer_QS = "&".join(newer)
+back_QS = "&".join(back)
+random_time_QS = "";
+if random_time:
+ random_time_QS = "&%s" % random_time;
+print "<div id='nextpage'>"
+print "<a href='/im/'>editor</a>"
+print "|"
+print "<a href='?%s'>&larr; newer</a>" % newer_QS;
+print "|"
+if params['random'] is not None and params['random'] == '1':
+ print "<a href='?random=%d%s'>random</a>" % (random.randint(1,2**63), random_time_QS);
+else:
+ print "<a href='?random=%d%s'>random</a>" % (1, random_time_QS);
+print "|"
+print "<a href='?%s'>older &rarr;</a>" % back_QS;
+print "</div>"
+print """
+</body>
+<script type="text/javascript" src="/js/ZeroClipboard.js"></script>
+<script type="text/javascript" src="http://asdf.us/js/pbembed.js"></script>
+<script type="text/javascript">
+ZeroClipboard.setMoviePath( 'http://asdf.us/swf/ZeroClipboard10.swf' );
+var clip = new ZeroClipboard.Client();
+clip.glue( 'd_clip_button' );
+var Dump =
+ {
+ pick: function ()
+ {
+ Dump.pickUrl( $(this).attr("src") )
+ },
+ pickUrl: function (url)
+ {
+ $("#rebus").append ($ ("<img>").attr ("src", url))
+ $("#rebus").show()
+ var theDump = $("#urlz").val() + " " + url
+ $("#urlz").val( theDump )
+ clip.setText( theDump )
+ return false
+ },
+ clear: function ()
+ {
+ $("#rebus").html("")
+ $("#urlz").val("")
+ clip.setText("")
+ },
+ backspace: function ()
+ {
+ $("#rebus img:last").remove()
+ var urllist = $("#urlz").val().split(" ")
+ urllist.pop()
+ $("#urlz").val( urllist.join(" ") )
+ },
+ reverse: function ()
+ {
+ urllist = $("#urlz").val().split(" ")
+ Dump.clear()
+ for (i in urllist.reverse())
+ if (urllist[i])
+ Dump.pickUrl(urllist[i])
+ },
+ showNewer: function()
+ {
+ window.location.href = '?"""+newer_QS+"""'
+ },
+ showOlder: function()
+ {
+ window.location.href = '?"""+back_QS+"""'
+ }
+ }
+function applyTag(tagname){
+ tag_regex = /&tag=[^&]*/;
+ if (document.URL.match(tag_regex)){
+ return document.URL.replace(tag_regex, "&tag="+tagname);
+ }else if(document.URL.match(/\/$/)){
+ return document.URL.replace(/\/$/, "?tag="+tagname);
+ }
+ else{
+ return document.URL+"&tag="+tagname;
+ }
+}
+var Main =
+ {
+ editing: false,
+ kp: function (event)
+ {
+ console.log(event.keyCode);
+ switch (event.keyCode)
+ {
+ // BS
+ case 8:
+ if (! Main.editing)
+ Dump.backspace()
+ return false
+ // C
+ case 67:
+ if (! Main.editing)
+ Dump.clear()
+ break
+ // R
+ case 82:
+ if (! Main.editing)
+ Dump.reverse()
+ break
+ // ESC
+ case 27:
+ // H
+ case 72:
+ if (! Main.editing)
+ $("#rebus").toggle()
+ break
+ // LEFT ARROW
+ case 37:
+ if (! Main.editing)
+ Dump.showNewer()
+ break
+ // RIGHT ARROW
+ case 39:
+ if (! Main.editing)
+ Dump.showOlder()
+ break
+ }
+ return true
+ },
+ poll: function ()
+ {
+ },
+ pollCallback: function ()
+ {
+ },
+ init: function ()
+ {
+ $(document).keydown(Main.kp)
+ $("#urlz").focus(function(){ Main.editing = true })
+ $("#urlz").blur(function(){ Main.editing = false })
+ $("#clear").live("click", Dump.clear)
+ $("#help").click(function(){ $("#keys").slideToggle() })
+ $("#actions b").click(function(){ $("#sorting-optionsContainer").slideToggle() })
+ $("#tags b").click(function(){ $("#tag-optionsContainer").slideToggle() })
+ $(".tag-options").click(function(){document.location.href= applyTag(this.id)});
+ $(".tag-clear").click(function(){ document.location.href = document.URL.replace(/&?tag=[^&]*/ ,"").replace(/\?$/,"")});
+ $("div img").live("click", Dump.pick)
+ Dump.clear()
+ }
+ }
+"""
+if params['interface'] is not None and params['interface'] == "off":
+ print """
+$("#nextpage,#help,#dump").hide()
+$("body").css({"margin": 0, "padding": 0, "overflow": hidden, "background-color": white})
+"""
+else:
+ print "Main.init()"
+print """
+</script>
+</html>
+"""
+
diff --git a/htmljs/gallery/gallery_main.css b/htmljs/gallery/gallery_main.css
new file mode 100644
index 0000000..3f06b19
--- /dev/null
+++ b/htmljs/gallery/gallery_main.css
@@ -0,0 +1,245 @@
+body
+ {
+ background-color: #eee;
+ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.32, rgb(245,238,235)), color-stop(0.66, rgb(252,252,252)));
+ background-image: -moz-linear-gradient( center bottom, rgb(245,238,235) 32%, rgb(252,252,252) 66%); overflow-y: scroll;
+ }
+html
+ {
+ padding-bottom: 200px;
+ }
+#images
+ {
+ width: 100%;
+ margin-top:70px;
+ }
+#images div
+ {
+ width: 200px;
+ display: inline-block;
+ }
+div img
+ {
+ max-width: 200px;
+ max-height: 200px;
+ border: 0;
+ }
+#images img
+ {
+ cursor: pointer;
+ display: none;
+ }
+#dump
+ {
+ position: fixed;
+ left: 0;
+ bottom: 10px;
+ padding: 10px;
+ width: 100%;
+ border-bottom: 2px solid #000;
+ background-color: #f8f8f8;
+ border-top: 1px solid #888;
+ z-index: 1000;
+ }
+#dump #rebus
+ {
+ clear: right;
+ width: 90%;
+ max-height: 700px;
+ overflow-y: scroll;
+ background-color: #fff;
+ padding-bottom: 5px;
+ border-bottom: 1px solid #ddd;
+ margin-bottom: 5px;
+ }
+#dump #rebus img
+ {
+ cursor: pointer;
+ display: inline;
+ max-width: 400px;
+ max-height: 400px;
+ margin-right: -4px;
+ }
+#dump #urlz
+ {
+ width: 90%;
+ font-size: 15px;
+ }
+#actions
+ {
+ position: fixed;
+ top: 10px;
+ left: 10px;
+ cursor: pointer;
+ text-align: left;
+ font-family: sans-serif;
+ z-index:1000;
+ }
+#tags
+ {
+ position: fixed;
+ top: 10px;
+ left: 200px;
+ cursor: pointer;
+ text-align: left;
+ font-family: sans-serif;
+ z-index:1000;
+ }
+#help
+ {
+ position: fixed;
+ top: 10px;
+ right: 10px;
+ cursor: pointer;
+ text-align: right;
+ font-family: sans-serif;
+ z-index:1000;
+ }
+#help b {
+ text-align: right;
+}
+#help div{
+ background: rgba(200,200,200,0.8);
+}
+#keys div{
+ background: none;
+}
+#help .small{
+ font-size: 11px;
+}
+#help b, #actions b, #tags b
+ {
+ padding: 5px;
+ background-color: #f8f4fb;
+ display: block;
+ max-width: 160px;
+ }
+#help b:hover, #actions b:hover, #tags b:hover
+ {
+ color: cyan;
+
+ }
+#help #keys, #sorting-optionsContainer, #tag-optionsContainer
+ {
+ clear: both;
+ padding: 5px;
+ display: none;
+ min-width: 120px;
+ font-size: 14px;
+ }
+.sorting-options, .tag-options {
+ color:black;
+ cursor: pointer;
+ background: rgba(200,200,200,0.8);
+}
+.tag-clear{
+ color:#333;
+ cursor: pointer;
+ background: rgba(200,200,200,0.8);
+
+}
+.sorting-optionsContainer div:hover{
+ color: red;
+}
+.tag-optionsContainer div:hover{
+ color: pink;
+}
+.sorting-options:hover, .tag-options:hover, .tag-clear:hover {
+background: gold;
+}
+#nextpage
+ {
+ position: fixed;
+ right: 190px;
+ font-family: sans-serif;
+ top: 10px;
+ padding: 5px;
+ background-color: rgba(255,255,255,0.7);
+ z-index:9999
+ }
+#nextpage a
+ {
+ color: #33f;
+ }
+.rtlink
+ {
+ display: block;
+ width: 100%;
+ text-align: right;
+ }
+#d_clip_container
+ {
+ display: inline-block;
+ }
+#d_clip_button, #clear
+ {
+ font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
+ color: #333;
+ font-size: 13px;
+ line-height: 13px;
+ text-align: center;
+ margin: 2px; padding: 5px;
+ display: inline-block;
+ border-top: 1px solid #888;
+ border-left: 1px solid #888;
+ border-right: 1px solid #555;
+ border-bottom: 1px solid #333;
+ background-image: linear-gradient(bottom, rgb(235,235,235) 0%, rgb(250,250,250) 53%);
+ background-image: -o-linear-gradient(bottom, rgb(235,235,235) 0%, rgb(250,250,250) 53%);
+ background-image: -moz-linear-gradient(bottom, rgb(235,235,235) 0%, rgb(250,250,250) 53%);
+ background-image: -webkit-linear-gradient(bottom, rgb(235,235,235) 0%, rgb(250,250,250) 53%);
+ background-image: -ms-linear-gradient(bottom, rgb(235,235,235) 0%, rgb(250,250,250) 53%);
+ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(235,235,235)), color-stop(0.53, rgb(250,250,250)));
+ }
+#d_clip_button.hover, #clear:hover
+ {
+ color: #555;
+ background-image: linear-gradient(bottom, rgb(245,240,245) 0%, rgb(255,255,255) 78%);
+ background-image: -o-linear-gradient(bottom, rgb(245,240,245) 0%, rgb(255,255,255) 78%);
+ background-image: -moz-linear-gradient(bottom, rgb(245,240,245) 0%, rgb(255,255,255) 78%);
+ background-image: -webkit-linear-gradient(bottom, rgb(245,240,245) 0%, rgb(255,255,255) 78%);
+ background-image: -ms-linear-gradient(bottom, rgb(245,240,245) 0%, rgb(255,255,255) 78%);
+ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(245,240,245)), color-stop(0.78, rgb(255,255,255)));
+ }
+#d_clip_button.active, #clear:active
+ {
+ color: #111;
+ border-top: 1px solid #333;
+ border-left: 1px solid #555;
+ border-right: 1px solid #555;
+ border-bottom: 1px solid #333;
+ background-image: linear-gradient(bottom, rgb(194,194,194) 0%, rgb(235,235,235) 53%);
+ background-image: -o-linear-gradient(bottom, rgb(194,194,194) 0%, rgb(235,235,235) 53%);
+ background-image: -moz-linear-gradient(bottom, rgb(194,194,194) 0%, rgb(235,235,235) 53%);
+ background-image: -webkit-linear-gradient(bottom, rgb(194,194,194) 0%, rgb(235,235,235) 53%);
+ background-image: -ms-linear-gradient(bottom, rgb(194,194,194) 0%, rgb(235,235,235) 53%);
+ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(194,194,194)), color-stop(0.53, rgb(235,235,235)));
+ }
+
+.pulsate_and_grow {
+ -webkit-animation: pulsate_and_grow 0.5s ease-out;
+ -webkit-animation-iteration-count: 3;
+ opacity: 1.0;
+}
+@-webkit-keyframes pulsate_and_grow {
+ 0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.1;}
+ 50% {opacity: 1.0;}
+ 100% {-webkit-transform: scale(1.0, 1.0); opacity: 0.1;}
+}
+.tag-options:active, .tag-clear:active {
+ -webkit-animation: pulsate_opacity 0.5s ease-out;
+ -webkit-animation-iteration-count: 3;
+ opacity: 1.0;
+
+}
+.sorting-options:active {
+ -webkit-animation: pulsate_opacity 0.5s ease-out;
+ -webkit-animation-iteration-count: 3;
+ opacity: 1.0;
+
+}
+@-webkit-keyframes pulsate_opacity{
+ 0% { opacity: 0.1;}
+ 50% {opacity: 1.0;}
+ 100% {opacity: 0.1;}
+}
diff --git a/htmljs/gallery/gallery_main.js b/htmljs/gallery/gallery_main.js
new file mode 100644
index 0000000..dedc9eb
--- /dev/null
+++ b/htmljs/gallery/gallery_main.js
@@ -0,0 +1,156 @@
+var imagedata = [ ]; //FIXME post request here
+$(function(){
+ for (var i=0; i< (imagedata.length - 1); i++){
+ var newDiv = document.createElement("div");
+ var newImage = document.createElement("img");
+ newImage.src = imagedata[i][0];
+ newImage.className = "pb";
+ newDiv.appendChild(newImage);
+// consider calling something like isotope add here...and ONLY APPENDING the image to the parent div once it has loaded
+// $(newImage).load(function(){
+// console.log("like a true playa");
+// })
+ $("#images").append(newDiv);
+ }
+});
+
+$(function(){
+ $("b").addClass("pulsate_and_grow");
+ $(".sorting-options").click(function(){
+
+ $(".sorting-options").click(function(){
+ console.log("wazzup");
+ if ($(this).hasClass("pulsate_opacity")){
+ $(this).removeClass("pulsate_opacity");
+ }
+ $(this).addClass("pulsate_opacity");
+
+ });
+ });
+});
+$(function(){
+ZeroClipboard.setMoviePath( 'http://asdf.us/swf/ZeroClipboard10.swf' );
+var clip = new ZeroClipboard.Client();
+clip.glue( 'd_clip_button' );
+var Dump =
+ {
+ pick: function ()
+ {
+ Dump.pickUrl( $(this).attr("src") )
+ },
+ pickUrl: function (url)
+ {
+ $("#rebus").append ($ ("<img>").attr ("src", url))
+ $("#rebus").show()
+ var theDump = $("#urlz").val() + " " + url
+ $("#urlz").val( theDump )
+ clip.setText( theDump )
+ return false
+ },
+ clear: function ()
+ {
+ $("#rebus").html("")
+ $("#urlz").val("")
+ clip.setText("")
+ },
+ backspace: function ()
+ {
+ $("#rebus img:last").remove()
+ var urllist = $("#urlz").val().split(" ")
+ urllist.pop()
+ $("#urlz").val( urllist.join(" ") )
+ },
+ reverse: function ()
+ {
+ urllist = $("#urlz").val().split(" ")
+ Dump.clear()
+ for (i in urllist.reverse())
+ if (urllist[i])
+ Dump.pickUrl(urllist[i])
+ },
+ showNewer: function()
+ {
+ window.location.href = //FIXME
+ },
+ showOlder: function()
+ {
+ window.location.href = //FIXME
+ }
+ }
+function applyTag(tagname){
+ tag_regex = /&tag=[^&]*/;
+ if (document.URL.match(tag_regex)){
+ return document.URL.replace(tag_regex, "&tag="+tagname);
+ }else if(document.URL.match(/\/$/)){
+ return document.URL.replace(/\/$/, "?tag="+tagname);
+ }
+ else{
+ return document.URL+"&tag="+tagname;
+ }
+}
+var Main =
+ {
+ editing: false,
+ kp: function (event)
+ {
+ console.log(event.keyCode);
+ switch (event.keyCode)
+ {
+ // BS
+ case 8:
+ if (! Main.editing)
+ Dump.backspace()
+ return false
+ // C
+ case 67:
+ if (! Main.editing)
+ Dump.clear()
+ break
+ // R
+ case 82:
+ if (! Main.editing)
+ Dump.reverse()
+ break
+ // ESC
+ case 27:
+ // H
+ case 72:
+ if (! Main.editing)
+ $("#rebus").toggle()
+ break
+ // LEFT ARROW
+ case 37:
+ if (! Main.editing)
+ Dump.showNewer()
+ break
+ // RIGHT ARROW
+ case 39:
+ if (! Main.editing)
+ Dump.showOlder()
+ break
+ }
+ return true
+ },
+ poll: function ()
+ {
+ },
+ pollCallback: function ()
+ {
+ },
+ init: function ()
+ {
+ $(document).keydown(Main.kp)
+ $("#urlz").focus(function(){ Main.editing = true })
+ $("#urlz").blur(function(){ Main.editing = false })
+ $("#clear").live("click", Dump.clear)
+ $("#help").click(function(){ $("#keys").slideToggle() })
+ $("#actions b").click(function(){ $("#sorting-optionsContainer").slideToggle() })
+ $("#tags b").click(function(){ $("#tag-optionsContainer").slideToggle() })
+ $(".tag-options").click(function(){document.location.href= applyTag(this.id)});
+ $(".tag-clear").click(function(){ document.location.href = document.URL.replace(/&?tag=[^&]*/ ,"").replace(/\?$/,"")});
+ $("div img").live("click", Dump.pick)
+ Dump.clear()
+ }
+ }
+ Main.init()
+})
diff --git a/htmljs/gallery/index.html b/htmljs/gallery/index.html
new file mode 100644
index 0000000..5cbc43f
--- /dev/null
+++ b/htmljs/gallery/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+<title>PHOTOBLASTER GALLERY</title>
+<script type="text/javascript" src="/js/jquery.js"></script>
+<script type="text/javascript" src="/js/titleScrambler.js"></script>
+<script type="text/javascript" src="/js/gallery_main.js"> </script>
+<script type="text/javascript" src="/js/jquery.isotope.min.js"></script>
+<script type="text/javascript" src="/js/gallery_isotope_config.js?v=3"></script>
+<link href="/im/gallery_main.css" type="text/css" rel="stylesheet" />
+<link href="/im/gallery_style.css" type="text/css" rel="stylesheet" />
+</head>
+<body>
+<div id="help">
+ <b>key controls</b>
+ <div id="keys">
+ <br/>
+ <div class="small"><i>when composer is launched...</i></div>
+ <div>ESC toggle</div>
+ <div>C clear</div>
+ <div>R reverse</div>
+ <br/>
+ <div class="small"><i>in the gallery...</i></div>
+ <div>BACKSPACE delete</div>
+ <div>LEFT ARROW newer</div>
+ <div>RIGHT ARROW older</div>
+ </div>
+</div>
+<div id="actions">
+ <b>sort</b>
+ <div id="sorting-optionsContainer">
+ <div class="sorting-options" id="date">date</div>
+ <div class="sorting-options" id="username">username</div>
+ <div class="sorting-options" id="height">height</div>
+ <div class="sorting-options" id="width">width</div>
+ <div class="sorting-options" id="gif">gif</div>
+ <div class="sorting-options" id="shuffle">shuffle</div>
+ <div class="sorting-options" id="lombada">lombada</div>
+ </div>
+</div>
+<div id="tags">
+ <b>tags</b>
+ <div id="tag-optionsContainer">
+
+
+ <div class="tag-clear" ><i>remove tag</i></div>
+ <div class="tag-options" id="transparent">transparent</div>
+ <div class="tag-options" id="break">break</div>
+ <div class="tag-options" id="gradient">gradient</div>
+ <div class="tag-options" id="grid">grid</div>
+ <div class="tag-options" id="shader">shader</div>
+ <div class="tag-options" id="Over">Over</div>
+ <div class="tag-options" id="ATop">ATop</div>
+ <div class="tag-options" id="Dst_Over">Dst_Over</div>
+ <div class="tag-options" id="Dst_In">Dst_In</div>
+ <div class="tag-options" id="Dst_Out">Dst_Out</div>
+ <div class="tag-options" id="Multiply">Multiply</div>
+ <div class="tag-options" id="Screen">Screen</div>
+ <div class="tag-options" id="Divide">Divide</div>
+ <div class="tag-options" id="Plus">Plus</div>
+ <div class="tag-options" id="Difference">Difference</div>
+ <div class="tag-options" id="Exclusion">Exclusion</div>
+ <div class="tag-options" id="Lighten">Lighten</div>
+ <div class="tag-options" id="Darken">Darken</div>
+ <div class="tag-options" id="Overlay">Overlay</div>
+ <div class="tag-options" id="Hard_Light">Hard_Light</div>
+ <div class="tag-options" id="Soft_Light">Soft_Light</div>
+ <div class="tag-options" id="Pegtop_Light">Pegtop_Light</div>
+ <div class="tag-options" id="Linear_Light">Linear_Light</div>
+ <div class="tag-options" id="Vivid_Light">Vivid_Light</div>
+ <div class="tag-options" id="Pin_Light">Pin_Light</div>
+ <div class="tag-options" id="Linear_Dodge">Linear_Dodge</div>
+ <div class="tag-options" id="Linear_Burn">Linear_Burn</div>
+ <div class="tag-options" id="Color_Dodge">Color_Dodge</div>
+ <div class="tag-options" id="Color_Burn">Color_Burn</div>
+
+ </div>
+</div>
+<div id="dump">
+ <div id="rebus"></div>
+ <input id="urlz" type="text" />
+ <div id="d_clip_container" style="position:relative">
+ <div id="d_clip_button">copy</div>
+ </div>
+ <button id="clear">clear</button>
+</div>
+<div id="images">
+<div id='nextpage'>
+ <a href='/im/'>editor</a>
+ <a href='?%s'>&larr; newer</a>
+ <a href='?random=%d%s'>random</a>
+ <a href='?%s'>older &rarr;</a>
+</div>
+</body>
+<script type="text/javascript" src="/js/ZeroClipboard.js"></script>
+<script type="text/javascript" src="http://asdf.us/js/pbembed.js"></script>
+</html>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-18 05:40:35 +0000