}
});
+ /*
+ * - LGPL
+ *
+ * element
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.Element
+ * @extends Roo.bootstrap.Component
+ * Bootstrap Element class
+ * @cfg {String} html contents of the element
+ * @cfg {String} tag tag of the element
+ * @cfg {String} cls class of the element
+ * @cfg {Boolean} preventDefault (true|false) default false
+ * @cfg {Boolean} clickable (true|false) default false
+ *
+ * @constructor
+ * Create a new Element
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.Element = function(config){
+ Roo.bootstrap.Element.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ // raw events
+ /**
+ * @event click
+ * When a element is chick
+ * @param {Roo.bootstrap.Element} this
+ * @param {Roo.EventObject} e
+ */
+ "click" : true
+ });
+};
+
+Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, {
+
+ tag: 'div',
+ cls: '',
+ html: '',
+ preventDefault: false,
+ clickable: false,
+
+ getAutoCreate : function(){
+
+ var cfg = {
+ tag: this.tag,
+ // cls: this.cls, double assign in parent class Component.js :: onRender
+ html: this.html
+ };
+
+ return cfg;
+ },
+
+ initEvents: function()
+ {
+ Roo.bootstrap.Element.superclass.initEvents.call(this);
+
+ if(this.clickable){
+ this.el.on('click', this.onClick, this);
+ }
+
+ },
+
+ onClick : function(e)
+ {
+ if(this.preventDefault){
+ e.preventDefault();
+ }
+
+ this.fireEvent('click', this, e);
+ },
+
+ getValue : function()
+ {
+ return this.el.dom.innerHTML;
+ },
+
+ setValue : function(value)
+ {
+ this.el.dom.innerHTML = value;
+ }
+
+});
+
+
+
/*
* - LGPL
*
};
var settings=this;
- ['xs','sm','md','lg'].map(function(size){
+ var sizes = ['xs','sm','md','lg'];
+ sizes.map(function(size ,ix){
//Roo.log( size + ':' + settings[size]);
if (settings[size+'off'] !== false) {
}
if (!settings[size]) { // 0 = hidden
- cfg.cls += ' hidden-' + size + ' hidden' + size + '-down';;
+ cfg.cls += ' hidden-' + size + ' hidden-' + size + '-down';
+ // bootsrap4
+ for (var i = ix; i > -1; i--) {
+ cfg.cls += ' d-' + sizes[i] + '-none';
+ }
+
+
return;
}
cfg.cls += ' col-' + size + '-' + settings[size] + (
*
* possible... may not be implemented..
* @cfg {String} header_image src url of image.
- * @cfg {String} header
+ * @cfg {String|Object} header
* @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
*
* @cfg {String} title
* @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)
+ * @config {Boolean} dragable if this card can be dragged.
+ * @config {Boolean} drag_group group for drag
+ *
+
* @constructor
* Create a new Container
* @param {Object} config The config object
html : '',
footer: '',
+ dragable : false,
+ drag_group : false,
+
childContainer : false,
layoutCls : function()
};
if (this.weight.length && this.weight != 'light') {
- cfg.cls += ' text-white'
+ cfg.cls += ' text-white';
+ } else {
+ cfg.cls += ' text-dark'; // need as it's nested..
}
if (this.weight.length) {
cfg.cls += ' bg-' + this.weight;
cls : 'card-header',
html : this.header // escape?
});
- }
+ } else {
+ cfg.cn.push({
+ tag : 'div',
+ cls : 'card-header d-none'
+ });
+ }
if (this.header_image.length) {
cfg.cn.push({
tag : 'img',
cls : 'card-img-top',
src: this.header_image // escape?
});
- }
+ } else {
+ cfg.cn.push({
+ tag : 'div',
+ cls : 'card-img-top d-none'
+ });
+ }
var body = {
tag : 'div',
}
// fixme ? handle objects?
if (this.footer.length) {
- body.cn.push({
+ cfg.cn.push({
tag : 'div',
cls : 'card-footer',
html: this.footer // escape?
},
+ getCardHeader : function()
+ {
+ var ret = this.el.select('.card-header',true).first();
+ if (ret.hasClass('d-none')) {
+ ret.removeClass('d-none');
+ }
+
+ return ret;
+ },
+
+ getCardImageTop : function()
+ {
+ var ret = this.el.select('.card-img-top',true).first();
+ if (ret.hasClass('d-none')) {
+ ret.removeClass('d-none');
+ }
+
+ return ret;
+ },
+
getChildContainer : function()
{
return false;
}
return this.el.select('.roo-card-body-ctr',true).first();
+ },
+
+ initEvents: function()
+ {
+ if(this.dragable){
+ this.dragZone = new Roo.dd.DragZone(this.getEl(), {
+ containerScroll: true,
+ ddGroup: this.drag_group || 'default_card_drag_group'
+ });
+ this.dragZone.getDragData = this.getDragData.createDelegate(this);
+ }
+
+
+
+ },
+ getDragData : function(e) {
+ var target = this.getEl();
+ if (target) {
+ //this.handleSelection(e);
+
+ var dragData = {
+ source: this,
+ copy: false,
+ nodes: this.getEl(),
+ records: []
+ };
+
+
+ dragData.ddel = target.dom ; // the div element
+ Roo.log(target.getWidth( ));
+ dragData.ddel.style.width = target.getWidth() + 'px';
+
+ return dragData;
+ }
+ return false;
}
});
/*
+ * - LGPL
+ *
+ * Card header - holder for the card header elements.
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.CardHeader
+ * @extends Roo.bootstrap.Element
+ * Bootstrap CardHeader class
+ * @constructor
+ * Create a new Card Header - that you can embed children into
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.CardHeader = function(config){
+ Roo.bootstrap.CardHeader.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.bootstrap.CardHeader, Roo.bootstrap.Element, {
+
+
+ container_method : 'getCardHeader'
+
+
+
+
+
+});
+
+
+
+ /*
+ * - LGPL
+ *
+ * Card header - holder for the card header elements.
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.CardImageTop
+ * @extends Roo.bootstrap.Element
+ * Bootstrap CardImageTop class
+ * @constructor
+ * Create a new Card Image Top container
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.CardImageTop = function(config){
+ Roo.bootstrap.CardImageTop.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element, {
+
+
+ container_method : 'getCardImageTop'
+
+
+
+
+});
+
+
+
+ /*
* - LGPL
*
* image
cn.push({
tag: 'div',
- cls: Roo.bootstrap.version == 4 ? 'nav flex-row roo-navbar-collapse' : 'collapse navbar-collapse roo-navbar-collapse',
+ cls: Roo.bootstrap.version == 4 ? 'nav flex-row roo-navbar-collapse collapse navbar-collapse' : 'collapse navbar-collapse roo-navbar-collapse',
cn : []
});
return this.getChildContainer();
},
+ getChildContainer : function()
+ {
+
+ return this.el.select('.roo-navbar-collapse',true).first();
+
+
+ },
initEvents : function()
{
- /*
- * - LGPL
- *
- * element
- *
- */
-
-/**
- * @class Roo.bootstrap.Element
- * @extends Roo.bootstrap.Component
- * Bootstrap Element class
- * @cfg {String} html contents of the element
- * @cfg {String} tag tag of the element
- * @cfg {String} cls class of the element
- * @cfg {Boolean} preventDefault (true|false) default false
- * @cfg {Boolean} clickable (true|false) default false
- *
- * @constructor
- * Create a new Element
- * @param {Object} config The config object
- */
-
-Roo.bootstrap.Element = function(config){
- Roo.bootstrap.Element.superclass.constructor.call(this, config);
-
- this.addEvents({
- // raw events
- /**
- * @event click
- * When a element is chick
- * @param {Roo.bootstrap.Element} this
- * @param {Roo.EventObject} e
- */
- "click" : true
- });
-};
-
-Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, {
-
- tag: 'div',
- cls: '',
- html: '',
- preventDefault: false,
- clickable: false,
-
- getAutoCreate : function(){
-
- var cfg = {
- tag: this.tag,
- // cls: this.cls, double assign in parent class Component.js :: onRender
- html: this.html
- };
-
- return cfg;
- },
-
- initEvents: function()
- {
- Roo.bootstrap.Element.superclass.initEvents.call(this);
-
- if(this.clickable){
- this.el.on('click', this.onClick, this);
- }
-
- },
-
- onClick : function(e)
- {
- if(this.preventDefault){
- e.preventDefault();
- }
-
- this.fireEvent('click', this, e);
- },
-
- getValue : function()
- {
- return this.el.dom.innerHTML;
- },
-
- setValue : function(value)
- {
- this.el.dom.innerHTML = value;
- }
-
-});
-
-
-
/*
* - LGPL
*
var cfg = {};
- cfg.cls = 'form-group ' + this.inputType; //input-group
+ cfg.cls = 'form-group form-check ' + this.inputType; //input-group
if(this.inline){
- cfg.cls += ' ' + this.inputType + '-inline';
+ cfg.cls += ' ' + this.inputType + '-inline form-check-inline';
}
var input = {
//<style type="text/css">' +
//'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
//'</style>' +
- ' </head><body class="' + cls + '"></body></html>';
+ ' </head><body contenteditable="true" data-enable-grammerly="true" class="' + cls + '"></body></html>';
},
// private
*/
isLocked : function(){
return this.locked;
+ },
+
+
+ initEvents : function ()
+ {
+
}
});
/**
projects / roojs1 / blobdiff