}
if (this.icon) {
- cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + + (cfg.html || '')
+ cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + (cfg.html || '');
}
return cfg;
}
return titleEl.dom.innerHTML;
+ },
+
+ show : function() {
+ this.el.removeClass('hidden');
+ },
+ hide: function() {
+ if (!this.el.hasClass('hidden')) {
+ this.el.addClass('hidden');
+ }
+
}
});
/**
* Shorthand for {@link Roo.MessageBox}
*/
-Roo.MessageBox = Roo.MessageBox || Roo.bootstrap.MessageBox
+Roo.MessageBox = Roo.MessageBox || Roo.bootstrap.MessageBox;
Roo.Msg = Roo.Msg || Roo.MessageBox;
/*
* - LGPL
onClick : function(e)
{
-
- if(this.preventDefault){
+ if(this.preventDefault || this.href == '#'){
e.preventDefault();
}
+
if (this.disabled) {
return;
}
return;
}
-
if(e.getTarget().nodeName.toLowerCase() != 'td'){
cell = cell.findParent('td', false, true);
}
+ if(!cell || typeof(cell) == 'undefined'){
+ return;
+ }
+
var row = cell.findParent('tr', false, true);
+
+ if(!row || typeof(row) == 'undefined'){
+ return;
+ }
+
var cellIndex = cell.dom.cellIndex;
var rowIndex = this.getRowIndex(row);
cell = cell.findParent('td', false, true);
}
+ if(!cell || typeof(cell) == 'undefined'){
+ return;
+ }
+
var row = cell.findParent('tr', false, true);
+
+ if(!row || typeof(row) == 'undefined'){
+ return;
+ }
+
var cellIndex = cell.dom.cellIndex;
var rowIndex = this.getRowIndex(row);
sort : function(e,el)
{
- var col = Roo.get(el)
+ var col = Roo.get(el);
if(!col.hasClass('sortable')){
return;
html: cm.getColumnHeader(i)
};
- if(typeof(config.tooltip != 'undefined')){
+ if(typeof(config.tooltip) != 'undefined'){
c.tooltip = config.tooltip;
}
if(this.typeAhead){
this.taTask = new Roo.util.DelayedTask(this.onTypeAhead, this);
}
+
},
onDestroy : function(){
rm = true;
return;
}
- })
+ });
if(rm){
return;
this.list.hide();
if(this.tickable){
+ this.hasFocus = false;
this.okBtn.hide();
this.cancelBtn.hide();
this.trigger.show();
onSearchFieldClick : function(e)
{
+ if(this.hasFocus && !this.disabled && e.getTarget().nodeName.toLowerCase() != 'button'){
+ this.onTickableFooterButtonClick(e, false, false);
+ return;
+ }
+
if(this.hasFocus || this.disabled || e.getTarget().nodeName.toLowerCase() == 'button'){
return;
}
};
var cal_rows = function() {
- var ret = []
+ var ret = [];
for (var r = 0; r < 6; r++) {
var row= {
tag : 'tr',
if (trigger == 'click') {
on_el.on('click', this.toggle, this);
} else if (trigger != 'manual') {
- var eventIn = trigger == 'hover' ? 'mouseenter' : 'focusin'
- var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'
+ var eventIn = trigger == 'hover' ? 'mouseenter' : 'focusin';
+ var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout';
on_el.on(eventIn ,this.enter, this);
on_el.on(eventOut, this.leave, this);
clearTimeout(this.timeout);
- this.hoverState = 'in'
+ this.hoverState = 'in';
if (!this.delay || !this.delay.show) {
this.show();
- return
+ return;
}
var _t = this;
this.timeout = setTimeout(function () {
leave : function() {
clearTimeout(this.timeout);
- this.hoverState = 'out'
+ this.hoverState = 'out';
if (!this.delay || !this.delay.hide) {
this.hide();
- return
+ return;
}
var _t = this;
this.timeout = setTimeout(function () {
if (autoPlace) {
// fixme..
}
- var align = Roo.bootstrap.Popover.alignment[placement]
+ var align = Roo.bootstrap.Popover.alignment[placement];
this.el.alignTo(on_el, align[0],align[1]);
//var arrow = this.el.select('.arrow',true).first();
//arrow.set(align[2],
return false;
}
- if (this.carousel) {
+ if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
+
this.transition = true;
var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur) ? 'next' : 'prev';
var lr = dir == 'next' ? 'left' : 'right';
Roo.each(this.picker().select('thead > tr > th', true).elements, function(v){
v.setVisibilityMode(Roo.Element.DISPLAY)
v.hide();
- })
+ });
Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
v.setStyle('width', '189px');
if(!this.calendarWeeks){
v.remove();
return;
- };
+ }
- v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today
+ v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today;
v.attr('colspan', function(i, val){
return parseInt(val) + 1;
});
fillMonths: function()
{
- var i = 0
+ var i = 0;
var months = this.picker().select('>.datepicker-months td', true).first();
months.dom.innerHTML = '';
/**
* @event show
* Fires when this field show.
- * @param {Roo.bootstrap.DateField} this
+ * @param {Roo.bootstrap.DateField} thisthis
* @param {Mixed} date The date value
*/
show : true,
this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.pop = this.picker().select('>.datepicker-time',true).first();
- this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block'
+ this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
this.picker().on('mousedown', this.onMousedown, this);
this.picker().on('click', this.onClick, this);
fireKey: function(e){
if (!this.picker().isVisible()){
- if (e.keyCode == 27) // allow escape to hide and re-show picker
+ if (e.keyCode == 27) { // allow escape to hide and re-show picker
this.show();
+ }
return;
}
/*
* - LGPL
*
- * CheckBox
+ * MonthField
*
*/
/**
- * @class Roo.bootstrap.CheckBox
+ * @class Roo.bootstrap.MonthField
* @extends Roo.bootstrap.Input
- * Bootstrap CheckBox class
+ * Bootstrap MonthField class
*
- * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
- * @cfg {String} inputValue The value that should go into the generated input element's value when checked.
- * @cfg {String} boxLabel The text that appears beside the checkbox
- * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the checkbox
- * @cfg {Boolean} checked initnal the element
- * @cfg {Boolean} inline inline the element (default false)
+ * @cfg {String} language default en
*
* @constructor
- * Create a new CheckBox
+ * Create a new MonthField
* @param {Object} config The config object
*/
-Roo.bootstrap.CheckBox = function(config){
- Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
-
- this.addEvents({
- /**
- * @event check
- * Fires when the element is checked or unchecked.
- * @param {Roo.bootstrap.CheckBox} this This input
- * @param {Boolean} checked The new checked value
- */
- check : true
- });
+Roo.bootstrap.MonthField = function(config){
+ Roo.bootstrap.MonthField.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event show
+ * Fires when this field show.
+ * @param {Roo.bootstrap.MonthField} this
+ * @param {Mixed} date The date value
+ */
+ show : true,
+ /**
+ * @event show
+ * Fires when this field hide.
+ * @param {Roo.bootstrap.MonthField} this
+ * @param {Mixed} date The date value
+ */
+ hide : true,
+ /**
+ * @event select
+ * Fires when select a date.
+ * @param {Roo.bootstrap.MonthField} this
+ * @param {Mixed} date The date value
+ */
+ select : true
+ });
};
-Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, {
+Roo.extend(Roo.bootstrap.MonthField, Roo.bootstrap.Input, {
- inputType: 'checkbox',
- inputValue: 1,
- valueOff: 0,
- boxLabel: false,
- checked: false,
- weight : false,
- inline: false,
-
- getAutoCreate : function()
+ onRender: function(ct, position)
{
- var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
- var id = Roo.id();
+ Roo.bootstrap.MonthField.superclass.onRender.call(this, ct, position);
- var cfg = {};
+ this.language = this.language || 'en';
+ this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : this.language.split('-')[0];
+ this.language = this.language in Roo.bootstrap.MonthField.dates ? this.language : "en";
+
+ this.isRTL = Roo.bootstrap.MonthField.dates[this.language].rtl || false;
+ this.isInline = false;
+ this.isInput = true;
+ this.component = this.el.select('.add-on', true).first() || false;
+ this.component = (this.component && this.component.length === 0) ? false : this.component;
+ this.hasInput = this.component && this.inputEL().length;
- cfg.cls = 'form-group ' + this.inputType //input-group
+ this.minViewMode = 1;
+ this.viewMode = 1;
+
+ this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.MonthField.template);
- if(this.inline){
- cfg.cls += ' ' + this.inputType + '-inline';
- }
+ this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
- var input = {
- tag: 'input',
- id : id,
- type : this.inputType,
- value : this.inputType == 'radio' ? this.inputValue : ((!this.checked) ? this.valueOff : this.inputValue),
- cls : 'roo-' + this.inputType, //'form-box',
- placeholder : this.placeholder || ''
-
- };
+ this.picker().on('mousedown', this.onMousedown, this);
+ this.picker().on('click', this.onClick, this);
- if (this.weight) { // Validity check?
- cfg.cls += " " + this.inputType + "-" + this.weight;
- }
+ this.picker().addClass('datepicker-dropdown');
- if (this.disabled) {
- input.disabled=true;
- }
+ this.startViewMode = this.viewMode;
+
+ Roo.each(this.picker().select('tbody > tr > td', true).elements, function(v){
+ v.setStyle('width', '189px');
+ });
- if(this.checked){
- input.checked = this.checked;
+ this.fillMonths();
+ this.update();
+
+ if(this.isInline) {
+ this.show();
}
+ },
+
+ setValue: function(v)
+ {
+ Roo.bootstrap.MonthField.superclass.setValue.call(this, v);
- if (this.name) {
- input.name = this.name;
+ this.update();
+
+ this.fireEvent('select', this, this.date);
+
+ },
+
+ getValue: function()
+ {
+ return this.value;
+ },
+
+ onClick: function(e)
+ {
+ e.stopPropagation();
+ e.preventDefault();
+
+ var target = e.getTarget();
+
+ if(target.nodeName.toLowerCase() === 'i'){
+ target = Roo.get(target).dom.parentNode;
}
- if (this.size) {
- input.cls += ' input-' + this.size;
+ var nodeName = target.nodeName;
+ var className = target.className;
+ var html = target.innerHTML;
+
+ if(nodeName.toLowerCase() != 'span' || className.indexOf('disabled') > -1 || className.indexOf('month') == -1){
+ return;
}
- var settings=this;
- ['xs','sm','md','lg'].map(function(size){
- if (settings[size]) {
- cfg.cls += ' col-' + size + '-' + settings[size];
- }
- });
+ this.vIndex = Roo.bootstrap.MonthField.dates[this.language].monthsShort.indexOf(html);
-
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
- var inputblock = input;
+ this.hide();
+
+ },
+
+ picker : function()
+ {
+ return this.pickerEl;
+ },
+
+ fillMonths: function()
+ {
+ var i = 0
+ var months = this.picker().select('>.datepicker-months td', true).first();
+
+ months.dom.innerHTML = '';
+ while (i < 12) {
+ var month = {
+ tag: 'span',
+ cls: 'month',
+ html: Roo.bootstrap.MonthField.dates[this.language].monthsShort[i++]
+ }
+
+ months.createChild(month);
+ }
+ },
+
+ update: function()
+ {
+ var _this = this;
+ if(typeof(this.vIndex) == 'undefined' && this.value.length){
+ this.vIndex = Roo.bootstrap.MonthField.dates[this.language].months.indexOf(this.value);
+ }
- if (this.before || this.after) {
+ Roo.each(this.pickerEl.select('> .datepicker-months tbody > tr > td > span', true).elements, function(e, k){
+ e.removeClass('active');
- inputblock = {
- cls : 'input-group',
- cn : []
- };
- if (this.before) {
- inputblock.cn.push({
- tag :'span',
- cls : 'input-group-addon',
- html : this.before
- });
- }
- inputblock.cn.push(input);
- if (this.after) {
- inputblock.cn.push({
- tag :'span',
- cls : 'input-group-addon',
- html : this.after
- });
+ if(typeof(_this.vIndex) != 'undefined' && k == _this.vIndex){
+ e.addClass('active');
}
+ })
+ },
+
+ place: function()
+ {
+ if(this.isInline) return;
+
+ this.picker().removeClass(['bottom', 'top']);
+
+ if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
+ /*
+ * place to the top of element!
+ *
+ */
- };
+ this.picker().addClass('top');
+ this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
+
+ return;
+ }
- if (align ==='left' && this.fieldLabel.length) {
- Roo.log("left and has label");
- cfg.cn = [
-
- {
- tag: 'label',
- 'for' : id,
- cls : 'control-label col-md-' + this.labelWidth,
- html : this.fieldLabel
-
- },
- {
- cls : "col-md-" + (12 - this.labelWidth),
- cn: [
- inputblock
+ this.picker().addClass('bottom');
+
+ this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
+ },
+
+ onFocus : function()
+ {
+ Roo.bootstrap.MonthField.superclass.onFocus.call(this);
+ this.show();
+ },
+
+ onBlur : function()
+ {
+ Roo.bootstrap.MonthField.superclass.onBlur.call(this);
+
+ var d = this.inputEl().getValue();
+
+ this.setValue(d);
+
+ this.hide();
+ },
+
+ show : function()
+ {
+ this.picker().show();
+ this.picker().select('>.datepicker-months', true).first().show();
+ this.update();
+ this.place();
+
+ this.fireEvent('show', this, this.date);
+ },
+
+ hide : function()
+ {
+ if(this.isInline) return;
+ this.picker().hide();
+ this.fireEvent('hide', this, this.date);
+
+ },
+
+ onMousedown: function(e)
+ {
+ e.stopPropagation();
+ e.preventDefault();
+ },
+
+ keyup: function(e)
+ {
+ Roo.bootstrap.MonthField.superclass.keyup.call(this);
+ this.update();
+ },
+
+ fireKey: function(e)
+ {
+ if (!this.picker().isVisible()){
+ if (e.keyCode == 27) // allow escape to hide and re-show picker
+ this.show();
+ return;
+ }
+
+ var dir;
+
+ switch(e.keyCode){
+ case 27: // escape
+ this.hide();
+ e.preventDefault();
+ break;
+ case 37: // left
+ case 39: // right
+ dir = e.keyCode == 37 ? -1 : 1;
+
+ this.vIndex = this.vIndex + dir;
+
+ if(this.vIndex < 0){
+ this.vIndex = 0;
+ }
+
+ if(this.vIndex > 11){
+ this.vIndex = 11;
+ }
+
+ if(isNaN(this.vIndex)){
+ this.vIndex = 0;
+ }
+
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+
+ break;
+ case 38: // up
+ case 40: // down
+
+ dir = e.keyCode == 38 ? -1 : 1;
+
+ this.vIndex = this.vIndex + dir * 4;
+
+ if(this.vIndex < 0){
+ this.vIndex = 0;
+ }
+
+ if(this.vIndex > 11){
+ this.vIndex = 11;
+ }
+
+ if(isNaN(this.vIndex)){
+ this.vIndex = 0;
+ }
+
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ break;
+
+ case 13: // enter
+
+ if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ }
+
+ this.hide();
+ e.preventDefault();
+ break;
+ case 9: // tab
+ if(typeof(this.vIndex) != 'undefined' && !isNaN(this.vIndex)){
+ this.setValue(Roo.bootstrap.MonthField.dates[this.language].months[this.vIndex]);
+ }
+ this.hide();
+ break;
+ case 16: // shift
+ case 17: // ctrl
+ case 18: // alt
+ break;
+ default :
+ this.hide();
+
+ }
+ },
+
+ remove: function()
+ {
+ this.picker().remove();
+ }
+
+});
+
+Roo.apply(Roo.bootstrap.MonthField, {
+
+ content : {
+ tag: 'tbody',
+ cn: [
+ {
+ tag: 'tr',
+ cn: [
+ {
+ tag: 'td',
+ colspan: '7'
+ }
+ ]
+ }
+ ]
+ },
+
+ dates:{
+ en: {
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+ }
+ }
+});
+
+Roo.apply(Roo.bootstrap.MonthField, {
+
+ template : {
+ tag: 'div',
+ cls: 'datepicker dropdown-menu roo-dynamic',
+ cn: [
+ {
+ tag: 'div',
+ cls: 'datepicker-months',
+ cn: [
+ {
+ tag: 'table',
+ cls: 'table-condensed',
+ cn:[
+ Roo.bootstrap.DateField.content
+ ]
+ }
+ ]
+ }
+ ]
+ }
+});
+
+
+
+
+ /*
+ * - LGPL
+ *
+ * CheckBox
+ *
+ */
+
+/**
+ * @class Roo.bootstrap.CheckBox
+ * @extends Roo.bootstrap.Input
+ * Bootstrap CheckBox class
+ *
+ * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
+ * @cfg {String} inputValue The value that should go into the generated input element's value when checked.
+ * @cfg {String} boxLabel The text that appears beside the checkbox
+ * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the checkbox
+ * @cfg {Boolean} checked initnal the element
+ * @cfg {Boolean} inline inline the element (default false)
+ *
+ * @constructor
+ * Create a new CheckBox
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.CheckBox = function(config){
+ Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
+
+ this.addEvents({
+ /**
+ * @event check
+ * Fires when the element is checked or unchecked.
+ * @param {Roo.bootstrap.CheckBox} this This input
+ * @param {Boolean} checked The new checked value
+ */
+ check : true
+ });
+};
+
+Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, {
+
+ inputType: 'checkbox',
+ inputValue: 1,
+ valueOff: 0,
+ boxLabel: false,
+ checked: false,
+ weight : false,
+ inline: false,
+
+ getAutoCreate : function()
+ {
+ var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
+
+ var id = Roo.id();
+
+ var cfg = {};
+
+ cfg.cls = 'form-group ' + this.inputType; //input-group
+
+ if(this.inline){
+ cfg.cls += ' ' + this.inputType + '-inline';
+ }
+
+ var input = {
+ tag: 'input',
+ id : id,
+ type : this.inputType,
+ value : this.inputType == 'radio' ? this.inputValue : ((!this.checked) ? this.valueOff : this.inputValue),
+ cls : 'roo-' + this.inputType, //'form-box',
+ placeholder : this.placeholder || ''
+
+ };
+
+ if (this.weight) { // Validity check?
+ cfg.cls += " " + this.inputType + "-" + this.weight;
+ }
+
+ if (this.disabled) {
+ input.disabled=true;
+ }
+
+ if(this.checked){
+ input.checked = this.checked;
+ }
+
+ if (this.name) {
+ input.name = this.name;
+ }
+
+ if (this.size) {
+ input.cls += ' input-' + this.size;
+ }
+
+ var settings=this;
+
+ ['xs','sm','md','lg'].map(function(size){
+ if (settings[size]) {
+ cfg.cls += ' col-' + size + '-' + settings[size];
+ }
+ });
+
+
+
+ var inputblock = input;
+
+
+
+
+ if (this.before || this.after) {
+
+ inputblock = {
+ cls : 'input-group',
+ cn : []
+ };
+
+ if (this.before) {
+ inputblock.cn.push({
+ tag :'span',
+ cls : 'input-group-addon',
+ html : this.before
+ });
+ }
+
+ inputblock.cn.push(input);
+
+ if (this.after) {
+ inputblock.cn.push({
+ tag :'span',
+ cls : 'input-group-addon',
+ html : this.after
+ });
+ }
+
+ }
+
+ if (align ==='left' && this.fieldLabel.length) {
+ Roo.log("left and has label");
+ cfg.cn = [
+
+ {
+ tag: 'label',
+ 'for' : id,
+ cls : 'control-label col-md-' + this.labelWidth,
+ html : this.fieldLabel
+
+ },
+ {
+ cls : "col-md-" + (12 - this.labelWidth),
+ cn: [
+ inputblock
]
}
cfg.cn = [ inputblock ] ;
- };
- if(this.boxLabel){
+ }
+ if(this.boxLabel){
var boxLabelCfg = {
tag: 'label',
//'for': id, // box label is handled by onclick - so no for...
getGroupValue : function()
{
+ if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
+ return '';
+ }
+
return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
},
* - LGPL
*
* Radio
+ *
+ *
+ * not inline
+ *<div class="radio">
+ <label>
+ <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+ Option one is this and that—be sure to include why it's great
+ </label>
+</div>
+ *
+ *
+ *inline
+ *<span>
+ *<label class="radio-inline">fieldLabel</label>
+ *<label class="radio-inline">
+ <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+</label>
+<span>
+ *
*
*/
getAutoCreate : function()
{
var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
+ align = align || 'left'; // default...
+
+
var id = Roo.id();
- var cfg = {};
+ var cfg = {
+ tag : this.inline ? 'span' : 'div',
+ cls : '',
+ cn : []
+ };
- cfg.cls = 'form-group radio' //input-group
+ var inline = this.inline ? ' radio-inline' : '';
- if (this.inline) {
- cfg.cls += " radio-inline";
- }
+ var lbl = {
+ tag: 'label' ,
+ // does not need for, as we wrap the input with it..
+ 'for' : id,
+ cls : 'control-label box-label' + inline,
+ cn : []
+ };
+ var labelWidth = this.labelWidth ? this.labelWidth *1 : 100;
+
+ var fieldLabel = {
+ tag: 'label' ,
+ //cls : 'control-label' + inline,
+ html : this.fieldLabel,
+ style : 'width:' + labelWidth + 'px;line-height:1;vertical-align:bottom;cursor:default;' // should be css really.
+ };
+
+
var input = {
//value : (!this.checked) ? this.valueOff : this.inputValue,
value : this.inputValue,
cls : 'roo-radio',
- placeholder : this.placeholder || ''
+ placeholder : this.placeholder || '' // ?? needed????
};
- if (this.weight) { // Validity check?
- cfg.cls += " radio-" + this.weight;
+ if (this.weight) { // Validity check?
+ input.cls += " radio-" + this.weight;
}
if (this.disabled) {
input.disabled=true;
input.cls += ' input-' + this.size;
}
+ //?? can span's inline have a width??
+
var settings=this;
['xs','sm','md','lg'].map(function(size){
if (settings[size]) {
inputblock = {
cls : 'input-group',
+ tag : 'span',
cn : []
};
if (this.before) {
};
- if (align ==='left' && this.fieldLabel.length) {
- Roo.log("left and has label");
- cfg.cn = [
-
- {
- tag: 'label',
- 'for' : id,
- cls : 'control-label col-md-' + this.labelWidth,
- html : this.fieldLabel
-
- },
- {
- cls : "col-md-" + (12 - this.labelWidth),
- cn: [
- inputblock
- ]
- }
-
- ];
- } else if ( this.fieldLabel.length) {
- Roo.log(" label");
- cfg.cn = [
-
- {
- tag: 'label',
- 'for': id,
- cls: 'control-label box-input-label',
- //cls : 'input-group-addon',
- html : this.fieldLabel
-
- },
-
- inputblock
-
- ];
-
- } else {
-
- Roo.log(" no label && no align");
- cfg.cn = [
-
- inputblock
-
- ];
-
-
+
+ if (this.fieldLabel && this.fieldLabel.length) {
+ cfg.cn.push(fieldLabel);
+ }
+
+ // normal bootstrap puts the input inside the label.
+ // however with our styled version - it has to go after the input.
+
+ //lbl.cn.push(inputblock);
+
+ var lblwrap = {
+ tag: 'span',
+ cls: 'radio' + inline,
+ cn: [
+ inputblock,
+ lbl
+ ]
};
+ cfg.cn.push( lblwrap);
+
if(this.boxLabel){
- cfg.cn.push({
- tag: 'label',
- 'for': id,
- cls: 'box-label',
+ lbl.cn.push({
+ tag: 'span',
html: this.boxLabel
})
}
+
return cfg;
},
+
+ initEvents : function()
+ {
+// Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
+
+ this.inputEl().on('click', this.onClick, this);
+ if (this.boxLabel) {
+ Roo.log('find label')
+ this.el.select('span.radio label span',true).first().on('click', this.onClick, this);
+ }
+
+ },
+
inputEl: function ()
{
return this.el.select('input.roo-radio',true).first();
},
onClick : function()
{
- Roo.log("click");
Roo.log("click");
this.setChecked(true);
},
v.dom.checked = false;
});
}
-
+ Roo.log(this.inputEl().dom);
this.checked = state;
this.inputEl().dom.checked = state;
getGroupValue : function()
{
- var value = ''
+ var value = '';
Roo.each(this.inputEl().up('form').select('input[name='+this.inputEl().dom.name+']', true).elements, function(v){
if(v.dom.checked == true){
value = v.dom.value;
_this.navgroup.addItem(e);
});
+
this.first = this.navgroup.addItem({
tooltip: this.firstText,
cls: "prev",
icon : 'fa fa-backward',
disabled: true,
+ preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["first"]) }
});
cls: "prev",
icon : 'fa fa-step-backward',
disabled: true,
+ preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["prev"]) }
});
//this.addSeparator();
cls: "next",
html : ' <i class="fa fa-step-forward">',
disabled: true,
+ preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["next"]) }
});
this.last = this.navgroup.addItem({
icon : 'fa fa-forward',
cls: "next",
disabled: true,
+ preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["last"]) }
});
//this.addSeparator();
this.loading = this.navgroup.addItem({
tooltip: this.refreshText,
icon: 'fa fa-refresh',
-
+ preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
});
// private
updateInfo : function(){
if(this.displayEl){
- var count = this.ds.getCount();
+ var count = (typeof(this.getCount) == 'undefined') ? this.ds.getCount() : this.getCount();
var msg = count == 0 ?
this.emptyMsg :
String.format(
// private
onClick : function(which){
+
var ds = this.ds;
if (!ds) {
return;
}
+
switch(which){
case "first":
ds.load({params:{start: 0, limit: this.pageSize}});
clearTimeout(this.timeout);
}
- this.hoverState = 'in'
+ this.hoverState = 'in';
//Roo.log("enter - show");
if (!this.delay || !this.delay.show) {
this.show();
{
clearTimeout(this.timeout);
- this.hoverState = 'out'
+ this.hoverState = 'out';
if (!this.delay || !this.delay.hide) {
this.hide();
return
if (autoPlace) {
// fixme..
}
- var align = Roo.bootstrap.Tooltip.alignment[placement]
+ var align = Roo.bootstrap.Tooltip.alignment[placement];
this.el.alignTo(this.bindEl, align[0],align[1]);
//var arrow = this.el.select('.arrow',true).first();
//arrow.set(align[2],
Roo.bootstrap.LocationPicker.superclass.constructor.call(this, config);
- this.addEvents({
- /**
- * @event initial
- * Fires when the picker initialized.
- * @param {Roo.bootstrap.LocationPicker} this
- * @param {Google Location} location
- */
- initial : true,
- /**
- * @event positionchanged
- * Fires when the picker position changed.
- * @param {Roo.bootstrap.LocationPicker} this
- * @param {Google Location} location
- */
- positionchanged : true,
- /**
- * @event resize
- * Fires when the map resize.
- * @param {Roo.bootstrap.LocationPicker} this
- */
- resize : true,
- /**
- * @event show
- * Fires when the map show.
- * @param {Roo.bootstrap.LocationPicker} this
- */
- show : true,
- /**
- * @event hide
- * Fires when the map hide.
- * @param {Roo.bootstrap.LocationPicker} this
- */
- hide : true
- });
+ this.addEvents({
+ /**
+ * @event initial
+ * Fires when the picker initialized.
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Google Location} location
+ */
+ initial : true,
+ /**
+ * @event positionchanged
+ * Fires when the picker position changed.
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Google Location} location
+ */
+ positionchanged : true,
+ /**
+ * @event resize
+ * Fires when the map resize.
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ resize : true,
+ /**
+ * @event show
+ * Fires when the map show.
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ show : true,
+ /**
+ * @event hide
+ * Fires when the map hide.
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ hide : true,
+ /**
+ * @event mapClick
+ * Fires when click the map.
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Map event} e
+ */
+ mapClick : true,
+ /**
+ * @event mapRightClick
+ * Fires when right click the map.
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Map event} e
+ */
+ mapRightClick : true,
+ /**
+ * @event markerClick
+ * Fires when click the marker.
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Map event} e
+ */
+ markerClick : true,
+ /**
+ * @event markerRightClick
+ * Fires when right click the marker.
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Map event} e
+ */
+ markerRightClick : true,
+ /**
+ * @event OverlayViewDraw
+ * Fires when OverlayView Draw
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ OverlayViewDraw : true,
+ /**
+ * @event OverlayViewOnAdd
+ * Fires when OverlayView Draw
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ OverlayViewOnAdd : true,
+ /**
+ * @event OverlayViewOnRemove
+ * Fires when OverlayView Draw
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ OverlayViewOnRemove : true,
+ /**
+ * @event OverlayViewShow
+ * Fires when OverlayView Draw
+ * @param {Roo.bootstrap.LocationPicker} this
+ * @param {Pixel} cpx
+ */
+ OverlayViewShow : true,
+ /**
+ * @event OverlayViewHide
+ * Fires when OverlayView Draw
+ * @param {Roo.bootstrap.LocationPicker} this
+ */
+ OverlayViewHide : true
+ });
};
},
initEvents: function(ct, position)
- {
- if(!this.mapTypeId){
- this.mapTypeId = google.maps.MapTypeId.ROADMAP;
- }
-
+ {
if(!this.el.getWidth() || this.isApplied()){
return;
}
initial: function()
{
+ if(!this.mapTypeId){
+ this.mapTypeId = google.maps.MapTypeId.ROADMAP;
+ }
+
this.gMapContext = this.GMapContext();
- var _this = this;
+ this.initOverlayView();
+ this.OverlayView = new Roo.bootstrap.LocationPicker.OverlayView(this.gMapContext.map);
+
+ var _this = this;
+
google.maps.event.addListener(this.gMapContext.marker, "dragend", function(event) {
_this.setPosition(_this.gMapContext.marker.position);
});
+ google.maps.event.addListener(this.gMapContext.map, 'click', function(event){
+ Roo.log('mapClick');
+ _this.fireEvent('mapClick', this, event);
+
+ });
+
+ google.maps.event.addListener(this.gMapContext.map, 'rightclick', function(event){
+ Roo.log('mapRightClick');
+ _this.fireEvent('mapRightClick', this, event);
+
+ });
+
+ google.maps.event.addListener(this.gMapContext.marker, 'click', function(event){
+ Roo.log('markerClick');
+ _this.fireEvent('markerClick', this, event);
+
+ });
+
+ google.maps.event.addListener(this.gMapContext.marker, 'rightclick', function(event){
+ Roo.log('markerRightClick');
+ _this.fireEvent('markerRightClick', this, event);
+
+ });
+
this.setPosition(this.gMapContext.location);
this.fireEvent('initial', this, this.gMapContext.location);
},
+ initOverlayView: function()
+ {
+ var _this = this;
+
+ Roo.bootstrap.LocationPicker.OverlayView.prototype = Roo.apply(new google.maps.OverlayView(), {
+
+ draw: function()
+ {
+ Roo.log('OverlayView draw');
+ _this.fireEvent('OverlayViewDraw', _this);
+ },
+
+ onAdd: function()
+ {
+ Roo.log('OverlayView onAdd');
+ _this.fireEvent('OverlayViewOnAdd', _this);
+ },
+
+ onRemove: function()
+ {
+ Roo.log('OverlayView onRemove');
+ _this.fireEvent('OverlayViewOnRemove', _this);
+ },
+
+ show: function(cpx)
+ {
+ Roo.log('OverlayView show');
+ _this.fireEvent('OverlayViewShow', _this, cpx);
+ },
+
+ hide: function()
+ {
+ Roo.log('OverlayView hide');
+ _this.fireEvent('OverlayViewHide', _this);
+ }
+
+ });
+ },
+
+ fromLatLngToContainerPixel: function(event)
+ {
+ return this.OverlayView.getProjection().fromLatLngToContainerPixel(event.latLng);
+ },
+
isApplied: function()
{
return this.getGmapContext() == false ? false : true;
}
});
-/*
+
+Roo.apply(Roo.bootstrap.LocationPicker, {
+
+ OverlayView : function(map, options)
+ {
+ options = options || {};
+
+ this.setMap(map);
+ }
+
+
+});/*
* - LGPL
*
* Alert
projects / roojs1 / blobdiff