@wirenboard/json-editor 2.5.3-wb13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (283) hide show
  1. package/.env-dist +2 -0
  2. package/.eslintrc +7 -0
  3. package/.gitattributes +1 -0
  4. package/.github/PULL_REQUEST_TEMPLATE.md +9 -0
  5. package/.github/issue_template +25 -0
  6. package/.github/workflows/build.yml +58 -0
  7. package/.travis.yml +70 -0
  8. package/CHANGELOG.md +915 -0
  9. package/CONTRIBUTING.md +92 -0
  10. package/LICENSE +20 -0
  11. package/Makefile +26 -0
  12. package/README.md +1646 -0
  13. package/README_ADDON.md +573 -0
  14. package/UPGRADING.md +46 -0
  15. package/build/CssToJson.js +55 -0
  16. package/codecept.conf.js +35 -0
  17. package/config/.eslintrc +7 -0
  18. package/config/codeceptjs_helpers.js +139 -0
  19. package/config/helpers.js +10 -0
  20. package/config/karma.conf.js +93 -0
  21. package/config/readme.md +31 -0
  22. package/config/webpack.common.js +75 -0
  23. package/config/webpack.dev.js +15 -0
  24. package/config/webpack.nonmin.js +19 -0
  25. package/config/webpack.prod.js +25 -0
  26. package/dist/jsoneditor.js +14 -0
  27. package/dist/nonmin/jsoneditor.js +29097 -0
  28. package/dist/nonmin/jsoneditor.js.map +1 -0
  29. package/docs/ace_editor.html +56 -0
  30. package/docs/advanced.html +136 -0
  31. package/docs/basic.html +63 -0
  32. package/docs/basic_person.json +26 -0
  33. package/docs/choices.html +86 -0
  34. package/docs/cleave.html +132 -0
  35. package/docs/colorpicker.html +194 -0
  36. package/docs/css_integration.html +135 -0
  37. package/docs/datetime.html +305 -0
  38. package/docs/describedby.html +161 -0
  39. package/docs/enumsource.html +67 -0
  40. package/docs/images/categoriesDemo.png +0 -0
  41. package/docs/images/inheritance_tree.png +0 -0
  42. package/docs/images/jsoneditor.png +0 -0
  43. package/docs/imask.html +192 -0
  44. package/docs/index.html +579 -0
  45. package/docs/materialize_css.html +164 -0
  46. package/docs/meta_schema.json +705 -0
  47. package/docs/multiple_upload_base64.html +65 -0
  48. package/docs/person.json +73 -0
  49. package/docs/polyfills/assign.js +29 -0
  50. package/docs/radio.html +156 -0
  51. package/docs/recursive.html +170 -0
  52. package/docs/select2.html +99 -0
  53. package/docs/selectize.html +100 -0
  54. package/docs/signature.html +42 -0
  55. package/docs/starrating.html +137 -0
  56. package/docs/upload.html +131 -0
  57. package/docs/uuid.html +70 -0
  58. package/docs/wysiwyg.html +56 -0
  59. package/jasmine.json +11 -0
  60. package/json-editor-json-editor-2.5.3-wb13.tgz +0 -0
  61. package/package.json +100 -0
  62. package/release-notes.md +88 -0
  63. package/src/core.js +412 -0
  64. package/src/defaults.js +402 -0
  65. package/src/editor.js +707 -0
  66. package/src/editors/ace.js +89 -0
  67. package/src/editors/array/choices.js +103 -0
  68. package/src/editors/array/select2.js +110 -0
  69. package/src/editors/array/selectize.js +103 -0
  70. package/src/editors/array.css +9 -0
  71. package/src/editors/array.css.js +3 -0
  72. package/src/editors/array.js +818 -0
  73. package/src/editors/autocomplete.js +58 -0
  74. package/src/editors/base64.js +157 -0
  75. package/src/editors/button.js +97 -0
  76. package/src/editors/checkbox.js +95 -0
  77. package/src/editors/choices.css +3 -0
  78. package/src/editors/choices.css.js +3 -0
  79. package/src/editors/choices.js +69 -0
  80. package/src/editors/colorpicker.js +103 -0
  81. package/src/editors/datetime.js +141 -0
  82. package/src/editors/describedby.js +188 -0
  83. package/src/editors/enum.js +136 -0
  84. package/src/editors/hidden.js +127 -0
  85. package/src/editors/index.js +81 -0
  86. package/src/editors/info.js +20 -0
  87. package/src/editors/integer.js +19 -0
  88. package/src/editors/ip.js +36 -0
  89. package/src/editors/jodit.js +64 -0
  90. package/src/editors/multiple.js +409 -0
  91. package/src/editors/multiselect.js +218 -0
  92. package/src/editors/null.js +18 -0
  93. package/src/editors/number.js +51 -0
  94. package/src/editors/object.css +41 -0
  95. package/src/editors/object.css.js +3 -0
  96. package/src/editors/object.js +1290 -0
  97. package/src/editors/radio.js +111 -0
  98. package/src/editors/sceditor.js +72 -0
  99. package/src/editors/select.js +370 -0
  100. package/src/editors/select2.js +110 -0
  101. package/src/editors/selectize.js +112 -0
  102. package/src/editors/signature.js +113 -0
  103. package/src/editors/simplemde.js +100 -0
  104. package/src/editors/starrating.css +52 -0
  105. package/src/editors/starrating.css.js +3 -0
  106. package/src/editors/starrating.js +135 -0
  107. package/src/editors/stepper.js +27 -0
  108. package/src/editors/string.js +372 -0
  109. package/src/editors/table.js +516 -0
  110. package/src/editors/upload.js +321 -0
  111. package/src/editors/uuid.js +56 -0
  112. package/src/iconlib.js +24 -0
  113. package/src/iconlibs/bootstrap2.js +28 -0
  114. package/src/iconlibs/bootstrap3.js +28 -0
  115. package/src/iconlibs/fontawesome3.js +28 -0
  116. package/src/iconlibs/fontawesome4.js +28 -0
  117. package/src/iconlibs/fontawesome5.js +28 -0
  118. package/src/iconlibs/foundation2.js +24 -0
  119. package/src/iconlibs/foundation3.js +28 -0
  120. package/src/iconlibs/index.js +25 -0
  121. package/src/iconlibs/jqueryui.js +28 -0
  122. package/src/iconlibs/materialicons.js +49 -0
  123. package/src/iconlibs/openiconic.js +28 -0
  124. package/src/iconlibs/spectre.js +28 -0
  125. package/src/resolvers.js +128 -0
  126. package/src/schemaloader.js +408 -0
  127. package/src/style.css +150 -0
  128. package/src/style.css.js +3 -0
  129. package/src/templates/default.js +52 -0
  130. package/src/templates/ejs.js +13 -0
  131. package/src/templates/handlebars.js +1 -0
  132. package/src/templates/hogan.js +10 -0
  133. package/src/templates/index.js +21 -0
  134. package/src/templates/lodash.js +9 -0
  135. package/src/templates/markup.js +9 -0
  136. package/src/templates/mustache.js +9 -0
  137. package/src/templates/swig.js +1 -0
  138. package/src/templates/underscore.js +9 -0
  139. package/src/theme.js +659 -0
  140. package/src/themes/barebones.css +35 -0
  141. package/src/themes/barebones.css.js +3 -0
  142. package/src/themes/barebones.js +28 -0
  143. package/src/themes/bootstrap2.js +319 -0
  144. package/src/themes/bootstrap3.css +0 -0
  145. package/src/themes/bootstrap3.css.js +3 -0
  146. package/src/themes/bootstrap3.js +315 -0
  147. package/src/themes/bootstrap4.css +89 -0
  148. package/src/themes/bootstrap4.css.js +3 -0
  149. package/src/themes/bootstrap4.js +690 -0
  150. package/src/themes/bootstrap5.css.js +3 -0
  151. package/src/themes/foundation.js +569 -0
  152. package/src/themes/html.css +60 -0
  153. package/src/themes/html.css.js +3 -0
  154. package/src/themes/html.js +71 -0
  155. package/src/themes/index.js +28 -0
  156. package/src/themes/jqueryui.js +198 -0
  157. package/src/themes/materialize.js +426 -0
  158. package/src/themes/spectre.css +208 -0
  159. package/src/themes/spectre.css.js +3 -0
  160. package/src/themes/spectre.js +406 -0
  161. package/src/themes/tailwind.css +249 -0
  162. package/src/themes/tailwind.css.js +3 -0
  163. package/src/themes/tailwind.js +443 -0
  164. package/src/utilities.js +138 -0
  165. package/src/validator.js +877 -0
  166. package/src/validators/ip-validator.js +51 -0
  167. package/tests/Dockerfile +3 -0
  168. package/tests/README.md +48 -0
  169. package/tests/codeceptjs/codecept.json +42 -0
  170. package/tests/codeceptjs/constrains/if-then-else_test.js +143 -0
  171. package/tests/codeceptjs/core_test.js +217 -0
  172. package/tests/codeceptjs/editors/advanced_test.js +13 -0
  173. package/tests/codeceptjs/editors/array_any_of_test.js +50 -0
  174. package/tests/codeceptjs/editors/array_test.js +900 -0
  175. package/tests/codeceptjs/editors/button_test.js +35 -0
  176. package/tests/codeceptjs/editors/checkbox_test.js +21 -0
  177. package/tests/codeceptjs/editors/colorpicker_test.js +27 -0
  178. package/tests/codeceptjs/editors/datetime_test.js +33 -0
  179. package/tests/codeceptjs/editors/inheritance_test.js +11 -0
  180. package/tests/codeceptjs/editors/integer_test.js +84 -0
  181. package/tests/codeceptjs/editors/issues/issue-gh-812_test.js +32 -0
  182. package/tests/codeceptjs/editors/jodit_test.js +24 -0
  183. package/tests/codeceptjs/editors/multiselect_test.js +8 -0
  184. package/tests/codeceptjs/editors/number_test.js +82 -0
  185. package/tests/codeceptjs/editors/object_test.js +204 -0
  186. package/tests/codeceptjs/editors/option-no_default_values_test.js +42 -0
  187. package/tests/codeceptjs/editors/programmatic-changes_test.js +20 -0
  188. package/tests/codeceptjs/editors/radio_test.js +10 -0
  189. package/tests/codeceptjs/editors/rating_test.js +13 -0
  190. package/tests/codeceptjs/editors/select_test.js +22 -0
  191. package/tests/codeceptjs/editors/stepper_test.js +27 -0
  192. package/tests/codeceptjs/editors/string_test.js +118 -0
  193. package/tests/codeceptjs/editors/table-confirm-delete_test.js +67 -0
  194. package/tests/codeceptjs/editors/tabs_test.js +14 -0
  195. package/tests/codeceptjs/editors/uuid_test.js +21 -0
  196. package/tests/codeceptjs/editors/validation_test.js +14 -0
  197. package/tests/codeceptjs/meta-schema_test.js +17 -0
  198. package/tests/codeceptjs/schemaloader_test.js +13 -0
  199. package/tests/codeceptjs/steps.d.ts +13 -0
  200. package/tests/codeceptjs/steps_file.js +12 -0
  201. package/tests/codeceptjs/themes_test.js +519 -0
  202. package/tests/docker-compose.yml +34 -0
  203. package/tests/fixtures/basic_person.json +26 -0
  204. package/tests/fixtures/nested_object.json +26 -0
  205. package/tests/fixtures/person.json +55 -0
  206. package/tests/fixtures/recursive.json +8 -0
  207. package/tests/fixtures/some_types.json +32 -0
  208. package/tests/fixtures/string.json +3 -0
  209. package/tests/fixtures/validation.json +1140 -0
  210. package/tests/pages/_demo.html +475 -0
  211. package/tests/pages/advanced.html +137 -0
  212. package/tests/pages/anyof.html +80 -0
  213. package/tests/pages/array-anyof.html +142 -0
  214. package/tests/pages/array-checkboxes.html +41 -0
  215. package/tests/pages/array-choices.html +45 -0
  216. package/tests/pages/array-integers.html +37 -0
  217. package/tests/pages/array-move-events.html +61 -0
  218. package/tests/pages/array-multiselects.html +42 -0
  219. package/tests/pages/array-nested-arrays.html +40 -0
  220. package/tests/pages/array-numbers.html +37 -0
  221. package/tests/pages/array-objects.html +42 -0
  222. package/tests/pages/array-ratings.html +40 -0
  223. package/tests/pages/array-selectize.html +51 -0
  224. package/tests/pages/array-selects.html +36 -0
  225. package/tests/pages/array-strings.html +36 -0
  226. package/tests/pages/array.html +42 -0
  227. package/tests/pages/assets/pages.css +130 -0
  228. package/tests/pages/button-callbacks.html +77 -0
  229. package/tests/pages/checkbox-labels.html +114 -0
  230. package/tests/pages/colorpicker-no-3rd-party.html +43 -0
  231. package/tests/pages/colorpicker-use-vanilla-picker.html +50 -0
  232. package/tests/pages/core.html +118 -0
  233. package/tests/pages/datetime.html +76 -0
  234. package/tests/pages/form-name.html +108 -0
  235. package/tests/pages/grid-strict.html +311 -0
  236. package/tests/pages/grid.html +284 -0
  237. package/tests/pages/if-then-else-allOf.html +117 -0
  238. package/tests/pages/inheritance.html +76 -0
  239. package/tests/pages/integer.html +68 -0
  240. package/tests/pages/issues/_template.html +50 -0
  241. package/tests/pages/issues/issue-gh-812.html +110 -0
  242. package/tests/pages/issues/issue-gh-823-meta-schema.html +35 -0
  243. package/tests/pages/issues/issue-gh-848.html +81 -0
  244. package/tests/pages/meta_schema.json +705 -0
  245. package/tests/pages/number.html +89 -0
  246. package/tests/pages/object-no-additional-properties.html +65 -0
  247. package/tests/pages/object-no-duplicated-id.html +68 -0
  248. package/tests/pages/object-required-properties.html +236 -0
  249. package/tests/pages/object-with-dependencies-array.html +46 -0
  250. package/tests/pages/object-with-dependencies.html +60 -0
  251. package/tests/pages/object.html +79 -0
  252. package/tests/pages/oneof.html +103 -0
  253. package/tests/pages/option-no_default_values.html +58 -0
  254. package/tests/pages/programmatic-changes.html +120 -0
  255. package/tests/pages/read-only.html +105 -0
  256. package/tests/pages/select.html +41 -0
  257. package/tests/pages/stepper.html +59 -0
  258. package/tests/pages/string-ace-editor.html +52 -0
  259. package/tests/pages/string-cleave.html +46 -0
  260. package/tests/pages/string-custom-attributes.html +62 -0
  261. package/tests/pages/string-formats.html +52 -0
  262. package/tests/pages/string-formats2.html +57 -0
  263. package/tests/pages/string-jodit-editor.html +49 -0
  264. package/tests/pages/string-sceditor.html +62 -0
  265. package/tests/pages/table-move-events.html +56 -0
  266. package/tests/pages/table.html +46 -0
  267. package/tests/pages/tabs.html +131 -0
  268. package/tests/pages/themes.html +527 -0
  269. package/tests/pages/translate-property.html +247 -0
  270. package/tests/pages/urn.html +93 -0
  271. package/tests/pages/uuid.html +72 -0
  272. package/tests/pages/validation.html +99 -0
  273. package/tests/unit/.eslintrc +8 -0
  274. package/tests/unit/core.spec.js +309 -0
  275. package/tests/unit/defaults.spec.js +40 -0
  276. package/tests/unit/editor.spec.js +160 -0
  277. package/tests/unit/editors/array.spec.js +86 -0
  278. package/tests/unit/editors/object.spec.js +79 -0
  279. package/tests/unit/editors/table.spec.js +91 -0
  280. package/tests/unit/readme.md +35 -0
  281. package/tests/unit/schemaloader.spec.js +498 -0
  282. package/tests/unit/validator.spec.js +94 -0
  283. package/tests/unit/validators/ip-validator.spec.js +62 -0
package/docs/colorpicker.html ADDED
@@ -0,0 +1,194 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Colorpicker editor Example</title>
5
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
6
+
7
+ <!-- Enable responsive viewport -->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+
10
+ <!-- fontawesome5 -->
11
+ <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.1/css/all.css'>
12
+
13
+ <!-- JSON-Editor -->
14
+ <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
15
+
16
+ <!-- vanilla picker -->
17
+ <script src="https://cdn.jsdelivr.net/npm/vanilla-picker@2.10.1/dist/vanilla-picker.min.js" integrity="sha256-3fnRmJ7NTcR4T37E9L7tvEHuRHMGBdvnvlGq2CbRw80=" crossorigin="anonymous"></script>
18
+ <style type="text/css">
19
+ body {
20
+ margin: 1em;
21
+ }
22
+
23
+ </style>
24
+ </head>
25
+ <body>
26
+ <h1>Colorpicker editor Example</h1>
27
+
28
+ <div id='editor_holder'></div>
29
+ <button id='submit'>Submit (console.log)</button>
30
+ <button id='enable'>Disable</button>
31
+
32
+
33
+ <script>
34
+
35
+ // Initialize the editor
36
+ var editor = new JSONEditor(document.getElementById('editor_holder'), {
37
+ theme: "html",
38
+ iconlib: "fontawesome5",
39
+ disable_collapse: true,
40
+ disable_edit_json: true,
41
+ disable_properties: true,
42
+ //no_additional_properties: true,
43
+ schema: {
44
+ 'type': 'object',
45
+ 'title': 'color input use colorpicker',
46
+ 'format': 'grid',
47
+ 'properties': {
48
+ 'rgb': {
49
+ 'title': 'use rgb format',
50
+ 'type': 'string',
51
+ 'format': 'color',
52
+ 'default': 'rgb(0,0,0)',
53
+ 'options': {
54
+ 'colorpicker': {
55
+ 'editorFormat': 'rgb'
56
+ }
57
+ }
58
+ },
59
+ 'rgba': {
60
+ 'title': 'use rgba format',
61
+ 'type': 'string',
62
+ 'format': 'color',
63
+ 'default': 'rgba(0,0,0,1)',
64
+ 'options': {
65
+ 'colorpicker': {
66
+ 'editorFormat': 'rgb',
67
+ 'alpha': true
68
+ }
69
+ }
70
+ },
71
+ 'hsl': {
72
+ 'title': 'use hsl format',
73
+ 'type': 'string',
74
+ 'format': 'color',
75
+ 'default': 'hsl(0,0,0)',
76
+ 'options': {
77
+ 'colorpicker': {
78
+ 'editorFormat': 'hsl'
79
+ }
80
+ }
81
+ },
82
+ 'hsla': {
83
+ 'title': 'use hsla format',
84
+ 'type': 'string',
85
+ 'format': 'color',
86
+ 'default': 'hsl(0,0,0,1)',
87
+ 'options': {
88
+ 'colorpicker': {
89
+ 'editorFormat': 'hsl',
90
+ 'alpha': true
91
+ }
92
+ }
93
+ },
94
+ 'hex': {
95
+ 'title': 'use hex format',
96
+ 'type': 'string',
97
+ 'format': 'color',
98
+ 'default': '#000000'
99
+ },
100
+ 'hexa': {
101
+ 'title': 'use hexa format',
102
+ 'type': 'string',
103
+ 'format': 'color',
104
+ 'default': '#000000',
105
+ 'options': {
106
+ 'colorpicker': {
107
+ 'alpha': true
108
+ }
109
+ }
110
+ },
111
+ 'inline': {
112
+ 'title': 'inline colorpicker',
113
+ 'type': 'string',
114
+ 'format': 'color',
115
+ 'default': '#000000',
116
+ 'options': {
117
+ 'colorpicker': {
118
+ 'popup': false
119
+ }
120
+ }
121
+ },
122
+ 'top': {
123
+ 'title': 'position: top',
124
+ 'type': 'string',
125
+ 'format': 'color',
126
+ 'default': '#000000',
127
+ 'options': {
128
+ 'colorpicker': {
129
+ 'popup': 'top'
130
+ }
131
+ }
132
+ },
133
+ 'right': {
134
+ 'title': 'position: right',
135
+ 'type': 'string',
136
+ 'format': 'color',
137
+ 'default': '#000000',
138
+ 'options': {
139
+ 'colorpicker': {
140
+ 'popup': 'right'
141
+ }
142
+ }
143
+ },
144
+ 'left': {
145
+ 'title': 'position: left',
146
+ 'type': 'string',
147
+ 'format': 'color',
148
+ 'default': '#000000',
149
+ 'options': {
150
+ 'colorpicker': {
151
+ 'popup': 'left'
152
+ }
153
+ }
154
+ }
155
+ }
156
+ }
157
+ });
158
+
159
+ function validate() {
160
+ var errors = editor.validate();
161
+ console.log(editor.getValue());
162
+ if(errors.length) {
163
+ // errors is an array of objects, each with a `path`, `property`, and `message` parameter
164
+ // `property` is the schema keyword that triggered the validation error (e.g. "minLength")
165
+ // `path` is a dot separated path into the JSON object (e.g. "root.path.to.field")
166
+ editor.root.showValidationErrors(errors);
167
+ console.log('ERRORS', errors);
168
+ }
169
+ else {
170
+ // It's valid!
171
+ console.log('OK');
172
+ }
173
+ }
174
+
175
+ // Hook up the submit button to log to the console
176
+ document.getElementById('submit').addEventListener('click',function() {
177
+ // Get the value from the editor
178
+ validate();
179
+ });
180
+ document.getElementById('enable').addEventListener('click',function(e) {
181
+ // Get the value from the editor
182
+ if(e.target.innerText == 'Disable') {
183
+ e.target.innerText = "Enable"
184
+ editor.disable()
185
+ } else {
186
+ e.target.innerText = 'Disable'
187
+ editor.enable()
188
+ }
189
+
190
+
191
+ });
192
+ </script>
193
+ </body>
194
+ </html>
package/docs/css_integration.html ADDED
@@ -0,0 +1,135 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>CSS Integration JSON Editor Example</title>
6
+
7
+ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
8
+ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
9
+ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
10
+
11
+ <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
12
+
13
+ <script>
14
+ // Set the default CSS theme and icon library globally
15
+ JSONEditor.defaults.theme = 'spectre';
16
+ JSONEditor.defaults.iconlib = 'spectre';
17
+ </script>
18
+ <style>
19
+ .container {
20
+ max-width:960px;
21
+ margin: 0 auto
22
+ }
23
+ </style>
24
+ </head>
25
+ <body>
26
+ <div class='container'>
27
+ <div class='columns'>
28
+ <h1 class='col-md-12'>CSS Integration JSON Editor Example</h1>
29
+ </div>
30
+ <div class='columns'>
31
+ <div class='column col-md-6'>
32
+ <p>JSON Editor supports these popular CSS frameworks:</p>
33
+ <ul>
34
+ <li>bootstrap 4</li>
35
+ <li>spectre.css (shown here)</li>
36
+ <li>tailwind</li>
37
+ </ul>
38
+ </div>
39
+ <div class='column col-md-6'>
40
+ <p>JSON Editor supports these popular icon libraries:</p>
41
+ <ul>
42
+ <li>jQueryUI</li>
43
+ <li>Font Awesome 3</li>
44
+ <li>Font Awesome 4</li>
45
+ <li>Font Awesome 5</li>
46
+ <li>spectre.css (shown here)</li>
47
+ </ul>
48
+ </div>
49
+ </div>
50
+ <div class='columns'>
51
+ <div class='column col-md-12'>
52
+ <button id='submit' class='tiny'>Submit (console.log)</button>
53
+ <button id='restore' class='secondary tiny'>Restore to Default</button>
54
+ <span id='valid_indicator' class='label'></span>
55
+ </div>
56
+ </div>
57
+ <div class='columns'>
58
+ <div class='column col-md-12' id='editor_holder'></div>
59
+ </div>
60
+ </div>
61
+
62
+ <script>
63
+ // This is the starting value for the editor
64
+ // We will use this to seed the initial editor
65
+ // and to provide a "Restore to Default" button.
66
+ var starting_value = {
67
+ name: "John Smith",
68
+ age: 35,
69
+ gender: "male",
70
+ location: {
71
+ city: "San Francisco",
72
+ state: "California"
73
+ },
74
+ pets: [
75
+ {
76
+ name: "Spot",
77
+ type: "dog",
78
+ fixed: true
79
+ },
80
+ {
81
+ name: "Whiskers",
82
+ type: "cat",
83
+ fixed: false
84
+ }
85
+ ]
86
+ };
87
+
88
+ // Initialize the editor
89
+ var editor = new JSONEditor(document.getElementById('editor_holder'),{
90
+ // Enable fetching schemas via ajax
91
+ ajax: true,
92
+
93
+ // The schema for the editor
94
+ schema: {
95
+ $ref: "person.json",
96
+ format: "grid"
97
+ },
98
+
99
+ // Seed the form with a starting value
100
+ startval: starting_value
101
+ });
102
+
103
+ // Hook up the submit button to log to the console
104
+ document.getElementById('submit').addEventListener('click',function() {
105
+ // Get the value from the editor
106
+ console.log(editor.getValue());
107
+ });
108
+
109
+ // Hook up the Restore to Default button
110
+ document.getElementById('restore').addEventListener('click',function() {
111
+ editor.setValue(starting_value);
112
+ });
113
+
114
+ // Hook up the validation indicator to update its
115
+ // status whenever the editor changes
116
+ editor.on('change',function() {
117
+ // Get an array of errors from the validator
118
+ var errors = editor.validate();
119
+
120
+ var indicator = document.getElementById('valid_indicator');
121
+
122
+ // Not valid
123
+ if(errors.length) {
124
+ indicator.className = 'label alert';
125
+ indicator.textContent = 'not valid';
126
+ }
127
+ // Valid
128
+ else {
129
+ indicator.className = 'label success';
130
+ indicator.textContent = 'valid';
131
+ }
132
+ });
133
+ </script>
134
+ </body>
135
+ </html>
package/docs/datetime.html ADDED
@@ -0,0 +1,305 @@
1
+ <!DOCTYPE HTML>
2
+
3
+ <html>
4
+
5
+ <head>
6
+ <title>datetime editor examples</title>
7
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
8
+
9
+ <!-- Enable responsive viewport -->
10
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+
12
+ <!-- jQuery -->
13
+ <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
14
+
15
+ <!-- Bootstrap4 -->
16
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
17
+
18
+ <!-- fontawesome5 -->
19
+ <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.12.1/css/all.css'>
20
+
21
+ <!-- Handlebars -->
22
+ <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
23
+
24
+ <!-- Flatpickr -->
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.3/dist/flatpickr.min.css">
26
+ <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.3/dist/flatpickr.min.js" integrity="sha256-/irFIZmSo2CKXJ4rxHWfrI+yGJuI16Z005X/bENdpTY=" crossorigin="anonymous"></script>
27
+
28
+ <!-- JSON-Editor -->
29
+ <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
30
+
31
+ <style type="text/css">
32
+ body {
33
+ margin: 1em;
34
+ }
35
+
36
+ </style>
37
+ </head>
38
+
39
+ <body>
40
+ <h2>Extended handling of date, time and datetime-local type fields.</h2>
41
+
42
+ <p>Works with both string and integer data types. (If integer is used, the date will be returned in epoch format)</p>
43
+
44
+ <p>Has optional support for using <a href="https://flatpickr.js.org/" target="_blank" title="Flatpickr datepicker">flatpickr datepicker</a>.</p>
45
+ <p>All flatpickr options is supported with a few minor differences.
46
+ <ul>
47
+ <li>"<strong>enableTime</strong>" and "<strong>noCalendar</strong>" are set automatically, based on the data type.</li>
48
+ <li>Extra config option "<strong>errorDateFormat</strong>". If this is set, it will replace the format displayed in error messages.</li>
49
+ <li>It is not possible to use "<strong>inline</strong>" and "<strong>wrap</strong>" options together.</li>
50
+ <li>When using the "<strong>wrap</strong>" option, "toggle" and "clear" buttons are automatically added to markup. 2 extra boolean options ("<strong>showToggleButton</strong>" and "<strong>showClearButton</strong>") are available to control which buttons to display. Note: not all frameworks supports this. (Works in: Bootstrap and Foundation)</li>
51
+ <li>When using the "inline" option, an extra boolean option ("<strong>inlineHideInput</strong>") is available to hide the original input field.</li>
52
+ <li>If "mode" is set to either "multiple" or "range", only string data type is supported. Also the result from these is returned as a string, not an array.</li>
53
+ </ul></p>
54
+ <div id="form"></div>
55
+ <script type="text/javascript">
56
+
57
+ // Handlebars helper for displaying timestamps in human frindly format
58
+ Handlebars.registerHelper("TimeStampToDateTime", function(ts) {
59
+ return ts ? new Date(ts * 1000) : 'empty';
60
+ });
61
+
62
+ var options = {
63
+ "theme": "bootstrap4",
64
+ "template": "handlebars",
65
+ "iconlib": "fontawesome5",
66
+ "schema": {
67
+ "title": "datetime editor examples",
68
+ "id": "test",
69
+ "type": "object",
70
+ "format": "grid",
71
+ "options": {
72
+ "disable_edit_json": false,
73
+ "disable_properties": false
74
+ },
75
+ "properties": {
76
+ "sdate": {
77
+ "type": "string",
78
+ "format": "date",
79
+ "title": "Date (String)",
80
+ "description": "Standard date field",
81
+ "options": {
82
+ "grid_columns": 4,
83
+ "inputAttributes": {
84
+ "placeholder": "Enter date"
85
+ }
86
+ }
87
+ },
88
+ "stime": {
89
+ "type": "string",
90
+ "format": "time",
91
+ "title": "Time (String)",
92
+ "description": "Standard time field",
93
+ "options": {
94
+ "grid_columns": 4,
95
+ "inputAttributes": {
96
+ "placeholder": "Enter time"
97
+ }
98
+ }
99
+ },
100
+ "sdatetime": {
101
+ "type": "string",
102
+ "format": "datetime-local",
103
+ "title": "Datetime (String)",
104
+ "description": "Standard datetime-local field",
105
+ "options": {
106
+ "grid_columns": 4,
107
+ "inputAttributes": {
108
+ "placeholder": "YYYY-MM-DD HH:SS"
109
+ }
110
+ }
111
+ },
112
+
113
+ "fsdate": {
114
+ "type": "string",
115
+ "format": "date",
116
+ "title": "Date (String)",
117
+ "description": "Standard date field with flatpickr",
118
+ "options": {
119
+ "grid_columns": 4,
120
+ "inputAttributes": {
121
+ "placeholder": "Enter date"
122
+ },
123
+ "flatpickr": {
124
+ "inlineHideInput": true,
125
+ "wrap": true,
126
+ "allowInput": true
127
+ }
128
+ }
129
+ },
130
+ "fstime": {
131
+ "type": "string",
132
+ "format": "time",
133
+ "title": "Time (String)",
134
+ "description": "Standard time field with flatpickr",
135
+ "options": {
136
+ "grid_columns": 4,
137
+ "inputAttributes": {
138
+ "placeholder": "Enter time"
139
+ },
140
+ "flatpickr": {
141
+ "wrap": true,
142
+ "showClearButton": false,
143
+ "inlineHideInput": true,
144
+ "defaultHour": 7,
145
+ "defaultMinute": 19,
146
+ "enableSeconds": true,
147
+ "hourIncrement": 2,
148
+ "minuteIncrement": 3,
149
+ "time_24hr": true,
150
+ "allowInput": true
151
+ }
152
+ }
153
+ },
154
+ "fsdatetime": {
155
+ "type": "string",
156
+ "format": "datetime-local",
157
+ "title": "Datetime (String)",
158
+ "description": "Standard datetime-local field with flatpickr",
159
+ "options": {
160
+ "grid_columns": 4,
161
+ "inputAttributes": {
162
+ "placeholder": "Enter datetime"
163
+ },
164
+ "flatpickr": {
165
+ "wrap": true,
166
+ "time_24hr": true,
167
+ "allowInput": true
168
+ }
169
+ }
170
+ },
171
+
172
+ "idate": {
173
+ "type": "integer",
174
+ "format": "date",
175
+ "title": "Date (Integer)",
176
+ "description": "Integer date field",
177
+ "options": {
178
+ "grid_columns": 4,
179
+ "inputAttributes": {
180
+ "placeholder": "Enter date"
181
+ }
182
+ }
183
+ },
184
+ "itime": {
185
+ "type": "integer",
186
+ "format": "time",
187
+ "title": "Time (Integer)",
188
+ "description": "Integer time field",
189
+ "options": {
190
+ "grid_columns": 4,
191
+ "inputAttributes": {
192
+ "placeholder": "Enter time"
193
+ }
194
+ }
195
+ },
196
+ "idatetime": {
197
+ "type": "integer",
198
+ "format": "datetime-local",
199
+ "title": "Datetime (Integer)",
200
+ "description": "Integer datetime-local field",
201
+ "options": {
202
+ "grid_columns": 4,
203
+ "inputAttributes": {
204
+ "placeholder": "Enter datetime"
205
+ }
206
+ }
207
+ },
208
+
209
+ "fidate": {
210
+ "type": "integer",
211
+ "format": "date",
212
+ "title": "Date (Integer)",
213
+ "description": "Integer date field with flatpickr",
214
+ "options": {
215
+ "grid_columns": 4,
216
+ "inputAttributes": {
217
+ "placeholder": "Enter date"
218
+ },
219
+ "flatpickr": {
220
+ "wrap": true,
221
+ "time_24hr": true,
222
+ "allowInput": true
223
+ }
224
+ }
225
+ },
226
+ "fitime": {
227
+ "type": "integer",
228
+ "format": "time",
229
+ "title": "Time (Integer)",
230
+ "description": "Integer time field with flatpickr",
231
+ "options": {
232
+ "grid_columns": 4,
233
+ "inputAttributes": {
234
+ "placeholder": "Enter time"
235
+ },
236
+ "flatpickr": {
237
+ "wrap": true,
238
+ "time_24hr": true,
239
+ "allowInput": true
240
+ }
241
+ }
242
+ },
243
+ "fidatetime": {
244
+ "type": "integer",
245
+ "format": "datetime-local",
246
+ "title": "Datetime (Integer)",
247
+ "description": "Integer datetime-local field with flatpickr",
248
+ "options": {
249
+ "grid_columns": 4,
250
+ "inputAttributes": {
251
+ "placeholder": "Enter datetime"
252
+ },
253
+ "flatpickr": {
254
+ "wrap": true,
255
+ "time_24hr": true,
256
+ "allowInput": true
257
+ }
258
+ }
259
+ },
260
+
261
+ "fisdatetime": {
262
+ "type": "string",
263
+ "format": "datetime-local",
264
+ "title": "Datetime (String)",
265
+ "description": "Standard datetime-local field with inline flatpickr",
266
+ "options": {
267
+ "grid_columns": 4,
268
+ "inputAttributes": {
269
+ "placeholder": "Enter datetime"
270
+ },
271
+ "flatpickr": {
272
+ "inline": true,
273
+ "time_24hr": true
274
+ }
275
+ }
276
+ },
277
+ "fisdate": {
278
+ "type": "string",
279
+ "format": "date",
280
+ "title": "Date (String)",
281
+ "description": "Standard date field with inline flatpickr and hidden input",
282
+ "options": {
283
+ "grid_columns": 4,
284
+ "inputAttributes": {
285
+ "placeholder": "Enter datetime"
286
+ },
287
+ "flatpickr": {
288
+ "inlineHideInput": true,
289
+ "inline": true,
290
+ "time_24hr": true
291
+ }
292
+ }
293
+ },
294
+
295
+ }
296
+ }
297
+ }
298
+
299
+ var element = document.getElementById('form');
300
+ var editor = new JSONEditor(element, options);
301
+
302
+ </script>
303
+ </body>
304
+
305
+ </html>