copy to clipboard text item url #782

assets/css/app.scss

@@ -369,26 +369,95 @@ section[role="main-content"]{
       }
     }
 
+    $pagenum_w:1em;
     >section{
+      padding-right: 0;
+      >.wrapper{
+        padding-right: $pagenum_w*2;
+      }
       div#text{
-        .infinite-loading-container{
+        // .infinite-loading-container{
-          height:0;
+        //   height:0;
-          overflow: hidden;
+        //   overflow: hidden;
-        }
+        // }
         div.tei{
-          @media only screen and (min-width: $small-bp + 1) {
+          position: relative;
-            border-left: 1px dotted $grisclair;
+          width: calc(100% - #{$pagenum_w});
-            padding-left: 1em;
+
-            &.active{
+          // @media only screen and (min-width: $small-bp + 1) {
-              border-left: 1px dotted $grisfonce;
+          padding-right: $pagenum_w;
-            }
+          border-left: 1px dotted $grisclair;
+          padding-left: 1em;
+          &.active{
+            border-left: 1px dotted $bleuroi;
           }
+          // }
           >h1{@include teititle1blue;}
           span.placeName,
           span.objectName,
           span.persName{
             font-weight: 600;
           }
+
+          h1{ font-size: 1.512em; }
+          p{
+            margin-top: 0;
+            font-size: 1.134em;
+            line-height: 1.5;
+            span.persName,
+            span.placeName,
+            span.objectName{
+              font-weight: 600;
+            }
+            a{
+              font-weight: 600;
+              &.active-link{
+                color: $rouge;
+                // text-decoration: underline;
+              }
+              sup.mdi{
+                font-size: 0.630em;
+                vertical-align: super;
+                // line-height: 0.1;
+                padding: 0 0.2em;
+              }
+            }
+          }
+
+          span[role="pageNum"]{
+            font-size: 16px;
+            position: relative;
+            float:right;
+            width: $pagenum_w; height:0;
+            // margin-left:calc(100% - #{$pagenum_w * 2});
+            // margin-left: 100%;
+            margin-right: - $pagenum_w;
+            &:after{
+              content:attr(data-num);
+              border-top: 1px solid $bleuroilight;
+              position: absolute;
+              right:0;
+              font-size: 0.630em;
+              width: $pagenum_w*2; height: $pagenum_w;
+              line-height: $pagenum_w;
+              border-right: 1px solid $bleuroilight;
+              color: $bleuroi;
+              text-indent: $pagenum_w * 2.5;
+            }
+          }
+
+          a.text-item-link{
+            // float: left;
+            position: absolute;
+            top:0; left:0;
+            // display: block;
+            // width:1em; height:1em;
+            font-size: 0.630em;
+            .mdi{
+              color: $bleuroi;
+              pointer-events: none;
+            }
+          }
           // front page
           header{
             padding-top: 1em;
@@ -553,94 +622,7 @@ section[role="main-content"]{
   }
 
   #text{
-    .tei{
+    .tei{}}
-      width: 93%;
-      h1{
-        font-size: 1.512em;
-      }
-      p{
-        margin-top: 0;
-        font-size: 1.134em;
-        line-height: 1.5;
-        span.persName,
-        span.placeName,
-        span.objectName{
-          font-weight: 600;
-        }
-        a{
-          font-weight: 600;
-          &.active-link{
-            color: $rouge;
-            // text-decoration: underline;
-          }
-          sup.mdi{
-            font-size: 0.630em;
-            vertical-align: super;
-            // line-height: 0.1;
-            padding: 0 0.2em;
-          }
-        }
-      }
-    }
-    // <span role=\"pageBreak\" data-num=\"15\"></span>
-    // span[role="pageBreak"]{
-    //   display: inline-block;
-    //   border-left: 1px solid $bleuroi;
-    //   height:1.4em;
-    //   // word-spacing: 0;
-    //   margin: 0 0.3em;
-    //   line-height: 3;
-    //   position: relative;
-    //   vertical-align: bottom;
-    //   &:after, &:before{
-    //     content: '';
-    //     display: block;
-    //     width:0.5em;
-    //     position: absolute;
-    //   }
-    //   &:after{
-    //     top:0;
-    //     left:0;
-    //     border-top: 1px solid $bleuroi;
-    //   }
-    //   &:before{
-    //     bottom:0;
-    //     right:0;
-    //     border-bottom: 1px solid $bleuroi;
-    //   }
-    // }
-    span[role="pageNum"]{
-      // display:inline;
-      position: relative;
-      float:right;
-      // position: sticky;
-      $w:0.5em;
-      width:$w; height:0;
-      margin-left:calc(100% - (#{$w} * 0.5));
-      // &:before
-      &:after{
-        // display: block;
-        position: absolute;
-        font-size: 0.630em;
-        width:$w; height:$w*2;
-        line-height: $w*1.7;
-        padding-left: 1em;
-        border-right: 1px solid $bleuroilight;
-        color: $bleuroi;
-        text-indent: $w + 0.5em;
-      }
-      // &:before{
-      //   content:attr(data-num-prev);
-      //   border-bottom: 1px solid $bleuroilight;
-      //   bottom: 0.1em;
-      // }
-      &:after{
-        content:attr(data-num);
-        border-top: 1px solid $bleuroilight;
-        // bottom:1.3em;
-      }
-    }
-  }
 
   #biblio{
     .router-link-active{

package-lock.json

@@ -2779,6 +2779,16 @@
       "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "cliui": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@@ -3588,6 +3598,11 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -5997,6 +6012,14 @@
         "minimatch": "~3.0.2"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.1.15",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
@@ -10274,6 +10297,11 @@
         }
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -11379,6 +11407,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -11968,6 +12001,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-clipboard2": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
+      "integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "@popperjs/core": "^2.4.4",
     "axios": "^0.18.1",
     "vue": "^2.6.10",
+    "vue-clipboard2": "^0.3.1",
     "vue-infinite-loading": "^2.4.5",
     "vue-meta": "^1.6.0",
     "vue-router": "^3.1.3",

src/api/rest-axios.js

@@ -21,6 +21,7 @@ export const REST = axios.create({
   crossorigin: true,
   headers: {
     'Accept': 'application/json'
-    // 'Access-Control-Allow-Credentials': true
+    // 'Access-Control-Allow-Origin': '*'
+    // 'Access-Control-Allow-Credentials':
   }
 })

src/components/Content/EdText.vue

@@ -46,7 +46,16 @@ export default {
       this.html = `<div` +
       ` class="tei${this.uuid === this.textid ? ' active' : ''}"` +
       ` data-uuid="${this.uuid}"` +
-      `>${this.tei}</div>`
+      `>` +
+      `<a` +
+      ` href="http://${window.apipath}/items/${this.uuid}"` +
+      ` title="Copy to clipboard ${this.uuid}"` +
+      ` class="text-item-link"` +
+      ` @click.prevent="onClickCopyClipboard"` +
+      `>` +
+      `<span class="mdi mdi-open-in-new" />` +
+      `</a>` +
+      `${this.tei}</div>`
       this.parseLinks()
       // this.parsePageBreaks()
       // console.log('EdText: builded html', this.html)
@@ -143,6 +152,13 @@ export default {
     onLeaveLink (e) {
       // console.log('EdText onLeaveLink(e)', e)
       this.$emit('onLeaveLink')
+    },
+    onClickCopyClipboard (e) {
+      e.preventDefault()
+      console.log('onClickCopyClipboard', e)
+      // navigator.clipboard.writeText(e.target.getAttribute('href'))
+      this.$copyText(e.target.getAttribute('href'))
+      return false
     }
   },
   render (h) {

src/index.js

@@ -7,6 +7,7 @@ import InfiniteLoading from 'vue-infinite-loading'
 import VueScrollTo from 'vue-scrollto'
 import VueSelect from 'vue-select'
 import Vue2TouchEvents from 'vue2-touch-events'
+import VueClipboard from 'vue-clipboard2'
 
 import App from './App'
 
@@ -33,6 +34,7 @@ Vue.use(InfiniteLoading, {
 Vue.use(VueScrollTo)
 Vue.component('v-select', VueSelect)
 Vue.use(Vue2TouchEvents)
+Vue.use(VueClipboard)
 
 // https://apple.stackexchange.com/questions/17077/add-a-hosts-file-entry-without-jailbreaking
 window.apipath = process.env === 'prod' || window.location.hostname === 'dev.gdp.fr' ? `http://${window.location.hostname}/api` : 'http://localhost:8984'