themes updated

src/client/components/AccessibilityControl.js

@@ -4,9 +4,45 @@ export default function (app) {
 	app.component('accessibilityControl', {
 		template,
 		controller: ($scope, theme) => {
+
+			$scope.scopes = {
+				color: [
+					['bw', 'белым по черному'],
+					['wb', 'черным по белому'],
+				],
+
+				fontSize: [
+					['normal', 'нормальный'],
+					['big', 'большой'],
+					['biggest', 'огромный'],
+				],
+
+				fontFamily: [
+					['sans', 'без засечек'],
+					['serif', 'с засечками'],
+				],
+
+				image: [
+					['yesImg', 'отображаются'],
+					['noImg', 'спрятаны'],
+				],
+
+				kerning: [
+					['normal', 'обычный'],
+					['big', 'увеличенный'],
+				],
+			}
+
+			$scope.isActive = (scope, [name,]) => theme.isActive(scope, name)
+
+			$scope.setDefaultTheme = () => theme.toggle()
+			$scope.setDefaultSettings = () => theme.setDefaultAccessibilityTheme()
+
 			$scope.setColorTheme = theme.setColorTheme.bind(theme)
 			$scope.setFontTheme = theme.setFontTheme.bind(theme)
 			$scope.setFontFamilyTheme = theme.setFontFamilyTheme.bind(theme)
+			$scope.setImageTheme = theme.setImageTheme.bind(theme)
+			$scope.setKerningTheme = theme.setKerningTheme.bind(theme)
 		},
 	})
 }

src/client/services/theme.js

@@ -14,10 +14,20 @@ const themeScheme = {
 	},
 
 	fontSize: {
-		normal: 'theme-accessibility-font-normal',
+		normal: '',
 		big: 'theme-accessibility-font-big',
 		biggest: 'theme-accessibility-font-biggest',
 	},
+
+	image: {
+		yesImg: '',
+		noImg: 'theme-accessibility-no-image',
+	},
+
+	kerning: {
+		normal: '',
+		big: 'theme-accessibility-kerning-big',
+	},
 }
 
 const defaultAccessibilityTheme = () => ({
@@ -26,7 +36,9 @@ const defaultAccessibilityTheme = () => ({
 		accessibility: 'accessibility',
 		color: 'wb',
 		font: 'sans',
-		fontSize: 'big',
+		fontSize: 'normal',
+		image: 'yesImg',
+		kerning: 'normal',
 	},
 })
 
@@ -121,13 +133,36 @@ class Theme {
 		this.install()
 	}
 
+	setImageTheme(theme) {
+		this.themeSetup.theme.image = theme
+		this.install()
+	}
+
+	setKerningTheme(theme) {
+		this.themeSetup.theme.kerning = theme
+		this.install()
+	}
+
 	install() {
 		this.setTheme(this.themeSetup)
 	}
 
-	isDefaultTheme(){
-		const theme = loadTheme()
-		return !theme // default theme cleared up local storage
+	isDefaultTheme() {
+		return this.__scope.theme === this.mainTheme
+	}
+
+	isActive(scope, name) {
+		if (this.isDefaultTheme()) return false
+
+		try {
+			return this.themeSetup.theme[scope] === name
+		} catch (e) {
+			return false
+		}
+	}
+
+	setDefaultAccessibilityTheme () {
+		this.setTheme(defaultAccessibilityTheme())
 	}
 }
 

src/style/components/accessibility-control.scss

@@ -1,11 +1,34 @@
 @import "../variables";
 
-.accessibility-control{
-  background-color: white;
-  height: 100px;
+.accessibility-control {
   width: 100%;
 
+  padding: $single-margin;
+
+  span {
+    margin-right: $single-margin;
+  }
+
+  span.active {
+    font-weight: bold;
+  }
+
+  &__block {
+    margin-bottom: $half-margin;
+  }
+
   ul li {
     display: inline;
+    margin-right: $single-margin;
+  }
+
+  ul {
+    display: inline;
   }
 }
+
+.accessibility .accessibility-control {
+  a {
+    border-bottom-style: dashed;
+  }
+}

src/style/main.scss

@@ -21,3 +21,11 @@ h2{
 h3{
   margin-bottom:  $single-margin / 2;
 }
+
+.actor {
+  border-bottom: 1px dashed black;
+
+  &:hover {
+    border-bottom: 2px solid black;
+  }
+}

src/style/style.scss

@@ -48,3 +48,5 @@
 @import "themes/theme-accessibility-font-biggest";
 @import "themes/theme-accessibility-font-sans";
 @import "themes/theme-accessibility-font-serif";
+@import "themes/theme-accessibility-no-image";
+@import "themes/theme-accessibility-kerning-big";

src/style/themes/theme-accessibility-black-white.scss

@@ -14,6 +14,10 @@
     }
   }
 
+  .accessibility-control{
+    color: $darker-color;
+  }
+
   .main-menu {
     a {
       color: $dark-color;

src/style/themes/theme-accessibility-font-big.scss

@@ -1,7 +1,7 @@
 @import "../variables";
 
 .theme-accessibility-font-big {
-  font-size: 18pt;
+  font-size: 16pt;
 
   .main-menu {
     font-size: $bigger-font-size;

src/style/themes/theme-accessibility-font-biggest.scss

@@ -1,7 +1,7 @@
 @import "../variables";
 
 .theme-accessibility-font-biggest {
-  font-size: 36pt;
+  font-size: 18pt;
 
   a {
     &:hover {

src/style/themes/theme-accessibility-kerning-big.scss

@@ -0,0 +1,6 @@
+@import "../variables";
+
+.theme-accessibility-kerning-big {
+  line-height: 2rem;
+  letter-spacing: .5rem;
+}

src/style/themes/theme-accessibility-no-image.scss

@@ -0,0 +1,19 @@
+@import "../variables";
+
+.theme-accessibility-no-image {
+  img {
+    display: none;
+  }
+
+  video {
+    display: none;
+  }
+
+  .html5-video-player {
+    display: none;
+  }
+
+  .main-image{
+    display: none;
+  }
+}

src/style/themes/theme-accessibility-white-black.scss

@@ -14,6 +14,10 @@
     }
   }
 
+  .accessibility-control{
+    color: $darker-color;
+  }
+
   .main-menu {
     a {
       color: $darker-color;

src/templates/components/accessibility-control.html

@@ -1,58 +1,75 @@
 <div class="accessibility-control">
-    <ul>
-        <li>
-            <button ng-click="setColorTheme('bw')"
-            >Белым по черному
-            </button>
-        </li>
-        <li>
-            <button ng-click="setColorTheme('wb')"
-            >Черным по белому
-            </button>
-        </li>
-        <!--<li>-->
-            <!--<button ng-click="setTheme('dark-blue')"-->
-            <!--&gt;Темно-синим по голубому-->
-            <!--</button>-->
-        <!--</li>-->
-        <!--<li>-->
-            <!--<button ng-click="setTheme('brown')"-->
-            <!--&gt;Коричневым по бежевому</button>-->
-        <!--</li>-->
-        <!--<li>-->
-            <!--<button ng-click="setTheme('green')"-->
-            <!--&gt;Зеленым по темно-коричневому</button>-->
-        <!--</li>-->
-    </ul>
+    <div class="accessibility-control__block">
+        <span>Цветовая схема: </span>
+        <ul>
+            <li ng-repeat="i in scopes.color">
+                <span
+                        class="actor"
+                        ng-class="{active: isActive('color', i)}"
+                        ng-click="setColorTheme(i[0])"
+                >{{i[1]}}</span>
+            </li>
+        </ul>
+    </div>
 
-    <ul>
-        <li>
-            <button ng-click="setFontTheme('')"
-            >Нормально
-            </button>
-        </li>
-        <li>
-            <button ng-click="setFontTheme('big')"
-            >Большие
-            </button>
-        </li>
-        <li>
-            <button ng-click="setFontTheme('biggest')"
-            >Огромные
-            </button>
+    <div class="accessibility-control__block">
+        <span>Размер шрифта: </span>
+        <ul>
+            <li ng-repeat="i in scopes.fontSize">
+                <span
+                        class="actor"
+                        ng-class="{active: isActive('fontSize', i)}"
+                        ng-click="setFontTheme(i[0])"
+                >{{i[1]}}</span>
         </li>
     </ul>
+    </div>
 
-    <ul>
-        <li>
-            <button ng-click="setFontFamilyTheme('sans')"
-            >Без засечек
-            </button>
-        </li>
-        <li>
-            <button ng-click="setFontFamilyTheme('serif')"
-            >С засечками
-            </button>
-        </li>
-    </ul>
+    <div class="accessibility-control__block">
+        <span>Начертание: </span>
+        <ul>
+            <li ng-repeat="i in scopes.fontFamily">
+                <span
+                        class="actor"
+                        ng-class="{active: isActive('font', i)}"
+                        ng-click="setFontFamilyTheme(i[0])"
+                >{{i[1]}}</span>
+            </li>
+        </ul>
+    </div>
+
+    <div class="accessibility-control__block">
+        <span>Картинки: </span>
+        <ul>
+            <li ng-repeat="i in scopes.image">
+                <span
+                        class="actor"
+                        ng-class="{active: isActive('image', i)}"
+                        ng-click="setImageTheme(i[0])"
+                >{{i[1]}}</span>
+            </li>
+        </ul>
+    </div>
+
+    <div class="accessibility-control__block">
+        <span>Кернинг: </span>
+        <ul>
+            <li ng-repeat="i in scopes.kerning">
+                <span
+                        class="actor"
+                        ng-class="{active: isActive('kerning', i)}"
+                        ng-click="setKerningTheme(i[0])"
+                >{{i[1]}}</span>
+            </li>
+        </ul>
+    </div>
+
+    <div style="margin: 1em 0">
+        <span class="actor"
+              ng-click="setDefaultSettings()"
+        >Стандартная настройка</span>
+        <span class="actor"
+              ng-click="setDefaultTheme()"
+        >Обычный режим</span>
+    </div>
 </div>