From 543cc8380eac6a93d130ad7294444336b250a32f Mon Sep 17 00:00:00 2001 From: Arpita-Jaiswal Date: Tue, 28 Nov 2023 01:03:06 +0530 Subject: [PATCH] Added present page in slide --- slides/index.ftd | 2 +- slides/present.ftd | 23 ++++++ slides/ui/loader-component.js | 68 ++++++++++++++++ slides/ui/present.ftd | 145 ++++++++++++++++++++++++++++++++++ 4 files changed, 237 insertions(+), 1 deletion(-) create mode 100644 slides/present.ftd create mode 100644 slides/ui/loader-component.js create mode 100644 slides/ui/present.ftd diff --git a/slides/index.ftd b/slides/index.ftd index b3648ed6..725be811 100644 --- a/slides/index.ftd +++ b/slides/index.ftd @@ -1,6 +1,6 @@ -- ds.page: Slides UIs - [Login](slides/login/) - +- [Present](slides/present/) -- end: ds.page diff --git a/slides/present.ftd b/slides/present.ftd new file mode 100644 index 00000000..7f459317 --- /dev/null +++ b/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 diff --git a/slides/ui/loader-component.js b/slides/ui/loader-component.js new file mode 100644 index 00000000..b605fb35 --- /dev/null +++ b/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; +} diff --git a/slides/ui/present.ftd b/slides/ui/present.ftd new file mode 100644 index 00000000..8aaa6c1f --- /dev/null +++ b/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