Added javascript strip sorting and hiding capability

3 files changed, 136 insertions, 12 deletions

diff --git a/htdocs/page.js b/htdocs/page.js
new file mode 100644
index 0000000..2d566f5
--- /dev/null
+++ b/htdocs/page.js
@@ -0,0 +1,113 @@
+(function() {
+  var blocked = typeof localStorage["blocked"] != "undefined" && localStorage["blocked"].length > 0 ? localStorage["blocked"].split(",") : [];
+  for(var i=0; i<blocked.length; i++) {
+    var e = document.querySelector("div[data-strip-name='" + blocked[i] + "']");
+    if(e != null) {
+        e.parentNode.removeChild(e);
+    }
+  }
+  function blockList() {
+    blocked = typeof localStorage["blocked"] != "undefined" && localStorage["blocked"].length > 0 ? localStorage["blocked"].split(",") : [];
+    var blockDiv = document.getElementById("blockDiv");
+    if(typeof blockDiv != "undefined" && blockDiv != null) {
+        blockDiv.parentNode.removeChild(blockDiv);
+    }
+    if(blocked.length > 0) {
+        var blockDiv = document.createElement("div");
+        blockDiv.id = "blockDiv";
+        blockDiv.innerHTML = "Ausgeblendete Inhalte: ";
+        blockDiv.style.fontSize = "10px";
+        blockDiv.style.marginTop = "50px";
+        for(var i=0; i<blocked.length; i++) {
+            (function(_i) {
+            var a = document.createElement("a");
+            a.innerHTML = blocked[_i];
+            a.href = "#";
+            if(_i > 0) {
+                blockDiv.appendChild(document.createTextNode(", "));
+            }
+            a.onclick = function(e) {
+                blocked = blocked.slice(0, _i).concat(blocked.slice(_i + 1));
+                localStorage["blocked"] = blocked.join(",");
+                document.location.reload();
+                e.preventDefault();
+                return false;
+            }
+            blockDiv.appendChild(a);
+            })(i);
+        }
+        document.getElementById("content").appendChild(blockDiv);
+    }
+  }
+  window.addEventListener("load", blockList, false);
+  var strips = document.getElementsByClassName("strip");
+  var drop = document.createElement("div");
+  drop.style.background = "#888";
+  drop.style.fontSize = "5px";
+  drop.innerHTML = "&nbsp;";
+  for(var i=0; i<strips.length; i++) {
+    strips[strips[i].dataset.stripName] = strips[i];
+    strips[i].setAttribute("draggable", "true");
+    strips[i].ondragstart = function(e) {
+      e.dataTransfer.setData("Text", this.dataset.stripName);
+    }
+    strips[i].ondragover = function(e) {
+      this.parentNode.insertBefore(drop, this.nextSibling);
+      e.preventDefault();
+      return false;
+    }
+    strips[i].ondragleave = function(e) {
+      try { drop.parentNode.removeChild(drop); } catch(e) {}
+      return false;
+    }
+    strips[i].ondrop = function(e) {
+      try { drop.parentNode.removeChild(drop); } catch(e) {}
+      var which = e.dataTransfer.getData("Text");
+      if(which == this.dataset.stripName) {
+        e.preventDefault();
+        return;
+      }
+      if(typeof strips[which] != "undefined") {
+        this.parentNode.insertBefore(strips[which], this.nextSibling);
+        var newOrder = document.getElementsByClassName("strip");
+        var newOrderString = "";
+        for(var i=0; i<newOrder.length; i++) {
+          var name = newOrder[i].dataset.stripName;
+          newOrderString += (newOrderString.length > 0 ? "," : "") + name;
+        }
+        localStorage["stripsOrder"] = newOrderString;
+        e.preventDefault();
+      }
+    }
+    var deleter = document.createElement("sup");
+    deleter.innerHTML = "[x]";
+    deleter.style.fontWeight = "normal";
+    deleter.style.color = "#900";
+    deleter.style.fontSize = "10px";
+    deleter.style.position = "absolute";
+    deleter.style.display = "none";
+    deleter.style.cursor = "pointer";
+    var h2 = strips[i].getElementsByTagName("h2")[0];
+    h2.appendChild(deleter);
+    h2.deleter = deleter;
+    h2.onmouseover = function() { this.deleter.style.display = "inline"; }
+    h2.onmouseout = function() { this.deleter.style.display = "none"; }
+    deleter.onclick = function() {
+        blocked.push(this.parentNode.parentNode.dataset.stripName);
+        localStorage["blocked"] = blocked.join(",");
+        blockList();
+        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
+    }
+  }
+  var h1 = document.getElementsByTagName("h1")[1];
+  h1.ondrop = strips[0].ondrop;
+  h1.ondragover = strips[0].ondragover;
+  if(typeof localStorage["stripsOrder"] != "undefined") {
+    var order = localStorage["stripsOrder"].split(/,/);
+    for(var i=order.length-1; i>=0; i--) {
+      if(document.getElementsByClassName("strip")[0].dataset.stripName != order[i] && typeof strips[order[i]] != "undefined") {
+        document.getElementsByClassName("strip")[0].parentNode.insertBefore(strips[order[i]], document.getElementsByClassName("strip")[0]);
+      }
+    }
+  }
+})();
diff --git a/htdocs/page.min.js b/htdocs/page.min.js
new file mode 100644
index 0000000..726a647
--- /dev/null
+++ b/htdocs/page.min.js
@@ -0,0 +1,6 @@
+(function(){function h(){d="undefined"!=typeof localStorage.blocked&&0<localStorage.blocked.length?localStorage.blocked.split(","):[];var a=document.getElementById("blockDiv");"undefined"!=typeof a&&null!=a&&a.parentNode.removeChild(a);if(0<d.length){a=document.createElement("div");a.id="blockDiv";a.innerHTML="Ausgeblendete Inhalte: ";a.style.fontSize="10px";a.style.marginTop="50px";for(var b=0;b<d.length;b++)(function(b){var c=document.createElement("a");c.innerHTML=d[b];c.href="#";0<b&&a.appendChild(document.createTextNode(", "));
+c.onclick=function(a){d=d.slice(0,b).concat(d.slice(b+1));localStorage.blocked=d.join(",");document.location.reload();a.preventDefault();return!1};a.appendChild(c)})(b);document.getElementById("content").appendChild(a)}}for(var d="undefined"!=typeof localStorage.blocked&&0<localStorage.blocked.length?localStorage.blocked.split(","):[],a=0;a<d.length;a++){var b=document.querySelector("div[data-strip-name='"+d[a]+"']");null!=b&&b.parentNode.removeChild(b)}window.addEventListener("load",h,!1);var c=
+document.getElementsByClassName("strip"),f=document.createElement("div");f.style.background="#888";f.style.fontSize="5px";f.innerHTML="&nbsp;";for(a=0;a<c.length;a++){c[c[a].dataset.stripName]=c[a];c[a].setAttribute("draggable","true");c[a].ondragstart=function(a){a.dataTransfer.setData("Text",this.dataset.stripName)};c[a].ondragover=function(a){this.parentNode.insertBefore(f,this.nextSibling);a.preventDefault();return!1};c[a].ondragleave=function(a){try{f.parentNode.removeChild(f)}catch(b){}return!1};
+c[a].ondrop=function(a){try{f.parentNode.removeChild(f)}catch(b){}var d=a.dataTransfer.getData("Text");if(d==this.dataset.stripName)a.preventDefault();else if("undefined"!=typeof c[d]){this.parentNode.insertBefore(c[d],this.nextSibling);for(var d=document.getElementsByClassName("strip"),e="",g=0;g<d.length;g++)e+=(0<e.length?",":"")+d[g].dataset.stripName;localStorage.stripsOrder=e;a.preventDefault()}};b=document.createElement("sup");b.innerHTML="[x]";b.style.fontWeight="normal";b.style.color="#900";
+b.style.fontSize="10px";b.style.position="absolute";b.style.display="none";b.style.cursor="pointer";var e=c[a].getElementsByTagName("h2")[0];e.appendChild(b);e.deleter=b;e.onmouseover=function(){this.deleter.style.display="inline"};e.onmouseout=function(){this.deleter.style.display="none"};b.onclick=function(){d.push(this.parentNode.parentNode.dataset.stripName);localStorage.blocked=d.join(",");h();this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)}}a=document.getElementsByTagName("h1")[1];
+a.ondrop=c[0].ondrop;a.ondragover=c[0].ondragover;if("undefined"!=typeof localStorage.stripsOrder)for(b=localStorage.stripsOrder.split(/,/),a=b.length-1;0<=a;a--)document.getElementsByClassName("strip")[0].dataset.stripName!=b[a]&&"undefined"!=typeof c[b[a]]&&document.getElementsByClassName("strip")[0].parentNode.insertBefore(c[b[a]],document.getElementsByClassName("strip")[0])})();
diff --git a/templates/base.html b/templates/base.html
index 62319be..8a2e338 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -36,18 +36,20 @@
       <h1>{{date.day}}.{{date.month}}.{{date.year}}</h1>
 
       {%- for entry in entries %}
-        <h2>
-          {{ entry.comic.name }}
-        </h2>
-        <span class="source">
-          <a target="_blank" href="{{entry.comic.url}}">Originalseite</a>
-        </span><br />
-        <img src="{{ entry.path }}" alt="{{ entry.comic.name }} Comic vom {{date.day}}.{{date.month}}.{{date.year}}" {% if entry.alt -%} title="{{entry.alt|safe}}" {%- endif -%}>
+        <div class="strip" data-strip-name="{{ entry.comic.name }}">
+          <h2>
+            {{ entry.comic.name }}
+          </h2>
+          <span class="source">
+            <a target="_blank" href="{{entry.comic.url}}">Originalseite</a>
+          </span><br />
+          <img src="{{ entry.path }}" alt="{{ entry.comic.name }} Comic vom {{date.day}}.{{date.month}}.{{date.year}}" {% if entry.alt -%} title="{{entry.alt|safe}}" {%- endif -%}>
 
-        {%- if entry.title %}
-        <br />
-        <span class="title"> {{ entry.title }} </span>
-        {% endif %}
+          {%- if entry.title %}
+          <br />
+          <span class="title"> {{ entry.title }} </span>
+          {% endif %}
+        </div>
       {% endfor -%}
 
       {%- if next or prev %}
@@ -58,7 +60,7 @@
         </a>
         {% endif -%}
 
-	{%- if next %}
+      {%- if next %}
         <a class="next" href="{{ next.strftime("/sites/%Y/%m/%d.html") }}">
           sp&auml;ter &rarr;
         </a>
@@ -70,6 +72,9 @@
       </div>
     {% endif %}
     </div>
+
+    <script type="text/javascript" src="/page.min.js">
+    </script>
   </body>
 </html>