Add Custom CSS field

This commit is contained in:
Robbie Antenesse 2019-07-10 14:59:37 -06:00
parent 885f891053
commit 8fb03834c8
9 changed files with 37 additions and 13 deletions

View File

@ -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(),

View File

@ -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();
}

View File

@ -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);

View File

@ -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;

View File

@ -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;
}
}

View File

@ -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'],

View File

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

View File

@ -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,

View File

@ -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;">