Oooops, correction: I _am_ getting the Row nesting behavior. I _am_not_ getting the CSS class tags applied.
On Thu, Nov 5, 2015 at 5:29 PM, Joshua Fontany <[email protected]> wrote: > 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/CAM1fME6e1298E%3D2F12s08OQ%3DCHNPHb6fq9LriHnVf%2BzwQ0q1%2Bg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
