mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 01:26:13 -04:00
refactor: lint
This commit is contained in:
Lucas Larroche
parent
672b67896c
commit
7487498805
53 changed files with 1789 additions and 1078 deletions
|
|
@ -6,16 +6,16 @@
|
|||
*/
|
||||
|
||||
// Imports
|
||||
import themeSwitcher from './src/theme-switcher.js';
|
||||
import toggleNavigation from './src/toggle-navigation';
|
||||
import themeSwitcher from "./src/theme-switcher.js"
|
||||
import toggleNavigation from "./src/toggle-navigation"
|
||||
|
||||
// Theme switcher
|
||||
themeSwitcher.addButton({
|
||||
tag: 'BUTTON',
|
||||
class: 'contrast switcher theme-switcher',
|
||||
target: 'body',
|
||||
});
|
||||
themeSwitcher.init();
|
||||
tag: "BUTTON",
|
||||
class: "contrast switcher theme-switcher",
|
||||
target: "body",
|
||||
})
|
||||
themeSwitcher.init()
|
||||
|
||||
// Toggle navigation
|
||||
toggleNavigation.init();
|
||||
toggleNavigation.init()
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
*/
|
||||
|
||||
// Imports
|
||||
import materialDesignColors from './src/material-design-colors.js';
|
||||
import colorPicker from './src/color-picker.js';
|
||||
import materialDesignColors from "./src/material-design-colors.js"
|
||||
import colorPicker from "./src/color-picker.js"
|
||||
|
||||
// Color Picker
|
||||
colorPicker.colors = materialDesignColors;
|
||||
colorPicker.init();
|
||||
colorPicker.colors = materialDesignColors
|
||||
colorPicker.init()
|
||||
|
|
|
|||
|
|
@ -6,33 +6,32 @@
|
|||
*/
|
||||
|
||||
const grid = {
|
||||
|
||||
// Config
|
||||
buttons: {
|
||||
text: {
|
||||
add: 'Add column',
|
||||
remove: 'Remove column',
|
||||
add: "Add column",
|
||||
remove: "Remove column",
|
||||
},
|
||||
target: '#grid article',
|
||||
target: "#grid article",
|
||||
},
|
||||
grid: {
|
||||
current: 4,
|
||||
min: 1,
|
||||
max: 12,
|
||||
gridTarget: '#grid .grid',
|
||||
codeTarget: '#grid pre code',
|
||||
gridTarget: "#grid .grid",
|
||||
codeTarget: "#grid pre code",
|
||||
},
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.addButtons();
|
||||
this.generateGrid();
|
||||
this.addButtons()
|
||||
this.generateGrid()
|
||||
},
|
||||
|
||||
// Add buttons
|
||||
addButtons() {
|
||||
// Insert buttons
|
||||
let buttons = document.createElement('P');
|
||||
let buttons = document.createElement("P")
|
||||
buttons.innerHTML = `
|
||||
<button class="secondary add">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||||
|
|
@ -47,54 +46,62 @@ const grid = {
|
|||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
${this.buttons.text.remove}
|
||||
</button>`;
|
||||
document.querySelector(this.buttons.target).before(buttons);
|
||||
</button>`
|
||||
document.querySelector(this.buttons.target).before(buttons)
|
||||
|
||||
// Add button listener
|
||||
document.querySelector('#grid button.add').addEventListener('click', () => {
|
||||
this.addColumn();
|
||||
}, false);
|
||||
document.querySelector("#grid button.add").addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
this.addColumn()
|
||||
},
|
||||
false
|
||||
)
|
||||
|
||||
// Remove button listener
|
||||
document.querySelector('#grid button.remove').addEventListener('click', () => {
|
||||
this.removeColumn();
|
||||
}, false);
|
||||
document.querySelector("#grid button.remove").addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
this.removeColumn()
|
||||
},
|
||||
false
|
||||
)
|
||||
},
|
||||
|
||||
// Generate grid
|
||||
generateGrid() {
|
||||
// Config
|
||||
let htmlInner = '';
|
||||
let codeInner = '<<b>div</b> <i>class</i>=<u>"grid"</u>>\n';
|
||||
let htmlInner = ""
|
||||
let codeInner = '<<b>div</b> <i>class</i>=<u>"grid"</u>>\n'
|
||||
|
||||
// Build
|
||||
for (let col = 0; col < this.grid.current; col++) {
|
||||
htmlInner += '<div>' + (col + 1) + '</div>';
|
||||
codeInner += ' <<b>div</b>>' + (col + 1) + '</<b>div</b>>\n';
|
||||
htmlInner += "<div>" + (col + 1) + "</div>"
|
||||
codeInner += " <<b>div</b>>" + (col + 1) + "</<b>div</b>>\n"
|
||||
}
|
||||
|
||||
// Display
|
||||
codeInner += '</<b>div</b>>';
|
||||
document.querySelector(this.grid.gridTarget).innerHTML = htmlInner;
|
||||
document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
|
||||
codeInner += "</<b>div</b>>"
|
||||
document.querySelector(this.grid.gridTarget).innerHTML = htmlInner
|
||||
document.querySelector(this.grid.codeTarget).innerHTML = codeInner
|
||||
},
|
||||
|
||||
// Add column
|
||||
addColumn() {
|
||||
if (this.grid.current < this.grid.max) {
|
||||
this.grid.current++;
|
||||
this.generateGrid();
|
||||
this.grid.current++
|
||||
this.generateGrid()
|
||||
}
|
||||
},
|
||||
|
||||
// Remove column
|
||||
removeColumn() {
|
||||
if (this.grid.current > this.grid.min) {
|
||||
this.grid.current--;
|
||||
this.generateGrid();
|
||||
this.grid.current--
|
||||
this.generateGrid()
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// Init
|
||||
grid.init();
|
||||
grid.init()
|
||||
|
|
|
|||
|
|
@ -6,90 +6,96 @@
|
|||
*/
|
||||
|
||||
// Config
|
||||
const isOpenClass = 'modal-is-open';
|
||||
const openingClass = 'modal-is-opening';
|
||||
const closingClass = 'modal-is-closing';
|
||||
const animationDuration = 400; // ms
|
||||
let visibleModal = null;
|
||||
|
||||
const isOpenClass = "modal-is-open"
|
||||
const openingClass = "modal-is-opening"
|
||||
const closingClass = "modal-is-closing"
|
||||
const animationDuration = 400 // ms
|
||||
let visibleModal = null
|
||||
|
||||
// Toggle modal
|
||||
const toggleModal = event => {
|
||||
event.preventDefault();
|
||||
const modal = document.getElementById(event.currentTarget.getAttribute('data-target'));
|
||||
(typeof(modal) != 'undefined' && modal != null)
|
||||
&& isModalOpen(modal) ? closeModal(modal) : openModal(modal)
|
||||
event.preventDefault()
|
||||
const modal = document.getElementById(
|
||||
event.currentTarget.getAttribute("data-target")
|
||||
)
|
||||
typeof modal != "undefined" && modal != null && isModalOpen(modal)
|
||||
? closeModal(modal)
|
||||
: openModal(modal)
|
||||
}
|
||||
|
||||
// Is modal open
|
||||
const isModalOpen = modal => {
|
||||
return modal.hasAttribute('open') && modal.getAttribute('open') != 'false' ? true : false;
|
||||
return modal.hasAttribute("open") && modal.getAttribute("open") != "false"
|
||||
? true
|
||||
: false
|
||||
}
|
||||
|
||||
// Open modal
|
||||
const openModal = modal => {
|
||||
if (isScrollbarVisible()) {
|
||||
document.documentElement.style.setProperty('--scrollbar-width', `${getScrollbarWidth()}px`);
|
||||
document.documentElement.style.setProperty(
|
||||
"--scrollbar-width",
|
||||
`${getScrollbarWidth()}px`
|
||||
)
|
||||
}
|
||||
document.documentElement.classList.add(isOpenClass, openingClass);
|
||||
document.documentElement.classList.add(isOpenClass, openingClass)
|
||||
setTimeout(() => {
|
||||
visibleModal = modal;
|
||||
document.documentElement.classList.remove(openingClass);
|
||||
}, animationDuration);
|
||||
modal.setAttribute('open', true);
|
||||
visibleModal = modal
|
||||
document.documentElement.classList.remove(openingClass)
|
||||
}, animationDuration)
|
||||
modal.setAttribute("open", true)
|
||||
}
|
||||
|
||||
// Close modal
|
||||
const closeModal = modal => {
|
||||
visibleModal = null;
|
||||
document.documentElement.classList.add(closingClass);
|
||||
visibleModal = null
|
||||
document.documentElement.classList.add(closingClass)
|
||||
setTimeout(() => {
|
||||
document.documentElement.classList.remove(closingClass, isOpenClass);
|
||||
document.documentElement.style.removeProperty('--scrollbar-width');
|
||||
modal.removeAttribute('open');
|
||||
}, animationDuration);
|
||||
document.documentElement.classList.remove(closingClass, isOpenClass)
|
||||
document.documentElement.style.removeProperty("--scrollbar-width")
|
||||
modal.removeAttribute("open")
|
||||
}, animationDuration)
|
||||
}
|
||||
|
||||
// Close with a click outside
|
||||
document.addEventListener('click', event => {
|
||||
document.addEventListener("click", event => {
|
||||
if (visibleModal != null) {
|
||||
const modalContent = visibleModal.querySelector('article');
|
||||
const isClickInside = modalContent.contains(event.target);
|
||||
!isClickInside && closeModal(visibleModal);
|
||||
const modalContent = visibleModal.querySelector("article")
|
||||
const isClickInside = modalContent.contains(event.target)
|
||||
!isClickInside && closeModal(visibleModal)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// Close with Esc key
|
||||
document.addEventListener('keydown', event => {
|
||||
if (event.key === 'Escape' && visibleModal != null) {
|
||||
closeModal(visibleModal);
|
||||
document.addEventListener("keydown", event => {
|
||||
if (event.key === "Escape" && visibleModal != null) {
|
||||
closeModal(visibleModal)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
// Get scrollbar width
|
||||
const getScrollbarWidth = () => {
|
||||
|
||||
// Creating invisible container
|
||||
const outer = document.createElement('div');
|
||||
outer.style.visibility = 'hidden';
|
||||
outer.style.overflow = 'scroll'; // forcing scrollbar to appear
|
||||
outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
|
||||
document.body.appendChild(outer);
|
||||
const outer = document.createElement("div")
|
||||
outer.style.visibility = "hidden"
|
||||
outer.style.overflow = "scroll" // forcing scrollbar to appear
|
||||
outer.style.msOverflowStyle = "scrollbar" // needed for WinJS apps
|
||||
document.body.appendChild(outer)
|
||||
|
||||
// Creating inner element and placing it in the container
|
||||
const inner = document.createElement('div');
|
||||
outer.appendChild(inner);
|
||||
const inner = document.createElement("div")
|
||||
outer.appendChild(inner)
|
||||
|
||||
// Calculating difference between container's full width and the child width
|
||||
const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
|
||||
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
|
||||
|
||||
// Removing temporary elements from the DOM
|
||||
outer.parentNode.removeChild(outer);
|
||||
outer.parentNode.removeChild(outer)
|
||||
|
||||
return scrollbarWidth;
|
||||
return scrollbarWidth
|
||||
}
|
||||
|
||||
// Is scrollbar visible
|
||||
const isScrollbarVisible = () => {
|
||||
return document.body.scrollHeight > screen.height;
|
||||
return document.body.scrollHeight > screen.height
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,107 +6,112 @@
|
|||
*/
|
||||
|
||||
export const colorPicker = {
|
||||
|
||||
// Config
|
||||
colors: null,
|
||||
buttonsTarget: '#customization article[data-theme="generated"]',
|
||||
selectorButton: '#customization button[data-color]',
|
||||
selectorSection: '#customization',
|
||||
selectorButton: "#customization button[data-color]",
|
||||
selectorSection: "#customization",
|
||||
buttons: null,
|
||||
generatedStyles: null,
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.generateButtons();
|
||||
this.setActiveButton('pink');
|
||||
this.generateTheme('pink');
|
||||
this.generateButtons()
|
||||
this.setActiveButton("pink")
|
||||
this.generateTheme("pink")
|
||||
},
|
||||
|
||||
// Generate Buttons
|
||||
generateButtons() {
|
||||
// Init
|
||||
let innerButtons = '';
|
||||
let innerStyles = '';
|
||||
let innerButtons = ""
|
||||
let innerStyles = ""
|
||||
|
||||
// Loop colors
|
||||
for (const color in this.colors) {
|
||||
// Buttons
|
||||
innerButtons += `<button data-color="${color}" aria-label="Activate ${color} theme"></button>`;
|
||||
innerButtons += `<button data-color="${color}" aria-label="Activate ${color} theme"></button>`
|
||||
|
||||
// Styles
|
||||
innerStyles += `
|
||||
button[data-color="${color}"] {
|
||||
background-color: ${this.colors[color]['600']};
|
||||
background-color: ${this.colors[color]["600"]};
|
||||
}
|
||||
[data-theme="light"] button[data-color="${color}"]:hover,
|
||||
[data-theme="light"] button[data-color="${color}"]:active,
|
||||
[data-theme="light"] button[data-color="${color}"]:focus {
|
||||
background-color: ${this.colors[color]['700']}; '
|
||||
background-color: ${this.colors[color]["700"]}; '
|
||||
}
|
||||
[data-theme="dark"] button[data-color="${color}"]:hover,
|
||||
[data-theme="dark"] button[data-color="${color}"]:active,
|
||||
[data-theme="dark"] button[data-color="${color}"]:focus {
|
||||
background-color: ${this.colors[color]['500']};
|
||||
}`;
|
||||
background-color: ${this.colors[color]["500"]};
|
||||
}`
|
||||
}
|
||||
|
||||
// Insert buttons
|
||||
let containerButtons = document.createElement('FIGURE');
|
||||
containerButtons.innerHTML = innerButtons;
|
||||
document.querySelector(this.buttonsTarget).before(containerButtons);
|
||||
let containerButtons = document.createElement("FIGURE")
|
||||
containerButtons.innerHTML = innerButtons
|
||||
document.querySelector(this.buttonsTarget).before(containerButtons)
|
||||
|
||||
// Buttons listeners
|
||||
this.buttons = document.querySelectorAll(this.selectorButton);
|
||||
this.buttons.forEach( button => {
|
||||
button.addEventListener('click', event => {
|
||||
let color = event.target.getAttribute('data-color');
|
||||
this.setActiveButton(color);
|
||||
this.generateTheme(color);
|
||||
}, false);
|
||||
});
|
||||
this.buttons = document.querySelectorAll(this.selectorButton)
|
||||
this.buttons.forEach(button => {
|
||||
button.addEventListener(
|
||||
"click",
|
||||
event => {
|
||||
let color = event.target.getAttribute("data-color")
|
||||
this.setActiveButton(color)
|
||||
this.generateTheme(color)
|
||||
},
|
||||
false
|
||||
)
|
||||
})
|
||||
|
||||
// Insert CSS Styles
|
||||
let containerStyles = document.createElement('STYLE');
|
||||
containerStyles.setAttribute('title', 'color-picker');
|
||||
this.generatedStyles = this.minifyCSS(innerStyles);
|
||||
containerStyles.innerHTML = this.generatedStyles;
|
||||
document.querySelector('head').appendChild(containerStyles);
|
||||
let containerStyles = document.createElement("STYLE")
|
||||
containerStyles.setAttribute("title", "color-picker")
|
||||
this.generatedStyles = this.minifyCSS(innerStyles)
|
||||
containerStyles.innerHTML = this.generatedStyles
|
||||
document.querySelector("head").appendChild(containerStyles)
|
||||
},
|
||||
|
||||
// Set active button
|
||||
setActiveButton(color) {
|
||||
// Remove all active states
|
||||
this.buttons.forEach( button => {
|
||||
button.removeAttribute('class');
|
||||
});
|
||||
this.buttons.forEach(button => {
|
||||
button.removeAttribute("class")
|
||||
})
|
||||
|
||||
// Set active state
|
||||
let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
|
||||
buttonPicked.setAttribute('class', 'picked');
|
||||
let buttonPicked = document.querySelector(
|
||||
this.selectorButton + '[data-color="' + color + '"]'
|
||||
)
|
||||
buttonPicked.setAttribute("class", "picked")
|
||||
},
|
||||
|
||||
// Set active button
|
||||
generateTheme(color) {
|
||||
let name = color;
|
||||
let data = this.colors[color];
|
||||
let name = color
|
||||
let data = this.colors[color]
|
||||
|
||||
// 1. Update name and colors in demo code
|
||||
let swaps = {
|
||||
'.name': name.charAt(0).toUpperCase() + name.substring(1) + ' ',
|
||||
'.c500': data[500],
|
||||
'.c600': data[600],
|
||||
'.c700': data[700],
|
||||
'.c600-outline-light': this.hexToRgbA(data[600], 0.125),
|
||||
'.c600-outline-dark': this.hexToRgbA(data[600], 0.25),
|
||||
'.inverse': data['inverse'],
|
||||
};
|
||||
".name": name.charAt(0).toUpperCase() + name.substring(1) + " ",
|
||||
".c500": data[500],
|
||||
".c600": data[600],
|
||||
".c700": data[700],
|
||||
".c600-outline-light": this.hexToRgbA(data[600], 0.125),
|
||||
".c600-outline-dark": this.hexToRgbA(data[600], 0.25),
|
||||
".inverse": data["inverse"],
|
||||
}
|
||||
|
||||
Object.keys(swaps).forEach( swap => {
|
||||
let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
|
||||
targets.forEach( target => {
|
||||
target.innerHTML = swaps[swap];
|
||||
});
|
||||
});
|
||||
Object.keys(swaps).forEach(swap => {
|
||||
let targets = document.querySelectorAll(this.selectorSection + " " + swap)
|
||||
targets.forEach(target => {
|
||||
target.innerHTML = swaps[swap]
|
||||
})
|
||||
})
|
||||
|
||||
// 2. Update CSS Styles
|
||||
const innerStyles = `
|
||||
|
|
@ -115,7 +120,7 @@ export const colorPicker = {
|
|||
--primary: ${data[600]};
|
||||
--primary-hover: ${data[700]};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], 0.125)};
|
||||
--primary-inverse: ${data['inverse']};
|
||||
--primary-inverse: ${data["inverse"]};
|
||||
}
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) [data-theme="generated"] {
|
||||
|
|
@ -123,7 +128,7 @@ export const colorPicker = {
|
|||
--primary: ${data[600]};
|
||||
--primary-hover: ${data[500]};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
|
||||
--primary-inverse: ${data['inverse']};
|
||||
--primary-inverse: ${data["inverse"]};
|
||||
}
|
||||
}
|
||||
[data-theme="dark"] [data-theme="generated"] {
|
||||
|
|
@ -131,43 +136,43 @@ export const colorPicker = {
|
|||
--primary: ${data[600]};
|
||||
--primary-hover: ${data[500]};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
|
||||
--primary-inverse: ${data['inverse']};
|
||||
--primary-inverse: ${data["inverse"]};
|
||||
}
|
||||
[data-theme="generated"] {
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
}`;
|
||||
}`
|
||||
|
||||
document.querySelector('style[title="color-picker"]').innerHTML =
|
||||
this.generatedStyles + this.minifyCSS(innerStyles);
|
||||
this.generatedStyles + this.minifyCSS(innerStyles)
|
||||
},
|
||||
|
||||
// Minify CSS
|
||||
minifyCSS(css) {
|
||||
return css.replace(/^ +/gm, '');
|
||||
return css.replace(/^ +/gm, "")
|
||||
},
|
||||
|
||||
// Hexadecimal to Rgba
|
||||
hexToRgbA(hex, alpha) {
|
||||
let c;
|
||||
let c
|
||||
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
|
||||
c = hex.substring(1).split('');
|
||||
c = hex.substring(1).split("")
|
||||
if (c.length == 3) {
|
||||
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||||
c = [c[0], c[0], c[1], c[1], c[2], c[2]]
|
||||
}
|
||||
c = '0x' + c.join('');
|
||||
c = "0x" + c.join("")
|
||||
return (
|
||||
'rgba(' +
|
||||
[(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') +
|
||||
', ' +
|
||||
"rgba(" +
|
||||
[(c >> 16) & 255, (c >> 8) & 255, c & 255].join(", ") +
|
||||
", " +
|
||||
alpha +
|
||||
')'
|
||||
);
|
||||
")"
|
||||
)
|
||||
}
|
||||
throw new Error('Bad Hex');
|
||||
throw new Error("Bad Hex")
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default colorPicker;
|
||||
export default colorPicker
|
||||
|
|
|
|||
|
|
@ -1,303 +1,303 @@
|
|||
// Source: https://material.io/design/color/the-color-system.html
|
||||
export const materialDesignColors = {
|
||||
red: {
|
||||
50: '#ffebee',
|
||||
100: '#ffcdd2',
|
||||
200: '#ef9a9a',
|
||||
300: '#e57373',
|
||||
400: '#ef5350',
|
||||
500: '#f44336',
|
||||
600: '#e53935',
|
||||
700: '#d32f2f',
|
||||
800: '#c62828',
|
||||
900: '#b71c1c',
|
||||
a100: '#ff8a80',
|
||||
a200: '#ff5252',
|
||||
a400: '#ff1744',
|
||||
a700: '#d50000',
|
||||
inverse: '#FFF',
|
||||
50: "#ffebee",
|
||||
100: "#ffcdd2",
|
||||
200: "#ef9a9a",
|
||||
300: "#e57373",
|
||||
400: "#ef5350",
|
||||
500: "#f44336",
|
||||
600: "#e53935",
|
||||
700: "#d32f2f",
|
||||
800: "#c62828",
|
||||
900: "#b71c1c",
|
||||
a100: "#ff8a80",
|
||||
a200: "#ff5252",
|
||||
a400: "#ff1744",
|
||||
a700: "#d50000",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
pink: {
|
||||
50: '#fce4ec',
|
||||
100: '#f8bbd0',
|
||||
200: '#f48fb1',
|
||||
300: '#f06292',
|
||||
400: '#ec407a',
|
||||
500: '#e91e63',
|
||||
600: '#d81b60',
|
||||
700: '#c2185b',
|
||||
800: '#ad1457',
|
||||
900: '#880e4f',
|
||||
a100: '#ff80ab',
|
||||
a200: '#ff4081',
|
||||
a400: '#f50057',
|
||||
a700: '#c51162',
|
||||
inverse: '#FFF',
|
||||
50: "#fce4ec",
|
||||
100: "#f8bbd0",
|
||||
200: "#f48fb1",
|
||||
300: "#f06292",
|
||||
400: "#ec407a",
|
||||
500: "#e91e63",
|
||||
600: "#d81b60",
|
||||
700: "#c2185b",
|
||||
800: "#ad1457",
|
||||
900: "#880e4f",
|
||||
a100: "#ff80ab",
|
||||
a200: "#ff4081",
|
||||
a400: "#f50057",
|
||||
a700: "#c51162",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
purple: {
|
||||
50: '#f3e5f5',
|
||||
100: '#e1bee7',
|
||||
200: '#ce93d8',
|
||||
300: '#ba68c8',
|
||||
400: '#ab47bc',
|
||||
500: '#9c27b0',
|
||||
600: '#8e24aa',
|
||||
700: '#7b1fa2',
|
||||
800: '#6a1b9a',
|
||||
900: '#4a148c',
|
||||
a100: '#ea80fc',
|
||||
a200: '#e040fb',
|
||||
a400: '#d500f9',
|
||||
a700: '#aa00ff',
|
||||
inverse: '#FFF',
|
||||
50: "#f3e5f5",
|
||||
100: "#e1bee7",
|
||||
200: "#ce93d8",
|
||||
300: "#ba68c8",
|
||||
400: "#ab47bc",
|
||||
500: "#9c27b0",
|
||||
600: "#8e24aa",
|
||||
700: "#7b1fa2",
|
||||
800: "#6a1b9a",
|
||||
900: "#4a148c",
|
||||
a100: "#ea80fc",
|
||||
a200: "#e040fb",
|
||||
a400: "#d500f9",
|
||||
a700: "#aa00ff",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
'deep-purple': {
|
||||
50: '#ede7f6',
|
||||
100: '#d1c4e9',
|
||||
200: '#b39ddb',
|
||||
300: '#9575cd',
|
||||
400: '#7e57c2',
|
||||
500: '#673ab7',
|
||||
600: '#5e35b1',
|
||||
700: '#512da8',
|
||||
800: '#4527a0',
|
||||
900: '#311b92',
|
||||
a100: '#b388ff',
|
||||
a200: '#7c4dff',
|
||||
a400: '#651fff',
|
||||
a700: '#6200ea',
|
||||
inverse: '#FFF',
|
||||
"deep-purple": {
|
||||
50: "#ede7f6",
|
||||
100: "#d1c4e9",
|
||||
200: "#b39ddb",
|
||||
300: "#9575cd",
|
||||
400: "#7e57c2",
|
||||
500: "#673ab7",
|
||||
600: "#5e35b1",
|
||||
700: "#512da8",
|
||||
800: "#4527a0",
|
||||
900: "#311b92",
|
||||
a100: "#b388ff",
|
||||
a200: "#7c4dff",
|
||||
a400: "#651fff",
|
||||
a700: "#6200ea",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
indigo: {
|
||||
50: '#e8eaf6',
|
||||
100: '#c5cae9',
|
||||
200: '#9fa8da',
|
||||
300: '#7986cb',
|
||||
400: '#5c6bc0',
|
||||
500: '#3f51b5',
|
||||
600: '#3949ab',
|
||||
700: '#303f9f',
|
||||
800: '#283593',
|
||||
900: '#1a237e',
|
||||
a100: '#8c9eff',
|
||||
a200: '#536dfe',
|
||||
a400: '#3d5afe',
|
||||
a700: '#304ffe',
|
||||
inverse: '#FFF',
|
||||
50: "#e8eaf6",
|
||||
100: "#c5cae9",
|
||||
200: "#9fa8da",
|
||||
300: "#7986cb",
|
||||
400: "#5c6bc0",
|
||||
500: "#3f51b5",
|
||||
600: "#3949ab",
|
||||
700: "#303f9f",
|
||||
800: "#283593",
|
||||
900: "#1a237e",
|
||||
a100: "#8c9eff",
|
||||
a200: "#536dfe",
|
||||
a400: "#3d5afe",
|
||||
a700: "#304ffe",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
blue: {
|
||||
50: '#e3f2fd',
|
||||
100: '#bbdefb',
|
||||
200: '#90caf9',
|
||||
300: '#64b5f6',
|
||||
400: '#42a5f5',
|
||||
500: '#2196f3',
|
||||
600: '#1e88e5',
|
||||
700: '#1976d2',
|
||||
800: '#1565c0',
|
||||
900: '#0d47a1',
|
||||
a100: '#82b1ff',
|
||||
a200: '#448aff',
|
||||
a400: '#2979ff',
|
||||
a700: '#2962ff',
|
||||
inverse: '#FFF',
|
||||
50: "#e3f2fd",
|
||||
100: "#bbdefb",
|
||||
200: "#90caf9",
|
||||
300: "#64b5f6",
|
||||
400: "#42a5f5",
|
||||
500: "#2196f3",
|
||||
600: "#1e88e5",
|
||||
700: "#1976d2",
|
||||
800: "#1565c0",
|
||||
900: "#0d47a1",
|
||||
a100: "#82b1ff",
|
||||
a200: "#448aff",
|
||||
a400: "#2979ff",
|
||||
a700: "#2962ff",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
'light-blue': {
|
||||
50: '#e1f5fe',
|
||||
100: '#b3e5fc',
|
||||
200: '#81d4fa',
|
||||
300: '#4fc3f7',
|
||||
400: '#29b6f6',
|
||||
500: '#03a9f4',
|
||||
600: '#039be5',
|
||||
700: '#0288d1',
|
||||
800: '#0277bd',
|
||||
900: '#01579b',
|
||||
a100: '#80d8ff',
|
||||
a200: '#40c4ff',
|
||||
a400: '#00b0ff',
|
||||
a700: '#0091ea',
|
||||
inverse: '#FFF',
|
||||
"light-blue": {
|
||||
50: "#e1f5fe",
|
||||
100: "#b3e5fc",
|
||||
200: "#81d4fa",
|
||||
300: "#4fc3f7",
|
||||
400: "#29b6f6",
|
||||
500: "#03a9f4",
|
||||
600: "#039be5",
|
||||
700: "#0288d1",
|
||||
800: "#0277bd",
|
||||
900: "#01579b",
|
||||
a100: "#80d8ff",
|
||||
a200: "#40c4ff",
|
||||
a400: "#00b0ff",
|
||||
a700: "#0091ea",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
cyan: {
|
||||
50: '#e0f7fa',
|
||||
100: '#b2ebf2',
|
||||
200: '#80deea',
|
||||
300: '#4dd0e1',
|
||||
400: '#26c6da',
|
||||
500: '#00bcd4',
|
||||
600: '#00acc1',
|
||||
700: '#0097a7',
|
||||
800: '#00838f',
|
||||
900: '#006064',
|
||||
a100: '#84ffff',
|
||||
a200: '#18ffff',
|
||||
a400: '#00e5ff',
|
||||
a700: '#00b8d4',
|
||||
inverse: '#FFF',
|
||||
50: "#e0f7fa",
|
||||
100: "#b2ebf2",
|
||||
200: "#80deea",
|
||||
300: "#4dd0e1",
|
||||
400: "#26c6da",
|
||||
500: "#00bcd4",
|
||||
600: "#00acc1",
|
||||
700: "#0097a7",
|
||||
800: "#00838f",
|
||||
900: "#006064",
|
||||
a100: "#84ffff",
|
||||
a200: "#18ffff",
|
||||
a400: "#00e5ff",
|
||||
a700: "#00b8d4",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
teal: {
|
||||
50: '#e0f2f1',
|
||||
100: '#b2dfdb',
|
||||
200: '#80cbc4',
|
||||
300: '#4db6ac',
|
||||
400: '#26a69a',
|
||||
500: '#009688',
|
||||
600: '#00897b',
|
||||
700: '#00796b',
|
||||
800: '#00695c',
|
||||
900: '#004d40',
|
||||
a100: '#a7ffeb',
|
||||
a200: '#64ffda',
|
||||
a400: '#1de9b6',
|
||||
a700: '#00bfa5',
|
||||
inverse: '#FFF',
|
||||
50: "#e0f2f1",
|
||||
100: "#b2dfdb",
|
||||
200: "#80cbc4",
|
||||
300: "#4db6ac",
|
||||
400: "#26a69a",
|
||||
500: "#009688",
|
||||
600: "#00897b",
|
||||
700: "#00796b",
|
||||
800: "#00695c",
|
||||
900: "#004d40",
|
||||
a100: "#a7ffeb",
|
||||
a200: "#64ffda",
|
||||
a400: "#1de9b6",
|
||||
a700: "#00bfa5",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
green: {
|
||||
50: '#e8f5e9',
|
||||
100: '#c8e6c9',
|
||||
200: '#a5d6a7',
|
||||
300: '#81c784',
|
||||
400: '#66bb6a',
|
||||
500: '#4caf50',
|
||||
600: '#43a047',
|
||||
700: '#388e3c',
|
||||
800: '#2e7d32',
|
||||
900: '#1b5e20',
|
||||
a100: '#b9f6ca',
|
||||
a200: '#69f0ae',
|
||||
a400: '#00e676',
|
||||
a700: '#00c853',
|
||||
inverse: '#FFF',
|
||||
50: "#e8f5e9",
|
||||
100: "#c8e6c9",
|
||||
200: "#a5d6a7",
|
||||
300: "#81c784",
|
||||
400: "#66bb6a",
|
||||
500: "#4caf50",
|
||||
600: "#43a047",
|
||||
700: "#388e3c",
|
||||
800: "#2e7d32",
|
||||
900: "#1b5e20",
|
||||
a100: "#b9f6ca",
|
||||
a200: "#69f0ae",
|
||||
a400: "#00e676",
|
||||
a700: "#00c853",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
'light-green': {
|
||||
50: '#f1f8e9',
|
||||
100: '#dcedc8',
|
||||
200: '#c5e1a5',
|
||||
300: '#aed581',
|
||||
400: '#9ccc65',
|
||||
500: '#8bc34a',
|
||||
600: '#7cb342',
|
||||
700: '#689f38',
|
||||
800: '#558b2f',
|
||||
900: '#33691e',
|
||||
a100: '#ccff90',
|
||||
a200: '#b2ff59',
|
||||
a400: '#76ff03',
|
||||
a700: '#64dd17',
|
||||
inverse: '#FFF',
|
||||
"light-green": {
|
||||
50: "#f1f8e9",
|
||||
100: "#dcedc8",
|
||||
200: "#c5e1a5",
|
||||
300: "#aed581",
|
||||
400: "#9ccc65",
|
||||
500: "#8bc34a",
|
||||
600: "#7cb342",
|
||||
700: "#689f38",
|
||||
800: "#558b2f",
|
||||
900: "#33691e",
|
||||
a100: "#ccff90",
|
||||
a200: "#b2ff59",
|
||||
a400: "#76ff03",
|
||||
a700: "#64dd17",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
lime: {
|
||||
50: '#f9fbe7',
|
||||
100: '#f0f4c3',
|
||||
200: '#e6ee9c',
|
||||
300: '#dce775',
|
||||
400: '#d4e157',
|
||||
500: '#cddc39',
|
||||
600: '#c0ca33',
|
||||
700: '#afb42b',
|
||||
800: '#9e9d24',
|
||||
900: '#827717',
|
||||
a100: '#f4ff81',
|
||||
a200: '#eeff41',
|
||||
a400: '#c6ff00',
|
||||
a700: '#aeea00',
|
||||
inverse: 'rgba(0, 0, 0, 0.75)',
|
||||
50: "#f9fbe7",
|
||||
100: "#f0f4c3",
|
||||
200: "#e6ee9c",
|
||||
300: "#dce775",
|
||||
400: "#d4e157",
|
||||
500: "#cddc39",
|
||||
600: "#c0ca33",
|
||||
700: "#afb42b",
|
||||
800: "#9e9d24",
|
||||
900: "#827717",
|
||||
a100: "#f4ff81",
|
||||
a200: "#eeff41",
|
||||
a400: "#c6ff00",
|
||||
a700: "#aeea00",
|
||||
inverse: "rgba(0, 0, 0, 0.75)",
|
||||
},
|
||||
yellow: {
|
||||
50: '#fffde7',
|
||||
100: '#fff9c4',
|
||||
200: '#fff59d',
|
||||
300: '#fff176',
|
||||
400: '#ffee58',
|
||||
500: '#ffeb3b',
|
||||
600: '#fdd835',
|
||||
700: '#fbc02d',
|
||||
800: '#f9a825',
|
||||
900: '#f57f17',
|
||||
a100: '#ffff8d',
|
||||
a200: '#ffff00',
|
||||
a400: '#ffea00',
|
||||
a700: '#ffd600',
|
||||
inverse: 'rgba(0, 0, 0, 0.75)',
|
||||
50: "#fffde7",
|
||||
100: "#fff9c4",
|
||||
200: "#fff59d",
|
||||
300: "#fff176",
|
||||
400: "#ffee58",
|
||||
500: "#ffeb3b",
|
||||
600: "#fdd835",
|
||||
700: "#fbc02d",
|
||||
800: "#f9a825",
|
||||
900: "#f57f17",
|
||||
a100: "#ffff8d",
|
||||
a200: "#ffff00",
|
||||
a400: "#ffea00",
|
||||
a700: "#ffd600",
|
||||
inverse: "rgba(0, 0, 0, 0.75)",
|
||||
},
|
||||
amber: {
|
||||
50: '#fff8e1',
|
||||
100: '#ffecb3',
|
||||
200: '#ffe082',
|
||||
300: '#ffd54f',
|
||||
400: '#ffca28',
|
||||
500: '#ffc107',
|
||||
600: '#ffb300',
|
||||
700: '#ffa000',
|
||||
800: '#ff8f00',
|
||||
900: '#ff6f00',
|
||||
a100: '#ffe57f',
|
||||
a200: '#ffd740',
|
||||
a400: '#ffc400',
|
||||
a700: '#ffab00',
|
||||
inverse: 'rgba(0, 0, 0, 0.75)',
|
||||
50: "#fff8e1",
|
||||
100: "#ffecb3",
|
||||
200: "#ffe082",
|
||||
300: "#ffd54f",
|
||||
400: "#ffca28",
|
||||
500: "#ffc107",
|
||||
600: "#ffb300",
|
||||
700: "#ffa000",
|
||||
800: "#ff8f00",
|
||||
900: "#ff6f00",
|
||||
a100: "#ffe57f",
|
||||
a200: "#ffd740",
|
||||
a400: "#ffc400",
|
||||
a700: "#ffab00",
|
||||
inverse: "rgba(0, 0, 0, 0.75)",
|
||||
},
|
||||
orange: {
|
||||
50: '#fff3e0',
|
||||
100: '#ffe0b2',
|
||||
200: '#ffcc80',
|
||||
300: '#ffb74d',
|
||||
400: '#ffa726',
|
||||
500: '#ff9800',
|
||||
600: '#fb8c00',
|
||||
700: '#f57c00',
|
||||
800: '#ef6c00',
|
||||
900: '#e65100',
|
||||
a100: '#ffd180',
|
||||
a200: '#ffab40',
|
||||
a400: '#ff9100',
|
||||
a700: '#ff6d00',
|
||||
inverse: '#FFF',
|
||||
50: "#fff3e0",
|
||||
100: "#ffe0b2",
|
||||
200: "#ffcc80",
|
||||
300: "#ffb74d",
|
||||
400: "#ffa726",
|
||||
500: "#ff9800",
|
||||
600: "#fb8c00",
|
||||
700: "#f57c00",
|
||||
800: "#ef6c00",
|
||||
900: "#e65100",
|
||||
a100: "#ffd180",
|
||||
a200: "#ffab40",
|
||||
a400: "#ff9100",
|
||||
a700: "#ff6d00",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
'deep-orange': {
|
||||
50: '#fbe9e7',
|
||||
100: '#ffccbc',
|
||||
200: '#ffab91',
|
||||
300: '#ff8a65',
|
||||
400: '#ff7043',
|
||||
500: '#ff5722',
|
||||
600: '#f4511e',
|
||||
700: '#e64a19',
|
||||
800: '#d84315',
|
||||
900: '#bf360c',
|
||||
a100: '#ff9e80',
|
||||
a200: '#ff6e40',
|
||||
a400: '#ff3d00',
|
||||
a700: '#dd2c00',
|
||||
inverse: '#FFF',
|
||||
"deep-orange": {
|
||||
50: "#fbe9e7",
|
||||
100: "#ffccbc",
|
||||
200: "#ffab91",
|
||||
300: "#ff8a65",
|
||||
400: "#ff7043",
|
||||
500: "#ff5722",
|
||||
600: "#f4511e",
|
||||
700: "#e64a19",
|
||||
800: "#d84315",
|
||||
900: "#bf360c",
|
||||
a100: "#ff9e80",
|
||||
a200: "#ff6e40",
|
||||
a400: "#ff3d00",
|
||||
a700: "#dd2c00",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
grey: {
|
||||
50: '#fafafa',
|
||||
100: '#f5f5f5',
|
||||
200: '#eeeeee',
|
||||
300: '#e0e0e0',
|
||||
400: '#bdbdbd',
|
||||
500: '#9e9e9e',
|
||||
600: '#757575',
|
||||
700: '#616161',
|
||||
800: '#424242',
|
||||
900: '#212121',
|
||||
inverse: '#FFF',
|
||||
50: "#fafafa",
|
||||
100: "#f5f5f5",
|
||||
200: "#eeeeee",
|
||||
300: "#e0e0e0",
|
||||
400: "#bdbdbd",
|
||||
500: "#9e9e9e",
|
||||
600: "#757575",
|
||||
700: "#616161",
|
||||
800: "#424242",
|
||||
900: "#212121",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
'blue-grey': {
|
||||
50: '#eceff1',
|
||||
100: '#cfd8dc',
|
||||
200: '#b0bec5',
|
||||
300: '#90a4ae',
|
||||
400: '#78909c',
|
||||
500: '#607d8b',
|
||||
600: '#546e7a',
|
||||
700: '#455a64',
|
||||
800: '#37474f',
|
||||
900: '#263238',
|
||||
inverse: '#FFF',
|
||||
"blue-grey": {
|
||||
50: "#eceff1",
|
||||
100: "#cfd8dc",
|
||||
200: "#b0bec5",
|
||||
300: "#90a4ae",
|
||||
400: "#78909c",
|
||||
500: "#607d8b",
|
||||
600: "#546e7a",
|
||||
700: "#455a64",
|
||||
800: "#37474f",
|
||||
900: "#263238",
|
||||
inverse: "#FFF",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default materialDesignColors;
|
||||
export default materialDesignColors
|
||||
|
|
|
|||
|
|
@ -6,90 +6,96 @@
|
|||
*/
|
||||
|
||||
export const themeSwitcher = {
|
||||
|
||||
// Config
|
||||
_scheme: 'auto',
|
||||
_scheme: "auto",
|
||||
change: {
|
||||
light: '<i>Turn on dark mode</i>',
|
||||
dark: '<i>Turn off dark mode</i>',
|
||||
light: "<i>Turn on dark mode</i>",
|
||||
dark: "<i>Turn off dark mode</i>",
|
||||
},
|
||||
buttonsTarget: '.theme-switcher',
|
||||
localStorageKey: 'picoPreferredColorScheme',
|
||||
buttonsTarget: ".theme-switcher",
|
||||
localStorageKey: "picoPreferredColorScheme",
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.scheme = this.schemeFromLocalStorage;
|
||||
this.initSwitchers();
|
||||
this.scheme = this.schemeFromLocalStorage
|
||||
this.initSwitchers()
|
||||
},
|
||||
|
||||
// Get color scheme from local storage
|
||||
get schemeFromLocalStorage() {
|
||||
if (typeof window.localStorage !== 'undefined') {
|
||||
if (typeof window.localStorage !== "undefined") {
|
||||
if (window.localStorage.getItem(this.localStorageKey) !== null) {
|
||||
return window.localStorage.getItem(this.localStorageKey);
|
||||
return window.localStorage.getItem(this.localStorageKey)
|
||||
}
|
||||
}
|
||||
return this._scheme;
|
||||
return this._scheme
|
||||
},
|
||||
|
||||
// Preferred color scheme
|
||||
get preferredColorScheme() {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
},
|
||||
|
||||
// Init switchers
|
||||
initSwitchers() {
|
||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||
const buttons = document.querySelectorAll(this.buttonsTarget)
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
this.scheme == 'dark' ? this.scheme = 'light' : this.scheme = 'dark';
|
||||
}, false);
|
||||
});
|
||||
button.addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
this.scheme == "dark"
|
||||
? (this.scheme = "light")
|
||||
: (this.scheme = "dark")
|
||||
},
|
||||
false
|
||||
)
|
||||
})
|
||||
},
|
||||
|
||||
// Add new button
|
||||
addButton(config) {
|
||||
let button = document.createElement(config.tag);
|
||||
button.className = config.class;
|
||||
document.querySelector(config.target).appendChild(button);
|
||||
let button = document.createElement(config.tag)
|
||||
button.className = config.class
|
||||
document.querySelector(config.target).appendChild(button)
|
||||
},
|
||||
|
||||
// Set scheme
|
||||
set scheme(scheme) {
|
||||
if (scheme == 'auto') {
|
||||
this.preferredColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
|
||||
if (scheme == "auto") {
|
||||
this.preferredColorScheme == "dark"
|
||||
? (this._scheme = "dark")
|
||||
: (this._scheme = "light")
|
||||
} else if (scheme == "dark" || scheme == "light") {
|
||||
this._scheme = scheme
|
||||
}
|
||||
else if (scheme == 'dark' || scheme == 'light') {
|
||||
this._scheme = scheme;
|
||||
}
|
||||
this.applyScheme();
|
||||
this.schemeToLocalStorage();
|
||||
this.applyScheme()
|
||||
this.schemeToLocalStorage()
|
||||
},
|
||||
|
||||
// Get scheme
|
||||
get scheme() {
|
||||
return this._scheme;
|
||||
return this._scheme
|
||||
},
|
||||
|
||||
// Apply scheme
|
||||
applyScheme() {
|
||||
document.querySelector('html').setAttribute('data-theme', this.scheme);
|
||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||
buttons.forEach(
|
||||
button => {
|
||||
const text = this.scheme == 'dark' ? this.change.dark : this.change.light;
|
||||
button.innerHTML = text;
|
||||
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
|
||||
}
|
||||
);
|
||||
document.querySelector("html").setAttribute("data-theme", this.scheme)
|
||||
const buttons = document.querySelectorAll(this.buttonsTarget)
|
||||
buttons.forEach(button => {
|
||||
const text = this.scheme == "dark" ? this.change.dark : this.change.light
|
||||
button.innerHTML = text
|
||||
button.setAttribute("aria-label", text.replace(/<[^>]*>?/gm, ""))
|
||||
})
|
||||
},
|
||||
|
||||
// Store scheme to local storage
|
||||
schemeToLocalStorage() {
|
||||
if (typeof window.localStorage !== 'undefined') {
|
||||
window.localStorage.setItem(this.localStorageKey, this.scheme);
|
||||
if (typeof window.localStorage !== "undefined") {
|
||||
window.localStorage.setItem(this.localStorageKey, this.scheme)
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default themeSwitcher;
|
||||
export default themeSwitcher
|
||||
|
|
|
|||
|
|
@ -6,11 +6,10 @@
|
|||
*/
|
||||
|
||||
export const toggleNavigation = {
|
||||
|
||||
// Config
|
||||
_state: 'closed-on-mobile',
|
||||
toggleLink: document.getElementById('toggle-docs-navigation'),
|
||||
nav: document.querySelector('main > aside > nav'),
|
||||
_state: "closed-on-mobile",
|
||||
toggleLink: document.getElementById("toggle-docs-navigation"),
|
||||
nav: document.querySelector("main > aside > nav"),
|
||||
|
||||
// Init
|
||||
init() {
|
||||
|
|
@ -18,25 +17,29 @@ export const toggleNavigation = {
|
|||
},
|
||||
|
||||
onToggleClick() {
|
||||
this.toggleLink.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
this.state == 'closed-on-mobile'
|
||||
? this.state = 'open'
|
||||
: this.state = 'closed-on-mobile';
|
||||
this.nav.removeAttribute('class');
|
||||
this.nav.classList.add(this.state);
|
||||
}, false);
|
||||
this.toggleLink.addEventListener(
|
||||
"click",
|
||||
event => {
|
||||
event.preventDefault()
|
||||
this.state == "closed-on-mobile"
|
||||
? (this.state = "open")
|
||||
: (this.state = "closed-on-mobile")
|
||||
this.nav.removeAttribute("class")
|
||||
this.nav.classList.add(this.state)
|
||||
},
|
||||
false
|
||||
)
|
||||
},
|
||||
|
||||
// Get state
|
||||
get state() {
|
||||
return this._state;
|
||||
return this._state
|
||||
},
|
||||
|
||||
// Set state
|
||||
set state(state) {
|
||||
this._state = state;
|
||||
this._state = state
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default toggleNavigation;
|
||||
export default toggleNavigation
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue