* @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.
*
* @constructor
* Create a new button
// 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
removeClass: false,
name: false,
target: false,
+ group : false,
pressed : null,
}
- 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)
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);
}
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
*/
* @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)
dropEl : false, /// the dom placeholde element that indicates drop location.
containerEl: false, // body container
bodyEl: false, // card-body
- headerContainer : false, //
+ headerContainerEl : false, //
headerEl : false,
layoutCls : function()
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.headerContainerEl = this.el.select('.roo-card-header-ctr').first();
+ this.headerEl = this.el.select('.card-header',true).first();
if (this.rotated) {
this.el.addClass('roo-card-rotated');
* accept card
*
* - card.acceptCard(move_card, info.position, info.card, info.items_n);
-
*/
acceptCard : function(move_card, position, next_to_card )
{
var dom = move_card.el.dom;
dom.parentNode.removeChild(dom);
+ dom.style.width = ''; // clear with - which is set by drag.
-
- if (next_to_card !== false) {
+ if (next_to_card !== false && next_to_card !== true && next_to_card.el.dom.parentNode) {
var cardel = next_to_card.el.dom;
- if (position == 'above') {
+ if (position == 'above' ) {
cardel.parentNode.insertBefore(dom, cardel);
} else if (cardel.nextSibling) {
cardel.parentNode.insertBefore(dom,cardel.nextSibling);
},
setHeaderText: function(html)
{
- this.headerEl.dom.innerHTML = html;
+ this.headerContainerEl.dom.innerHTML = html;
}
this.headerEditEl = this.headerEl.select('.form-control',true).first();
this.headerEl.on('click', function() { this.toggleHeaderInput(true) } , this);
this.headerEditEl.on('keyup', function(e) {
- if(e.isNavKeyPress()){
- this.toggleHeaderInput(false)
+ if([ e.RETURN , e.TAB , e.ESC ].indexOf(e.keyCode) > -1) {
+ this.toggleHeaderInput(false)
}
}, this);
this.headerEditEl.on('blur', function(e) {
if (!this.rendered) {
this.render();
}
-
+ this.toggleHeaderInput(false);
//this.el.setStyle('display', 'block');
this.el.removeClass('hideing');
this.el.dom.style.display='block';
},
toggleHeaderInput : function(is_edit)
{
-
+ if (!this.editableTitle) {
+ return; // not editable.
+ }
if (is_edit && this.is_header_editing) {
return; // already editing..
}
* @cfg {Boolean} emptyResultText only for touch device
* @cfg {String} triggerText multiple combobox trigger button text default 'Select'
* @cfg {String} emptyTitle default ''
+ * @cfg {Number} width fixed with? experimental
* @constructor
* Create a new ComboBox.
* @param {Object} config Configuration options
emptyResultText: 'Empty',
triggerText : 'Select',
emptyTitle : '',
+ width : false,
// element that contains real text value.. (when hidden is used..)
if(this.labelWidth > 12){
labelCfg.style = "width: " + this.labelWidth + 'px';
}
-
+ if(this.width * 1 > 0){
+ contentCfg.style = "width: " + this.width + 'px';
+ }
if(this.labelWidth < 13 && this.labelmd == 0){
this.labelmd = this.labelWidth;
}
},
// private
- onResize: function(w, h){
+ onResize: function(w, h)
+ {
+
+
// Roo.bootstrap.ComboBox.superclass.onResize.apply(this, arguments);
//
// if(typeof w != 'number'){
}
var inputblock = {
- cls : '',
+ cls : 'roo-combobox-wrap',
cn : [
input
]
},
{
- cls : '',
+ cls : 'roo-combobox-wrap ',
cn: [
combobox
]
]
},
{
- cls : "",
+ cls : "roo-combobox-wrap ",
cn: [
combobox
]
if(this.labelWidth > 12){
labelCfg.style = "width: " + this.labelWidth + 'px';
}
-
+
if(this.labelWidth < 13 && this.labelmd == 0){
this.labelmd = this.labelWidth;
}
if(this.animate){
var _this = this;
- (function(){ _this.touchViewEl.addClass('in'); }).defer(50);
+ (function(){ _this.touchViewEl.addClass(['in','show']); }).defer(50);
}else{
- this.touchViewEl.addClass('in');
+ this.touchViewEl.addClass(['in','show']);
}
if(this._touchViewMask){
hideTouchView : function()
{
- this.touchViewEl.removeClass('in');
+ this.touchViewEl.removeClass(['in','show']);
if(this.animate){
var _this = this;
* @cfg {String} tabId unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
* @cfg {String} navId The Roo.bootstrap.NavGroup which triggers show hide ()
* @cfg {String} href click to link..
+ * @cfg {Boolean} touchSlide if swiping slides tab to next panel (default off)
*
*
* @constructor
tabId: false,
navId : false,
href : '',
-
+ touchSlide : false,
getAutoCreate : function(){
this.el.on('click', this.onClick, this);
- if(Roo.isTouch){
+ if(Roo.isTouch && this.touchSlide){
this.el.on("touchstart", this.onTouchStart, this);
this.el.on("touchmove", this.onTouchMove, this);
this.el.on("touchend", this.onTouchEnd, this);
// private
validateValue: function (value)
{
-
if (!Roo.bootstrap.SecurePass.superclass.validateValue.call(this, value)) {
return false;
}
return true;
}
- if ('[\x21-\x7e]*'.match(value)) {
+ if (!value.match(/[\x21-\x7e]+/)) {
this.markInvalid(this.errors.PwdBadChar);
this.errorMsg = this.errors.PwdBadChar;
return false;
st = '<style type="text/css">' +
'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
'</style>';
- } else {
- st = '<style type="text/css">' +
- this.stylesheets +
- '</style>';
+ } else {
+ for (var i in this.stylesheets) {
+ st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
+ }
+
}
st += '<style type="text/css">' +
if (v.match(/^#/)) {
return;
}
+ if (v.match(/^\{/)) { // allow template editing.
+ return;
+ }
// Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
node.removeAttribute(n);
+
+/*
+ * - LGPL
+ */
+/**
+ * @class Roo.bootstrap.Markdown
+ * @extends Roo.bootstrap.TextArea
+ * Bootstrap Showdown editable area
+ * @cfg {string} content
+ *
+ * @constructor
+ * Create a new Showdown
+ */
+
+Roo.bootstrap.Markdown = function(config){
+ Roo.bootstrap.Markdown.superclass.constructor.call(this, config);
+
+};
+
+Roo.extend(Roo.bootstrap.Markdown, Roo.bootstrap.TextArea, {
+
+ editing :false,
+
+ initEvents : function()
+ {
+
+ Roo.bootstrap.TextArea.prototype.initEvents.call(this);
+ this.markdownEl = this.el.createChild({
+ cls : 'roo-markdown-area'
+ });
+ this.inputEl().addClass('d-none');
+ this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
+ this.markdownEl.on('click', this.toggleTextEdit, this);
+ this.on('blur', this.toggleTextEdit, this);
+ this.on('specialkey', this.resizeTextArea, this);
+ },
+
+ toggleTextEdit : function()
+ {
+ var sh = this.markdownEl.getHeight();
+ this.inputEl().addClass('d-none');
+ this.markdownEl.addClass('d-none');
+ if (!this.editing) {
+ // show editor?
+ this.inputEl().setHeight(Math.min(500, Math.max(sh,(this.getValue().split("\n").length+1) * 30)));
+ this.inputEl().removeClass('d-none');
+ this.inputEl().focus();
+ this.editing = true;
+ return;
+ }
+ // show showdown...
+ this.updateMarkdown();
+ this.markdownEl.removeClass('d-none');
+ this.editing = false;
+ return;
+ },
+ updateMarkdown : function()
+ {
+ if (this.getValue() == '') {
+ this.markdownEl.dom.innerHTML = String.format('<span class="roo-placeholder">{0}</span>', this.placeholder);
+ return;
+ }
+ this.markdownEl.dom.innerHTML = Roo.Markdown.toHtml(Roo.util.Format.htmlEncode(this.getValue()));
+ },
+
+ resizeTextArea: function () {
+
+ var sh = 100;
+ Roo.log([sh, this.getValue().split("\n").length * 30]);
+ this.inputEl().setHeight(Math.min(500, Math.max(sh, (this.getValue().split("\n").length +1) * 30)));
+ },
+ setValue : function(val)
+ {
+ Roo.bootstrap.TextArea.prototype.setValue.call(this,val);
+ if (!this.editing) {
+ this.updateMarkdown();
+ }
+
+ },
+ focus : function()
+ {
+ if (!this.editing) {
+ this.toggleTextEdit();
+ }
+
+ }
+
+
+});
/**
* @class Roo.bootstrap.Table.AbstractSelectionModel
* @extends Roo.util.Observable
getAutoCreate : function(){
var cfg = {
- cls : 'tooltip',
+ cls : 'tooltip',
role : 'tooltip',
cn : [
{
- cls : 'tooltip-arrow'
+ cls : 'tooltip-arrow arrow'
},
{
cls : 'tooltip-inner'
{
this.bindEl = el;
},
-
+
+ initEvents : function()
+ {
+ this.arrowEl = this.el.select('.arrow', true).first();
+ this.innerEl = this.el.select('.tooltip-inner', true).first();
+ },
enter : function () {
this.el.select('.tooltip-inner',true).first().dom.innerHTML = tip;
- this.el.removeClass(['fade','top','bottom', 'left', 'right','in']);
+ this.el.removeClass(['fade','top','bottom', 'left', 'right','in',
+ 'bs-tooltip-top','bs-tooltip-bottom', 'bs-tooltip-left', 'bs-tooltip-right']);
var placement = typeof this.placement == 'function' ?
this.placement.call(this, this.el, on_el) :
}
align = this.alignment[placement];
+
+ this.arrowEl.setLeft((this.innerEl.getWidth()/2) - 5);
+
}
this.el.alignTo(this.bindEl, align[0],align[1]);
//arrow.set(align[2],
this.el.addClass(placement);
+ this.el.addClass("bs-tooltip-"+ placement);
- this.el.addClass('in fade');
+ this.el.addClass('in fade show');
this.hoverState = null;
// fade it?
}
+
+
+
+
},
hide : function()
{
return;
}
//this.el.setXY([0,0]);
- this.el.removeClass('in');
+ this.el.removeClass(['show', 'in']);
//this.el.hide();
}
projects / roojs1 / blobdiff