Mobile first

fastn-js/js/dom.js

@@ -370,7 +370,6 @@ fastn_dom.Spacing = {
     Fixed: (value) => { return [4, value]; }
 }
 
-
 fastn_dom.BorderStyle = {
     Solid: "solid",
     Dashed: "dashed",

fastn-js/js/postInit.js

@@ -2,14 +2,41 @@ 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";
     const COOKIE_SYSTEM_DARK = "system-dark";
     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();

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);

ftd/src/interpreter/things/default.rs

@@ -9693,9 +9693,9 @@ pub fn default_bag() -> indexmap::IndexMap<String, ftd::interpreter::Thing> {
                 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,