exports.start = function() {
var canvas0 = document.getElementById( 'canvas0' );
var ctx0 = canvas0.getContext( '2d' );
var canvas = document.getElementById( 'canvas' );
var ctx = canvas.getContext( '2d' );
$.on( canvas, {
tap: function(evt) {
ctx.fillStyle = 'yellow';
ctx.strokeStyle = 'black';
var x = evt.x - 3.5, y = evt.y - 3.5;
ctx.fillRect( x, y, 7, 7 );
ctx.strokeRect( x, y, 7, 7 );
},
doubletap: function(evt) {
ctx.fillStyle = 'green';
ctx.strokeStyle = 'black';
var x = evt.x - 35, y = evt.y - 35;
ctx.fillRect( x, y, 70, 70 );
ctx.strokeRect( x, y, 70, 70 );
},
down: function(evt) {
ctx.fillStyle = 'orange';
ctx.strokeStyle = 'black';
var x = evt.x - 3.5, y = evt.y - 3.5;
ctx.fillRect( x, y, 7, 7 );
ctx.strokeRect( x, y, 7, 7 );
},
up: function(evt) {
ctx.fillStyle = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';
ctx.strokeStyle = 'black';
var x = evt.x - 5.5, y = evt.y - 5.5;
ctx.fillRect( x, y, 11, 11 );
ctx.strokeRect( x, y, 11, 11 );
},
drag: function(evt) {
ctx.strokeFill = "black";
ctx.beginPath();
ctx.moveTo( evt.x0, evt.y0 );
ctx.lineTo( evt.x, evt.y );
ctx.stroke();
},
move: function(evt) {
ctx.fillStyle = 'rgba(0,0,0,0.2)';
ctx.fillRect( evt.x - 1, evt.y - 1, 3, 3 );
}
});
$.on( canvas0, {
tap: function(evt) {
ctx0.fillStyle = 'yellow';
ctx0.strokeStyle = 'black';
var x = evt.x - 3.5, y = evt.y - 3.5;
ctx0.fillRect( x, y, 7, 7 );
ctx0.strokeRect( x, y, 7, 7 );
}
});
};
/**
* @param {object} events - Events to register on.
* @param {function} events.tap
* @param {function} events.press
* @param {function} events.pan
* @param {function} events.swipe
*
* @example
* ```
* var View = require("tfw.view");
* View.events( div, {
* "tap": function( evt ) {...},
* "press": function( evt ) {...}
* });
* ```
*/
function events(target, events) {
$.on(target, events);
/*
var elem = $( target );
var gestures = {};
var hasGestures = 0;
Object.keys( events ).forEach( function ( eventName ) {
eventName = eventName.toLowerCase();
var eventSlot = events[ eventName ];
if ( GESTURES.indexOf( eventName ) > -1 ) {
gestures[ eventName ] = eventSlot;
hasGestures = true;
} else {
elem.addEventListener( eventName, eventSlot, false );
}
} );
if ( hasGestures ) {
var gestureHandler = new Hammer( elem );
Object.keys( gestures ).forEach( function ( eventName ) {
var eventSlot = events[ eventName ];
gestureHandler.on( eventName, eventSlot );
} );
}*/
};
/**
* Add an editor button into the header.
*/
function addButton( header, name, slot ) {
var button = DOM.div( 'button', { 'data-name': name }, [
DOM.tag( 'i', 'fa', 'fa-' + name )
]);
DOM.on( button, slot );
DOM.add( header, button );
return button;
}
dialogbox.open({ 'message':html, 'symbol':'?' },function(){
var options = dialogbox.select('#promotion-picker').children;
for(var i = -1, len=options.length-1; ++i < len; ){
on(options[i], 'mouseup', pick.bind(undefined,options[i].getAttribute('data-name').toLowerCase()));
};
});
var FloatingButton = function( opts ) {
var that = this;
var icon = new Icon({ size: "24px" });
var elem = $.elem( this, 'button', 'dom', 'custom', 'wdg-floating-button', 'thm-ele6', [icon] );
var touchable = new Touchable( elem, {
classToAdd: 'thm-ele12'
} );
DB.prop( this, 'value' );
DB.prop( this, 'icon' )(function( v ) {
icon.content = v;
});
DB.propAddClass( this, 'small' );
DB.propEnum( TYPES )( this, 'type' )(function(v) {
$.removeClass( elem, 'thm-bg3', 'thm-bgP', 'thm-bgS' );
switch( v ) {
case 'primary': $.addClass( elem, 'thm-bgP' ); break;
case 'secondary': $.addClass( elem, 'thm-bgS' ); break;
default: $.addClass( elem, 'thm-bg3' ); break;
}
});
DB.propBoolean( this, 'enabled' )( function ( v ) {
touchable.enabled = v;
if( v ) {
$.removeClass( elem, 'disabled' );
} else {
$.addClass( elem, 'disabled' );
}
} );
DB.prop( this, 'action', 0 );
DB.propRemoveClass( this, 'visible', 'hide' );
opts = DB.extend( {
type: "standard",
value: "action",
action: 0,
small: false,
enabled: true,
icon: "add",
href: null,
target: null,
visible: true
}, opts, this );
// Animate the pressing.
$.on( this.element, {
keydown: function ( evt ) {
if ( evt.keyCode == 13 || evt.keyCode == 32 ) {
evt.preventDefault();
evt.stopPropagation();
that.fire();
}
}
} );
touchable.tap.add( that.fire.bind( that ) );
};
function setup(){
var events = new EventBroker;
events.create('refresh');
events.create('move');
module.exports.events = events;
module.exports.on = events.subscribe.bind(module.exports.events);
var wrapper = ui.select('#boardwrapper');
select = module.exports.select = ui.queryFragment.bind(null,wrapper);
container.events.subscribe('resize', resize);
on(wrapper, 'touchstart', movePiece);
on(wrapper, 'mousedown', movePiece);
gameplay.session.on('update', refresh);
}
function setup(nnEl,nnTestbox){
el = nnEl;
testEl = nnTestbox;
check({ 'keyCode':97 });
on(el, 'keydown', check);
on(el, 'keyup', check);
el.value = el.value;
on(window, 'load', function(){
check({ 'keyCode':97 });
});
setTimeout(function(){ check({ 'keyCode':97 }); },100);
setTimeout(function(){ check({ 'keyCode':97 }); },250);
setTimeout(function(){ check({ 'keyCode':97 }); },500);
}
v.forEach(function (itm) {
if (itm == '-') {
$.add( menu, $.div( 'sep', [itm] ));
} else {
var icon = new Icon({size: '2em', content: itm});
$.addClass( icon.element, 'icon' );
$.on( icon.element, {
down: $.addClass.bind( $, icon.element, 'down' ),
up: $.removeClass.bind( $, icon.element, 'down' ),
tap: onMenu.bind( that, itm )
});
$.add( menu, icon );
}
});
names.forEach(function (name) {
var icon = $.div(
{title: name},
[
new Icon({content: name, size: '2em'})
]);
$.on( icon, {
tap: function() {
Wdg.getById('txtContent').value = name;
},
doubletap: function() {
Wdg.getById('txtContent').value = JSON.stringify( Icon.Icons[name], null, ' ' );
}
});
$.add( elem, icon );
});
function setup(){
select = module.exports.select = ui.queryFragment.bind(null,ui.select('#container'))
events = module.exports.events = new EventBroker;
events.create('resize');
getChildren().forEach(function(widget){
widget.module.setup && widget.module.setup();
});
gameplay.session.on('create', updateClass);
gameplay.session.on('join', updateClass);
gameplay.session.on('leave', updateClass);
on(window, 'resize', resize);
resize();
}
module.exports = function( args ) {
var elem = $.div( 'boolean', [args.text] );
if( Data.get( args.data ) ) {
$.addClass( elem, 'yes' );
}
$.on( elem, function() {
if( Data.get( args.data ) ) {
$.removeClass( elem, 'yes' );
Data.set( args.data, 0 );
} else {
$.addClass( elem, 'yes' );
Data.set( args.data, 1 );
}
Data.save;
});
return elem;
};
list.forEach(function (item) {
var div = $.div();
div.innerHTML = item;
$.add( datalist, div );
$.on( div, {
down: function() {
dataListHasFocus = true;
},
up: function() {
dataListHasFocus = false;
input.focus();
},
tap: function() {
that.value = div.textContent.trim();
$.removeClass( elem, 'list' );
}
});
});
function attachEvent( key, elem, close ) {
var that = this;
$.on(elem, {
down: function() {
window.setTimeout(function() {
$.addClass(elem, 'theme-elevation-4');
});
},
up: function() {
$.removeClass(elem, 'theme-elevation-4');
},
tap: function() {
console.log("Select: ", key);
close();
that.value = key;
}
});
}
module.exports = function( args ) {
var elem = $.div( 'boolean', [args.text] );
var get = args.get || function() {};
var set = args.set || function() {};
if( get() ) {
$.addClass( elem, 'yes' );
}
$.on( elem, function() {
if( get() ) {
$.removeClass( elem, 'yes' );
set( 0 );
} else {
$.addClass( elem, 'yes' );
set( 1 );
}
Data.save();
});
return elem;
};
function Qrcode( args ) {
var that = this;
if( typeof args !== 'object') args = undefined;
if( typeof args === 'undefined' ) args = { id: '', page: '' };
if( typeof args.id === 'undefined' ) args.id = '';
if( typeof args.page === 'undefined' ) args.page = '';
var img = document.createElement( 'img' );
img.className = "qrcode";
img.setAttribute( 'src', 'css/qrcode/qrcode.php?id=' + args.id + "&page=" + args.page );
Object.defineProperty( this, 'element', {
value: img, writable: false, enumerable: true, configurable: false
});
$.on( this.element, function() {
window.location = "?" + that._args.id;
});
this._args = args;
}
list.forEach(function (item, idx) {
var div = $.div();
div.innerHTML = item;
list[idx] = div.textContent.trim();
$.add( datalist, div );
$.on( div, {
down: function() {
dataListHasFocus = true;
},
up: function() {
dataListHasFocus = false;
that.focus = true;
},
tap: function() {
that.value = div.textContent.trim();
console.info("[wdg.text] div=...", div);
$.removeClass( elem, 'list' );
}
});
});
DB.propBoolean(this, 'button')(function(v) {
if (v) {
$.addClass( elem, 'theme-elevation-8');
$.removeClass( elem, 'flat');
$.css( elem, {
padding: 'calc(0.25 * ' + that.size + ') 0 0 0',
width: "calc(1.5 * " + that.size + ")",
height: "calc(1.5 * " + that.size + ")",
'line-height': that.size
});
$.css(svg, {
'line-height': v
});
//that.size = '2rem';
$.on( elem, {
down: function(evt) {
if (that.button) {
$.addClass(elem, 'theme-elevation-12');
evt.stopPropagation();
evt.preventDefault();
}
},
up: function() {
$.removeClass(elem, 'theme-elevation-12');
},
tap: function() {
DB.fire( that, 'action', that.value );
}
});
} else {
$.removeClass( elem, 'theme-elevation-8');
$.addClass( elem, 'flat');
$.css( elem, {
padding: 0
});
$.off( elem );
}
});
var WysiwygEditor = function( opts ) {
var that = this;
// Real focus function will be set when iframe will be loaded.
var postponedFocus = false;
var postponedHTML = null;
var iframeIsLoaded = false;
var iframeHasChanged = false;
var elem = $.elem(this, 'div', 'wdg-wysiwyg', 'theme-elevation-2');
var iconFullscreen = new Icon({ content: Icon.Icons.fullscreen, size: '1.5rem', button: true });
var label = $.div('theme-label');
var header = $.div('header', 'theme-color-bg-1', [iconFullscreen, label]);
var slider = $.div('slider');
var menu = $.div('menu');
var iframe = $.tag( 'iframe', { src: 'squire2/squire.html' } );
iframe.addEventListener( 'load', function() {
iframeIsLoaded = true;
// Storing a reference to the wysiwyg editor.
var squire = iframe.contentWindow.editor;
if( postponedFocus ) {
that.focus = true;
}
// Adding editor buttons.
//initHeader.call( that, header );
if( postponedHTML !== null ) {
squire.setHTML( postponedHTML );
postponedHTML = null;
}
// Adding onChange event when focus is lost.
squire.addEventListener( 'input', function() {
// Prevent from update looping.
iframeHasChanged = true;
that.value = squire.getHTML();
});
Object.defineProperty( that, 'squire', {
value: squire, writable: false, configurable: true, enumerable: true
});
}, false);
var body = $.div('body', [iframe]);
$.add( elem, header, menu, body, slider);
DB.propBoolean(this, 'focus')(function(v) {
if (iframeIsLoaded) {
if (v) {
that.squire.focus();
} else {
that.squire.blur();
}
} else {
postponedFocus = v;
}
});
DB.propString(this, 'label')(function(v) {
if (typeof v === 'number') v = '' + v;
if (typeof v !== 'string') v = '';
label.textContent = v;
});
DB.propInteger(this, 'height')(function(v) {
$.css(elem, {height: v + "px"});
});
DB.prop(this, 'menu')(function(v) {
$.clear( menu );
v.forEach(function (itm) {
if (itm == '-') {
$.add( menu, $.div( 'sep', [itm] ));
} else {
var icon = new Icon({size: '2em', content: itm});
$.addClass( icon.element, 'icon' );
$.on( icon.element, {
down: $.addClass.bind( $, icon.element, 'down' ),
up: $.removeClass.bind( $, icon.element, 'down' ),
tap: onMenu.bind( that, itm )
});
$.add( menu, icon );
}
});
});
DB.propString(this, 'value')(function(v) {
if (iframeIsLoaded) {
if (iframeHasChanged) {
iframeHasChanged = false;
} else {
that.squire.setHTML( v );
}
}
else postponedHTML = v;
});
DB.propAddClass(this, 'wide');
DB.propRemoveClass(this, 'visible', 'hide');
DB.extend({
label: "",
value: "",
menu: DEFAULT_MENU,
height: 180,
visible: true
}, opts, this);
var initialHeight = this.height;
$.on( slider, {
down: function() {
initialHeight = that.height;
},
drag: function(evt) {
that.height = Math.max( 180, initialHeight + evt.dy );
}
});
// Managing fullscreen display.
var fullscreen = new Fx.Fullscreen({
target: elem,
// When the component is put fullscreen, it is temporarly removed from the DOM.
// This causes the IFrame to be reloaded, and the result is that we lost content.
// That's why we use `postponedHTML`.
onBeforeReplace: function() {
postponedHTML = that.squire.getHTML();
}
});
DB.bind(iconFullscreen, 'action', function() {
fullscreen.value = !fullscreen.value;
});
};
}
ui.setup();
ui.select().innerHTML = html;
toSetup.forEach(function(el){
el && el.setup(gameplay);
});
events.publish('success');
container.select().style.visibility = 'visible';
});
}
var events = setup.events = new EventBroker;
events.create('error');
events.create('success');
setup.on = events.subscribe.bind(module.exports.events);
var gameplay = setup.gameplay = new Gameplay;
var dialogbox = setup.dialogbox = require('./widgets/dialogbox');
var render = exports.render = function render(callback){
var container = require('./widgets/container');
container.render(callback);
}
on(window, 'DOMContentLoaded', setup);
var Icon = function(opts) {
var that = this;
var mapColors = [];
var g = $.svg('g', {
'stroke-width': 6,
fill: "none",
'stroke-linecap': 'round',
'stroke-linejoin': 'round'
});
var svg = $.svgRoot({
width: '100%',
height: '100%',
viewBox: '-65 -65 130 130',
preserveAspectRatio: "xMidYMid meet"
});
var root = $.div('wdg-icon', [svg]);
var elem = $.elem(this, root);
$.add( svg, g );
DB.prop(this, 'content')(setContent.bind( this, mapColors, g ));
DB.prop(this, 'value');
DB.propBoolean(this, 'rotate')(function(v) {
if (v) {
$.addClass( svg, "rotate" );
} else {
$.removeClass( svg, "rotate" );
}
});
DB.propBoolean(this, 'button')(function(v) {
if (v) {
$.addClass( elem, 'button', 'theme-elevation-8');
$.css( elem, {
padding: ".5rem" //(that.size * (Math.sqrt(2) - 1)) + 'px'
});
that.size = '2rem';
} else {
$.removeClass( elem, 'button', 'theme-elevation-8');
$.css( elem, {
padding: 0
});
}
});
DB.propUnit(this, 'size')(function(v) {
$.css(svg, {
width: v,
height: v
});
});
DB.prop(this, 'action');
$.on( elem, {
down: function() {
if (that.button) {
$.addClass(elem, 'theme-elevation-12');
}
},
up: function() {
$.removeClass(elem, 'theme-elevation-12');
},
tap: function() {
DB.fire( that, 'action', that.value );
}
});
var updateColor = function( index, color ) {
var children = mapColors[index];
if( typeof children === 'undefined' ) return;
children.fill.forEach(function (child) {
$.att( child, "fill", that['color' + index] );
});
children.stroke.forEach(function (child) {
$.att( child, "stroke", that['color' + index] );
});
};
for (var i = 0; i < 6; i++) {
DB.propColor(this, 'color' + i)(updateColor.bind( this, i ));
}
opts = DB.extend({
color0: '#000000',
color1: '#ffffff',
color2: '#777777',
color3: '#ff0000',
color4: '#00ff00',
color5: '#0000ff',
content: ['circle', {
stroke: 1, fill: 0, r: 90, cx: 0, cy: 0
}],
angle: 0,
size: '2rem',
button: false,
value: "icon",
rotate: false,
wide: false,
visible: true
}, opts, this);
};
var $ = require("dom");
var Data = require("data");
var Hash = require("tfw.hash-watcher");
var Actions = require("actions");
var PerformActions = require('app.perform-actions');
// Main div af the screen.
var WDG = {
demo: $.get( '#DEMO' ),
app: $.get( '#APP' ),
appBody: $.get( '#APP-BODY' )
};
$.on( $.get( "CLOSE" ), function() {
location.hash = "#" + data.get( '$next' );
});
Hash( function( actionID, arg1, arg2, arg3 ) {
if( actionID == 'refresh' ) {
location.hash = arg1;
return;
}
var action = findAction( actionID, arg1, arg2, arg3 );
if( !action ) return;
Data.set( "arg0", actionID );
Data.set( "arg1", arg1 );
Data.set( "arg2", arg2 );
Data.set( "arg3", arg3 );
Event.prototype.set = function(listener) {
dom.on(this.el, this.type, function(ev) {
listener.call(ev, ev)
})
}
require("app.perform-actions",function(r,t){function e(r,t){return i.parse(r,t)}var n=require("dom"),i=require("data"),o=require("x-template"),u=require("input-boolean"),a=require("input-text"),f=require("input-file"),c=require("input-date");t.exports=function(r){var t=n.div();try{if("undefined"==typeof r)throw"children is undefined! But it must be an Array.";r.forEach(function(r,e){try{if(!Array.isArray(r))throw"Element #"+e+" should be an array!";var n=r[0],i=s[n];if(!i)throw"Unknonw type `"+n+"`!";var o=i.apply(t,r.slice(1));if("string"==typeof o)return void(location.hash="#"+o);o&&t.appendChild(o)}catch(u){throw console.error("Exception: ",u),console.error("Child #"+e,r),null}},this)}catch(e){throw null!==e&&console.error("Exception: ",e),console.error("Error in: ",r),e}return t};var s={text:function(r){var t=n.tag("p");return t.innerHTML=e(r),t},button:function(r){var t=n.tag("a",r.style||"button"),o={};return r.freeze&&(Array.isArray(r.freeze)||(r.freeze=[r.freeze]),r.freeze.forEach(function(r){o[r]=i.get(r)})),n.on(t,function(){var t=e(r.action,o);"string"==typeof t&&t.length>0&&(location.hash="#"+t)}),t.innerHTML=e(r.text),t},nurse:function(r){var t=n.div(),i=o.appendTo("nurse",t);return i.text.innerHTML=e(r),t},reset:function(r){i.reset();var t,e;for(t in r)e=r[t],i.set(t,e)},set:function(r){var t,n;for(t in r)n=r[t],i.set(t,e(n))},"input-bool":function(r){return u(r)},"input-text":function(r){return a(r)},"input-file":function(r){return f(r)},"input-date":function(r){return c(r)},row:function(r){var e=n.div("tbl");return Array.isArray(r)||(r=[r]),r.forEach(function(i){var o=t.exports([i]);n.add(e,n.div([o],{style:"width:"+100/r.length+"%"}))}),e},loop:function(r,o){var u=e(r.list),a=e(r.item),f=e(r.sort),c=i.get(u);Array.isArray(c)||(c=[c]),"string"==typeof f&&f.trim().length>0&&(f=[f]),Array.isArray(f)&&c.sort(function(r,t){var e,n;for(e=0;e<f.length;e++){if(n=f[e],r[n]<t[n])return-1;if(r[n]>t[n])return 1}return 0}),"function"==typeof r.filter&&(c=c.filter(r.filter));var s=n.div();return c.forEach(function(r){i.set(a,r),s.appendChild(t.exports(o))}),s}}});
var Data = require("data");
var Hash = require("tfw.hash-watcher");
var Actions = require("actions");
var PerformActions = require('app.perform-actions');
// Main div af the screen.
var WDG = {
demo: $.get( '#DEMO' ),
app: $.get( '#APP' ),
appBody: $.get( '#APP-BODY' )
};
$.on( $.get( "#CLOSE" ), function() {
var next = Data.get( '$next' );
console.info("[app] next=...", next);
location.hash = "#" + next;
});
Hash( function( actionID, arg1, arg2, arg3 ) {
if( actionID == 'refresh' ) {
location.hash = arg1;
return;
}
var action = findAction( actionID, arg1, arg2, arg3 );
if( !action ) return;
Data.set( "arg0", actionID );
Data.set( "arg1", arg1 );
Data.set( "arg2", arg2 );
dialogbox.open({ 'buttons':[{ 'click':close, 'caption':'OK' }], 'symbol':ui.getRandomSymbol(), 'class':'prompt nickname', 'message':html },function(){
testEl = undefined;
el = dialogbox.select('#nickname');
on(el, 'keydown', check);
on(el, 'keyup', check);
});
/**
@exports {class}
@param {object} opts.content -
*/
function Modal(opts) {
var that = this;
var body = $.div();
body.addEventListener("scroll", onScroll.bind(this, body));
const
laterScroll = function() {
window.setTimeout(function() {
onScroll(body);
});
},
header = $.tag('header', 'thm-fg', 'thm-ele8', 'thm-bgPD'),
footer = $.tag('footer', "thm-bg0"),
cell = $.div('cell', 'thm-ele24', 'thm-bg1', [header, body, footer]),
elem = $.elem(this, 'div', 'wdg-modal', [$.div([cell])]);
$.on(elem, function(evt) {
if (evt.target.parentElement !== elem) return;
that.visible = false;
});
DB.prop(this, 'content')(function(v) {
$.clear(body);
if (Array.isArray(v)) {
v.forEach(function(itm) {
$.add(body, itm);
});
} else if (typeof v !== 'undefined' && v !== null) {
$.add(body, v);
}
laterScroll();
});
DB.prop(this, 'header')(function(v) {
if (!v || (typeof v === 'string' && v.trim().length === 0)) {
$.addClass(header, "hide");
return;
}
$.removeClass(header, "hide");
$.clear(header);
if (Array.isArray(v)) {
v.forEach(function(itm) {
$.add(header, itm);
});
} else if (typeof v !== 'undefined' && v !== null) {
$.add(header, v);
}
laterScroll();
});
DB.prop(this, 'footer')(function(v) {
if (!v || (typeof v === 'string' && v.trim().length === 0)) {
$.addClass(footer, "hide");
return;
}
$.removeClass(footer, "hide");
$.clear(footer);
if (Array.isArray(v)) {
v.forEach(function(itm) {
$.add(footer, itm);
});
} else {
$.add(footer, v);
}
laterScroll();
});
DB.propString(this, 'width')(function(v) {
$.css(body, {
'max-width': v
});
laterScroll();
});
DB.propAddClass(this, 'fullscreen');
DB.propAddClass(this, 'padding');
DB.propAddClass(this, 'scroll');
DB.propAddClass(this, 'wide');
DB.propBoolean(this, 'visible')(function(v) {
if (v) {
that.attach();
} else {
that.detach();
}
});
opts = DB.extend({
visible: false,
header: null,
content: [],
footer: null,
padding: true,
scroll: true,
wide: false,
fullscreen: false,
width: 'auto'
}, opts, this);
}
var Combo = function(opts) {
var that = this;
this._children = {};
var label = $.div( 'theme-label', 'theme-color-bg-1' );
var button = $.div( 'button', 'theme-color-bg-1', [new Icon({content: 'tri-down', size: '1.5rem'})] );
var body = $.tag( 'button', 'body' );
var datalist = $.div( 'datalist' );
this._button = button;
var elem = $.elem( this, 'div', 'wdg-combo', 'theme-elevation-2',
[label, $.div('table', [body, button]), datalist] );
body.addEventListener('focus', function() {
$.addClass( elem, 'theme-elevation-8' );
});
body.addEventListener('blur', function() {
$.removeClass( elem, 'theme-elevation-8' );
});
DB.propRemoveClass(this, 'enabled', 'disabled');
DB.propBoolean(this, 'focus')(function(v) {
if (v) body.focus();
else body.blur();
});
DB.propString(this, 'label')(function(v) {
if (v === null || (typeof v === 'string' && v.trim() == '')) {
$.addClass(elem, 'no-label');
} else {
$.removeClass(elem, 'no-label');
$.textOrHtml(label, v);
if (v.substr(0, 6) == '<html>') {
$.att(label, {title: ''});
} else {
$.att(label, {title: v});
}
}
});
DB.prop(this, 'content')(function(v) {
if (Array.isArray( v )) {
// Convert array into map.
// Each item must have the `$key` property.
// If not, the element is ignored.
var obj = {};
v.forEach(function (itm, idx) {
if( typeof itm.$key === 'undefined' ) return;
obj[itm.$key] = itm;
});
v = obj;
}
that._children = v;
DB.fire( that, 'value' );
});
DB.propString(this, 'value')(function(v) {
var selectedItem = that._children[v];
if( typeof selectedItem === 'undefined' ) {
for( v in that._children ) break;
selectedItem = that._children[v];
}
$.clear( body );
if (!selectedItem) return;
$.add( body, selectedItem );
});
DB.propAddClass(this, 'wide');
DB.propRemoveClass(this, 'visible', 'hide');
opts = DB.extend({
value: '',
content: [],
label: null,
enabled: true,
wide: false,
visible: true
}, opts, this);
$.on( elem, that.fire.bind( that ) );
};
require("app.perform-actions",function(r,e){function n(r,e){return i.parse(r,e)}var t=require("dom"),i=require("data"),o=require("x-template"),u=require("input-boolean"),a=require("input-text"),f=require("input-file"),p=require("input-date");e.exports=function(r){var e=t.div();return r.forEach(function(n,t){Array.isArray(n)||(console.error("Element #"+t+" should be an array!"),console.info("[app.perform-actions] child=...",n),console.info("[app.perform-actions] children=...",r));var i=n[0],o=c[i];if(!o)throw"Unknonw type `"+i+"`!";var u=o.apply(e,n.slice(1));return"string"==typeof u?void(location.hash="#"+u):void(u&&e.appendChild(u))}),e};var c={text:function(r){var e=t.tag("p");return e.innerHTML=n(r),e},button:function(r){var e=t.tag("a",r.style||"button"),o={};return r.freeze&&(Array.isArray(r.freeze)||(r.freeze=[r.freeze]),r.freeze.forEach(function(r){o[r]=i.get(r)})),t.on(e,function(){var e=n(r.action,o);"string"==typeof e&&e.length>0&&(location.hash="#"+e)}),e.innerHTML=n(r.text),e},nurse:function(r){var e=t.div(),i=o.appendTo("nurse",e);return i.text.innerHTML=n(r),e},reset:function(r){i.reset();var e,n;for(e in r)n=r[e],i.set(e,n)},set:function(r){var e,n;for(e in r)n=r[e],i.set(e,n)},"input-bool":function(r){return u(r)},"input-text":function(r){return a(r)},"input-file":function(r){return f(r)},"input-date":function(r){return p(r)},loop:function(r,o){var u=n(r.list),a=n(r.item),f=n(r.sort),p=i.get(u);Array.isArray(p)||(p=[p]),"string"==typeof f&&f.trim().length>0&&(f=[f]),Array.isArray(f)&&p.sort(function(r,e){var n,t;for(n=0;n<f.length;n++){if(t=f[n],r[t]<e[t])return-1;if(r[t]>e[t])return 1}return 0}),"function"==typeof r.filter&&(p=p.filter(r.filter));var c=t.div();return p.forEach(function(r){i.set(a,r),c.appendChild(e.exports(o))}),c}}});
/**
* @class Touchable
* @param {any} elem - DOMElement or string representing a DOM ID.
* @param {object} opts - Options.
* @param {boolean} opts.enabled - .
* @param {string} opts.color - CSS color.
* @returns {undefined}
*/
function Touchable(elem, opts = {}) {
const that = this,
target = {elem: null},
shadow = $.div("tfw-touchable-shadow"),
container = $.div("tfw-touchable-container", [shadow]);
if (typeof opts.enabled === "undefined") opts.enabled = true;
this.enabled = opts.enabled;
this.color = opts.color || "#333";
this.classToAdd = opts.classToAdd;
this.opacity = opts.opacity || 0.4;
this.element = $(elem);
this.tap = new Listeners();
this.press = new Listeners();
let lastX = 0,
lastY = 0;
$.addClass(elem, "tfw-touchable-elem");
const fxDown = Fx()
.css(shadow, {
transition: "none",
transform: "scale(0)"
})
.exec(function() {
const cls = that.classToAdd;
if (typeof cls === "string") {
$.addClass(elem, cls);
}
const rect = target.elem.getBoundingClientRect(),
w = Math.max(lastX, rect.width - lastX),
h = Math.max(lastY, rect.height - lastY),
radius = Math.ceil(Math.sqrt(w * w + h * h));
$.css(shadow, {
left: `${lastX}px`,
top: `${lastY}px`,
margin: `-${radius}px`,
width: `${2 * radius}px`,
height: `${2 * radius}px`,
opacity: 0,
background: that.color,
transform: "scale(0)",
transition: "all .15s ease",
"transition-timing-function": "cubic-bezier(0,1,0.780,1)",
"-moz-transition-timing-function": "cubic-bezier(0,1,0.780,1)",
"-webkit-transition-timing-function":
"cubic-bezier(0,1,0.780,1)"
});
$.clear(target.elem, container);
})
.wait(10)
.css(shadow, {
opacity: that.opacity,
transform: "scale(.25)"
})
.wait(150)
.css(shadow, {transform: "scale(.2)"})
.wait(150)
.css(shadow, {
transition: "all .6s ease",
transform: "scale(1)",
opacity: 0
})
.wait(600)
.exec(function() {
$.detach(target.elem);
const cls = that.classToAdd;
if (typeof cls === "string") {
$.removeClass(elem, cls);
}
});
$.on(elem, {
down(evt) {
if (!that.enabled) return;
evt.stopPropagation();
evt.preventDefault();
lastX = Math.floor(evt.x);
lastY = Math.floor(evt.y);
target.elem = makeFixedElementWithSameShape(elem);
$.add(document.body, target.elem);
fxDown.start();
},
tap(evt) {
if (!that.enabled) {
console.log("DISABLED!");
return;
}
that.tap.fire(evt);
},
doubletap(evt) {
if (!that.enabled) {
console.log("DISABLED!");
return;
}
that.press.fire(evt);
}
});
}
require("app",function(e,o){function r(e){i.clear(l.demo,p(e))}function a(e){var o=p(e);i.addClass(o,"app","hide"),i.clear(l.appBody,o),window.setTimeout(function(){i.removeClass(o,"hide")})}function n(e){var o=p(e);i.addClass(o,"msg","hide"),i.clear(l.appBody,o),window.setTimeout(function(){i.removeClass(o,"hide")})}function t(e,o,r,a){var n=s.get("arg0")||"";if(n=(""+n).trim().split(":"),n.length>1){n.pop();var t,i,c,p;for(t=n.length;t>0;t--)if(c=n.slice(0,t).join(":"),c.length>0&&(c+=":"),p=d[c+e])return i="#"+c+e,"undefined"!=typeof o&&(i+="/"+o,"undefined"!=typeof r&&(i+="/"+r,"undefined"!=typeof a&&(i+="/"+a))),void(location.hash=i)}return p=d[e],p||(location.hash="#main"),p}var i=require("dom"),s=require("data"),c=require("tfw.hash-watcher"),d=require("actions"),p=require("app.perform-actions"),l={demo:i.get("#DEMO"),app:i.get("#APP"),appBody:i.get("#APP-BODY")};i.on(i.get("#CLOSE"),function(){var e=s.get("$next");console.info("[app] next=...",e),location.hash="#"+e}),c(function(e,o,c,p){if("refresh"==e)return void(location.hash=o);var l=t(e,o,c,p);if(l){if(s.set("arg0",e),s.set("arg1",o),s.set("arg2",c),s.set("arg3",p),console.log("----------------------------------------"),console.info("[app] actionID=...",e,s.get("arg0")),s.log(),"undefined"==typeof l)return console.error('Unknown action: "'+e+'"'),console.error(Object.keys(d)),void(location.hash="#main");var f=l[0].trim().toLowerCase(),u=l[1];document.body.className=f;try{switch(f){case"story":r(u);break;case"demo":r(u);break;case"app":a(u);break;case"msg":n(u)}}catch(h){console.error("Error in "+f.toUpperCase()+":",u),console.error("Action:",l),alert("There is an error!")}i.get("#HEADER").innerHTML=s.parse("Open Hackathon 2016 - Team 3 - <b>{{$today|datetime}}</b>"),s.log(),s.save()}})});