Skip to content

Commit

Permalink
Merge pull request jdorn#838 from germanbisurgi/master
Browse files Browse the repository at this point in the history 
Fix Babel not transpilling Bug. Fix checkbox editor not displaying error messages Bug
  • Loading branch information
@schmunk42
schmunk42 authored Oct 19, 2020
2 parents cb10e1c + 08a1170 commit 9109d1f
Show file tree
Hide file tree
Showing 6 changed files with 168 additions and 98 deletions.
9 changes: 8 additions & 1 deletion config/webpack.common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,11 @@ module.exports = {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
['@babel/preset-env', {
useBuiltIns: 'usage',
corejs: 3,
debug: false
}]
]
}
}
Expand All @@ -60,6 +64,9 @@ module.exports = {
pattern: './src/**/*.css'
})
],
performance: {
hints: false
},
devServer: {
contentBase: helpers.root('.'),
historyApiFallback: true,
Expand Down
28 changes: 0 additions & 28 deletions config/webpack.prod.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,6 @@ const commonConfig = require('./webpack.common.js')
const helpers = require('./helpers')

module.exports = () => {
commonConfig.module.rules = [
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: [
require('cssnano')({
preset: 'default'
})
]
}
}
]
}
]

return webpackMerge(commonConfig, {
mode: 'production',
output: {
Expand All @@ -39,11 +13,9 @@ module.exports = () => {
filename: '[name].js',
libraryTarget: 'umd'
},

optimization: {
minimize: true
},

plugins: [
new RemoveStrictPlugin(), // I have put this in to avoid IE throwing error Assignment to read-only properties is not allowed in strict mode
// This doesn't seem to actually be minimising the CSS!
Expand Down
125 changes: 63 additions & 62 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="utf-8"/>
<title>JSON Editor Interactive Example</title>
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
<script src="./polyfills/assign.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lz-string@1.4.4/libs/lz-string.min.js"></script>
<link rel='stylesheet' id='theme-link'>
<link rel='stylesheet' id='iconlib-link'>
Expand Down Expand Up @@ -122,7 +123,7 @@ <h2>Schema</h2>
</div>
<script>

const defaultSchema = {
var defaultSchema = {
'title': 'Person',
'type': 'object',
'required': [
Expand Down Expand Up @@ -230,47 +231,47 @@ <h2>Schema</h2>

/* ------------------------------------------------------------------- data */

let data = {}
var data = {}

let defaultOptions = {
var defaultOptions = {
iconlib: 'fontawesome5',
object_layout: 'normal',
schema: defaultSchema,
show_errors: 'interaction',
theme: 'bootstrap4'
}

let jsoneditor = null
let directLink = document.querySelector('#direct-link')

const booleanOptionsSelect = document.querySelector('#boolean-options-select')
const head = document.getElementsByTagName('head')[0]
const iconlibSelect = document.querySelector('#iconlib-select')
const iconlibLink = document.querySelector('#iconlib-link')
const libSelect = document.querySelector('#lib-select')
const jsonEditorForm = document.querySelector('#json-editor-form')
const objectLayoutSelect = document.querySelector('#object-layout-select')
const outputTextarea = document.querySelector('#output-textarea')
const schemaTextarea = document.querySelector('#schema-textarea')
const setSchema = document.querySelector('#setschema')
const setValue = document.querySelector('#setvalue')
const showErrorsSelect = document.querySelector('#show-errors-select')
const themeSelect = document.querySelector('#theme-select')
const themeLink = document.querySelector('#theme-link')
const validateTextarea = document.querySelector('#validate-textarea')
var jsoneditor = null
var directLink = document.querySelector('#direct-link')

var booleanOptionsSelect = document.querySelector('#boolean-options-select')
var head = document.getElementsByTagName('head')[0]
var iconlibSelect = document.querySelector('#iconlib-select')
var iconlibLink = document.querySelector('#iconlib-link')
var libSelect = document.querySelector('#lib-select')
var jsonEditorForm = document.querySelector('#json-editor-form')
var objectLayoutSelect = document.querySelector('#object-layout-select')
var outputTextarea = document.querySelector('#output-textarea')
var schemaTextarea = document.querySelector('#schema-textarea')
var setSchema = document.querySelector('#setschema')
var setValue = document.querySelector('#setvalue')
var showErrorsSelect = document.querySelector('#show-errors-select')
var themeSelect = document.querySelector('#theme-select')
var themeLink = document.querySelector('#theme-link')
var validateTextarea = document.querySelector('#validate-textarea')

/* -------------------------------------------------------------- parse url */

const parseUrl = () => {
const url = window.location.search
const queryParamsString = url.substring(1, url.length)
const queryParams = queryParamsString.split('&')
var parseUrl = function () {
var url = window.location.search
var queryParamsString = url.substring(1, url.length)
var queryParams = queryParamsString.split('&')

if (queryParamsString.length) {
queryParams.forEach((queryParam) => {
const splittedParam = queryParam.split('=')
const param = splittedParam[0]
const value = splittedParam[1]
queryParams.forEach(function (queryParam) {
var splittedParam = queryParam.split('=')
var param = splittedParam[0]
var value = splittedParam[1]

// data query param
if (param === 'data') {
Expand All @@ -288,19 +289,19 @@ <h2>Schema</h2>

/* ----------------------------------------------------------- mergeOptions */

const mergeOptions = () => {
var mergeOptions = function () {
data.options = Object.assign(defaultOptions, data.options)
refreshUI()
}

/* -------------------------------------------------------------- refreshUI */

const refreshUI = () => {
var refreshUI = function () {
// schema
schemaTextarea.value = JSON.stringify(data.options.schema, null, 2)

// theme
const themeMap = {
var 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',
Expand All @@ -312,7 +313,7 @@ <h2>Schema</h2>
themeSelect.value = data.options.theme

// iconlLib
const iconLibMap = {
var iconLibMap = {
fontawesome3: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.css',
fontawesome4: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css',
fontawesome5: 'https://use.fontawesome.com/releases/v5.6.1/css/all.css',
Expand All @@ -329,16 +330,16 @@ <h2>Schema</h2>
showErrorsSelect.value = data.options.show_errors

// boolean values
let booleanOptions = booleanOptionsSelect.children
for (let i = 0; i < booleanOptions.length; i++) {
const booleanValue = booleanOptions[i]
var booleanOptions = booleanOptionsSelect.children
for (var i = 0; i < booleanOptions.length; i++) {
var booleanValue = booleanOptions[i]
if (data.options[booleanValue.value]) {
booleanValue.selected = true
}
}

// libs
let libMapping = {
var libMapping = {
ace_editor: {
js: [
'https://cdn.jsdelivr.net/npm/ace-editor-builds@1.2.4/src-min-noconflict/ace.js'
Expand Down Expand Up @@ -420,46 +421,46 @@ <h2>Schema</h2>

if (data.selectedLibs || data.unselectedLibs) {

let booleanOptions = booleanOptionsSelect.children
for (let i = 0; i < booleanOptions.length; i++) {
const booleanValue = booleanOptions[i]
var booleanOptions = booleanOptionsSelect.children
for (var i = 0; i < booleanOptions.length; i++) {
var booleanValue = booleanOptions[i]
if (data.options[booleanValue.value]) {
booleanValue.selected = true
}
}

const libSelectChildren = libSelect.children
for (let i = 0; i < libSelectChildren.length; i++) {
const child = libSelectChildren[i]
var libSelectChildren = libSelect.children
for (var i = 0; i < libSelectChildren.length; i++) {
var child = libSelectChildren[i]
child.selected = data.selectedLibs.includes(child.value)
}

// remove libraries
data.unselectedLibs.forEach((selectedLib) => {
const concat = libMapping[selectedLib].js.concat(libMapping[selectedLib].css)
concat.forEach(() => {
const className = '.external_' + selectedLib
const toRemove = head.querySelector(className)
data.unselectedLibs.forEach(function (selectedLib) {
var concat = libMapping[selectedLib].js.concat(libMapping[selectedLib].css)
concat.forEach(function () {
var className = '.external_' + selectedLib
var toRemove = head.querySelector(className)
if (toRemove) {
toRemove.parentNode.removeChild(toRemove)
}
})
})

// add libraries
data.selectedLibs.forEach((selectedLib) => {
data.selectedLibs.forEach(function (selectedLib) {
// add js
libMapping[selectedLib].js.forEach((js) => {
let scriptElement = document.createElement('script')
libMapping[selectedLib].js.forEach(function (js) {
var scriptElement = document.createElement('script')
scriptElement.type = 'text/javascript'
scriptElement.src = js
scriptElement.async = false
scriptElement.classList.add('external_' + selectedLib)
head.appendChild(scriptElement)
})
// add css
libMapping[selectedLib].css.forEach((css) => {
const linkElement = document.createElement('link')
libMapping[selectedLib].css.forEach(function (css) {
var linkElement = document.createElement('link')
linkElement.setAttribute('rel', 'stylesheet')
linkElement.setAttribute('type', 'text/css')
linkElement.setAttribute('href', css)
Expand All @@ -474,7 +475,7 @@ <h2>Schema</h2>

/* --------------------------------------------------------- initJsoneditor */

const initJsoneditor = () => {
var initJsoneditor = function () {
// destroy old JSONEditor instance if exists
if (jsoneditor) {
jsoneditor.destroy()
Expand All @@ -486,11 +487,11 @@ <h2>Schema</h2>
// listen for changes
jsoneditor.on('change', function () {
// output
let json = jsoneditor.getValue()
var json = jsoneditor.getValue()
outputTextarea.value = JSON.stringify(json, null, 2)

// validate
let validationErrors = jsoneditor.validate()
var validationErrors = jsoneditor.validate()
if (validationErrors.length) {
validateTextarea.value = JSON.stringify(validationErrors, null, 2)
} else {
Expand All @@ -502,8 +503,8 @@ <h2>Schema</h2>

/* ------------------------------------------------------- updateDirectLink */

const updateDirectLink = () => {
let url = window.location.href.replace(/\?.*/, '')
var updateDirectLink = function () {
var url = window.location.href.replace(/\?.*/, '')
url += '?data='
url += LZString.compressToBase64(JSON.stringify(data))
directLink.href = url
Expand Down Expand Up @@ -546,8 +547,8 @@ <h2>Schema</h2>
})

booleanOptionsSelect.addEventListener('change', function () {
let booleanOptions = this.children
for (let i = 0; i < booleanOptions.length; i++) {
var booleanOptions = this.children
for (var i = 0; i < booleanOptions.length; i++) {
data.options[booleanOptions[i].value] = booleanOptions[i].selected
}
refreshUI()
Expand All @@ -557,9 +558,9 @@ <h2>Schema</h2>
data.selectedLibs = []
data.unselectedLibs = []

const libs = this.children
var libs = this.children

for (let i = 0; i < libs.length; i++) {
for (var i = 0; i < libs.length; i++) {
if (libs[i].selected) {
data.selectedLibs.push(libs[i].value)
} else {
Expand Down
29 changes: 29 additions & 0 deletions docs/polyfills/assign.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
if (typeof Object.assign !== 'function') {
// Must be writable: true, enumerable: false, configurable: true
Object.defineProperty(Object, 'assign', {
value: function assign (target, varArgs) { // .length of function is 2
'use strict'
if (target === null || target === undefined) {
throw new TypeError('Cannot convert undefined or null to object')
}

var to = Object(target)

for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index]

if (nextSource !== null && nextSource !== undefined) {
for (var nextKey in nextSource) {
// Avoid bugs when hasOwnProperty is shadowed
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey]
}
}
}
}
return to
},
writable: true,
configurable: true
})
}
Loading

0 comments on commit 9109d1f

Please sign in to comment.