mobile category filter modal

src/scripts/app.tag

@@ -261,6 +261,16 @@ self.on("mount", () => {
       }
   );
 
+  self.one("updated", () => {
+    document.addEventListener("click", function(event) {
+      console.log("detected click");
+      event.preventDefault();
+      if (!event.target.closest('#categorymodal')) {
+        window.RiotControl.trigger("closecategories");
+      }
+    });
+  });
+
   self.route.base('/blog/')
   self.route("/", () => { self.route("/browse"); });
   self.route("/posts", () => { self.route(`/posts/${self.state._id}`); });

src/scripts/browse.tag

@@ -33,6 +33,21 @@
         </div>
         <div class="col-4"></div>
       </div>
+      <div class="columns">
+        <div class="col-12">
+          <div
+            data-is="categorymodal"
+          >
+            <categoryfilter
+              name={false}
+              category={parent.opts.state.category_filter}
+              items={parent.opts.state.categories}
+              onfilter={parent.filterCategories}
+            >
+            </categoryfilter>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="columns">
       <div
@@ -83,6 +98,7 @@
 <script type="es6">
 import './raw.tag';
 import './categoryfilter.tag';
+import './categorymodal.tag';
 import './loading.tag';
 import route from 'riot-route';
 import { default as RiotControl } from 'riotcontrol';
@@ -133,6 +149,8 @@ self.filterCategories = (category) => {
       ev.preventDefault();
     }
 
+    RiotControl.trigger("closecategories");
+
     self.route(`browse/${category}`);
     self.update({
       "disabled" : false,

src/scripts/categoryfilter.tag

@@ -1,6 +1,6 @@
 <categoryfilter>
   <div class="categorybar">
-    <h4>
+    <h4 if={opts.name}>
       { opts.name }
     </h4>
 

src/scripts/categorymodal.tag

@@ -0,0 +1,79 @@
+<categorymodal>
+  <button
+    style={{"margin" : "auto"}}
+    class="btn btn-primary branded show-md"
+    onclick={activate}
+  >
+    Categories
+  </button>
+  <div
+    class={"modal " + (active ? "active" : "")}
+  >
+    <div class="modal-overlay"></div>
+    <div
+      class="modal-container"
+      id="categorymodal"
+    >
+      <div class="modal-header">
+        <button
+          class="btn btn-clear float-right"
+          onclick={close}
+        >
+        </button>
+        <div class="modal-title h5">
+          Categories
+        </div>
+      </div>
+      <div class="modal-body">
+        <div class="content">
+          <yield/>
+        </div>
+      </div>
+      <div class="modal-footer">
+      </div>
+    </div>
+  </div>
+<script>
+import { default as RiotControl } from 'riotcontrol';
+var self = this;
+
+self.active = false;
+
+self.opened = false;
+
+self.activate = (ev) => {
+  ev.preventDefault();
+  self.update({
+    "active" : true
+  });
+}
+
+self.close = (ev) => {
+  ev.preventDefault();
+  self.update({
+    "active" : false,
+    "opened" : false
+  });
+}
+
+self.toggle = (ev) => {
+  ev.preventDefault();
+  self.update({"active" : !self.active});
+}
+
+self.on("mount", () => {
+  RiotControl.on("closecategories", () => {
+    if (self.active && self.opened) {
+      self.update({
+        "active" : false,
+        "opened" : false
+      });
+    }
+    else if (self.active && !self.opened) {
+      self.update({"opened" : true});
+    }
+  });
+});
+
+</script>
+</categorymodal>

src/scripts/editor.tag

@@ -52,7 +52,7 @@
           <textarea onfocus={clearplaceholder}
                     onblur={checkplaceholder}
                     oninput={echo}
-                    rows="10"
+                    rows="30"
                     cols="30"
                     __disabled={""}
                     class="editor form-input centered"