implemented superbindex

gibatronic · Aug 2, 2016 · c3bfb12 · c3bfb12
1 parent 2c3311a
commit c3bfb12
Show file tree

Hide file tree

Showing 3 changed files with 190 additions and 0 deletions.
diff --git a/client/scripts/main.js b/client/scripts/main.js
@@ -0,0 +1,81 @@
+!function() {
+  'use strict';
+
+  var $list;
+  var list;
+
+  var Item = function(data) {
+    this.name = data.name;
+    this.type = data.type;
+
+    this.render();
+    this.bind();
+  };
+
+  Item.prototype = {
+    $item: null,
+    name: null,
+    type: null,
+
+    activate: function() {
+      this.$link.classList.add('list__link--active');
+    },
+
+    bind: function() {
+      this.$link.addEventListener('focusin', this.activate.bind(this));
+      this.$link.addEventListener('focusout', this.deactivate.bind(this));
+      this.$link.addEventListener('mouseenter', this.activate.bind(this));
+      this.$link.addEventListener('mouseleave', this.deactivate.bind(this));
+    },
+
+    deactivate: function() {
+      this.$link.classList.remove('list__link--active');
+    },
+
+    render: function() {
+      this.$item = document.createElement('li');
+      this.$item.classList.add('list__item');
+      this.$item.classList.add('list__item--' + this.type);
+
+      this.$link = document.createElement('a');
+      this.$link.classList.add('list__link');
+      this.$link.classList.add('list__link--' + this.type);
+      this.$link.setAttribute('href', this.name);
+      this.$link.textContent = this.name;
+      this.$item.appendChild(this.$link);
+
+      return this;
+    }
+  };
+
+  var main = function() {
+    parse();
+    render();
+  };
+
+  var parse = function() {
+    var instantiate = function(item) {
+      return new Item(item);
+    };
+
+    list = JSON.parse(
+      document.getElementById('data')
+              .textContent
+    ).map(instantiate);
+  };
+
+  var render = function() {
+    $list = document.createElement('ol');
+
+    $list.classList.add('list');
+
+    var appendChild = function(item) {
+      $list.appendChild(item.$item);
+    };
+
+    list.forEach(appendChild);
+    document.body.appendChild($list);
+  };
+
+  document.addEventListener('DOMContentLoaded', main);
+}();
diff --git a/client/styles/main.scss b/client/styles/main.scss
@@ -0,0 +1,72 @@
+// Color theme by the Base16 project:
+// https://chriskempson.github.io/base16/#eighties
+
+$base00: #2d2d2d;
+$base01: #393939;
+$base02: #515151;
+$base03: #747369;
+$base04: #a09f93;
+$base05: #d3d0c8;
+$base06: #e8e6df;
+$base07: #f2f0ec;
+$base08: #f2777a;
+$base09: #f99157;
+$base0A: #ffcc66;
+$base0B: #99cc99;
+$base0C: #66cccc;
+$base0D: #6699cc;
+$base0E: #cc99cc;
+$base0F: #d27b53;
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 3.5rem;
+}
+
+html {
+  background-color: $base00;
+  color: $base05;
+  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-size: 16px;
+}
+
+.list {
+  display: block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+
+  &__item {
+    display: block;
+
+    &--directory + &--file {
+      margin-top: 1rem;
+    }
+  }
+
+  &__link {
+    display: block;
+    line-height: 0.45;
+    outline: 0;
+    padding-top: 0.5rem;
+    padding-bottom: calc(0.5rem + 0.125em);
+    text-decoration: none;
+    transition: color 0.025s linear;
+
+    &--directory {
+      color: $base0D;
+    }
+
+    &--file {
+      color: $base05;
+    }
+
+    &--active {
+      color: $base0E;
+    }
+  }
+}
diff --git a/client/templates/main.xslt b/client/templates/main.xslt
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+  <xsl:output method="html" encoding="UTF-8" />
+
+  <xsl:template match="/">
+    <xsl:text disable-output-escaping="yes">&lt;!DOCTYPE html&gt;</xsl:text>
+
+    <html>
+      <head>
+        <title>superbindex</title>
+        <meta name="viewport" conent="initial-scale=1, minimum-scale=1, shrink-to-fit=no, width=device-width" />
+        <style><![CDATA[{{{style}}}]]></style>
+      </head>
+      <body>
+        <script id="data" type="application/json">
+          <xsl:text>[</xsl:text>
+          <xsl:for-each select="list/*">
+            <xsl:if test="position() != 1">
+              <xsl:text>, </xsl:text>
+            </xsl:if>
+            <xsl:text>{</xsl:text>
+            <xsl:text>"name": "</xsl:text>
+            <xsl:value-of select="." />
+            <xsl:text>", "type": "</xsl:text>
+            <xsl:value-of select="name(.)" />
+            <xsl:text>"</xsl:text>
+            <xsl:text>}</xsl:text>
+          </xsl:for-each>
+          <xsl:text>]</xsl:text>
+        </script>
+
+        <script><![CDATA[{{{script}}}]]></script>
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>