Grid View?

[joshuafontany]

Just playing around with your example wiki, very cool. Does the tiddlywiki version of JSONEditor support the "format": "grid" schema-property? Reference: https://github.com/jdorn/json-editor#objects Example(change the 'Object Layout' dropdown from normal to grid): http://jeremydorn.com/json-editor/

I've added that line to various places in the Person json-schema, to no effect so far. Thanks!

[btheado]

Yes, the grid layout requires a compatible CSS framework as listed in the optional requirements section of https://github.com/jdorn/json-editor and I left out the CSS entirely when packaging the library as a plugin.

[joshuafontany]

Ah, makes sense. Would you know of any references for integrating Bootstrap 3 into Tiddlywiki? Or should it be relatively straightforward?

Thanks again for the plugin. :D

[btheado]

I'm glad you like it and thanks for letting me know. Stylesheets in general are pretty straightforward in Tiddlywiki as described at http://tiddlywiki.com/#Using%20Stylesheets. I just tried those instructions with https://btheado.github.io/jsoneditor.html and the result was not pretty.

1. Open http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css in your browser and select all and copy to clipboard
2. Open https://btheado.github.io/jsoneditor.html in your browser
3. Create new tiddler titled "bootstrap" or whatever.
4. Paste clipboard contents into the body of the tiddler
5. Add the $:/tags/Stylesheet tag to the tiddler
6. Save the tiddler

The stylesheet should now be applied and the json form becames misaligned and unreadable :-(. Not sure if it is due to some conflict the the tiddlywiki styles or if it is some other problem.

[joshuafontany]

Thanks for the quick check.

I have been reading up on Boostrap3 since finding your plugin, and it looks like there is a *.js component to it as well (that I'll have to install to Tiddlywiki somehow). Maybe the Tiddlywiki group guys have some tips along the lines of the FontAwesome stuff.

To explain my use-case, I'm building a Roleplaying Game Character Database in Tiddlywiki, and needed a good way to "edit" a character JSON. The grid view will be useful for those "blocks of stats" like: Strength X (+/- Y modifier) Dexterity X (+/- Y modifier) Constitution X (+/- Y modifier)

Intelligence X (+/- Y modifier) Wisdom X (+/- Y modifier) Charisma X (+/- Y modifier)

I'll try to post back here if I can get something cool working. :)

On Tue, Nov 3, 2015 at 5:46 PM, btheado notifications@github.com wrote:

I'm glad you like it and thanks for letting me know. Stylesheets in general are pretty straightforward in Tiddlywiki as described at http://tiddlywiki.com/#Using%20Stylesheets. I just tried those instructions with https://btheado.github.io/jsoneditor.html and the result was not pretty.

1. Open http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css in your browser and select all and copy to clipboard
2. Open https://btheado.github.io/jsoneditor.html in your browser
3. Create new tiddler titled "bootstrap" or whatever.
4. Paste clipboard contents into the body of the tiddler
5. Add the $:/tags/Stylesheet tag to the tiddler
6. Save the tiddler

The stylesheet should now be applied and the json form becames misaligned and unreadable :-(. Not sure if it is due to some conflict the the tiddlywiki styles or if it is some other problem.

— Reply to this email directly or view it on GitHub https://github.com/btheado/jsoneditor/issues/1#issuecomment-153544871.

[tobibeer]

@btheado, as answered here please reopen #1:

Looking at the code of the widget, I am thinking that this function is problematic / incomplete:

JSONEditorWidget.prototype.getOptionsFromAttributes = function() { ... }

• first of all, it should possibly not interpret options as text-references
  • but use the default way of declaring them via option:{{!!foo}} not option:"!!foo"
• it doesn't seem to handle any options other than schema and jsonOutput
• instead, it should read any arbitrary attributes not specifically declared upfront
  • e.g. also theme: "bootstrap3" iconlib: "fontawesome4"
• if needed (I don't think it is) @btheado could iterate over an array of supported (tested) options, e.g options = ["schema","jsonOutput","theme","iconlib"]
  • and then iterate over those and perhaps use a switch case to handle exceptions, if necessary
• however, the current widget architecture does allow to read / catch undeclared attributes within the widget
  • without them being predefined as actual widget properties
  • e.g.: $:/core/modules/widgets/action-setfield.js#L60
  • see the each loop where any field not prefixed $ is interpreted as a tiddler-field-name
  • compare: ActionSetFieldWidget (last "parameter)
  • json-editor should do the same thing
  • use attributes prefixed with $ for any that need special handling
    • for now, I don't think there should be any (maybe jsonOutput ?)
    • the special handling for schema and jsonOutput should be removed
    • perhaps just call it $json?
  • schema could be initialized as {} and then overwritten with any declared attribute
    • in fact, initialize the options object in its entirety with meaningful defaults
  • just use any attributes not prefixed $ as options for the json-editor

[btheado]

As a first step, I checked in code which adds support for the the theme option. These instructions now work to get the bootstrap theme:

1. Open http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css in your browser and select all and copy to clipboard
2. Open https://btheado.github.io/jsoneditor.html in your browser
3. Create new tiddler titled "bootstrap" or whatever.
4. Paste clipboard contents into the body of the tiddler
5. Add the $:/tags/Stylesheet tag to the tiddler
6. Save the tiddler
7. Edit the $:/plugins/btheado/jsoneditor/usage tiddler and add theme="bootstrap3" to all the widget examples.

You should now see the bootstrap theming applied to the forms.

Then add format="grid" to one of the example shema and you should see the fields aligned side-by-side.

[joshuafontany]

Swinging back through. Nice change. Closing.