Merge branch 'master' into align-with-json-editor-master

Author: dibericky

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### 2.3.0-dev
 
 - Removed codeception container, use `codeceptjs` as node-dev module
+- Enabled Bootstrap 3 theme/icons
 
 ### 2.2.1-current
 
@@ -53,6 +54,7 @@
   - Fix of #629 - BS4 theme bug where basic tab was placed outside tabs container.
   - Improved IMask support for `Date`, `Number`, `IMask.MaskedEnum`, `IMask.MaskedRange` and regular expression masks. #591
   - Added support for recursive callback options.
+  - Fix of #692 - Resolves an issue where modal click detection was not working when the editor is attached inside a shadow DOM by changing the event target to use the path.
 
 ### 2.0.0-alpha-1
 

docs/index.html

@@ -56,6 +56,7 @@ <h2>Options</h2>
                 <label for="theme-select">theme</label><br>
                 <select id='theme-select' name="theme" class='form-control browser-default'>
                     <option value='barebones'>Barebones</option>
+                    <option value='bootstrap3'>Bootstrap 3</option>
                     <option value='bootstrap4'>Bootstrap 4</option>
                     <option value='html'>HTML</option>
                     <option value='spectre'>Spectre</option>
@@ -301,6 +302,7 @@ <h2>Schema</h2>
     // theme
     const themeMap = {
       barebones: '',
+      bootstrap3: 'https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css',
       bootstrap4: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
       html: '',
       spectre: 'https://unpkg.com/spectre.css/dist/spectre.min.css',

package-lock.json

@@ -251,7 +251,11 @@ languages.en = {
   /**
   * Default title for array items
   */
-  default_array_item_title: 'item'
+  default_array_item_title: 'item',
+  /**
+  * Warning when deleting a node
+  */
+  button_delete_node_warning: 'Are you sure you want to remove this node?'
 }
 
 /* Default per-editor options */

src/defaults.js

@@ -4,7 +4,7 @@ import { extend, trigger } from '../utilities.js'
 export class ArrayEditor extends AbstractEditor {
   askConfirmation () {
     if (this.jsoneditor.options.prompt_before_delete === true) {
-      if (window.confirm('Are you sure you want to remove this node?') === false) {
+      if (window.confirm(this.translate('button_delete_node_warning')) === false) {
         return false
       }
     }

src/editors/array.js

@@ -1041,7 +1041,9 @@ export class ObjectEditor extends AbstractEditor {
   }
 
   onOutsideModalClick (e) {
-    if (this.addproperty_holder && !this.addproperty_holder.contains(e.target) && this.adding_property) {
+    if (this.addproperty_holder &&
+      !this.addproperty_holder.contains(e.path[0] || e.composedPath()[0]) &&
+      this.adding_property) {
       e.preventDefault()
       e.stopPropagation()
       this.toggleAddProperty()

src/editors/object.js

@@ -1,5 +1,5 @@
 // import  { bootstrap2Iconlib } from  './bootstrap2.js'
-// import  { bootstrap3Iconlib } from  './bootstrap3.js'
+import { bootstrap3Iconlib } from './bootstrap3.js'
 import { fontawesome3Iconlib } from './fontawesome3.js'
 import { fontawesome4Iconlib } from './fontawesome4.js'
 import { fontawesome5Iconlib } from './fontawesome5.js'
@@ -11,7 +11,7 @@ import { spectreIconlib } from './spectre.js'
 
 export const iconlibs = {
   // bootstrap2: bootstrap2Iconlib,
-  // bootstrap3: bootstrap3Iconlib,
+  bootstrap3: bootstrap3Iconlib,
   fontawesome3: fontawesome3Iconlib,
   fontawesome4: fontawesome4Iconlib,
   fontawesome5: fontawesome5Iconlib,

src/iconlibs/index.js

@@ -1,4 +1,5 @@
 import { AbstractTheme } from '../theme.js'
+import rules from './bootstrap3.css'
 
 export class bootstrap3Theme extends AbstractTheme {
   getSelectInput (options, multiple) {
@@ -300,4 +301,4 @@ export class bootstrap3Theme extends AbstractTheme {
 }
 
 /* Custom stylesheet rules. format: "selector" : "CSS rules" */
-bootstrap3Theme.rules = { 'div[data-schemaid="root"]:after': 'position:relative;color:red;margin:10px 0;font-weight:600;display:block;width:100%;text-align:center;content:"This is an old JSON-Editor 1.x Theme and might not display elements correctly when used with the 2.x version"' }
+bootstrap3Theme.rules = rules

src/themes/bootstrap3.css

@@ -1,7 +1,7 @@
 
 import { htmlTheme } from './html.js'
 // import  { bootstrap2Theme } from  './bootstrap2'
-// import  { bootstrap3Theme } from  './bootstrap3'
+import { bootstrap3Theme } from './bootstrap3.js'
 import { bootstrap4Theme } from './bootstrap4.js'
 // import  { foundationTheme, foundation3Theme, foundation4Theme, foundation5Theme, foundation6Theme } from  './foundation.js'
 import { jqueryuiTheme } from './jqueryui.js'
@@ -13,7 +13,7 @@ import { tailwindTheme } from './tailwind.js'
 export const themes = {
   html: htmlTheme,
   // bootstrap2: bootstrap2Theme,
-  // bootstrap3: bootstrap3Theme,
+  bootstrap3: bootstrap3Theme,
   bootstrap4: bootstrap4Theme,
   // foundation: foundationTheme,
   // foundation3: foundation3Theme,