Fix some issues with HTML generation, refine generated richext styling

creativecommons · akmadian · Aug 27, 2019 · Jul 26, 2019 · Jul 26, 2019 · Jul 26, 2019
commit f8c7ead3950f78dbcfcf7dfb0378a7bf8c4ce6ef
diff --git a/src/components/HTMLGenerator.vue b/src/components/HTMLGenerator.vue
@@ -8,35 +8,36 @@
                 <h3 class="title is-3">Have a Website?</h3>
             </button>
                 <div class="content">
-                    <span id="attribution-richtext" class="photo_usage-attribution" ref="photoAttribution">
-                        <a :href="workLocation"
-                            v-if="workTitle && workLocation"
-                            target="_blank"
-                            rel="noopener">"{{ workTitle }}"
-                        </a>
-                        <a v-if="!workTitle && workLocation"
-                            :href="workLocation">
-                            This work
-                        </a>
-                        <p v-if="!workTitle && !workLocation">This work</p>
-                        <p v-if="workTitle && !workLocation">{{ workTitle }}</p>
-                        <span v-if="attributeToName">
-                            by
-                            <a v-if="attributeToURL"
-                                :href="attributeToURL"
+                    <span id="attribution-richtext-container">
+                        <span id="attribution-richtext" class="photo_usage-attribution" ref="photoAttribution">
+                            <a :href="workLocation"
+                                v-if="workTitle && workLocation"
                                 target="_blank"
-                                rel="noopener">{{ attributeToName }}</a>
-                            <span v-else>{{ attributeToName }}</span>
+                                rel="noopener">"{{ workTitle }}"
+                            </a>
+                            <a v-if="!workTitle && workLocation"
+                                :href="workLocation">
+                                This work
+                            </a>
+                            <p v-if="!workTitle && !workLocation">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>
-                        is licensed under
-                        <a class="photo_license" :href="licenseURL" target="_blank" rel="noopener">
-                        {{ shortLicenseName }}
-                        </a>
+                        <LicenseIcons
+                            :url="licenseURL"
+                            :iconsArr="iconsArr"/>
                     </span>
-                    <LicenseIcons
-                        :url="licenseURL"
-                        :iconsArr="iconsArr"
-                    />
                     <CopyButton id="copy-richtext-btn"
                                 el="#attribution-richtext"
                                 title="Copy the attribution to paste into your blog or document">
@@ -55,8 +56,8 @@
                         Copy HTML
                     </CopyButton>
                     <div id="generator-meta-inputs">
-                        <b align="center">
-                            Filling out these boxes is optional, but it adds more data
+                        <b id="generator-meta-inputs-heading">
+                            Filling out the boxes below is optional, but it adds more data
                             to the generated HTML and rich text above!
                         </b>
                         <div class="metadata-input-row">
@@ -185,8 +186,9 @@ export default {
         background-color: #ef9421 !important;
     }
 
-    #generator-meta-inputs {
-        margin-top: 1rem;
+    #generator-meta-inputs-heading {
+        margin-bottom: 1rem;
+        display: block;
     }
 
     b {
@@ -197,6 +199,17 @@ export default {
         margin-bottom: 0px;
     }
 
+    #attribution-richtext-container {
+        margin-top: 1rem;
+        display: block;
+    }
+
+    #attribution-richtext-container .photo-license-icons {
+        vertical-align: middle;
+        margin-top: 0px;
+        margin-left: 2px;
+    }
+
     #attribution-richtext p {
         display: inline
     }

diff --git a/src/components/HelpSection.vue b/src/components/HelpSection.vue
@@ -35,7 +35,28 @@
         </div>
         <div class="columns">
             <div class="column is-one-third">
-
+                <p>
+                    Creative Commons licenses can be represented by their names, their
+                    associated icons, or both. For example, a cc-by-nc license, which 
+                    requires attribution, and prohibits commercial use could be represented its:
+                    <br><br>
+                    <ul>
+                        <li>
+                            <span>
+                                <b>&nbsp;&nbsp;&nbsp;&nbsp; - Name: </b> CC-BY-NC, or Attribution-NonCommercial
+                            </span>
+                        </li>
+                        <li>
+                            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;OR</p>
+                        </li>
+                        <li>
+                            <span>
+                                <b>&nbsp;&nbsp;&nbsp;&nbsp; - Icons: </b>
+                                <LicenseIconography :icon-list="['by', 'nc', 'nd', 'sa']"/>
+                            </span>
+                        </li>
+                    </ul>
+                </p>
             </div>
             <div class="column is-one-third">
                 <div class="edu-icons-section">
@@ -122,7 +143,6 @@
         <b-modal :active.sync="isModal1Active">
             <header class="modal-card-head">
                 <p class="modal-card-title modal-title">What Are Creative Commons Licenses?</p>
-                <button class="delete" aria-label="close" onclick="destroy_modal('q1')"></button>
             </header>
             <section class="modal-card-body">
                 <p>
@@ -145,7 +165,6 @@
         <b-modal :active.sync="isModal2Active">
             <header class="modal-card-head">
                 <p class="modal-card-title modal-title">How do the Licenses Work?</p>
-                <button class="delete" aria-label="close" onclick="destroy_modal('q3')"></button>
             </header>
             <section class="modal-card-body">
                 <b>License "Layers"</b> <br>
@@ -195,7 +214,6 @@
         <b-modal :active.sync="isModal3Active">
             <header class="modal-card-head">
                 <p class="modal-card-title modal-title">Want Public Domain Instead?</p>
-                <button class="delete" aria-label="close" onclick="destroy_modal('q5')"></button>
             </header>
             <section class="modal-card-body">
                 <p>
@@ -215,7 +233,6 @@
         <b-modal :active.sync="isModal4Active">
             <header class="modal-card-head">
                 <p class="modal-card-title modal-title">Considerations Before Licensing</p>
-                <button class="delete" aria-label="close" onclick="destroy_modal('q2')"></button>
             </header>
             <section class="modal-card-body">
                 <p>
@@ -243,7 +260,6 @@
         <b-modal :active.sync="isModal5Active">
             <header class="modal-card-head">
                 <p class="modal-card-title modal-title">How do I Formally License my Work?</p>
-                <button class="delete" aria-label="close" onclick="destroy_modal('q4')"></button>
             </header>
             <section class="modal-card-body">
                 <p>
@@ -287,7 +303,6 @@
         <b-modal :active.sync="isModal6Active">
             <header class="modal-card-head">
                 <p class="modal-card-title modal-title">The Six Creative Commons Licenses</p>
-                <button class="delete" aria-label="close" onclick="destroy_modal('q6')"></button>
             </header>
             <section class="modal-card-body">
                 <div class="columns">
@@ -321,6 +336,8 @@
     </div>
 </template>
 <script>
+import LicenseIconography from '@creativecommons/vocabulary'
+
 // eslint-disable-next-line
 const ModalForm = {
     template: `
@@ -341,6 +358,9 @@ const ModalForm = {
 }
 export default {
     // eslint-disable-next-line
+    components: {
+        LicenseIconography
+    },
     data() {
         return {
             isModal1Active: false,

diff --git a/src/utils/attributionHtml.js b/src/utils/attributionHtml.js
@@ -1,6 +1,12 @@
+/**
+ * This function is mostly a copy of that in the
+ * ccsearch-frontend repo, with some modifications
+ * to work with the cc chooser
+ */
+
 function attributionHtml(form, ccLicenseURL, shortLicenseName) {
     const baseAssetsPath = 'https://search.creativecommons.org/static/img'
-    const imgLink = `<a href="${form.workLocation}">"${form.workTitle}"</a>`
+    const imgLink = `<a href="${form.workLocation}">"${form.workTitle ? form.workTitle : 'This work'}"</a>`
     let creator = ''
     if (form.attributeToName && form.attributeToURL) {
         creator = `<span> by <a href="${form.attributeToURL}">${form.attributeToName}</a></span>`

diff --git a/src/utils/licenseUrl.js b/src/utils/licenseUrl.js
@@ -1,13 +1,12 @@
 function licenseUrl(licenseName) {
     licenseName = licenseName.toLowerCase().slice(3, licenseName.length - 4)
-    return 'https://creativecommons.org/licenses/' + licenseName + '/4.0'
+    return 'https://creativecommons.org/licenses/' + licenseName + '/4.0/?ref=ccchooser'
 }
 
 function isFullName(licenseName) {
     licenseName.toLowerCase()
-    if (licenseName.includes("attribution") || licenseName.includes("noderivatives") ||
-        licenseName.includes("sharealike") || licenseName.includes("noncommercial")) {
-            console.error("Is Full Name")
+    if (licenseName.includes('attribution') || licenseName.includes('noderivatives') ||
+        licenseName.includes('sharealike') || licenseName.includes('noncommercial')) {
         return true
     }
     return false