add initial expand images js

build-js.sh

@@ -9,13 +9,16 @@ if [ -z "$GOPATH" ]; then
 fi
 
 if [ ! -f $GOPATH/bin/minify ]; then
-	go get github.com/tdewolff/minify/cmd/minify
+  echo "set up minifiy"  
+	go get -v github.com/tdewolff/minify/cmd/minify
 fi
 
 echo -e "//For source code and license information please check https://github.com/majestrate/nntpchan \n" > ./contrib/static/nntpchan.js
 
-
+echo -n "minify "
 cat ./contrib/js/main.js_ | $GOPATH/bin/minify --mime=text/javascript >> ./contrib/static/nntpchan.js
 for f in ./contrib/js/*.js ; do
+  echo -n "."
 	cat $f | $GOPATH/bin/minify --mime=text/javascript >> ./contrib/static/nntpchan.js
 done
+echo "ok"

contrib/js/expand-image.js

@@ -0,0 +1,72 @@
+//
+// expand images inline
+//
+// released into the public domain by Jeff on 2016-04-30
+//
+
+if (typeof _ == 'undefined') {
+  var _ = function(a) { return a; }
+}
+
+// is the filename matching an image?
+function filenameIsImage(fname) {
+  return /\.(gif|jpeg|jpg|png|webp)/.test(fname);
+}
+
+// setup image inlining for 1 element
+function setupInlineImage(thumb, url) {
+  if(thumb.inlineIsSetUp) return;
+  thumb.inlineIsSetUp = true;
+  var img = thumb.querySelector("img.thumbnail");
+  var expanded = false;
+  var oldurl = img.href;
+  img.onclick = function(ev) {
+    if (expanded) {
+      img.setAttribute("class", "thumbnail");
+      img.src = oldurl;
+      expanded = false;
+    } else {
+      img.setAttribute("class", "thumbnail expanded");
+      img.src = url;
+      expanded = true;
+    }
+  }
+}
+
+// set up image inlining for all applicable children in an element
+function setupInlineImageIn(element) {
+  var thumbs = element.querySelectorAll("a.file");
+  for ( var i = 0 ; i < thumbs.length ; i++ ) {
+    var url = thumbs[i].children[0].src;
+    if (filenameIsImage(url)) {
+      // match
+      setupInlineImage(thumbs[i], url);
+    }
+  }
+}
+
+
+onready(function(){
+
+  // Setup Javascript events for document 
+  setupInlineImageIn(document);
+  
+  
+  // Setup Javascript events via updatoer
+  if (window.MutationObserver) {
+    var observer = new MutationObserver(function(mutations) {
+      for (var i = 0; i < mutations.length; i++) {
+        var additions = mutations[i].addedNodes;
+        if (additions == null) continue;
+        for (var j = 0; j < additions.length; j++) {
+          var node = additions[j];
+          if (node.nodeType == 1) {
+            setupInlineImageIn(node);
+          }
+        }
+      }
+    });
+    observer.observe(document.body, {childList: true, subtree: true});
+  }
+  
+})

contrib/static/nntpchan.js

@@ -15,7 +15,11 @@ parent.appendChild(wrapper);parent.backlink=false;},function(msg){var wrapper=do
 parent.backlink=true;}};parent.backlink=true;}
 function inject_hover_for_element(elem){var elems=elem.getElementsByClassName("backlink");var ls=[];var l=elems.length;for(var idx=0;idx<l;idx++){var e=elems[idx];ls.push(e);}
 for(var elem in ls){inject_hover(prefix,ls[elem]);}}
-function init(prefix){inject_hover_for_element(document);}var banner_count=3;function nntpchan_inject_banners(elem,prefix){var n=Math.floor(Math.random()*banner_count);var banner=prefix+"static/banner_"+n+".jpg";var e=document.createElement("img");e.src=banner;e.id="nntpchan_banner";elem.appendChild(e);}var configRoot="";if(typeof _=='undefined'){var _=function(a){return a;};}
+function init(prefix){inject_hover_for_element(document);}var banner_count=3;function nntpchan_inject_banners(elem,prefix){var n=Math.floor(Math.random()*banner_count);var banner=prefix+"static/banner_"+n+".jpg";var e=document.createElement("img");e.src=banner;e.id="nntpchan_banner";elem.appendChild(e);}if(typeof _=='undefined'){var _=function(a){return a;}}
+function filenameIsImage(fname){return/\.(gif|jpeg|jpg|png|webp)/.test(fname);}
+function setupInlineImage(thumb,url){if(thumb.inlineIsSetUp)return;thumb.inlineIsSetUp=true;var img=thumb.querySelector("img.thumbnail");var expanded=false;var oldurl=img.href;img.onclick=function(ev){if(expanded){img.setAttribute("class","thumbnail");img.src=oldurl;expanded=false;}else{img.setAttribute("class","thumbnail expanded");img.src=url;expanded=true;}}}
+function setupInlineImageIn(element){var thumbs=element.querySelectorAll("a.file");for(var i=0;i<thumbs.length;i++){var url=thumbs[i].children[0].src;if(filenameIsImage(url)){setupInlineImage(thumbs[i],url);}}}
+onready(function(){setupInlineImageIn(document);if(window.MutationObserver){var observer=new MutationObserver(function(mutations){for(var i=0;i<mutations.length;i++){var additions=mutations[i].addedNodes;if(additions==null)continue;for(var j=0;j<additions.length;j++){var node=additions[j];if(node.nodeType==1){setupInlineImageIn(node);}}}});observer.observe(document.body,{childList:true,subtree:true});}})var configRoot="";if(typeof _=='undefined'){var _=function(a){return a;};}
 function setupVideo(thumb,url){if(thumb.videoAlreadySetUp)return;thumb.videoAlreadySetUp=true;var video=null;var videoContainer,videoHide;var expanded=false;var hovering=false;var loop=true;var loopControls=[document.createElement("span"),document.createElement("span")];var fileInfo=thumb.parentNode.querySelector(".fileinfo");var mouseDown=false;function unexpand(){if(expanded){expanded=false;if(video.pause)video.pause();videoContainer.style.display="none";thumb.style.display="inline";video.style.maxWidth="inherit";video.style.maxHeight="inherit";}}
 function unhover(){if(hovering){hovering=false;if(video.pause)video.pause();videoContainer.style.display="none";video.style.maxWidth="inherit";video.style.maxHeight="inherit";}}
 function getVideo(){if(video==null){video=document.createElement("video");video.src=url;video.loop=loop;video.innerText=_("Your browser does not support HTML5 video.");videoHide=document.createElement("img");videoHide.src=configRoot+"static/collapse.gif";videoHide.alt="[ - ]";videoHide.title="Collapse video";videoHide.style.marginLeft="-15px";videoHide.style.cssFloat="left";videoHide.addEventListener("click",unexpand,false);videoContainer=document.createElement("div");videoContainer.style.paddingLeft="15px";videoContainer.style.display="none";videoContainer.appendChild(videoHide);videoContainer.appendChild(video);thumb.parentNode.insertBefore(videoContainer,thumb.nextSibling);video.addEventListener("mousedown",function(e){if(e.button==0)mouseDown=true;},false);video.addEventListener("mouseup",function(e){if(e.button==0)mouseDown=false;},false);video.addEventListener("mouseenter",function(e){mouseDown=false;},false);video.addEventListener("mouseout",function(e){if(mouseDown&&e.clientX-video.getBoundingClientRect().left<=0){unexpand();}
@@ -33,7 +37,7 @@ function inject_postform(prefix,parent){}
 function inject_livechan_widget(prefix,parent){if("WebSocket"in window){var url="ws://"+document.location.host+prefix+"live";if(document.location.protocol=="https:"){url="wss://"+document.location.host+prefix+"live";}
 var socket=new WebSocket(url);var progress=function(str){parent.innerHTML="<pre>livechan: "+str+"</pre>";};progress("initialize");socket.onopen=function(){progress("streaming (read only)");}
 socket.onmessage=function(ev){var j=null;try{j=JSON.parse(ev.data);}catch(e){}
-if(j){console.log(j);livechan_got_post(parent,j);}}
+if(j){livechan_got_post(parent,j);}}
 socket.onclose=function(ev){progress("connection closed");setTimeout(function(){inject_livechan_widget(prefix,parent);},1000);}}else{parent.innerHTML="<pre>livechan mode requires websocket support</pre>";setTimeout(function(){parent.innerHTML="";},5000);}}
 function ukko_livechan(prefix){var ukko=document.getElementById("ukko_threads");if(ukko){ukko.innerHTML="";inject_livechan_widget(prefix,ukko);}}function get_storage(){var st=null;if(window.localStorage){st=window.localStorage;}else if(localStorage){st=localStorage;}
 return st;}function enable_theme(prefix,name){if(prefix&&name){var theme=document.getElementById("current_theme");if(theme){theme.href=prefix+"static/"+name+".css";var st=get_storage();st.nntpchan_prefix=prefix;st.nntpchan_theme=name;}}}

contrib/static/site.css

@@ -366,7 +366,13 @@ input, textarea {
     float: left;
 }
 
-.file-thumbnail {
+.expanded {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.thumbnail {
     display: block;
     margin: 5px 20px 10px;
     border: medium none;