Merge a92dbc4 into 8ebdefe

eclipsesource · Jun 1, 2017 · cc8cb35 · cc8cb35
2 parents 8ebdefe + a92dbc4
commit cc8cb35
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 164 deletions.
diff --git a/example/example.css b/example/example.css
@@ -14,46 +14,6 @@ body {
   margin: 0;
   padding: 1em;
 }
-
-body.dark {
-  --jsf-main-bg-color: #222227;
-  --jsf-modest-bg-color: #333333;
-  --jsf-border-color: #444444;
-  --jsf-modest-bg-highlight-color: #444444;
-  --jsf-validation-color: darkred;
-  --jsf-main-fg-color: #999999;
-  background-color: var(--jsf-main-bg-color);
-  color: var(--jsf-main-fg-color);
-}
-body.dark select {
-  background-color: var(--jsf-main-bg-color);
-  color: var(--jsf-main-fg-color);
-  border-color: var(--jsf-border-color);
-}
-body.dark textarea {
-  background-color: var(--jsf-main-bg-color);
-  color: var(--jsf-main-fg-color);
-}
-body.dark button {
-  background-color: var(--jsf-modest-bg-color);
-  color: var(--jsf-main-fg-color);
-}
-body.labelFixed .control {
-  flex-direction: row;
-}
-body.labelFixed .control > label {
-  min-width: 10em;
-  text-align: end;
-  margin-right: 1em;
-}
-body.labelFixed .control > .input {
-  flex: 1;
-}
-/* Workaround for https://bugs.chromium.org/p/chromium/issues/detail?id=375693 */
-/*body.labelFixed .control > fieldset {
-  display: block;
-  width: 100%;
-}*/
 /* Common */
 [hidden] {display: none;}
 /* Controls */

diff --git a/example/example.dark.css b/example/example.dark.css
@@ -0,0 +1,30 @@
+body.dark {
+  --jsf-main-bg-color: #222227;
+  --jsf-modest-bg-color: #333333;
+  --jsf-border-color: #444444;
+  --jsf-modest-bg-highlight-color: #444444;
+  --jsf-validation-color: darkred;
+  --jsf-main-fg-color: #999999;
+  background-color: var(--jsf-main-bg-color);
+  color: var(--jsf-main-fg-color);
+}
+body.dark input {
+  background-color: var(--jsf-main-bg-color);
+  color: var(--jsf-main-fg-color);
+}
+body.dark input:focus {
+  background-color: var(--jsf-main-bg-color);
+}
+body.dark select {
+  background-color: var(--jsf-main-bg-color);
+  color: var(--jsf-main-fg-color);
+  border-color: var(--jsf-border-color);
+}
+body.dark textarea {
+  background-color: var(--jsf-main-bg-color);
+  color: var(--jsf-main-fg-color);
+}
+body.dark button {
+  background-color: var(--jsf-modest-bg-color);
+  color: var(--jsf-main-fg-color);
+}
diff --git a/example/example.labelfixed.css b/example/example.labelfixed.css
@@ -0,0 +1,16 @@
+body.labelFixed .control {
+  flex-direction: row;
+}
+body.labelFixed .control > label {
+  min-width: 10em;
+  text-align: end;
+  margin-right: 1em;
+}
+body.labelFixed .control > .input {
+  flex: 1;
+}
+/* Workaround for https://bugs.chromium.org/p/chromium/issues/detail?id=375693 */
+/*body.labelFixed .control > fieldset {
+  display: block;
+  width: 100%;
+}*/
diff --git a/example/example.ts b/example/example.ts
@@ -1,11 +1,9 @@
-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 {
@@ -17,15 +15,11 @@ export interface ExampleDescription {
   setupCallback?: (div: HTMLDivElement) => void;
 }
 let knownExamples: {[key: string]: ExampleDescription} = {};
-let knownStyles : {[key: string]: string} = {
-  normal: 'Normal Label Top',
-  dark: 'Dark label Top',
-  labelFixed: 'Label left Fixed'
-};
+
 export const registerExamples = (examples: Array<ExampleDescription>): void => {
   examples.forEach(example => knownExamples[example.name] = example);
 };
-const changeExample = (selectedExample: string) => {
+export const changeExample = (selectedExample: string) => {
   let body = document.getElementById(viewDivId);
   if (body.firstChild) {
     body.removeChild(body.firstChild);
@@ -49,7 +43,7 @@ const changeExample = (selectedExample: string) => {
 
   body.appendChild(jsonForms);
 };
-const createExampleSelection = (): HTMLSelectElement => {
+export const createExampleSelection = (): HTMLSelectElement => {
   const examplesDiv = document.getElementById(exampleDivId);
   const labelExample = document.createElement('label');
   labelExample.textContent = 'Example:';
@@ -70,116 +64,3 @@ const createExampleSelection = (): HTMLSelectElement => {
   changeExample(select.value);
   return select;
 };
-
-const changeTheme = (style: string) => {
-  document.body.className = style;
-};
-
-const createThemeSelection = () => {
-  const themeDiv = document.getElementById('theme');
-
-  const select = document.createElement('select');
-  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) => (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) => {
-  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;
-}
diff --git a/example/index.ts b/example/index.ts
@@ -1,4 +1,6 @@
-import './example';
+import {createExampleSelection} from './example';
+import {createThemeSelection} from './theme.switcher';
+import {createStyleSelection} from './style.switcher';
 import './templates/arrays';
 import './templates/day2';
 import './templates/day4';
@@ -15,3 +17,9 @@ import './templates/categorization';
 import './templates/masterdetail';
 import './templates/resolve';
 import './templates/uischema-registry';
+
+window.onload = (ev) => {
+  const selectExampleElement = createExampleSelection();
+  createThemeSelection();
+  createStyleSelection(selectExampleElement);
+};
diff --git a/example/style.switcher.ts b/example/style.switcher.ts
@@ -0,0 +1,87 @@
+import * as _ from 'lodash';
+import {JsonFormsHolder} from '../src/core';
+import {changeExample} from './example';
+declare let $;
+
+export const 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');
+}
+
+
+
+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 wantedLinks = _.filter(links, (link: HTMLLinkElement) => link.href.includes(wantedHref)
+    || link.href.includes('dark') || link.href.includes('labelfixed'));
+  // enable wanted link
+  _.forEach(wantedLinks, (wantedLink) => {wantedLink.disabled = false; });
+}
diff --git a/example/theme.switcher.ts b/example/theme.switcher.ts
@@ -0,0 +1,30 @@
+const knownThemes : {[key: string]: string} = {
+  normal: 'Normal Label Top',
+  dark: 'Dark label Top',
+  labelFixed: 'Label left Fixed'
+};
+const changeTheme = (style: string) => {
+  document.body.className = style;
+};
+export const createThemeSelection = () => {
+  const themeDiv = document.getElementById('theme');
+
+  const select = document.createElement('select');
+  select.id = 'example_theme';
+  Object.keys(knownThemes).forEach(key => {
+    const style = knownThemes[key];
+    const option = document.createElement('option');
+    option.value = key;
+    option.label = style;
+    option.text = style;
+    select.appendChild(option);
+  });
+  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);
+};
diff --git a/example_plain/index.html b/example_plain/index.html
@@ -19,6 +19,8 @@
 
   <!-- Plain CSS -->
   <link rel="stylesheet" href="assets/example.css">
+  <link rel="stylesheet" href="assets/example.dark.css">
+  <link rel="stylesheet" href="assets/example.labelfixed.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>-->