Added present page in slide

slides/index.ftd

@@ -1,6 +1,6 @@
 -- ds.page: Slides UIs
 
 - [Login](slides/login/)
-
+- [Present](slides/present/)
 
 -- end: ds.page

slides/present.ftd

@@ -0,0 +1,23 @@
+-- import: fifthtry.github.io/ui/slides/ui/present
+
+
+-- optional string $current:
+-- optional string $previous:
+-- optional string $next:
+-- integer order: 1
+
+
+-- ftd.column:
+width: fill-container
+height: fill-container
+spacing: space-between
+
+;; Todo: if: { loaded && index == order } (**for loops)
+-- present.present-slide-view: $current
+current-slide-order: $order
+
+-- present.present-switcher: $order
+previous: $previous
+next: $next
+
+-- end: ftd.column

slides/ui/loader-component.js

@@ -0,0 +1,68 @@
+class LoaderComponent extends HTMLElement {
+    connectedCallback() {
+        console.log("Loader component initialized")
+        // Always call super first in constructor
+        let data = window.ftd.component_data(this);
+        const version = data.version ? data.version.get() : 'v1';
+        console.log(data);
+        switch(version) {
+            case 'v1':
+                // Using http from function.js
+                http(data.url.get(), "get", null, null)
+            break;
+            case 'v2':
+                http2(data.url.get(), "get", null, null, data.return_variable);
+            break;
+        }
+
+        // // Create a shadow root
+        // const shadow = this.attachShadow({mode: 'open'});
+
+    }
+}
+customElements.define('loader-component', LoaderComponent);
+
+
+function http2(url, method, headers, body, return_variable) {
+    console.log(url)
+    if (url instanceof fastn.mutableClass) url = url.get();
+    if (method instanceof fastn.mutableClass) method = method.get();
+    method = method.trim().toUpperCase();
+    const init = {
+        method,
+        headers: {}
+    };
+    if(headers && headers instanceof fastn.recordInstanceClass) {
+        Object.assign(init.headers, headers.toObject());
+    }
+    if(method !== 'GET') {
+        init.headers['Content-Type'] = 'application/json';
+    }
+    if(body && body instanceof fastn.recordInstanceClass && method !== 'GET') {
+        init.body = JSON.stringify(body.toObject());
+    }
+
+    let json;
+
+    fetch(url, init)
+        .then(res => {
+            if(!res.ok) {
+                return new Error("[http]: Request failed", res)
+            }
+
+            return res.json();
+        })
+        .then(output => {
+            console.log("[http]: Response OK", output);
+            console.log(return_variable)
+            if(return_variable instanceof MutableListVariable) {
+                output
+                    .data
+                    .forEach((item, index) => return_variable.insertAt(index, item));
+            } else {
+                return_variable.set(output);
+            }
+        })
+        .catch(console.error);
+    return json;
+}

slides/ui/present.ftd

@@ -0,0 +1,145 @@
+-- import: fastn/processors as pr
+
+-- integer order:
+$processor$: pr.request-data
+
+-- integer id:
+$processor$: pr.request-data
+
+-- boolean $is-loaded: false
+
+-- integer $slides-count: 0
+
+-- optional string $current:
+-- optional string $previous:
+-- optional string $next:
+
+-- string present-url: $construct-present-url(id = $id, order = $order)
+
+
+
+
+-- loader-component:
+url: $present-url
+
+
+
+-- ftd.text: Presenting ...
+if: { !is-loaded }
+color: $inherited.colors.text-strong
+role: $inherited.types.heading-medium
+align-self: center
+margin-top.percent: 20
+
+-- ftd.column:
+if: { is-loaded }
+width: fill-container
+height: fill-container
+spacing: space-between
+
+;; Todo: if: { loaded && index == order } (**for loops)
+-- present-slide-view: $current
+current-slide-order: $order
+
+-- present-switcher: $order
+previous: $previous
+next: $next
+
+-- end: ftd.column
+
+
+
+
+
+
+
+-- component present-slide-view:
+caption url:
+integer current-slide-order:
+
+-- ftd.column:
+width: fill-container
+height: fill-container
+
+-- ftd.iframe:
+width: fill-container
+height: fill-container
+src: $present-slide-view.url
+
+-- end: ftd.column
+
+-- end: present-slide-view
+
+
+
+
+
+
+
+-- component present-switcher:
+caption integer current-slide-order:
+string previous:
+string next:
+boolean $is-left-hovered: false
+boolean $is-right-hovered: false
+
+-- ftd.row:
+width.fixed.percent: 20
+sticky: true
+bottom.px: 40
+left.percent: 40
+background.solid: $inherited.colors.background.base
+spacing: space-between
+align-content: center
+border-radius.px: 15
+padding-vertical.px: 10
+
+;; PREVIOUS BUTTON
+-- ftd.image: $assets.files.slides.ui.assets.left.svg
+src if { present-switcher.is-left-hovered }: $assets.files.slides.ui.assets.left-hover.svg
+padding-left.px: 15
+width.fixed.px: 40
+link: $present-switcher.previous
+$on-mouse-enter$: $ftd.set-bool($a = $present-switcher.is-left-hovered, v = true)
+$on-mouse-leave$: $ftd.set-bool($a = $present-switcher.is-left-hovered, v = false)
+
+;; CURRENT SLIDE ORDER
+-- ftd.integer: $present-switcher.current-slide-order
+background.solid: $inherited.colors.background.step-2
+color: $inherited.colors.text-strong
+role: $inherited.types.copy-regular
+padding-horizontal.px: 10
+border-radius.px: 15
+
+;; NEXT BUTTON
+-- ftd.image: $assets.files.slides.ui.assets.right.svg
+src if { present-switcher.is-right-hovered }: $assets.files.slides.ui.assets.right-hover.svg
+padding-right.px: 15
+width.fixed.px: 40
+link: $present-switcher.next
+$on-mouse-enter$: $ftd.set-bool($a = $present-switcher.is-right-hovered, v = true)
+$on-mouse-leave$: $ftd.set-bool($a = $present-switcher.is-right-hovered, v = false)
+
+-- end: ftd.row
+
+-- end: present-switcher
+
+
+
+
+
+
+;; --------------------- FUNCTIONS + WEB COMPONENTS ---------------------------
+-- string construct-present-url(id,order):
+integer id:
+integer order:
+js: $assets.files.slides.ui.functions.js
+
+"present/" + id + "/" + order + "/"
+
+
+
+
+-- web-component loader-component:
+string url:
+js: $assets.files.slides.ui.loader-component.js