Fix eclipsesource#566: Improve styling

Author: edgarmueller

example/example.ts

@@ -1,6 +1,11 @@
+import * as _ from 'lodash';
+import {JsonFormsHolder} from '../src/core';
 import {JsonSchema} from '../src/models/jsonSchema';
 import {UISchemaElement} from '../src/models/uischema';
 import {JsonForms} from '../src/json-forms';
+import {Style} from '../src/core/styling.registry';
+
+declare let $;
 declare let exampleDivId;
 declare let viewDivId;
 export interface ExampleDescription {
@@ -44,7 +49,7 @@ const changeExample = (selectedExample: string) => {
 
   body.appendChild(jsonForms);
 };
-const crateExampleSelection = () => {
+const createExampleSelection = (): HTMLSelectElement => {
   const examplesDiv = document.getElementById(exampleDivId);
   const labelExample = document.createElement('label');
   labelExample.textContent = 'Example:';
@@ -57,34 +62,124 @@ const crateExampleSelection = () => {
     const option = document.createElement('option');
     option.value = example.name;
     option.label = example.label;
+    option.text = example.label;
     select.appendChild(option);
   });
   select.onchange = () => (changeExample(select.value));
   examplesDiv.appendChild(select);
   changeExample(select.value);
-}
-const changeStyle = (style: string) => {
+  return select;
+};
+
+const changeTheme = (style: string) => {
   document.body.className = style;
 };
-const createStyleSelection = () => {
-  const examplesDiv = document.getElementById('examples');
-  const labelStyle = document.createElement('label');
-  labelStyle.textContent = 'Style:';
-  labelStyle.htmlFor = 'example_style';
-  examplesDiv.appendChild(labelStyle);
+
+const createThemeSelection = () => {
+  const themeDiv = document.getElementById('theme');
+
   const select = document.createElement('select');
-  select.id = 'example_style';
+  select.id = 'example_theme';
   Object.keys(knownStyles).forEach(key => {
     const style = knownStyles[key];
     const option = document.createElement('option');
     option.value = key;
     option.label = style;
+    option.text = style;
     select.appendChild(option);
   });
-  select.onchange = (ev: Event) => (changeStyle(select.value));
-  examplesDiv.appendChild(select);
+  select.onchange = (ev: Event) => (changeTheme(select.value));
+
+  const themeLabel = document.createElement('label');
+  themeLabel.textContent = 'Theme:';
+  themeLabel.htmlFor = 'example_theme';
+
+  themeDiv.appendChild(themeLabel);
+  themeDiv.appendChild(select);
+};
+
+function createStyleSelection(selectExampleElement: HTMLSelectElement) {
+  const styleDiv = document.getElementById('style');
+  // create select element for selecting style to be applied
+  const selectStyle = document.createElement('select');
+  ['none', 'bootstrap', 'materialize'].forEach(style => {
+    const option = document.createElement('option');
+    option.value = style;
+    option.label = _.capitalize(style);
+    option.text = style;
+    selectStyle.appendChild(option);
+  });
+  selectStyle.onchange = () => {
+    changeStyle(selectStyle.value);
+    // re-render the easy way
+    const currentExample = selectExampleElement.value;
+    changeExample(currentExample);
+  };
+  const styleLabel = document.createElement('label');
+  styleLabel.innerText = 'Style';
+  styleDiv.appendChild(styleLabel);
+  styleDiv.appendChild(selectStyle);
+
+  changeStyle('none');
 }
+
 window.onload = (ev) => {
-  crateExampleSelection();
-  createStyleSelection();
+  const selectExampleElement = createExampleSelection();
+  createThemeSelection();
+  createStyleSelection(selectExampleElement);
 };
+
+function changeStyle(style) {
+  $('select').material_select('destroy');
+  if (style === 'bootstrap') {
+    bootstrap();
+  } else if (style === 'materialize') {
+    material();
+  } else {
+    none();
+  }
+}
+
+function none() {
+  enableLink('example')
+}
+
+function bootstrap() {
+  enableLink('bootstrap');
+  JsonFormsHolder.stylingRegistry.registerMany([
+    {
+      name: 'button',
+      classNames: ['btn', 'btn-primary']
+    },
+    {
+      name: 'select',
+      classNames: ['custom-select']
+    },
+  ]);
+  $('select').attr('class', JsonFormsHolder.stylingRegistry.getAsClassName('select'));
+}
+
+function material() {
+  enableLink('materialize');
+  JsonFormsHolder.stylingRegistry.register(
+    'button',
+    ['btn', 'waves-effect', 'waves-light']
+  );
+  JsonFormsHolder.stylingRegistry.unregister('select');
+  $('select').material_select();
+}
+
+/**
+ * Disables all links and only enables the one containing the wanted href.
+ * This function assumes that all links are CSS links used for styling purposes.
+ *
+ * @param wantedHref a substring of the link's href value, which is to be enabled
+ */
+function enableLink(wantedHref: string): void {
+  const links = $('link').toArray();
+  // disable all links
+  _.forEach(links, link => link.disabled = true);
+  const wantedLink = _.find(links, (link: HTMLLinkElement) => link.href.includes(wantedHref));
+  // enable wanted link
+  wantedLink.disabled = false;
+}

example/templates/uischema-registry.ts

@@ -25,12 +25,14 @@ const tester = (test_uischema, test_data) => 5;
 const setup = (div: HTMLDivElement) => {
   const registerButton = document.createElement('button');
   registerButton.innerText = 'Register UI Schema';
+  registerButton.className = JsonFormsHolder.stylingRegistry.getAsClassName('button');
   registerButton.onclick = () => {
     JsonFormsHolder.uischemaRegistry.register(uischema, tester);
     resetServices();
   };
   div.appendChild(registerButton);
   const unregisterButton = document.createElement('button');
+  unregisterButton.className = JsonFormsHolder.stylingRegistry.getAsClassName('button');
   unregisterButton.innerText = 'Unregister UI Schema';
   unregisterButton.onclick = () => {
     JsonFormsHolder.uischemaRegistry.unregister(uischema, tester);

example_plain/index.html

@@ -7,12 +7,35 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="assets/native-shim.js"></script>
-  <script src="assets/bundle.js"></script>
+
+  <!-- JQuery is needed for both, Bootstrap 4 as well as materialize -->
+  <script src="assets/jquery.js"></script>
+
+  <!-- Materialize CSS -->
+  <link rel="stylesheet" href="assets/materialize.css">
+
+  <!-- Bootstrap 4 CSS -->
+  <link rel="stylesheet" href="assets/bootstrap.css">
+
+  <!-- Plain CSS -->
   <link rel="stylesheet" href="assets/example.css">
+
+  <!-- Bootstrap JS, if we need it, it must be loaded before materialize JS, otherwise the select elements seem to break -->
+  <!--<script src="assets/bootstrap.js"></script>-->
+
+  <!-- materialize JS -->
+  <script src="assets/materialize.js"></script>
+  <script src="assets/bundle.js"></script>
 </head>
 <body>
-  <div id="examples"></div>
+<div id="root">
+  <div id="toolbar">
+    <div id="examples"></div>
+    <div id="theme"></div>
+    <div id="style"></div>
+  </div>
   <div id="view"></div>
+</div>
 </body>
 <script>
   exampleDivId = 'examples';

package.json

@@ -39,13 +39,16 @@
     "@types/gulp": "3.8.28",
     "ava": "^0.18.1",
     "awesome-typescript-loader": "^3.0.0-beta.18",
+    "bootstrap": "^4.0.0-alpha.6",
     "copy-webpack-plugin": "^4.0.1",
     "coveralls": "^2.11.16",
     "document-register-element": "^1.4.1",
     "file-loader": "^0.10.0",
+    "jquery": "^3.2.1",
     "jsdom": "^9.11.0",
     "jsdom-global": "2.1.1",
     "lite-server": "^2.3.0",
+    "materialize-css": "^0.98.2",
     "ncp": "^2.0.0",
     "nyc": "^10.1.2",
     "source-map-loader": "^0.1.6",

src/core.ts

@@ -3,6 +3,7 @@ import {JsonSchema} from './models/jsonSchema';
 import {UiSchemaRegistry, UiSchemaRegistryImpl} from './core/uischema.registry';
 import {DataService} from './core/data.service';
 import {RendererService} from './core/renderer.service';
+import {StylingRegistry, StylingRegistryImpl} from './core/styling.registry';
 
 export interface JsonFormService {
   dispose(): void;
@@ -17,4 +18,5 @@ export class JsonFormsHolder {
   public static rendererService = new RendererService();
   public static jsonFormsServices: Array<JsonFormsServiceConstructable> = [];
   public static uischemaRegistry: UiSchemaRegistry = new UiSchemaRegistryImpl();
+  public static stylingRegistry: StylingRegistry = new StylingRegistryImpl();
 }

src/core/styling.registry.ts

@@ -0,0 +1,97 @@
+import * as _ from 'lodash';
+
+export interface Style {
+    name: string
+    classNames: Array<string>
+}
+
+export interface StylingRegistry {
+    /**
+     * Register a style.
+     * If a style with the given name already exists, it will be overwritten.
+     *
+     * @param styleName the name of the style
+     * @param classNames CSS class names to be applied
+     */
+    register(styleName: string, classNames: Array<string>): void;
+
+    /**
+     * Register a style.
+     * If a style with the given name already exists, it will be overwritten.
+     *
+     * @param style the style to be registered
+     */
+    register(style: Style): void;
+
+    /**
+     * Register multiple styles at once.
+     *
+     * @param styles an array of styles to be registered
+     */
+    registerMany(styles: Array<Style>): void;
+
+    /**
+     * Un-register a style.
+     *
+     * @param styleName the name of the style to be un-registered
+     */
+    unregister(styleName: string): void;
+
+    /**
+     * Obtain the CSS class name associated with the given style name.
+     * @param styleName the name whose CSS class names should be obtained
+     * @return an array containing the CSS class names, if the style exists, an empty array otherwise
+     */
+    get(styleName: string): Array<string>
+
+    /**
+     * Obtain the CSS class name associated with the given style name.
+     * @param styleName the name whose CSS class names should be obtained
+     * @return a string containing the CSS class name separated by whitespace, if the style exists,
+     *         empty string otherwise
+     */
+    getAsClassName(styleName: string): string
+}
+
+export class StylingRegistryImpl implements StylingRegistry {
+
+    constructor(protected styles: Array<Style> = []) {
+
+    }
+
+    register(style: Style): void;
+    register(name: string, classNames: string[]): void;
+    register(style: string|Style, classNames?: string[]): void {
+        if (typeof style === 'string') {
+            this.unregister(style);
+            this.styles.push({name: style, classNames});
+        } else {
+            this.unregister(style.name);
+            this.styles.push(style);
+        }
+    }
+
+    registerMany(styles: Array<Style>) {
+        styles.forEach(style => this.register(style.name, style.classNames))
+    }
+
+    unregister(styleName: any) {
+        _.remove(this.styles, style => style.name === styleName);
+    }
+
+    get(styleName: string): string[] {
+        const foundStyle = _.find(this.styles, style => style.name === styleName);
+        if (foundStyle) {
+            return foundStyle.classNames;
+        }
+        return [];
+    }
+
+    getAsClassName(styleName: string): string {
+        const styles = this.get(styleName);
+        if (_.isEmpty(styles)) {
+            return '';
+        }
+        return _.join(styles, ' ');
+    }
+}

src/renderers/additional/array-renderer.ts

@@ -8,6 +8,7 @@ import { resolveSchema } from '../../path.util';
 import { JsonSchema } from '../../models/jsonSchema';
 import { getElementLabelObject } from '../label.util';
 import { RankedTester, rankWith, and, uiTypeIs, schemaMatches } from '../../core/testers';
+import { JsonFormsHolder } from '../../core';
 
 export const arrayTester: RankedTester = rankWith(2, and(
     uiTypeIs('Control'),
@@ -85,6 +86,7 @@ export class ArrayControlRenderer extends Renderer implements DataChangeListener
     div.appendChild(content);
 
     const button = document.createElement('button');
+    button.className = JsonFormsHolder.stylingRegistry.getAsClassName('button');
     button.textContent = `Add to ${labelObject.text}`;
     button.onclick = (ev: Event) => {
       if (arrayData === undefined) {