js/photo-tags.js

   1 var pics = d3.select(".pics").select("ul");
   2
   3 /* populate data list with tags*/
   4 d3.json(webbase+"/getjson.php?S", function(json) {
   5     d3.select("#MyTags").selectAll("option").data(json)
   6       .enter().append("option").attr("value",function(d) {return d.name});
   7   });
   8
   9 /* update form to point to new link */
  10 d3.select("input").on("keyup", function(d) {
  11     d3.select('form').attr("action",webbase+"/tag/"+document.getElementById('MyTagsInput').value.replace(" ","+"));
  12 });
  13
  14 if (T!="")
  15   {
  16     var mycurrenttags = T.split(",");
  17
  18     d3.select("#currenttags").select("button").remove();
  19     d3.select("#currenttags").selectAll("button")
  20       .data(mycurrenttags).enter()
  21       .append("button").attr("type","button").text( function(d) {return d;} );
  22   }
  23  else
  24   {
  25     d3.select("#currenttags").select("button").remove();
  26     d3.select("#currenttags").append("span").text( ' none');
  27   };
  28
  29 function load_content() {
  30   //  d3.select(".debug").text("T,P,N = *"+T+"* *"+page+"* *"+N+"*");
  31
  32   if (ID>=0)
  33     url = webbase+"/getjson.php?ID="+ID;
  34   else if(T!="")
  35     url = webbase+"/getjson.php?T="+T+"&P="+page;
  36   else
  37     url = webbase+"/getjson.php?P="+page;
  38
  39   /* update pics */
  40   d3.json(url, function(json) {
  41       count=0;
  42       pics.selectAll("li").remove();
  43       picdata=json;
  44
  45       /* if ID is set, just show one pictures, else create an array of pictures */
  46       if (ID>=0)
  47         {
  48           var singlepicspace=pics.selectAll("li").data(picdata, function(d){return ID;}).enter().append("li").append("div").attr("class","singlepic");
  49           singlepicspace.append("div").attr("class","left").append("img").attr("src",webbase+"/icons/left.png");
  50           singlepicspace.append("img")
  51             .attr("class","large")
  52             .attr("src",function(d) {
  53                 s = d.base_uri+'/'+d.filename;
  54                 s = s.replace('file:\/\/'+dbprefix,webbase+'/Photos-small/');
  55                 return s;
  56               });
  57           singlepicspace.append("div").attr("class","right").append("img").attr("src",webbase+"/icons/right.png");
  58
  59           update_thumbnails();
  60         }
  61       else
  62         {
  63           d3.select(".nextprev").select("ul").selectAll("li").remove();
  64           pics.selectAll("li").data(picdata)
  65             .enter().append("li")
  66             .append("a")
  67             .on("click", function(d) { load_pic(d.id); })
  68             .append("img")
  69             .attr("src",function(d) {
  70                 count++;
  71                 s= d.base_uri+'/'+d.filename;
  72                 s = s.replace('file:\/\/'+dbprefix,webbase+'/Photos-tiny/');
  73                 return s;
  74               });
  75         };
  76
  77      checkbutton();
  78     });
  79
  80    update_permalink()
  81 }
  82
  83 function update_permalink() {
  84   /* update permalink */
  85
  86   permalink = webbase;
  87
  88   if(T!="")
  89     permalink += '/tag/' + T;
  90   if(page!=1)
  91     permalink += '/page/' + page;
  92   if(ID>0)
  93     permalink += '/pic/' + ID;
  94
  95   d3.select(".permalink").html("Permalink: <a href=\""+permalink+"\">"+permalink+"</a>");
  96 }
  97
  98 function prev_page() {
  99   if (page>=2) page=page-1;
 100   load_content();
 101 }
 102
 103 function next_page() {
 104   page=page+1;
 105   load_content();
 106 }
 107
 108 function prev_pic() {
 109 }
 110
 111 function next_pic() {
 112 }
 113
 114 function load_pic(myid) {
 115   ID=myid;
 116   update_page_index();
 117   update_thumbnails();
 118   load_content();
 119 }
 120
 121 function tagcloud() {
 122
 123   url = webbase+"/getjson.php?CLOUD=1";
 124
 125   pics.selectAll("li").remove();
 126
 127   var svgelement=pics.append("li")
 128     .append("svg").attr("width",400).attr("height",400);
 129
 130   /* update pics */
 131   d3.json(url, function(json) {
 132       svgelement.selectAll("text").data(json).enter().append("text")
 133         .style("font-size", function(d){return (Math.log(d.count+1)/2.0)+"em"})
 134         .text(function(d) { return d.name+" "; })
 135         .on("mouseover", function(d){ d3.select(this).style("color","red")} )
 136         .on("mouseout", function(d){ d3.select(this).style("color","white")} )
 137         .on("click", function(d) { document.location.href=webbase+'/tag/'+d.name })
 138     });
 139 }
 140
 141 function update_thumbnails(){
 142   if(T!="")
 143     url2 = webbase+"/getjson.php?NP=1&T="+T+"&ID="+ID;
 144   else
 145     url2 = webbase+"/getjson.php?NP=1&ID="+ID;
 146
 147   var IDprev=-1;
 148   var IDnext=-1;
 149   var IDcurr=-1;
 150   d3.json(url2, function(json2) {
 151       /* figure out where the arrows on the pic should link to */
 152       all=""
 153       for (var i in json2){
 154         if( IDcurr != ID )
 155           {
 156             IDprev = IDcurr;
 157             IDcurr = IDnext;
 158             IDnext = json2[i].id;
 159           };
 160       }
 161
 162       var thumbs= d3.select(".nextprev").select("ul").selectAll("li").data(json2, function(d) {return d.id;});
 163
 164       thumbs.enter().append("li")
 165         .append("a")
 166         .on("click", function(d) {
 167             load_pic(d.id); }
 168           )
 169         .append("img")
 170         .attr("src",function(d) {
 171             s= d.base_uri+'/'+d.filename;
 172             s = s.replace('file:\/\/'+dbprefix,webbase+'/Photos-tiny/');
 173             return s;
 174           })
 175         .style("height","0")
 176         .transition().duration(1000)
 177         .style("height","100px");
 178
 179       thumbs.exit().select("img").transition().duration(1000).style("height","0");
 180       thumbs.exit().transition().duration(1050).remove();
 181
 182       /* resort elements */
 183       d3.select(".nextprev").select("ul").selectAll("li").sort(function(a,b){return a.id-b.id;});
 184       d3.select(".nextprev").select("ul").selectAll("li").select("a").select("img").classed("current",false);
 185       d3.select(".nextprev").select("ul").selectAll("li").select("a").select("img").classed("current",function(d){return (d.id==IDcurr);});
 186
 187
 188       /* add links for left/right arrows */
 189       if (IDprev != -1 )
 190         d3.select(".left").on("click", function() { load_pic(IDprev); });
 191       if (IDnext != -1 )
 192         d3.select(".right").on("click", function() { load_pic(IDnext); });
 193
 194     });
 195 }
 196
 197 function checkbutton()
 198 {
 199   if (page==1)
 200     { d3.select("button.prev").attr("disabled","disabled");}
 201   else
 202     { d3.select("button.prev").attr("disabled", null);};
 203
 204   if (count<N)
 205     { d3.select("button.next").attr("disabled","disabled");}
 206   else
 207     { d3.select("button.next").attr("disabled",null);}
 208 }
 209
 210 function update_page_index()
 211 {
 212   /* load number of pictures */
 213   myID = "";
 214   if(ID > 0)
 215     myID = "&ID="+ID;
 216
 217   if(T!="")
 218     url = webbase+"/getjson.php?C=1&T="+T+myID;
 219   else
 220     url = webbase+"/getjson.php?C=1"+myID;
 221
 222   d3.json(url, function(json) {
 223     /* update index, show only page +-5 pages max */
 224     n = Math.floor(json[0].total/N);
 225     nr = Math.floor( (json[0].row-1)/N); /* rowid starts at 1 not 0 */
 226
 227     if(nr > 0)
 228       page = nr+1;
 229
 230     var mydata = new Array();  // add json data  {page: <nr>, name: <name>} ; at end reform array into real json and use d3 to parse it
 231
 232     if(n>0)
 233       {
 234         if(page>7)
 235           {
 236             mydata.push('{ page:1, name:"1"}');
 237             mydata.push('{ page:1.5, name:"..."}');
 238             start = page-5;
 239           }
 240         else
 241           start=1;
 242
 243         for(i=start;i<=Math.min(n+1,page+5);i++)
 244           mydata.push('{ page:'+i+', name:"'+i+'"}');
 245
 246         if(page+5<n)
 247           {
 248             mydata.push('{ page:'+(n+0.5)+', name:"..."}');
 249             mydata.push('{ page:'+(n+1)+', name:"'+(n+1)+'"}');
 250           }
 251         else if(page+5==n)
 252           mydata.push('{ page:'+(n+1)+', name:"'+(n+1)+'"}');
 253       };
 254     mydata = "["+mydata.join(",")+"]";
 255     mydata =  eval('(' + mydata + ')');
 256
 257     var pageindex = d3.select(".index").selectAll("button").data(mydata, function(d){ return d.page; });
 258     pageindex.exit().remove();
 259     pageindex.enter().append("button")
 260       .on("click", function(d) { if(  (d.page - Math.floor(d.page)) ==0 )  {page=d.page; ID=-1;load_content(); update_page_index();} })
 261       .text(function(d) {return " "+d.name+" "});
 262     pageindex.sort( function(a,b) { return a.page- b.page;} );
 263     } );
 264
 265   d3.select(".index").selectAll("button").classed("currentpage",false);
 266   d3.select(".index").selectAll("button").classed("currentpage",function(d){return (d.page==page);});
 267 }