Copy button

Cargo.toml

@@ -15,5 +15,8 @@ console_error_panic_hook = "0.1.7"
 hex-conservative = "0.1.1"
 js-sys = "0.3.69"
 
+[dependencies.web-sys]
+features = ["Clipboard", "Navigator"]
+
 [dev-dependencies]
 wasm-bindgen-test = "0.3.40"

justfile

@@ -1,6 +1,6 @@
 # Deploy local website
 serve:
-    trunk serve
+    RUSTFLAGS=--cfg=web_sys_unstable_apis trunk serve
 
 # Deploy local website and open in browser
 open:

src/assets/js/button_effects.js

@@ -64,4 +64,10 @@ function clear_circle_classes(button){
   button.classList.remove("button_color");
   button.classList.remove("green");
   button.classList.remove("red");
+}
+
+export function copy_success(){
+  let button = document.querySelector("#copy-button-success")
+  button.classList.add("copy-show");
+  setTimeout(() => button.classList.remove("copy-show"), 1000)
 }

src/assets/style/components/program_input.scss

@@ -195,4 +195,26 @@
         background-color: #ccc !important;
         cursor: default !important;
     }
+
+    .program-input-field-container{
+        position: relative;
+
+        .copy-button{
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            color: #ccc;
+        }
+        #copy-button-success{
+            position: absolute;
+            top: 10px;
+            right: 34px;
+            color: #ccc;
+            transition: .5s;
+            opacity: 0;
+        }
+        .copy-show{
+            opacity: 1 !important;
+        }
+    }
 }

src/components/app.rs

@@ -13,6 +13,15 @@ use crate::util;
 extern "C" {
     fn button_success_animation();
     fn button_fail_animation();
+    fn copy_success();
+}
+
+#[cfg(web_sys_unstable_apis)]
+fn copy(text: &str) {
+    if let Some(clipboard) = window().navigator().clipboard() {
+        let _ = clipboard.write_text(text);
+        copy_success();
+    }
 }
 
 #[component]
@@ -86,18 +95,22 @@ pub fn App() -> impl IntoView {
                         <SelectExampleProgram update_program_str=update_program_str set_name=set_name/>
                     </div>
 
-                    <textarea class="program-input-field"
-                        on:keydown=move |event: web_sys::KeyboardEvent| {
-                            if event.ctrl_key() && event.key_code() == 13 { // 13 is the Enter key
-                                run_program();
+                    <div class="program-input-field-container">
+                        <span class="copy-button"><i class="far fa-copy" on:click=move |_| copy(&program_str.get())></i></span>
+                        <span id="copy-button-success">Program copied</span>
+                        <textarea class="program-input-field"
+                            on:keydown=move |event: web_sys::KeyboardEvent| {
+                                if event.ctrl_key() && event.key_code() == 13 { // 13 is the Enter key
+                                    run_program();
+                                }
                             }
-                        }
-                        prop:value=move || program_str.get()
-                        on:input=move |event| update_program_str(event_target_value(&event))
-                        placeholder="Enter your program here"
-                        rows="15" cols="80"
-                        spellcheck="false"
-                    />
+                            prop:value=move || program_str.get()
+                            on:input=move |event| update_program_str(event_target_value(&event))
+                            placeholder="Enter your program here"
+                            rows="15" cols="80"
+                            spellcheck="false"
+                        />
+                    </div>
 
                     <div class="flex program-input-footer">
                         <ExampleProgramDescription name=name/>