From a1777ff73592a58867dc1f2013a5605682f65427 Mon Sep 17 00:00:00 2001
From: Harsh Singh <64768386+harshdoesdev@users.noreply.github.com>
Date: Fri, 13 Oct 2023 13:14:07 +0530
Subject: [PATCH] selectable property added (#1380)

* selectable property added

* minor fix

* formatting
---
 fastn-js/js/dom.js                    |  7 +++
 fastn-js/src/property.rs              |  2 +
 ftd/src/interpreter/things/default.rs |  6 ++
 ftd/src/js/element.rs                 | 12 ++++
 ftd/t/js/64-selectable.ftd            |  4 ++
 ftd/t/js/64-selectable.html           | 83 +++++++++++++++++++++++++++
 6 files changed, 114 insertions(+)
 create mode 100644 ftd/t/js/64-selectable.ftd
 create mode 100644 ftd/t/js/64-selectable.html

diff --git a/fastn-js/js/dom.js b/fastn-js/js/dom.js
index 3a772debf4..ee8cecfcaf 100644
--- a/fastn-js/js/dom.js
+++ b/fastn-js/js/dom.js
@@ -277,6 +277,7 @@ fastn_dom.PropertyKind = {
     Muted: 115,
     LinkColor: 116,
     TextShadow: 117,
+    Selectable: 118,
 };
 
 
@@ -1560,6 +1561,12 @@ class Node2 {
             // overflow: auto, resize: staticValue
             this.attachCss("resize", staticValue);
             this.attachCss("overflow", "auto");
+        } else if (kind === fastn_dom.PropertyKind.Selectable) {
+            if(staticValue === false) {
+                this.attachCss("user-select", "none");
+            } else {
+                this.attachCss("user-select", null);
+            }
         } else if (kind === fastn_dom.PropertyKind.MinHeight) {
             this.attachCss("min-height", staticValue);
         } else if (kind === fastn_dom.PropertyKind.MaxHeight) {
diff --git a/fastn-js/src/property.rs b/fastn-js/src/property.rs
index 04d758e0be..5907736666 100644
--- a/fastn-js/src/property.rs
+++ b/fastn-js/src/property.rs
@@ -425,6 +425,7 @@ pub enum PropertyKind {
     MetaTwitterImage,
     MetaThemeColor,
     Favicon,
+    Selectable,
 }
 
 impl PropertyKind {
@@ -562,6 +563,7 @@ impl PropertyKind {
                 "fastn_dom.PropertyKind.DocumentProperties.MetaThemeColor"
             }
             PropertyKind::Favicon => "fastn_dom.PropertyKind.Favicon",
+            PropertyKind::Selectable => "fastn_dom.PropertyKind.Selectable",
         }
     }
 }
diff --git a/ftd/src/interpreter/things/default.rs b/ftd/src/interpreter/things/default.rs
index bf67e9e544..cdccf97476 100644
--- a/ftd/src/interpreter/things/default.rs
+++ b/ftd/src/interpreter/things/default.rs
@@ -10725,6 +10725,12 @@ fn common_arguments() -> Vec<ftd::interpreter::Argument> {
                 .into_optional()
                 .into_kind_data(),
         ),
+        ftd::interpreter::Argument::default(
+            "selectable",
+            ftd::interpreter::Kind::boolean()
+                .into_optional()
+                .into_kind_data(),
+        ),
     ]
 }
 
diff --git a/ftd/src/js/element.rs b/ftd/src/js/element.rs
index 3f59fab00d..9f450463ff 100644
--- a/ftd/src/js/element.rs
+++ b/ftd/src/js/element.rs
@@ -2208,6 +2208,7 @@ pub struct Common {
     pub css: Option<ftd::js::Value>,
     pub js: Option<ftd::js::Value>,
     pub events: Vec<ftd::interpreter::Event>,
+    pub selectable: Option<ftd::js::Value>,
 }
 
 impl Common {
@@ -2423,6 +2424,7 @@ impl Common {
             whitespace: ftd::js::value::get_optional_js_value("white-space", properties, arguments),
             shadow: ftd::js::value::get_optional_js_value("shadow", properties, arguments),
             events: events.to_vec(),
+            selectable: ftd::js::value::get_optional_js_value("selectable", properties, arguments),
         }
     }
 
@@ -3009,6 +3011,16 @@ impl Common {
                 ),
             ));
         }
+        if let Some(ref selectable) = self.selectable {
+            component_statements.push(fastn_js::ComponentStatement::SetProperty(
+                selectable.to_set_property(
+                    fastn_js::PropertyKind::Selectable,
+                    doc,
+                    element_name,
+                    rdata,
+                ),
+            ));
+        }
         component_statements
     }
 }
diff --git a/ftd/t/js/64-selectable.ftd b/ftd/t/js/64-selectable.ftd
new file mode 100644
index 0000000000..7ec5804881
--- /dev/null
+++ b/ftd/t/js/64-selectable.ftd
@@ -0,0 +1,4 @@
+-- ftd.text: You can select this value
+
+-- ftd.text: You cannot select this value
+selectable: false
diff --git a/ftd/t/js/64-selectable.html b/ftd/t/js/64-selectable.html
new file mode 100644
index 0000000000..a3800a29e5
--- /dev/null
+++ b/ftd/t/js/64-selectable.html
@@ -0,0 +1,83 @@
+<html>
+<head>
+    <meta charset="UTF-8">
+    
+    <meta content="fastn" name="generator">
+    
+    
+    <script>
+        let __fastn_package_name__ = "foo";
+    </script>
+
+    <script src="fastn-js.js"></script>
+
+    <style>
+       
+    </style>
+</head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3">You can select this value</div><div data-id="4" class="__user-select-3">You cannot select this value</div></div></body><style id="styles">
+    .__w-1 { width: 100%; }
+	.__h-2 { height: 100%; }
+	.__user-select-3 { user-select: none; }
+    </style>
+<script>
+    (function() {
+        let global = {
+};
+let main = function (parent) {
+  let __fastn_super_package_name__ = __fastn_package_name__;
+  __fastn_package_name__ = "foo";
+  try {
+    let parenti0 = fastn_dom.createKernel(parent, fastn_dom.ElementKind.Text);
+    parenti0.setProperty(fastn_dom.PropertyKind.StringValue, "You can select this value", inherited);
+    let parenti1 = fastn_dom.createKernel(parent, fastn_dom.ElementKind.Text);
+    parenti1.setProperty(fastn_dom.PropertyKind.StringValue, "You cannot select this value", inherited);
+    parenti1.setProperty(fastn_dom.PropertyKind.Selectable, false, inherited);
+  } finally {
+    __fastn_package_name__ = __fastn_super_package_name__;
+  }
+}
+global["main"] = main;
+fastn_dom.codeData.availableThemes["coldark-theme.dark"] = "../../theme_css/coldark-theme.dark.css";
+fastn_dom.codeData.availableThemes["coldark-theme.light"] = "../../theme_css/coldark-theme.light.css";
+fastn_dom.codeData.availableThemes["coy-theme"] = "../../theme_css/coy-theme.css";
+fastn_dom.codeData.availableThemes["dracula-theme"] = "../../theme_css/dracula-theme.css";
+fastn_dom.codeData.availableThemes["duotone-theme.dark"] = "../../theme_css/duotone-theme.dark.css";
+fastn_dom.codeData.availableThemes["duotone-theme.earth"] = "../../theme_css/duotone-theme.earth.css";
+fastn_dom.codeData.availableThemes["duotone-theme.forest"] = "../../theme_css/duotone-theme.forest.css";
+fastn_dom.codeData.availableThemes["duotone-theme.light"] = "../../theme_css/duotone-theme.light.css";
+fastn_dom.codeData.availableThemes["duotone-theme.sea"] = "../../theme_css/duotone-theme.sea.css";
+fastn_dom.codeData.availableThemes["duotone-theme.space"] = "../../theme_css/duotone-theme.space.css";
+fastn_dom.codeData.availableThemes["fastn-theme.dark"] = "../../theme_css/fastn-theme.dark.css";
+fastn_dom.codeData.availableThemes["fastn-theme.light"] = "../../theme_css/fastn-theme.light.css";
+fastn_dom.codeData.availableThemes["fire.light"] = "../../theme_css/fire.light.css";
+fastn_dom.codeData.availableThemes["gruvbox-theme.dark"] = "../../theme_css/gruvbox-theme.dark.css";
+fastn_dom.codeData.availableThemes["gruvbox-theme.light"] = "../../theme_css/gruvbox-theme.light.css";
+fastn_dom.codeData.availableThemes["laserwave-theme"] = "../../theme_css/laserwave-theme.css";
+fastn_dom.codeData.availableThemes["material-theme.dark"] = "../../theme_css/material-theme.dark.css";
+fastn_dom.codeData.availableThemes["material-theme.light"] = "../../theme_css/material-theme.light.css";
+fastn_dom.codeData.availableThemes["nightowl-theme"] = "../../theme_css/nightowl-theme.css";
+fastn_dom.codeData.availableThemes["one-theme.dark"] = "../../theme_css/one-theme.dark.css";
+fastn_dom.codeData.availableThemes["one-theme.light"] = "../../theme_css/one-theme.light.css";
+fastn_dom.codeData.availableThemes["vs-theme.dark"] = "../../theme_css/vs-theme.dark.css";
+fastn_dom.codeData.availableThemes["vs-theme.light"] = "../../theme_css/vs-theme.light.css";
+fastn_dom.codeData.availableThemes["ztouch-theme"] = "../../theme_css/ztouch-theme.css";
+
+        let main_wrapper = function (parent) {
+            let parenti0 = fastn_dom.createKernel(parent, fastn_dom.ElementKind.Column);
+            parenti0.setProperty(fastn_dom.PropertyKind.Width, fastn_dom.Resizing.FillContainer, inherited);
+            parenti0.setProperty(fastn_dom.PropertyKind.Height, fastn_dom.Resizing.FillContainer, inherited);
+            main(parenti0);
+        }
+        fastn_virtual.hydrate(main_wrapper);
+        ftd.post_init();
+    })();
+
+    window.onload = function() {
+        fastn_utils.resetFullHeight();
+        fastn_utils.setFullHeight();
+    };
+
+</script>
+</html>