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