reverseqr

commit f2e599412f1a2143b99571336a83aa223792cea5
parent 2bdfd15fcd8d49b0d28d0ff500a65e9033bbebbf
Author: tongong <tongong@gmx.net>
Date:   Tue, 29 Mar 2022 20:33:39 +0200

new animation style

Diffstat:
M
src/components/edit-view.js
 | 
14
++++++++------
M
src/components/qr-view.js
 | 
32
+++++++++++---------------------
M
src/main.js
 | 
18
++++++++++++++++--
A
src/modules/state.js
 | 
11
+++++++++++
M
src/styles.css
 | 
36
+++++++++++++++++++++++-------------

5 files changed, 69 insertions(+), 42 deletions(-)
diff --git a/src/components/edit-view.js b/src/components/edit-view.js
@@ -11,11 +11,13 @@ new WebrtcProvider("jaskdfasdfasdf", ydoc, { });
 
 module.exports = () => {
     return {
-        view: () => m(".main.absolute-center", m("textarea.maxsize", {
-            oncreate: (v) => {
-                new TextAreaBinding(textelem, v.dom);
-                v.dom.focus();
-            },
-        })),
+        view: () => m(".page",
+            m(".main.absolute-center", m("textarea.maxsize", {
+                oncreate: (v) => {
+                    new TextAreaBinding(textelem, v.dom);
+                    v.dom.focus();
+                },
+            })),
+        )
     }
 };
diff --git a/src/components/qr-view.js b/src/components/qr-view.js
@@ -2,27 +2,17 @@ const m = require("mithril");
 const qr = require("../modules/qrcode.js");
 
 module.exports = () => {
-    let circleClosed = false;
-    let closefn = () => {
-        circleClosed = true;
-        m.redraw();
-    }
-    // TODO remove
-    document.body.onclick = closefn;
     return {
-        view: () => m(".main.absolute-center",
-            m(".circle.absolute-center", {
-                class: circleClosed? "circle-closed" : "",
-                oncreate: (v) => {
-                    new qr(v.dom, {
-                        text: "https://wikipedia.org",
-                        colorDark: "#212121",
-                        colorLight: "#dcdcdc",
-                        width: 512,
-                        height: 512,
-                    });
-                }
-            })
-        ),
+        view: () => m(".page.qrwrap", {
+            oncreate: (v) => {
+                new qr(v.dom, {
+                    text: "https://wikipedia.org",
+                    colorDark: "#212121",
+                    colorLight: "#dcdcdc",
+                    width: 512,
+                    height: 512,
+                });
+            }
+        })
     }
 };
diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,5 @@
 const m = require("mithril");
+const state = require("./modules/state.js");
 const editView = require("./components/edit-view.js");
 const qrView = require("./components/qr-view.js");
 
@@ -19,7 +20,20 @@ m.mount(
     }
 )
 
+
+const main = () => {
+    return {
+        view: () => m(".pagewrap", {
+            class: state.qr? "": "scroll-down",
+        },
+            m(qrView),
+            m(editView),
+        ),
+    }
+}
+
+document.body.onclick = state.closeQr;
+
 m.route(document.body, "/", {
-    "/": editView,
-    "/qr": qrView,
+    "/": main,
 });
diff --git a/src/modules/state.js b/src/modules/state.js
@@ -0,0 +1,11 @@
+const m = require("mithril");
+
+const state = {
+    qr: true,
+    closeQr: function() {
+        state.qr = false;
+        m.redraw();
+    }
+}
+
+module.exports = state;
diff --git a/src/styles.css b/src/styles.css
@@ -42,24 +42,34 @@ textarea::-webkit-scrollbar {
     display: none;
 }
 
-.circle {
+.pagewrap {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 200vh;
+}
+
+.scroll-down {
+    transition: ease-in-out top 0.8s;
+    top: -100vh;
+}
+
+.page {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+}
+
+.qrwrap {
     background-color: #dcdcdc;
-    width: min(6000px, 900vh, 900vw);
-    height: min(6000px, 900vh, 900vw);
-    border-radius: 50%;
-    transition: linear width 1s, linear height 1s;
 }
 
-.circle img, .circle canvas {
+.qrwrap img, .qrwrap canvas {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    height: 7%;
-    width: 7%;
-}
-
-.circle-closed {
-    height: 0%;
-    width: 0%;
+    width: min(512px, 90vh, 90vw);
+    height: min(512px, 90vh, 90vw);
 }