feat(landing): add button to copy api urls (#827)

linz · Jun 26, 2020 · 321334f · 321334f
1 parent f841047
commit 321334f
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 10 deletions.
diff --git a/packages/landing/src/ui.ts b/packages/landing/src/ui.ts
@@ -2,12 +2,43 @@ import { Basemaps } from './map';
 import { Epsg } from '@basemaps/geo';
 import { WindowUrl, MapOptionType } from './url';
 
+/** Attach a listener to a button to copy the nearby input element */
+function bindCopyFromInput(el: HTMLElement): void {
+    const inputEl = el.querySelector('input');
+    if (inputEl == null) throw new Error('Cannot find input');
+    const buttonEl = el.querySelector('button');
+    if (buttonEl == null) throw new Error('Cannot find button');
+    const buttonIconEl = buttonEl.querySelector('i');
+    if (buttonIconEl == null) throw new Error('Cannot find button icon');
+    buttonIconEl.textContent = 'content_copy';
+
+    buttonEl.onclick = (): void => {
+        if (buttonEl.disabled) return;
+
+        inputEl.select();
+        document.execCommand('copy');
+
+        const originalTitle = buttonEl.title;
+        buttonIconEl.innerText = 'check';
+        buttonEl.disabled = true;
+        buttonEl.title = 'Copied';
+        buttonEl.classList.add('lui-form-icon-button--copied');
+
+        setTimeout(() => {
+            buttonEl.classList.remove('lui-form-icon-button--copied');
+            buttonEl.title = originalTitle;
+            buttonEl.disabled = false;
+            buttonIconEl.textContent = 'content_copy';
+        }, 1500);
+    };
+}
+
 export class BasemapsUi {
     projectionNztm: HTMLElement;
     projectionWm: HTMLElement;
 
-    apiXyz: HTMLInputElement;
-    apiWmts: HTMLInputElement;
+    apiXyz: HTMLElement;
+    apiWmts: HTMLElement;
 
     basemaps: Basemaps;
 
@@ -55,8 +86,10 @@ export class BasemapsUi {
         if (apiXyz == null || apiWmts == null) {
             throw new Error('Unable to find api inputs');
         }
-        this.apiXyz = apiXyz as HTMLInputElement;
-        this.apiWmts = apiWmts as HTMLInputElement;
+        this.apiXyz = apiXyz;
+        this.apiWmts = apiWmts;
+        bindCopyFromInput(apiXyz);
+        bindCopyFromInput(apiWmts);
     }
 
     bindProjectionButtons(): void {
@@ -92,7 +125,8 @@ export class BasemapsUi {
             this.projectionNztm.classList.remove('lui-button-active');
         }
         const cfg = { ...this.basemaps.config, projection };
-        this.apiXyz.value = WindowUrl.toTileUrl(cfg, MapOptionType.Tile);
-        this.apiWmts.value = WindowUrl.toTileUrl(cfg, MapOptionType.Wmts);
+
+        this.apiXyz.querySelector('input')!.value = WindowUrl.toTileUrl(cfg, MapOptionType.Tile);
+        this.apiWmts.querySelector('input')!.value = WindowUrl.toTileUrl(cfg, MapOptionType.Wmts);
     }
 }
diff --git a/packages/landing/static/index.css b/packages/landing/static/index.css
@@ -221,3 +221,50 @@ button {
 .info-links li a:hover {
     border: none;
 }
+
+
+.lui-form-icon {
+    position: relative;
+}
+
+.lui-standard-form .lui-form-icon.lui-form-icon--left input:not([type=checkbox]):not([type=radio]),
+.lui-standard-form .lui-form-icon.lui-form-icon--left textarea,
+.lui-standard-form .lui-form-icon.lui-form-icon--left select {
+    border-left: 40px solid;
+}
+
+.lui-standard-form .lui-form-icon.lui-form-icon--right input:not([type=checkbox]):not([type=radio]),
+.lui-standard-form .lui-form-icon.lui-form-icon--right textarea,
+.lui-standard-form .lui-form-icon.lui-form-icon--right select {
+    border-right: 40px solid;
+}
+
+.lui-standard-form .lui-form-icon .lui-form-icon-button {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    color: white;
+    z-index: 100;
+    font-size: 1.8125rem;
+}
+
+.lui-standard-form .lui-form-icon.lui-form-icon--right .lui-form-icon-button {
+    right: 0px;
+    left: inherit;
+    border-radius: 0 3px 3px 0;
+}
+
+.lui-form-icon-button {
+    background-color: #007198;
+    width: 40px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    border-radius: 3px 0 0 3px;
+}
+
+.lui-form-icon-button--copied {
+    background-color: #9BD79B
+}
diff --git a/packages/landing/static/index.html b/packages/landing/static/index.html
@@ -135,12 +135,18 @@ <h6>Get an API Key</h6>
 
         <div class="lui-standard-form">
             <label for="api-xyz">XYZ Tiles</label>
-            <div class="lui-input-wrapper">
-                <input id="api-xyz" onclick="this.select()" value="https://..." />
+            <div id="api-xyz" class="lui-input-wrapper lui-form-icon lui-form-icon--right">
+                <button class="lui-form-icon-button" title="Copy XYZ url">
+                    <i class="material-icons-round">content_copy</i>
+                </button>
+                <input onclick="this.select()" value="https://..." />
             </div>
             <label for="api-wmts">WMTS</label>
-            <div class="lui-input-wrapper">
-                <input id="api-wmts" onclick="this.select()" value="https://..." />
+            <div id="api-wmts" class="lui-input-wrapper lui-form-icon lui-form-icon--right">
+                <button class="lui-form-icon-button" title="Copy WMTS url">
+                    <i class="material-icons-round">content_copy</i>
+                </button>
+                <input onclick="this.select()" value="https://..." />
             </div>
         </div>