Add Custom CSS field
This commit is contained in:
parent
f9fa6a178d
commit
9ca6ef15d7
|
@ -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(),
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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'],
|
||||
|
|
|
@ -281,6 +281,10 @@ $nav-font-height: 16px;
|
|||
width: 100%;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
#editCustomCSS {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.ipa-table-modal,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;">
|
||||
|
|
Loading…
Reference in New Issue