Add xmp download

Author: obulat

src/App.vue

@@ -67,7 +67,6 @@
 
 import HelpSection from './components/HelpSection'
 import Stepper from './components/Stepper'
-import LicenseUseCard from './components/LicenseUseCard'
 import HeaderSection from './components/HeaderSection'
 import FooterSection from './components/FooterSection'
 import LicenseDetailsCard from './components/LicenseDetailsCard'
@@ -78,7 +77,7 @@ export default {
         HelpSection,
         Stepper,
         LicenseDetailsCard,
-        LicenseUseCard,
+        LicenseUseCard: () => import('@/components/LicenseUseCard'),
         HeaderSection,
         FooterSection
     },

src/components/CopyTools.vue

@@ -12,21 +12,18 @@
         >
             {{ copyLabel }}
         </v-button>
-        <v-button
-            v-else
-            class="donate small copy-button is-xmp"
-        >
-            {{ xmpLabel }}
-        </v-button>
+        <xmp-button v-if="clipboardTarget==='.xmp'" />
     </div>
 </template>
 
 <script>
 import CopyTypeSwitch from '@/components/CopyTypeSwitch'
 import Clipboard from 'clipboard'
+import XmpButton from '@/components/XmpButton'
+
 export default {
     name: 'CopyTools',
-    components: { CopyTypeSwitch },
+    components: { CopyTypeSwitch, XmpButton },
     props: {
         clipboardTarget: {
             type: String,

src/components/XmpButton.vue

@@ -0,0 +1,34 @@
+<template>
+    <a
+        ref="xmp"
+        class="button donate small copy-button is-xmp"
+        type="text/xml"
+        :href="xmpHref"
+        :download="xmpFilename"
+    >
+        {{ xmpLabel }}
+    </a>
+</template>
+
+<script>
+import { createXMP } from '@/utils/xmp'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'XmpButton',
+    computed: {
+        ...mapGetters(['shortName']),
+        xmpLabel() { return this.$t('license-use.xmp-label') },
+        xmpFilename() {
+            return `${this.shortName}.xmp`
+        },
+        xmpHref() {
+            const shortName = this.$store.getters.shortName
+            const { workUrl, workTitle, creatorName } = this.$store.state.attributionDetails
+            const xmp = createXMP({ shortName, workUrl, workTitle, creatorName })
+            const xmpBlob = new Blob([xmp], { type: 'text/xml;charset=utf-8' })
+            return URL.createObjectURL(xmpBlob)
+        }
+    }
+}
+</script>

src/utils/xmp.js

@@ -0,0 +1,66 @@
+import { LICENSES, licenseSlug } from '@/utils/license-utilities'
+
+function minify(data) {
+    return data.replace(/ {2,}/gi, '').replace(/\n/gi, '')
+}
+
+export const createXMP = ({ shortName, workUrl = '', workTitle = '', creatorName = '', lang = 'en-US' }) => {
+    const slug = licenseSlug(shortName).replace(/-/gi, '_').toUpperCase()
+
+    const copyrighted = shortName !== LICENSES.CC0.SHORT
+    const xapRights = copyrighted
+        ? `<rdf:Description rdf:about='' xmlns:xapRights='http://ns.adobe.com/xap/1.0/rights/'>
+             <xapRights:Marked>true</xapRights:Marked></rdf:Description>`
+        : ''
+    const xapWorkUrl = workUrl
+        ? `<rdf:Description rdf:about='' xmlns:xapRights='http://ns.adobe.com/xap/1.0/rights/'>
+<xapRights:WebStatement rdf:resource='${workUrl}'/></rdf:Description>`
+        : ''
+    const xapWorkTitle = workTitle
+        ? `
+<rdf:Description rdf:about='' xmlns:dc='http://purl.org/dc/elements/1.1/'><dc:title><rdf:Alt><rdf:li xml:lang='x-default'>
+${workTitle}</rdf:li><rdf:li xml:lang='${lang}'>${workTitle}</rdf:li></rdf:Alt></dc:title></rdf:Description>`
+        : ''
+
+    const licenseUrl = LICENSES[slug].URL
+
+    const ccLicenseUrl = `
+<rdf:Description rdf:about='' xmlns:cc='http://creativecommons.org/ns#'><cc:license rdf:resource='${licenseUrl}'/></rdf:Description>`
+
+    const ccLicenseNotice = `
+This work is licensed under <a rel="license noopener noreferrer" target="_blank" href="${licenseUrl}">${LICENSES[slug].FULL}</a>`
+
+    const xapRightsUsageTerms = `
+<rdf:Description rdf:about='' xmlns:xapRights='http://ns.adobe.com/xap/1.0/rights/'>
+<xapRights:UsageTerms><rdf:Alt><rdf:li xml:lang='${lang}' >${ccLicenseNotice}</rdf:li></rdf:Alt>
+</xapRights:UsageTerms></rdf:Description>`
+
+    const xapWebStatement = workUrl
+        ? `
+<rdf:Description rdf:about='' xmlns:xapRights='http://ns.adobe.com/xap/1.0/rights/'>
+<xapRights:WebStatement rdf:resource='${workUrl}'/></rdf:Description>`
+        : ''
+
+    const ccAttributionName = creatorName
+        ? `
+<rdf:Description rdf:about='' xmlns:cc='http://creativecommons.org/ns#'>
+<cc:attributionName>${creatorName}</cc:attributionName></rdf:Description>`
+        : ''
+    // eslint-disable-line quotes
+    const xmpData = `
+    <?xpacket begin='' id=''?>
+        <x:xmpmeta xmlns:x='adobe:ns:meta/'>
+            <rdf:RDF xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'>
+                ${xapRights}
+                ${xapWorkUrl}
+                ${xapWebStatement}
+                ${xapRightsUsageTerms}
+                ${xapWorkTitle}
+                ${ccLicenseUrl}
+                ${ccAttributionName}
+            </rdf:RDF>
+        </x:xmpmeta>
+    <?xpacket end='r'?>`
+    // We return minified string to not increase the size of the licensed file
+    return minify(xmpData)
+}