loading animations

11 files changed, 76 insertions, 64 deletions

diff --git a/mmm/mmmfs/browser.moon b/mmm/mmmfs/browser.moon
index 5038a3a..97efc4e 100644
--- a/mmm/mmmfs/browser.moon
+++ b/mmm/mmmfs/browser.moon
@@ -67,7 +67,7 @@ class Browser
     else
       main\prepend with get_or_create 'nav', 'browser-navbar'
         .node.innerHTML = ''
-        \append span 'path: ', @path\map (path) -> with div style: { display: 'inline-block' }
+        \append span 'path: ', @path\map (path) -> with div class: 'path', style: { display: 'inline-block' }
           path_segment = (name, href) ->
             a name, :href, onclick: (_, e) ->
               e\preventDefault!
@@ -136,6 +136,8 @@ class Browser
 
     ok, res, trace = xpcall convert, err_and_trace, active, prop
 
+    document.body.classList\remove 'loading' if MODE == 'CLIENT'
+
     if ok
       res or disp_error "[no conversion path to #{prop.type}]"
     elseif res and res.match and res\match '%[nossr%]$'
@@ -187,7 +189,12 @@ class Browser
 
   default_convert = (key) => @get key.name, 'mmm/dom'
 
-  navigate: (new) => @path\set new
+  navigate: (new) =>
+    if MODE == 'CLIENT'
+      document.body.classList\add 'loading'
+      window\setTimeout (-> @path\set new), 150
+    else
+      @path\set new
 
 {
   :Browser
diff --git a/mmm/mmmfs/util.moon b/mmm/mmmfs/util.moon
new file mode 100644
index 0000000..1737d89
--- /dev/null
+++ b/mmm/mmmfs/util.moon
@@ -0,0 +1,20 @@
+(elements) ->
+  import a from elements
+
+  link_to = (fileder, name) ->
+    name or= fileder\get 'title: mmm/dom'
+    name or= fileder\gett 'name: alpha'
+
+    if href = fileder\get 'link: URL.*'
+      a name, :href, target: '_blank'
+    else
+      a name, {
+        href: fileder.path
+        onclick: (e) =>
+          e\preventDefault!
+          BROWSER\navigate fileder.path
+      }
+
+  {
+    :link_to
+  }
diff --git a/root/Tupdefault.lua b/root/Tupdefault.lua
index 039edf0..7616065 100644
--- a/root/Tupdefault.lua
+++ b/root/Tupdefault.lua
@@ -2,9 +2,14 @@ local LUA_PATH = lua_path()
 bundle = LUA_PATH .. ' moon ' .. build .. '/bundle_fileder.moon'
 render = LUA_PATH .. ' moon ' .. build .. '/render_fileder.moon'
 
--- @TODO: whish there was a better glob for this?
-facets = tup.glob '*$*'
-inputs = ''
+local _facets, facets = {}, {}
+for i, file in ipairs(tup.glob '*$*') do _facets[file] = true end
+for i, file in ipairs(tup.glob '*:*') do _facets[file] = true end
+
+for file in pairs(_facets) do facets += file end
+table.sort(facets)
+
+local inputs = ''
 for i, file in ipairs(facets) do
   inputs = inputs .. " '" .. file .. "'"
 end
diff --git a/root/articles/text$moonscript -> fn -> mmm$dom.moon b/root/articles/text$moonscript -> fn -> mmm$dom.moon
index 1c04309..864b604 100644
--- a/root/articles/text$moonscript -> fn -> mmm$dom.moon
+++ b/root/articles/text$moonscript -> fn -> mmm$dom.moon
@@ -1,18 +1,10 @@
-import div, h3, ul, li, a from require 'mmm.dom'
+import div, h3, ul, li from require 'mmm.dom'
+import link_to from (require 'mmm.mmmfs.util') require 'mmm.dom'
 
 =>
   div {
-    h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
+    link_to @, h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
     ul for child in *@children
-      name = child\gett 'name: alpha'
-      desc = child\gett 'description: text/plain'
-      li {
-        a name, {
-          href: child.path,
-          onclick: (e) =>
-            e\preventDefault!
-            BROWSER\navigate child.path
-        },
-        ': ', desc
-      }
+      desc = child\gett 'description: mmm/dom'
+      li (link_to child), ': ', desc
   }
diff --git a/root/experiments/text$moonscript -> fn -> mmm$dom.moon b/root/experiments/text$moonscript -> fn -> mmm$dom.moon
index 1c04309..864b604 100644
--- a/root/experiments/text$moonscript -> fn -> mmm$dom.moon
+++ b/root/experiments/text$moonscript -> fn -> mmm$dom.moon
@@ -1,18 +1,10 @@
-import div, h3, ul, li, a from require 'mmm.dom'
+import div, h3, ul, li from require 'mmm.dom'
+import link_to from (require 'mmm.mmmfs.util') require 'mmm.dom'
 
 =>
   div {
-    h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
+    link_to @, h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
     ul for child in *@children
-      name = child\gett 'name: alpha'
-      desc = child\gett 'description: text/plain'
-      li {
-        a name, {
-          href: child.path,
-          onclick: (e) =>
-            e\preventDefault!
-            BROWSER\navigate child.path
-        },
-        ': ', desc
-      }
+      desc = child\gett 'description: mmm/dom'
+      li (link_to child), ': ', desc
   }
diff --git a/root/games/text$moonscript -> fn -> mmm$dom.moon b/root/games/text$moonscript -> fn -> mmm$dom.moon
index 8609678..0139841 100644
--- a/root/games/text$moonscript -> fn -> mmm$dom.moon
+++ b/root/games/text$moonscript -> fn -> mmm$dom.moon
@@ -1,8 +1,9 @@
 import div, h3, ul, li, a, h4, img, p from require 'mmm.dom'
+import link_to from (require 'mmm.mmmfs.util') require 'mmm.dom'
 
 =>
   div {
-    h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
+    link_to @, h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
     ul with for child in *@children
         link_if_content = (opts) ->
           a with opts
diff --git a/root/meta/text$moonscript -> fn -> mmm$dom.moon b/root/meta/text$moonscript -> fn -> mmm$dom.moon
index 65ba93f..9062ae3 100644
--- a/root/meta/text$moonscript -> fn -> mmm$dom.moon
+++ b/root/meta/text$moonscript -> fn -> mmm$dom.moon
@@ -1,25 +1,17 @@
-import div, h3, p, br, ul, li, b, a from require 'mmm.dom'
+import div, h3, p, br, ul, li, i from require 'mmm.dom'
+import link_to from (require 'mmm.mmmfs.util') require 'mmm.dom'
 
 => div {
     style: { 'max-width': '700px' },
-    h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
+    link_to @, h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
     p "mmm is a collection of Lua/Moonscript modules for web development.
-      All modules are 'polymorphic' - they can run in the ", (b 'browser'),
+      All modules are 'polymorphic' - they can run in the ", (i 'browser'),
       ", using the native browser API for creating and interacting with DOM content, as well as on the ",
-      (b 'server'), ", where they operate on and produce equivalent HTML strings."
+      (i 'server'), ", where they operate on and produce equivalent HTML strings."
     p "As the two implementations of each module are designed to be compatible,
       mmm facilitates code and content sharing between server and client
       and enables serverside rendering and rehydration."
     ul for child in *@children
-      name = child\gett 'name: alpha'
       desc = child\gett 'description: mmm/dom'
-      li {
-        a name, {
-          href: child.path,
-          onclick: (e) =>
-            e\preventDefault!
-            BROWSER\navigate child.path
-        },
-        ': ', desc
-      }
+      li (link_to child), ': ', desc
   }
diff --git a/root/projects/text$moonscript -> fn -> mmm$dom.moon b/root/projects/text$moonscript -> fn -> mmm$dom.moon
index be9f35f..864b604 100644
--- a/root/projects/text$moonscript -> fn -> mmm$dom.moon
+++ b/root/projects/text$moonscript -> fn -> mmm$dom.moon
@@ -1,18 +1,10 @@
-import div, h3, ul, li, a from require 'mmm.dom'
+import div, h3, ul, li from require 'mmm.dom'
+import link_to from (require 'mmm.mmmfs.util') require 'mmm.dom'
 
 =>
   div {
-    h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
+    link_to @, h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
     ul for child in *@children
-      name = child\gett 'name: alpha'
       desc = child\gett 'description: mmm/dom'
-      li {
-        a name, {
-          href: child.path,
-          onclick: (e) =>
-            e\preventDefault!
-            BROWSER\navigate child.path
-        },
-        ': ', desc
-      }
+      li (link_to child), ': ', desc
   }
diff --git a/root/text$moonscript -> fn -> mmm$dom.moon b/root/text$moonscript -> fn -> mmm$dom.moon
index 5b4f3e0..f1e8ce1 100644
--- a/root/text$moonscript -> fn -> mmm$dom.moon
+++ b/root/text$moonscript -> fn -> mmm$dom.moon
@@ -22,6 +22,7 @@ import opairs from require 'mmm.ordered'
   }
 
   for child in *@children
+    continue if child\get 'hidden: bool'
     append div {
       class: 'well'
       (child\get 'preview: mmm/dom') or child\get 'mmm/dom'
diff --git a/scss/_browser.scss b/scss/_browser.scss
index ab6be14..58ce465 100644
--- a/scss/_browser.scss
+++ b/scss/_browser.scss
@@ -51,12 +51,6 @@
       justify-content: space-between;
       background: $gray-bright;
 
-      /*
-      > * {
-        flex: 0 0 auto;
-      }
-      */
-
       > span:first-of-type {
         flex: 1 0 auto;
       }
@@ -72,4 +66,13 @@
       padding: 1em 2em;
     }
   }
+
+  .content, .path {
+    opacity: 1;
+    transition: opacity 150ms;
+
+    body.loading & {
+      opacity: 0;
+    }
+  }
 }
diff --git a/scss/_header.scss b/scss/_header.scss
index b3a6898..5613829 100644
--- a/scss/_header.scss
+++ b/scss/_header.scss
@@ -29,5 +29,12 @@ header {
     font-weight: 800;
     font-size: 0.7em;
     vertical-align: -0.04em;
+
+    transform: perspective(100rem) rotateY(0deg);
+    transition: transform 100ms;
+
+    body.loading & {
+      transform: perspective(100rem) rotateY(90deg);
+    }
   }
 }