Merge pull request jdorn#778 from tohosaku/default_style

Some theme related fixes

Author: schmunk42

.gitignore

@@ -6,6 +6,7 @@
 /tests/codeceptjs/output
 .vscode
 .env
+/src/*.css.js
 /src/themes/*.css.js
 /src/editors/*.css.js
 /.vs

src/core.js

@@ -9,6 +9,7 @@ import { extend, getShadowParent, hasOwnProperty } from './utilities.js'
 import { AbstractEditor } from './editor'
 import { AbstractTheme } from './theme'
 import { AbstractIconLib } from './iconlib'
+import styleRules from './style.css.js'
 
 export class JSONEditor {
   constructor (element, options = {}) {
@@ -31,13 +32,20 @@ export class JSONEditor {
     this.element.setAttribute('data-theme', themeName)
     // eslint-disable-next-line new-cap
     this.theme = new themeClass(this)
-    const rules = extend(themeClass.rules, this.getEditorsRules())
+    const rules = extend(styleRules, this.getEditorsRules())
+
+    /* Call addNewStyleRulesToShadowRoot if shadowRoot is found, otherwise call addNewStyleRules */
+    const addRules = (themeName, rules, shadowRoot) => shadowRoot
+      ? this.addNewStyleRulesToShadowRoot(themeName, rules, shadowRoot)
+      : this.addNewStyleRules(themeName, rules)
+
     if (!this.theme.options.disable_theme_rules) {
       /* Attempt to locate a shadowRoot parent (i.e. in Web Components) */
       const shadowRoot = getShadowParent(this.element)
-
-      /* Call addNewStyleRulesToShadowRoot if shadowRoot is found, otherwise call addNewStyleRules */
-      this[shadowRoot ? 'addNewStyleRulesToShadowRoot' : 'addNewStyleRules'](themeName, rules, shadowRoot)
+      addRules('default', rules, shadowRoot)
+      if (typeof themeClass.rules !== 'undefined') {
+        addRules(themeName, themeClass.rules, shadowRoot)
+      }
     }
 
     /* Init icon class */
@@ -365,9 +373,11 @@ export class JSONEditor {
 
     const sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet
     const qualifier = this.element.nodeName.toLowerCase()
-
+    while (sheet.cssRules.length > 0) {
+      sheet.deleteRule(0)
+    }
     Object.keys(rules).forEach(selector => {
-      const sel = `${qualifier}[data-theme="${themeName}"] ${selector}`
+      const sel = themeName === 'default' ? selector : `${qualifier}[data-theme="${themeName}"] ${selector}`
 
       // all browsers, except IE before version 9
       if (sheet.insertRule) sheet.insertRule(sel + ' {' + decodeURIComponent(rules[selector]) + '}', 0)
@@ -381,7 +391,7 @@ export class JSONEditor {
     let cssText = ''
 
     Object.keys(rules).forEach(selector => {
-      const sel = `${qualifier}[data-theme="${themeName}"] ${selector}`
+      const sel = themeName === 'default' ? selector : `${qualifier}[data-theme="${themeName}"] ${selector}`
       cssText += sel + ' {' + decodeURIComponent(rules[selector]) + '}' + '\n'
     })
     const styleSheet = new CSSStyleSheet()

src/editors/array.css

@@ -0,0 +1,9 @@
+.json-editor-btntype-toggle {
+  margin: 0 10px 0 0;
+}
+
+.je-array-control-btn {
+  width: 100%;
+  text-align: left;
+  margin-bottom: 3px
+}

src/editors/array.js

@@ -1,5 +1,6 @@
 import { AbstractEditor } from '../editor.js'
 import { extend, trigger } from '../utilities.js'
+import rules from './array.css.js'
 
 export class ArrayEditor extends AbstractEditor {
   askConfirmation () {
@@ -631,7 +632,6 @@ export class ArrayEditor extends AbstractEditor {
     this.collapsed = false
     this.toggle_button = this.getButton('', 'collapse', this.translate('button_collapse'))
     this.toggle_button.classList.add('json-editor-btntype-toggle')
-    this.toggle_button.style.margin = '0 10px 0 0'
     this.title.insertBefore(this.toggle_button, this.title.childNodes[0])
 
     const rowHolderDisplay = this.row_holder.style.display
@@ -742,17 +742,9 @@ export class ArrayEditor extends AbstractEditor {
     this.controls.appendChild(this.remove_all_rows_button)
 
     if (this.tabs) {
-      this.add_row_button.style.width = '100%'
-      this.add_row_button.style.textAlign = 'left'
-      this.add_row_button.style.marginBottom = '3px'
-
-      this.delete_last_row_button.style.width = '100%'
-      this.delete_last_row_button.style.textAlign = 'left'
-      this.delete_last_row_button.style.marginBottom = '3px'
-
-      this.remove_all_rows_button.style.width = '100%'
-      this.remove_all_rows_button.style.textAlign = 'left'
-      this.remove_all_rows_button.style.marginBottom = '3px'
+      this.add_row_button.classList.add('je-array-control-btn')
+      this.delete_last_row_button.classList.add('je-array-control-btn')
+      this.remove_all_rows_button.classList.add('je-array-control-btn')
     }
   }
 
@@ -788,3 +780,4 @@ export class ArrayEditor extends AbstractEditor {
     )
   }
 }
+ArrayEditor.rules = rules

src/editors/object.css

@@ -0,0 +1,41 @@
+.je-object__title {
+  display: inline-block
+}
+
+.je-object__controls {
+  margin: 0 0 0 10px
+}
+
+.je-object__container {
+  position: relative
+}
+
+.je-object__property-checkbox {
+  margin: 0;
+  height: auto;
+}
+
+.property-selector {
+  width: 295px;
+  max-height: 160px;
+  padding: 5px 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-left: 5px
+}
+
+.property-selector-input {
+  width: 220px;
+  margin-bottom: 0;
+  display: inline-block;
+}
+
+.json-editor-btntype-toggle {
+  margin: 0 10px 0 0;
+}
+
+.je-edit-json--textarea {
+  height: 170px !important;
+  width: 300px !important;
+  display: block;
+}

src/editors/object.js

@@ -1,5 +1,6 @@
 import { AbstractEditor } from '../editor.js'
 import { extend, trigger, hasOwnProperty } from '../utilities.js'
+import rules from './object.css.js'
 
 export class ObjectEditor extends AbstractEditor {
   constructor (options, defaults, depth) {
@@ -552,19 +553,18 @@ export class ObjectEditor extends AbstractEditor {
         this.header.textContent = this.getTitle()
       }
       this.title = this.theme.getHeader(this.header)
+      this.title.classList.add('je-object__title')
       this.controls = this.theme.getButtonHolder()
-      this.controls.style.margin = '0 0 0 10px'
+      this.controls.classList.add('je-object__controls')
 
       this.container.appendChild(this.title)
       this.container.appendChild(this.controls)
-      this.container.style.position = 'relative'
+      this.container.classList.add('je-object__container')
 
       /* Edit JSON modal */
       this.editjson_holder = this.theme.getModal()
       this.editjson_textarea = this.theme.getTextareaInput()
-      this.editjson_textarea.style.height = '170px'
-      this.editjson_textarea.style.width = '300px'
-      this.editjson_textarea.style.display = 'block'
+      this.editjson_textarea.classList.add('je-edit-json--textarea')
       this.editjson_save = this.getButton('Save', 'save', 'Save')
       this.editjson_save.classList.add('json-editor-btntype-save')
       this.editjson_save.addEventListener('click', (e) => {
@@ -594,20 +594,13 @@ export class ObjectEditor extends AbstractEditor {
       /* Manage Properties modal */
       this.addproperty_holder = this.theme.getModal()
       this.addproperty_list = document.createElement('div')
-      this.addproperty_list.style.width = '295px'
-      this.addproperty_list.style.maxHeight = '160px'
-      this.addproperty_list.style.padding = '5px 0'
-      this.addproperty_list.style.overflowY = 'auto'
-      this.addproperty_list.style.overflowX = 'hidden'
-      this.addproperty_list.style.paddingLeft = '5px'
-      this.addproperty_list.setAttribute('class', 'property-selector')
+      this.addproperty_list.classList.add('property-selector')
       this.addproperty_add = this.getButton('add', 'add', 'add')
       this.addproperty_add.classList.add('json-editor-btntype-add')
+
       this.addproperty_input = this.theme.getFormInputField('text')
       this.addproperty_input.setAttribute('placeholder', 'Property name...')
-      this.addproperty_input.style.width = '220px'
-      this.addproperty_input.style.marginBottom = '0'
-      this.addproperty_input.style.display = 'inline-block'
+      this.addproperty_input.classList.add('property-selector-input')
       this.addproperty_add.addEventListener('click', (e) => {
         e.preventDefault()
         e.stopPropagation()
@@ -716,7 +709,6 @@ export class ObjectEditor extends AbstractEditor {
       /* Show/Hide button */
       this.collapsed = false
       this.collapse_control = this.getButton('', 'collapse', this.translate('button_collapse'))
-      this.collapse_control.style.margin = '0 10px 0 0'
       this.collapse_control.classList.add('json-editor-btntype-toggle')
       this.title.insertBefore(this.collapse_control, this.title.childNodes[0])
 
@@ -1264,3 +1256,5 @@ export class ObjectEditor extends AbstractEditor {
     })
   }
 }
+
+ObjectEditor.rules = rules

src/editors/table.js

@@ -415,7 +415,6 @@ export class TableEditor extends ArrayEditor {
     this.collapsed = false
     this.toggle_button = this.getButton('', 'collapse', this.translate('button_collapse'))
     this.toggle_button.classList.add('json-editor-btntype-toggle')
-    this.toggle_button.style.margin = '0 10px 0 0'
     if (this.title_controls) {
       this.title.insertBefore(this.toggle_button, this.title.childNodes[0])
       this.toggle_button.addEventListener('click', e => {

src/style.css

@@ -0,0 +1,150 @@
+.je-float-right-linkholder {
+  float: right;
+  margin-left: 10px;
+}
+
+.je-modal {
+  background-color: white;
+  border: 1px solid black;
+  box-shadow: 3px 3px black;
+  position: absolute;
+  z-index: 10;
+}
+
+.je-infobutton-icon {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 0.25rem;
+  position: relative;
+  display: inline-block;
+}
+
+.je-infobutton-tooltip {
+  font-size: 12px;
+  font-weight: normal;
+  font-family: sans-serif;
+  visibility: hidden;
+  background-color: rgba(50, 50, 50, 0.75);
+  margin: 0 0.25rem;
+  color: #fafafa;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  width: 20rem;
+  position: absolute;
+}
+
+.je-header {
+  display: inline-block
+}
+
+.je-upload-preview img {
+  float: left;
+  margin: 0 0.5rem 0.5rem 0;
+  max-width: 100%;
+  max-height: 5rem;
+}
+
+.je-checkbox {
+  display: inline-block;
+  width: auto
+}
+
+.je-checkbox-control--compact {
+  display: inline-block;
+  margin-right: 1rem
+}
+
+.je-radio {
+  display: inline-block;
+  width: auto
+}
+
+.je-radio-control--compact {
+  display: inline-block;
+  margin-right: 1rem
+}
+
+.je-switcher {
+  background-color: transparent;
+  display: inline-block;
+  font-style: italic;
+  font-weight: normal;
+  height: auto;
+  width: auto;
+  margin-bottom: 0;
+  margin-left: 5px;
+  padding: 0 0 0 3px;
+}
+
+.je-textarea {
+  width: 100%;
+  height: 300px;
+  box-sizing: border-box
+}
+
+.je-range-control {
+  text-align: center
+}
+
+.je-indented-panel {
+  padding-left: 10px;
+  margin-left: 10px;
+  border-left: 1px solid #ccc
+}
+
+.je-indented-panel--top {
+  padding-left: 10px;
+  margin-left: 10px;
+}
+
+.je-tabholder {
+  float: left;
+  width: 130px;
+}
+
+.je-tabholder .content {
+  margin-left: 120px;
+}
+
+.je-tabholder--top {
+  margin-left: 10px;
+}
+
+.je-tabholder--clear {
+  clear:both;
+}
+
+.je-tab {
+  border: 1px solid #ccc;
+  border-width: 1px 0 1px 1px;
+  text-align: center;
+  line-height: 30px;
+  border-radius: 5px;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  font-weight: bold;
+  cursor: pointer
+}
+
+.je-tab--top {
+  float: left;
+  border: 1px solid #ccc;
+  border-width: 1px 1px 0px 1px;
+  text-align: center;
+  line-height: 30px;
+  border-radius: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  font-weight: bold;
+  cursor: pointer
+}
+
+.je-block-link {
+  display: block
+}
+
+.je-media {
+  width: 100%
+}