Get rich text generator working

Author: akmadian

src/components/HTMLGenerator.vue

@@ -7,8 +7,32 @@
                 aria-controls="contentIdForA11y1">
                 <h3 class="title is-3">Have a Website?</h3>
             </button>
-            <div class="notification">
                 <div class="content">
+                    <span id="attribution" class="photo_usage-attribution" ref="photoAttribution">
+                        <a :href="workLocation"
+                            v-if="workTitle && workLocation"
+                            target="_blank"
+                            rel="noopener">"{{ workTitle }}"
+                        </a>
+                        <p v-if="!workTitle">This work</p>
+                        <p v-if="workTitle && !workLocation">{{ workTitle }}</p>
+                        <span v-if="attributeToName">
+                            by
+                            <a v-if="attributeToURL"
+                                :href="attributeToURL"
+                                target="_blank"
+                                rel="noopener">{{ attributeToName }}</a>
+                            <span v-else>{{ attributeToName }}</span>
+                        </span>
+                        is licensed under
+                        <a class="photo_license" :href="licenseURL" target="_blank" rel="noopener">
+                        {{ shortLicenseName }}
+                        </a>
+                    </span>
+                    <LicenseIcons
+                        :url="licenseURL"
+                        :iconsArr="iconsArr"
+                    />
                     <CopyButton id="copy-richtext-btn"
                                 el="#generated-richtext-container"
                                 title="Copy the attribution to paste into your blog or document"
@@ -101,22 +125,24 @@
                         </div>
                     </div>
                 </div>
-            </div>
         </b-collapse>
     </div>
 </template>
 <script>
 import CopyButton from './CopyButton'
 import LicenseIcons from './LicenseIcons'
+import LicenseIconography from '@creativecommons/vocabulary/vocabulary.common'
 import attributionHtml from '@/utils/attributionHtml'
 import licenseUrl from '@/utils/licenseUrl'
+import shortNameToIconsArray from '@/utils/licenseUtils'
 
 export default {
     name: 'HTMLGenerator',
     props: ['shortLicenseName'],
     components: {
         CopyButton,
-        LicenseIcons
+        LicenseIcons,
+        LicenseIconography
     },
     data() {
         return {
@@ -136,10 +162,18 @@ export default {
                     attributeToName: this.attributeToName,
                     attributeToURL: this.attributeToURL,
                 },
-                licenseUrl(this.$props.shortLicenseName), 
+                this.licenseURL, 
                 this.$props.shortLicenseName
             );
         }
+    },
+    computed: {
+        licenseURL() {
+            return licenseUrl(this.$props.shortLicenseName)
+        },
+        iconsArr() {
+            return this.$props.shortLicenseName.toLowerCase().slice(3, this.$props.shortLicenseName.length - 4).split('-')
+        }
     }
 }
 </script>
@@ -160,4 +194,8 @@ export default {
     .field {
         margin-bottom: 0px;
     }
+
+    #attribution p {
+        display: inline
+    }
 </style>

src/components/LicenseIcons.vue

@@ -1,13 +1,13 @@
 <template>
-  <a :href="getLicenseURL(image)"
+  <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 onGetLicenseIcon(image.license)"
-          v-if="license" class="photo-license-icon"
-          :src="require(`@/assets/cc-${license.toLowerCase()}_icon.svg`)"
+          v-for="(license, index) in iconsArr"
+          class="photo-license-icon"
+          :src="require(`../assets/license-icons/cc-${license.toLowerCase()}_icon.svg`)"
           :key="index">
   </a>
 </template>
@@ -16,38 +16,7 @@
 const LicenseIcons = {
   name: 'license-icons',
   components: {},
-  props: {
-    image: '',
-    shouldWrapInLink: false,
-  },
-  methods: {
-    onGetLicenseIcon(license) {
-      let licenses = [];
-      if (license) {
-        licenses = license.split('-');
-      }
-      return licenses;
-    },
-    getLicenseURL(image) {
-      if (!image) {
-        return '';
-      }
-      const BASE_URL = 'https://creativecommons.org';
-      let url = `${BASE_URL}/licenses/${image.license}/${image.license_version}`;
-      let license = '';
-      if (image.license) {
-        license = image.license;
-      }
-      if (license === 'cc0') {
-        this.image.license_version = '1.0';
-        url = `${BASE_URL}/publicdomain/zero/1.0/`;
-      }
-      else if (image.license === 'pdm') {
-        url = `${BASE_URL}/publicdomain/mark/1.0/`;
-      }
-      return url;
-    },
-  },
+  props: [ 'url', 'iconsArr' ],
 };
 export default LicenseIcons;
 </script>

src/utils/convertLicenseName.js renamed to src/utils/licenseUtils.js

@@ -16,4 +16,12 @@ function fullToShort(fullLicenseName) {
     return base += " 4.0"
 }
 
-export default { shortToFull, fullToShort }
+function shortNameToIconsArray(shortLicenseName) {
+    return shortLicenseName
+        /*
+        .toLowerCase()
+        .slice(3, shortLicenseName.length - 4)
+        .split('-')*/
+}
+
+export default { shortToFull, fullToShort, shortNameToIconsArray }