WebApp: New functionality for permalinks to searchs/registry objects

StaticRoot/explorer.js

@@ -164,10 +164,26 @@ var appData = {
 var appMethods = {
 
     loadIndex: function(event) {
+
+        this.state = 'loading'
+        this.searchInput = 'Initialisation ...'
+        
         axios
             .get('/api/registry/*')
             .then(response => {
                 this.index = response.data
+
+                // if a query parameter has been passed,
+                // update the search
+                if (window.location.search != "") {
+                    var param = window.location.search.substr(1)
+                    this.$nextTick(this.updateSearch(param))
+                }
+                else {
+                    this.state = ''
+                    this.searchInput = ''
+                }
+
             })
             .catch(error => {
                 // what to do here ?
@@ -223,6 +239,33 @@ var appMethods = {
             this.state = "resultlist"
             this.result = this.filtered
         }
+    },
+
+    copyPermalink: function() {
+
+        // create a temporary textarea element off the page
+        var target = document.createElement("textarea")
+        target.style.position = "absolute"
+        target.style.left = "-9999px"
+        target.style.top = "0"
+        target.id = "_hidden_permalink_"
+        document.body.appendChild(target)
+
+        // set the text area content
+        target.textContent = this.permalink
+
+        // copy it to the clipboard
+        var currentFocus = document.activeElement
+        target.focus()
+        target.select()
+        document.execCommand('copy')
+
+        // and return to normal
+        if (currentFocus && typeof currentFocus.focus === "function") {
+            currentFocus.focus()
+        }
+        
+        document.body.removeChild(target)
     }
 
 }
@@ -234,8 +277,18 @@ var vm = new Vue({
     el: '#explorer',
     data: appData,
     methods: appMethods,
+    computed: {
+        permalink: function() {
+            return window.location.origin + '/?' + this.searchInput
+        }
+    },
     mounted() {
         this.loadIndex()
+        this.$nextTick(function() {
+            $('.popover-dismiss').popover({
+                trigger: 'focus'
+            })
+        })
     }
 })
 

StaticRoot/index.html

@@ -26,6 +26,11 @@
            class="form-control-lg" size="30" type="search"
            placeholder="Search the registry" aria-label="Search"/>
   </form>
+  <a tabindex="0" style="margin-left: 1em" class="popover-dismiss btn btn-sm btn-dark" role="button"
+     data-toggle="popover" data-placement="bottom" data-trigger="focus"
+     title="Copied to clipboard" v-on:click="copyPermalink"
+     v-bind:data-content="permalink">link</a>
+  
   <div class="collapse navbar-collapse w-100 ml-auto">
     <div class="ml-auto"><a class="navbar-brand"
      href="/">Registry Explorer</a>&nbsp;<a class="pull-right navbar-brand"
@@ -126,6 +131,10 @@
   </div>
 </section>
 
+<textarea class="d-none" ref="permalink">
+{{ permalink }}
+</textarea>
+
 </div>
 </div>
 <footer class="page-footer font-small">
@@ -168,12 +177,14 @@ class="badge badge-pill badge-dark text-muted">{{ rtype }}</span></span></span>
 </script>
 
 <script type="text/x-template" id="reg-attribute-template">
-  <span style="word-break: break-all">
+  <span style="word-break: break-all; white-space: pre-wrap">
     <reg-object v-if="isRegObject()" v-bind:link="objectLink"></reg-object>
     <span v-else class="text-monospace" v-html="decorated"></span>
 </span>
 </script>
 
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js"></script>
 <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.min.js"></script> -->