diff options
| -rw-r--r-- | getjson.php | 67 | ||||
| -rw-r--r-- | index.php | 232 | ||||
| -rw-r--r-- | style.css | 20 |
3 files changed, 201 insertions, 118 deletions
diff --git a/getjson.php b/getjson.php index d9b0891..83360e6 100644 --- a/getjson.php +++ b/getjson.php @@ -22,9 +22,14 @@ if (isset($_REQUEST["S"])) $tag = sqlite_escape_string($_REQUEST["S"]); $result = $DB->query("SELECT name FROM tags"); - $count = $DB->query("SELECT 1"); } -else + else if (isset($_REQUEST["ID"])) + { + $id = intval($_REQUEST["ID"]); + $result = $DB->query("SELECT base_uri, filename, id FROM photos". + " WHERE id=$id"); + } + else { if (isset($_REQUEST["P"])) $OFFSET = "".(intval($_REQUEST["P"])*$N-$N); @@ -37,6 +42,7 @@ else $tags = $_REQUEST["T"]; $tags = explode(",",$tags); $nrtags = count($tags); + foreach ($tags as $key => $value) $tags[$key]=sqlite_escape_string(trim($value)); $tags = "'".implode("','",$tags)."'"; @@ -47,24 +53,32 @@ else a good explanation on different ways of doing this can be found at: http://www.pui.ch/phred/archives/2005/04/tags-database-schemas.html */ - $result = $DB->query("SELECT base_uri, filename FROM photo_tags pt, photos p, tags t". - " WHERE pt.tag_id = t.id". - " AND (t.name COLLATE NOCASE IN ($tags))". - " AND p.id = pt.photo_id ". - " GROUP BY p.id HAVING COUNT( p.id )=$nrtags". - " LIMIT $OFFSET, $N"); - - $count = $DB->query("SELECT count(*) as total FROM photo_tags pt, photos p, tags t". - " WHERE pt.tag_id = t.id". - " AND (t.name COLLATE NOCASE IN ($tags))". - " AND p.id = pt.photo_id ". - " GROUP BY p.id HAVING COUNT( p.id )=$nrtags". - " LIMIT $OFFSET, $N"); + + if (isset($_REQUEST["C"])) + { + $result = $DB->query("SELECT count(*) as total from (SELECT p.id FROM photo_tags pt, photos p, tags t". + " WHERE pt.tag_id = t.id". + " AND (t.name COLLATE NOCASE IN ($tags))". + " AND p.id = pt.photo_id ". + " GROUP BY p.id HAVING COUNT( p.id )=$nrtags)"); + } + else + { + $result = $DB->query("SELECT base_uri, filename, p.id as id FROM photo_tags pt, photos p, tags t". + " WHERE pt.tag_id = t.id". + " AND (t.name COLLATE NOCASE IN ($tags))". + " AND p.id = pt.photo_id ". + " GROUP BY p.id HAVING COUNT( p.id )=$nrtags". + " LIMIT $OFFSET, $N"); + + } } else { - $result = $DB->query("SELECT * FROM photos LIMIT $OFFSET, $N"); - $count = $DB->query("SELECT count(*) as total FROM photos"); + if (isset($_REQUEST["C"])) + $result = $DB->query("SELECT count(*) as total FROM photos"); + else + $result = $DB->query("SELECT * FROM photos LIMIT $OFFSET, $N"); } } @@ -83,24 +97,7 @@ else } $result=$tmp; -/* encode count as an array */ -$tmp=array(); -if(!$usePDO) - { - /* convert results into array */ - while($res = $count->fetchArray(SQLITE3_ASSOC)) - $tmp[]=$res; - } -else - { - foreach($count as $res) - $tmp[]=$res; - } -$count=$tmp; - -$return=array($count,$result); - -echo json_encode($return); +echo json_encode($result); /* close the database */ if($usePDO) @@ -19,7 +19,15 @@ if(isset($_REQUEST["tag"])) else $tags = ""; +if(isset($_REQUEST["pic"])) + $pic = intval(htmlentities($_REQUEST["pic"])); +else + $pic = -1; +/* end parse flags */ + +/* The basic layout */ ?> + <html> <title><?php echo htmlspecialchars($title) ?></title> <script src="<?php echo $webbase?>/d3.min.js"></script> @@ -31,20 +39,24 @@ else <div class="debug">test</div> <h1><?php echo htmlspecialchars($title) ?></h1> -<button class="prev" disabled="disabled" onclick="left()"> prev </button> -<button class="next" onclick="right()">next </button> +<nav> +<span class="index"></span> +<button class="prev" type="button" disabled="disabled" onclick="left()"> prev </button> +<button class="next" type="button" onclick="right()">next </button> +<button class="all" type="submit" onclick="document.location.href='<?php echo $webbase?>'">all</button> +</nav> <div class="permalink"></div> <div class="tagsearch"> <form method="get" action=""> - Tags: <input list="MyTags" id="MyTagsInput" type="text" value="" /> + Add tag: <input list="MyTags" id="MyTagsInput" type="text" value="" /> <datalist id="MyTags"> </datalist> </form> + Current tags:<span id="currenttags"></span> </div> -<div class="index"></div> <div class="pics"> </div> <footer> @@ -60,6 +72,7 @@ var pics = d3.select(".pics").append("ul"); var page=<?php echo $page ?>; var N=<?php echo $N ?>; var T="<?php echo $tags ?>"; +var ID=<?php echo $pic ?>; var count=0; /* populate data list with tags*/ @@ -73,102 +86,102 @@ d3.select("input").on("keyup", function(d) { d3.select('form').attr("action","<?php echo $webbase?>/tag/"+document.getElementById('MyTagsInput').value.replace(" ","+")); }); -function myreload(a) { - d3.select(".debug").text("T,P,N ="+T+" "+a+" "+N); - - if(T!="") +if (T!="") + { + var mycurrenttags = T.split(","); + + d3.select("#currenttags").select("button").remove(); + d3.select("#currenttags").selectAll("button") + .data(mycurrenttags).enter() + .append("button").attr("type","button").text( function(d) {return d;} ); + } + else + { + d3.select("#currenttags").select("button").remove(); + d3.select("#currenttags").append("span").text( ' none'); + }; + +function load_content(a) { + // d3.select(".debug").text("T,P,N = *"+T+"* *"+a+"* *"+N+"*"); + + update_page_index(a); + + if (ID>=0) + url = "<?php echo $webbase?>/getjson.php?ID="+ID; + else if(T!="") url = "<?php echo $webbase?>/getjson.php?T="+T+"&P="+a; else url = "<?php echo $webbase?>/getjson.php?P="+a; + /* update pics */ d3.json(url, function(json) { + count=0; + pics.selectAll("li").remove(); + picdata=json; - /* update index, show only page +-5 pages max */ - n = Math.floor(json[0][0].total/N); - s = ""; - - if(n>1) + /* if ID is set, just show one pictures, else create an array of pictures */ + if (ID>=0) + { + pics.selectAll("li").data(picdata) + .enter().append("li") + .append("img") + .attr("class","large") + .attr("src",function(d) { + s= d.base_uri+'/'+d.filename; + s = s.replace('file:\/\/<?php echo "".str_replace("/","\/",$dbprefix); ?>','<?php echo $webbase?>/Photos-small/'); + return s; + }); + } + else { - s="page "; - - if(a>7) - { - s+=" <a href=\"<?php echo $webbase?>"; - if(T!="") - s+="/tag/"+T; - s+="/page/1\">1</a>..."; - start = a-5; - } - else - start=1; - - for(i=start;i<=Math.min(n+1,a+5);i++) - { - if(i==a) - s+= " "+i+" "; - else - { - s+=" <a href=\"<?php echo $webbase?>"; - if(T!="") - s+="/tag/"+T; - s+="/page/"+i+"\">"+i+"</a>"; - } - } - - if(a+5<n) - { - s+="... <a href=\"<?php echo $webbase?>"; - if(T!="") - s+="/tag/"+T; - s+="/page/"+(n+1)+"\">"+(n+1)+"</a>"; - } - else if(a+5==n) - { - s+=" <a href=\"<?php echo $webbase?>"; - if(T!="") - s+="/tag/"+T; - s+="/page/"+(n+1)+"\">"+(n+1)+"</a>"; - }; + pics.selectAll("li").data(picdata) + .enter().append("li") + .append("a") + .attr("href",function(d) { + s = '<?php echo $webbase; ?>'; + if(T!="") + s = s + '/tag/' + T; + if(a!=1) + s = s + '/page/' + a; + s = s + '/pic/' + d.id; + return s; + }) + .append("img") + .attr("src",function(d) { + count++; + s= d.base_uri+'/'+d.filename; + s = s.replace('file:\/\/<?php echo "".str_replace("/","\/",$dbprefix); ?>','<?php echo $webbase?>/Photos-tiny/'); + return s; + }); }; - d3.select(".index").html(s); - /* update pics */ - count=0; - pics.selectAll("li").remove(); - picdata=json[1]; - pics.selectAll("li").data(picdata) - .enter().append("li") - .append("a") - .attr("href",function(d) { - s= d.base_uri+'/'+d.filename; - s = s.replace('file:\/\/<?php echo "".str_replace("/","\/",$dbprefix); ?>','<?php echo $webbase; ?>/Photos-small/'); - return s; - }) - .append("img") - .attr("src",function(d) { - count++; - s= d.base_uri+'/'+d.filename; - s = s.replace('file:\/\/<?php echo "".str_replace("/","\/",$dbprefix); ?>','<?php echo $webbase?>/Photos-tiny/'); - return s; - }); - checkbutton(); + checkbutton(); }); - permalink="<?php echo $webbase ?>/page/"+page; + /* update permalink */ + + permalink="<?php echo $webbase ?>"; + if(T!="") + permalink += '/tag/' + T; + if(a!=1) + permalink += '/page/' + a; + + d3.select(".permalink").html("Permalink: <a href=\""+permalink+"\">"+permalink+"</a>"); } function left() { if (page>=2) page=page-1; - myreload(page); + load_content(page); } function right() { page=page+1; - myreload(page); + load_content(page); } -function checkbutton() { +function checkbutton() +{ if (page==1) { d3.select("button.prev").attr("disabled","disabled");} @@ -181,7 +194,68 @@ function checkbutton() { { d3.select("button.next").attr("disabled",null);} } -myreload(page); +function update_page_index(mypage) +{ + /* load number of pictures */ + + if(T!="") + url = "<?php echo $webbase?>/getjson.php?C=1&T="+T; + else + url = "<?php echo $webbase?>/getjson.php?C=1"; + + d3.json(url, function(json) { + /* update index, show only page +-5 pages max */ + n = Math.floor(json[0].total/N); + s = ""; + + if(n>0) + { + s="page "; + + if(mypage>7) + { + s+=" <a href=\"<?php echo $webbase?>"; + if(T!="") + s+="/tag/"+T; + s+="/page/1\">1</a>..."; + start = mypage-5; + } + else + start=1; + + for(i=start;i<=Math.min(n+1,mypage+5);i++) + { + if(i==mypage) + s+= " "+i+" "; + else + { + s+=" <a href=\"<?php echo $webbase?>"; + if(T!="") + s+="/tag/"+T; + s+="/page/"+i+"\">"+i+"</a>"; + } + } + + if(mypage+5<n) + { + s+="... <a href=\"<?php echo $webbase?>"; + if(T!="") + s+="/tag/"+T; + s+="/page/"+(n+1)+"\">"+(n+1)+"</a>"; + } + else if(mypage+5==n) + { + s+=" <a href=\"<?php echo $webbase?>"; + if(T!="") + s+="/tag/"+T; + s+="/page/"+(n+1)+"\">"+(n+1)+"</a>"; + }; + }; + d3.select(".index").html(s); + } ); +} + +load_content(page); </script> @@ -1,5 +1,9 @@ -h1 {color:red} +h1 { + color:red; + margin: 1em 0; + text-align: center; +} body { background-color: black; color: #eee; @@ -14,11 +18,13 @@ body { a[visited]{ color: #aaa;} .index { - margin: 0 auto; - width:70%; + margin: 0 10px; +} +nav { + text-align: center; } -.pics li { +.pics li { display: inline; list-style: none; } @@ -29,6 +35,12 @@ a[visited]{ color: #aaa;} height: 100px; } +.pics img.large{ + border: 1px solid white; + margin: 2px; + height: 500px; +} + footer { border-top: 1px solid grey; color: #eee; |