From 9ca6ef15d70e0660ab7fefb2d9a67c12bd3600fa Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Wed, 10 Jul 2019 14:59:37 -0600 Subject: [PATCH] Add Custom CSS field --- src/constants.js | 12 ++---------- src/js/account/setupListeners.js | 2 ++ src/js/dictionaryManagement.js | 7 +++++-- src/js/migration.js | 2 +- src/js/render/index.js | 15 +++++++++++++++ src/php/api/Dictionary.php | 4 ++++ src/scss/_structure.scss | 4 ++++ src/structure.sql | 1 + template-index.html | 3 +++ 9 files changed, 37 insertions(+), 13 deletions(-) diff --git a/src/constants.js b/src/constants.js index 4b193a3..516e246 100644 --- a/src/constants.js +++ b/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(), diff --git a/src/js/account/setupListeners.js b/src/js/account/setupListeners.js index d8fec90..20ccb11 100644 --- a/src/js/account/setupListeners.js +++ b/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(); } diff --git a/src/js/dictionaryManagement.js b/src/js/dictionaryManagement.js index aeebc14..85ac09d 100644 --- a/src/js/dictionaryManagement.js +++ b/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); diff --git a/src/js/migration.js b/src/js/migration.js index d092072..9599422 100644 --- a/src/js/migration.js +++ b/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; diff --git a/src/js/render/index.js b/src/js/render/index.js index d2c8c52..e2996a7 100644 --- a/src/js/render/index.js +++ b/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; + } +} diff --git a/src/php/api/Dictionary.php b/src/php/api/Dictionary.php index 7660e3d..990beae 100644 --- a/src/php/api/Dictionary.php +++ b/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'], diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss index c9598dd..2848da9 100644 --- a/src/scss/_structure.scss +++ b/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, diff --git a/src/structure.sql b/src/structure.sql index a0a6545..b77ac6f 100644 --- a/src/structure.sql +++ b/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, diff --git a/template-index.html b/template-index.html index 2ce61dd..ba785d6 100644 --- a/template-index.html +++ b/template-index.html @@ -365,6 +365,9 @@ ou=ow"> +