From ea5b36a597dad2488b2204f6396c2f3d530cdf25 Mon Sep 17 00:00:00 2001 From: taehoon Date: Tue, 27 Aug 2019 12:17:10 -0400 Subject: [PATCH] refactor toggling body visibility using class --- src/App.scss | 4 ++++ src/services/style_setter/style_setter.js | 8 ++++---- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/App.scss b/src/App.scss index fac800bc..2e20fb57 100644 --- a/src/App.scss +++ b/src/App.scss @@ -49,6 +49,10 @@ body { overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + + &.hidden { + display: none; + } } a { diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index f186d202..1cf7edc3 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -22,7 +22,7 @@ const setStyle = (href, commit) => { ***/ const head = document.head const body = document.body - body.style.display = 'none' + body.classList.add('hidden') const cssEl = document.createElement('link') cssEl.setAttribute('rel', 'stylesheet') cssEl.setAttribute('href', href) @@ -46,7 +46,7 @@ const setStyle = (href, commit) => { head.appendChild(styleEl) // const styleSheet = styleEl.sheet - body.style.display = 'initial' + body.classList.remove('hidden') } cssEl.addEventListener('load', setDynamic) @@ -75,7 +75,7 @@ const applyTheme = (input, commit) => { const { rules, theme } = generatePreset(input) const head = document.head const body = document.body - body.style.display = 'none' + body.classList.add('hidden') const styleEl = document.createElement('style') head.appendChild(styleEl) @@ -86,7 +86,7 @@ const applyTheme = (input, commit) => { styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max') styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max') styleSheet.insertRule(`body { ${rules.fonts} }`, 'index-max') - body.style.display = 'initial' + body.classList.remove('hidden') // commit('setOption', { name: 'colors', value: htmlColors }) // commit('setOption', { name: 'radii', value: radii })