Add share links to words (word view not added yet)

src/js/account/render.js

@@ -56,13 +56,14 @@ export function renderLoginForm() {
 export function renderMakePublic() {
   const editSettingsTab = document.getElementById('editSettingsTab');
   const { isPublic } = window.currentDictionary.settings;
+  const { externalID } = window.currentDictionary;
   const editSettingsTabHTML = `<label>Make Public
     <input type="checkbox" id="editIsPublic"${isPublic ? ' checked' : ''}><br>
     <small>Checking this box will make this public via a link you can share with others.</small>
   </label>
   <p id="publicLinkDisplay" style="${!isPublic ? 'display:none;': ''}margin-left:20px;">
     <strong>Public Link:</strong><br>
-    <input readonly id="publicLink" value="${window.location.href + window.currentDictionary.externalID.toString()}">
+    <input readonly id="publicLink" value="${window.location.pathname + (externalID ? externalID.toString() : '')}">
     <a class="small button" id="publicLinkCopy">Copy</a>
   </p>
   `;

src/js/account/sync.js

@@ -100,6 +100,7 @@ export function uploadWholeDictionary(asNew = false) {
       dictionary,
     }, remoteId => {
       window.currentDictionary.externalID = remoteId;
+      dictionary.getElementById('publicLink').value = window.location.pathname + remoteId.toString();
       saveDictionary(false);
       addMessage('Dictionary Uploaded Successfully');
       renderChangeDictionaryOptions();

src/js/render.js

@@ -1,6 +1,6 @@
 import md from 'marked';
 import { removeTags, slugify } from '../helpers';
-import { getWordsStats, wordExists } from './utilities';
+import { getWordsStats, getHomonymnNumber, hasToken } from './utilities';
 import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search';
 import { showSection } from './displayToggles';
 import {
@@ -15,7 +15,7 @@ import {
   setupIPAFields
 } from './setupListeners';
 import { getPaginationData } from './pagination';
-import { getOpenEditForms } from './wordManagement';
+import { getOpenEditForms, parseReferences } from './wordManagement';
 
 export function renderAll() {
   renderDictionaryDetails();
@@ -122,6 +122,7 @@ export function renderWords() {
   let wordsHTML = '';
   let openEditForms = getOpenEditForms();
   let words = false;
+  const isPublic = hasToken() && window.currentDictionary.settings.isPublic;
 
   if (window.currentDictionary.words.length === 0) {
     wordsHTML = `<article class="entry">
@@ -160,14 +161,7 @@ export function renderWords() {
       let detailsMarkdown = removeTags(originalWord.details);
       const references = detailsMarkdown.match(/\{\{.+?\}\}/g);
       if (references && Array.isArray(references)) {
-        new Set(references).forEach(reference => {
-          const wordToFind = reference.replace(/\{\{|\}\}/g, '');
-          const existingWordId = wordExists(wordToFind, true);
-          if (existingWordId !== false) {
-            const wordMarkdownLink = `[${wordToFind}](#${existingWordId})`;
-            detailsMarkdown = detailsMarkdown.replace(new RegExp(reference, 'g'), wordMarkdownLink);
-          }
-        });
+        detailsMarkdown = parseReferences(detailsMarkdown, references);
       }
       const word = highlightSearchTerm({
         name: removeTags(originalWord.name),
@@ -177,14 +171,18 @@ export function renderWords() {
         details: detailsMarkdown,
         wordId: originalWord.wordId,
       });
+      const homonymnNumber = getHomonymnNumber(originalWord);
+      const shareLink = window.currentDictionary.hasOwnProperty('externalID')
+        ? window.location.pathname + window.currentDictionary.externalID + '/' + word.wordId : '';
       wordsHTML += `<article class="entry" id="${word.wordId}">
         <header>
-          <h4 class="word">${word.name}</h4>
+          <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>
           <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/utilities.js

@@ -107,6 +107,35 @@ export function wordExists(word, returnId = false) {
   return foundWord ? (returnId ? foundWord.wordId : true) : false;
 }
 
+export function getHomonymnIndexes(word) {
+  const { currentDictionary } = window;
+  const { caseSensitive } = currentDictionary.settings;
+  const foundIndexes = [];
+  currentDictionary.words.forEach((existingWord, index) => {
+    if (existingWord.wordId !== word.wordId
+      && (caseSensitive ? existingWord.name === word.name : existingWord.name.toLowerCase() === word.name.toLowerCase())) {
+        foundIndexes.push(index);
+      }
+  });
+  return foundIndexes;
+}
+
+export function getHomonymnNumber(word) {
+  const homonyms = getHomonymnIndexes(word);
+  if (homonyms.length > 0) {
+    const index = window.currentDictionary.words.findIndex(w => w.wordId === word.wordId);
+    let number = 1;
+
+    for (let i = 0; i < homonyms.length; i++) {
+      if (index < homonyms[i]) break;
+      number++;
+    }
+
+    return number;
+  }
+  return 0;
+}
+
 export function generateRandomWords(numberOfWords) {
   console.log('Generating', numberOfWords, 'words...');
   const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

src/js/wordManagement.js

@@ -1,5 +1,5 @@
 import { renderWords } from "./render";
-import { wordExists, addMessage, getNextId, hasToken } from "./utilities";
+import { wordExists, addMessage, getNextId, hasToken, getHomonymnIndexes } from "./utilities";
 import removeDiacritics from "./StackOverflow/removeDiacritics";
 import { removeTags, getTimestampInSeconds } from "../helpers";
 import { saveDictionary } from "./dictionaryManagement";
@@ -46,6 +46,42 @@ export function sortWords(render) {
   }
 }
 
+export function parseReferences(detailsMarkdown, references) {
+  new Set(references).forEach(reference => {
+    let wordToFind = reference.replace(/\{\{|\}\}/g, '');
+    let homonymn = 0;
+    if (wordToFind.includes(':')) {
+      const separator = wordToFind.indexOf(':');
+      homonymn = wordToFind.substr(separator + 1);
+      wordToFind = wordToFind.substring(0, separator);
+      if (homonymn && homonymn.trim() && !isNaN(parseInt(homonymn.trim()))) {
+        homonymn = parseInt(homonymn.trim());
+      } else {
+        homonymn = 0;
+      }
+    }
+    let existingWordId = false;
+    const homonymnIndexes = getHomonymnIndexes({ name: wordToFind, wordId: -1 });
+    console.log(homonymn, homonymnIndexes);
+    if (homonymn > 0) {
+      if (typeof homonymnIndexes[homonymn - 1] !== 'undefined') {
+        existingWordId = window.currentDictionary.words[homonymnIndexes[homonymn - 1]].wordId;
+      }
+    } else {
+      existingWordId = wordExists(wordToFind, true);
+    }
+    if (existingWordId !== false) {
+      if (homonymn < 1 && homonymnIndexes.length > 0) {
+        homonymn = 1;
+      }
+      const homonymnSubHTML = homonymn > 0 ? '<sub>' + homonymn.toString() + '</sub>' : '';
+      const wordMarkdownLink = `[${wordToFind}${homonymnSubHTML}](#${existingWordId})`;
+      detailsMarkdown = detailsMarkdown.replace(new RegExp(reference, 'g'), wordMarkdownLink);
+    }
+  });
+  return detailsMarkdown;
+}
+
 export function submitWordForm() {
   const name = document.getElementById('wordName').value,
     pronunciation = document.getElementById('wordPronunciation').value,

src/main.scss

@@ -15,4 +15,10 @@ html, body {
   * {
     box-sizing: border-box;
   }
+}
+
+input:not([type="checkbox"]),
+select,
+textarea {
+  font-size: 16px;
 }

src/markdown/help.md

@@ -54,7 +54,8 @@ After you enter a markdown-formatted description/rules in the Dictionary Setting
 
 ### Referencing Other Words
 If you want to reference another existing word in your dictionary, wrapping the word with its exact name in double-curly-braces \{\{like so\}\} in the Details field will automatically create a link to the word in the dictionary.  
-Note: If you do not prevent duplicates, it will find the first entry in the list.
+
+If you have more than one word with the same spelling, the duplicate words will appear in your word listing with small numbers beside them. By writing the number after a colon \{\{like so:2\}\}, you can directly reference the specific homonymn. If you have duplicate words and exclude the reference number, it will link to the homonymn marked with 1.
 
 ### Maximizing Large Text Boxes
 If you need more space to see what you are entering into a word's Details field or any other long text field with a "Maximize" button, clicking "Maximize" will give you a larger view of the text box to enter text in. When you're done writing, click either the "Done" or × button or any of the darker space outside of the larger view, and your text will be in the original text area. It will even preserve your cursor position or highlighted text so you don't lose your place moving from the larger view back to the small (and vice-versa)!

src/php/api/router.php

@@ -1,10 +1,10 @@
 <?php
 $view = isset($_GET['view']) ? $_GET['view'] : false;
-$dict = isset($_GET['dict']) ? $_GET['dict'] : false;
 
 switch ($view) {
   case 'publicview': {
     $html = file_get_contents('../view.html');
+    $dict = isset($_GET['dict']) ? $_GET['dict'] : false;
     if ($dict !== false) {
       require_once('./Dictionary.php');
       $dictionary = new Dictionary();
@@ -16,6 +16,11 @@ switch ($view) {
         $html = str_replace('{{public_name}}', $dictionary_data['createdBy'], $html);
         $dictionary_json = json_encode($dictionary_data);
         $html = str_replace('{{dict_json}}', addslashes($dictionary_json), $html);
+      } else {
+        $html = str_replace('{{dict}}', 'error', $html);
+        $html = str_replace('{{dict_name}}', 'Error: Dictionary Not Found', $html);
+        $html = str_replace('{{public_name}}', 'Error', $html);
+        $html = str_replace('{{dict_json}}', '{"name": "Error:", "specification": "Dictionary Not Found", "words": []}', $html);
       }
       echo $html;
     }