diff --git a/fastn-js/js/dom.js b/fastn-js/js/dom.js index e237cc64e3..1dec843463 100644 --- a/fastn-js/js/dom.js +++ b/fastn-js/js/dom.js @@ -370,7 +370,6 @@ fastn_dom.Spacing = { Fixed: (value) => { return [4, value]; } } - fastn_dom.BorderStyle = { Solid: "solid", Dashed: "dashed", diff --git a/fastn-js/js/postInit.js b/fastn-js/js/postInit.js index f09e309c28..928188d0c8 100644 --- a/fastn-js/js/postInit.js +++ b/fastn-js/js/postInit.js @@ -2,6 +2,34 @@ ftd.clickOutsideEvents = []; ftd.globalKeyEvents = []; ftd.globalKeySeqEvents = []; + +ftd.get_device = function () { + const MOBILE_CLASS = "mobile"; + // not at all sure about this function logic. + let width = window.innerWidth; + // In the future, we may want to have more than one break points, and + // then we may also want the theme builders to decide where the + // breakpoints should go. we should be able to fetch fpm variables + // here, or maybe simply pass the width, user agent etc. to fpm and + // let people put the checks on width user agent etc., but it would + // be good if we can standardize few breakpoints. or maybe we should + // do both, some standard breakpoints and pass the raw data. + // we would then rename this function to detect_device() which will + // return one of "desktop", "mobile". and also maybe have another + // function detect_orientation(), "landscape" and "portrait" etc., + // and instead of setting `ftd#mobile: boolean` we set `ftd#device` + // and `ftd#view-port-orientation` etc. + let mobile_breakpoint = fastn_utils.getStaticValue(ftd.breakpoint_width.get("mobile")); + if (width <= mobile_breakpoint) { + document.body.classList.add(MOBILE_CLASS); + return fastn_dom.DeviceData.Mobile; + } + if (document.body.classList.contains(MOBILE_CLASS)) { + document.body.classList.remove(MOBILE_CLASS); + } + return fastn_dom.DeviceData.Desktop; +} + ftd.post_init = function () { const DARK_MODE_COOKIE = "fastn-dark-mode"; const COOKIE_SYSTEM_LIGHT = "system-light"; @@ -9,7 +37,6 @@ ftd.post_init = function () { const COOKIE_DARK_MODE = "dark"; const COOKIE_LIGHT_MODE = "light"; const DARK_MODE_CLASS = "dark"; - const MOBILE_CLASS = "mobile"; let last_device = "desktop"; window.onresize = function () { @@ -71,7 +98,7 @@ ftd.post_init = function () { }) } function initialise_device() { - let current = get_device(); + let current = ftd.get_device(); if (current === last_device) { return; } @@ -80,32 +107,6 @@ ftd.post_init = function () { last_device = current; } - function get_device() { - // not at all sure about this function logic. - let width = window.innerWidth; - // In the future, we may want to have more than one break points, and - // then we may also want the theme builders to decide where the - // breakpoints should go. we should be able to fetch fpm variables - // here, or maybe simply pass the width, user agent etc. to fpm and - // let people put the checks on width user agent etc., but it would - // be good if we can standardize few breakpoints. or maybe we should - // do both, some standard breakpoints and pass the raw data. - // we would then rename this function to detect_device() which will - // return one of "desktop", "mobile". and also maybe have another - // function detect_orientation(), "landscape" and "portrait" etc., - // and instead of setting `ftd#mobile: boolean` we set `ftd#device` - // and `ftd#view-port-orientation` etc. - let mobile_breakpoint = fastn_utils.getStaticValue(ftd.breakpoint_width.get("mobile")); - if (width <= mobile_breakpoint) { - document.body.classList.add(MOBILE_CLASS); - return fastn_dom.DeviceData.Mobile; - } - if (document.body.classList.contains(MOBILE_CLASS)) { - document.body.classList.remove(MOBILE_CLASS); - } - return fastn_dom.DeviceData.Desktop; - } - /* ftd.dark-mode behaviour: @@ -216,8 +217,8 @@ ftd.post_init = function () { function start_watching_dark_mode_system_preference() { window.matchMedia('(prefers-color-scheme: dark)').addEventListener("change", update_dark_mode); } - initialise_dark_mode(); initialise_device(); + initialise_dark_mode(); initialise_click_outside_events(); initialise_global_key_events(); fastn_utils.resetFullHeight(); diff --git a/fastn-js/js/virtual.js b/fastn-js/js/virtual.js index a033fe87ad..bbab3af807 100644 --- a/fastn-js/js/virtual.js +++ b/fastn-js/js/virtual.js @@ -149,6 +149,24 @@ fastn_virtual.document = new Document2(); fastn_virtual.hydrate = function(main) { + let current_device = ftd.get_device(); + let found_device = ftd.device.get(); + if (current_device !== found_device) { + ftd.device = fastn.mutable(current_device); + // let styles = document.getElementById("styles"); + // styles.innerText = ""; + var children = document.body.children; + // Loop through the direct children and remove those with tagName 'div' + for (var i = children.length - 1; i >= 0; i--) { + var child = children[i]; + if (child.tagName === 'DIV') { + document.body.removeChild(child); + } + } + + main(document.body); + return; + } hydrating = true; let body = fastn_virtual.document.createElement("body"); main(body); diff --git a/ftd/src/interpreter/things/default.rs b/ftd/src/interpreter/things/default.rs index df11ec6065..4430afcb77 100644 --- a/ftd/src/interpreter/things/default.rs +++ b/ftd/src/interpreter/things/default.rs @@ -9693,9 +9693,9 @@ pub fn default_bag() -> indexmap::IndexMap { value: ftd::interpreter::PropertyValue::Value { value: ftd::interpreter::Value::OrType { name: ftd::interpreter::FTD_DEVICE_DATA.to_string(), - variant: ftd::interpreter::FTD_DEVICE_DATA_DESKTOP.to_string(), - full_variant: ftd::interpreter::FTD_DEVICE_DATA_DESKTOP.to_string(), - value: Box::new(ftd::interpreter::Value::new_string("desktop") + variant: ftd::interpreter::FTD_DEVICE_DATA_MOBILE.to_string(), + full_variant: ftd::interpreter::FTD_DEVICE_DATA_MOBILE.to_string(), + value: Box::new(ftd::interpreter::Value::new_string("mobile") .into_property_value(false, 0)) }, is_mutable: true,