selectable property added (#1380)

* selectable property added

* minor fix

* formatting

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

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",
         }
     }
 }

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(),
+        ),
     ]
 }
 

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
     }
 }

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