mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-23 21:55:30 +02:00
⚡ Refactors class names in collapsible
This commit is contained in:
parent
5f9d165625
commit
453a3c107c
@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
:class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`"
|
:class="`collapsable ${rowColSpanClass} ${collapseClass}`"
|
||||||
:style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
|
:style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
:id="sectionKey"
|
:id="sectionKey"
|
||||||
class="toggle"
|
class="toggle"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
:checked="getCollapseState()"
|
:checked="isExpanded"
|
||||||
@change="collapseChanged"
|
@change="collapseChanged"
|
||||||
tabIndex="-1"
|
tabIndex="-1"
|
||||||
>
|
>
|
||||||
@ -56,6 +56,19 @@ export default {
|
|||||||
if (this.isEditMode) return undefined;
|
if (this.isEditMode) return undefined;
|
||||||
return `collapsible-${this.uniqueKey}`;
|
return `collapsible-${this.uniqueKey}`;
|
||||||
},
|
},
|
||||||
|
collapseClass() {
|
||||||
|
return !this.isExpanded ? ' is-collapsed' : 'is-open';
|
||||||
|
},
|
||||||
|
rowColSpanClass() {
|
||||||
|
const { rows, cols, checkSpanNum } = this;
|
||||||
|
return `${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
isExpanded: false,
|
||||||
|
}),
|
||||||
|
mounted() {
|
||||||
|
this.isExpanded = this.getCollapseState();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/* Check that row & column span is valid, and not over the max */
|
/* Check that row & column span is valid, and not over the max */
|
||||||
@ -69,29 +82,28 @@ export default {
|
|||||||
sanitizeCustomStyles(userCss) {
|
sanitizeCustomStyles(userCss) {
|
||||||
return userCss ? userCss.replace(/[^a-zA-Z0-9- :;.]/g, '') : '';
|
return userCss ? userCss.replace(/[^a-zA-Z0-9- :;.]/g, '') : '';
|
||||||
},
|
},
|
||||||
/* If not already done, then add object structure to local storage */
|
/* Returns local storage collapse state data, and if not yet set then initialized is */
|
||||||
initialiseStorage() {
|
initialiseStorage() {
|
||||||
|
const storageKey = localStorageKeys.COLLAPSE_STATE;
|
||||||
/* Initialize function will create and set a blank object to storage */
|
/* Initialize function will create and set a blank object to storage */
|
||||||
const initStorage = () => localStorage.setItem(
|
const initStorage = () => localStorage.setItem(storageKey, JSON.stringify({}));
|
||||||
localStorageKeys.COLLAPSE_STATE, JSON.stringify({}),
|
// If not yet set, then call initialize
|
||||||
);
|
if (!localStorage[storageKey]) {
|
||||||
if (!localStorage[localStorageKeys.COLLAPSE_STATE]) initStorage(); // Initialise if not set
|
|
||||||
try { // Check storage is valid JSON, and has not been corrupted
|
|
||||||
JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
|
|
||||||
} catch {
|
|
||||||
initStorage();
|
initStorage();
|
||||||
|
return {};
|
||||||
}
|
}
|
||||||
return JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
|
// Otherwise, return value of local storage
|
||||||
|
return JSON.parse(localStorage[storageKey]);
|
||||||
},
|
},
|
||||||
/* If not specified by user, get last state from local storage */
|
/* If specified by user, return conf collapse state, otherwise check local storage */
|
||||||
getCollapseState() {
|
getCollapseState() {
|
||||||
if (this.collapsed !== undefined) return !this.collapsed;
|
if (this.collapsed !== undefined) return !this.collapsed; // Check users config
|
||||||
const collapseStateObject = this.initialiseStorage();
|
const collapseStateObject = this.initialiseStorage(); // Check local storage
|
||||||
let collapseState = !this.collapsed;
|
|
||||||
if (collapseStateObject[this.uniqueKey] !== undefined) {
|
if (collapseStateObject[this.uniqueKey] !== undefined) {
|
||||||
collapseState = collapseStateObject[this.uniqueKey];
|
return collapseStateObject[this.uniqueKey];
|
||||||
}
|
}
|
||||||
return collapseState;
|
// Nothing specified, return Open
|
||||||
|
return true;
|
||||||
},
|
},
|
||||||
/* When section collapsed, update local storage, to remember for next time */
|
/* When section collapsed, update local storage, to remember for next time */
|
||||||
setCollapseState(id, newState) {
|
setCollapseState(id, newState) {
|
||||||
@ -104,9 +116,10 @@ export default {
|
|||||||
},
|
},
|
||||||
/* Called when collapse state changes, trigger local storage update if needed */
|
/* Called when collapse state changes, trigger local storage update if needed */
|
||||||
collapseChanged(whatChanged) {
|
collapseChanged(whatChanged) {
|
||||||
|
this.isExpanded = whatChanged.srcElement.checked;
|
||||||
if (this.collapseState === undefined) { // Only run, if user hasn't manually set prop
|
if (this.collapseState === undefined) { // Only run, if user hasn't manually set prop
|
||||||
this.initialiseStorage();
|
this.initialiseStorage();
|
||||||
this.setCollapseState(this.uniqueKey.toString(), whatChanged.srcElement.checked);
|
this.setCollapseState(this.uniqueKey.toString(), this.isExpanded);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
openEditModal() {
|
openEditModal() {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user