theme system updated

src/client/components/AccessibilityControl.js

@@ -4,35 +4,9 @@ export default function (app) {
 	app.component('accessibilityControl', {
 		template,
 		controller: ($scope, theme) => {
-			const themeSet = {
-				accessibility: 'accessibility',
-				color: '',
-				fontSize: '',
-				fontFamily: '',
-			}
-
-			const install = () => {
-				const baked = Object
-					.values(themeSet)
-					.filter(Boolean)
-					.join(' ')
-				theme.setTheme(baked)
-			}
-
-			$scope.setColorTheme = (color) => {
-				themeSet.color = color
-				install()
-			}
-
-			$scope.setFontTheme = (font) => {
-				themeSet.fontSize = font
-				install()
-			}
-
-			$scope.setFontFamilyTheme = (font) => {
-				themeSet.fontFamily = font
-				install()
-			}
+			$scope.setColorTheme = theme.setColorTheme.bind(theme)
+			$scope.setFontTheme = theme.setFontTheme.bind(theme)
+			$scope.setFontFamilyTheme = theme.setFontFamilyTheme.bind(theme)
 		},
 	})
 }

src/client/components/ThemeSelector.js

@@ -8,7 +8,7 @@ export default function (app) {
 		`,
 		controller: ($scope, theme) => {
 			const update = () => {
-				$scope.isMainTheme = theme.currentTheme === theme.mainTheme
+				$scope.isMainTheme = theme.isDefaultTheme()
 			}
 
 			$scope.toggleTheme = () => {

src/client/services/theme.js

@@ -1,43 +1,133 @@
 const defaultTheme = 'theme-default'
-const defaultAccessibilityTheme = 'accessibility theme-accessibility-black-white'
 
-const getTheme = () => localStorage.getItem('theme')
+const themeScheme = {
+	accessibility: 'accessibility',
 
-const isDefaultTheme = () => {
-	const theme = getTheme()
-	if (!theme) return true
-	return theme === defaultTheme
+	color: {
+		wb: 'theme-accessibility-white-black',
+		bw: 'theme-accessibility-black-white',
+	},
+
+	font: {
+		sans: 'theme-accessibility-font-sans',
+		serif: 'theme-accessibility-font-serif',
+	},
+
+	fontSize: {
+		normal: 'theme-accessibility-font-normal',
+		big: 'theme-accessibility-font-big',
+		biggest: 'theme-accessibility-font-biggest',
+	},
+}
+
+const defaultAccessibilityTheme = () => ({
+	version: '1',
+	theme: {
+		accessibility: 'accessibility',
+		color: 'wb',
+		font: 'sans',
+		fontSize: 'big',
+	},
+})
+
+function loadTheme() {
+	const theme = localStorage.getItem('theme')
+	try {
+		return JSON.parse(theme)
+	} catch (error) {
+		return null
+	}
+}
+
+function saveTheme(theme) {
+	if (!theme) return theme
+	const str = typeof theme === 'string'
+		? theme
+		: JSON.stringify(theme)
+	localStorage.setItem('theme', str)
+	return theme
+}
+
+function resetTheme() {
+	localStorage.removeItem('theme')
+}
+
+function compileTheme(item) {
+	if (!item) return defaultTheme
+	const {theme, version} = item
+	if (!version) return defaultTheme
+
+	const cssClass = ([scope, name]) => {
+		try {
+			return themeScheme[scope][name]
+		} catch (error) {
+			return null
+		}
+	}
+
+	return Object
+		.entries(theme)
+		.map(cssClass)
+		.filter(Boolean)
+		.join(' ')
 }
 
 class Theme {
 	constructor($rootScope) {
 		this.mainTheme = defaultTheme
-		this.currentTheme = defaultAccessibilityTheme
+		this.themeSetup = defaultAccessibilityTheme()
+		this.__scope = $rootScope
 
-		this.toggle = () => {
-			if (isDefaultTheme()) {
-				this.setTheme(this.currentTheme)
-			} else {
-				this.setMainTheme()
-			}
+		this.setTheme(loadTheme())
+	}
+
+	toggle() {
+		if (this.isDefaultTheme()) {
+			this.setTheme(this.themeSetup)
+		} else {
+			this.setMainTheme()
 		}
+	}
 
-		this.setTheme = (themeName) => {
-			if (!themeName) {
-				this.setMainTheme()
-			} else {
-				localStorage.setItem('theme', themeName)
-				this.currentTheme = themeName
-				$rootScope.theme = themeName
-			}
+	setMainTheme() {
+		resetTheme()
+		this.__scope.theme = this.mainTheme
+	}
+
+	setTheme(theme) {
+		if (!theme) {
+			this.setMainTheme()
+		} else {
+			const css = compileTheme(theme)
+
+			saveTheme(theme)
+			this.themeSetup = theme
+			this.__scope.theme = css
 		}
+	}
 
-		this.setMainTheme = () => {
-			localStorage.removeItem('theme')
-			$rootScope.theme = this.mainTheme
-		}
+	setColorTheme(theme) {
+		this.themeSetup.theme.color = theme
+		this.install()
+	}
 
-		this.setTheme(getTheme())
+	setFontTheme(theme) {
+		this.themeSetup.theme.fontSize = theme
+		this.install()
+	}
+
+	setFontFamilyTheme(theme) {
+		this.themeSetup.theme.font = theme
+		this.install()
+	}
+
+	install() {
+		this.setTheme(this.themeSetup)
+	}
+
+	isDefaultTheme(){
+		const theme = loadTheme()
+		return !theme // default theme cleared up local storage
 	}
 }
 

src/templates/components/accessibility-control.html

@@ -1,12 +1,12 @@
 <div class="accessibility-control">
     <ul>
         <li>
-            <button ng-click="setColorTheme('theme-accessibility-black-white')"
+            <button ng-click="setColorTheme('bw')"
             >Белым по черному
             </button>
         </li>
         <li>
-            <button ng-click="setColorTheme('theme-accessibility-white-black')"
+            <button ng-click="setColorTheme('wb')"
             >Черным по белому
             </button>
         </li>
@@ -32,12 +32,12 @@
             </button>
         </li>
         <li>
-            <button ng-click="setFontTheme('theme-accessibility-font-big')"
+            <button ng-click="setFontTheme('big')"
             >Большие
             </button>
         </li>
         <li>
-            <button ng-click="setFontTheme('theme-accessibility-font-biggest')"
+            <button ng-click="setFontTheme('biggest')"
             >Огромные
             </button>
         </li>
@@ -45,12 +45,12 @@
 
     <ul>
         <li>
-            <button ng-click="setFontFamilyTheme('theme-accessibility-font-sans')"
+            <button ng-click="setFontFamilyTheme('sans')"
             >Без засечек
             </button>
         </li>
         <li>
-            <button ng-click="setFontFamilyTheme('theme-accessibility-font-serif')"
+            <button ng-click="setFontFamilyTheme('serif')"
             >С засечками
             </button>
         </li>