X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=f670fba5b400c3104ee4a7344a7894a173d165b5;hb=3ac3969308fd60ccb370ce49b7ac94878d416ef1;hp=f0882546a4a088c3be8f16e19293a43092e02442;hpb=ec54ebe91dea41a473d1175c612c4eb4f567effb;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index f0882546a4..f670fba5b4 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -1488,6 +1488,248 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component, { }); /* + * - LGPL + * + * This is BS4's Card element.. - similar to our containers probably.. + * + */ +/** + * @class Roo.bootstrap.Card + * @extends Roo.bootstrap.Component + * Bootstrap Card class + * + * + * possible... may not be implemented.. + * @cfg {String} header_image src url of image. + * @cfg {String} header + * @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default + * + * @cfg {String} title + * @cfg {String} subtitle + * @cfg {String} html -- html contents - or just use children.. + * @cfg {String} footer + + * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark) + * + * @cfg {String} margin (0|1|2|3|4|5|auto) + * @cfg {String} margin_top (0|1|2|3|4|5|auto) + * @cfg {String} margin_bottom (0|1|2|3|4|5|auto) + * @cfg {String} margin_left (0|1|2|3|4|5|auto) + * @cfg {String} margin_right (0|1|2|3|4|5|auto) + * @cfg {String} margin_x (0|1|2|3|4|5|auto) + * @cfg {String} margin_y (0|1|2|3|4|5|auto) + * + * @cfg {String} padding (0|1|2|3|4|5) + * @cfg {String} padding_top (0|1|2|3|4|5) + * @cfg {String} padding_bottom (0|1|2|3|4|5) + * @cfg {String} padding_left (0|1|2|3|4|5) + * @cfg {String} padding_right (0|1|2|3|4|5) + * @cfg {String} padding_x (0|1|2|3|4|5) + * @cfg {String} padding_y (0|1|2|3|4|5) + * + * @cfg {String} display (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + * @cfg {String} display_xs (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + * @cfg {String} display_sm (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + + * @constructor + * Create a new Container + * @param {Object} config The config object + */ + +Roo.bootstrap.Card = function(config){ + Roo.bootstrap.Card.superclass.constructor.call(this, config); + + this.addEvents({ + + }); +}; + + +Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { + + + weight : '', + + margin: '', /// may be better in component? + margin_top: '', + margin_bottom: '', + margin_left: '', + margin_right: '', + margin_x: '', + margin_y: '', + + padding : '', + padding_top: '', + padding_bottom: '', + padding_left: '', + padding_right: '', + padding_x: '', + padding_y: '', + + display: '', + display_xs: '', + display_sm: '', + display_lg: '', + display_xl: '', + + header_image : '', + header : '', + header_size : 0, + title : '', + subtitle : '', + html : '', + footer: '', + + childContainer : false, + + layoutCls : function() + { + var cls = ''; + var t = this; + Roo.log(this.margin_bottom.length); + ['', 'top', 'bottom', 'left', 'right', 'x', 'y' ].forEach(function(v) { + // in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet + + if (('' + t['margin' + (v.length ? '_' : '') + v]).length) { + cls += ' m' + (v.length ? v[0] : '') + '-' + t['margin' + (v.length ? '_' : '') + v]; + } + if (('' + t['padding' + (v.length ? '_' : '') + v]).length) { + cls += ' p' + (v.length ? v[0] : '') + '-' + t['padding' + (v.length ? '_' : '') + v]; + } + }); + + ['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) { + if (('' + t['display' + (v.length ? '_' : '') + v]).length) { + cls += ' d' + (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v] + } + }); + + // more generic support? + if (this.hidden) { + cls += ' d-none'; + } + + return cls; + }, + + // Roo.log("Call onRender: " + this.xtype); + /* We are looking at something like this. +
+ ... +
+
Card title
+
Card subtitle
+ + >> this bit is really the body... +
<< we will ad dthis in hopefully it will not break shit. + + ** card text does not actually have any styling... + +

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+ +
<< + Card link + +
+
+ Last updated 3 mins ago +
+
+ */ + getAutoCreate : function(){ + + var cfg = { + tag : 'div', + cls : 'card', + cn : [ ] + }; + + if (this.weight.length && this.weight != 'light') { + cfg.cls += ' text-white' + } + if (this.weight.length) { + cfg.cls += ' bg-' + this.weight; + } + + cfg.cls += this.layoutCls(); + + if (this.header.length) { + cfg.cn.push({ + tag : this.header_size > 0 ? 'h' + this.header_size : 'div', + cls : 'card-header', + html : this.header // escape? + }); + } + if (this.header_image.length) { + cfg.cn.push({ + tag : 'img', + cls : 'card-img-top', + src: this.header_image // escape? + }); + } + + var body = { + tag : 'div', + cls : 'card-body', + cn : [] + }; + cfg.cn.push(body); + + if (this.title.length) { + body.cn.push({ + tag : 'div', + cls : 'card-title', + src: this.title // escape? + }); + } + + if (this.subtitle.length) { + body.cn.push({ + tag : 'div', + cls : 'card-title', + src: this.subtitle // escape? + }); + } + + body.cn.push({ + tag : 'div', + cls : 'roo-card-body-ctr' + }); + + if (this.html.length) { + body.cn.push({ + tag: 'div', + html : this.html + }); + } + // fixme ? handle objects? + if (this.footer.length) { + body.cn.push({ + tag : 'div', + cls : 'card-footer', + html: this.footer // escape? + }); + } + // footer... + + return cfg; + }, + + + getChildContainer : function() + { + + if(!this.el){ + return false; + } + return this.el.select('.roo-card-body-ctr',true).first(); + } + +}); + +/* * - LGPL * * image @@ -7320,9 +7562,12 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, { if (tbd) { - tbd.setSize(ctr.getWidth(), - ctr.getHeight() - ((thd ? thd.getHeight() : 0) + (tfd ? tfd.getHeight() : 0)) - ); + tbd.setWidth(ctr.getWidth()); + // if the body has a max height - and then scrolls - we should perhaps set up the height here + // this needs fixing for various usage - currently only hydra job advers I think.. + //tdb.setHeight( + // ctr.getHeight() - ((thd ? thd.getHeight() : 0) + (tfd ? tfd.getHeight() : 0)) + //); var barsize = (tbd.dom.offsetWidth - tbd.dom.clientWidth); cw -= barsize; } @@ -11825,6 +12070,16 @@ Roo.extend(Roo.data.Store, Roo.util.Observable, { var r = this.reader.readRecords(o); this.loadRecords(r, {add: append}, true); }, + + /** + * using 'cn' the nested child reader read the child array into it's child stores. + * @param {Object} rec The record with a 'children array + */ + loadDataFromChildren : function(rec) + { + this.loadData(this.reader.toLoadData(rec)); + }, + /** * Gets the number of cached records. @@ -12129,14 +12384,16 @@ Roo.extend(Roo.data.Store, Roo.util.Observable, { * Small helper class to make creating Stores from Array data easier. * @cfg {Number} id The array index of the record id. Leave blank to auto generate ids. * @cfg {Array} fields An array of field definition objects, or field name strings. + * @cfg {Object} an existing reader (eg. copied from another store) * @cfg {Array} data The multi-dimensional array of data * @constructor * @param {Object} config */ -Roo.data.SimpleStore = function(config){ +Roo.data.SimpleStore = function(config) +{ Roo.data.SimpleStore.superclass.constructor.call(this, { isLocal : true, - reader: new Roo.data.ArrayReader({ + reader: typeof(config.reader) != 'undefined' ? config.reader : new Roo.data.ArrayReader({ id: config.id }, Roo.data.Record.create(config.fields) @@ -12313,6 +12570,9 @@ Roo.data.DataReader = function(meta, recordType){ }; Roo.data.DataReader.prototype = { + + + readerType : 'Data', /** * Create an empty record * @param {Object} data (optional) - overlay some values @@ -12333,6 +12593,7 @@ Roo.data.DataReader.prototype = { return new this.recordType(Roo.apply(da, d)); } + };/* * Based on: * Ext JS Library 1.1.1 @@ -12871,6 +13132,8 @@ Roo.data.JsonReader = function(meta, recordType){ }; Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, { + readerType : 'Json', + /** * @prop {Boolean} metaFromRemote - if the meta data was loaded from the remote source. * Used by Store query builder to append _requestMeta to params. @@ -13012,6 +13275,14 @@ Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, { records : records, totalRecords : totalRecords }; + }, + // used when loading children.. @see loadDataFromChildren + toLoadData: function(rec) + { + // expect rec just to be an array.. eg [a,b,c, [...] << cn ] + var data = typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn; + return { data : data, total : data.length }; + } });/* * Based on: @@ -13061,44 +13332,54 @@ var myReader = new Roo.data.ArrayReader({ * * created using {@link Roo.data.Record#create}. */ -Roo.data.ArrayReader = function(meta, recordType){ - - +Roo.data.ArrayReader = function(meta, recordType) +{ Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields); }; Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, { - /** + + /** * Create a data block containing Roo.data.Records from an XML document. * @param {Object} o An Array of row objects which represents the dataset. * @return {Object} A data block which is used by an {@link Roo.data.Store} object as * a cache of Roo.data.Records. */ - readRecords : function(o){ + readRecords : function(o) + { var sid = this.meta ? this.meta.id : null; var recordType = this.recordType, fields = recordType.prototype.fields; var records = []; var root = o; - for(var i = 0; i < root.length; i++){ - var n = root[i]; - var values = {}; - var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null); - for(var j = 0, jlen = fields.length; j < jlen; j++){ - var f = fields.items[j]; - var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j; - var v = n[k] !== undefined ? n[k] : f.defaultValue; - v = f.convert(v); - values[f.name] = v; - } - var record = new recordType(values, id); - record.json = n; - records[records.length] = record; + for(var i = 0; i < root.length; i++){ + var n = root[i]; + var values = {}; + var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null); + for(var j = 0, jlen = fields.length; j < jlen; j++){ + var f = fields.items[j]; + var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j; + var v = n[k] !== undefined ? n[k] : f.defaultValue; + v = f.convert(v); + values[f.name] = v; } - return { - records : records, - totalRecords : records.length - }; + var record = new recordType(values, id); + record.json = n; + records[records.length] = record; + } + return { + records : records, + totalRecords : records.length + }; + }, + // used when loading children.. @see loadDataFromChildren + toLoadData: function(rec) + { + // expect rec just to be an array.. eg [a,b,c, [...] << cn ] + return typeof(rec.data.cn) == 'undefined' ? [] : rec.data.cn; + } + + });/* * - LGPL * * @@ -22548,7 +22829,11 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, { insertTag : function(tg) { // could be a bit smarter... -> wrap the current selected tRoo.. - if (tg.toLowerCase() == 'span' || tg.toLowerCase() == 'code') { + if (tg.toLowerCase() == 'span' || + tg.toLowerCase() == 'code' || + tg.toLowerCase() == 'sup' || + tg.toLowerCase() == 'sub' + ) { range = this.createRange(this.getSelection()); var wrappingNode = this.doc.createElement(tg.toLowerCase());