add-data rendering & clipboard takes element

src/pages/auth/sudo.rs

@@ -17,69 +17,29 @@
 
 use std::fmt::Display;
 
+use sailfish::runtime::Render;
 use sailfish::TemplateOnce;
 
 #[derive(Clone, TemplateOnce)]
 #[template(path = "auth/sudo/index.html")]
-pub struct SudoPage<'a> {
+pub struct SudoPage<'a, K, V>
+where
+    K: Display + Render,
+    V: Display + Render,
+{
     url: &'a str,
-    data: Option<String>,
+    data: Option<Vec<(K, V)>>,
 }
 
 pub const PAGE: &str = "Confirm Access";
 
-impl<'a> SudoPage<'a> {
+impl<'a, K, V> SudoPage<'a, K, V>
+where
+    K: Display + Render,
+    V: Display + Render,
+{
     //pub fn new(url: &'a str, data: Option<Vec<(&'a str, &'a str)>>) -> Self {
-    pub fn new<K, V>(url: &'a str, data: Option<Vec<(K, V)>>) -> Self
+    pub fn new(url: &'a str, data: Option<Vec<(K, V)>>) -> Self {
-    where
-        K: Display,
-        V: Display,
-    {
-        let data = if let Some(data) = data {
-            if !data.is_empty() {
-                let mut s = String::new();
-                for (k, v) in data.iter() {
-                    s.push_str(&format!(" data-{}={}", k, v));
-                }
-                Some(s)
-            } else {
-                None
-            }
-        } else {
-            None
-        };
-
         Self { url, data }
     }
 }
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-
-    #[test]
-    fn sudo_page_works() {
-        let data = vec![
-            ("firefox", "mozilla"),
-            ("chrome", "google"),
-            ("servo", "mozilla"),
-        ];
-        assert!(SudoPage::new::<String, String>("foo", None).data.is_none());
-
-        let sudo = SudoPage::new("foo", Some(data.clone()));
-
-        data.iter().for_each(|(k, v)| {
-            assert!(
-                sudo.data.as_ref().unwrap().contains(k)
-                    && sudo.data.as_ref().unwrap().contains(v)
-            )
-        });
-
-        let data_str = " data-firefox=mozilla data-chrome=google data-servo=mozilla";
-        assert_eq!(sudo.data.as_ref().unwrap(), data_str);
-
-        assert!(SudoPage::new::<String, String>("foo", Some(Vec::default()))
-            .data
-            .is_none());
-    }
-}

templates/components/additional-data/index.html

@@ -1,3 +1,9 @@
-<. if data.is_some() && !data.as_ref().unwrap().is_empty() { .>
+<. let data = if let Some(data) = data { .>
-     <div id="additional-data" <.= data.unwrap() .>></div> 
+<. 	if !data.is_empty() { .>
-<. } .>
+ 		<div id='additional-data'
+<. 		for (k, v) in data.iter() { .>
+ 		data-<.= k .>=<.= v .>
+<. 		} .>
+ 		></div>
+	<. 	} .>
+<. }; .>

templates/components/clipboard/index.ts

@@ -16,16 +16,16 @@
  */
 
 class CopyIcon {
-  copyIconClass: string;
+  copyIcon: HTMLElement;
   copyDoneIconClass: string;
   writeText: string;
 
   constructor(
     writeText: string,
-    copyIconClass: string,
+    copyIcon: HTMLElement,
     copyDoneIconClass: string,
   ) {
-    this.copyIconClass = copyIconClass;
+    this.copyIcon = copyIcon;
     this.copyDoneIconClass = copyDoneIconClass;
     this.writeText = writeText;
 
@@ -33,10 +33,7 @@ class CopyIcon {
   }
 
   __registerHandlers() {
-    const icons = document.querySelectorAll(`.${this.copyIconClass}`);
+    this.copyIcon.addEventListener('click', e => this.copySitekey(e));
-    icons.forEach(icon => {
-      icon.addEventListener('click', e => this.copySitekey(e));
-    });
   }
 
   /*
@@ -44,11 +41,6 @@ class CopyIcon {
    */
   async copySitekey(e: Event) {
     const image = <HTMLElement>e.target;
-    if (!image.classList.contains(this.copyIconClass)) {
-      throw new Error(
-        'This method should only be called when sitekey copy button/icon is clicked',
-      );
-    }
     const copyDoneIcon = <HTMLElement>(
       image.parentElement.querySelector(`.${this.copyDoneIconClass}`)
     );

templates/panel/settings/index.ts

@@ -28,7 +28,7 @@ const index = () => {
     document.querySelector(`.${SECRET_COPY_ICON}`)
   );
   const writeText = secretElement.dataset.secret;
-  new CopyIcon(writeText, SECRET_COPY_ICON, SECRET_COPY_DONE_ICON);
+  new CopyIcon(writeText, secretElement, SECRET_COPY_DONE_ICON);
 };
 
 export default index;

templates/panel/sitekey/list/ts/index.ts

@@ -20,13 +20,14 @@ const SITEKEY_COPY_ICON = `sitekey__copy-icon`;
 const SITEKEY_COPY_DONE_ICON = `sitekey__copy-done-icon`;
 
 export const index = () => {
-  const image = <HTMLElement>document.querySelector(`.${SITEKEY_COPY_ICON}`);
+  const image = document.querySelectorAll(`.${SITEKEY_COPY_ICON}`);
-  if (!image.classList.contains(SITEKEY_COPY_ICON)) {
+  image.forEach((img: HTMLElement) => {
-    throw new Error(
+    if (!img.classList.contains(SITEKEY_COPY_ICON)) {
-      'This method should only be called when sitekey copy button/icon is clicked',
+      throw new Error(
-    );
+        'This method should only be called when sitekey copy button/icon is clicked',
-  }
+      );
-  const sitekey = image.dataset.sitekey;
+    }
-
+    const sitekey = img.dataset.sitekey;
-  new CopyIcon(sitekey, SITEKEY_COPY_ICON, SITEKEY_COPY_DONE_ICON);
+    new CopyIcon(sitekey, img, SITEKEY_COPY_DONE_ICON);
+  });
 };