#15 - Custom color config & handling

Author: fredevery

README.md

@@ -43,6 +43,15 @@ new Typester({
     configs: {
         toolbar: {
             buttons: ['bold', 'italic', 'h1', 'h2', 'orderedlist', 'unorderedlist', 'quote', 'link']
+        },
+
+        styles: {
+          colors: {
+            flyoutBg: 'rgb(32, 31, 32)',
+            menuItemIcon: 'rgb(255, 255, 255)',
+            menuItemHover: 'rgb(0, 174, 239)',
+            menuItemActive: 'rgb(0, 156, 215)'
+          }
         }
     }
 });

src/scripts/config/styles.js

@@ -0,0 +1,8 @@
+export default {
+    colors: {
+        flyoutBg: 'rgb(32, 31, 32)',
+        menuItemIcon: 'rgb(255, 255, 255)',
+        menuItemHover: 'rgb(0, 174, 239)',
+        menuItemActive: 'rgb(0, 156, 215)'
+    }
+};

src/scripts/containers/UIContainer.js

@@ -19,6 +19,7 @@ import Container from '../core/Container';
 import Toolbar from '../modules/Toolbar';
 import Flyout from '../modules/Flyout';
 import Mouse from '../modules/Mouse';
+import Styles from '../modules/Styles';
 
 /**
  * @constructor UIContainer
@@ -32,7 +33,7 @@ const UIContainer = Container({
     /**
      * Child Modules: [{@link modules/Flyout}, {@link modules/Toolbar}]
      * Note: The Toobar is instantiated with the document body set as it's dom.el.
-     * @enum {Array<{class:Module}>} modules    
+     * @enum {Array<{class:Module}>} modules
      */
     modules: [
         {
@@ -48,6 +49,9 @@ const UIContainer = Container({
         },
         {
             class: Mouse
+        },
+        {
+            class: Styles
         }
     ]
 });

src/scripts/modules/Config.js

@@ -1,11 +1,12 @@
 import Module from '../core/Module';
 import toolbarConfig from '../config/toolbar';
 import config from '../config/config';
+import stylesConfig from '../config/styles';
 
 const Config = Module({
     name: 'Config',
     props: {},
-    acceptsConfigs: ['toolbar'],
+    acceptsConfigs: ['toolbar', 'styles'],
 
     handlers: {
         requests: {
@@ -16,7 +17,8 @@ const Config = Module({
             'config:toolbar:listTags' : 'getToolbarListTags',
             'config:toolbar:preventNewlineDefault' : 'getToolbarPreventNewlineDefault',
             'config:blockElementNames' : 'getConfigBlockElementNames',
-            'config:defaultBlock' : 'getDefaultBlock'
+            'config:defaultBlock' : 'getDefaultBlock',
+            'config:styles': 'getStyles'
         }
     },
 
@@ -70,6 +72,13 @@ const Config = Module({
 
         getDefaultBlock () {
             return config.defaultBlock;
+        },
+
+        getStyles () {
+            const { configs } = this;
+            return {
+                colors: Object.assign({}, stylesConfig.colors, configs.styles.colors)
+            };
         }
     }
 });

src/scripts/modules/Styles.js

@@ -0,0 +1,92 @@
+// jshint strict: false
+
+/**
+ * Styles -
+ * Handle the creation and embedding of custom styles.
+ * @access protected
+ * @module modules/Styles
+ */
+
+import Module from '../core/Module';
+
+const Styles = Module({
+    name: 'Styles',
+
+    props: {
+        stylesheet: null,
+    },
+
+    handlers: {},
+
+    methods: {
+        setup () {
+            this.createStylesheet();
+        },
+
+        init () {
+            const { mediator } = this;
+            const config = mediator.get('config:styles');
+            let stylesheetContent = this.stylesTemplate(config);
+
+            this.appendStylesheet();
+            this.updateStylesheet(stylesheetContent);
+        },
+
+        stylesTemplate (config) {
+            return `
+                .typester-toolbar .typester-menu-item,
+                .typester-input-form input[type=text],
+                .typester-link-display a,
+                .typester-input-form button {
+                    color: ${config.colors.menuItemIcon};
+                }
+
+                .typester-toolbar .typester-menu-item svg,
+                .typester-link-display .typester-link-edit svg,
+                .typester-input-form button svg {
+                    fill: ${config.colors.menuItemIcon};
+                }
+
+                .typester-input-form button svg {
+                    stroke: ${config.colors.menuItemIcon};
+                }
+
+                .typester-toolbar .typester-menu-item:hover,
+                .typester-link-display .typester-link-edit:hover
+                .typester-input-form button:hover {
+                    background: ${config.colors.menuItemHover};
+                }
+
+                .typester-toolbar .typester-menu-item.s--active {
+                    background: ${config.colors.menuItemActive};
+                }
+
+                .typester-flyout .typester-flyout-content {
+                    background: ${config.colors.flyoutBg};
+                }
+
+                .typester-flyout.place-above .typester-flyout-arrow {
+                    border-top-color: ${config.colors.flyoutBg};
+                }
+
+                .typester-flyout.place-below .typester-flyout-arrow {
+                    border-bottom-color: ${config.colors.flyoutBg};
+                }
+            `;
+        },
+
+        createStylesheet () {
+            this.stylesheet = document.createElement('style');
+        },
+
+        appendStylesheet () {
+            document.head.appendChild(this.stylesheet);
+        },
+
+        updateStylesheet (stylesheetContent) {
+            this.stylesheet.textContent = stylesheetContent;
+        }
+    }
+});
+
+export default Styles;

src/templates/inputForm.html

@@ -3,7 +3,7 @@
     <button type='submit'>
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              viewBox="0 180 20 20" enable-background="new 0 180 20 20" xml:space="preserve" height="20px" width="20px">
-             <polyline class="checkmark-2" fill="none" stroke="#FFFFFF" stroke-width="5.3" stroke-miterlimit="10" points="1.9,188.8 7.5,194.4 18.1,183.9 "/>
+             <polyline class="checkmark-2" fill="none" stroke-width="5.3" stroke-miterlimit="10" points="1.9,188.8 7.5,194.4 18.1,183.9 "/>
         </svg>
     </button>
     <button type='cancel'>

test/server/html/index.html

@@ -120,6 +120,14 @@ <h1>Typester test server</h1>
                 // toolbar: {
                 //   buttons: ['bold', 'italic', 'h1', 'h2', 'orderedlist', 'unorderedlist', 'quote', 'link']
                 // }
+                styles: {
+                  colors: {
+                    flyoutBg: '#C00',
+                    menuItemIcon: '#00C',
+                    menuItemHover: '#0C0',
+                    menuItemActive: '#0A0'
+                  }
+                }
               }
           });
         </script>