add gallery example

2 files changed, 54 insertions, 1 deletions

diff --git a/app/mmmfs/gallery.moon b/app/mmmfs/gallery.moon
new file mode 100644
index 0000000..3c7e903
--- /dev/null
+++ b/app/mmmfs/gallery.moon
@@ -0,0 +1,51 @@
+import div, h1, a, img, br from require 'lib.html'
+
+URL = (url) => url
+
+children = for i=1,100
+  id = math.floor math.random! * 200
+  Fileder {
+    'name: alpha': "image#{id}"
+    'URL -> image/png': "https://picsum.photos/600/600/?image=#{id}"
+    'preview: URL -> image/png': "https://picsum.photos/200/200/?image=#{id}"
+  }
+
+props = {
+  'name: alpha': 'gallery',
+  'title: text/plain': "A Gallery of 100 random pictures, come in!",
+  'preview: moon -> mmm/dom': => div {
+    'the first pic as a little taste:',
+    br!,
+    img src: @children[1]\get 'preview', 'image/png', :URL
+  }
+  'moon -> mmm/dom': =>
+    link = (child) -> a {
+      href: '#',
+      onclick: -> BROWSER\navigate { 'gallery', (child\get 'name', 'alpha'), nil },
+      img src: child\gett 'preview', 'image/png', :URL
+    }
+
+    content = [link child for child in *@children]
+    table.insert content, 1, h1 'gallery index'
+    div content
+
+  'slideshow: moon -> mmm/dom': =>
+    import ReactiveVar, text, elements from require 'lib.component'
+
+    index = ReactiveVar 1
+
+    prev = (i) -> math.max 1, i - 1
+    next = (i) -> math.min #@children, i + 1
+
+    e = elements
+    e.div {
+      e.div {
+        e.a 'prev', href: '#', onclick: -> index\transform prev
+        index\map (i) -> text " image ##{i} "
+        e.a 'next', href: '#', onclick: -> index\transform next
+      },
+      index\map (i) -> img src: @children[i]\gett nil, 'image/png', LURL
+    }
+}
+
+Fileder props, children
diff --git a/app/mmmfs/tree.moon b/app/mmmfs/tree.moon
index e058b85..1b97974 100644
--- a/app/mmmfs/tree.moon
+++ b/app/mmmfs/tree.moon
@@ -241,6 +241,8 @@ If you are reading this in the source, then c'mon, just scroll past and give me
 and some bold **text** and `code tags` with me.",
   }
 
-  -- if we are on client (mmm.s-ol.nu/?client=mmmfs), throw in twisted as a child
+  require '.gallery',
+
+  -- if we are on client, throw in twisted as a child
   if MODE == 'CLIENT' then require '.twisted'
 }