Skip to content

Q
quokka-core
Commit 5fa223d6 by Иван Кубота
Options

to QRequire format

parent 643be830
Showing with 847 additions and 772 deletions
.gitignore 0 → 100644
.idea/*
.idea/
node_modules/*
Core/AbstractComponent.js
var ObservableSequence = require('observable-sequence'); module.exports =
var DQIndex = require('z-lib-structure-dqIndex'); QRequire('observable-sequence', 'z-lib-structure-dqIndex', 'Core.QObject', function(
ObservableSequence,
var QObject = require('./QObject'); DQIndex,
QObject
/** @class */ ){
var AbstractComponent = QObject.extend('Core', 'AbstractComponent', 'use strict';
/** @class */
var AbstractComponent = QObject.extend('Core', 'AbstractComponent',
{ {
addChild: function (component) { addChild: function (component) {
this._children.push(component); this._children.push(component);
...@@ -111,5 +113,5 @@ var AbstractComponent = QObject.extend('Core', 'AbstractComponent', ...@@ -111,5 +113,5 @@ var AbstractComponent = QObject.extend('Core', 'AbstractComponent',
this.parent = null; this.parent = null;
}); });
return AbstractComponent;
module.exports = AbstractComponent; });
\ No newline at end of file \ No newline at end of file
Core/Config.js
var RunAtServerComponent = require('./RunAtServerComponent'); module.exports =
var QObject = require('./QObject'); QRequire('Core.RunAtServerComponent','Core.QObject', 'Core.Variant', function(
var Pipe = require('./Pipe'); RunAtServerComponent,
var Variant = require('./Variant'); QObject,
Variant
) {
'use strict';
var base = RunAtServerComponent.prototype; var base = RunAtServerComponent.prototype;
var QData = {}; var Config = RunAtServerComponent.extend('Core', 'Config', {
ctor: function () {
var config = require('../../platform/config'); },
load: function () {
var config = require(this.get('path'));
config.load(function(data){ config.load(function (data) {
var parsedData; var parsedData;
try { try {
parsedData = JSON.parse(data); parsedData = JSON.parse(data);
this._data['qData'] = Variant.deserialize(parsedData);
} }
catch (e) { catch (e) {
console.log(e); console.log(e);
throw e; throw e;
} }
QData = Variant.deserialize(parsedData);
QData._regherughelrgd = true;
});
var Config = RunAtServerComponent.extend('Core', 'Config', { });
ctor: function () {
this._data['qData'] = QData;
}, },
save: function () { save: function () {
config.save(JSON.stringify(QData.serialize(), null, '\t')); config.save(JSON.stringify(QData.serialize(), null, '\t'));
...@@ -51,8 +52,15 @@ var Config = RunAtServerComponent.extend('Core', 'Config', { ...@@ -51,8 +52,15 @@ var Config = RunAtServerComponent.extend('Core', 'Config', {
//return QData.ref(key); //return QData.ref(key);
}, },
prop: { prop: {
value: 'path',
path: {
set: function (val, e) {
e.value(val);
this.load();
}
},
qData: {} qData: {}
} }
});
return Config;
}); });
module.exports = Config;
\ No newline at end of file
Core/DATA.js
/** /**
* Created by zibx on 5/9/17. * Created by zibx on 5/9/17.
*/ */
var QObject = require('./QObject'); module.exports =
QRequire('Core.QObject', function(
var DATA = QObject.extend('Core', 'DATA', { QObject
) {
'use strict';
var DATA = QObject.extend('Core', 'DATA', {
_anything: true, _anything: true,
ctor: function () { ctor: function () {
}, },
...@@ -16,7 +19,8 @@ var DATA = QObject.extend('Core', 'DATA', { ...@@ -16,7 +19,8 @@ var DATA = QObject.extend('Core', 'DATA', {
} }
} }
} }
}); });
module.exports = DATA; return DATA;
\ No newline at end of file });
\ No newline at end of file
Core/Pipe.js
var TypeTable = require('./TypeTable'); module.exports =
QRequire('Core.TypeTable', function(
TypeTable
) {
'use strict';
/** /**
* *
* @constructor * @constructor
*/ */
function Pipe() { function Pipe() {
this.toRef = void(0); this.toRef = void(0);
this.fn = arguments[arguments.length - 1]; this.fn = arguments[arguments.length - 1];
...@@ -28,13 +32,13 @@ function Pipe() { ...@@ -28,13 +32,13 @@ function Pipe() {
var result = this.fn.apply(this, this.inputCache); var result = this.fn.apply(this, this.inputCache);
this.outputCache = result; this.outputCache = result;
} }
/** /**
* *
* @type {{to: Pipe.to, _subscribeToLink: Pipe._subscribeToLink}} * @type {{to: Pipe.to, _subscribeToLink: Pipe._subscribeToLink}}
*/ */
Pipe.prototype = { Pipe.prototype = {
to: function (toRef) { to: function (toRef) {
this.toRef = toRef; this.toRef = toRef;
this.toRef.set(this.outputCache); this.toRef.set(this.outputCache);
...@@ -50,13 +54,14 @@ Pipe.prototype = { ...@@ -50,13 +54,14 @@ Pipe.prototype = {
self.toRef.set(result); self.toRef.set(result);
}); });
} }
}; };
/* /*
Pipe.done = function(){ Pipe.done = function(){
}; };
Pipe.done.prototype = new Pipe(); Pipe.done.prototype = new Pipe();
*/ */
TypeTable.registerType('Core', 'Pipe', Pipe); TypeTable.registerType('Core', 'Pipe', Pipe);
module.exports = Pipe; return Pipe;
\ No newline at end of file });
\ No newline at end of file
Core/QObject.js
var observable = require('z-observable'); module.exports =
var TypeTable = require('./TypeTable'); QRequire('z-observable','Core.TypeTable', 'Core.Pipe', 'Core.Reference', function(
var Pipe = require('./Pipe'); observable,
var Reference = require('./Reference'); TypeTable,
var index = 0; Pipe,
function QObject() { Reference
) {
'use strict';
var index = 0;
function QObject() {
this._data = {}; this._data = {};
this.__subscribers = {}; this.__subscribers = {};
this.__refs = {}; this.__refs = {};
observable.prototype._init.apply(this); observable.prototype._init.apply(this);
this.____id = this.__proto__.type + (index++) + '_' + this.createRandomString(12); this.____id = this.__proto__.type + (index++) + '_' + this.createRandomString(12);
} }
var prototype = { var prototype = {
on: observable.prototype.on, on: observable.prototype.on,
once: observable.prototype.once, once: observable.prototype.once,
fire: observable.prototype.fire, fire: observable.prototype.fire,
...@@ -201,7 +207,6 @@ var prototype = { ...@@ -201,7 +207,6 @@ var prototype = {
var newVal = flags.useNew ? flags.newVal : value; var newVal = flags.useNew ? flags.newVal : value;
if (newVal !== oldValue) { if (newVal !== oldValue) {
_data[key] = newVal; _data[key] = newVal;
...@@ -258,33 +263,33 @@ var prototype = { ...@@ -258,33 +263,33 @@ var prototype = {
_value: {} _value: {}
}, },
_method: {} _method: {}
}; };
QObject.prototype = prototype; QObject.prototype = prototype;
QObject.type = "QObject"; QObject.type = "QObject";
QObject.namespace = "Core"; QObject.namespace = "Core";
QObject.fixKey = function (key) { QObject.fixKey = function (key) {
if (!Array.isArray(key)) { if (!Array.isArray(key)) {
key = key.split('.'); key = key.split('.');
} }
return key; return key;
}; };
QObject.joinKey = function () { QObject.joinKey = function () {
var arrayProt = Array.prototype; var arrayProt = Array.prototype;
var args = arguments; var args = arguments;
args = arrayProt.map.call(args, function(arg){ args = arrayProt.map.call(args, function (arg) {
return QObject.fixKey(arg); return QObject.fixKey(arg);
}); });
return arrayProt.concat.apply([], args); return arrayProt.concat.apply([], args);
}; };
QObject.extend = function (namespace, newName, proto, ctor) { QObject.extend = function (namespace, newName, proto, ctor) {
proto = proto || {}; proto = proto || {};
...@@ -332,8 +337,8 @@ QObject.extend = function (namespace, newName, proto, ctor) { ...@@ -332,8 +337,8 @@ QObject.extend = function (namespace, newName, proto, ctor) {
TypeTable.registerType(namespace, newName, newCtor); TypeTable.registerType(namespace, newName, newCtor);
return newCtor; return newCtor;
}; };
TypeTable.registerType("Core", "QObject", QObject);
module.exports = QObject; TypeTable.registerType("Core", "QObject", QObject);
\ No newline at end of file return QObject;
});
Core/Reference.js
var QObject; module.exports =
QRequire('Core.TypeTable', function(
TypeTable
) {
'use strict';
function Reference(obj, key, callback) { var QObject;
function Reference(obj, key, callback) {
if (!QObject) if (!QObject)
QObject = require("./QObject"); QRequire('Core.QObject', function (obj) {
QObject = obj;
});
this.obj = obj; this.obj = obj;
this.callback = callback; this.callback = callback;
...@@ -21,9 +29,9 @@ function Reference(obj, key, callback) { ...@@ -21,9 +29,9 @@ function Reference(obj, key, callback) {
} }
return this; return this;
} }
Reference.prototype = Reference.prototype =
{ {
oldVal: void 0, oldVal: void 0,
destroyNext: function () { destroyNext: function () {
...@@ -66,17 +74,17 @@ Reference.prototype = ...@@ -66,17 +74,17 @@ Reference.prototype =
return this.obj.get(this.key, true); return this.obj.get(this.key, true);
}, },
getOld: function (val, key) { getOld: function (val, key) {
if(!val) if (!val)
return val; return val;
if(val instanceof QObject) if (val instanceof QObject)
return val.get(this.key, true); return val.get(this.key, true);
else { else {
var result = val; var result = val;
for(var i = 0, _i = this.key.length; i < _i; i++){ for (var i = 0, _i = this.key.length; i < _i; i++) {
if(!result) if (!result)
break; break;
if(result instanceof QObject) if (result instanceof QObject)
result = result.get([this.key[i]], true); result = result.get([this.key[i]], true);
else else
result = result[this.key[i]]; result = result[this.key[i]];
...@@ -108,5 +116,6 @@ Reference.prototype = ...@@ -108,5 +116,6 @@ Reference.prototype =
} }
}; };
TypeTable.registerType('Core', 'Reference', Reference);
module.exports = Reference; return Reference;
});
\ No newline at end of file
Core/RunAtServerComponent.js
var AbstractComponent = require('./AbstractComponent'); module.exports =
var QObject = require('./QObject'); QRequire('Core.AbstractComponent', 'Core.QObject','Core.Pipe', function(
var Pipe = require('./Pipe'); AbstractComponent,
var console = {log: function(){}}; QObject,
var base = AbstractComponent.prototype; Pipe
) {
/** @class */ 'use strict';
var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponent', {
var console = {
log: function () {
}
};
var base = AbstractComponent.prototype;
/** @class */
var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponent', {
ctor: function () { ctor: function () {
this.socket = void(0); this.socket = void(0);
this.listeners = {}; this.listeners = {};
...@@ -21,8 +29,8 @@ var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponen ...@@ -21,8 +29,8 @@ var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponen
this.__side = 'server'; this.__side = 'server';
} }
}, },
'~destroy': function(){ '~destroy': function () {
if(this.socket) { if (this.socket) {
this.socket.emit('~destroy'); this.socket.emit('~destroy');
this.socket['~destroy'](); this.socket['~destroy']();
} }
...@@ -64,14 +72,14 @@ var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponen ...@@ -64,14 +72,14 @@ var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponen
}); });
socket.on('RPC', function (data) { socket.on('RPC', function (data) {
var fn = self['#'+data.fn], out; var fn = self['#' + data.fn], out;
if(!fn) if (!fn)
out = {error: true, val: 'No function `'+ data.fn +'`'}; out = {error: true, val: 'No function `' + data.fn + '`'};
else { else {
try{ try {
out = {error: false, val: fn.apply(self, data.args)}; out = {error: false, val: fn.apply(self, data.args)};
}catch(e){ } catch (e) {
out = {error: true, val: e.message + '\n'+e.stack}; out = {error: true, val: e.message + '\n' + e.stack};
} }
} }
...@@ -79,10 +87,10 @@ var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponen ...@@ -79,10 +87,10 @@ var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponen
}); });
socket.on('responseRPC', function (data) { socket.on('responseRPC', function (data) {
var cbs = self.___RPCcallbacks; var cbs = self.___RPCcallbacks;
if(cbs){ if (cbs) {
if(cbs[data.id]){ if (cbs[data.id]) {
var val = data.data; var val = data.data;
if(val.error) if (val.error)
throw new Error(val.val); throw new Error(val.val);
else else
cbs[data.id].call(self, val.val); cbs[data.id].call(self, val.val);
...@@ -91,18 +99,18 @@ var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponen ...@@ -91,18 +99,18 @@ var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponen
}); });
if (this.__side === 'client') { if (this.__side === 'client') {
socket.on('fireClient', function(data){ socket.on('fireClient', function (data) {
self.fire.apply(self, data); self.fire.apply(self, data);
}); });
socket.emit('start', {namespace: this.namespace, type: this.type, appName: this.appName}); socket.emit('start', {namespace: this.namespace, type: this.type, appName: this.appName});
}else{ } else {
socket.on('~destroy', function(){ socket.on('~destroy', function () {
self['~destroy'] && self['~destroy'](); self['~destroy'] && self['~destroy']();
self.fire('~destroy'); self.fire('~destroy');
}); });
} }
}, },
fireClient: function(){ fireClient: function () {
this.socket.emit('fireClient', [].slice.call(arguments)); this.socket.emit('fireClient', [].slice.call(arguments));
}, },
_connectSocket: function (socket) { _connectSocket: function (socket) {
...@@ -110,18 +118,18 @@ var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponen ...@@ -110,18 +118,18 @@ var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponen
this._initSocket(); this._initSocket();
this.setAll(this._data); this.setAll(this._data);
}, },
_RPC: function(name, args){ _RPC: function (name, args) {
args = [].slice.call(args); args = [].slice.call(args);
var cb, var cb,
cbs = this.___RPCcallbacks = this.___RPCcallbacks || {}; cbs = this.___RPCcallbacks = this.___RPCcallbacks || {};
if(!('___RPCID' in this)) if (!('___RPCID' in this))
this.___RPCID = 0; this.___RPCID = 0;
this.___RPCID++; this.___RPCID++;
if(args.length && typeof args[args.length - 1] === 'function'){ if (args.length && typeof args[args.length - 1] === 'function') {
cb = args.pop(); cb = args.pop();
cbs[this.___RPCID] = cb; cbs[this.___RPCID] = cb;
} }
...@@ -162,6 +170,7 @@ var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponen ...@@ -162,6 +170,7 @@ var RunAtServerComponent = AbstractComponent.extend('Core', 'RunAtServerComponen
base.call.apply(this, arguments); base.call.apply(this, arguments);
} }
} }
}); });
module.exports = RunAtServerComponent; return RunAtServerComponent;
\ No newline at end of file });
\ No newline at end of file
Core/Store.js
var RunAtServerComponent = require('./RunAtServerComponent'); module.exports =
var Pipe = require('./Pipe'); QRequire('Core.RunAtServerComponent', 'Core.Pipe', 'Core.Variant', 'Core.Config', function(
var Variant = require('./Variant'); RunAtServerComponent,
var Config = require('./Config'); Pipe,
Variant,
Config
){
'use strict';
var config = new Config();
var config = new Config(); var base = RunAtServerComponent.prototype;
var singleton;
var base = RunAtServerComponent.prototype; var Store = RunAtServerComponent.extend('Core', 'Store', {
var singleton;
var Store = RunAtServerComponent.extend('Core', 'Store', {
_anything: true, _anything: true,
link: function (selfProp, configProp) { link: function (selfProp, configProp) {
var me = this; var me = this;
...@@ -70,6 +73,8 @@ var Store = RunAtServerComponent.extend('Core', 'Store', { ...@@ -70,6 +73,8 @@ var Store = RunAtServerComponent.extend('Core', 'Store', {
settings: {}, settings: {},
system: {} system: {}
} }
}); });
return Store;
});
module.exports = Store;
\ No newline at end of file
Core/Timer.js
var QObject = require('./QObject'); module.exports =
var AbstractComponent = require('./AbstractComponent'); QRequire('Core.QObject', 'Core.AbstractComponent', function(
QObject,
AbstractComponent
) {
'use strict';
/** @class */
var Timer = QObject.extend('Core', 'Timer', { /** @class */
var Timer = QObject.extend('Core', 'Timer', {
ctor: function () { ctor: function () {
this.set('counter', 0); this.set('counter', 0);
}, },
...@@ -12,7 +17,7 @@ var Timer = QObject.extend('Core', 'Timer', { ...@@ -12,7 +17,7 @@ var Timer = QObject.extend('Core', 'Timer', {
var self = this; var self = this;
var interval = this.get('interval'); var interval = this.get('interval');
this.interval = setInterval(function () { this.interval = setInterval(function () {
self.set('counter', self.get('counter')+1); self.set('counter', self.get('counter') + 1);
self.fire('tick', self._data.counter); self.fire('tick', self._data.counter);
}, interval); }, interval);
}, },
...@@ -24,23 +29,24 @@ var Timer = QObject.extend('Core', 'Timer', { ...@@ -24,23 +29,24 @@ var Timer = QObject.extend('Core', 'Timer', {
value: 'counter', value: 'counter',
counter: {}, counter: {},
interval: { interval: {
set: function(val,e){ set: function (val, e) {
if(this.get('enabled')) { if (this.get('enabled')) {
e.value(val); e.value(val);
this.start(); this.start();
} }
} }
}, },
enabled: { enabled: {
set: function(val, e){ set: function (val, e) {
e.value(val); e.value(val);
if(val) if (val)
this.start(); this.start();
else else
this.stop(); this.stop();
} }
} }
} }
}); });
module.exports = Timer; return Timer;
\ No newline at end of file });
\ No newline at end of file
Core/TypeTable.js deleted 100644 → 0
function Node(name) {
this.children = {};
this.name = name || "";
this.namespace = name || "";
this.ctor = null;
}
Node.prototype = {
findOne: function (path) {
if (path.length <= 0)
return this;
var targetChild = this.children[path[0]];
if (!targetChild)
return void(0);
return targetChild.findOne(path.splice(1));
},
findAll: function (name) {
var ret = [];
for (var key in this.children)
if (this.children.hasOwnProperty(key)) {
if (this.children[key].name == name)
ret.push(this.children[key]);
ret = ret.concat(this.children[key].findAll(name))
}
return ret;
}
};
var table = new Node();
var TypeTable = {
registerType: function (namespace, name, ctor) {
var path = namespace.split('.');
if (!ctor) {
ctor = name;
name = path.splice(-1)[0];
}
ctor.namespace = namespace;
ctor.type = name;
var currentNode = table;
for (var i = 0; i < path.length; i++) {
if (!currentNode.children[path[i]]) {
currentNode.children[path[i]] = new Node(path[i]);
}
currentNode = currentNode.children[path[i]];
}
var typeNode = new Node(name);
typeNode.ctor = ctor;
typeNode.namespace = path.join('.');
currentNode.children[name] = typeNode;
(function () {
var pointer = this.Q = this.Q || {};
var targetNode =
path.reduce(function (pointer, name) {
pointer = pointer[name] = pointer[name] || {};
return pointer;
}, pointer);
targetNode[name] = ctor;
}).call(null);
},
search: function (namespace, name) {
namespace = namespace.split('.');
if (!name)
name = namespace.splice(-1)[0];
var ns = namespace.length > 0 ? table.findOne(namespace) : table;
var results = ns.findAll(name);
return results;
},
getType: function (namespace, name) {
namespace = namespace.split('.');
if (!name)
name = namespace.splice(-1)[0];
var ns = namespace.length > 0 ? table.findOne(namespace) : table;
if (!ns) {
throw new Error("Can't find " + name + " in " + namespace + '\n\r'+ console.log(table));
}
var results = ns.findAll(name);
//TODO add exception handling
if (results.length > 0)
return results[0].ctor;
}
};
TypeTable.registerType('Core', 'TypeTable', TypeTable);
module.exports = TypeTable;
\ No newline at end of file
Core/Variant.js
var QObject = require('./QObject'); module.exports =
QRequire('Core.QObject', function(
QObject
) {
'use strict';
var base = QObject.prototype; var base = QObject.prototype;
var Variant = QObject.extend('Core', 'Variant', { var Variant = QObject.extend('Core', 'Variant', {
_set: function (key, value) { _set: function (key, value) {
if (!this._prop[key]) if (!this._prop[key])
this._prop[key] = {}; this._prop[key] = {};
return base._set.call(this, key, value); return base._set.call(this, key, value);
} }
}); });
Variant.deserialize = function (jsonObj) { Variant.deserialize = function (jsonObj) {
if (typeof jsonObj === 'object') { if (typeof jsonObj === 'object') {
var res = new Variant(); var res = new Variant();
for (var key in jsonObj) for (var key in jsonObj)
...@@ -24,6 +28,6 @@ Variant.deserialize = function (jsonObj) { ...@@ -24,6 +28,6 @@ Variant.deserialize = function (jsonObj) {
return jsonObj; return jsonObj;
} }
}; };
return Variant;
module.exports = Variant; });
\ No newline at end of file
UI/ContentContainer.js
var UIComponent = require('./UIComponent'); module.exports =
QRequire('UI.UIComponent', function(
var ContentContainer = UIComponent.extend('UI', 'ContentContainer'); UIComponent
) {
module.exports = ContentContainer; 'use strict';
\ No newline at end of file return UIComponent.extend('UI', 'ContentContainer');
});
UI/Controls/Border.js
/** /**
* Created by ravenor on 13.07.16. * Created by ravenor on 13.07.16.
*/ */
module.exports =
QRequire('UI.UIComponent', 'UI.ContentContainer', function(
UIComponent,
ContentContainer
) {
'use strict';
var UIComponent = require('../UIComponent'); return UIComponent.extend('UI.Controls', 'Border', {
var ContentContainer = require('../ContentContainer');
module.exports = UIComponent.extend('UI.Controls', 'Border', {
ctor: function () { ctor: function () {
this._ownComponents.push(new ContentContainer()); this._ownComponents.push(new ContentContainer());
this.el.style.overflow='visible'; this.el.style.overflow = 'visible';
this._contentContainer.setAll({ this._contentContainer.setAll({
pureCss: 'position: absolute; top: 0; bottom: 0; right: 0; left: 0; width:auto; height: auto' pureCss: 'position: absolute; top: 0; bottom: 0; right: 0; left: 0; width:auto; height: auto'
}); });
...@@ -39,4 +42,5 @@ module.exports = UIComponent.extend('UI.Controls', 'Border', { ...@@ -39,4 +42,5 @@ module.exports = UIComponent.extend('UI.Controls', 'Border', {
} }
} }
} }
});
}); });
\ No newline at end of file
UI/Controls/Button.js
...@@ -2,9 +2,17 @@ ...@@ -2,9 +2,17 @@
* Created by ravenor on 13.07.16. * Created by ravenor on 13.07.16.
*/ */
var UIComponent = require('../UIComponent'); module.exports =
QRequire('UI.UIComponent', function(
module.exports = UIComponent.extend('UI.Controls', 'Button', { UIComponent
) {
'use strict';
return UIComponent.extend('UI.Controls', 'Button', {
ctor: function () {
this.set("width", "100px");
this.set("height", "30px");
this.set("value", "Button");
},
createEl: function () { createEl: function () {
var self = this; var self = this;
this.el = document.createElement('button'); this.el = document.createElement('button');
...@@ -26,48 +34,45 @@ module.exports = UIComponent.extend('UI.Controls', 'Button', { ...@@ -26,48 +34,45 @@ module.exports = UIComponent.extend('UI.Controls', 'Button', {
this.buttonText = buttonText; this.buttonText = buttonText;
}, },
_tabProtocol: function (delegate) { _tabProtocol: function (delegate) {
if(delegate) if (delegate)
return true; return true;
this.el.classList.add('Focused'); this.el.classList.add('Focused');
this.el.focus(); this.el.focus();
}, },
_tabProtocolLeave: function(){ _tabProtocolLeave: function () {
this.el.classList.remove('Focused'); this.el.classList.remove('Focused');
}, },
_prop: { _prop: {
caption: { caption: {
set: function (val) { set: function (val) {
this.buttonText.innerText = (val+'').replace(/_/g, String.fromCharCode(160)); this.buttonText.innerText = (val + '').replace(/_/g, String.fromCharCode(160));
} }
}, },
direction: { direction: {
set: function(val){ set: function (val) {
this.removeClass(this.el,'Q-UI-Button_left'); this.removeClass(this.el, 'Q-UI-Button_left');
this.removeClass(this.el,'Q-UI-Button_right'); this.removeClass(this.el, 'Q-UI-Button_right');
if(val === 'left') if (val === 'left')
this.addClass(this.el,'Q-UI-Button_left'); this.addClass(this.el, 'Q-UI-Button_left');
if(val === 'right') if (val === 'right')
this.addClass(this.el,'Q-UI-Button_right'); this.addClass(this.el, 'Q-UI-Button_right');
} }
}, },
filled: { filled: {
set: function(val){ set: function (val) {
this.removeClass(this.el,'Q-UI-Button_filled'); this.removeClass(this.el, 'Q-UI-Button_filled');
if(val === true) if (val === true)
this.addClass(this.el,'Q-UI-Button_filled'); this.addClass(this.el, 'Q-UI-Button_filled');
} }
}, },
value: 'caption' value: 'caption'
} }
}, function () { });
this.set("width", "100px"); });
this.set("height", "30px"); \ No newline at end of file
this.set("value", "Button");
});
UI/Controls/Canvas.js
...@@ -6,10 +6,11 @@ ...@@ -6,10 +6,11 @@
;// QUOKKA 2017 ;// QUOKKA 2017
// By zibx on 5/29/17. // By zibx on 5/29/17.
module.exports = (function () { module.exports =
QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict'; 'use strict';
var UIComponent = require('../UIComponent');
return UIComponent.extend('UI.Controls', 'Canvas', { return UIComponent.extend('UI.Controls', 'Canvas', {
createEl: function () { createEl: function () {
var self = this; var self = this;
...@@ -22,20 +23,24 @@ module.exports = (function () { ...@@ -22,20 +23,24 @@ module.exports = (function () {
}); });
}, },
dot: function(obj){ dot: function (obj) {
this.ctx.fillRect(obj.x-1, obj.y-1, 2, 2); this.ctx.fillRect(obj.x - 1, obj.y - 1, 2, 2);
}, },
_prop: { _prop: {
width: {set: function(val){ width: {
val+=''; set: function (val) {
if(val.indexOf('%')===-1 && val.indexOf('px')===-1) val += '';
if (val.indexOf('%') === -1 && val.indexOf('px') === -1)
this.el.width = val; this.el.width = val;
}}, }
height: {set: function(val){ },
val+=''; height: {
if(val.indexOf('%')===-1 && val.indexOf('px')===-1) set: function (val) {
val += '';
if (val.indexOf('%') === -1 && val.indexOf('px') === -1)
this.el.height = val; this.el.height = val;
}}
} }
}
}
});
}); });
\ No newline at end of file
})();
\ No newline at end of file
UI/Controls/CheckBox.js
var UIComponent = require('../UIComponent'); module.exports =
QRequire('UI.UIComponent', function(
module.exports = UIComponent.extend('UI.Controls', 'CheckBox', { UIComponent
) {
'use strict';
return UIComponent.extend('UI.Controls', 'CheckBox', {
_prop: { _prop: {
checked: { checked: {
get: function () { get: function () {
return !!this.input.checked; return !!this.input.checked;
}, },
set: function (value, flags) { set: function (value, flags) {
var newValue = value ==='false' || value === '0' ? false: value; var newValue = value === 'false' || value === '0' ? false : value;
if(newValue !== value) if (newValue !== value)
flags.value(newValue); flags.value(newValue);
this.input.checked = newValue; this.input.checked = newValue;
} }
}, },
label: { label: {
set: function(value){ set: function (value) {
this.span.innerText = value; this.span.innerText = value;
}, },
get: function(){} get: function () {
}
}, },
value: 'checked' value: 'checked'
} }
}, function () { }, function () {
var self = this; var self = this;
var label = document.createElement('label'); var label = document.createElement('label');
...@@ -39,4 +43,5 @@ module.exports = UIComponent.extend('UI.Controls', 'CheckBox', { ...@@ -39,4 +43,5 @@ module.exports = UIComponent.extend('UI.Controls', 'CheckBox', {
}); });
this.el.appendChild(label); this.el.appendChild(label);
}); });
});
\ No newline at end of file
UI/Controls/ComboBox.js
var UIComponent = require('../UIComponent'); module.exports =
QRequire('UI.UIComponent', function(
module.exports = UIComponent.extend('UI.Controls', 'ComboBox', { UIComponent
) {
'use strict';
return UIComponent.extend('UI.Controls', 'ComboBox', {
ctor: function () { ctor: function () {
}, },
createEl: function () { createEl: function () {
var _self = this; var _self = this;
/* /*
<div class="select-wrapper"> <div class="select-wrapper">
<button class="select-trigger">utc +3</button> <button class="select-trigger">utc +3</button>
</div> </div>
...@@ -29,12 +32,12 @@ module.exports = UIComponent.extend('UI.Controls', 'ComboBox', { ...@@ -29,12 +32,12 @@ module.exports = UIComponent.extend('UI.Controls', 'ComboBox', {
var title = var title =
this.titleEl = this.titleEl =
UIComponent.createElementCss('span',{},'select-options-title'); UIComponent.createElementCss('span', {}, 'select-options-title');
dropDown.appendChild(title); dropDown.appendChild(title);
var list = var list =
this.list = this.list =
UIComponent.createElementCss('ul',{},'select-options'); UIComponent.createElementCss('ul', {}, 'select-options');
dropDown.appendChild(list); dropDown.appendChild(list);
...@@ -43,45 +46,45 @@ module.exports = UIComponent.extend('UI.Controls', 'ComboBox', { ...@@ -43,45 +46,45 @@ module.exports = UIComponent.extend('UI.Controls', 'ComboBox', {
UIComponent.createElementCss('ul', { UIComponent.createElementCss('ul', {
background: 'rgba(0,0,0,0.5)', background: 'rgba(0,0,0,0.5)',
position: 'absolute', position: 'absolute',
top:'150px', top: '150px',
height: '150px' height: '150px'
},'select-options'); }, 'select-options');
dropDown.appendChild(realActive); dropDown.appendChild(realActive);
realActive.addEventListener('click', function(){ realActive.addEventListener('click', function () {
document.body.removeChild(controls); document.body.removeChild(controls);
_self.set('value',_self.items[_self.lastActive].key); _self.set('value', _self.items[_self.lastActive].key);
}); });
var activeLi = UIComponent.createElementCss('li',{},'active'); var activeLi = UIComponent.createElementCss('li', {}, 'active');
realActive.appendChild(activeLi); realActive.appendChild(activeLi);
this.lastActive = -1; this.lastActive = -1;
var setActive = function(){ var setActive = function () {
var num = Math.round(list.scrollTop/150); var num = Math.round(list.scrollTop / 150);
if(num !== _self.lastActive){ if (num !== _self.lastActive) {
if(_self.lastActive>-1) { if (_self.lastActive > -1) {
list.childNodes[_self.lastActive+1].classList.remove('active'); list.childNodes[_self.lastActive + 1].classList.remove('active');
list.childNodes[_self.lastActive+1].innerText = _self.items[_self.lastActive].val; list.childNodes[_self.lastActive + 1].innerText = _self.items[_self.lastActive].val;
} }
list.childNodes[num+1].classList.add('active'); list.childNodes[num + 1].classList.add('active');
list.childNodes[num+1].innerHTML = '&nbsp;'; list.childNodes[num + 1].innerHTML = '&nbsp;';
activeLi.innerText = _self.items[num].val; activeLi.innerText = _self.items[num].val;
_self.lastActive = num; _self.lastActive = num;
list.scrollTop = num*150; list.scrollTop = num * 150;
} }
}; };
input.addEventListener('click', function () { input.addEventListener('click', function () {
document.body.appendChild(controls); document.body.appendChild(controls);
list.scrollTop = _self.lastActive*150; list.scrollTop = _self.lastActive * 150;
}); });
setTimeout(setActive, 10); setTimeout(setActive, 10);
controls.addEventListener('wheel', function(e){ controls.addEventListener('wheel', function (e) {
if(e.deltaY>0) if (e.deltaY > 0)
list.scrollTop += 150; list.scrollTop += 150;
else else
list.scrollTop -= 150; list.scrollTop -= 150;
...@@ -93,7 +96,7 @@ module.exports = UIComponent.extend('UI.Controls', 'ComboBox', { ...@@ -93,7 +96,7 @@ module.exports = UIComponent.extend('UI.Controls', 'ComboBox', {
}); });
/* /*
this.back = UIComponent.createElementCss('div', { this.back = UIComponent.createElementCss('div', {
background: '#ddd', background: '#ddd',
height: height - pad * 2 + 'px', height: height - pad * 2 + 'px',
...@@ -137,15 +140,15 @@ module.exports = UIComponent.extend('UI.Controls', 'ComboBox', { ...@@ -137,15 +140,15 @@ module.exports = UIComponent.extend('UI.Controls', 'ComboBox', {
var list = this.list, var list = this.list,
i, arr = []; i, arr = [];
for(i in val){ for (i in val) {
arr.push({key: i, val: val[i]}); arr.push({key: i, val: val[i]});
} }
arr.sort(); arr.sort();
this.items = arr; this.items = arr;
list.innerHTML = '<li class="active">&nbsp;</li>'+arr.map(function(el){ list.innerHTML = '<li class="active">&nbsp;</li>' + arr.map(function (el) {
return '<li>'+ el.val +'</li>'; return '<li>' + el.val + '</li>';
}).join('')+'<li class="active">&nbsp;</li>'; }).join('') + '<li class="active">&nbsp;</li>';
this.itemHeight = 150; //(full-height)/(count-1) this.itemHeight = 150; //(full-height)/(count-1)
}, },
_prop: { _prop: {
...@@ -153,23 +156,23 @@ module.exports = UIComponent.extend('UI.Controls', 'ComboBox', { ...@@ -153,23 +156,23 @@ module.exports = UIComponent.extend('UI.Controls', 'ComboBox', {
_value: { _value: {
set: function (val, e) { set: function (val, e) {
this.input.innerText = (this.get('items')||{})[val]+''; this.input.innerText = (this.get('items') || {})[val] + '';
} }
}, },
items: { items: {
set: function (val, e) { set: function (val, e) {
if(typeof val === 'string'){ if (typeof val === 'string') {
try{ try {
val = (new Function('','return '+val))(); val = (new Function('', 'return ' + val))();
e.value(val); e.value(val);
this.redraw(val); this.redraw(val);
}catch(e){ } catch (e) {
console.log('Invalid JSON '+val); console.log('Invalid JSON ' + val);
} }
setTimeout(function(){ setTimeout(function () {
this.set('value', this.get('value')); this.set('value', this.get('value'));
}.bind(this),1); }.bind(this), 1);
}else{ } else {
this.redraw(val); this.redraw(val);
} }
...@@ -184,4 +187,5 @@ module.exports = UIComponent.extend('UI.Controls', 'ComboBox', { ...@@ -184,4 +187,5 @@ module.exports = UIComponent.extend('UI.Controls', 'ComboBox', {
} }
} }
}); });
});
\ No newline at end of file
UI/Controls/ContainerComponent.js
var UIComponent = require('../UIComponent'); module.exports =
QRequire('UI.UIComponent', 'observable-sequence', 'z-lib-structure-dequeue', function(
var ObservableSequence = require('observable-sequence'); UIComponent,
var dequeue = require('z-lib-structure-dequeue'); ObservableSequence,
dequeue
module.exports = UIComponent.extend('UI.Controls', 'ContainerComponent', { ) {
'use strict';
return UIComponent.extend('UI.Controls', 'ContainerComponent', {
/** /**
* *
* @param {} item * @param {} item
...@@ -75,7 +77,7 @@ module.exports = UIComponent.extend('UI.Controls', 'ContainerComponent', { ...@@ -75,7 +77,7 @@ module.exports = UIComponent.extend('UI.Controls', 'ContainerComponent', {
_rebuildChildren: function (items) { _rebuildChildren: function (items) {
var self = this; var self = this;
var children = this._contentContainer ? this._contentContainer._children : this._children; var children = this._contentContainer ? this._contentContainer._children : this._children;
while(children.length) while (children.length)
children.pop(); children.pop();
if (items) { if (items) {
...@@ -105,12 +107,12 @@ module.exports = UIComponent.extend('UI.Controls', 'ContainerComponent', { ...@@ -105,12 +107,12 @@ module.exports = UIComponent.extend('UI.Controls', 'ContainerComponent', {
var val = value; var val = value;
if (!(value instanceof ObservableSequence) && value) { if (!(value instanceof ObservableSequence) && value) {
if(e.oldValue instanceof ObservableSequence){ if (e.oldValue instanceof ObservableSequence) {
value = e.oldValue; value = e.oldValue;
while(value.length) while (value.length)
value.pop(); value.pop();
}else { } else {
value = new ObservableSequence(new dequeue()); value = new ObservableSequence(new dequeue());
value.on('add', this._itemAddEventHandler.bind(this)); value.on('add', this._itemAddEventHandler.bind(this));
...@@ -143,4 +145,5 @@ module.exports = UIComponent.extend('UI.Controls', 'ContainerComponent', { ...@@ -143,4 +145,5 @@ module.exports = UIComponent.extend('UI.Controls', 'ContainerComponent', {
} }
} }
} }
}); });
\ No newline at end of file });
\ No newline at end of file
UI/Controls/FlexSizeComponent.js
var UIComponent = require('../UIComponent'); module.exports =
QRequire('UI.UIComponent', 'UI.ContentContainer', function(
module.exports = UIComponent.extend('UI.Controls', 'FlexSizeComponent', { UIComponent,
ContentContainer
) {
'use strict';
return UIComponent.extend('UI.Controls', 'FlexSizeComponent', {
_prop: { _prop: {
value: 'flexDefenition', value: 'flexDefenition',
flexDefinition: { flexDefinition: {
...@@ -39,4 +44,5 @@ module.exports = UIComponent.extend('UI.Controls', 'FlexSizeComponent', { ...@@ -39,4 +44,5 @@ module.exports = UIComponent.extend('UI.Controls', 'FlexSizeComponent', {
} }
} }
} }
}); });
\ No newline at end of file });
\ No newline at end of file
UI/Controls/GeoMap.js
...@@ -2,9 +2,14 @@ ...@@ -2,9 +2,14 @@
* Created by ravenor on 13.07.16. * Created by ravenor on 13.07.16.
*/ */
var UIComponent = require('../UIComponent'); module.exports =
QRequire('UI.UIComponent', 'UI.ContentContainer', function(
module.exports = UIComponent.extend('UI.Controls', 'GeoMap', { UIComponent,
ContentContainer
) {
'use strict';
return UIComponent.extend('UI.Controls', 'GeoMap', {
createEl: function () { createEl: function () {
var self = this; var self = this;
...@@ -186,4 +191,5 @@ module.exports = UIComponent.extend('UI.Controls', 'GeoMap', { ...@@ -186,4 +191,5 @@ module.exports = UIComponent.extend('UI.Controls', 'GeoMap', {
value: 'center' value: 'center'
} }
}); });
});
\ No newline at end of file
UI/Controls/GovnoControl.js
var UIComponent = require('../UIComponent'); module.exports =
QRequire('UI.UIComponent', 'UI.ContentContainer', function(
UIComponent,
ContentContainer
) {
'use strict';
module.exports = UIComponent.extend('UI.Controls', 'GovnoControl', { return UIComponent.extend('UI.Controls', 'GovnoControl', {
createEl: function () { createEl: function () {
var self = this; var self = this;
this.el = document.createElement('div'); this.el = document.createElement('div');
...@@ -38,4 +43,5 @@ module.exports = UIComponent.extend('UI.Controls', 'GovnoControl', { ...@@ -38,4 +43,5 @@ module.exports = UIComponent.extend('UI.Controls', 'GovnoControl', {
} }
} }
} }
}); });
\ No newline at end of file });
\ No newline at end of file
UI/Controls/Grid.js
var UIComponent = require('../UIComponent'); module.exports =
var Border = require('./Border'); QRequire('UI.UIComponent', 'UI.Border', function(
UIComponent,
Border
) {
'use strict';
var propNames = ['width', 'height', 'top', 'left'];
var base = Border.prototype; var propNames = ['width', 'height', 'top', 'left'];
module.exports = Border.extend('UI.Controls', 'Grid', { var base = Border.prototype;
return Border.extend('UI.Controls', 'Grid', {
ctor: function () { ctor: function () {
this._cache = {}; this._cache = {};
this.setAll({ this.setAll({
...@@ -62,4 +67,5 @@ module.exports = Border.extend('UI.Controls', 'Grid', { ...@@ -62,4 +67,5 @@ module.exports = Border.extend('UI.Controls', 'Grid', {
rows: {}, rows: {},
columns: {}, columns: {},
} }
}); });
\ No newline at end of file });
\ No newline at end of file
UI/Controls/HBox.js
var UIComponent = require('../UIComponent'); module.exports =
var FlexSizeComponent = require('./FlexSizeComponent'); QRequire('UI.UIComponent', 'UI.Border','UI.FlexSizeComponent', function(
var Border = require('./Border'); UIComponent,
Border,
module.exports = FlexSizeComponent.extend('UI.Controls', 'HBox', { FlexSizeComponent
) {
'use strict';
return FlexSizeComponent.extend('UI.Controls', 'HBox', {
ctor: function () { ctor: function () {
this.set('height', '100%'); this.set('height', '100%');
}, },
...@@ -54,4 +57,5 @@ module.exports = FlexSizeComponent.extend('UI.Controls', 'HBox', { ...@@ -54,4 +57,5 @@ module.exports = FlexSizeComponent.extend('UI.Controls', 'HBox', {
this.updateLayout(); this.updateLayout();
} }
});
}); });
\ No newline at end of file
UI/Controls/Header.js
...@@ -2,10 +2,14 @@ ...@@ -2,10 +2,14 @@
* Created by ravenor on 13.07.16. * Created by ravenor on 13.07.16.
*/ */
var Label = require('./Label'); QRequire('UI.Label', function(
Label
) {
'use strict';
module.exports = Label.extend('UI.Controls', 'Header', { return Label.extend('UI.Controls', 'Header', {
ctor: function () { ctor: function () {
this.set("fontSize", '36px'); this.set("fontSize", '36px');
} }
});
}); });
\ No newline at end of file
UI/Controls/IFrame.js
var UIComponent = require('../UIComponent'); QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
module.exports = UIComponent.extend('UI.Controls', 'IFrame', { return UIComponent.extend('UI.Controls', 'IFrame', {
createEl: function () { createEl: function () {
this.el = document.createElement('iframe'); this.el = document.createElement('iframe');
}, },
...@@ -12,4 +15,5 @@ module.exports = UIComponent.extend('UI.Controls', 'IFrame', { ...@@ -12,4 +15,5 @@ module.exports = UIComponent.extend('UI.Controls', 'IFrame', {
} }
} }
} }
});
}); });
\ No newline at end of file
UI/Controls/Image.js
var UIComponent = require('../UIComponent'); QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
module.exports = UIComponent.extend('UI.Controls', 'Image', { return UIComponent.extend('UI.Controls', 'Image', {
createEl: function () { createEl: function () {
this.el = document.createElement('div'); this.el = document.createElement('div');
this.elStyle = this.el.style; this.elStyle = this.el.style;
...@@ -35,4 +38,5 @@ module.exports = UIComponent.extend('UI.Controls', 'Image', { ...@@ -35,4 +38,5 @@ module.exports = UIComponent.extend('UI.Controls', 'Image', {
} }
}, },
} }
});
}); });
\ No newline at end of file
UI/Controls/ItemTemplate.js
var UIComponent = require('./../UIComponent'); QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
module.exports = UIComponent.extend('UI.Controls', 'ItemTemplate', { return UIComponent.extend('UI.Controls', 'ItemTemplate', {
ctor: function () { ctor: function () {
var self = this; var self = this;
this.el.addEventListener('click', function (e) { this.el.addEventListener('click', function (e) {
...@@ -11,4 +14,5 @@ module.exports = UIComponent.extend('UI.Controls', 'ItemTemplate', { ...@@ -11,4 +14,5 @@ module.exports = UIComponent.extend('UI.Controls', 'ItemTemplate', {
value: '_value', value: '_value',
_value: {} _value: {}
} }
});
}); });
\ No newline at end of file
UI/Controls/Keyboard.js
...@@ -6,21 +6,24 @@ ...@@ -6,21 +6,24 @@
;// QUOKKA 2017 ;// QUOKKA 2017
// By zibx on 5/23/17. // By zibx on 5/23/17.
module.exports = (function () { QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict'; 'use strict';
var layouts = { var layouts = {
none: [], none: [],
'ru': [ 'ru': [
['йцукенгшщзхъ'], ['йцукенгшщзхъ'],
['фывапролджэ'], ['фывапролджэ'],
['ячсмитьбю', {"text":"", "cls": "del", action: 'backspace'}], ['ячсмитьбю', {"text": "", "cls": "del", action: 'backspace'}],
[{"text":" ", "value": " ", "width": "408", "cls": "space"}] [{"text": " ", "value": " ", "width": "408", "cls": "space"}]
], ],
'en': [ 'en': [
['qwertyuiop'], ['qwertyuiop'],
['asdfghjkl'], ['asdfghjkl'],
['zxcvbnm', {"text":"", "cls": "del", action: 'backspace'}], ['zxcvbnm', {"text": "", "cls": "del", action: 'backspace'}],
[{"text":" ", "value": " ", "width": "408", "cls": "space"}] [{"text": " ", "value": " ", "width": "408", "cls": "space"}]
] ]
}; };
var big = function (name) { var big = function (name) {
...@@ -29,7 +32,7 @@ module.exports = (function () { ...@@ -29,7 +32,7 @@ module.exports = (function () {
newLayout = layout.map(function (row) { newLayout = layout.map(function (row) {
return row.map(function (item) { return row.map(function (item) {
if(typeof item === 'string') if (typeof item === 'string')
return item.toUpperCase(); return item.toUpperCase();
else else
return item; return item;
...@@ -41,7 +44,6 @@ module.exports = (function () { ...@@ -41,7 +44,6 @@ module.exports = (function () {
big('ru'); big('ru');
big('en'); big('en');
var UIComponent = require('../UIComponent');
var counter = 0; var counter = 0;
var keyStorage = {}; var keyStorage = {};
var Key = function (cfg) { var Key = function (cfg) {
...@@ -49,10 +51,12 @@ module.exports = (function () { ...@@ -49,10 +51,12 @@ module.exports = (function () {
this.el = document.createElement('div'); this.el = document.createElement('div');
this.el.innerText = this.text; this.el.innerText = this.text;
var cls = ['']; var cls = [''];
if(cfg.cls) if (cfg.cls)
cls = cls.concat(cfg.cls); cls = cls.concat(cfg.cls);
this.el.className = cls.map(function(name){return 'kb-btn'+(name?'--'+name:'')}).join(' '); this.el.className = cls.map(function (name) {
return 'kb-btn' + (name ? '--' + name : '')
}).join(' ');
this.id = counter; this.id = counter;
this.el.setAttribute('data-val', this.id); this.el.setAttribute('data-val', this.id);
counter++; counter++;
...@@ -70,23 +74,23 @@ module.exports = (function () { ...@@ -70,23 +74,23 @@ module.exports = (function () {
return new Key({text: cfg, value: cfg}); return new Key({text: cfg, value: cfg});
}; };
return UIComponent.extend('UI.Controls', 'Keyboard', { return UIComponent.extend('UI.Controls', 'Keyboard', {
_tabProtocol: function(delegate){ _tabProtocol: function (delegate) {
if(delegate){ if (delegate) {
this.delegate = delegate; this.delegate = delegate;
var _self = this; var _self = this;
delegate.layout = function(val){ delegate.layout = function (val) {
_self.set('layout', val); _self.set('layout', val);
}; };
return false; return false;
}else{ } else {
this.delegate.skip(); this.delegate.skip();
} }
}, },
ctor: function(){ ctor: function () {
var origin, var origin,
_self = this; _self = this;
var currentKey; var currentKey;
var up = function(e){ var up = function (e) {
window.removeEventListener('mouseup', up); window.removeEventListener('mouseup', up);
/*if(e.target === origin){ /*if(e.target === origin){
...@@ -94,17 +98,17 @@ module.exports = (function () { ...@@ -94,17 +98,17 @@ module.exports = (function () {
var val = origin.getAttribute('data-val'), var val = origin.getAttribute('data-val'),
key = keyStorage[val]; key = keyStorage[val];
currentKey.el.classList.remove('Over'); currentKey.el.classList.remove('Over');
if(key === currentKey){ if (key === currentKey) {
_self.delegate.send({e: e, key: key.text, action: key.action}); _self.delegate.send({e: e, key: key.text, action: key.action});
console.log(key) console.log(key)
} }
e.preventDefault(); e.preventDefault();
}; };
this.el.addEventListener('mousedown', function(e){ this.el.addEventListener('mousedown', function (e) {
origin = e.target; origin = e.target;
var val = origin.getAttribute('data-val'); var val = origin.getAttribute('data-val');
if(val) { if (val) {
currentKey = keyStorage[val]; currentKey = keyStorage[val];
currentKey.el.classList.add('Over'); currentKey.el.classList.add('Over');
} }
...@@ -112,34 +116,34 @@ module.exports = (function () { ...@@ -112,34 +116,34 @@ module.exports = (function () {
window.addEventListener('mouseup', up); window.addEventListener('mouseup', up);
}); });
window.addEventListener('keydown', function(e){ window.addEventListener('keydown', function (e) {
console.log(e.key, e.key.length,e.which,e); console.log(e.key, e.key.length, e.which, e);
if(e.which === 9) { if (e.which === 9) {
if(e.shiftKey){ if (e.shiftKey) {
_self.delegate.prev(); _self.delegate.prev();
}else { } else {
_self.delegate.next(); _self.delegate.next();
} }
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
}); });
window.addEventListener('keypress', function(e){ window.addEventListener('keypress', function (e) {
_self.delegate.send({e: e, key: e.key}); _self.delegate.send({e: e, key: e.key});
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}); });
}, },
lastLayoutName: void 0, lastLayoutName: void 0,
changeLayout: function(){ changeLayout: function () {
var lastLayoutName = this.lastLayoutName, var lastLayoutName = this.lastLayoutName,
layoutName = this.get('layout'), layoutName = this.get('layout'),
layoutConfig, rows, layout; layoutConfig, rows, layout;
if(lastLayoutName === layoutName) if (lastLayoutName === layoutName)
return; return;
if(!layoutsCache[layoutName]){ // if not cached if (!layoutsCache[layoutName]) { // if not cached
layoutConfig = layouts[layoutName]; // get config layoutConfig = layouts[layoutName]; // get config
...@@ -176,12 +180,12 @@ module.exports = (function () { ...@@ -176,12 +180,12 @@ module.exports = (function () {
rows.forEach(function (row) { // add rows elements to layout element rows.forEach(function (row) { // add rows elements to layout element
layout.el.appendChild(row.el); layout.el.appendChild(row.el);
}); });
}else{ } else {
layout = layoutsCache[layoutName]; layout = layoutsCache[layoutName];
} }
this.el.appendChild(layout.el); this.el.appendChild(layout.el);
if(lastLayoutName){ if (lastLayoutName) {
this.el.removeChild(layoutsCache[lastLayoutName].el); this.el.removeChild(layoutsCache[lastLayoutName].el);
} }
...@@ -189,10 +193,10 @@ module.exports = (function () { ...@@ -189,10 +193,10 @@ module.exports = (function () {
}, },
_prop: { _prop: {
layout: { layout: {
set: function(value, e){ set: function (value, e) {
if(!layouts[value]){ if (!layouts[value]) {
value = e.oldValue; value = e.oldValue;
console.log('Incorrect keyboard layout `'+ value +'`, switched back to `'+ e.oldValue +'`'); console.log('Incorrect keyboard layout `' + value + '`, switched back to `' + e.oldValue + '`');
} }
e.value(value); e.value(value);
this.changeLayout(); this.changeLayout();
...@@ -200,4 +204,4 @@ module.exports = (function () { ...@@ -200,4 +204,4 @@ module.exports = (function () {
} }
} }
}); });
})(); });
\ No newline at end of file \ No newline at end of file
UI/Controls/Label.js
...@@ -2,9 +2,18 @@ ...@@ -2,9 +2,18 @@
* Created by ravenor on 13.07.16. * Created by ravenor on 13.07.16.
*/ */
var UIComponent = require('../UIComponent'); module.exports =
QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
module.exports = UIComponent.extend('UI.Controls', 'Label', { return UIComponent.extend('UI.Controls', 'Label', {
ctor: function () {
this.set("width", "auto");
this.set("height", "auto");
this.set("pureCss", 'overflow: visible');
},
_prop: { _prop: {
value: 'text', value: 'text',
text: { text: {
...@@ -14,8 +23,5 @@ module.exports = UIComponent.extend('UI.Controls', 'Label', { ...@@ -14,8 +23,5 @@ module.exports = UIComponent.extend('UI.Controls', 'Label', {
} }
} }
} }
}, function () { });
this.set("width", "auto"); });
this.set("height", "auto"); \ No newline at end of file
this.set("pureCss", 'overflow: visible');
});
\ No newline at end of file
UI/Controls/ListBox.js
var UIComponent = require('../UIComponent'); QRequire('UI.UIComponent', 'UI.ContainerComponent', function(
var ContainerComponent = require('./ContainerComponent'); UIComponent,
ContainerComponent
) {
'use strict';
var base = UIComponent.prototype; var base = UIComponent.prototype;
module.exports = ContainerComponent.extend('UI.Controls', 'ListBox', { return ContainerComponent.extend('UI.Controls', 'ListBox', {
ctor: function () { ctor: function () {
this.setAll({ this.setAll({
scroll: 'vertical', scroll: 'vertical',
...@@ -52,4 +55,5 @@ module.exports = ContainerComponent.extend('UI.Controls', 'ListBox', { ...@@ -52,4 +55,5 @@ module.exports = ContainerComponent.extend('UI.Controls', 'ListBox', {
} }
} }
} }
});
}); });
\ No newline at end of file
UI/Controls/QS.js
/** /**
* Created by zibx on 5/9/17. * Created by zibx on 5/9/17.
*/ */
var UIComponent = require('../UIComponent'); QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
module.exports = UIComponent.extend('UI.Controls', 'TextArea', { return UIComponent.extend('UI.Controls', 'TextArea', {
_prop: { _prop: {
value: 'text', value: 'text',
text: { text: {
...@@ -44,7 +47,7 @@ module.exports = UIComponent.extend('UI.Controls', 'TextArea', { ...@@ -44,7 +47,7 @@ module.exports = UIComponent.extend('UI.Controls', 'TextArea', {
} }
} }
} }
}, function () { }, function () {
var self = this; var self = this;
var input = document.createElement('textarea'); var input = document.createElement('textarea');
this.el.className = 'Q-UI-TextArea'; this.el.className = 'Q-UI-TextArea';
...@@ -67,4 +70,5 @@ module.exports = UIComponent.extend('UI.Controls', 'TextArea', { ...@@ -67,4 +70,5 @@ module.exports = UIComponent.extend('UI.Controls', 'TextArea', {
self.set('width', '400px'); self.set('width', '400px');
self.set('height', '400px'); self.set('height', '400px');
});
}); });
\ No newline at end of file
UI/Controls/Slider.js
var UIComponent = require('../UIComponent'); QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
var height = 20; var height = 20;
var pad = height / 8; var pad = height / 8;
module.exports = UIComponent.extend('UI.Controls', 'Slider', { return UIComponent.extend('UI.Controls', 'Slider', {
ctor: function () { ctor: function () {
this.set('from', 0); this.set('from', 0);
this.set('to', 100); this.set('to', 100);
...@@ -15,7 +18,7 @@ module.exports = UIComponent.extend('UI.Controls', 'Slider', { ...@@ -15,7 +18,7 @@ module.exports = UIComponent.extend('UI.Controls', 'Slider', {
var el = this.el = UIComponent.createElementCss('div', { var el = this.el = UIComponent.createElementCss('div', {
position: 'relative', position: 'relative',
height: height + 'px', height: height + 'px',
minHeight: height +'px' minHeight: height + 'px'
}); });
this.el.draggable = false; this.el.draggable = false;
...@@ -164,4 +167,5 @@ module.exports = UIComponent.extend('UI.Controls', 'Slider', { ...@@ -164,4 +167,5 @@ module.exports = UIComponent.extend('UI.Controls', 'Slider', {
} }
} }
});
}); });
\ No newline at end of file
UI/Controls/TextArea.js
var UIComponent = require('../UIComponent'); QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
module.exports = UIComponent.extend('UI.Controls', 'TextArea', { return UIComponent.extend('UI.Controls', 'TextArea', {
_prop: { _prop: {
value: 'text', value: 'text',
text: { text: {
...@@ -41,7 +44,7 @@ module.exports = UIComponent.extend('UI.Controls', 'TextArea', { ...@@ -41,7 +44,7 @@ module.exports = UIComponent.extend('UI.Controls', 'TextArea', {
} }
} }
} }
}, function () { }, function () {
var self = this; var self = this;
var input = document.createElement('textarea'); var input = document.createElement('textarea');
this.el.className = 'Q-UI-TextArea'; this.el.className = 'Q-UI-TextArea';
...@@ -64,4 +67,6 @@ module.exports = UIComponent.extend('UI.Controls', 'TextArea', { ...@@ -64,4 +67,6 @@ module.exports = UIComponent.extend('UI.Controls', 'TextArea', {
self.set('width', '400px'); self.set('width', '400px');
self.set('height', '400px'); self.set('height', '400px');
});
}); });
\ No newline at end of file
UI/Controls/TextBox.js
var UIComponent = require('../UIComponent'); QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
module.exports = UIComponent.extend('UI.Controls', 'TextBox', { return UIComponent.extend('UI.Controls', 'TextBox', {
ctor: function () { ctor: function () {
var self = this; var self = this;
var input = document.createElement('input'); var input = document.createElement('input');
...@@ -24,31 +27,31 @@ module.exports = UIComponent.extend('UI.Controls', 'TextBox', { ...@@ -24,31 +27,31 @@ module.exports = UIComponent.extend('UI.Controls', 'TextBox', {
this.set('padding', '0 40px'); this.set('padding', '0 40px');
this.on('click', function(){ this.on('click', function () {
self.delegate.activate(self); self.delegate.activate(self);
}); });
}, },
_tabProtocolReceive: function(info){ _tabProtocolReceive: function (info) {
if(info.action === 'backspace'){ if (info.action === 'backspace') {
this.input.value = this.input.value.substr(0,this.input.value.length-1); this.input.value = this.input.value.substr(0, this.input.value.length - 1);
}else } else
this.input.value += info.key; this.input.value += info.key;
}, },
_tabProtocol: function (delegate) { _tabProtocol: function (delegate) {
if(delegate) { if (delegate) {
this.delegate = delegate; this.delegate = delegate;
return true; return true;
} }
this.el.classList.add('Focused'); this.el.classList.add('Focused');
var input = this.input; var input = this.input;
setTimeout(function(){ setTimeout(function () {
input.focus(); input.focus();
},5); }, 5);
this.delegate.layout && this.delegate.layout(this.get('layout')); this.delegate.layout && this.delegate.layout(this.get('layout'));
}, },
_tabProtocolLeave: function(){ _tabProtocolLeave: function () {
this.el.classList.remove('Focused'); this.el.classList.remove('Focused');
this.delegate.layout && this.delegate.layout('none'); this.delegate.layout && this.delegate.layout('none');
}, },
...@@ -80,21 +83,22 @@ module.exports = UIComponent.extend('UI.Controls', 'TextBox', { ...@@ -80,21 +83,22 @@ module.exports = UIComponent.extend('UI.Controls', 'TextBox', {
}, },
label: { label: {
set: function(val){ set: function (val) {
this.label.innerText = val; this.label.innerText = val;
} }
}, },
focused: { focused: {
set: function(val){ set: function (val) {
this.removeClass(this.el,'Q-UI-TextBox_focused'); this.removeClass(this.el, 'Q-UI-TextBox_focused');
if(val === true) if (val === true)
this.addClass(this.el,'Q-UI-TextBox_focused'); this.addClass(this.el, 'Q-UI-TextBox_focused');
} }
} }
} }
});
}); });
\ No newline at end of file
UI/Controls/VBox.js
var UIComponent = require('../UIComponent'); module.exports =
var FlexSizeComponent = require('./FlexSizeComponent'); QRequire('UI.UIComponent', 'UI.Border','UI.FlexSizeComponent', function(
var Border = require('./Border'); UIComponent,
Border,
module.exports = FlexSizeComponent.extend('UI.Controls', 'VBox', { FlexSizeComponent
) {
'use strict';
return FlexSizeComponent.extend('UI.Controls', 'VBox', {
ctor: function () { ctor: function () {
this.set('height', '100%'); this.set('height', '100%');
}, },
...@@ -50,4 +53,5 @@ module.exports = FlexSizeComponent.extend('UI.Controls', 'VBox', { ...@@ -50,4 +53,5 @@ module.exports = FlexSizeComponent.extend('UI.Controls', 'VBox', {
this.updateLayout(); this.updateLayout();
} }
}); });
\ No newline at end of file });
\ No newline at end of file
UI/Controls/Video.js
var UIComponent = require('../UIComponent'); QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
module.exports = UIComponent.extend('UI.Controls', 'Video', { return UIComponent.extend('UI.Controls', 'Video', {
updateLayout: function () { updateLayout: function () {
this.set('value', this.get('value')); this.set('value', this.get('value'));
}, },
...@@ -121,4 +124,5 @@ module.exports = UIComponent.extend('UI.Controls', 'Video', { ...@@ -121,4 +124,5 @@ module.exports = UIComponent.extend('UI.Controls', 'Video', {
} }
} }
} }
});
}); });
\ No newline at end of file
UI/Controls/WrapPanel.js
var UIComponent = require('../UIComponent'); QRequire('UI.UIComponent', 'UI.ContainerComponent', function(
var ContainerComponent = require('./ContainerComponent'); UIComponent
) {
'use strict';
var base = UIComponent.prototype; var base = UIComponent.prototype;
module.exports = ContainerComponent.extend('UI.Controls', 'WrapPanel', { return ContainerComponent.extend('UI.Controls', 'WrapPanel', {
updateLayout: function () { updateLayout: function () {
var self = this; var self = this;
...@@ -40,4 +42,5 @@ module.exports = ContainerComponent.extend('UI.Controls', 'WrapPanel', { ...@@ -40,4 +42,5 @@ module.exports = ContainerComponent.extend('UI.Controls', 'WrapPanel', {
} }
} }
} }
});
}); });
\ No newline at end of file
UI/HTML/Primitives.js
/** /**
* Created by zibx on 5/6/17. * Created by zibx on 5/6/17.
*/ */
var UIComponent = require('../UIComponent'); module.exports =
var ContentContainer = require('../ContentContainer'); QRequire('UI.UIComponent', function(
var dict = {}; UIComponent
('button,canvas,center,div,' + ) {
'h1,h2,h3,h4,h5,h6,' + 'use strict';
'li,ol,span,sub,sup,' +
'table,tbody,td,th,thead,tr,marquee') return ('button,canvas,center,div,' +
'h1,h2,h3,h4,h5,h6,' +
'li,ol,span,sub,sup,' +
'table,tbody,td,th,thead,tr,marquee')
.split(',') .split(',')
.forEach(function (name) { .map(function (name) {
dict[name] = UIComponent.extend('UI.HTML', name, { return UIComponent.extend('UI.HTML', name, {
ctor: function () { ctor: function () {
//this._ownComponents.push(new ContentContainer());
this.el = document.createElement(name); this.el = document.createElement(name);
this.el.classList.add(this.baseCls); this.el.classList.add(this.baseCls);
}, },
...@@ -20,12 +22,6 @@ var dict = {}; ...@@ -20,12 +22,6 @@ var dict = {};
value: 'text', value: 'text',
text: { text: {
set: function (val) { set: function (val) {
//if (!this.textNode) {
// this.textNode = new exports['textNode'];
// this._ownComponents.push(this.textNode);
//}
//this.textNode.set('value', val);
if (!this.textNode) { if (!this.textNode) {
this.textNode = document.createTextNode(''); this.textNode = document.createTextNode('');
this.el.appendChild(this.textNode); this.el.appendChild(this.textNode);
...@@ -35,7 +31,7 @@ var dict = {}; ...@@ -35,7 +31,7 @@ var dict = {};
} }
}, },
html: { html: {
set: function(val){ set: function (val) {
this.el.innerHTML = val; this.el.innerHTML = val;
} }
} }
...@@ -44,4 +40,4 @@ var dict = {}; ...@@ -44,4 +40,4 @@ var dict = {};
}); });
module.exports = dict; });
\ No newline at end of file \ No newline at end of file
UI/HTML/SVG.js
...@@ -5,19 +5,17 @@ ...@@ -5,19 +5,17 @@
*/ */
;// QUOKKA 2017 ;// QUOKKA 2017
// By zibx on 5/22/17. // By zibx on 5/22/17.
module.exports =
QRequire('UI.UIComponent', 'Core.QObject', function(
UIComponent,
QObject
) {
'use strict';
module.exports = (function () {
var UIComponent = require('../UIComponent');
var svgNS = 'http://www.w3.org/2000/svg'; var svgNS = 'http://www.w3.org/2000/svg';
var TypeTable =
typeof Q != "undefined"
? Q.Core.TypeTable
: require("../../Core/TypeTable");
var QObject = TypeTable.getType('Core', "QObject");
return UIComponent.extend('UI.Controls', 'SVG', { return UIComponent.extend('UI.Controls', 'SVG', {
ctor: function(){ ctor: function () {
var self = this; var self = this;
var buttonSVG = this.svg = document.createElementNS(svgNS, 'svg'); var buttonSVG = this.svg = document.createElementNS(svgNS, 'svg');
...@@ -34,20 +32,20 @@ module.exports = (function () { ...@@ -34,20 +32,20 @@ module.exports = (function () {
this.el.addEventListener('click', function (event) { this.el.addEventListener('click', function (event) {
self.fire('click', event); self.fire('click', event);
}); });
var private = new QObject({added: false}); var _private = new QObject({added: false});
this.on('drawed', function(){ this.on('drawed', function () {
private.set(['added'], true); _private.set(['added'], true);
}); });
new Pipe( new Pipe(
this.ref('viewBox'), this.ref('viewBox'),
this.ref('path'), this.ref('path'),
private.ref('added'), _private.ref('added'),
this.recalculate.bind(this) this.recalculate.bind(this)
); );
this.pathsCache = {} this.pathsCache = {}
}, },
recalculate: function(vb, paths, added){ recalculate: function (vb, paths, added) {
if(vb && paths && added){ if (vb && paths && added) {
!Array.isArray(paths) && (paths = [paths]); !Array.isArray(paths) && (paths = [paths]);
var cache = this.pathsCache; var cache = this.pathsCache;
var used = {}, var used = {},
...@@ -59,16 +57,16 @@ module.exports = (function () { ...@@ -59,16 +57,16 @@ module.exports = (function () {
}, },
vbs = vb.split(' ').map(Number); vbs = vb.split(' ').map(Number);
vbs = {left: vbs[0], top: vbs[1], right: vbs[2], bottom: vbs[3], dx: 0, dy: 0}; vbs = {left: vbs[0], top: vbs[1], right: vbs[2], bottom: vbs[3], dx: 0, dy: 0};
vbs.dx = vbs.right-vbs.left; vbs.dx = vbs.right - vbs.left;
vbs.dy = vbs.bottom-vbs.top; vbs.dy = vbs.bottom - vbs.top;
paths.forEach(function(path){ paths.forEach(function (path) {
var s = false; var s = false;
path = path.replace(/([0-9]+(\.[0-9]+)?)/g, function(a, val){ path = path.replace(/([0-9]+(\.[0-9]+)?)/g, function (a, val) {
s = !s; s = !s;
return (val - vbs[s?'left':'top'])/vbs[s?'dx':'dy']*clientSize[s?'dx':'dy']; return (val - vbs[s ? 'left' : 'top']) / vbs[s ? 'dx' : 'dy'] * clientSize[s ? 'dx' : 'dy'];
}); });
if(!(path in cache)) { if (!(path in cache)) {
var p = cache[path] = document.createElementNS(svgNS, 'path'); var p = cache[path] = document.createElementNS(svgNS, 'path');
p.setAttributeNS(null, 'd', path); p.setAttributeNS(null, 'd', path);
svg.appendChild(p); svg.appendChild(p);
...@@ -76,8 +74,8 @@ module.exports = (function () { ...@@ -76,8 +74,8 @@ module.exports = (function () {
used[path] = true; used[path] = true;
}); });
for(var i in cache){ for (var i in cache) {
if(!(i in used)){ if (!(i in used)) {
svg.removeChild(cache[i]); svg.removeChild(cache[i]);
delete cache[i]; delete cache[i];
} }
...@@ -90,7 +88,7 @@ module.exports = (function () { ...@@ -90,7 +88,7 @@ module.exports = (function () {
value: 'caption', value: 'caption',
caption: { caption: {
set: function (val) { set: function (val) {
this.buttonText.innerText = (val+'').replace(/_/g, String.fromCharCode(160)); this.buttonText.innerText = (val + '').replace(/_/g, String.fromCharCode(160));
} }
}, },
viewBox: {}, viewBox: {},
...@@ -98,4 +96,4 @@ module.exports = (function () { ...@@ -98,4 +96,4 @@ module.exports = (function () {
} }
}); });
})(); });
\ No newline at end of file \ No newline at end of file
UI/Navigation/AbstractAnimation.js
var TypeTable = module.exports = QRequire('Core.QObject', function(
typeof Q != "undefined" QObject
? Q.Core.TypeTable ) {
: require("../../Core/TypeTable"); 'use strict';
var QObject = TypeTable.getType('Core', "QObject"); return QObject.extend('UI.Navigation', 'AbstractAnimation', {
var AbstractAnimation = QObject.extend('UI.Navigation', 'AbstractAnimation', {
ctor: function () { ctor: function () {
this.set('duration', 300); this.set('duration', 300);
this.set('startCss', ''); this.set('startCss', '');
...@@ -38,6 +36,5 @@ var AbstractAnimation = QObject.extend('UI.Navigation', 'AbstractAnimation', { ...@@ -38,6 +36,5 @@ var AbstractAnimation = QObject.extend('UI.Navigation', 'AbstractAnimation', {
startCss: {}, startCss: {},
endCss: {} endCss: {}
} }
});
}); });
\ No newline at end of file
module.exports = AbstractAnimation;
\ No newline at end of file
UI/Navigation/NavigationManager.js
var AbstractAnimation = require('./AbstractAnimation'); module.exports = QRequire(
var SwipeInAnimation = require('./SwipeInAnimation'); 'Core.QObject',
var SwipeOutAnimation = require('./SwipeOutAnimation'); 'Navigation.AbstractAnimation',
'Navigation.SwipeInAnimation',
var ScaleInAnimation = require('./ScaleInAnimation'); 'Navigation.SwipeOutAnimation',
'Navigation.ScaleInAnimation',
var TypeTable = function(
typeof Q != "undefined" QObject,
? Q.Core.TypeTable AbstractAnimation,
: require("../../Core/TypeTable"); SwipeInAnimation,
SwipeOutAnimation,
var QObject = TypeTable.getType('Core', "QObject"); ScaleInAnimation
) {
function getViewport() { 'use strict';
function getViewport() {
return document.getElementById('viewport'); return document.getElementById('viewport');
} }
function webGet(url, callback) { function webGet(url, callback) {
var xmlhttp = new XMLHttpRequest(); var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', url, true); xmlhttp.open('GET', url, true);
...@@ -27,16 +29,16 @@ function webGet(url, callback) { ...@@ -27,16 +29,16 @@ function webGet(url, callback) {
} }
}; };
xmlhttp.send(null); xmlhttp.send(null);
} }
/** @class */ /** @class */
var NavigationManager = QObject.extend('UI.Navigation', 'NavigationManager', {}); var NavigationManager = QObject.extend('UI.Navigation', 'NavigationManager', {});
NavigationManager.defaultAnimation = new ScaleInAnimation(); NavigationManager.defaultAnimation = new ScaleInAnimation();
NavigationManager.applicationStack = []; NavigationManager.applicationStack = [];
NavigationManager.busy = false; NavigationManager.busy = false;
var Application = function (src, name) { var Application = function (src, name) {
this.navigationStack = []; this.navigationStack = [];
this.el = document.createElement('div'); this.el = document.createElement('div');
this.el.classList.add('Application'); this.el.classList.add('Application');
...@@ -50,9 +52,9 @@ var Application = function (src, name) { ...@@ -50,9 +52,9 @@ var Application = function (src, name) {
if (src) if (src)
this.setSource(src); this.setSource(src);
}; };
Application.prototype = { Application.prototype = {
setSource: function (src) { setSource: function (src) {
var newSrc = '(function(){'; var newSrc = '(function(){';
newSrc += src; newSrc += src;
...@@ -105,8 +107,8 @@ Application.prototype = { ...@@ -105,8 +107,8 @@ Application.prototype = {
viewport.appendChild(nextPage.el); viewport.appendChild(nextPage.el);
} }
this.navigationStack.unshift(nextPage); this.navigationStack.unshift(nextPage);
}else{ } else {
console.error('Page '+ [this.namespace, to].join('.')+' does not exists'); console.error('Page ' + [this.namespace, to].join('.') + ' does not exists');
this.busy = false; this.busy = false;
} }
}, },
...@@ -125,8 +127,8 @@ Application.prototype = { ...@@ -125,8 +127,8 @@ Application.prototype = {
var fadeOutAnim = cfg.fadeOut || currentPage.get('fadeOutAnimation') || this.fadeOutAnimation; var fadeOutAnim = cfg.fadeOut || currentPage.get('fadeOutAnimation') || this.fadeOutAnimation;
var fadeInAnim = cfg.fadeIn || backPage.get('fadeInAnimation') || this.fadeInAnimation; var fadeInAnim = cfg.fadeIn || backPage.get('fadeInAnimation') || this.fadeInAnimation;
if( typeof currentPage['~beforeDestroy'] === 'function' ){ if (typeof currentPage['~beforeDestroy'] === 'function') {
if(currentPage['~beforeDestroy']() === false) { if (currentPage['~beforeDestroy']() === false) {
getTheHellOutOfHere = true; getTheHellOutOfHere = true;
self.busy = false; self.busy = false;
return false; return false;
...@@ -148,17 +150,17 @@ Application.prototype = { ...@@ -148,17 +150,17 @@ Application.prototype = {
}); });
} }
}, },
'~destroy': function(){ '~destroy': function () {
this.navigationStack.forEach(function(page){ this.navigationStack.forEach(function (page) {
typeof page['~destroy'] === 'function' && page['~destroy'](); typeof page['~destroy'] === 'function' && page['~destroy']();
}); });
} }
} }
; ;
Application.current = void(0); Application.current = void(0);
NavigationManager.load = function (appName, cb) { NavigationManager.load = function (appName, cb) {
var app = appName; var app = appName;
if (app.slice(0, -3) !== '.qs') { if (app.slice(0, -3) !== '.qs') {
...@@ -166,7 +168,7 @@ NavigationManager.load = function (appName, cb) { ...@@ -166,7 +168,7 @@ NavigationManager.load = function (appName, cb) {
} }
webGet('/Apps/' + app, function (err, data) { webGet('/Apps/' + app, function (err, data) {
console.log(data); console.log(data);
if(cb) { if (cb) {
return cb(new Application(data, appName)); return cb(new Application(data, appName));
} }
if (NavigationManager.busy) return; if (NavigationManager.busy) return;
...@@ -191,22 +193,22 @@ NavigationManager.load = function (appName, cb) { ...@@ -191,22 +193,22 @@ NavigationManager.load = function (appName, cb) {
}); });
}); });
}; };
NavigationManager.on = Q.Core.QObject.prototype.on; NavigationManager.on = Q.Core.QObject.prototype.on;
NavigationManager.fire = Q.Core.QObject.prototype.fire; NavigationManager.fire = Q.Core.QObject.prototype.fire;
NavigationManager.eventList = {}; NavigationManager.eventList = {};
NavigationManager.navigate = function (to, cfg) { NavigationManager.navigate = function (to, cfg) {
if (NavigationManager.busy) return; if (NavigationManager.busy) return;
Application.current.navigate(to, cfg); Application.current.navigate(to, cfg);
}; };
NavigationManager.canGoBack = function () { NavigationManager.canGoBack = function () {
return NavigationManager.applicationStack.length > 1; return NavigationManager.applicationStack.length > 1;
}; };
NavigationManager.back = function (cfg) { NavigationManager.back = function (cfg) {
if (Application.current.canGoBack()) { if (Application.current.canGoBack()) {
Application.current.back(cfg); Application.current.back(cfg);
...@@ -235,7 +237,8 @@ NavigationManager.back = function (cfg) { ...@@ -235,7 +237,8 @@ NavigationManager.back = function (cfg) {
} }
} }
}; };
NavigationManager.Application = Application; NavigationManager.Application = Application;
module.exports = NavigationManager; return NavigationManager;
\ No newline at end of file });
\ No newline at end of file
UI/Navigation/ScaleInAnimation.js
var AbstractAnimation = require('./AbstractAnimation'); module.exports = QRequire(
'Navigation.AbstractAnimation',
function(
AbstractAnimation
) {
'use strict';
var TypeTable = return AbstractAnimation.extend('UI.Navigation', 'ScaleInAnimation', {
typeof Q != "undefined"
? Q.Core.TypeTable
: require("../../Core/TypeTable");
var QObject = TypeTable.getType('Core', "QObject");
module.exports = AbstractAnimation.extend('UI.Navigation', 'ScaleInAnimation', {
play: function (newPage, callback) { play: function (newPage, callback) {
newPage.el.style.transform = 'scale(0.2)'; newPage.el.style.transform = 'scale(0.2)';
...@@ -40,4 +38,5 @@ module.exports = AbstractAnimation.extend('UI.Navigation', 'ScaleInAnimation', { ...@@ -40,4 +38,5 @@ module.exports = AbstractAnimation.extend('UI.Navigation', 'ScaleInAnimation', {
callback() callback()
}, 320); }, 320);
} }
}); });
\ No newline at end of file });
\ No newline at end of file
UI/Navigation/ScaleOutAnimation.js
var AbstractAnimation = require('./AbstractAnimation'); module.exports = QRequire(
'Navigation.AbstractAnimation',
function(
AbstractAnimation
) {
'use strict';
var TypeTable = return AbstractAnimation.extend('UI.Navigation', 'ScaleInAnimation', {
typeof Q != "undefined"
? Q.Core.TypeTable
: require("../../Core/TypeTable");
var QObject = TypeTable.getType('Core', "QObject");
module.exports = AbstractAnimation.extend('UI.Navigation', 'ScaleInAnimation', {
play: function (newPage, callback) { play: function (newPage, callback) {
newPage.el.style.transform = 'scale(1)'; newPage.el.style.transform = 'scale(1)';
...@@ -37,4 +35,5 @@ module.exports = AbstractAnimation.extend('UI.Navigation', 'ScaleInAnimation', { ...@@ -37,4 +35,5 @@ module.exports = AbstractAnimation.extend('UI.Navigation', 'ScaleInAnimation', {
callback() callback()
}, 320); }, 320);
} }
}); });
\ No newline at end of file });
\ No newline at end of file
UI/Navigation/SwipeInAnimation.js
var AbstractAnimation = require('./AbstractAnimation'); module.exports = QRequire(
'Navigation.AbstractAnimation',
function(
AbstractAnimation
) {
'use strict';
var TypeTable = return AbstractAnimation.extend('UI.Navigation', 'SwipeInAnimation', {
typeof Q != "undefined"
? Q.Core.TypeTable
: require("../../Core/TypeTable");
var QObject = TypeTable.getType('Core', "QObject");
module.exports = AbstractAnimation.extend('UI.Navigation', 'SwipeInAnimation', {
play: function (newPage, callback) { play: function (newPage, callback) {
newPage.el.style.left = '100%'; newPage.el.style.left = '100%';
...@@ -37,4 +35,5 @@ module.exports = AbstractAnimation.extend('UI.Navigation', 'SwipeInAnimation', { ...@@ -37,4 +35,5 @@ module.exports = AbstractAnimation.extend('UI.Navigation', 'SwipeInAnimation', {
callback() callback()
}, 320); }, 320);
} }
}); });
\ No newline at end of file });
\ No newline at end of file
UI/Navigation/SwipeOutAnimation.js
var AbstractAnimation = require('./AbstractAnimation'); module.exports = QRequire(
'Navigation.AbstractAnimation',
function(
AbstractAnimation
) {
'use strict';
var TypeTable = return AbstractAnimation.extend('UI.Navigation', 'SwipeOutAnimation', {
typeof Q != "undefined"
? Q.Core.TypeTable
: require("../../Core/TypeTable");
var QObject = TypeTable.getType('Core', "QObject");
module.exports = AbstractAnimation.extend('UI.Navigation', 'SwipeOutAnimation', {
play: function (newPage, callback) { play: function (newPage, callback) {
newPage.el.style.left = '0%'; newPage.el.style.left = '0%';
...@@ -38,4 +36,5 @@ module.exports = AbstractAnimation.extend('UI.Navigation', 'SwipeOutAnimation', ...@@ -38,4 +36,5 @@ module.exports = AbstractAnimation.extend('UI.Navigation', 'SwipeOutAnimation',
callback() callback()
}, 320); }, 320);
} }
}); });
\ No newline at end of file });
\ No newline at end of file
UI/Page.js
var TypeTable = module.exports = QRequire('UI.UIComponent', function(
typeof Q != "undefined" UIComponent
? Q.Core.TypeTable ) {
: require("../Core/TypeTable"); 'use strict';
return UIComponent.extend('UI', 'Page', {
var UIComponent = require('./UIComponent');
module.exports = UIComponent.extend('UI', 'Page', {
load: function (parent) { load: function (parent) {
if (!parent) { if (!parent) {
this.getVieport().appendChild(this.el); this.getVieport().appendChild(this.el);
...@@ -44,3 +41,4 @@ module.exports = UIComponent.extend('UI', 'Page', { ...@@ -44,3 +41,4 @@ module.exports = UIComponent.extend('UI', 'Page', {
pureCss: "position: absolute; top:0; bottom: 0; left: 0; right: 0; background-size: cover;" pureCss: "position: absolute; top:0; bottom: 0; left: 0; right: 0; background-size: cover;"
}); });
}); });
});
\ No newline at end of file
Core/Style.js → UI/Style.js
var AbstractComponent = require('./AbstractComponent'); module.exports =
var cache = {}, QRequire('Core.AbstractComponent', function(
AbstractComponent
) {
'use strict';
var cache = {},
cssCache = {}, cssCache = {},
style; style;
var Style = AbstractComponent.extend('Core', 'Style', { var Style = AbstractComponent.extend('UI', 'Style', {
_anything: true, _anything: true,
_onChildAdd: function (child) { _onChildAdd: function (child) {
...@@ -19,35 +23,37 @@ var Style = AbstractComponent.extend('Core', 'Style', { ...@@ -19,35 +23,37 @@ var Style = AbstractComponent.extend('Core', 'Style', {
} }
var cls = cache[key] || (cache[key] = this.getBaseCls(key)); var cls = cache[key] || (cache[key] = this.getBaseCls(key));
if(!cssCache[cls]) if (!cssCache[cls])
cssCache[cls] = {}; cssCache[cls] = {};
this.setCss(cls, cssCache[cls], value); this.setCss(cls, cssCache[cls], value);
}, },
addRule: function (cls, style) { addRule: function (cls, style) {
var id, rule; var id, rule;
if(!(style.sheet||{}).insertRule) { if (!(style.sheet || {}).insertRule) {
id = (style.styleSheet || style.sheet).addRule(cls, ''); id = (style.styleSheet || style.sheet).addRule(cls, '');
}else { } else {
id = style.sheet.insertRule(cls + "{}"); id = style.sheet.insertRule(cls + "{}");
} }
return (style.styleSheet || style.sheet).rules[id]; return (style.styleSheet || style.sheet).rules[id];
}, },
setCss: function (baseCls, store, val) { setCss: function (baseCls, store, val) {
var cls; var cls;
if(val.cls && val.cls !== '.'){ if (val.cls && val.cls !== '.') {
cls = val.cls cls = val.cls
.split('.') .split('.')
.filter(String) .filter(String)
.concat(baseCls) .concat(baseCls)
.map(function(el){return '.'+el;}) .map(function (el) {
return '.' + el;
})
.join(''); .join('');
}else{ } else {
cls = '.'+baseCls; cls = '.' + baseCls;
} }
var ss = cssCache[cls] = cssCache[cls] || {}; var ss = cssCache[cls] = cssCache[cls] || {};
if(!style) { if (!style) {
style = document.createElement('style'); style = document.createElement('style');
style.type = 'text/css'; style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style); document.getElementsByTagName('head')[0].appendChild(style);
...@@ -55,24 +61,18 @@ var Style = AbstractComponent.extend('Core', 'Style', { ...@@ -55,24 +61,18 @@ var Style = AbstractComponent.extend('Core', 'Style', {
} }
!ss.rule && (ss.rule = this.addRule(cls, style)); !ss.rule && (ss.rule = this.addRule(cls, style));
var rule = ss.rule; var rule = ss.rule;
for(var i in val){ for (var i in val) {
if(i!=='cls' && store[i] !== val[i]){ if (i !== 'cls' && store[i] !== val[i]) {
store[i] = rule.style[i] = val[i]; store[i] = rule.style[i] = val[i];
} }
} }
}, },
getBaseCls: function (key) { getBaseCls: function (key) {
var cls = Q.Core.TypeTable.search(key); var cls = Q.Core.TypeTable.search(key);
if(!cls) if (!cls)
throw new Error ('Unknown cls `'+key+'`'); throw new Error('Unknown cls `' + key + '`');
return 'Q-UI-'+cls[0].ctor.type; return 'Q-UI-' + cls[0].ctor.type;
} }
}); });
return Style;
var UIComponent = require('../UI/UIComponent'); });
var Style2 = UIComponent.extend('Core', 'Style2', { \ No newline at end of file
//_anything: true,
_onChildAdd: function (child) {
debugger;
}
});
\ No newline at end of file
UI/UIComponent.js
var TypeTable = module.exports =
typeof Q != "undefined" QRequire('Core.QObject', 'Core.AbstractComponent', function(
? Q.Core.TypeTable QObject,
: require("../Core/TypeTable"); AbstractComponent
) {
var QObject = TypeTable.getType('Core', "QObject"); 'use strict';
var AbstractComponent = TypeTable.getType('Core', "AbstractComponent");
var base = AbstractComponent.prototype; var base = AbstractComponent.prototype;
var trim = function (text) { var trim = function (text) {
return text.trim(); return text.trim();
}; };
var UIComponent = AbstractComponent.extend('UI', 'UIComponent', { var UIComponent = AbstractComponent.extend('UI', 'UIComponent', {
ctor: function () { ctor: function () {
this.createEl(); this.createEl();
this.setAll({ this.setAll({
...@@ -23,8 +22,8 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', { ...@@ -23,8 +22,8 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', {
this.el.classList.add(this.baseCls); this.el.classList.add(this.baseCls);
var _self = this; var _self = this;
this.on('drawed', function(){ this.on('drawed', function () {
_self._getAllChildren(UIComponent).forEach(function(item){ _self._getAllChildren(UIComponent).forEach(function (item) {
item.fire('drawed'); item.fire('drawed');
}); });
}); });
...@@ -48,7 +47,7 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', { ...@@ -48,7 +47,7 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', {
* *
*/ */
updateLayout: function () { updateLayout: function () {
this._getAllChildren(UIComponent).forEach(function(item){ this._getAllChildren(UIComponent).forEach(function (item) {
item.updateLayout(); item.updateLayout();
}); });
}, },
...@@ -134,49 +133,49 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', { ...@@ -134,49 +133,49 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', {
} }
}, },
__getShadowDelegate: function(what){ __getShadowDelegate: function (what) {
var _self = this; var _self = this;
return this.sd || (this.sd = return this.sd || (this.sd =
{ {
what: what, what: what,
activate: function(me){ activate: function (me) {
_self.__shadowProtocol(what, me); _self.__shadowProtocol(what, me);
}, },
deactivate: function(me){ deactivate: function (me) {
me = me || _self.sd.getLast(); me = me || _self.sd.getLast();
me && _self.__shadowProtocol(what, me, true); me && _self.__shadowProtocol(what, me, true);
}, },
next: function(me){ next: function (me) {
this.what.direction = 'next'; this.what.direction = 'next';
_self.__shadowProtocol(this.what); _self.__shadowProtocol(this.what);
}, },
prev: function(me){ prev: function (me) {
this.what.direction = 'prev'; this.what.direction = 'prev';
_self.__shadowProtocol(this.what); _self.__shadowProtocol(this.what);
}, },
skip: function(){ skip: function () {
_self.__shadowProtocol(this.what); _self.__shadowProtocol(this.what);
}, },
send: function(){ send: function () {
var last = _self['_'+what.type+'ProtocolLast']; var last = _self['_' + what.type + 'ProtocolLast'];
if(!last){ if (!last) {
document.activeElement.click(); document.activeElement.click();
last = _self['_'+what.type+'ProtocolLast']; last = _self['_' + what.type + 'ProtocolLast'];
} }
if(last && last.match){ if (last && last.match) {
var fn = last.match['_'+what.type+'ProtocolReceive']; var fn = last.match['_' + what.type + 'ProtocolReceive'];
if(fn) if (fn)
fn.apply(last.match, arguments); fn.apply(last.match, arguments);
} }
}, },
collect: function(what){ collect: function (what) {
_self.___shadowProtocol(what, this); _self.___shadowProtocol(what, this);
}, },
getLast: function(){ getLast: function () {
return _self[what.method+'Last']; return _self[what.method + 'Last'];
}, },
setLast: function(val){ setLast: function (val) {
return _self[what.method+'Last'] = val; return _self[what.method + 'Last'] = val;
} }
}); });
}, },
...@@ -190,22 +189,22 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', { ...@@ -190,22 +189,22 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', {
what.delegate = delegate; what.delegate = delegate;
what.chain = []; what.chain = [];
what.initiator = this; what.initiator = this;
what.method = '_'+what.type+'Protocol'; what.method = '_' + what.type + 'Protocol';
if(!('direction' in what)){ if (!('direction' in what)) {
what.direction = 'next'; what.direction = 'next';
} }
delegate.collect(what); delegate.collect(what);
//this.___shadowProtocol(what, delegate); //this.___shadowProtocol(what, delegate);
chain = what.chain; chain = what.chain;
if(!chain.length) if (!chain.length)
return what; return what;
lastChain = delegate.getLast();//this[what.method+'Last']; lastChain = delegate.getLast();//this[what.method+'Last'];
if(actor){ if (actor) {
who = actor; who = actor;
}else { } else {
_i = chain.length; _i = chain.length;
if (what.direction === 'next') { if (what.direction === 'next') {
for (i = 0; i < _i; i++) { for (i = 0; i < _i; i++) {
...@@ -233,15 +232,13 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', { ...@@ -233,15 +232,13 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', {
} }
} }
} }
if(lastChain !== who){ if (lastChain !== who) {
// if component give it's permissions to leave // if component give it's permissions to leave
if( if (
what.force || what.force || !lastChain || !lastChain.match[what.method + 'Leave'] ||
!lastChain || lastChain.match[what.method + 'Leave']() !== false
!lastChain.match[what.method+'Leave'] ||
lastChain.match[what.method+'Leave']() !== false
) { ) {
if(!loose) { if (!loose) {
what.match = who; what.match = who;
delegate.setLast(what); delegate.setLast(what);
...@@ -255,7 +252,7 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', { ...@@ -255,7 +252,7 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', {
var method = what.method, var method = what.method,
children, i, _i, child; children, i, _i, child;
if(typeof this[method] === 'function' && this[method](delegate)) { if (typeof this[method] === 'function' && this[method](delegate)) {
what.chain = what.chain.concat(this); what.chain = what.chain.concat(this);
} }
...@@ -266,9 +263,9 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', { ...@@ -266,9 +263,9 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', {
} }
return what; return what;
}, },
_shadowProtocol: function(protocol){ _shadowProtocol: function (protocol) {
var name = '_'+protocol+ 'ProtocolLast'; var name = '_' + protocol + 'ProtocolLast';
if(!this[name]) if (!this[name])
return false; return false;
return this[name].match; return this[name].match;
...@@ -300,12 +297,12 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', { ...@@ -300,12 +297,12 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', {
}, },
get: function () { get: function () {
return ([this.baseCls].concat( return ([this.baseCls].concat(
(this._data.cls||'') (this._data.cls || '')
.split('.') .split('.')
.map(trim) .map(trim)
.filter(String)) .filter(String))
.map(function (el) { .map(function (el) {
return '.'+el; return '.' + el;
}).join('')) }).join(''))
} }
}, },
...@@ -435,9 +432,9 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', { ...@@ -435,9 +432,9 @@ var UIComponent = AbstractComponent.extend('UI', 'UIComponent', {
}, },
} }
}); });
UIComponent.createElementCss = function (name, css, className) { UIComponent.createElementCss = function (name, css, className) {
var el = document.createElement(name); var el = document.createElement(name);
if (className) if (className)
...@@ -448,6 +445,7 @@ UIComponent.createElementCss = function (name, css, className) { ...@@ -448,6 +445,7 @@ UIComponent.createElementCss = function (name, css, className) {
el.style[key] = css[key]; el.style[key] = css[key];
} }
return el; return el;
}; };
module.exports = UIComponent; return UIComponent;
});
index.js
module.exports = { module.exports = {
TypeTable: require('./Core/TypeTable'),
dir: __dirname dir: __dirname
}; };
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment