Add click binding for displaying copied to clipboard text

archesproject · Feb 11, 2025 · f850878 · f850878
1 parent b8808a2
commit f850878
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/arches/app/media/css/arches.scss b/arches/app/media/css/arches.scss
@@ -10176,6 +10176,11 @@ table.table.dataTable {
     font-size: 1.4rem;
 }
 
+.copy-geojson-url-message {
+    padding: 2px;
+    font-size: 1.2rem;
+}
+
 .search-type-btn-popup.relative:hover {
     background: #fff;
     color: #25476A;

diff --git a/arches/app/media/js/views/components/search/search-export.js b/arches/app/media/js/views/components/search/search-export.js
@@ -27,6 +27,8 @@ define([
         this.downloadPending = ko.observable(false);
         this.hasResourceTypeFilter = ko.observable(!!sharedStateObject.query()['resource-type-filter']);
         this.exportSystemValues = ko.observable(false);
+        this.copyGeojsonText = ko.observable("");
+        this.showCopyText = ko.observable(false);
 
         this.query.subscribe(function(val) {
             if (val['resource-type-filter']) {
@@ -64,6 +66,14 @@ define([
             }
         });
 
+        this.copyGeojsonUrlText = function(){
+            self.copyGeojsonText("Geojson url copied to clipboard.")
+            self.showCopyText(true);
+            window.setTimeout(function(){
+                self.showCopyText(false);
+            }, 6000);
+        };
+
         this.getExportData = function(){
             var payload = ko.unwrap(this.query);
             self.downloadPending(true);

diff --git a/arches/app/templates/views/components/search/search-export.htm b/arches/app/templates/views/components/search/search-export.htm
@@ -99,10 +99,11 @@
                 <!-- ko if: format() === 'geojson' && hasResourceTypeFilter -->
                 <div data-bind="clipboard: {value: geojsonUrl, tooltip: false}">
                     <div style="padding: 5px 0px"><textarea style="width: 300px;" data-bind="value: geojsonUrl"></textarea></div>
-                    <button class="btn btn-shim btn-labeled btn-sm fa fa-clipboard btn-primary">
+                    <button class="btn btn-shim btn-labeled btn-sm fa fa-clipboard btn-primary" data-bind="click: copyGeojsonUrlText">
                         <span data-bind="text: $root.translations.copyToClipboard"></span>
                     </button>
                 </div>
+                <div class="copy-geojson-url-message" data-bind="text: copyGeojsonText, fadeVisible: showCopyText, delay:0, fade: 600, attr: {'aria-live': 'polite'}"></div>
                 <!-- /ko -->
                 <!-- /ko -->
             </div>