Add Custom CSS field

src/constants.js

@@ -1,6 +1,6 @@
 import { getTimestampInSeconds } from "./helpers";
 
-export const MIGRATE_VERSION = '2.0.2';
+export const MIGRATE_VERSION = '2.1.0';
 export const DEFAULT_DICTIONARY = {
   name: 'New',
   specification: 'Dictionary',
@@ -27,15 +27,6 @@ export const DEFAULT_DICTIONARY = {
     grammar: {
       notes: '',
     },
-    custom: {
-      css: '',
-      // tabs: [
-        // {
-        //   name: 'Example Tab',
-        //   content: `This is an _example_ tab to show how **tabs** work with [Markdown](${ MARKDOWN_LINK })!`,
-        // }
-      // ],
-    },
   },
   words: [
     /* {
@@ -52,6 +43,7 @@ export const DEFAULT_DICTIONARY = {
     caseSensitive: false,
     sortByDefinition: false,
     theme: 'default',
+    customCSS: '',
     isPublic: false,
   },
   lastUpdated: getTimestampInSeconds(),

src/js/account/setupListeners.js

@@ -3,6 +3,7 @@ import { setCookie } from "../StackOverflow/cookie";
 import { changeDictionary, createNewDictionary } from "./dictionaryManagement";
 import { addMessage } from "../utilities";
 import { renderForgotPasswordForm } from "./passwordReset";
+import { setupMaximizeButtons } from "../setupListeners";
 
 export function setupLoginModal(modal) {
   const closeElements = modal.querySelectorAll('.modal-background, .close-button');
@@ -73,4 +74,5 @@ export function setupMakePublic() {
     document.execCommand('copy');
     addMessage('Copied public link to clipboard', 3000);
   });
+  setupMaximizeButtons();
 }

src/js/dictionaryManagement.js

@@ -1,6 +1,6 @@
 import papa from 'papaparse';
 import { renderDictionaryDetails, renderPartsOfSpeech } from "./render/details";
-import { renderAll, renderTheme } from "./render";
+import { renderAll, renderTheme, renderCustomCSS } from "./render";
 import { removeTags, cloneObject, getTimestampInSeconds, download, slugify } from "../helpers";
 import { LOCAL_STORAGE_KEY, DEFAULT_DICTIONARY } from "../constants";
 import { addMessage, getNextId, hasToken, objectValuesAreDifferent } from "./utilities";
@@ -16,7 +16,7 @@ export function openEditModal() {
   const { name, specification, description, partsOfSpeech, alphabeticalOrder } = window.currentDictionary;
   const { phonology, phonotactics, orthography, grammar } = window.currentDictionary.details;
   const { consonants, vowels, blends } = phonology;
-  const { allowDuplicates, caseSensitive, sortByDefinition, theme, isPublic } = window.currentDictionary.settings;
+  const { allowDuplicates, caseSensitive, sortByDefinition, theme, customCSS, isPublic } = window.currentDictionary.settings;
   
   document.getElementById('editName').value = name;
   document.getElementById('editSpecification').value = specification;
@@ -43,6 +43,7 @@ export function openEditModal() {
   if (allowDuplicates) document.getElementById('editCaseSensitive').disabled = true;
   document.getElementById('editSortByDefinition').checked = sortByDefinition;
   document.getElementById('editTheme').value = theme;
+  document.getElementById('editCustomCSS').value = customCSS;
   if (hasToken()) {
     document.getElementById('editIsPublic').checked = isPublic;
   }
@@ -83,6 +84,7 @@ export function saveEditModal() {
   updatedDictionary.settings.caseSensitive = document.getElementById('editCaseSensitive').checked;
   updatedDictionary.settings.sortByDefinition = document.getElementById('editSortByDefinition').checked;
   updatedDictionary.settings.theme = document.getElementById('editTheme').value;
+  updatedDictionary.settings.customCSS = removeTags(document.getElementById('editCustomCSS').value.trim());
 
   if (hasToken()) {
     updatedDictionary.settings.isPublic = document.getElementById('editIsPublic').checked;
@@ -94,6 +96,7 @@ export function saveEditModal() {
     window.currentDictionary = Object.assign(window.currentDictionary, updatedDictionary);
 
     renderTheme();
+    renderCustomCSS();
     renderDictionaryDetails();
     renderPartsOfSpeech();
     sortWords(true);

src/js/migration.js

@@ -112,7 +112,7 @@ export function migrateDictionary() {
         window.currentDictionary.details.phonotactics.notes = window.currentDictionary.details.phonotactics.exceptions;
         delete window.currentDictionary.details.phonotactics.exceptions;
         window.currentDictionary.details.orthography.translations = [];
-        // Add window.currentDictionary.custom.css = '';
+        window.currentDictionary.settings.customCSS = '';
         window.currentDictionary = Object.assign({}, DEFAULT_DICTIONARY, window.currentDictionary);
         window.currentDictionary.version = MIGRATE_VERSION;
         migrated = true;

src/js/render/index.js

@@ -3,6 +3,7 @@ import { renderWords } from './words';
 
 export function renderAll() {
   renderTheme();
+  renderCustomCSS();
   renderDictionaryDetails();
   renderPartsOfSpeech();
   renderWords();
@@ -12,3 +13,17 @@ export function renderTheme() {
   const { theme } = window.currentDictionary.settings;
   document.body.id = theme + 'Theme';
 }
+
+export function renderCustomCSS() {
+  const { customCSS } = window.currentDictionary.settings;
+  const stylingId = 'customCSS';
+  const stylingElement = document.getElementById(stylingId);
+  if (!stylingElement) {
+    const styling = document.createElement('style');
+    styling.id = stylingId;
+    styling.innerHTML = customCSS;
+    document.body.appendChild(styling);
+  } else {
+    stylingElement.innerHTML = customCSS;
+  }
+}

src/php/api/Dictionary.php

@@ -132,6 +132,7 @@ VALUES ($new_id, ?, ?, ?, ?, ?, ?)";
             'caseSensitive' => $result['case_sensitive'] === '1' ? true : false,
             'sortByDefinition' => $result['sort_by_definition'] === '1' ? true : false,
             'theme' => $result['theme'],
+            'customCSS' => $result['custom_css'],
             'isPublic' => $result['is_public'] === '1' ? true : false,
           ),
           'lastUpdated' => is_null($result['last_updated']) ? $result['created_on'] : $result['last_updated'],
@@ -310,6 +311,7 @@ VALUES ($new_id, ?, ?, ?, ?, ?, ?)";
           'caseSensitive' => $result['case_sensitive'] === '1' ? true : false,
           'sortByDefinition' => $result['sort_by_definition'] === '1' ? true : false,
           'theme' => $result['theme'],
+          'customCSS' => $result['custom_css'],
           'isPublic' => $result['is_public'] === '1' ? true : false,
         ),
         'lastUpdated' => is_null($result['last_updated']) ? $result['created_on'] : $result['last_updated'],
@@ -328,6 +330,7 @@ SET name=:name,
   case_sensitive=:case_sensitive,
   sort_by_definition=:sort_by_definition,
   theme=:theme,
+  custom_css=:custom_css,
   is_public=:is_public,
   last_updated=:last_updated,
   created_on=:created_on
@@ -342,6 +345,7 @@ WHERE user=$user AND id=$dictionary";
       ':case_sensitive' => $dictionary_object['settings']['caseSensitive'] ? 1 : 0,
       ':sort_by_definition' => $dictionary_object['settings']['sortByDefinition'] ? 1 : 0,
       ':theme' => $dictionary_object['settings']['theme'],
+      ':custom_css' => $dictionary_object['settings']['customCSS'],
       ':is_public' => $dictionary_object['settings']['isPublic'] ? 1 : 0,
       ':last_updated' => $dictionary_object['lastUpdated'],
       ':created_on' => $dictionary_object['createdOn'],

src/scss/_structure.scss

@@ -281,6 +281,10 @@ $nav-font-height: 16px;
     width: 100%;
     height: 240px;
   }
+
+  #editCustomCSS {
+    font-family: 'Courier New', Courier, monospace;
+  }
 }
 
 .ipa-table-modal,

src/structure.sql

@@ -17,6 +17,7 @@ CREATE TABLE IF NOT EXISTS `dictionaries` (
   `case_sensitive` tinyint(1) NOT NULL DEFAULT 0,
   `sort_by_definition` tinyint(1) NOT NULL DEFAULT 0,
   `theme` varchar(20) COLLATE utf8_unicode_ci NOT NULL DEFAULT 'default',
+  `custom_css` text COLLATE utf8_unicode_ci NOT NULL COMMENT 'CSS',
   `is_public` tinyint(1) NOT NULL DEFAULT 0,
   `last_updated` int(11) DEFAULT NULL,
   `created_on` int(11) NOT NULL,

template-index.html

@@ -365,6 +365,9 @@ ou=ow"></textarea>
             <option value="grape">Grape</option>
           </select>
         </label>
+        <label>Custom Styling <small>(CSS Only)</small><a class="label-button maximize-button">Maximize</a><br>
+          <textarea id="editCustomCSS" placeholder=".orthographic-translation {font-family: serif;}"></textarea>
+        </label>
       </section>
 
       <section id="editActionsTab" style="display:none;">