add pinwall example

10 files changed, 133 insertions, 0 deletions

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