Change dictionary even if current_dictionary is selected

manifest.webmanifest

@@ -33,7 +33,7 @@
       "type": "image/png"
     }
   ],
-  "start_url": "/lexiconga/",
+  "start_url": "/",
   "display": "standalone",
   "orientation": "portrait",
   "background_color": "#e6cfaa",

package.json

@@ -11,7 +11,7 @@
     "watch-js": "parcel watch template-index.html offline.html template-view.html template-passwordreset.html --no-hmr --public-url /lexiconga/",
     "watch-php": "cpx \"src/php/**/{*,.*}\" dist -v -w",
     "bundle": "npm run process-images && npm run bundle-js && npm run copy-files && npm run copy-php",
-    "bundle-js": "parcel build template-index.html offline.html template-view.html template-passwordreset.html",
+    "bundle-js": "parcel build template-index.html offline.html template-view.html template-passwordreset.html --no-source-maps",
     "copy-files": "cpx \"node_modules/upup/dist/*.min.js\" dist -v",
     "copy-php": "cpx \"src/php/**/{*,.*}\" dist",
     "process-images": "node dev/resize-images.js",

src/js/account/dictionaryManagement.js

@@ -18,6 +18,7 @@ export function createNewDictionary() {
 export function changeDictionary(dictionary) {
   dictionary = typeof dictionary.target !== 'undefined' ? dictionary.target.value : dictionary;
   if (dictionary !== window.currentDictionary.externalID) {
+    addMessage('Loading Dictionary...');
     request({
       action: 'change-dictionary',
       dictionary,

src/js/account/render.js

@@ -1,4 +1,5 @@
 import { setupLoginModal, setupChangeDictionary, setupCreateNewDictionary, setupDeletedDictionaryChangeModal, setupMakePublic } from "./setupListeners";
+import { getPublicLink } from "./utilities";
 import { request } from "./helpers";
 
 export function renderLoginForm() {
@@ -56,20 +57,24 @@ export function renderLoginForm() {
 export function renderMakePublic() {
   const editSettingsTab = document.getElementById('editSettingsTab');
   const { isPublic } = window.currentDictionary.settings;
-  const { externalID } = window.currentDictionary;
+  let waitForSync = setInterval(() => {
-  const editSettingsTabHTML = `<label>Make Public
+    if (window.currentDictionary.hasOwnProperty('externalID') && !isNaN(window.currentDictionary.externalID)) {
-    <input type="checkbox" id="editIsPublic"${isPublic ? ' checked' : ''}><br>
+      clearInterval(waitForSync);
-    <small>Checking this box will make this public via a link you can share with others.</small>
+      const editSettingsTabHTML = `<label>Make Public
-  </label>
+        <input type="checkbox" id="editIsPublic"${isPublic ? ' checked' : ''}><br>
-  <p id="publicLinkDisplay" style="${!isPublic ? 'display:none;': ''}margin-left:20px;">
+        <small>Checking this box will make this public via a link you can share with others.</small>
-    <strong>Public Link:</strong><br>
+      </label>
-    <input readonly id="publicLink" value="${document.domain + window.location.pathname + (externalID ? externalID.toString() : '')}">
+      <p id="publicLinkDisplay" style="${!isPublic ? 'display:none;': ''}margin-left:20px;">
-    <a class="small button" id="publicLinkCopy">Copy</a>
+        <strong>Public Link:</strong><br>
-  </p>
+        <input readonly id="publicLink" value="${getPublicLink()}">
-  `;
+        <a class="small button" id="publicLinkCopy">Copy</a>
-  editSettingsTab.innerHTML += editSettingsTabHTML;
+      </p>
-
+      `;
-  setupMakePublic();
+      editSettingsTab.innerHTML += editSettingsTabHTML;
+    
+      setupMakePublic();
+    }
+  }, 100);
 }
 
 export function renderAccountSettings() {

src/js/account/sync.js

@@ -1,7 +1,7 @@
 import { addMessage } from "../utilities";
 import { saveDictionary, clearDictionary } from "../dictionaryManagement";
 import { request } from "./helpers";
-import { saveToken, dictionaryIsDefault } from "./utilities";
+import { saveToken, dictionaryIsDefault, getPublicLink } from "./utilities";
 import { renderAll } from "../render";
 import { sortWords } from "../wordManagement";
 import { getLocalDeletedWords, clearLocalDeletedWords, saveDeletedWordsLocally } from "./utilities";
@@ -37,8 +37,14 @@ export function performSync(remoteDictionary) {
         syncWords(remoteDictionary.words, remoteDictionary.deletedWords).then(success => {
           if (success) {
             renderAll();
+            
             document.getElementById('accountSettingsChangeDictionary').value = window.currentDictionary.externalID;
-            document.getElementById('publicLinkDisplay').style.display = window.currentDictionary.settings.isPublic ? '' : 'none';
+            if (document.getElementById('publicLink')) {
+              document.getElementById('publicLink').value = getPublicLink();
+            }
+            if (document.getElementById('publicLinkDisplay')) {
+              document.getElementById('publicLinkDisplay').style.display = window.currentDictionary.settings.isPublic ? '' : 'none';
+            }
           } else {
             console.error('word sync failed');
           }

src/js/account/utilities.js

@@ -21,6 +21,22 @@ export function dictionaryIsDefault() {
   return JSON.stringify(defaultDictionary) === JSON.stringify(currentDictionary);
 }
 
+export function getPublicLink() {
+  const { externalID } = window.currentDictionary;
+  let path;
+  if (externalID) {
+    path = window.location.pathname.match(new RegExp(externalID + '$'))
+      ? window.location.pathname
+      : (window.location.pathname.indexOf(externalID) > -1
+        ? window.location.pathname.substring(0, window.location.pathname.indexOf(externalID)) + externalID
+        : window.location.pathname + externalID
+      );
+  } else {
+    path = '';
+  }
+  return 'https://' + document.domain + path;
+}
+
 export function saveDeletedWordsLocally(wordIds) {
   let storedDeletedWords = getLocalDeletedWords();
   wordIds.forEach(wordId => {

src/js/render.js

@@ -18,6 +18,7 @@ import { getPaginationData } from './pagination';
 import { getOpenEditForms, parseReferences } from './wordManagement';
 import { renderAd } from './ads';
 import ipaTableFile from './KeyboardFire/phondue/ipa-table.html';
+import { getPublicLink } from './account/utilities';
 
 export function renderAll() {
   renderTheme();
@@ -54,12 +55,13 @@ export function renderName() {
     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
+    shareLink.href = getPublicLink();
-      : 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);
+  } else if (isPublic && shareLinkElement) {
+    shareLinkElement.href = getPublicLink();
   } else if (!isPublic && shareLinkElement) {
     shareLinkElement.parentElement.removeChild(shareLinkElement);
   }
@@ -193,8 +195,7 @@ export function renderWords() {
         wordId: originalWord.wordId,
       });
       const homonymnNumber = getHomonymnNumber(originalWord);
-      const shareLink = window.currentDictionary.hasOwnProperty('externalID')
+      const shareLink = window.currentDictionary.hasOwnProperty('externalID') ? getPublicLink() + '/' + word.wordId : '';
-        ? window.location.pathname + window.currentDictionary.externalID + '/' + word.wordId : '';
 
       wordsHTML += renderAd(displayIndex);
 

src/main.scss

@@ -18,21 +18,4 @@
 @import 'scss/themes/yellow';
 @import 'scss/themes/red';
 @import 'scss/themes/mint';
-@import 'scss/themes/grape';
+@import 'scss/themes/grape';
-
-html, body {
-  margin: 0;
-  font-family: $font;
-  transition: all 0.2s ease-in;
-  
-  * {
-    transition: all 0.2s ease-in;
-    box-sizing: border-box;
-  }
-}
-
-input:not([type="checkbox"]),
-select,
-textarea {
-  font-size: 16px;
-}

src/php/api/Dictionary.php

@@ -59,7 +59,7 @@ VALUES ($new_id, ?, ?, ?, ?)";
   public function changeCurrent ($user, $dictionary) {
     $update_query = 'UPDATE users SET current_dictionary=? WHERE id=?';
     $update = $this->db->query($update_query, array($dictionary, $user));
-    if ($update->rowCount() > 0) {
+    if (trim($this->db->last_error_info[2]) == '') {
       return $dictionary;
     }
     return false;

src/php/router.php

@@ -1,5 +1,12 @@
 <?php
 require_once(realpath(dirname(__FILE__) . '/./api/Response.php'));
+$show_upgrade_screen = false;
+
+if ($show_upgrade_screen) {
+  $html = '<h1>Code Update in Progress</h1><p>Please refresh the page in 10 minutes.</p>';
+  return Response::html($html);
+}
+
 $view = isset($_GET['view']) ? $_GET['view'] : false;
 
 switch ($view) {
@@ -112,7 +119,7 @@ switch ($view) {
       oldLoad && oldLoad();
       if (UpUp) {
         UpUp.start({
-          'cache-version': '2.0.0',
+          'cache-version': '2.0.2',
           'content-url': 'offline.html',
           'assets': [
             \"" . implode('","', $files) . "\"

src/scss/_containers.scss

@@ -1,3 +1,15 @@
+html, body {
+  margin: 0;
+  font-family: $font;
+  font-size: 13pt;
+  transition: all 0.2s ease-in;
+  
+  * {
+    transition: all 0.2s ease-in;
+    box-sizing: border-box;
+  }
+}
+
 header {
   display: block;
   padding: 5px $general-padding;

src/scss/_elements.scss

@@ -8,6 +8,12 @@ p, span {
   }
 }
 
+input:not([type="checkbox"]),
+select,
+textarea {
+  font-size: 12pt;
+}
+
 label {
   display: block;
   font-weight: bold;
@@ -24,7 +30,7 @@ label {
 
   input:not([type="checkbox"]):not([type="radio"]) {
     padding-bottom: 2px;
-    line-height: 130%;
+    line-height: 1.3;
   }
 
   input:not([type="checkbox"]):not([type="radio"]),
@@ -33,23 +39,27 @@ label {
     width: 100%;
   }
 
+  textarea {
+    min-height: 100px;
+  }
+
   .label-button {
     display: inline-block;
     padding: 3px 9px;
     border-radius: 3px;
-    line-height: 30px;
+    line-height: 1.5;
     cursor: pointer;
     user-select: none;
     font-size: 80%;
     font-weight: normal;
     float: right;
     cursor: pointer;
-    line-height: 80% !important;
+    line-height: 0.85 !important;
     padding: 3px 3px 5px;
 
     &.small {
       font-size: 80%;
-      line-height: 25px;
+      line-height: 0.8;
     }
   }
 
@@ -57,18 +67,18 @@ label {
     display: inline-block;
     padding: 3px 9px;
     border-radius: 3px;
-    line-height: 30px;
+    line-height: 1.5;
     cursor: pointer;
     user-select: none;
     font-size: 70%;
     font-weight: normal;
     cursor: pointer;
-    line-height: 70% !important;
+    line-height: 0.8 !important;
     padding: 2px 2px 4px;
 
     &.small {
       font-size: 80%;
-      line-height: 25px;
+      line-height: 0.8;
     }
   }
 }
@@ -81,11 +91,15 @@ ul {
   display: inline-block;
   padding: 3px 9px;
   border-radius: 3px;
-  line-height: 30px;
+  line-height: 1.5;
 
   &.small {
     font-size: 80%;
-    line-height: 25px;
+    line-height: 1.3;
+  }
+
+  &+.tag {
+    margin-top: 5px;
   }
 }
 
@@ -95,24 +109,28 @@ span .tag {
   display: inline-block;
   padding: 3px 9px;
   border-radius: 3px;
-  line-height: 30px;
+  line-height: 1.5;
 
   &.small {
     font-size: 80%;
-    line-height: 25px;
+    line-height: 1.3;
   }
   
   &+.tag {
     border-left: none;
     border-radius: 0 3px 3px 0;
   }
+
+  &+span .tag {
+    margin-top: 5px;
+  }
 }
 
 .button {
   display: inline-block;
   padding: 3px 9px;
   border-radius: 3px;
-  line-height: 30px;
+  line-height: 1.5;
   cursor: pointer;
   user-select: none;
   text-decoration: none;
@@ -120,7 +138,11 @@ span .tag {
 
   &.small {
     font-size: 80%;
-    line-height: 25px;
+    line-height: 1.3;
+  }
+
+  &+.button {
+    margin-top: 5px;
   }
 }
 

src/scss/mobile/_containers.scss

@@ -1,8 +1,8 @@
 @media (max-width: 750px) {
 
 html, body {
-  font-size: 90%;
+  font-size: 12pt;
-  line-height: 90%;
+  line-height: 1;
 }
 
 header {
@@ -17,7 +17,6 @@ main {
   #sideColumn {
     display: block;
     width: 0;
-    height: block;
     margin: 0;
     overflow: visible;
   }

src/scss/mobile/_structure.scss

@@ -2,7 +2,7 @@
   
 #top {
   #title {
-    font-size: 13pt;
+    width: 150px;
     margin-right: 10px;
   }
 
@@ -27,12 +27,13 @@
   }
 }
 
+$mobile-word-form-size: 32px;
 #mobileWordFormShow {
   position: fixed;
-  top: $header-height;
+  top: $header-height - ($mobile-word-form-size / 2);
   left: 0;
-  width: 32px;
+  width: $mobile-word-form-size;
-  height: 32px;
+  height: $mobile-word-form-size;
   display: block;
   border-radius: 0 3px 3px 0;
   font-size: 30px;
@@ -48,10 +49,15 @@
   display: none;
   width: 95%;
   max-width: unset;
-  top: $header-height + 32px;
+  max-height: 85%;
+  top: $header-height + ($mobile-word-form-size / 2);
   left: 0;
   right: 3%;
   z-index: 1;
+
+  label:not(:last-child) {
+    margin-bottom: 10px;
+  }
 }
 
 #detailsSection {
@@ -60,7 +66,9 @@
   }
 
   #detailsPanel {
+    width: 100%;
     max-height: 300px;
+    padding: 10px 5px;
   }
 }