smokephil/water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2026-01-21 20:45:52 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add Standard linting and fix problems

Browse source
This commit is contained in:
Felix Mattick 2019-10-02 11:09:20 -07:00
parent 2d029be3fc
commit 4eba6d54ac
3 changed files with 55 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

85
script.js
View file

@ -1,4 +1,6 @@
!(function() {
/* global matchMedia, faviconModeSwitcher */
(function () {
const iconModeSwitcher = window.faviconModeSwitcher && faviconModeSwitcher.default
if (!iconModeSwitcher) return
iconModeSwitcher([
@ -16,99 +18,100 @@
}
])
})()
;(function (ThemeSwitcher) {
const themeSwitcher = new ThemeSwitcher('stylesheet');
const themeSwitchBtn = document.getElementById('switch');
const themeSwitcher = new ThemeSwitcher('stylesheet')
const themeSwitchBtn = document.getElementById('switch')
const themes = {
dark: 'dark',
darkStandalone: 'dark.standalone',
light: 'light',
lightStandalone: 'light.standalone'
};
}
const getSwitchThemeName = function () {
// Case: switch to "light.standalone.css"
if (
(themeSwitcher.current === themes.dark) && themeSwitcher.isDark ||
(themeSwitcher.current === themes.light) && themeSwitcher.isDark ||
((themeSwitcher.current === themes.dark) && themeSwitcher.isDark) ||
((themeSwitcher.current === themes.light) && themeSwitcher.isDark) ||
themeSwitcher.current === themes.darkStandalone
) {
return themes.lightStandalone
// Case: switch to "dark.standalone.css"
} else if (
(themeSwitcher.current === themes.dark) && themeSwitcher.isLight ||
(themeSwitcher.current === themes.light) && themeSwitcher.isLight ||
((themeSwitcher.current === themes.dark) && themeSwitcher.isLight) ||
((themeSwitcher.current === themes.light) && themeSwitcher.isLight) ||
themeSwitcher.current === themes.lightStandalone
) {
return themes.darkStandalone;
return themes.darkStandalone
// Case: switch to "light.css"
} else if (themeSwitcher.current === themes.dark) {
return themes.light;
return themes.light
// Case: switch to "dark.css"
} else if (themeSwitcher.current === themes.light) {
return themes.dark;
return themes.dark
// Case: switch destination is unknown
} else {
return themeSwitcher.current;
return themeSwitcher.current
}
};
}
const getGeneralThemeName = function () {
return themeSwitcher.current.replace(/\.standalone/g, '');
};
return themeSwitcher.current.replace(/\.standalone/g, '')
}
themeSwitchBtn.addEventListener('click', function() {
themeSwitcher.switch(getSwitchThemeName());
});
themeSwitchBtn.addEventListener('click', function () {
themeSwitcher.switch(getSwitchThemeName())
})
themeSwitcher.onChangeDark = function () {
themeSwitcher.switch(getGeneralThemeName());
};
themeSwitcher.switch(getGeneralThemeName())
}
themeSwitcher.onChangeLight = function () {
themeSwitcher.switch(getGeneralThemeName());
};
themeSwitcher.switch(getGeneralThemeName())
}
})(
(function () {
const ThemeSwitcher = function(stylesheet) {
const darkSchemeMql = matchMedia('(prefers-color-scheme: dark)');
const lightSchemeMql = matchMedia('(prefers-color-scheme: light)');
const that = this;
const ThemeSwitcher = function (stylesheet) {
const darkSchemeMql = matchMedia('(prefers-color-scheme: dark)')
const lightSchemeMql = matchMedia('(prefers-color-scheme: light)')
const that = this
this.themeDir = 'dist/';
this.stylesheet = document.getElementById(stylesheet);
this.current = this.getThemeName(this.stylesheet.href);
this.isDark = darkSchemeMql.matches;
this.isLight = lightSchemeMql.matches;
this.themeDir = 'dist/'
this.stylesheet = document.getElementById(stylesheet)
this.current = this.getThemeName(this.stylesheet.href)
this.isDark = darkSchemeMql.matches
this.isLight = lightSchemeMql.matches
darkSchemeMql.addListener(function (mql) {
if (mql.matches && typeof that.onChangeDark === 'function') {
that.onChangeDark()
}
});
})
lightSchemeMql.addListener(function (mql) {
if (mql.matches && typeof that.onChangeLight === 'function') {
that.onChangeLight()
}
});
};
})
}
ThemeSwitcher.prototype = {
switch: function (themeName) {
this.stylesheet.href = this.themeDir + themeName + '.css';
this.current = themeName;
this.stylesheet.href = this.themeDir + themeName + '.css'
this.current = themeName
},
getThemeName: function () {
const reg = new RegExp(this.themeDir + '(|.+?).css');
return stylesheet.getAttribute('href').replace(reg, '$1');
const reg = new RegExp(this.themeDir + '(|.+?).css')
return this.stylesheet.getAttribute('href').replace(reg, '$1')
},
onChangeDark: null,
onChangeLight: null
};
}
return ThemeSwitcher;
return ThemeSwitcher
})()
);
)