X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=919cf17219622d0d46e291dc7ccd74c04d382f1a;hp=7433d5cefc4b7584dfbd6921861ca074640b90a3;hb=refs%2Fheads%2Fwip_alan_T7160_sort_out_comment_removal_and;hpb=5c4bd9e5eeb24b7cbf8a5c1bbdbb662847ad8009
diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 7433d5cefc..919cf17219 100644
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -1,18 +1,23 @@
-/**
+Roo.bootstrap = {};/**
* set the version of bootstrap based on the stylesheet...
*
*/
-Roo.bootstrap.version = (
- function() {
- var ret=3;
- Roo.each(document.styleSheets, function(s) {
- if ( s.href && s.href.match(/css-bootstrap4/)) {
- ret=4;
- }
- });
- return ret;
-})(); /*
+Roo.bootstrap.version = ( function() {
+ var ret=3;
+ Roo.each(document.styleSheets, function(s) {
+ if ( s.href && s.href.match(/css-bootstrap4/)) {
+ ret=4;
+ }
+ });
+ if (ret > 3) {
+ Roo.Element.prototype.visibilityMode = Roo.Element.DISPLAY;
+ }
+ return ret;
+})(); Roo.bootstrap.menu = Roo.bootstrap.menu || {};
+Roo.bootstrap.nav = {};
+
+Roo.bootstrap.form = {};Roo.bootstrap.panel = {};Roo.bootstrap.layout = {};/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
@@ -93,6 +98,7 @@ Roo.Shadow.prototype = {
* frame: Shadow displays equally on all four sides
* drop: Traditional bottom-right drop shadow (default)
*/
+ mode: false,
/**
* @cfg {String} offset
* The number of pixels to offset the shadow from the element (defaults to 4)
@@ -220,6 +226,8 @@ Roo.bootstrap = Roo.bootstrap || {};
/**
* @class Roo.bootstrap.Component
* @extends Roo.Component
+ * @abstract
+ * @children Roo.bootstrap.Component
* Bootstrap Component base class
* @cfg {String} cls css class
* @cfg {String} style any extra css
@@ -328,11 +336,11 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, {
}
if (this.cls) {
- cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
+ cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
}
if (this.style) { // fixme needs to support more complex style data.
- cfg.style = this.style;
+ cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
}
if(this.name){
@@ -360,6 +368,11 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, {
{
return this.el;
},
+ getDocumentBody : function() // used by menus - as they are attached to the body so zIndexes work
+ {
+ return Roo.get(document.body);
+ },
+
/**
* Fetch the element to display the tooltip on.
* @return {Roo.Element} defaults to this.el
@@ -642,12 +655,16 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, {
/**
* @class Roo.bootstrap.Element
* @extends Roo.bootstrap.Component
- * Bootstrap Element class
+ * @children Roo.bootstrap.Component
+ * Bootstrap Element class (basically a DIV used to make random stuff )
+ *
* @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
+ * @cfg {String} role default blank - set to button to force cursor pointer
+
*
* @constructor
* Create a new Element
@@ -665,7 +682,9 @@ Roo.bootstrap.Element = function(config){
* @param {Roo.bootstrap.Element} this
* @param {Roo.EventObject} e
*/
- "click" : true
+ "click" : true
+
+
});
};
@@ -676,6 +695,8 @@ Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, {
html: '',
preventDefault: false,
clickable: false,
+ tapedTwice : false,
+ role : false,
getAutoCreate : function(){
@@ -684,6 +705,9 @@ Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, {
// cls: this.cls, double assign in parent class Component.js :: onRender
html: this.html
};
+ if (this.role !== false) {
+ cfg.role = this.role;
+ }
return cfg;
},
@@ -696,6 +720,7 @@ Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, {
this.el.on('click', this.onClick, this);
}
+
},
onClick : function(e)
@@ -704,9 +729,14 @@ Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component, {
e.preventDefault();
}
- this.fireEvent('click', this, e);
+ this.fireEvent('click', this, e); // why was this double click before?
},
+
+
+
+
+
getValue : function()
{
return this.el.dom.innerHTML;
@@ -825,6 +855,8 @@ Roo.extend(Roo.bootstrap.DropTarget, Roo.bootstrap.Element, {
/**
* @class Roo.bootstrap.Body
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
+ * @parent none builder
* Bootstrap Body class
*
* @constructor
@@ -876,6 +908,8 @@ Roo.extend(Roo.bootstrap.Body, Roo.bootstrap.Component, {
* @class Roo.bootstrap.ButtonGroup
* @extends Roo.bootstrap.Component
* Bootstrap ButtonGroup class
+ * @children Roo.bootstrap.Button Roo.bootstrap.form.Form
+ *
* @cfg {String} size lg | sm | xs (default empty normal)
* @cfg {String} align vertical | justified (default none)
* @cfg {String} direction up | down (default down)
@@ -961,8 +995,8 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, {
* @extends Roo.bootstrap.Component
* Bootstrap Button class
* @cfg {String} html The button content
- * @cfg {String} weight (default|primary|secondary|success|info|warning|danger|link ) default
- * @cfg {String} badge_weight (default|primary|secondary|success|info|warning|danger|link ) default (same as button)
+ * @cfg {String} weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default
+ * @cfg {String} badge_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default (same as button)
* @cfg {Boolean} outline default false (except for weight=default which emulates old behaveiour with an outline)
* @cfg {String} size (lg|sm|xs)
* @cfg {String} tag (a|input|submit)
@@ -981,7 +1015,9 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, {
* @cfg {Boolean} preventDefault default true (stop click event triggering the URL if it's a link.)
* @cfg {Boolean} removeClass remove the standard class..
* @cfg {String} target (_self|_blank|_parent|_top|other) target for a href.
- *
+ * @cfg {Boolean} grpup if parent is a btn group - then it turns it into a toogleGroup.
+ * @cfg {Roo.bootstrap.menu.Menu} menu a Menu
+
* @constructor
* Create a new button
* @param {Object} config The config object
@@ -990,23 +1026,23 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, {
Roo.bootstrap.Button = function(config){
Roo.bootstrap.Button.superclass.constructor.call(this, config);
- this.weightClass = ["btn-default btn-outline-secondary",
- "btn-primary",
- "btn-success",
- "btn-info",
- "btn-warning",
- "btn-danger",
- "btn-link"
- ],
+
this.addEvents({
// raw events
/**
* @event click
- * When a butotn is pressed
+ * When a button is pressed
* @param {Roo.bootstrap.Button} btn
* @param {Roo.EventObject} e
*/
"click" : true,
+ /**
+ * @event dblclick
+ * When a button is double clicked
+ * @param {Roo.bootstrap.Button} btn
+ * @param {Roo.EventObject} e
+ */
+ "dblclick" : true,
/**
* @event toggle
* After the button has been toggles
@@ -1043,6 +1079,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
removeClass: false,
name: false,
target: false,
+ group : false,
pressed : null,
@@ -1077,9 +1114,9 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
}
]
};
-
- if (['default', 'secondary' , 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
- cfg.cls += ' '+this.weight;
+ // why are we validating the weights?
+ if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
+ cfg.cls += ' ' + this.weight;
}
return cfg;
@@ -1094,15 +1131,15 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
return cfg;
}
+
-
if (this.theme==='default') {
cfg.cls = 'btn roo-button';
//if (this.parentType != 'Navbar') {
this.weight = this.weight.length ? this.weight : 'default';
//}
- if (['default', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
+ if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
var outline = this.outline || this.weight == 'default' ? 'outline-' : '';
var weight = this.weight == 'default' ? 'secondary' : this.weight;
@@ -1117,7 +1154,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
cfg.tag = 'a';
cfg.cls = 'btn-glow roo-button';
- if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
+ if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) {
cfg.cls += ' ' + this.weight;
}
@@ -1270,17 +1307,30 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
}
- if (this.el.hasClass('roo-button')) {
+ if (this.el.hasClass('roo-button')) {
+ this.el.on('click', this.onClick, this);
+ this.el.on('dblclick', this.onDblClick, this);
+ } else {
+ this.el.select('.roo-button').on('click', this.onClick, this);
+ this.el.select('.roo-button').on('dblclick', this.onDblClick, this);
+
+ }
+ // why?
+ if(this.removeClass){
this.el.on('click', this.onClick, this);
- } else {
- this.el.select('.roo-button').on('click', this.onClick, this);
- }
-
- if(this.removeClass){
- this.el.on('click', this.onClick, this);
- }
-
- this.el.enableDisplayMode();
+ }
+
+ if (this.group === true) {
+ if (this.pressed === false || this.pressed === true) {
+ // nothing
+ } else {
+ this.pressed = false;
+ this.setActive(this.pressed);
+ }
+
+ }
+
+ this.el.enableDisplayMode();
},
onClick : function(e)
@@ -1290,10 +1340,29 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
}
Roo.log('button on click ');
- if(this.preventDefault){
+ if(this.href === '' || this.preventDefault){
e.preventDefault();
}
+ if (this.group) {
+ if (this.pressed) {
+ // do nothing -
+ return;
+ }
+ this.setActive(true);
+ var pi = this.parent().items;
+ for (var i = 0;i < pi.length;i++) {
+ if (this == pi[i]) {
+ continue;
+ }
+ if (pi[i].el.hasClass('roo-button')) {
+ pi[i].setActive(false);
+ }
+ }
+ this.fireEvent('click', this, e);
+ return;
+ }
+
if (this.pressed === true || this.pressed === false) {
this.toggleActive(e);
}
@@ -1301,7 +1370,16 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
this.fireEvent('click', this, e);
},
-
+ onDblClick: function(e)
+ {
+ if (this.disabled) {
+ return;
+ }
+ if(this.preventDefault){
+ e.preventDefault();
+ }
+ this.fireEvent('dblclick', this, e);
+ },
/**
* Enables this button
*/
@@ -1309,6 +1387,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
{
this.disabled = false;
this.el.removeClass('disabled');
+ this.el.dom.removeAttribute("disabled");
},
/**
@@ -1318,6 +1397,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
{
this.disabled = true;
this.el.addClass('disabled');
+ this.el.attr("disabled", "disabled")
},
/**
* sets the active state on/off,
@@ -1333,8 +1413,8 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
*/
toggleActive : function(e)
{
- this.setActive(!this.pressed);
- this.fireEvent('toggle', this, e, !this.pressed);
+ this.setActive(!this.pressed); // this modifies pressed...
+ this.fireEvent('toggle', this, e, this.pressed);
},
/**
* get the current active state
@@ -1361,7 +1441,8 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
setWeight : function(str)
{
- this.el.removeClass(this.weightClass);
+ this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-' + w; } ) );
+ this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-outline-' + w; } ) );
this.weight = str;
var outline = this.outline ? 'outline-' : '';
if (str == 'default') {
@@ -1373,8 +1454,21 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
});
-
- /*
+// fixme - this is probably generic bootstrap - should go in some kind of enum file.. - like sizes.
+
+Roo.bootstrap.Button.weights = [
+ 'default',
+ 'secondary' ,
+ 'primary',
+ 'success',
+ 'info',
+ 'warning',
+ 'danger',
+ 'link',
+ 'light',
+ 'dark'
+
+];/*
* - LGPL
*
* column
@@ -1384,6 +1478,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, {
/**
* @class Roo.bootstrap.Column
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
* Bootstrap Column class
* @cfg {Number} xs colspan out of 12 for mobile-sized screens or 0 for hidden
* @cfg {Number} sm colspan out of 12 for tablet-sized screens or 0 for hidden
@@ -1511,6 +1606,8 @@ Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component, {
/**
* @class Roo.bootstrap.Container
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
+ * @parent builder
* Bootstrap Container class
* @cfg {Boolean} jumbotron is it a jumbotron element
* @cfg {String} html content of element
@@ -1874,22 +1971,19 @@ 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
+ * @children Roo.bootstrap.Component
+ * @licence LGPL
+ * Bootstrap Card class - note this has children as CardHeader/ImageTop/Footer.. - which should really be listed properties?
*
*
* possible... may not be implemented..
* @cfg {String} header_image src url of image.
* @cfg {String|Object} header
* @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
+ * @cfg {Number} header_weight (primary|secondary|success|info|warning|danger|light|dark)
*
* @cfg {String} title
* @cfg {String} subtitle
@@ -1907,7 +2001,7 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component, {
* @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_top (0|1|2|3|4|5)next_to_card
* @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)
@@ -1943,22 +2037,31 @@ Roo.bootstrap.Card = function(config){
/**
* @event drop
* When a element a card is dropped
- * @param {Roo.bootstrap.Element} this
- * @param {Roo.Element} n the node being dropped?
- * @param {Object} dd Drag and drop data
- * @param {Roo.EventObject} e
- * @param {Roo.EventObject} data the data passed via getDragData
+ * @param {Roo.bootstrap.Card} this
+ *
+ *
+ * @param {Roo.bootstrap.Card} move_card the card being dropped?
+ * @param {String} position 'above' or 'below'
+ * @param {Roo.bootstrap.Card} next_to_card What card position is relative to of 'false' for empty list.
+
*/
'drop' : true,
/**
* @event rotate
* When a element a card is rotate
- * @param {Roo.bootstrap.Element} this
+ * @param {Roo.bootstrap.Card} this
* @param {Roo.Element} n the node being dropped?
* @param {Boolean} rotate status
*/
- 'rotate' : true
-
+ 'rotate' : true,
+ /**
+ * @event cardover
+ * When a card element is dragged over ready to drop (return false to block dropable)
+ * @param {Roo.bootstrap.Card} this
+ * @param {Object} data from dragdrop
+ */
+ 'cardover' : true
+
});
};
@@ -2009,6 +2112,12 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
drop_group : false,
childContainer : false,
dropEl : false, /// the dom placeholde element that indicates drop location.
+ containerEl: false, // body container
+ bodyEl: false, // card-body
+ headerContainerEl : false, //
+ headerEl : false,
+ header_imageEl : false,
+
layoutCls : function()
{
@@ -2028,7 +2137,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) {
if (('' + t['display' + (v.length ? '_' : '') + v]).length) {
- cls += ' d' + (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v]
+ cls += ' d' + (v.length ? '-' : '') + v + '-' + t['display' + (v.length ? '_' : '') + v]
}
});
@@ -2081,13 +2190,14 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
cfg.cls += ' bg-' + this.weight;
}
- cfg.cls += this.layoutCls();
+ cfg.cls += ' ' + this.layoutCls();
var hdr = false;
+ var hdr_ctr = false;
if (this.header.length) {
hdr = {
tag : this.header_size > 0 ? 'h' + this.header_size : 'div',
- cls : 'card-header',
+ cls : 'card-header ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
cn : []
};
cfg.cn.push(hdr);
@@ -2095,10 +2205,11 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
} else {
hdr = {
tag : 'div',
- cls : 'card-header d-none',
+ cls : 'card-header d-none ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
cn : []
};
cfg.cn.push(hdr);
+ hdr_ctr = hdr;
}
if (this.collapsable) {
hdr_ctr = {
@@ -2217,7 +2328,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
},
getCardImageTop : function()
{
- var ret = this.el.select('.card-img-top',true).first();
+ var ret = this.header_imageEl;
if (ret.hasClass('d-none')) {
ret.removeClass('d-none');
}
@@ -2236,8 +2347,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
initEvents: function()
{
-
- this.bodyEl = this.getChildContainer();
+ this.bodyEl = this.el.select('.card-body',true).first();
+ this.containerEl = this.getChildContainer();
if(this.dragable){
this.dragZone = new Roo.dd.DragZone(this.getEl(), {
containerScroll: true,
@@ -2263,16 +2374,19 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
if (this.rotateable) {
this.el.select('.card-header',true).on('click', this.onToggleRotate, this);
}
- this.collapsableEl = this.el.select('.roo-collapsable').first();
+ this.collapsableEl = this.el.select('.roo-collapsable',true).first();
- this.footerEl = this.el.select('.card-footer').first();
- this.collapsableToggleEl = this.el.select('.roo-collapse-toggle');
- this.headerEl = this.el.select('.roo-card-header-ctr').first();
+ this.footerEl = this.el.select('.card-footer',true).first();
+ this.collapsableToggleEl = this.el.select('.roo-collapse-toggle',true).first();
+ this.headerContainerEl = this.el.select('.roo-card-header-ctr',true).first();
+ this.headerEl = this.el.select('.card-header',true).first();
if (this.rotated) {
this.el.addClass('roo-card-rotated');
this.fireEvent('rotate', this, true);
}
+ this.header_imageEl = this.el.select('.card-img-top',true).first();
+ this.header_imageEl.on('load', this.onHeaderImageLoad, this );
},
getDragData : function(e)
@@ -2300,11 +2414,22 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
/**
* Part of the Roo.dd.DropZone interface. If no target node is found, the
* whole Element becomes the target, and this causes the drop gesture to append.
+ *
+ * Returns an object:
+ * {
+
+ position : 'below' or 'above'
+ card : relateive to card OBJECT (or true for no cards listed)
+ items_n : relative to nth item in list
+ card_n : relative to nth card in list
+ }
+ *
+ *
*/
getTargetFromEvent : function(e, dragged_card_el)
{
var target = e.getTarget();
- while ((target !== null) && (target.parentNode != this.bodyEl.dom)) {
+ while ((target !== null) && (target.parentNode != this.containerEl.dom)) {
target = target.parentNode;
}
@@ -2393,7 +2518,11 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
}
Roo.log(['getTargetFromEvent', target_info ]);
-
+
+ if (this.fireEvent('cardover', this, [ data ]) === false) {
+ return false;
+ }
+
this.dropPlaceHolder('show', target_info,data);
return false;
@@ -2416,22 +2545,48 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
if (info === false) {
return false;
}
-
- if (this.fireEvent("drop", this, n, dd, e, data) === false) {
+ this.dropPlaceHolder('hide');
+
+
+
+ this.acceptCard(data.source, info.position, info.card, info.items_n);
+ return true;
+
+ },
+ firstChildCard : function()
+ {
+ for (var i = 0;i< this.items.length;i++) {
+
+ if (!this.items[i].el.hasClass('card')) {
+ continue;
+ }
+ return this.items[i];
+ }
+ return this.items.length ? this.items[this.items.length-1] : false; // don't try and put stuff after the cards...
+ },
+ /**
+ * accept card
+ *
+ * - card.acceptCard(move_card, info.position, info.card, info.items_n);
+ */
+ acceptCard : function(move_card, position, next_to_card )
+ {
+ if (this.fireEvent("drop", this, move_card, position, next_to_card) === false) {
return false;
}
-
- this.dropPlaceHolder('hide');
- // do the dom manipulation first..
- var dom = data.source.el.dom;
- dom.parentNode.removeChild(dom);
+ var to_items_n = next_to_card ? this.items.indexOf(next_to_card) : 0;
+ move_card.parent().removeCard(move_card);
- if (info.card !== true) {
- var cardel = info.card.el.dom;
+
+ var dom = move_card.el.dom;
+ dom.style.width = ''; // clear with - which is set by drag.
+
+ if (next_to_card !== false && next_to_card !== true && next_to_card.el.dom.parentNode) {
+ var cardel = next_to_card.el.dom;
- if (info.position == 'above') {
+ if (position == 'above' ) {
cardel.parentNode.insertBefore(dom, cardel);
} else if (cardel.nextSibling) {
cardel.parentNode.insertBefore(dom,cardel.nextSibling);
@@ -2440,42 +2595,49 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
}
} else {
// card container???
- this.bodyEl.dom.append(dom);
+ this.containerEl.dom.append(dom);
}
//FIXME HANDLE card = true
// add this to the correct place in items.
-
-
// remove Card from items.
- var old_parent = data.source.parent();
-
- old_parent.items = old_parent.items.filter(function(e) { return e != data.source });
-
+
if (this.items.length) {
var nitems = [];
//Roo.log([info.items_n, info.position, this.items.length]);
for (var i =0; i < this.items.length; i++) {
- if (i == info.items_n && info.position == 'above') {
- nitems.push(data.source);
+ if (i == to_items_n && position == 'above') {
+ nitems.push(move_card);
}
nitems.push(this.items[i]);
- if (i == info.items_n && info.position == 'below') {
- nitems.push(data.source);
+ if (i == to_items_n && position == 'below') {
+ nitems.push(move_card);
}
}
this.items = nitems;
Roo.log(this.items);
} else {
- this.items.push(data.source);
+ this.items.push(move_card);
}
- data.source.parentId = this.id;
+ move_card.parentId = this.id;
return true;
+
+
+ },
+ removeCard : function(c)
+ {
+ this.items = this.items.filter(function(e) { return e != c });
+
+ var dom = c.el.dom;
+ dom.parentNode.removeChild(dom);
+ dom.style.width = ''; // clear with - which is set by drag.
+ c.parentId = false;
+
},
/** Decide whether to drop above or below a View node. */
@@ -2484,7 +2646,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
if (dd) {
return false;
}
- if (n == this.bodyEl.dom) {
+ if (n == this.containerEl.dom) {
return "above";
}
var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
@@ -2536,7 +2698,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
dropPlaceHolder: function (action, info, data)
{
if (this.dropEl === false) {
- this.dropEl = Roo.DomHelper.append(this.bodyEl, {
+ this.dropEl = Roo.DomHelper.append(this.containerEl, {
cls : 'd-none'
},true);
}
@@ -2561,7 +2723,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
}
} else {
// card container???
- this.bodyEl.dom.append(this.dropEl.dom);
+ this.containerEl.dom.append(this.dropEl.dom);
}
this.dropEl.addClass('d-block roo-card-dropzone');
@@ -2575,7 +2737,31 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
},
setHeaderText: function(html)
{
- this.headerEl.dom.innerHTML = html;
+ this.header = html;
+ if (this.headerContainerEl) {
+ this.headerContainerEl.dom.innerHTML = html;
+ }
+ },
+ onHeaderImageLoad : function(ev, he)
+ {
+ if (!this.header_image_fit_square) {
+ return;
+ }
+
+ var hw = he.naturalHeight / he.naturalWidth;
+ // wide image = < 0
+ // tall image = > 1
+ //var w = he.dom.naturalWidth;
+ var ww = he.width;
+ he.style.left = 0;
+ he.style.position = 'relative';
+ if (hw > 1) {
+ var nw = (ww * (1/hw));
+ Roo.get(he).setSize( ww * (1/hw), ww);
+ he.style.left = ((ww - nw)/ 2) + 'px';
+ he.style.position = 'relative';
+ }
+
}
@@ -2591,6 +2777,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, {
/**
* @class Roo.bootstrap.CardHeader
* @extends Roo.bootstrap.Element
+ * @parent Roo.bootstrap.Card
+ * @children Roo.bootstrap.Component
* Bootstrap CardHeader class
* @constructor
* Create a new Card Header - that you can embed children into
@@ -2624,7 +2812,10 @@ Roo.extend(Roo.bootstrap.CardHeader, Roo.bootstrap.Element, {
/**
* @class Roo.bootstrap.CardFooter
* @extends Roo.bootstrap.Element
+ * @parent Roo.bootstrap.Card
+ * @children Roo.bootstrap.Component
* Bootstrap CardFooter class
+ *
* @constructor
* Create a new Card Footer - that you can embed children into
* @param {Object} config The config object
@@ -2657,7 +2848,10 @@ Roo.extend(Roo.bootstrap.CardFooter, Roo.bootstrap.Element, {
/**
* @class Roo.bootstrap.CardImageTop
* @extends Roo.bootstrap.Element
+ * @parent Roo.bootstrap.Card
+ * @children Roo.bootstrap.Component
* Bootstrap CardImageTop class
+ *
* @constructor
* Create a new Card Image Top container
* @param {Object} config The config object
@@ -2685,34 +2879,49 @@ Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element, {
*/
/**
- * @class Roo.bootstrap.CardUploader
+ * @class Roo.bootstrap.ButtonUploader
* @extends Roo.bootstrap.Button
- * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name...
+ * Bootstrap Button Uploader class - it's a button which when you add files to it
+ *
+ *
* @cfg {Number} errorTimeout default 3000
* @cfg {Array} images an array of ?? Img objects ??? when loading existing files..
* @cfg {Array} html The button text.
-
+ * @cfg {Boolean} multiple (default true) Should the upload allow multiple files to be uploaded.
*
* @constructor
* Create a new CardUploader
* @param {Object} config The config object
*/
-Roo.bootstrap.CardUploader = function(config){
+Roo.bootstrap.ButtonUploader = function(config){
- Roo.bootstrap.CardUploader.superclass.constructor.call(this, config);
-
-
- this.fileCollection = new Roo.util.MixedCollection(false,function(r) {
- return r.data.id
- });
-
+ Roo.bootstrap.ButtonUploader.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ // raw events
+ /**
+ * @event beforeselect
+ * When button is pressed, before show upload files dialog is shown
+ * @param {Roo.bootstrap.UploaderButton} this
+ *
+ */
+ 'beforeselect' : true,
+ /**
+ * @event fired when files have been selected,
+ * When a the download link is clicked
+ * @param {Roo.bootstrap.UploaderButton} this
+ * @param {Array} Array of files that have been uploaded
+ */
+ 'uploaded' : true
+
+ });
};
-
-Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, {
+
+Roo.extend(Roo.bootstrap.ButtonUploader, Roo.bootstrap.Button, {
errorTimeout : 3000,
@@ -2722,77 +2931,28 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, {
fileCollection : false,
allowBlank : true,
+ multiple : true,
+
getAutoCreate : function()
{
+
- var cfg = {
- cls :'form-group' ,
+ return {
+ cls :'div' ,
cn : [
-
- {
- tag: 'label',
- //cls : 'input-group-addon',
- html : this.fieldLabel
-
- },
-
- {
- tag: 'input',
- type : 'hidden',
- value : this.value,
- cls : 'd-none form-control'
- },
-
- {
- tag: 'input',
- multiple : 'multiple',
- type : 'file',
- cls : 'd-none roo-card-upload-selector'
- },
-
- {
- cls : 'roo-card-uploader-button-container w-100 mb-2'
- },
- {
- cls : 'card-columns roo-card-uploader-container'
- }
-
+ Roo.bootstrap.Button.prototype.getAutoCreate.call(this)
]
};
- return cfg;
- },
-
- getChildContainer : function() /// what children are added to.
- {
- return this.containerEl;
- },
-
- getButtonContainer : function() /// what children are added to.
- {
- return this.el.select(".roo-card-uploader-button-container").first();
},
+
initEvents : function()
{
- Roo.bootstrap.Input.prototype.initEvents.call(this);
+ Roo.bootstrap.Button.prototype.initEvents.call(this);
- var t = this;
- this.addxtype({
- xns: Roo.bootstrap,
-
- xtype : 'Button',
- container_method : 'getButtonContainer' ,
- html : this.html, // fix changable?
- cls : 'w-100 ',
- listeners : {
- 'click' : function(btn, e) {
- t.onClick(e);
- }
- }
- });
@@ -2801,20 +2961,21 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, {
(window.URL && URL.revokeObjectURL && URL) ||
(window.webkitURL && webkitURL);
-
-
-
- this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
+ var im = {
+ tag: 'input',
+ type : 'file',
+ cls : 'd-none roo-card-upload-selector'
+
+ };
+ if (this.multiple) {
+ im.multiple = 'multiple';
+ }
+ this.selectorEl = Roo.get(document.body).createChild(im); // so it does not capture click event for navitem.
+
+ //this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
this.selectorEl.on('change', this.onFileSelected, this);
- if (this.images) {
- var t = this;
- this.images.forEach(function(img) {
- t.addCard(img)
- });
- this.images = false;
- }
- this.containerEl = this.el.select('.roo-card-uploader-container', true).first();
+
},
@@ -2823,6 +2984,10 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, {
onClick : function(e)
{
e.preventDefault();
+
+ if ( this.fireEvent('beforeselect', this) === false) {
+ return;
+ }
this.selectorEl.dom.click();
@@ -2835,173 +3000,46 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, {
if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
return;
}
+ var files = Array.prototype.slice.call(this.selectorEl.dom.files);
+ this.selectorEl.dom.value = '';// hopefully reset..
+
+ this.fireEvent('uploaded', this, files );
- Roo.each(this.selectorEl.dom.files, function(file){
- this.addFile(file);
- }, this);
-
},
-
-
-
+
+
- addFile : function(file)
- {
-
- if(typeof(file) === 'string'){
- throw "Add file by name?"; // should not happen
- return;
- }
-
- if(!file || !this.urlAPI){
- return;
+ /**
+ * addCard - add an Attachment to the uploader
+ * @param data - the data about the image to upload
+ *
+ * {
+ id : 123
+ title : "Title of file",
+ is_uploaded : false,
+ src : "http://.....",
+ srcfile : { the File upload object },
+ mimetype : file.type,
+ preview : false,
+ is_deleted : 0
+ .. any other data...
}
-
- // file;
- // file.type;
-
- var _this = this;
-
-
- var url = _this.urlAPI.createObjectURL( file);
-
- this.addCard({
- id : Roo.bootstrap.CardUploader.ID--,
- is_uploaded : false,
- src : url,
- title : file.name,
- mimetype : file.type,
- preview : false,
- is_deleted : 0
- })
-
- },
-
- addCard : function (data)
- {
- // hidden input element?
- // if the file is not an image...
- //then we need to use something other that and header_image
- var t = this;
- // remove.....
- var footer = [
- {
- xns : Roo.bootstrap,
- xtype : 'CardFooter',
- items: [
- {
- xns : Roo.bootstrap,
- xtype : 'Element',
- cls : 'd-flex',
- items : [
-
- {
- xns : Roo.bootstrap,
- xtype : 'Button',
- html : String.format("{0}", data.title),
- cls : 'col-11 text-left',
- size: 'sm',
- weight: 'link',
- fa : 'download',
- listeners : {
- click : function() {
- this.downloadCard(data.id)
- }
- }
- },
-
- {
- xns : Roo.bootstrap,
- xtype : 'Button',
-
- size : 'sm',
- weight: 'danger',
- cls : 'col-1',
- fa : 'times',
- listeners : {
- click : function() {
- t.removeCard(data.id)
- }
- }
- }
- ]
- }
-
- ]
- }
-
- ];
-
- var cn = this.addxtype(
- {
-
- xns : Roo.bootstrap,
- xtype : 'Card',
- closeable : true,
- header : !data.mimetype.match(/image/) && !data.preview ? "Document": false,
- header_image : data.mimetype.match(/image/) ? data.src : data.preview,
- header_image_fit_square: true, // fixme - we probably need to use the 'Img' element to do stuff like this.
- data : data,
- html : false,
-
- items : footer,
- initEvents : function() {
- Roo.bootstrap.Card.prototype.initEvents.call(this);
- this.imgEl = this.el.select('.card-img-top').first();
- if (this.imgEl) {
- this.imgEl.on('click', function() { t.previewCard( data.id); }, this);
- this.imgEl.set({ 'pointer' : 'cursor' });
-
- }
-
-
- }
-
- }
- );
- // dont' really need ot update items.
- // this.items.push(cn);
- this.fileCollection.add(cn);
- this.updateInput();
-
- },
- removeCard : function(id)
- {
-
- var card = this.fileCollection.get(id);
- card.data.is_deleted = 1;
- card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc.
- this.fileCollection.remove(card);
- //this.items = this.items.filter(function(e) { return e != card });
- // dont' really need ot update items.
- card.el.dom.parentNode.removeChild(card.el.dom);
-
- },
+ *
+ *
+ */
+
reset: function()
{
- this.fileCollection.each(function(card) {
- card.el.dom.parentNode.removeChild(card.el.dom);
- });
- this.fileCollection.clear();
- this.updateInput();
- },
+
+ this.selectorEl
+ }
+
- updateInput : function()
- {
- var data = [];
- this.fileCollection.each(function(e) {
- data.push(e.data);
- });
-
- this.inputEl().dom.value = JSON.stringify(data);
- }
});
-
-
-Roo.bootstrap.CardUploader.ID = -1;/*
+ /*
* - LGPL
*
* image
@@ -3023,6 +3061,7 @@ Roo.bootstrap.CardUploader.ID = -1;/*
* @cfg {String} smUrl sm image source
* @cfg {String} mdUrl md image source
* @cfg {String} lgUrl lg image source
+ * @cfg {Boolean} backgroundContain (use style background and contain image in content)
*
* @constructor
* Create a new Input
@@ -3039,7 +3078,13 @@ Roo.bootstrap.Img = function(config){
* The img click event for the img.
* @param {Roo.EventObject} e
*/
- "click" : true
+ "click" : true,
+ /**
+ * @event load
+ * The when any image loads
+ * @param {Roo.EventObject} e
+ */
+ "load" : true
});
};
@@ -3054,6 +3099,7 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
smUrl: '',
mdUrl: '',
lgUrl: '',
+ backgroundContain : false,
getAutoCreate : function()
{
@@ -3126,12 +3172,20 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
tag: 'img',
cls: (this.imgResponsive) ? 'img-responsive' : '',
html : null,
- src : 'about:blank' // just incase src get's set to undefined?!?
+ src : Roo.BLANK_IMAGE_URL // just incase src get's set to undefined?!?
};
+ if (this.backgroundContain) {
+ cfg.cls += ' background-contain';
+ }
+
cfg.html = this.html || cfg.html;
- cfg.src = this.src || cfg.src;
+ if (this.backgroundContain) {
+ cfg.style="background-image: url(" + this.src + ')';
+ } else {
+ cfg.src = this.src || cfg.src;
+ }
if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
cfg.cls += ' img-' + this.border;
@@ -3164,6 +3218,12 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
if(!this.href){
this.el.on('click', this.onClick, this);
}
+ if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
+ this.el.on('load', this.onImageLoad, this);
+ } else {
+ // not sure if this works.. not tested
+ this.el.select('img', true).on('load', this.onImageLoad, this);
+ }
},
@@ -3172,6 +3232,12 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
Roo.log('img onclick');
this.fireEvent('click', this, e);
},
+ onImageLoad: function(e)
+ {
+ Roo.log('img load');
+ this.fireEvent('load', this, e);
+ },
+
/**
* Sets the url of the image - used to update it
* @param {String} url the url of the image
@@ -3182,7 +3248,11 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
this.src = url;
if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){
- this.el.dom.src = url;
+ if (this.backgroundContain) {
+ this.el.dom.style.backgroundImage = 'url(' + url + ')';
+ } else {
+ this.el.dom.src = url;
+ }
return;
}
@@ -3204,7 +3274,9 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, {
/**
* @class Roo.bootstrap.Link
* @extends Roo.bootstrap.Component
- * Bootstrap Link Class
+ * @children Roo.bootstrap.Component
+ * Bootstrap Link Class (eg. '')
+
* @cfg {String} alt image alternative text
* @cfg {String} href a tag href
* @cfg {String} target (_self|_blank|_parent|_top) target for a href.
@@ -3308,7 +3380,10 @@ Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component, {
/**
* @class Roo.bootstrap.Header
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
* Bootstrap Header class
+ *
+ *
* @cfg {String} html content of header
* @cfg {Number} level (1|2|3|4|5|6) default 1
*
@@ -3346,23 +3421,13 @@ Roo.extend(Roo.bootstrap.Header, Roo.bootstrap.Component, {
- /*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- *