Add copy to clipboard text for geojson url (#11782)

* Add click binding for displaying copied to clipboard text
archesproject · Feb 12, 2025 · 7362455 · 7362455
1 parent e678323
commit 7362455
Show file tree

Hide file tree

Showing 4 changed files with 18 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>

diff --git a/releases/8.0.0.md b/releases/8.0.0.md
@@ -33,6 +33,7 @@ Arches 8.0.0 Release Notes
 - Prevent navigation to a new browser tab when clicking Manage link in index.htm [#11635](https://github.com/archesproject/arches/issues/11635)
 - Add support for tile sort order to the bulk data manager [#11638](https://github.com/archesproject/arches/pull/11638)
 - Fix issue that produced an error when cycling between the dropdown options in Advanced search [#11442](https://github.com/archesproject/arches/issues/11442)
+- Adds message when copying geojson url to clipboard [#11076](https://github.com/archesproject/arches/issues/11076)
 
 ### Dependency changes
 ```