Update playground: improve initial state check

orestbida · May 15, 2023 · 304fbef · 304fbef
1 parent 7ff5512
commit 304fbef
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 111 deletions.
diff --git a/playground/plugins/shiki-highlighter.js b/playground/plugins/shiki-highlighter.js
@@ -121,7 +121,7 @@ async function ShikiHighlight(opts = {}) {
                             let className = 'line' + (focus ? ' line--focus' : '');
 
                             if(fetchRelease)
-                                children = children.replace('{{latest_release}}', '<span data-latest-release></span>');
+                                children = children.replaceAll('{{latest_release}}', '<span data-latest-release></span>');
 
                             return  `<span class="${className}">${children}</span>`
                         }

diff --git a/playground/src/components/categories.js b/playground/src/components/categories.js
@@ -6,27 +6,29 @@ import { defaultState, getState, reRunPlugin, saveState } from './stateManager'
  */
 const categoryInputs = document.querySelectorAll('.category-input');
 
-const state = getState();
+onEvent(customEvents._PLAYGROUND_READY, () => {
+    const state = getState();
 
-toggleCategories(state._enabledCategories);
+    toggleCategories(state._enabledCategories);
 
-categoryInputs.forEach(input => {
+    categoryInputs.forEach(input => {
 
-    input.value !== 'necessary' && input.addEventListener('change', () => {
-        const enabled = input.checked;
-        const category = input.value;
-        const state = getState();
+        input.value !== 'necessary' && input.addEventListener('change', () => {
+            const enabled = input.checked;
+            const category = input.value;
+            const state = getState();
 
-        state._enabledCategories = [...new Set(
-            !enabled
-                ? state._enabledCategories.filter(cat => cat !== category)
-                : [...state._enabledCategories, category]
-        )];
+            state._enabledCategories = [...new Set(
+                !enabled
+                    ? state._enabledCategories.filter(cat => cat !== category)
+                    : [...state._enabledCategories, category]
+            )];
 
-        saveState(state);
-        reRunPlugin(state, 'consentModal');
-    });
-})
+            saveState(state);
+            reRunPlugin(state, 'consentModal');
+        });
+    })
+});
 
 /**
  * @param {string[]} enabledCategories

diff --git a/playground/src/components/consentModalElements.js b/playground/src/components/consentModalElements.js
@@ -1,20 +1,22 @@
 import { defaultFullConfig } from './defaultConfig';
 import { getState, saveState, defaultState, reRunPlugin } from './stateManager';
-import { addEvent, getById, customEvents } from './utils';
-
-const state = getState();
+import { addEvent, getById, customEvents, onEvent } from './utils';
 
 /** @type {HTMLInputElement} **/ const enableXIconCheckbox = getById('close-icon');
 /** @type {HTMLInputElement} **/ const removeAcceptNecessaryBtnCheckbox = getById('accept-necessary-btn');
 /** @type {HTMLInputElement} **/ const removeShowPreferencesBtnCheckbox = getById('show-preferences-btn');
 /** @type {HTMLInputElement} **/ const removeFooterCheckbox = getById('remove-footer');
 /** @type {HTMLInputElement} **/ const removeTitleCheckbox = getById('remove-title');
 
-toggleCloseIcon(state._enableCloseIcon);
-toggleRemoveAcceptNecessaryBtn(state._removeAcceptNecessaryBtn);
-toggleRemoveShowPreferencesBtn(state._removeShowPrefrencesBtn);
-toggleRemoveFooter(state._removeFooter);
-toggleRemoveTitle(state._removeTitle);
+onEvent(customEvents._PLAYGROUND_READY, () => {
+    const state = getState();
+
+    toggleCloseIcon(state._enableCloseIcon);
+    toggleRemoveAcceptNecessaryBtn(state._removeAcceptNecessaryBtn);
+    toggleRemoveShowPreferencesBtn(state._removeShowPrefrencesBtn);
+    toggleRemoveFooter(state._removeFooter);
+    toggleRemoveTitle(state._removeTitle);
+});
 
 addEvent(enableXIconCheckbox, 'change', function(){
 

diff --git a/playground/src/components/customThemes.js b/playground/src/components/customThemes.js
@@ -5,44 +5,52 @@ import { saveState, getState, defaultState } from './stateManager';
 import { customEvents, onEvent, addEvent, getById } from './utils';
 import { toggleDarkmode } from './darkmode';
 
-const html = document.documentElement;
-
-let theme = getState()._theme;
-
 /**
  * @type {NodeListOf<HTMLInputElement>}
  */
 const inputs = document.querySelectorAll('input[name="theme"]');
 
-toggleTheme(theme);
+/**
+ * @type {typeof defaultState._theme}
+ */
+let theme = '';
+
+onEvent(customEvents._PLAYGROUND_READY, () => {
+
+    theme = getState()._theme;
+    toggleTheme(theme);
 
-for(const input of inputs) {
-    addEvent(input, 'change', () => {
+    for(const input of inputs) {
+        addEvent(input, 'change', () => {
 
-        const state = getState();
-        const currTheme = input.id;
-        theme = state._theme;
+            const state = getState();
+            const currTheme = input.id;
+            theme = state._theme;
 
-        const isDefaultDarkMode = currTheme === 'cc--darkmode';
+            const isDefaultDarkMode = currTheme === 'cc--darkmode';
 
-        state._theme = currTheme;
-        saveState(state);
+            state._theme = currTheme;
+            saveState(state);
 
-        toggleTheme(currTheme);
-        toggleDarkmode(isDefaultDarkMode)
+            toggleTheme(currTheme);
+            toggleDarkmode(isDefaultDarkMode)
 
-        CookieConsent.show(true);
-    });
-}
+            CookieConsent.show(true);
+        });
+    }
+
+});
 
 /**
  * @param {typeof defaultState._theme} currTheme
  */
 export function toggleTheme(currTheme) {
     getById(currTheme).checked = true;
 
-    html.classList.add(currTheme);
-    theme !== currTheme && html.classList.remove(theme);
+    const { classList } = document.documentElement;
+
+    classList.add(currTheme);
+    theme !== currTheme && theme && classList.remove(theme);
     theme = currTheme;
 };
 

diff --git a/playground/src/components/darkmode.js b/playground/src/components/darkmode.js
@@ -10,7 +10,9 @@ const DEFAULT_LIGHT_THEME = 'default-light';
  */
 const checkbox = getById('darkmode');
 
-toggleDarkmode(getState()._theme === DEFAULT_DARK_THEME);
+onEvent(customEvents._PLAYGROUND_READY, () => {
+    toggleDarkmode(getState()._theme === DEFAULT_DARK_THEME);
+});
 
 addEvent(checkbox, 'click', () => {
 

diff --git a/playground/src/components/disablePageInteraction.js b/playground/src/components/disablePageInteraction.js
@@ -6,7 +6,9 @@ import { addEvent, customEvents, getById, onEvent } from './utils';
  */
 const checkbox = getById('disablePageInteraction');
 
-checkbox.checked = !!getState()._cookieConsentConfig.disablePageInteraction;
+onEvent(customEvents._PLAYGROUND_READY, () => {
+    checkbox.checked = !!getState()._cookieConsentConfig.disablePageInteraction;
+});
 
 addEvent(checkbox, 'change', () => {
 

diff --git a/playground/src/components/fetchRelease.js b/playground/src/components/fetchRelease.js
@@ -1,8 +1,12 @@
+import { customEvents, onEvent } from "./utils";
+
 let latest = '';
 
 const releaseSpans = document.querySelectorAll('[data-latest-release]');
 
-updateReleaseSpans();
+onEvent(customEvents._PLAYGROUND_READY, async () => {
+    await updateReleaseSpans();
+});
 
 /**
  * Get last published v3 release
@@ -23,7 +27,7 @@ export async function fetchLatestRelease() {
 /**
  * Update all elements with "data-latest-release" attribute
  */
-export async function updateReleaseSpans() {
+export async function updateReleaseSpans(state) {
 
     latest ||= await fetchLatestRelease();
 

diff --git a/playground/src/components/language.js b/playground/src/components/language.js
@@ -13,29 +13,37 @@ const currentActiveLanguageSpan = getById('current-active-language');
 /** @type {HTMLSelectElement} **/ const autoDetectModeSelect = getById('autodetect-mode');
 /** @type {HTMLSelectElement} **/ export const defaultLanguageSelect = getById('default-language');
 
-const state = getState();
-const language = state._cookieConsentConfig.language;
-const allLanguages = Object.keys(defaultFullConfig.language.translations);
-
-const autoDetectMode = language.autoDetect;
-const autoDetect = autoDetectEnabled(autoDetectMode);
-const detectedLanguage = detectLanguage(autoDetectMode);
-
-const currLang = autoDetect && enabledTranslation(detectedLanguage, state)
-    ? detectedLanguage
-    : language.default;
-
-if(autoDetect) {
-    setAutoDetectMode(autoDetectMode);
-    updateDetectedLanguage(detectedLanguage, state)
-} else {
-    setAutoDetectMode('');
-}
+/**
+ * @type {string[]}
+ */
+let allLanguages = [];
+
+onEvent(customEvents._PLAYGROUND_READY, () => {
+
+    const state = getState();
+    const language = state._cookieConsentConfig.language;
+    allLanguages = Object.keys(defaultFullConfig.language.translations);
 
-toggleAutoDetectCheckbox(autoDetect)
-updateDefaultLanguageOptions(state._enabledTranslations);
-updateDefaultLanguage(language.default);
-updateCurrentLanguage(currLang, false);
+    const autoDetectMode = language.autoDetect;
+    const autoDetect = autoDetectEnabled(autoDetectMode);
+    const detectedLanguage = detectLanguage(autoDetectMode);
+
+    const currLang = autoDetect && enabledTranslation(detectedLanguage, state)
+        ? detectedLanguage
+        : language.default;
+
+    if(autoDetect) {
+        setAutoDetectMode(autoDetectMode);
+        updateDetectedLanguage(detectedLanguage, state)
+    } else {
+        setAutoDetectMode('');
+    }
+
+    toggleAutoDetectCheckbox(autoDetect)
+    updateDefaultLanguageOptions(state._enabledTranslations);
+    updateDefaultLanguage(language.default);
+    updateCurrentLanguage(currLang, false);
+});
 
 addEvent(autoDetectCheckbox, 'change', () => {
 

diff --git a/playground/src/components/stateManager.js b/playground/src/components/stateManager.js
@@ -16,6 +16,7 @@ export const defaultState = {
     _removeShowPrefrencesBtn: false,
     _removeFooter: false,
     _removeTitle: false,
+    _latestRelease: '',
 
     /**
      * @type {'default-light' | 'cc--darkmode' | 'dark-turquoise' | 'light-funky' | 'elegant-black'}
@@ -35,11 +36,9 @@ export const defaultState = {
     /**
      * Increase on every new playground update
      */
-    _demoRevision: 21
+    _demoRevision: 22
 };
 
-addEvent(window, customEvents._INIT, clearInvalidDemoState)
-
 /**
  * Get current state
  * @returns {typeof defaultState} State
@@ -98,7 +97,8 @@ export const saveState = (newState) => {
     );
 };
 
-function clearInvalidDemoState() {
+export function clearInvalidDemoState() {
+
     /**
      * @type {typeof defaultState}
      */

diff --git a/playground/src/components/translations.js b/playground/src/components/translations.js
@@ -14,52 +14,55 @@ const translationsSection = getById('translations-section');
 const editTranslationsBtn = getById('edit-translations-btn');
 const editTranslationsBtnText = editTranslationsBtn.textContent;
 
-const enabledTranslations = getState()._enabledTranslations;
+onEvent(customEvents._PLAYGROUND_READY, () => {
 
-toggleTranslations(enabledTranslations);
-toggleMissingTranslationError(enabledTranslations);
+    const enabledTranslations = getState()._enabledTranslations;
 
-translationInputs.forEach(input => {
-    addEvent(input, 'change', () => {
-        const languageCode = input.value;
-        const enabled = input.checked;
+    toggleTranslations(enabledTranslations);
+    toggleMissingTranslationError(enabledTranslations);
 
-        const state = getState();
-        const translations = state._enabledTranslations;
-        const language = state._cookieConsentConfig.language;
+    translationInputs.forEach(input => {
+        addEvent(input, 'change', () => {
+            const languageCode = input.value;
+            const enabled = input.checked;
 
-        const languageFound = translations.includes(languageCode);
+            const state = getState();
+            const translations = state._enabledTranslations;
+            const language = state._cookieConsentConfig.language;
 
-        if(enabled) {
-            !languageFound && translations.push(languageCode);
-        } else {
-            languageFound && (state._enabledTranslations = state._enabledTranslations.filter(language => language !== languageCode));
-        }
+            const languageFound = translations.includes(languageCode);
 
-        toggleMissingTranslationError(state._enabledTranslations);
-        updateDefaultLanguageOptions(state._enabledTranslations);
+            if(enabled) {
+                !languageFound && translations.push(languageCode);
+            } else {
+                languageFound && (state._enabledTranslations = state._enabledTranslations.filter(language => language !== languageCode));
+            }
 
-        const autoDetect = autoDetectEnabled(language.autoDetect);
-        const autoDetectedLanguage = autoDetect ? detectLanguage(language.autoDetect) : '';
+            toggleMissingTranslationError(state._enabledTranslations);
+            updateDefaultLanguageOptions(state._enabledTranslations);
 
-        const currLanguage =
-            (enabledTranslation(autoDetectedLanguage, state) && autoDetectedLanguage)
-            || (enabledTranslation(language.default, state) && language.default)
-            || state._enabledTranslations[0]
-            || '';
+            const autoDetect = autoDetectEnabled(language.autoDetect);
+            const autoDetectedLanguage = autoDetect ? detectLanguage(language.autoDetect) : '';
 
-        if(autoDetect) {
-            updateTranslationFound(currLanguage === autoDetectedLanguage);
-        }
+            const currLanguage =
+                (enabledTranslation(autoDetectedLanguage, state) && autoDetectedLanguage)
+                || (enabledTranslation(language.default, state) && language.default)
+                || state._enabledTranslations[0]
+                || '';
 
-        if(!enabledTranslation(language.default, state)) {
-            language.default = currLanguage;
-            updateDefaultLanguage(currLanguage);
-        }
+            if(autoDetect) {
+                updateTranslationFound(currLanguage === autoDetectedLanguage);
+            }
 
-        updateCurrentLanguage(currLanguage, state);
+            if(!enabledTranslation(language.default, state)) {
+                language.default = currLanguage;
+                updateDefaultLanguage(currLanguage);
+            }
 
-        saveState(state);
+            updateCurrentLanguage(currLanguage, state);
+
+            saveState(state);
+        });
     });
 });
 

diff --git a/playground/src/components/utils.js b/playground/src/components/utils.js
@@ -22,6 +22,7 @@ export const deepCopy = (el) => {
 };
 
 export const customEvents = {
+    _PLAYGROUND_READY: 'pg:ready',
     _INIT: 'cc:onInit',
     _RESET: 'cc:reset',
     _ON_CONSENT: 'cc:onConsent',