From 41e67d5763490b602db0335ab074d872d4ed77c2 Mon Sep 17 00:00:00 2001
From: Xmader <xmader@outlook.com>
Date: Thu, 12 Nov 2020 12:49:45 -0500
Subject: [PATCH] refactor: build download btn

---
 src/btn.ts | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/btn.ts b/src/btn.ts
index cfdb803..e89d5a5 100644
--- a/src/btn.ts
+++ b/src/btn.ts
@@ -35,6 +35,27 @@ export const getDownloadBtn = (): BtnElement => {
   return btn
 }
 
+const buildDownloadBtn = () => {
+  const btn = document.createElement('button')
+  btn.type = 'button'
+
+  // build icon svg element
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  svg.setAttribute('viewBox', '0 0 24 24')
+  const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+  svgPath.setAttribute('d', 'M9.6 2.4h4.8V12h2.784l-5.18 5.18L6.823 12H9.6V2.4zM19.2 19.2H4.8v2.4h14.4v-2.4z')
+  svgPath.setAttribute('fill', '#fff')
+  svg.append(svgPath)
+
+  const textNode = document.createElement('span')
+  btn.append(svg, textNode)
+
+  return {
+    btn,
+    textNode,
+  }
+}
+
 interface BtnOptions {
   readonly name: string;
   readonly action: BtnAction;
@@ -53,10 +74,7 @@ export class BtnList {
   constructor (private getTemplateBtn: () => BtnElement) { }
 
   add (options: BtnOptions): BtnElement {
-    const btn = this.getTemplateBtn().cloneNode(true) as HTMLButtonElement
-
-    const textNode = [...btn.children].find(x => x.nodeName === 'SPAN') as HTMLSpanElement
-
+    const { btn, textNode } = buildDownloadBtn()
     const setText = (str: string): void => {
       textNode.textContent = str
     }