2015-12-15 15:22:46 +00:00
|
|
|
|
2016-09-26 09:28:47 +00:00
|
|
|
var ColumnText = require ('../column/text');
|
|
|
|
|
|
|
|
module.exports = new Class
|
2015-01-23 13:09:30 +00:00
|
|
|
({
|
|
|
|
Extends: Htk.Field
|
2015-07-03 05:49:45 +00:00
|
|
|
,Implements: Db.Iterator
|
2015-01-23 13:09:30 +00:00
|
|
|
,Tag: 'htk-combo'
|
|
|
|
,Properties:
|
|
|
|
{
|
|
|
|
/**
|
|
|
|
* The model associated to this form.
|
2016-12-20 09:32:17 +00:00
|
|
|
*/
|
2015-01-23 13:09:30 +00:00
|
|
|
model:
|
|
|
|
{
|
|
|
|
type: Db.Model
|
|
|
|
,set: function (x)
|
|
|
|
{
|
2015-12-15 15:22:46 +00:00
|
|
|
this.link ({_model: x}, {'status-changed-after': this._onModelChange});
|
2015-11-19 13:57:23 +00:00
|
|
|
this._onModelChange ();
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
,get: function ()
|
|
|
|
{
|
|
|
|
return this._model;
|
|
|
|
}
|
2015-07-03 05:49:45 +00:00
|
|
|
},
|
|
|
|
/**
|
|
|
|
* The row where the form positioned, has -1 if the row is unselected.
|
2016-12-20 09:32:17 +00:00
|
|
|
*/
|
2015-07-03 05:49:45 +00:00
|
|
|
row:
|
|
|
|
{
|
|
|
|
type: Number
|
|
|
|
,set: function (x)
|
|
|
|
{
|
|
|
|
if (!this._model || this._model.numRows <= x || x < -1)
|
|
|
|
x = -1;
|
|
|
|
if (x == this._row)
|
|
|
|
return;
|
|
|
|
|
|
|
|
this._row = x;
|
|
|
|
this.iterChanged ();
|
|
|
|
}
|
|
|
|
,get: function ()
|
|
|
|
{
|
|
|
|
return this._row;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* The number of rows in the form.
|
2016-12-20 09:32:17 +00:00
|
|
|
*/
|
2015-07-03 05:49:45 +00:00
|
|
|
numRows:
|
|
|
|
{
|
|
|
|
type: Number
|
|
|
|
,get: function ()
|
|
|
|
{
|
|
|
|
if (this._model)
|
|
|
|
return this._model.numRows;
|
|
|
|
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* Checks if the form data is ready.
|
2016-12-20 09:32:17 +00:00
|
|
|
*/
|
2015-07-03 05:49:45 +00:00
|
|
|
ready:
|
|
|
|
{
|
|
|
|
type: Boolean
|
|
|
|
,get: function ()
|
|
|
|
{
|
2015-11-19 13:57:23 +00:00
|
|
|
return this._model && this._model.ready;
|
2015-07-03 05:49:45 +00:00
|
|
|
}
|
2015-09-28 11:37:31 +00:00
|
|
|
},
|
|
|
|
/**
|
|
|
|
* Checks if the form data is ready.
|
2016-12-20 09:32:17 +00:00
|
|
|
*/
|
2015-09-28 11:37:31 +00:00
|
|
|
placeholder:
|
|
|
|
{
|
|
|
|
type: String
|
|
|
|
,set: function (x)
|
|
|
|
{
|
|
|
|
this._placeholder = x;
|
2015-12-15 15:22:46 +00:00
|
|
|
this._refreshShowText (x);
|
2015-09-28 11:37:31 +00:00
|
|
|
}
|
|
|
|
,get: function ()
|
|
|
|
{
|
|
|
|
return this._placeholder;
|
|
|
|
}
|
2015-11-17 10:34:33 +00:00
|
|
|
},
|
|
|
|
/**
|
|
|
|
* Wether to allow null values.
|
2016-12-20 09:32:17 +00:00
|
|
|
*/
|
2015-11-17 10:34:33 +00:00
|
|
|
notNull:
|
|
|
|
{
|
|
|
|
type: Boolean
|
|
|
|
,set: function (x)
|
|
|
|
{
|
|
|
|
this._notNull = x;
|
|
|
|
}
|
|
|
|
,get: function ()
|
|
|
|
{
|
|
|
|
return this._notNull;
|
2015-07-03 05:49:45 +00:00
|
|
|
}
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-07-03 05:49:45 +00:00
|
|
|
,_row: -1
|
2015-01-23 13:09:30 +00:00
|
|
|
,_model: null
|
|
|
|
,valueColumnIndex: 0
|
|
|
|
,valueColumnName: null
|
|
|
|
,showColumnIndex: 1
|
|
|
|
,showColumnName: null
|
2015-11-17 10:34:33 +00:00
|
|
|
,_notNull: true
|
2015-12-10 13:48:43 +00:00
|
|
|
,_webkitRefresh: false
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2016-10-16 14:16:08 +00:00
|
|
|
,render: function ()
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2016-10-16 14:16:08 +00:00
|
|
|
var button = this.createRoot ('button');
|
2016-08-30 07:43:47 +00:00
|
|
|
button.type = 'button';
|
2015-12-15 15:22:46 +00:00
|
|
|
button.className = 'htk-select input';
|
|
|
|
button.addEventListener ('mousedown', this._onButtonMouseDown.bind (this));
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
2015-09-28 14:05:54 +00:00
|
|
|
|
|
|
|
,on: function (id, callback, instance)
|
|
|
|
{
|
|
|
|
switch (id)
|
|
|
|
{
|
|
|
|
case 'click':
|
2015-10-14 11:51:43 +00:00
|
|
|
case 'mousedown':
|
|
|
|
case 'focusout':
|
2015-09-28 14:05:54 +00:00
|
|
|
this.node.addEventListener (id,
|
|
|
|
callback.bind (instance, this));
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
this.parent (id, callback, instance);
|
|
|
|
}
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
2015-12-15 15:22:46 +00:00
|
|
|
,_setRow: function (row)
|
2015-07-03 05:49:45 +00:00
|
|
|
{
|
|
|
|
this._row = row;
|
2015-12-15 15:22:46 +00:00
|
|
|
this._refreshShowText ();
|
2015-07-03 05:49:45 +00:00
|
|
|
this.iterChanged ();
|
|
|
|
}
|
|
|
|
|
2015-12-15 15:22:46 +00:00
|
|
|
,_onButtonMouseDown: function (e)
|
|
|
|
{
|
|
|
|
if (this._popup)
|
|
|
|
{
|
|
|
|
this._popup.hide ();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var model = this._model;
|
|
|
|
|
2016-10-16 14:16:08 +00:00
|
|
|
var menu = this.createElement ('div');
|
2015-12-15 15:22:46 +00:00
|
|
|
menu.className = 'htk-select-menu';
|
|
|
|
|
|
|
|
var grid = new Htk.Grid ({showHeader: false});
|
2016-10-16 14:16:08 +00:00
|
|
|
menu.appendChild (grid.node);
|
2015-12-15 15:22:46 +00:00
|
|
|
|
2016-10-16 14:16:08 +00:00
|
|
|
var gridNode = grid.node;
|
2015-12-15 15:22:46 +00:00
|
|
|
gridNode.addEventListener ('click', this._onGridClicked.bind (this, grid));
|
|
|
|
|
2016-09-26 09:28:47 +00:00
|
|
|
var column = new ColumnText ({columnIndex: this.showColumnIndex});
|
2015-12-15 15:22:46 +00:00
|
|
|
grid.appendColumn (column);
|
|
|
|
grid.model = model;
|
|
|
|
|
|
|
|
var popup = this._popup = new Htk.Popup ({childNode: menu});
|
|
|
|
popup.on ('closed', this._onPopupClose.bind (this));
|
|
|
|
popup.show (this.node);
|
|
|
|
|
|
|
|
this.signalEmit ('menu-show');
|
|
|
|
|
|
|
|
e.stopPropagation ();
|
|
|
|
}
|
|
|
|
|
|
|
|
,_onGridClicked: function (grid, e)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-12-15 15:22:46 +00:00
|
|
|
var target = e.target;
|
|
|
|
var parentNode = target.parentNode;
|
|
|
|
|
|
|
|
while (parentNode !== grid.tbody)
|
|
|
|
{
|
|
|
|
target = parentNode;
|
|
|
|
parentNode = parentNode.parentNode;
|
|
|
|
}
|
|
|
|
|
2015-01-23 13:09:30 +00:00
|
|
|
var value;
|
2015-12-15 15:22:46 +00:00
|
|
|
var row = target.rowIndex - 1;
|
2015-01-23 13:09:30 +00:00
|
|
|
|
|
|
|
if (row >= 0)
|
|
|
|
value = this._model.getByIndex (row, this.valueColumnIndex);
|
|
|
|
else
|
|
|
|
value = null;
|
|
|
|
|
2015-12-15 15:22:46 +00:00
|
|
|
this._setRow (row);
|
2015-10-14 11:51:43 +00:00
|
|
|
this.valueChanged (value);
|
2015-12-15 15:22:46 +00:00
|
|
|
this._popup.hide ();
|
|
|
|
|
|
|
|
e.stopPropagation ();
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
2015-12-15 15:22:46 +00:00
|
|
|
,_onPopupClose: function ()
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-12-15 15:22:46 +00:00
|
|
|
this._popup = null;
|
|
|
|
this.signalEmit ('menu-hide');
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
2015-12-15 15:22:46 +00:00
|
|
|
,_refreshShowText: function ()
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
|
|
|
var model = this._model;
|
|
|
|
|
2015-12-15 15:22:46 +00:00
|
|
|
if (this._row !== -1)
|
2016-01-07 12:58:29 +00:00
|
|
|
var showText = model.getByIndex (this._row, this.showColumnIndex);
|
|
|
|
else if (model && model.status === Db.Model.Status.LOADING)
|
|
|
|
var showText = _('Loading...');
|
2015-12-15 15:22:46 +00:00
|
|
|
else if (this._placeholder)
|
|
|
|
var showText = this._placeholder;
|
|
|
|
else
|
|
|
|
var showText = '';
|
2015-09-28 11:37:31 +00:00
|
|
|
|
2015-12-15 15:22:46 +00:00
|
|
|
Vn.Node.setText (this.node, showText);
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
2015-11-19 13:57:23 +00:00
|
|
|
,_onModelChange: function ()
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
|
|
|
var model = this._model;
|
2015-07-03 05:49:45 +00:00
|
|
|
this.signalEmit ('status-changed');
|
2015-10-14 11:51:43 +00:00
|
|
|
|
2015-12-15 15:22:46 +00:00
|
|
|
if (this._popup)
|
|
|
|
this._popup.reset ();
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2016-01-07 12:58:29 +00:00
|
|
|
if (model && model.ready)
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-12-15 15:22:46 +00:00
|
|
|
this._selectOption ();
|
2015-10-23 23:23:19 +00:00
|
|
|
this.signalEmit ('ready');
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
2015-10-14 11:51:43 +00:00
|
|
|
else
|
2015-12-15 15:22:46 +00:00
|
|
|
this._setRow (-1);
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
,setEditable: function (editable)
|
|
|
|
{
|
|
|
|
this.node.disabled = !editable;
|
|
|
|
}
|
|
|
|
|
2015-12-15 15:22:46 +00:00
|
|
|
,_selectOption: function ()
|
2015-01-23 13:09:30 +00:00
|
|
|
{
|
2015-07-03 05:49:45 +00:00
|
|
|
var row;
|
|
|
|
|
2015-10-14 11:51:43 +00:00
|
|
|
if (this._model && this._model.ready)
|
2015-07-03 05:49:45 +00:00
|
|
|
row = this._model.searchByIndex (this.valueColumnIndex, this._value);
|
|
|
|
else
|
|
|
|
row = -1;
|
2015-01-23 13:09:30 +00:00
|
|
|
|
2015-12-15 15:22:46 +00:00
|
|
|
this._setRow (row);
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
,putValue: function (value)
|
|
|
|
{
|
2015-12-15 15:22:46 +00:00
|
|
|
this._selectOption ();
|
2015-01-23 13:09:30 +00:00
|
|
|
}
|
|
|
|
});
|