add pinwall example

12 files changed, 190 insertions, 25 deletions

diff --git a/mmm/mmmfs/plugins/init.moon b/mmm/mmmfs/plugins/init.moon
index 5afd7be..c31cd57 100644
--- a/mmm/mmmfs/plugins/init.moon
+++ b/mmm/mmmfs/plugins/init.moon
@@ -189,31 +189,6 @@ converts = {
   }
   {
     inp: 'table',
-    out: 'text/json',
-    cost: 2
-    transform: do
-      tojson = (obj) ->
-        switch type obj
-          when 'string'
-            string.format '%q', obj
-          when 'table'
-            if obj[1] or not next obj
-              "[#{table.concat [tojson c for c in *obj], ','}]"
-            else
-              "{#{table.concat ["#{tojson k}: #{tojson v}" for k,v in pairs obj], ', '}}"
-          when 'number'
-            tostring obj
-          when 'boolean'
-            tostring obj
-          when 'nil'
-            'null'
-          else
-            error "unknown type '#{type obj}'"
-
-      (val) => tojson val
-  }
-  {
-    inp: 'table',
     out: 'mmm/dom',
     cost: 5
     transform: do
@@ -258,6 +233,7 @@ add_converts = (module) ->
       table.insert editors, editor
 
 add_converts 'code'
+add_converts 'json'
 add_converts 'markdown'
 add_converts 'mermaid'
 add_converts 'twitter'
diff --git a/mmm/mmmfs/plugins/json.moon b/mmm/mmmfs/plugins/json.moon
new file mode 100644
index 0000000..cbcff46
--- /dev/null
+++ b/mmm/mmmfs/plugins/json.moon
@@ -0,0 +1,56 @@
+encode = (obj) ->
+  switch type obj
+    when 'string'
+      string.format '%q', obj
+    when 'table'
+      if obj[1] or not next obj
+        "[#{table.concat [encode c for c in *obj], ','}]"
+      else
+        "{#{table.concat ["#{encode k}: #{encode v}" for k,v in pairs obj], ', '}}"
+    when 'number'
+      tostring obj
+    when 'boolean'
+      tostring obj
+    when 'nil'
+      'null'
+    else
+      error "unknown type '#{type obj}'"
+
+decode = if MODE == 'CLIENT'
+  import Array, Object, JSON from js.global
+
+  fix = (val) ->
+    switch type val
+      when 'userdata'
+        if Array\isArray val
+          [fix x for x in js.of val]
+        else
+          {(fix e[0]), (fix e[1]) for e in js.of Object\entries(val)}
+      else
+        val
+
+  encode
+  decode = (str) -> fix JSON\parse str
+else if cjson = require 'cjson'
+  cjson.decode
+else
+  warn 'only partial JSON support, please install cjson'
+
+
+{
+  converts: {
+    {
+      inp: 'table',
+      out: 'text/json',
+      cost: 2
+      transform: (val) => encode val
+    }
+    if decode
+      {
+        inp: 'text/json'
+        out: 'table'
+        cost: 1
+        transform: (val) => decode val
+      }
+  }
+}
diff --git a/root/articles/mmmfs/examples/$order b/root/articles/mmmfs/examples/$order
index 7428a7e..348f5fe 100644
--- a/root/articles/mmmfs/examples/$order
+++ b/root/articles/mmmfs/examples/$order
@@ -3,3 +3,4 @@ image
 markdown
 empty
 gallery
+pinwall
diff --git a/root/articles/mmmfs/examples/pinwall/$order b/root/articles/mmmfs/examples/pinwall/$order
new file mode 100644
index 0000000..b8b054a
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/$order
@@ -0,0 +1,3 @@
+image
+text
+video
diff --git a/root/articles/mmmfs/examples/pinwall/image/image$png.png b/root/articles/mmmfs/examples/pinwall/image/image$png.png
new file mode 100644
index 0000000..1628d99
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/image/image$png.png
diff --git a/root/articles/mmmfs/examples/pinwall/image/pinwall_info: text$json b/root/articles/mmmfs/examples/pinwall/image/pinwall_info: text$json
new file mode 100644
index 0000000..74fba2c
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/image/pinwall_info: text$json
@@ -0,0 +1 @@
+{"x": 35.0, "y": 209.0, "w": 205.0, "h": 155.0}
\ No newline at end of file
diff --git a/root/articles/mmmfs/examples/pinwall/text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/examples/pinwall/text$moonscript -> fn -> mmm$dom.moon
new file mode 100644
index 0000000..e611579
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/text$moonscript -> fn -> mmm$dom.moon
@@ -0,0 +1,120 @@
+import article, div from require 'mmm.dom'
+import convert from require 'mmm.mmmfs.conversion'
+
+update_info = (fileder, x, y, w, h) ->
+  info = (fileder\get 'pinwall_info: table') or x: 100, y: 100, w: 300, h: 300
+  info.x = x if x
+  info.y = y if y
+  info.w = w if w
+  info.h = h if h
+
+  json = convert 'table', 'text/json', info, fileder, 'pinwall_info'
+  fileder\set 'pinwall_info: text/json', json
+
+CLIENT = MODE == 'CLIENT'
+
+=>
+
+  pending = {}
+  observe = if CLIENT
+    map = {}
+    observer = js.new js.global.ResizeObserver, (_, entries) ->
+      for entry in js.of entries
+        if child = map[entry.target]
+          rect = entry.contentRect
+          pending[child] = -> update_info child, nil, nil, rect.width, rect.height
+
+    (node, child) ->
+      map[node] = child
+      observer\observe node
+
+  drag = nil
+  
+  children = for child in *@children
+      info = (child\get 'pinwall_info: table') or x: 100, y: 100, w: 300, h: 300
+      wrapper = div {
+        style:
+          position: 'absolute'
+          padding: '10px'
+          resize: 'both'
+          overflow: 'hidden'
+          background: 'var(--gray-dark)'
+          border: '1px solid var(--gray-bright)'
+
+          left: "#{info.x}px"
+          top: "#{info.y}px"
+          width: "#{info.w}px"
+          height: "#{info.h}px"
+
+        -- handle for moving the child
+        div {
+          style:
+            top: '0'
+            left: '0'
+            right: '0'
+            height: '10px'
+            cursor: 'pointer'
+            position: 'absolute'
+
+          onmousedown: CLIENT and (_, e) ->
+            node = e.target.parentElement
+            drag = {
+              :child
+              :node
+
+              startX: tonumber node.style.left\match '(%d+)px'
+              startY: tonumber node.style.top\match '(%d+)px'
+              startMouseX: e.clientX
+              startMouseY: e.clientY
+            }
+        }
+
+        -- child content
+        div {
+          style:
+            width: '100%'
+            height: '100%'
+            background: 'var(--white)'
+
+          (child\gett 'mmm/dom')
+        }
+      }
+
+      -- listen for resize events
+      observe wrapper, child if CLIENT
+      wrapper
+
+  children.style = {
+    width: '1000px'
+    height: '500px'
+  }
+
+  if CLIENT
+    children.onmousemove = (_, e) ->
+      return unless drag
+
+      x = drag.startX + (e.clientX - drag.startMouseX)
+      y = drag.startY + (e.clientY - drag.startMouseY)
+      drag.node.style.left = "#{x}px"
+      drag.node.style.top = "#{y}px"
+
+    children.onmouseup = (_, e) ->
+      for k, func in pairs pending
+        func!
+      pending = {}
+
+      return unless drag
+
+      x = drag.startX + (e.clientX - drag.startMouseX)
+      y = drag.startY + (e.clientY - drag.startMouseY)
+      update_info drag.child, x, y
+      drag = nil
+
+    children.onmouseleave = (_, e) ->
+      return unless drag
+
+      drag.node.style.left = "#{drag.startX}px"
+      drag.node.style.top = "#{drag.startY}px"
+      drag = nil
+
+  article children
diff --git a/root/articles/mmmfs/examples/pinwall/text/pinwall_info: text$json b/root/articles/mmmfs/examples/pinwall/text/pinwall_info: text$json
new file mode 100644
index 0000000..d373545
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/text/pinwall_info: text$json
@@ -0,0 +1 @@
+{"x": 91.0, "y": 17.0, "w": 186.0, "h": 128.0}
\ No newline at end of file
diff --git a/root/articles/mmmfs/examples/pinwall/text/text$plain.txt b/root/articles/mmmfs/examples/pinwall/text/text$plain.txt
new file mode 100644
index 0000000..8838e5a
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/text/text$plain.txt
@@ -0,0 +1,4 @@
+This is a pinwall example.
+Every box is a separate fileder.
+The boxes can be rearranged and resized freely.
+If the server is in read-write mode, the changes are saved persistently in real time.
diff --git a/root/articles/mmmfs/examples/pinwall/title: text$plain b/root/articles/mmmfs/examples/pinwall/title: text$plain
new file mode 100644
index 0000000..9d29c5d
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/title: text$plain
@@ -0,0 +1 @@
+A pinwall
diff --git a/root/articles/mmmfs/examples/pinwall/video/URL -> video$mp4 b/root/articles/mmmfs/examples/pinwall/video/URL -> video$mp4
new file mode 100644
index 0000000..6364771
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/video/URL -> video$mp4
@@ -0,0 +1 @@
+https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4
diff --git a/root/articles/mmmfs/examples/pinwall/video/pinwall_info: text$json b/root/articles/mmmfs/examples/pinwall/video/pinwall_info: text$json
new file mode 100644
index 0000000..30c947e
--- /dev/null
+++ b/root/articles/mmmfs/examples/pinwall/video/pinwall_info: text$json
@@ -0,0 +1 @@
+{"x": 263.0, "y": 210.0, "w": 353.0, "h": 295.0}
\ No newline at end of file