Merge pull request jdorn#781 from tohosaku/theme_options

Enable theme options

Author: schmunk42

README_ADDON.md

@@ -464,11 +464,11 @@ window.JSONEditor.defaults.callbacks.cleave = {
 
 
 
-#Themes
+# Themes
 
 Themes have own options for changing various aspects of the display.
 
-##Bootstrap 4
+## Bootstrap 4
 
 | Option           | Default | Description
 | ------------- | ------ | -----
@@ -481,7 +481,7 @@ Themes have own options for changing various aspects of the display.
 | `table_zebrastyle`  | `false` | Add "zebra style" to array "table" rows
 | `tooltip`  | `bootstrap` | how to display tooltips (infoText). Can be `browser` for native `[title]`, `css` for simple CSS Styling, or `bootstrap` for TWBS/Popper.js handling
 
-##Spectre
+## Spectre
 
 | Option           | Default | Description
 | ------------- | ------ | -----
@@ -493,7 +493,7 @@ Themes have own options for changing various aspects of the display.
 | `table_border`  | `false` | Add border to array "table" row and cells
 | `table_zebrastyle`  | `false` | Add "zebra style" to array "table" rows
 
-##Tailwind
+## Tailwind
 
 | Option           | Default | Description
 | ------------- | ------ | -----
@@ -506,4 +506,3 @@ Themes have own options for changing various aspects of the display.
 | `table_border`  | `false` | Add border to array "table" row and cells
 | `table_hdiv`  | `false` | Add bottom-border to array "table" cells
 | `table_zebrastyle`  | `false` | Add "zebra style" to array "table" rows
-

src/theme.js

@@ -8,7 +8,11 @@ const matchKey = [
 export class AbstractTheme {
   constructor (jsoneditor, options = { disable_theme_rules: false }) {
     this.jsoneditor = jsoneditor
-
+    Object.keys(options).forEach(key => {
+      if (typeof jsoneditor.options[key] !== 'undefined') {
+        options[key] = jsoneditor.options[key]
+      }
+    })
     /* Theme config options that allows changing various aspects of the output */
     this.options = options
   }

tests/codeceptjs/themes_test.js

@@ -43,6 +43,9 @@ Scenario('It should display button Labels: spectre | null', async (I) => {
   I.waitForText('Delete All')
   I.waitForText('Move down')
   I.waitForText('Move up')
+  I.seeElement('.table-striped') // can see when theme options is enabled
+  I.seeElement('.je-table-border') // can see when theme options is enabled
+  I.dontSeeElement('.je-noindent') // can't see when theme options is enabled
 })
 
 /*
@@ -76,7 +79,8 @@ Scenario('It should display button Labels: jqueryui | null', async (I) => {
 })
 */
 
-/*Scenario('It should display button Labels: foundation6 | null', async (I) => {
+/*
+Scenario('It should display button Labels: foundation6 | null', async (I) => {
   I.amOnPage('themes.html')
   I.selectOption('theme', 'Foundation 6')
   I.waitForText('Themes Test Page')

tests/pages/themes.html

@@ -471,6 +471,10 @@
         remove_button_labels: true,
         theme: theme,
         iconlib: iconlib,
+        object_indent: true,
+        object_border: true,
+        table_zebrastyle: true,
+        table_border: true
       });
     }