Ok, I've tried the same test with @btheado's TiddlyWiki JsonEditor, and am not getting the different Row element layout, and not getting the class tags.... hmm. This points to those function not existing or not getting called appropriately in his version (those sub-files may not have been included in the TiddlyWiki version).
On Thu, Nov 5, 2015 at 5:12 PM, Joshua Fontany <[email protected]> wrote: > > >> >>> I'll consider this topic closed. >> >> >> Not so fast. :D >> > > Cool. I had been digging around the original Json Editor stand-alone code, > maybe I can point to something useful. > > Warning: Code Blocks coming up. :D > > >> >> The "grid" feature requires a separate CSS module to work (bootstrap or >>> foundation). >>> >> >> What happens without such a "module"? >> >> ...and then what is that "module" to provide so that you can use either >> this or that "framework", e.g. bootstrap or some other? >> > > When I tried @btheado's method (below), I also got overlapping elements (& > I think he's right about conflicting CSS definitions...). See attached jpeg > for a screenshot. > >> >> 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. >> > > The easiest way to trigger this layout option is to include "format": > "grid" in the object's schema. > > So, I dug into @jdorn <https://github.com/jdorn>/json-editor > <https://github.com/jdorn/json-editor>'s source looking for references to > the "grid" option. There is one reference in the "object.js" sub-file of > the "jsoneditor.js" (distribution package) in the "layoutEditors: > function()": > if (this.format === 'grid'){ do stuff to make grid } > // Normal layout > else { do other stuff to make normal layout} > > Withing the If statement, there is are this.theme.getGridRow() calls > (which I think is where the bootstrap or foundation *.js files are > referenced): > // Layout the form for Grid format > container = document.createElement('div'); > for(i=0; i<rows.length; i++) { > var row = this.theme.getGridRow(); > container.appendChild(row); > for(j=0; j<rows[i].editors.length; j++) { > var key = rows[i].editors[j].key; > var editor = this.editors[key]; > > if(editor.options.hidden) editor.container.style.display = 'none'; > else > this.theme.setGridColumnSize(editor.container,rows[i].editors[j].width); > row.appendChild(editor.container); > } > } > While the else{} block had this: > ontainer = document.createElement('div'); > $each(this.property_order, function(i,key) { > var editor = self.editors[key]; > if(editor.property_removed) return; > var row = self.theme.getGridRow(); > container.appendChild(row); > > if(editor.options.hidden) editor.container.style.display = 'none'; > else self.theme.setGridColumnSize(editor.container,12); > row.appendChild(editor.container); > }); > > > > Looking in the included theme.js sub-file, we have this: > getGridRow: function() { > var el = document.createElement('div'); > el.className = 'row'; > return el; > } > > > To test the differences, I simplified the schema in @jdorn's sample ( > http://jeremydorn.com/json-editor/), and inspected the source code with > and without the Grid option set. > > Without "format" : "grid" set: > <div class="well well-sm" style="padding-bottom: 0px;"> > <div> > <div> > <div class="row"> > <div data-schematype="string" data-schemapath="root.name" > class="col-md-12"> > <div class=" form-group"> > <label class=" control-label">name</label> > <input type="text" class="form-control" pattern=".{4,}" name="root[name]"> > <p class="help-block">First and Last name</p> > </div> > <div/> > </div> > </div> > <div class="row"> > <div data-schematype="integer" data-schemapath="root.age" > class="col-md-12"> > <div class=" form-group"> > <label class=" control-label">age</label> > <input type="text" class="form-control" name="root[age]"> > </div> > <div/> > </div> > </div> > <div class="row"> > <div data-schematype="string" data-schemapath="root.favorite_color" > class="col-md-12"> > <div class=" form-group"> > <label class=" control-label">favorite color</label> > <input type="color" class="form-control" data-schemaformat="color" > name="root[favorite_color]"> > </div> > <div/> > </div> > </div> > <div class="row"> > <div data-schematype="string" data-schemapath="root.gender" > class="col-md-12"> > <div class=" form-group"> > <label class=" control-label">gender</label> > <select class="form-control" name="root[gender]"> > <option value="undefined"> </option> > <option value="male">male</option> > <option value="female">female</option> > </select> > </div> > <div/> > </div> > </div> > </div> > </div> > </div> > > With "format" : "grid" applied: > <div class="well well-sm" style="padding-bottom: 0px;"> > <div> > <div> > <div class="row"> > <div data-schematype="string" data-schemapath="root.name" > class="col-md-5"> > <div class=" form-group"> > <label class=" control-label">name</label> > <input type="text" class="form-control" pattern=".{4,}" name="root[name]"> > <p class="help-block">First and Last name</p> > </div> > <div/> > </div> > <div data-schematype="integer" data-schemapath="root.age" class="col-md-2"> > <div class=" form-group"> > <label class=" control-label">age</label> > <input type="text" class="form-control" name="root[age]"> > </div> > <div/> > </div> > <div data-schematype="string" data-schemapath="root.favorite_color" > class="col-md-3"> > <div class=" form-group"> > <label class=" control-label">favorite color</label> > <input type="color" class="form-control" data-schemaformat="color" > name="root[favorite_color]"> > </div> > <div/> > </div> > <div data-schematype="string" data-schemapath="root.gender" > class="col-md-2"> > <div class=" form-group"> > <label class=" control-label">gender</label> > <select class="form-control" name="root[gender]"> > <option value="undefined"> </option> > <option value="male">male</option> > <option value="female">female</option> > </select> > </div> > <div/> > </div> > </div> > </div> > </div> > </div> > > > So it seems to change how these Row elements are nested, and applies a CSS > class to define how many columns this element takes up (out of the 12 > column max used in the layout logic). > > Hope that helps to understand this issue. > > -- > You received this message because you are subscribed to a topic in the > Google Groups "TiddlyWiki" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/tiddlywiki/uZUsq7dgJ3E/unsubscribe. > To unsubscribe from this group and all its topics, send an email to > [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/tiddlywiki. > To view this discussion on the web visit > https://groups.google.com/d/msgid/tiddlywiki/e8bf275c-d8ce-43f8-9c9d-a6f8e3c77f14%40googlegroups.com > <https://groups.google.com/d/msgid/tiddlywiki/e8bf275c-d8ce-43f8-9c9d-a6f8e3c77f14%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CAM1fME5XwYQzXeLGc-jOopfmszgOs-9h76Fa97ZJ-L-MWnAr-w%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
