toloframework
Version:
Javascript/HTML/CSS compiler for Firefox OS or nodewebkit apps using modules in the nodejs style.
261 lines (249 loc) • 9.13 kB
JavaScript
/** @module tfw.view.button */require( 'tfw.view.button', function(require, module, exports) { var _=function(){var D={"en":{"cancel":"Cancel","close":"Close","delete":"Delete","edit":"Edit","gotit":"Got it","no":"No","ok":"OK","save":"Save","yes":"Yes"},"fr":{"cancel":"Annuler","close":"Fermer","delete":"Supprimer","edit":"Editer","gotit":"J'ai compris","no":"Non","ok":"Valider","save":"Sauver","yes":"Oui"}},X=require("$").intl;function _(){return X(D,arguments);}_.all=D;return _}();
"use strict";
var CODE_BEHIND = {
getClasses: getClasses,
onSmallChanged: onSmallChanged
};
function getClasses() {
var classes = [];
if( this.flat ) {
if( this.pressed ) {
switch( this.type ) {
case 'default': classes.push("thm-bg3"); break;
case 'primary': classes.push("thm-bgP"); break;
case 'secondary': classes.push("thm-bgS"); break;
}
} else {
switch( this.type ) {
case 'primary': classes.push("thm-fgP"); break;
case 'secondary': classes.push("thm-fgS"); break;
}
}
} else {
switch( this.type ) {
case 'default': classes.push("thm-bg3"); break;
case 'primary': classes.push("thm-bgP"); break;
case 'secondary': classes.push("thm-bgS"); break;
}
if( this.pressed ) {
classes.push("thm-ele4");
} else {
classes.push("thm-ele2");
}
}
return classes;
}
function onSmallChanged( isSmall ) {
this.$elements.icon.size = isSmall ? 20 : 28;
}
//===============================
// 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');
var TfwViewIcon = require('tfw.view.icon');
//-------------------------------------------------------
// Check if needed functions are defined in code behind.
View.ensureCodeBehind( CODE_BEHIND, "onSmallChanged" );
//-------------------
// 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); };;
function addAttribIfFalse(element, attribName, value) {
if( value ) $.removeAtt(element, attribName);
else $.att(element, attribName); };;
//-------------------
// Global variables.
var conv_string = Converters.get('string');
var conv_boolean = Converters.get('boolean');
var conv_enum = Converters.get('enum');
var conv_unit = Converters.get('unit');
var conv_isEmpty = Converters.get('isEmpty');
//-------------------
// Class definition.
var ViewClass = function( args ) {
try {
if( typeof args === 'undefined' ) args = {};
this.$elements = {};
var that = this;
var pm = PM(this);
//--------------------
// Create attributes.
pm.createAction("action")
pm.create("tag", { cast: conv_string });
pm.create("icon");
pm.create("content", { cast: conv_string });
pm.create("pressed", { cast: conv_boolean });
pm.create("flat", { cast: conv_boolean });
pm.create("type", { cast: conv_enum(["default","primary","secondary"]) });
pm.create("enabled", { cast: conv_boolean });
pm.create("inverted", { cast: conv_boolean });
pm.create("visible", { cast: conv_boolean });
pm.create("width", { cast: conv_unit });
pm.create("wide", { cast: conv_boolean });
pm.create("responsive", { cast: conv_boolean });
pm.create("small", { cast: conv_boolean });
//------------------
// Create elements.
var e_ = new Tag('BUTTON', ["class"]);
var e_0 = new Tag('DIV', ["class"]);
var e_icon = new TfwViewIcon();
this.$elements.icon = e_icon;
$.add( e_0, e_icon );
var e_text = new Tag('DIV', ["class"]);
this.$elements.text = e_text;
$.add( e_, e_0, e_text );
//-----------------------
// Declare root element.
Object.defineProperty( this, '$', {value: e_.$, writable: false, enumerable: false, configurable: false } );
//---------
// Events.
$.on( e_, "tap", function(v) {
that.action = that.tag;
});
$.on( e_, "keyup", function(v) {
that.action = that.tag;
that.pressed = false;
});
$.on( e_, "down", function(v) {
that.pressed = true;
});
$.on( e_, "up", function(v) {
that.pressed = false;
});
//-------
// Links
new Link({
A:{obj: that, name: 'flat'},
B:{action: function(v) {
addClassIfTrue( e_, "flat", v );}}
});
new Link({
A:{obj: that, name: 'flat'},
B:{action: function(v) {
e_.applyClass(
CODE_BEHIND.getClasses.call(that,v,"flat"), 0);}}
});
new Link({
A:{obj: that, name: 'type'},
B:{action: function(v) {
e_.applyClass(
CODE_BEHIND.getClasses.call(that,v,"type"), 0);}}
});
new Link({
A:{obj: that, name: 'pressed'},
B:{action: function(v) {
e_.applyClass(
CODE_BEHIND.getClasses.call(that,v,"pressed"), 0);}}
});
new Link({
A:{obj: that, name: 'inverted'},
B:{action: function(v) {
addClassIfTrue( e_, "inverted", v );}}
});
new Link({
A:{obj: that, name: 'visible'},
B:{action: function(v) {
addClassIfFalse( e_, "hide", v );}}
});
new Link({
A:{obj: that, name: 'wide'},
B:{action: function(v) {
addClassIfTrue( e_, "wide", v );}}
});
new Link({
A:{obj: that, name: 'responsive'},
B:{action: function(v) {
addClassIfTrue( e_, "responsive", v );}}
});
new Link({
A:{obj: that, name: 'small'},
B:{action: function(v) {
addClassIfTrue( e_, "small", v );}}
});
new Link({
A:{obj: that, name: 'enabled'},
B:{action: function(v) {
addAttribIfFalse( e_, "disabled", v );}}
});
new Link({
A:{obj: that, name: 'icon'},
B:{obj: e_icon, name: 'content'}
});
new Link({
A:{obj: that, name: 'content'},
B:{action: function(v) {
addClassIfTrue( e_text, "hide", v );}, converter: conv_isEmpty}
});
//-----------------------
// On attribute changed.
pm.on( "small", function(v) {
try {
CODE_BEHIND.onSmallChanged.call( that, v );
}
catch( ex ) {
console.error('Exception in function behind "onSmallChanged" of module "mod/tfw.view.button.js" for attribute "small"! ');
console.error( ex );
}} );
pm.on("width", function(v) {
e_.$.style["width"] = v;
});
pm.on('content', function(v) { $.clear(e_text, v); });
//----------------------
// Initialize elements.
e_.class = "tfw-view-button";
e_0.class = "icon";
e_text.class = "text";
//------------------------
// Initialize attributes.
this.tag = defVal(args, "tag", "ACTION");
this.icon = defVal(args, "icon", "");
this.content = defVal(args, "content", "Click me!");
this.pressed = defVal(args, "pressed", false);
this.flat = defVal(args, "flat", false);
this.type = defVal(args, "type", "primary");
this.enabled = defVal(args, "enabled", true);
this.inverted = defVal(args, "inverted", false);
this.visible = defVal(args, "visible", true);
this.width = defVal(args, "width", "auto");
this.wide = defVal(args, "wide", false);
this.responsive = defVal(args, "responsive", false);
this.small = defVal(args, "small", false);
$.addClass(this, 'view', 'custom');
}
catch( ex ) {
console.error('mod/tfw.view.button.js', ex);
throw Error('Instantiation error in XJS of "mod/tfw.view.button.js":\n' + ex)
}
};
return ViewClass;
}();
}
catch( ex ) {
throw Error('Definition error in XJS of "mod/tfw.view.button.js"\n' + ex)
}
module.exports._ = _;
/**
* @module tfw.view.button
* @see module:$
* @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
* @see module:tfw.view.icon
*/
});