Add prominent share links if logged in or viewing

src/js/render.js

@@ -36,7 +36,21 @@ export function renderDictionaryDetails() {
 
 export function renderName() {
   const dictionaryName = removeTags(window.currentDictionary.name) + ' ' + removeTags(window.currentDictionary.specification);
-  document.getElementById('dictionaryName').innerHTML = dictionaryName;
+  const name = document.getElementById('dictionaryName');
+  name.innerHTML = dictionaryName;
+  const isPublic = hasToken() && window.currentDictionary.settings.isPublic;
+  if (isPublic && !document.getElementById('dictionaryShare')) {
+    const shareLink = document.createElement('a');
+    shareLink.id = 'dictionaryShare';
+    shareLink.classList.add('button');
+    shareLink.style.float = 'right';
+    shareLink.href = window.location.pathname.match(new RegExp(window.currentDictionary.externalID + '$')) ? window.location.pathname
+      : window.location.pathname.substring(0, window.location.pathname.indexOf(window.currentDictionary.externalID)) + window.currentDictionary.externalID;
+    shareLink.target = '_blank';
+    shareLink.title = 'Public Link to Dictionary';
+    shareLink.innerHTML = '➦';
+    name.parentElement.insertBefore(shareLink, name);
+  }
 }
 
 export function renderDescription() {
@@ -179,10 +193,10 @@ export function renderWords() {
           <h4 class="word">${word.name}${homonymnNumber > 0 ? ' <sub>' + homonymnNumber.toString() + '</sub>' : ''}</h4>
           <span class="pronunciation">${word.pronunciation}</span>
           <span class="part-of-speech">${word.partOfSpeech}</span>
+          ${isPublic ? `<a class="small button share-link" href="${shareLink}" target="_blank" title="Public Link to Word">&#10150;</a>` : ''}
           <span class="small button word-option-button">Options</span>
           <div class="word-option-list" style="display:none;">
             <div class="word-option" id="edit_${word.wordId}">Edit</div>
-            ${isPublic ? `<a class="word-option" href="${shareLink}" target="_blank">Share</a>` : ''}
             <div class="word-option" id="delete_${word.wordId}">Delete</div>
           </div>
         </header>

src/js/view/render.js

@@ -26,6 +26,9 @@ export function renderDictionaryDetails() {
 export function renderName() {
   const dictionaryName = removeTags(window.currentDictionary.name) + ' ' + removeTags(window.currentDictionary.specification);
   document.getElementById('dictionaryName').innerHTML = dictionaryName;
+  const shareLink = window.location.pathname.match(new RegExp(window.currentDictionary.externalID + '$')) ? window.location.pathname
+    : window.location.pathname.substring(0, window.location.pathname.indexOf(window.currentDictionary.externalID)) + window.currentDictionary.externalID;
+  document.getElementById('dictionaryShare').href = shareLink;
 }
 
 export function renderDescription() {
@@ -145,11 +148,13 @@ export function renderWords() {
         details: detailsMarkdown,
         wordId: originalWord.wordId,
       });
+      const shareLink = window.location.pathname + (window.location.pathname.match(new RegExp(word.wordId + '$')) ? '' : '/' + word.wordId);
       wordsHTML += `<article class="entry" id="${word.wordId}">
         <header>
           <h4 class="word">${word.name}</h4>
           <span class="pronunciation">${word.pronunciation}</span>
           <span class="part-of-speech">${word.partOfSpeech}</span>
+          <a href="${shareLink}" target="_blank" class="small button word-option-button" title="Link to Word">&#10150;</a>
         </header>
         <dl>
           <dt class="definition">${word.definition}</dt>

src/scss/Account/_structure.scss

@@ -13,4 +13,10 @@
       }
     }
   }
+}
+
+.share-link {
+  margin-left: $general-padding !important;
+  line-height: 16px !important;
+  padding: 1px 3px 3px !important;
 }

view.html

@@ -109,7 +109,9 @@
     
     <section id="mainColumn">
       <section id="detailsSection">
-        <h2 id="dictionaryName">Dictionary Name</h2>
+        <a id="dictionaryShare" href="./" class="button" title="Link to Dictionary" style="float:right;">&#10150;</a>
+        <h2 id="dictionaryName">{{dict_name}}</h2>
+        <h4>Created by {{public_name}}</h4>
         <nav>
           <ul>
             <li>Description</li><li>Details</li><li>Stats</li><!-- li id="editDictionaryButton">Edit</li -->