Fix the control pane at top; add copy to clipboard function.

aaroey · Aug 2, 2020 · aaed989 · aaed989
1 parent 43e3d10
commit aaed989
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 9 deletions.
diff --git a/web/browser_image_viewer/main.css b/web/browser_image_viewer/main.css
@@ -1,3 +1,12 @@
+.control_pane {
+  background-color: yellow;
+  padding: 3px;
+  z-index: 9998;
+  position: fixed ! important;
+  left: 0px;
+  top: 0px;
+}
+
 .selected {
   /* box-shadow: 0px 12px 22px 1px #333; */
   border: 2px solid red;

diff --git a/web/browser_image_viewer/main.html b/web/browser_image_viewer/main.html
@@ -6,16 +6,14 @@
     <script type="text/javascript" src="main.js" charset="utf-8"></script>
   </head>
   <body>
-    <span>Num Columes: </span>
-    <input type="number" id="num_columns" name="Columns" min="1" max="5" value="3">
-    <input type="file" id="input_dir" webkitdirectory multiple>
-    <button type="button" id="toggle_selected">Show selected file names</button>
-    <br>
-    <!--
-      <input type="file" id="input_single"/>
+    <div id="control_pane" class="control_pane">
+      <span>Num Columes: </span>
+      <input type="number" id="num_columns" name="Columns" min="1" max="5" value="3">
+      <input type="file" id="input_dir" webkitdirectory multiple>
+      <button type="button" id="toggle_selected">Show selected file names</button>
+      <button type="button" id="copy_selected">Copy selected file names</button>
       <br>
-      <canvas width="400" height="300" id="canvas"/>
-    -->
+    </div>
     <table id="img_table"></table>
     <div id="selected_imgs_div" class="selected_imgs_div" style="display: none;">
       <table id="selected_imgs_table"></table>

diff --git a/web/browser_image_viewer/main.js b/web/browser_image_viewer/main.js
@@ -96,6 +96,17 @@ function toggleSelectedNamesState() {
   }
 }
 
+function copySelectedNamesToClipboard() {
+  var text = getSelectedTable().innerHTML;
+  text = text.replace(/<\/tr>/g, "\n").replace(/<[^>]+(>|$)/g, "");
+  console.log(text);
+  navigator.clipboard.writeText(text).then(function() {
+      console.log('Successfully copied selected names to clipboard!');
+  }, function(err) {
+      console.error('Failed to copy selected names: ', err);
+  });
+}
+
 // Add or remove an image from the selected image list.
 function toggleImgSelectionState(img, blob) {
   const p = blob.webkitRelativePath;
@@ -167,4 +178,5 @@ function addEventListener(id, eventName, handler) {
 window.onload = function() {
   addEventListener('input_dir', 'change', handleDir)
   addEventListener('toggle_selected', 'click', toggleSelectedNamesState)
+  addEventListener('copy_selected', 'click', copySelectedNamesToClipboard)
 };