Refactor license code generation

License Icons in rich text are again generated from local svg files to minimize loading data and flickering of the icons. Links for html icons are different in order to ensure that the links are permanent.
License code generation is done inside the SelectedLicenseCode component.

Signed-off-by: Olga Bulat <obulat@gmail.com>

Author: obulat

src/components/LicenseIcons.vue

@@ -1,39 +1,40 @@
 <template>
-  <a :href="url"
-      @click.stop="() => false"
-     class="photo-license-icons"
-     target="_blank"
-     rel="noopener noreferrer">
-    <img class="photo-license-icon" src="../assets/license-icons/cc_icon.svg"><img
-          v-for="(license, index) in iconsArr"
-          class="photo-license-icon"
-          :src="require(`../assets/license-icons/cc-${license.toLowerCase()}_icon.svg`)"
-          :key="index">
-  </a>
+    <a :href="url"
+       @click.stop="() => false"
+       class="photo-license-icons"
+       target="_blank"
+       rel="noopener noreferrer">
+        <img class="photo-license-icon"
+             src="../assets/license-icons/cc_icon.svg">
+        <img v-for="(license, index) in iconsArr"
+             class="photo-license-icon"
+             :src="require(`../assets/license-icons/cc-${license.toLowerCase()}_icon.svg`)"
+             :key="index">
+    </a>
 </template>
 
 <script>
-/* eslint-disable */
 const LicenseIcons = {
-  name: 'license-icons',
-  components: {},
-  props: [ 'url', 'iconsArr' ],
-};
-export default LicenseIcons;
+    name: 'license-icons',
+    components: {},
+    props: ['url', 'iconsArr']
+}
+export default LicenseIcons
 </script>
 <style lang="scss" scoped>
-  .photo-license-icons {
-    display: inline-block;
-    white-space: none;
-    opacity: .7;
-    margin-top: 2px;
-    height: 22px !important;
+    .photo-license-icons {
+        display: inline-block;
+        white-space: nowrap;
+        vertical-align: text-bottom;
+        opacity: .7;
+        margin-right:3px;
+        height: 22px !important;
     &:hover {
-      opacity: 1;
+        opacity: 1;
     }
   }
   .photo-license-icon {
-    height: inherit;
-    margin-right: 3px;
+      height: inherit;
+      margin-left: 3px;
   }
 </style>

src/components/SelectedLicenseCode.vue

@@ -9,14 +9,20 @@
             v-model="activeTab"
         >
             <b-tab-item :label="this.$t('use-license.rich-text-label')">
-                <div id="attribution-richtext"
-                    v-html="this.htmlElement"/>
+                <div id="attribution-richtext">
+                <p xmlns:dct="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#">
+                    <span v-html="this.licenseCodeTextSpan" />
+                    <LicenseIcons
+                        :url="this.$licenseUrl(this.$props.value.shortName)"
+                        :iconsArr="this.$licenseIconsArr(this.$props.value.shortName)"/>
+                </p>
+                </div>
             </b-tab-item>
             <b-tab-item :label="this.$t('use-license.html-label')">
                 <div class='control' id='generated-html-container'>
                     <textarea id='attribution-html'
                               class='textarea'
-                              :value="htmlElement"
+                              :value="htmlLicenseParagraph"
                               readonly
                     />
                 </div>
@@ -52,10 +58,13 @@
 </template>
 <script>
 import Clipboard from 'clipboard'
-import { workAuthor, workLicense } from '@/utils/attributionHtml'
+import LicenseIcons from './LicenseIcons'
 
 export default {
     name: 'SelectedLicenseCode',
+    components: {
+        LicenseIcons
+    },
     props: ['value'],
     data() {
         return {
@@ -87,15 +96,20 @@ export default {
         licenseURL() {
             return this.$licenseUrl(this.$props.value.shortName)
         },
-        workLicenseElement() {
-            return workLicense(this.licenseURL,
-                this.$props.value.shortName)
+        licenseLink() {
+            const short = this.$props.value.shortName.toUpperCase()
+            const attrs = 'target="_blank" rel="license noopener noreferrer" style="display: inline-block;">'
+            return `<a href="${this.licenseURL}" ${attrs}${short}</a>`
         },
         authorElement() {
-            return workAuthor({
-                creatorName: this.$props.value.attributionDetails.creatorName,
-                creatorProfileUrl: this.$props.value.attributionDetails.creatorProfileUrl
-            })
+            const name = this.$props.value.attributionDetails.creatorName
+            const profile = this.$props.value.attributionDetails.creatorProfileUrl
+            if (name) {
+                const creatorNameNoLink = `<span rel="cc:attributionName">${name}</span>`
+                return profile
+                    ? `by <a rel="cc:attributionURL"  href="${profile}">${creatorNameNoLink}</a>`
+                    : `by ${creatorNameNoLink}`
+            } else return ''
         },
         titleElement() {
             const workUrl = this.$props.value.attributionDetails.workUrl
@@ -112,14 +126,27 @@ export default {
                 }
             }
         },
-        htmlElement() {
-            const licenseText = this.$t('code-text.license-text', {
+        licenseCodeTextSpan() {
+            const attributionCode = this.$t('code-text.license-text', {
                 workTitle: this.titleElement,
                 byLine: this.authorElement
             })
-            const paragraphBeginning = '<p id="license-code" xmlns:dct="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#">'
-            const fullLicenseCode = `${paragraphBeginning}${licenseText}${this.workLicenseElement}</p>`
-            return fullLicenseCode
+            return `${attributionCode}${this.licenseLink}`
+        },
+        htmlLicenseParagraph() {
+            let short = this.$props.value.shortName
+            const iconStyle = 'style="height:22px!important;margin-left: 3px;vertical-align:text-bottom;opacity:0.7;"'
+            const baseAssetsPath = 'https://search.creativecommons.org/static/img'
+            let licenseIcons = `<img ${iconStyle} src="${baseAssetsPath}/cc_icon.svg" />`
+            if (short.includes('CC0')) {
+                short = 'CC CC0 1.0'
+            }
+            licenseIcons += short.slice(3, short.length - 4).split('-').map(license =>
+                `<img  ${iconStyle} src="${baseAssetsPath}/cc-${license.toLowerCase()}_icon.svg" />`
+            ).join('')
+            const licenseIconsLink = `<a href="${this.licenseURL}">${licenseIcons}</a>`
+            const ccrelcode = 'xmlns:dct="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#"'
+            return `<p ${ccrelcode}>${this.licenseCodeTextSpan}${licenseIconsLink}</p>`
         },
         activeTab: {
             get() { return this.currentTab },
@@ -130,7 +157,7 @@ export default {
                     this.currentSelection = this.currentTab === 0 ? 'richtext' : 'html'
                     const tab = this.currentTab
                     this.currentTab = 2
-                    this.copyText = this.$t('copied-label')
+                    this.copyText = this.$t('use-license.copied-label')
                     setTimeout(() => {
                         this.currentTab = tab
                     }, 1)
@@ -165,7 +192,7 @@ export default {
     .use-license-hint span {
         vertical-align: middle;
     }
-    div.license-code {
+    .license-code {
         margin-top: 0.4rem;
         h2.vocab-h2{
             font-family: Roboto Condensed;