toloframework
Version:
Javascript/HTML/CSS compiler for Firefox OS or nodewebkit apps using modules in the nodejs style.
208 lines (195 loc) • 7.25 kB
JavaScript
/** @module tfw.view.textbox */require( 'tfw.view.textbox', function(require, module, exports) { var _=function(){var D={"en":{},"fr":{}},X=require("$").intl;function _(){return X(D,arguments);}_.all=D;return _}();
"use strict";
var $ = require("dom");
var CODE_BEHIND = {
onValueChanged: onValueChanged
};
function onValueChanged( v ) {
var that = this;
var list = this.list;
if( !Array.isArray( list ) || list.length === 0 ) return;
var elemCompletion = this.$elements.completion;
$.clear( elemCompletion );
var textToSearch = v.trim().toLowerCase();
var elementsCount = 0;
list.forEach(function (completionText) {
var pos = completionText.toLowerCase().indexOf( textToSearch );
if( pos !== 0 ) return;
elementsCount++;
if( elementsCount > 8 ) return;
addCompletionItem.call( that, elemCompletion, completionText, pos, textToSearch.length );
});
if( elementsCount < 8 ) {
list.forEach(function (completionText) {
var pos = completionText.toLowerCase().indexOf( textToSearch );
if( pos < 1 ) return;
elementsCount++;
if( elementsCount > 8 ) return;
addCompletionItem.call( that, elemCompletion, completionText, pos, textToSearch.length );
});
}
}
function addCompletionItem( elemCompletion, completionText, begin, length ) {
var that = this;
var elem = $.div();
if( begin > 0 ) {
$.add( elem, $.tag('span', [completionText.substr(0, begin)]) );
}
$.add( elem, $.tag('b', [completionText.substr(begin, length)]) );
if( begin + length < completionText.length ) {
$.add( elem, $.tag('span', [completionText.substr(begin + length)]) );
}
$.on( elem, function(v) {
that.value = completionText;
});
$.add( elemCompletion, elem );
}
//===============================
// XJS:View autogenerated code.
try {
module.exports = function() {
//--------------------
// Dependent modules.
var $ = require('dom');
var PM = require('tfw.binding.property-manager');
var Tag = require('tfw.view').Tag;
var Link = require('tfw.binding.link');
var View = require('tfw.view');;
var Converters = require('tfw.binding.converters');
//-------------------------------------------------------
// Check if needed functions are defined in code behind.
View.ensureCodeBehind( CODE_BEHIND, "onValueChanged" );
//-------------------
// Global functions.
function defVal(args, attName, attValue) { return args[attName] === undefined ? attValue : args[attName]; };
function addClassIfTrue(element, className, value) {
if( value ) $.addClass(element, className);
else $.removeClass(element, className); };;
function addClassIfFalse(element, className, value) {
if( value ) $.removeClass(element, className);
else $.addClass(element, className); };;
//-------------------
// Global variables.
var conv_string = Converters.get('string');
var conv_boolean = Converters.get('boolean');
var conv_unit = Converters.get('unit');
var conv_strings = Converters.get('strings');
//-------------------
// Class definition.
var ViewClass = function( args ) {
try {
if( typeof args === 'undefined' ) args = {};
this.$elements = {};
var that = this;
var pm = PM(this);
//--------------------
// Create attributes.
pm.create("value", { cast: conv_string });
pm.create("label", { cast: conv_string });
pm.create("focus", { cast: conv_boolean });
pm.create("visible", { cast: conv_boolean });
pm.create("width", { cast: conv_unit });
pm.create("list", { cast: conv_strings });
//------------------
// Create elements.
var e_ = new Tag('DIV', ["class"]);
var e_head = new Tag('DIV', ["class"]);
this.$elements.head = e_head;
var e_body = new Tag('DIV', ["class"]);
var e_input = new Tag('INPUT', ["value","focus"]);
this.$elements.input = e_input;
$.add( e_body, e_input );
this.$elements.body = e_body;
var e_foot = new Tag('DIV', ["class"]);
this.$elements.foot = e_foot;
var e_bottom = new Tag('DIV', ["class"]);
this.$elements.bottom = e_bottom;
var e_4 = new Tag('FOOTER');
var e_completion = new Tag('DIV', ["class"]);
this.$elements.completion = e_completion;
$.add( e_4, e_completion );
$.add( e_, e_head, e_body, e_foot, e_bottom, e_4 );
//-----------------------
// Declare root element.
Object.defineProperty( this, '$', {value: e_.$, writable: false, enumerable: false, configurable: false } );
//-------
// Links
new Link({
A:{obj: that, name: 'focus'},
B:{action: function(v) {
addClassIfTrue( e_, "focus", v );}}
});
new Link({
A:{obj: that, name: 'visible'},
B:{action: function(v) {
addClassIfFalse( e_, "hide", v );}}
});
new Link({
A:{obj: that, name: 'focus', open: false},
B:{action: function(v) {
addClassIfTrue( e_, "thm-bg3", v );}}
});
new Link({
A:{obj: that, name: 'value'},
B:{obj: e_input, name: 'value'}
});
new Link({
A:{obj: that, name: 'focus'},
B:{obj: e_input, name: 'focus'}
});
//-----------------------
// On attribute changed.
pm.on( "value", function(v) {
try {
CODE_BEHIND.onValueChanged.call( that, v );
}
catch( ex ) {
console.error('Exception in function behind "onValueChanged" of module "mod/tfw.view.textbox.js" for attribute "value"! ');
console.error( ex );
}} );
pm.on('label', function(v) { $.clear(e_head, v); });
pm.on("width", function(v) {
e_input.$.style["width"] = v;
});
//----------------------
// Initialize elements.
e_.class = "tfw-view-textbox";
e_head.class = "head";
e_body.class = "body";
e_foot.class = "foot";
e_bottom.class = "bottom thm-bgS";
e_completion.class = "completion thm-bg3 thm-ele4";
//------------------------
// Initialize attributes.
this.value = defVal(args, "value", "");
this.label = defVal(args, "label", "");
this.focus = defVal(args, "focus", false);
this.visible = defVal(args, "visible", true);
this.width = defVal(args, "width", "8rem");
this.list = args["list"];
$.addClass(this, 'view', 'custom');
}
catch( ex ) {
console.error('mod/tfw.view.textbox.js', ex);
throw Error('Instantiation error in XJS of "mod/tfw.view.textbox.js":\n' + ex)
}
};
return ViewClass;
}();
}
catch( ex ) {
throw Error('Definition error in XJS of "mod/tfw.view.textbox.js"\n' + ex)
}
module.exports._ = _;
/**
* @module tfw.view.textbox
* @see module:$
* @see module:dom
* @see module:dom
* @see module:tfw.binding.property-manager
* @see module:tfw.view
* @see module:tfw.binding.link
* @see module:tfw.view
* @see module:tfw.binding.converters
*/
});