Skip to content

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

to QRequire format

parent 643be830
Showing with 2062 additions and 2020 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',
{
addChild: function (component) {
this._children.push(component);
return this;
},
/**
* Bind to this._children.on('add'...)
*
* @param {AbstractComponent} child
* @returns {void}
*/
_onChildAdd: function (child) {
child.parent = this;
},
/**
* Bind to this._children.on('remove'...)
*
* @param {AbstractComponent} child
* @returns {void}
*/
_onChildRemove: function (child) {
child.parent = null;
},
/**
* Bind to this._ownComponents.on('add'...)
*
* @param {AbstractComponent} child
* @returns {void}
*/
_onOwnComponentAdd: function (child) {
child.parent = this;
},
/**
* Bind to this._ownComponents.on('remove'...)
*
* @param {AbstractComponent} child
* @returns {void}
*/
_onOwnComponentRemove: function (child) {
child.parent = null;
//should not be called
},
_getAllChildren: function(type){
var iterator = this._children.iterator(), item, items = [];
while (item = iterator.next()) {
if (item instanceof type)
items.push(item);
}
iterator = this._ownComponents.iterator();
while (item = iterator.next()) {
if (item instanceof type)
items.push(item);
}
return items;
},
'~destroy': function(){
var children = this._getAllChildren(AbstractComponent), i, _i,
child;
for( i = 0, _i = children.length; i < _i; i++ ){
child = children[i];
if(typeof child['~destroy'] === 'function')
child['~destroy']();
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);
return this;
},
/**
* Bind to this._children.on('add'...)
*
* @param {AbstractComponent} child
* @returns {void}
*/
_onChildAdd: function (child) {
child.parent = this;
},
/**
* Bind to this._children.on('remove'...)
*
* @param {AbstractComponent} child
* @returns {void}
*/
_onChildRemove: function (child) {
child.parent = null;
},
/**
* Bind to this._ownComponents.on('add'...)
*
* @param {AbstractComponent} child
* @returns {void}
*/
_onOwnComponentAdd: function (child) {
child.parent = this;
},
/**
* Bind to this._ownComponents.on('remove'...)
*
* @param {AbstractComponent} child
* @returns {void}
*/
_onOwnComponentRemove: function (child) {
child.parent = null;
//should not be called
},
_getAllChildren: function(type){
var iterator = this._children.iterator(), item, items = [];
while (item = iterator.next()) {
if (item instanceof type)
items.push(item);
}
iterator = this._ownComponents.iterator();
while (item = iterator.next()) {
if (item instanceof type)
items.push(item);
}
return items;
},
'~destroy': function(){
var children = this._getAllChildren(AbstractComponent), i, _i,
child;
for( i = 0, _i = children.length; i < _i; i++ ){
child = children[i];
if(typeof child['~destroy'] === 'function')
child['~destroy']();
}
this.fire('~destroy');
},
_prop: {
id: null
}
this.fire('~destroy');
},
_prop: {
id: null
}
},
/**
* @constructs AbstractComponent
*/
function () {
/**
* Own Components
*
* @type {AbstractComponent[]}
* @private
*/
this._ownComponents = new ObservableSequence(new DQIndex('id'));
this._ownComponents.on('add', this._onOwnComponentAdd.bind(this));
this._ownComponents.on('remove', this._onOwnComponentRemove.bind(this));
/**
* Child Components
*
* @type {AbstractComponent[]}
* @private
* @constructs AbstractComponent
*/
this._children = new ObservableSequence(new DQIndex('id'));
this._children.on('add', this._onChildAdd.bind(this));
this._children.on('remove', this._onChildRemove.bind(this));
this.parent = null;
});
module.exports = AbstractComponent;
\ No newline at end of file
function () {
/**
* Own Components
*
* @type {AbstractComponent[]}
* @private
*/
this._ownComponents = new ObservableSequence(new DQIndex('id'));
this._ownComponents.on('add', this._onOwnComponentAdd.bind(this));
this._ownComponents.on('remove', this._onOwnComponentRemove.bind(this));
/**
* Child Components
*
* @type {AbstractComponent[]}
* @private
*/
this._children = new ObservableSequence(new DQIndex('id'));
this._children.on('add', this._onChildAdd.bind(this));
this._children.on('remove', this._onChildRemove.bind(this));
this.parent = null;
});
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 = RunAtServerComponent.extend('Core', 'Config', {
ctor: function () {
},
load: function () {
var config = require(this.get('path'));
var config = require('../../platform/config');
config.load(function (data) {
var parsedData;
try {
parsedData = JSON.parse(data);
this._data['qData'] = Variant.deserialize(parsedData);
}
catch (e) {
console.log(e);
throw e;
}
config.load(function(data){
var parsedData;
try {
parsedData = JSON.parse(data);
}
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'));
},
set: function (key, value) {
key = key.indexOf('qData') === -1 ? QObject.joinKey('qData', key) : key;
var ret = base.set.call(this, key, value);
});
},
save: function () {
config.save(JSON.stringify(QData.serialize(), null, '\t'));
},
set: function (key, value) {
key = key.indexOf('qData') === -1 ? QObject.joinKey('qData', key) : key;
var ret = base.set.call(this, key, value);
this.save();
return ret;
//QData.set(key, value);
},
get: function (key) {
key = key.indexOf('qData') === -1 ? QObject.joinKey('qData', key) : key;
this.save();
return ret;
//QData.set(key, value);
},
get: function (key) {
key = key.indexOf('qData') === -1 ? QObject.joinKey('qData', key) : key;
return base.get.call(this, key, true);
//QData.get(key);
},
ref: function (key) {
key = key.indexOf('qData') === -1 ? QObject.joinKey('qData', key) : key;
return base.get.call(this, key, true);
//QData.get(key);
},
ref: function (key) {
key = key.indexOf('qData') === -1 ? QObject.joinKey('qData', key) : key;
var ret = base.ref.call(this, key);
return ret;
//return QData.ref(key);
},
prop: {
qData: {}
}
var ret = base.ref.call(this, key);
return ret;
//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', {
_anything: true,
ctor: function () {
},
_prop: {
value: '_val',
'_val': {
set: function (val) {
this._data = {};
this.setAll(val);
module.exports =
QRequire('Core.QObject', function(
QObject
) {
'use strict';
var DATA = QObject.extend('Core', 'DATA', {
_anything: true,
ctor: function () {
},
_prop: {
value: '_val',
'_val': {
set: function (val) {
this._data = {};
this.setAll(val);
}
}
}
}
}
});
});
module.exports = DATA;
\ No newline at end of file
return DATA;
});
\ No newline at end of file
Core/Pipe.js
var TypeTable = require('./TypeTable');
/**
*
* @constructor
*/
function Pipe() {
this.toRef = void(0);
this.fn = arguments[arguments.length - 1];
var argumentsLength = arguments.length - 1;
if (arguments.length === 1) {
argumentsLength += 1;
this.fn = function (a) {
return a;
module.exports =
QRequire('Core.TypeTable', function(
TypeTable
) {
'use strict';
/**
*
* @constructor
*/
function Pipe() {
this.toRef = void(0);
this.fn = arguments[arguments.length - 1];
var argumentsLength = arguments.length - 1;
if (arguments.length === 1) {
argumentsLength += 1;
this.fn = function (a) {
return a;
}
}
this.inputCache = [];
this.outputCache = void(0);
for (var i = 0; i < argumentsLength; i++) {
var ref = arguments[i];
this.inputCache[i] = ref.get();
this._subscribeToLink(ref, i);
}
var result = this.fn.apply(this, this.inputCache);
this.outputCache = result;
}
}
this.inputCache = [];
this.outputCache = void(0);
for (var i = 0; i < argumentsLength; i++) {
var ref = arguments[i];
this.inputCache[i] = ref.get();
this._subscribeToLink(ref, i);
}
var result = this.fn.apply(this, this.inputCache);
this.outputCache = result;
}
/**
*
* @type {{to: Pipe.to, _subscribeToLink: Pipe._subscribeToLink}}
*/
Pipe.prototype = {
to: function (toRef) {
this.toRef = toRef;
this.toRef.set(this.outputCache);
},
_subscribeToLink: function (ref, index) {
var self = this;
ref.subscribe(function (val, oldVal) {
self.inputCache[index] = val;
var result = self.fn.apply(this, self.inputCache);
self.outputCache = result;
if (self.toRef)
self.toRef.set(result);
});
}
};
/*
Pipe.done = function(){
};
Pipe.done.prototype = new Pipe();
*/
TypeTable.registerType('Core', 'Pipe', Pipe);
module.exports = Pipe;
\ No newline at end of file
/**
*
* @type {{to: Pipe.to, _subscribeToLink: Pipe._subscribeToLink}}
*/
Pipe.prototype = {
to: function (toRef) {
this.toRef = toRef;
this.toRef.set(this.outputCache);
},
_subscribeToLink: function (ref, index) {
var self = this;
ref.subscribe(function (val, oldVal) {
self.inputCache[index] = val;
var result = self.fn.apply(this, self.inputCache);
self.outputCache = result;
if (self.toRef)
self.toRef.set(result);
});
}
};
/*
Pipe.done = function(){
};
Pipe.done.prototype = new Pipe();
*/
TypeTable.registerType('Core', 'Pipe', Pipe);
return Pipe;
});
\ No newline at end of file
Core/Reference.js
var QObject;
module.exports =
QRequire('Core.TypeTable', function(
TypeTable
) {
'use strict';
function Reference(obj, key, callback) {
var QObject;
if (!QObject)
QObject = require("./QObject");
function Reference(obj, key, callback) {
this.obj = obj;
this.callback = callback;
var names = key;
this.key = key;
this.path = key;
if (names.length > 1) {
this.type = 'chain';
this.createNextRef();
} else {
names[0] = obj.__checkValue(names[0]);
}
if (!QObject)
QRequire('Core.QObject', function (obj) {
QObject = obj;
});
return this;
}
this.obj = obj;
this.callback = callback;
Reference.prototype =
{
oldVal: void 0,
destroyNext: function () {
if (this._nextRef) {
var index = this._nextRef.obj.__refs[this._nextRef.path[0]].indexOf(this._nextRef);
var names = key;
this.key = key;
if (index >= 0)
this._nextRef.obj.__refs[this._nextRef.path[0]].splice(index, 1);
this.path = key;
this._nextRef.destroyNext();
this._nextRef.callback = void(0);
delete this._nextRef;
}
},
createNextRef: function () {
var self = this;
var names = this.path;
var obj = this.obj;
var nextName = names[0];
nextName = obj.__checkValue(nextName);
var nextObj = obj.get(nextName);
if (nextObj && nextObj instanceof QObject) {
var nextRef = nextObj.ref(names.slice(1));
nextRef.oldVal = nextObj.get(names.slice(1), true);
nextRef._uberRef = this;
nextRef._mainRef = this._mainRef || this;
nextRef.type = 'chain';
self._nextRef = nextRef;
nextRef.subscribe(function (val, oldVal) {
self.destroyNext();
self.createNextRef();
self.resolve(val, oldVal);
});
}
},
get: function () {
return this.obj.get(this.key, true);
},
getOld: function (val, key) {
if(!val)
return val;
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)
break;
if(result instanceof QObject)
result = result.get([this.key[i]], true);
else
result = result[this.key[i]];
}
return result;
}
},
set: function (value) {
this.obj.set(this.key, value);
},
subscribe: function (callback) {
this.callback = callback;
},
resolve: function (val, oldVal, key) {
var cb = this.callback;
if (this.type === "chain") {
val = this.get();
var goldVal = this.getOld(oldVal, key);
var ref = this._uberRef || this;
cb = ref.callback;
}
//console.log('CHANGE', this.key.join('.'), val, oldVal, this.oldVal, goldVal);
if (cb && val !== this.oldVal) {
this.oldVal = val;
cb(val, oldVal);
if (names.length > 1) {
this.type = 'chain';
this.createNextRef();
} else {
names[0] = obj.__checkValue(names[0]);
}
return this;
}
};
module.exports = Reference;
Reference.prototype =
{
oldVal: void 0,
destroyNext: function () {
if (this._nextRef) {
var index = this._nextRef.obj.__refs[this._nextRef.path[0]].indexOf(this._nextRef);
if (index >= 0)
this._nextRef.obj.__refs[this._nextRef.path[0]].splice(index, 1);
this._nextRef.destroyNext();
this._nextRef.callback = void(0);
delete this._nextRef;
}
},
createNextRef: function () {
var self = this;
var names = this.path;
var obj = this.obj;
var nextName = names[0];
nextName = obj.__checkValue(nextName);
var nextObj = obj.get(nextName);
if (nextObj && nextObj instanceof QObject) {
var nextRef = nextObj.ref(names.slice(1));
nextRef.oldVal = nextObj.get(names.slice(1), true);
nextRef._uberRef = this;
nextRef._mainRef = this._mainRef || this;
nextRef.type = 'chain';
self._nextRef = nextRef;
nextRef.subscribe(function (val, oldVal) {
self.destroyNext();
self.createNextRef();
self.resolve(val, oldVal);
});
}
},
get: function () {
return this.obj.get(this.key, true);
},
getOld: function (val, key) {
if (!val)
return val;
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)
break;
if (result instanceof QObject)
result = result.get([this.key[i]], true);
else
result = result[this.key[i]];
}
return result;
}
},
set: function (value) {
this.obj.set(this.key, value);
},
subscribe: function (callback) {
this.callback = callback;
},
resolve: function (val, oldVal, key) {
var cb = this.callback;
if (this.type === "chain") {
val = this.get();
var goldVal = this.getOld(oldVal, key);
var ref = this._uberRef || this;
cb = ref.callback;
}
//console.log('CHANGE', this.key.join('.'), val, oldVal, this.oldVal, goldVal);
if (cb && val !== this.oldVal) {
this.oldVal = val;
cb(val, oldVal);
}
}
};
TypeTable.registerType('Core', 'Reference', Reference);
return Reference;
});
\ 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', {
_anything: true,
link: function (selfProp, configProp) {
var me = this;
this.set(selfProp, new Pipe(config.ref(configProp), function (a) {
console.log('------------------------->>>>>>>>>>>>-----', me.____id);
return a;
}));
config.set(configProp, new Pipe(this.ref(selfProp), function (a) {
//config.save();
console.log('----------------------------------------------------', me.____id);
return a;
}));
},
save: function () {
config.save();
},
getAppConfigKey: function () {
return 'applications.' + this.appName;
},
set: function (key, value) {
var base = RunAtServerComponent.prototype;
var singleton;
var Store = RunAtServerComponent.extend('Core', 'Store', {
_anything: true,
link: function (selfProp, configProp) {
var me = this;
this.set(selfProp, new Pipe(config.ref(configProp), function (a) {
console.log('------------------------->>>>>>>>>>>>-----', me.____id);
return a;
}));
config.set(configProp, new Pipe(this.ref(selfProp), function (a) {
//config.save();
console.log('----------------------------------------------------', me.____id);
return a;
}));
},
save: function () {
config.save();
},
getAppConfigKey: function () {
return 'applications.' + this.appName;
},
set: function (key, value) {
var ret = base.set.call(this, key, value);
var ret = base.set.call(this, key, value);
console.log(key);
console.log(key);
if (key.indexOf('config') === 0) {
console.log('shit');
config.set(this.getAppConfigKey(), this.get('config'));
if (this.appName === 'confTool') {
//config.set('applications.confTool.resources', this.get('config.resources'));
//config.set('applications.confTool.settings', this.get('config.settings'));
this.set('globalResources', config.get('applications.confTool.resources'));
}
}
if (key.indexOf('config') === 0) {
console.log('shit');
config.set(this.getAppConfigKey(), this.get('config'));
if (this.appName === 'confTool') {
//config.set('applications.confTool.resources', this.get('config.resources'));
//config.set('applications.confTool.settings', this.get('config.settings'));
this.set('globalResources', config.get('applications.confTool.resources'));
}
}
if (key.indexOf('globalResources') === 0)
config.set('applications.confTool.resources', this.get('globalResources'));
if (key.indexOf('globalResources') === 0)
config.set('applications.confTool.resources', this.get('globalResources'));
if (key.indexOf('system') === 0)
config.set('applications.confTool.settings', this.get('system'));
if (key.indexOf('system') === 0)
config.set('applications.confTool.settings', this.get('system'));
return ret;
},
ctor: function () {
return ret;
},
ctor: function () {
singleton = this;
singleton = this;
this.appName = Store.appName;
this.appName = Store.appName;
this.link('globalResources', 'applications.confTool.resources');
this.link('system', 'applications.confTool.settings');
this.link('globalResources', 'applications.confTool.resources');
this.link('system', 'applications.confTool.settings');
this.link('config', this.getAppConfigKey());
this.link('config', this.getAppConfigKey());
//this.set('resources', config.get('applications.confTool.resources'));
//this.set('system', config.get('applications.confTool.settings'));
},
_prop: {
resources: {},
settings: {},
system: {}
}
});
return Store;
});
//this.set('resources', config.get('applications.confTool.resources'));
//this.set('system', config.get('applications.confTool.settings'));
},
_prop: {
resources: {},
settings: {},
system: {}
}
});
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', {
ctor: function () {
this.set('counter', 0);
},
start: function () {
if (this.interval) return;
var self = this;
var interval = this.get('interval');
this.interval = setInterval(function () {
self.set('counter', self.get('counter')+1);
self.fire('tick', self._data.counter);
}, interval);
},
stop: function () {
clearInterval(this.interval);
this.interval = void(0);
},
_prop: {
value: 'counter',
counter: {},
interval: {
set: function(val,e){
if(this.get('enabled')) {
e.value(val);
this.start();
/** @class */
var Timer = QObject.extend('Core', 'Timer', {
ctor: function () {
this.set('counter', 0);
},
start: function () {
if (this.interval) return;
var self = this;
var interval = this.get('interval');
this.interval = setInterval(function () {
self.set('counter', self.get('counter') + 1);
self.fire('tick', self._data.counter);
}, interval);
},
stop: function () {
clearInterval(this.interval);
this.interval = void(0);
},
_prop: {
value: 'counter',
counter: {},
interval: {
set: function (val, e) {
if (this.get('enabled')) {
e.value(val);
this.start();
}
}
},
enabled: {
set: function (val, e) {
e.value(val);
if (val)
this.start();
else
this.stop();
}
}
}
},
enabled: {
set: function(val, e){
e.value(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', {
_set: function (key, value) {
if (!this._prop[key])
this._prop[key] = {};
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) {
if (typeof jsonObj === 'object') {
var res = new Variant();
for (var key in jsonObj)
if (jsonObj.hasOwnProperty(key)) {
res.set(key, Variant.deserialize(jsonObj[key]));
return base._set.call(this, key, value);
}
});
return res;
} else {
return jsonObj;
}
Variant.deserialize = function (jsonObj) {
if (typeof jsonObj === 'object') {
var res = new Variant();
for (var key in jsonObj)
if (jsonObj.hasOwnProperty(key)) {
res.set(key, Variant.deserialize(jsonObj[key]));
}
};
return res;
} else {
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');
return UIComponent.extend('UI.Controls', 'Border', {
ctor: function () {
this._ownComponents.push(new ContentContainer());
this.el.style.overflow = 'visible';
this._contentContainer.setAll({
pureCss: 'position: absolute; top: 0; bottom: 0; right: 0; left: 0; width:auto; height: auto'
});
},
_prop: {
margin: {
set: function (value) {
var parts = value.split(/\s{1,}/g);
module.exports = UIComponent.extend('UI.Controls', 'Border', {
ctor: function () {
this._ownComponents.push(new ContentContainer());
this.el.style.overflow='visible';
this._contentContainer.setAll({
pureCss: 'position: absolute; top: 0; bottom: 0; right: 0; left: 0; width:auto; height: auto'
});
},
_prop: {
margin: {
set: function (value) {
var parts = value.split(/\s{1,}/g);
var css = '';
var css = '';
if (parts.length === 4) {
css = 'position: absolute; top: ' + parts[0] + '; bottom: ' + parts[2] + '; right:' + parts[1] + '; left: ' + parts[3];
} else if (parts.length === 3) {
css = 'position: absolute; top: ' + parts[0] + '; bottom: ' + parts[2] + '; right:' + parts[1] + '; left: ' + parts[1];
} else if (parts.length === 2) {
css = 'position: absolute; top: ' + parts[0] + '; bottom: ' + parts[0] + '; right:' + parts[1] + '; left: ' + parts[1];
} else if (parts.length === 1) {
css = 'position: absolute; top: ' + parts[0] + '; bottom: ' + parts[0] + '; right:' + parts[0] + '; left: ' + parts[0];
}
if (parts.length === 4) {
css = 'position: absolute; top: ' + parts[0] + '; bottom: ' + parts[2] + '; right:' + parts[1] + '; left: ' + parts[3];
} else if (parts.length === 3) {
css = 'position: absolute; top: ' + parts[0] + '; bottom: ' + parts[2] + '; right:' + parts[1] + '; left: ' + parts[1];
} else if (parts.length === 2) {
css = 'position: absolute; top: ' + parts[0] + '; bottom: ' + parts[0] + '; right:' + parts[1] + '; left: ' + parts[1];
} else if (parts.length === 1) {
css = 'position: absolute; top: ' + parts[0] + '; bottom: ' + parts[0] + '; right:' + parts[0] + '; left: ' + parts[0];
this._contentContainer.set('pureCss', css);
}
},
borderRadius: {
set: function (value) {
this._contentContainer.el.style.borderRadius = value;
}
this._contentContainer.set('pureCss', css);
}
},
borderRadius: {
set: function (value) {
this._contentContainer.el.style.borderRadius = value;
}
}
}
});
});
\ No newline at end of file
UI/Controls/Button.js
......@@ -2,72 +2,77 @@
* Created by ravenor on 13.07.16.
*/
var UIComponent = require('../UIComponent');
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');
this.el.className = 'Q-UI-Button';
this.el.setAttribute('type', 'button');
module.exports = UIComponent.extend('UI.Controls', 'Button', {
createEl: function () {
var self = this;
this.el = document.createElement('button');
this.el.className = 'Q-UI-Button';
this.el.setAttribute('type', 'button');
var buttonText = document.createElement('span');
this.el.appendChild(buttonText);
this.el.addEventListener('click', function (event) {
self.fire('click', event);
});
this.el.addEventListener('mousedown', function (event) {
self.el.classList.add('Over');
});
this.el.addEventListener('mouseup', function (event) {
self.el.classList.remove('Over');
});
var buttonText = document.createElement('span');
this.el.appendChild(buttonText);
this.el.addEventListener('click', function (event) {
self.fire('click', event);
});
this.el.addEventListener('mousedown', function (event) {
self.el.classList.add('Over');
});
this.el.addEventListener('mouseup', function (event) {
self.el.classList.remove('Over');
});
this.buttonText = buttonText;
},
_tabProtocol: function (delegate) {
if (delegate)
return true;
this.el.classList.add('Focused');
this.el.focus();
},
_tabProtocolLeave: function () {
this.el.classList.remove('Focused');
},
_prop: {
caption: {
set: function (val) {
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');
this.buttonText = buttonText;
},
_tabProtocol: function (delegate) {
if(delegate)
return true;
this.el.classList.add('Focused');
this.el.focus();
},
_tabProtocolLeave: function(){
this.el.classList.remove('Focused');
},
_prop: {
caption: {
set: function (val) {
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');
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');
},
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'
}
},
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,36 +6,41 @@
;// QUOKKA 2017
// By zibx on 5/29/17.
module.exports = (function () {
'use strict';
var UIComponent = require('../UIComponent');
module.exports =
QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
return UIComponent.extend('UI.Controls', 'Canvas', {
createEl: function () {
var self = this;
this.el = document.createElement('canvas');
this.ctx = this.el.getContext('2d');
this.el.className = 'Q-UI-Canvas';
return UIComponent.extend('UI.Controls', 'Canvas', {
createEl: function () {
var self = this;
this.el = document.createElement('canvas');
this.ctx = this.el.getContext('2d');
this.el.className = 'Q-UI-Canvas';
this.el.addEventListener('click', function (event) {
self.fire('click', event);
});
this.el.addEventListener('click', function (event) {
self.fire('click', event);
});
},
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)
this.el.width = val;
}},
height: {set: function(val){
val+='';
if(val.indexOf('%')===-1 && val.indexOf('px')===-1)
this.el.height = val;
}}
}
});
})();
\ No newline at end of file
},
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)
this.el.width = val;
}
},
height: {
set: function (val) {
val += '';
if (val.indexOf('%') === -1 && val.indexOf('px') === -1)
this.el.height = val;
}
}
}
});
});
\ No newline at end of file
UI/Controls/CheckBox.js
var UIComponent = require('../UIComponent');
module.exports = 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)
flags.value(newValue);
this.input.checked = newValue;
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)
flags.value(newValue);
this.input.checked = newValue;
}
},
label: {
set: function (value) {
this.span.innerText = value;
},
get: function () {
}
},
value: 'checked'
}
},
label: {
set: function(value){
this.span.innerText = value;
},
get: function(){}
},
value: 'checked'
}
}, function () {
var self = this;
var label = document.createElement('label');
}, function () {
var self = this;
var label = document.createElement('label');
var input = this.input = document.createElement('input');
input.type = 'checkbox';
var input = this.input = document.createElement('input');
input.type = 'checkbox';
this.span = document.createElement('span');
this.span = document.createElement('span');
label.appendChild(input);
label.appendChild(this.span);
label.appendChild(input);
label.appendChild(this.span);
label.className = 'Q-UI-CheckBox';
input.addEventListener('change', function () {
self._propChanged('checked', self.get('value'));
});
label.className = 'Q-UI-CheckBox';
input.addEventListener('change', function () {
self._propChanged('checked', self.get('value'));
});
this.el.appendChild(label);
});
this.el.appendChild(label);
});
});
\ No newline at end of file
UI/Controls/FlexSizeComponent.js
var UIComponent = require('../UIComponent');
module.exports = UIComponent.extend('UI.Controls', 'FlexSizeComponent', {
_prop: {
value: 'flexDefenition',
flexDefinition: {
set: function (value) {
var flexDefinition = {parts: [], starCount: 0, flexLength: 0, fixLength: 0};
var stringParts = value.split(' ');
for (var i = 0; i < stringParts.length; i++) {
var fPart = stringParts[i];
if (fPart.length === 0) continue;
var newPart = {part: 0, flex: true};
var parsedFloat = parseFloat(fPart);
if (fPart[fPart.length - 1] === '*') {
newPart.flex = true;
if (!parsedFloat) {
flexDefinition.starCount += 1;
} else {
newPart.part = parsedFloat;
flexDefinition.flexLength += parsedFloat;
module.exports =
QRequire('UI.UIComponent', 'UI.ContentContainer', function(
UIComponent,
ContentContainer
) {
'use strict';
return UIComponent.extend('UI.Controls', 'FlexSizeComponent', {
_prop: {
value: 'flexDefenition',
flexDefinition: {
set: function (value) {
var flexDefinition = {parts: [], starCount: 0, flexLength: 0, fixLength: 0};
var stringParts = value.split(' ');
for (var i = 0; i < stringParts.length; i++) {
var fPart = stringParts[i];
if (fPart.length === 0) continue;
var newPart = {part: 0, flex: true};
var parsedFloat = parseFloat(fPart);
if (fPart[fPart.length - 1] === '*') {
newPart.flex = true;
if (!parsedFloat) {
flexDefinition.starCount += 1;
} else {
newPart.part = parsedFloat;
flexDefinition.flexLength += parsedFloat;
}
} else {
newPart.flex = false;
newPart.part = parsedFloat;
flexDefinition.fixLength += parsedFloat;
}
flexDefinition.parts.push(newPart);
}
} else {
newPart.flex = false;
newPart.part = parsedFloat;
flexDefinition.fixLength += parsedFloat;
this._flexDefinition = flexDefinition;
this.updateLayout();
}
flexDefinition.parts.push(newPart);
}
this._flexDefinition = flexDefinition;
this.updateLayout();
}
}
}
});
\ No newline at end of file
});
});
\ 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', {
createEl: function () {
var self = this;
this.el = document.createElement('div');
this.el.id = 'GovnoControlTable';
this.el.style.width = '500px';
this.el.style.height = '300px';
return UIComponent.extend('UI.Controls', 'GovnoControl', {
createEl: function () {
var self = this;
this.el = document.createElement('div');
this.el.id = 'GovnoControlTable';
this.el.style.width = '500px';
this.el.style.height = '300px';
setTimeout(function () {
self.govnotable = $('#GovnoControlTable').editTable({
data: [['date', new Date().toLocaleDateString()], ['amount', '500'], ['comission', '5']],
first_row: false,
headerCols: [
'Key',
'Value'
]
});
$('#GovnoControlTable').on('keyup', 'input', function () {
self.set('data', self.get('data'));
});
}, 100);
setTimeout(function () {
self.govnotable = $('#GovnoControlTable').editTable({
data: [['date', new Date().toLocaleDateString()], ['amount', '500'], ['comission', '5']],
first_row: false,
headerCols: [
'Key',
'Value'
]
});
$('#GovnoControlTable').on('keyup', 'input', function () {
self.set('data', self.get('data'));
});
}, 100);
},
_prop: {
data: {
get: function () {
var tdata = this.govnotable ? this.govnotable.getData() : [];
var data = {};
},
_prop: {
data: {
get: function () {
var tdata = this.govnotable ? this.govnotable.getData() : [];
var data = {};
for (var i = 0; i < tdata.length; i++) {
var record = tdata[i];
data[record[0]] = record[1];
}
for (var i = 0; i < tdata.length; i++) {
var record = tdata[i];
data[record[0]] = record[1];
}
return data;
return data;
}
}
}
}
}
});
\ 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', {
ctor: function () {
this._cache = {};
this.setAll({
rows: 1,
columns: 1
});
},
createEl: function () {
base.createEl.apply(this, arguments);
var self = this;
this.el.addEventListener('resize', function () {
self.updateLayout();
});
},
addChild: function (child) {
var self = this;
this._calcChild(child);
var base = Border.prototype;
for (var i = 0; i < propNames.length; i++) {
var pName = propNames[i];
(function (name) {
child.ref(pName).subscribe(function (value) {
if (propNames.indexOf(name) === -1) return;
if (self._cache[child.id + name] !== value) {
self._calcChild(child);
}
return Border.extend('UI.Controls', 'Grid', {
ctor: function () {
this._cache = {};
this.setAll({
rows: 1,
columns: 1
});
},
createEl: function () {
base.createEl.apply(this, arguments);
var self = this;
this.el.addEventListener('resize', function () {
self.updateLayout();
});
})(pName);
}
},
addChild: function (child) {
var self = this;
this._calcChild(child);
base.addChild.call(this, child);
},
_calcChild: function (cmp) {
var rows = this._data.rows;
var cols = this._data.columns;
for (var i = 0; i < propNames.length; i++) {
var pName = propNames[i];
(function (name) {
child.ref(pName).subscribe(function (value) {
if (propNames.indexOf(name) === -1) return;
var width = cmp.get('width');
var height = cmp.get('height');
var top = cmp.get('top') || 0;
var left = cmp.get('left') || 0;
if (self._cache[child.id + name] !== value) {
self._calcChild(child);
}
});
})(pName);
}
cmp.el.style.position = 'absolute';
this._setToComponent(cmp, 'left', ((100 / cols) * left) + '%');
this._setToComponent(cmp, 'width', ((100 / cols) * width) + '%');
this._setToComponent(cmp, 'top', ((100 / rows) * top) + '%');
this._setToComponent(cmp, 'height', ((100 / rows) * height) + '%');
},
_setToComponent: function (cmp, pName, pValue) {
cmp.set(pName, pValue);
this._cache[cmp.id + pName] = pValue;
},
_prop: {
rows: {},
columns: {},
}
});
\ No newline at end of file
base.addChild.call(this, child);
},
_calcChild: function (cmp) {
var rows = this._data.rows;
var cols = this._data.columns;
var width = cmp.get('width');
var height = cmp.get('height');
var top = cmp.get('top') || 0;
var left = cmp.get('left') || 0;
cmp.el.style.position = 'absolute';
this._setToComponent(cmp, 'left', ((100 / cols) * left) + '%');
this._setToComponent(cmp, 'width', ((100 / cols) * width) + '%');
this._setToComponent(cmp, 'top', ((100 / rows) * top) + '%');
this._setToComponent(cmp, 'height', ((100 / rows) * height) + '%');
},
_setToComponent: function (cmp, pName, pValue) {
cmp.set(pName, pValue);
this._cache[cmp.id + pName] = pValue;
},
_prop: {
rows: {},
columns: {},
}
});
});
\ No newline at end of file
UI/Controls/HBox.js
var UIComponent = require('../UIComponent');
var FlexSizeComponent = require('./FlexSizeComponent');
var Border = require('./Border');
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%');
},
_createEl: function () {
FlexSizeComponent.prototype._createEl.apply(this, arguments);
var self = this;
this.el.addEventListener('resize', function () {
self.updateLayout();
});
},
updateLayout: function () {
var self = this;
var children = this._children;
module.exports = FlexSizeComponent.extend('UI.Controls', 'HBox', {
ctor: function () {
this.set('height', '100%');
},
_createEl: function () {
FlexSizeComponent.prototype._createEl.apply(this, arguments);
var self = this;
this.el.addEventListener('resize', function () {
self.updateLayout();
});
},
updateLayout: function () {
var self = this;
var children = this._children;
clearTimeout(this.updateTimeout);
this.updateTimeout = setTimeout(function () {
var fDef = self._flexDefinition || {parts: [], starCount: 0, flexLength: 0, fixLength: 0};
var starCount = fDef.starCount;
if (fDef.parts.length === 0)
starCount = children.length;
clearTimeout(this.updateTimeout);
this.updateTimeout = setTimeout(function () {
var fDef = self._flexDefinition || {parts: [], starCount: 0, flexLength: 0, fixLength: 0};
var starCount = fDef.starCount;
if (fDef.parts.length === 0)
starCount = children.length;
var freeWidth = 100 - 100 * (fDef.fixLength / self.el.clientWidth);
var freeWidth = 100 - 100 * (fDef.fixLength / self.el.clientWidth);
for (var i = 0, length = children.length; i < length; i++) {
var fPart = fDef.parts[i];
var width = freeWidth / starCount + '%';
if (fPart) {
if (fPart.flex && fPart.part > 0) // 25*
width = freeWidth * (fPart.part / fDef.flexLength) + '%';
if (!fPart.flex) { // 25
width = fPart.part + 'px';
for (var i = 0, length = children.length; i < length; i++) {
var fPart = fDef.parts[i];
var width = freeWidth / starCount + '%';
if (fPart) {
if (fPart.flex && fPart.part > 0) // 25*
width = freeWidth * (fPart.part / fDef.flexLength) + '%';
if (!fPart.flex) { // 25
width = fPart.part + 'px';
}
} else {
width = freeWidth / starCount + '%';
}
} else {
width = freeWidth / starCount + '%';
}
children.get(i).set('width', width);
children.get(i).set('width', width);
}
}, 0);
FlexSizeComponent.prototype.updateLayout.call(this);
},
addChild: function (child) {
var div = new Border({
pureCss: 'float: left;',
height: '100%'
});
div.addChild(child);
this._children.push(div);
}
}, 0);
FlexSizeComponent.prototype.updateLayout.call(this);
},
addChild: function (child) {
var div = new Border({
pureCss: 'float: left;',
height: '100%'
});
div.addChild(child);
this._children.push(div);
this.updateLayout();
}
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', {
ctor: function () {
this.set("fontSize", '36px');
}
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', {
createEl: function () {
this.el = document.createElement('iframe');
},
_prop: {
value: 'source',
source: {
set: function (value) {
this.el.src = value;
return UIComponent.extend('UI.Controls', 'IFrame', {
createEl: function () {
this.el = document.createElement('iframe');
},
_prop: {
value: 'source',
source: {
set: function (value) {
this.el.src = value;
}
}
}
}
});
});
\ 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', {
createEl: function () {
this.el = document.createElement('div');
this.elStyle = this.el.style;
this.elStyle.backgroundPosition = 'center';
this.elStyle.backgroundRepeat = 'no-repeat';
},
_prop: {
value: 'source',
source: {
set: function (value) {
this.elStyle.backgroundImage = 'url(' + value + ')';
}
return UIComponent.extend('UI.Controls', 'Image', {
createEl: function () {
this.el = document.createElement('div');
this.elStyle = this.el.style;
this.elStyle.backgroundPosition = 'center';
this.elStyle.backgroundRepeat = 'no-repeat';
},
stretch: {
set: function (value) {
switch (value) {
case 'none':
this.elStyle.backgroundSize = 'auto auto';
break;
case 'fill':
this.elStyle.backgroundSize = '100% 100%';
break;
case 'uniform':
this.elStyle.backgroundSize = 'contain';
break;
case 'uniformToFill':
this.elStyle.backgroundSize = 'cover';
break;
default:
this.elStyle.backgroundSize = 'auto auto';
_prop: {
value: 'source',
source: {
set: function (value) {
this.elStyle.backgroundImage = 'url(' + value + ')';
}
}
},
}
},
stretch: {
set: function (value) {
switch (value) {
case 'none':
this.elStyle.backgroundSize = 'auto auto';
break;
case 'fill':
this.elStyle.backgroundSize = '100% 100%';
break;
case 'uniform':
this.elStyle.backgroundSize = 'contain';
break;
case 'uniformToFill':
this.elStyle.backgroundSize = 'cover';
break;
default:
this.elStyle.backgroundSize = 'auto auto';
}
}
},
}
});
});
\ 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', {
ctor: function () {
var self = this;
this.el.addEventListener('click', function (e) {
self.fire('click', e);
});
},
_prop: {
value: '_value',
_value: {}
}
return UIComponent.extend('UI.Controls', 'ItemTemplate', {
ctor: function () {
var self = this;
this.el.addEventListener('click', function (e) {
self.fire('click', e);
});
},
_prop: {
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++;
......@@ -67,44 +71,44 @@ module.exports = (function () {
var layoutsCache = {};
var simpleKey = function (cfg) {
return new Key({text: cfg, value: cfg});
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){
}*/
}*/
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,20 +2,26 @@
* 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', {
_prop: {
value: 'text',
text: {
set: function (val) {
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: {
set: function (val) {
this.el.innerHTML = val === void 0 ? '' : val;
this.el.innerHTML = val === void 0 ? '' : val;
}
}
}
}
}
}, 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', {
ctor: function () {
this.setAll({
scroll: 'vertical',
height: '100%'
});
},
_formatChild: function (childComp) {
var childNode = childComp.el;
childNode.style.position = 'relative';
return ContainerComponent.extend('UI.Controls', 'ListBox', {
ctor: function () {
this.setAll({
scroll: 'vertical',
height: '100%'
});
},
_formatChild: function (childComp) {
var childNode = childComp.el;
childNode.style.position = 'relative';
if (this._data.orientation === 'horizontal') {
childNode.style.float = 'left';
childNode.style.clear = 'none';
}
if (this._data.orientation === 'vertical') {
childNode.style.float = 'none';
childNode.style.clear = 'both';
}
},
_handleChildren: function (childComp, index) {
var self = this;
this._formatChild(childComp);
var childNode = childComp.el;
if (this._data.orientation === 'horizontal') {
childNode.style.float = 'left';
childNode.style.clear = 'none';
}
if (this._data.orientation === 'vertical') {
childNode.style.float = 'none';
childNode.style.clear = 'both';
}
},
_handleChildren: function (childComp, index) {
var self = this;
this._formatChild(childComp);
var childNode = childComp.el;
/*
childNode.addEventListener('click', function () {
self.set('selectedIndex', index);
self.fire('select', index);
});
childNode.addEventListener('mouseover', function () {
if (self.get('hoverMode')) {
self.set('selectedIndex', index);
}
});
*/
},
_prop: {
hoverMode: {},
orientation: {
set: function (value) {
var iterator = this._children.iterator(), item;
/*
childNode.addEventListener('click', function () {
self.set('selectedIndex', index);
self.fire('select', index);
});
childNode.addEventListener('mouseover', function () {
if (self.get('hoverMode')) {
self.set('selectedIndex', index);
}
});
*/
},
_prop: {
hoverMode: {},
orientation: {
set: function (value) {
var iterator = this._children.iterator(), item;
while (item = iterator.next()) {
this._formatChild(item);
while (item = iterator.next()) {
this._formatChild(item);
}
}
}
}
}
});
});
});
\ 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', {
_prop: {
value: 'text',
text: {
get: function () {
return this.input.value;
return UIComponent.extend('UI.Controls', 'TextArea', {
_prop: {
value: 'text',
text: {
get: function () {
return this.input.value;
},
set: function (value) {
this.input.value = value;
}
},
label: {
set: function (val) {
this.label.innerText = val;
}
},
set: function (value) {
this.input.value = value;
}
},
label: {
set: function (val) {
this.label.innerText = val;
}
},
fontSize: {
set: function (value) {
this.input.style.fontSize = value;
this.input.style.lineHeight = value;
}
},
fontSize: {
set: function (value) {
this.input.style.fontSize = value;
this.input.style.lineHeight = value;
}
},
color: {
set: function (value) {
this.input.style.color = value;
}
},
color: {
set: function (value) {
this.input.style.color = value;
}
},
focused: {
set: function (val) {
this.removeClass(this.el, 'Q-UI-TextArea_focused');
focused: {
set: function (val) {
this.removeClass(this.el, 'Q-UI-TextArea_focused');
if (val === true)
this.addClass(this.el, 'Q-UI-TextArea_focused');
if (val === true)
this.addClass(this.el, 'Q-UI-TextArea_focused');
}
}
}
}
}, function () {
var self = this;
var input = document.createElement('textarea');
this.el.className = 'Q-UI-TextArea';
input.style['box-sizing'] = 'border-box';
input.style['width'] = '100%';
input.style['height'] = '100%';
input.addEventListener('keyup', function () {
self._propChanged('text', self.get('value'));
});
}, function () {
var self = this;
var input = document.createElement('textarea');
this.el.className = 'Q-UI-TextArea';
input.style['box-sizing'] = 'border-box';
input.style['width'] = '100%';
input.style['height'] = '100%';
input.addEventListener('keyup', function () {
self._propChanged('text', self.get('value'));
});
input.type = 'text';
input.type = 'text';
this.input = input;
this.input = input;
var label = this.label = document.createElement('span');
label.className = 'Q-UI-TextArea__label';
var label = this.label = document.createElement('span');
label.className = 'Q-UI-TextArea__label';
this.el.appendChild(input);
this.el.appendChild(label);
this.el.appendChild(input);
this.el.appendChild(label);
self.set('width', '400px');
self.set('height', '400px');
});
self.set('width', '400px');
self.set('height', '400px');
});
});
\ 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', {
_prop: {
value: 'text',
text: {
get: function () {
return this.input.value;
return UIComponent.extend('UI.Controls', 'TextArea', {
_prop: {
value: 'text',
text: {
get: function () {
return this.input.value;
},
set: function (value) {
this.input.value = value;
}
},
label: {
set: function (val) {
this.label.innerText = val;
}
},
set: function (value) {
this.input.value = value;
}
},
label: {
set: function (val) {
this.label.innerText = val;
}
},
fontSize: {
set: function (value) {
this.input.style.fontSize = value;
this.input.style.lineHeight = value;
}
},
fontSize: {
set: function (value) {
this.input.style.fontSize = value;
this.input.style.lineHeight = value;
}
},
color: {
set: function (value) {
this.input.style.color = value;
}
},
color: {
set: function (value) {
this.input.style.color = value;
}
},
focused: {
set: function (val) {
this.removeClass(this.el, 'Q-UI-TextArea_focused');
focused: {
set: function (val) {
this.removeClass(this.el, 'Q-UI-TextArea_focused');
if (val === true)
this.addClass(this.el, 'Q-UI-TextArea_focused');
if (val === true)
this.addClass(this.el, 'Q-UI-TextArea_focused');
}
}
}
}
}, function () {
var self = this;
var input = document.createElement('textarea');
this.el.className = 'Q-UI-TextArea';
input.style['box-sizing'] = 'border-box';
input.style['width'] = '100%';
input.style['height'] = '100%';
input.addEventListener('keyup', function () {
self._propChanged('text', self.get('value'));
});
}, function () {
var self = this;
var input = document.createElement('textarea');
this.el.className = 'Q-UI-TextArea';
input.style['box-sizing'] = 'border-box';
input.style['width'] = '100%';
input.style['height'] = '100%';
input.addEventListener('keyup', function () {
self._propChanged('text', self.get('value'));
});
input.type = 'text';
input.type = 'text';
this.input = input;
this.input = input;
var label = this.label = document.createElement('span');
label.className = 'Q-UI-TextArea__label';
var label = this.label = document.createElement('span');
label.className = 'Q-UI-TextArea__label';
this.el.appendChild(input);
this.el.appendChild(label);
this.el.appendChild(input);
this.el.appendChild(label);
self.set('width', '400px');
self.set('height', '400px');
});
self.set('width', '400px');
self.set('height', '400px');
});
});
\ No newline at end of file
UI/Controls/TextBox.js
var UIComponent = require('../UIComponent');
module.exports = UIComponent.extend('UI.Controls', 'TextBox', {
ctor: function () {
var self = this;
var input = document.createElement('input');
this.el.className = 'Q-UI-TextBox';
input.style['box-sizing'] = 'border-box';
input.style['width'] = '100%';
input.addEventListener('keyup', function () {
self._propChanged('text', self.get('value'));
});
input.type = 'text';
this.input = input;
var label = this.label = document.createElement('span');
label.className = 'Q-UI-TextBox__label';
this.el.appendChild(input);
this.el.appendChild(label);
this.set('padding', '0 40px');
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
this.input.value += info.key;
},
_tabProtocol: function (delegate) {
if(delegate) {
this.delegate = delegate;
return true;
}
this.el.classList.add('Focused');
var input = this.input;
setTimeout(function(){
input.focus();
},5);
this.delegate.layout && this.delegate.layout(this.get('layout'));
},
_tabProtocolLeave: function(){
this.el.classList.remove('Focused');
this.delegate.layout && this.delegate.layout('none');
},
_prop: {
value: 'text',
text: {
get: function () {
return this.input.value;
},
set: function (value) {
this.input.value = value;
}
QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
return UIComponent.extend('UI.Controls', 'TextBox', {
ctor: function () {
var self = this;
var input = document.createElement('input');
this.el.className = 'Q-UI-TextBox';
input.style['box-sizing'] = 'border-box';
input.style['width'] = '100%';
input.addEventListener('keyup', function () {
self._propChanged('text', self.get('value'));
});
input.type = 'text';
this.input = input;
var label = this.label = document.createElement('span');
label.className = 'Q-UI-TextBox__label';
this.el.appendChild(input);
this.el.appendChild(label);
this.set('padding', '0 40px');
this.on('click', function () {
self.delegate.activate(self);
});
},
placeholder: {
get: function () {
return this.input.placeholder;
},
set: function (placeholder) {
this.input.placeholder = placeholder;
}
_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;
},
color: {
get: function () {
return this.input.style.color;
},
set: function (value) {
this.input.style.color = value;
_tabProtocol: function (delegate) {
if (delegate) {
this.delegate = delegate;
return true;
}
},
this.el.classList.add('Focused');
var input = this.input;
setTimeout(function () {
input.focus();
}, 5);
this.delegate.layout && this.delegate.layout(this.get('layout'));
label: {
set: function(val){
this.label.innerText = val;
}
},
_tabProtocolLeave: function () {
this.el.classList.remove('Focused');
this.delegate.layout && this.delegate.layout('none');
},
_prop: {
value: 'text',
text: {
get: function () {
return this.input.value;
},
set: function (value) {
this.input.value = value;
}
},
placeholder: {
get: function () {
return this.input.placeholder;
},
set: function (placeholder) {
this.input.placeholder = placeholder;
}
},
color: {
get: function () {
return this.input.style.color;
},
set: function (value) {
this.input.style.color = value;
}
},
label: {
set: function (val) {
this.label.innerText = val;
}
},
focused: {
set: function(val){
this.removeClass(this.el,'Q-UI-TextBox_focused');
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 =
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%');
},
_createEl: function () {
FlexSizeComponent.prototype._createEl.apply(this, arguments);
var self = this;
this.el.addEventListener('resize', function () {
self.updateLayout();
});
},
updateLayout: function () {
var self = this;
var children = this._children;
module.exports = FlexSizeComponent.extend('UI.Controls', 'VBox', {
ctor: function () {
this.set('height', '100%');
},
_createEl: function () {
FlexSizeComponent.prototype._createEl.apply(this, arguments);
var self = this;
this.el.addEventListener('resize', function () {
self.updateLayout();
});
},
updateLayout: function () {
var self = this;
var children = this._children;
clearTimeout(this.updateTimeout);
this.updateTimeout = setTimeout(function () {
var fDef = self._flexDefinition || {parts: [], starCount: 0, flexLength: 0, fixLength: 0};
var starCount = fDef.starCount;
if (fDef.parts.length === 0)
starCount = children.length;
var freeHeight = 100 - 100 * (fDef.fixLength / self.el.clientHeight);
for (var i = 0, length = children.length; i < length; i++) {
var fPart = fDef.parts[i];
var height = freeHeight / starCount + '%';
if (fPart) {
if (fPart.flex && fPart.part > 0) // 25*
height = freeHeight * (fPart.part / fDef.flexLength) + '%';
if (!fPart.flex) { // 25
height = fPart.part + 'px';
clearTimeout(this.updateTimeout);
this.updateTimeout = setTimeout(function () {
var fDef = self._flexDefinition || {parts: [], starCount: 0, flexLength: 0, fixLength: 0};
var starCount = fDef.starCount;
if (fDef.parts.length === 0)
starCount = children.length;
var freeHeight = 100 - 100 * (fDef.fixLength / self.el.clientHeight);
for (var i = 0, length = children.length; i < length; i++) {
var fPart = fDef.parts[i];
var height = freeHeight / starCount + '%';
if (fPart) {
if (fPart.flex && fPart.part > 0) // 25*
height = freeHeight * (fPart.part / fDef.flexLength) + '%';
if (!fPart.flex) { // 25
height = fPart.part + 'px';
}
} else {
height = freeHeight / starCount + '%';
}
children.get(i).set('height', height);
}
} else {
height = freeHeight / starCount + '%';
}
children.get(i).set('height', height);
}, 0);
FlexSizeComponent.prototype.updateLayout.call(this);
},
addChild: function (child) {
var div = new Border({
width: '100%'
});
div.addChild(child);
this._children.push(div);
this.updateLayout();
}
}, 0);
FlexSizeComponent.prototype.updateLayout.call(this);
},
addChild: function (child) {
var div = new Border({
width: '100%'
});
div.addChild(child);
this._children.push(div);
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', {
updateLayout: function () {
this.set('value', this.get('value'));
},
ctor: function () {
this.set('value', 'https://www.w3schools.com/html/mov_bbb.mp4');
},
play: function () {
this.el.play();
},
stop: function () {
this.el.pause();
},
pause: function () {
this.el.pause();
},
createEl: function () {
var self = this;
this.el = document.createElement('video');
return UIComponent.extend('UI.Controls', 'Video', {
updateLayout: function () {
this.set('value', this.get('value'));
},
ctor: function () {
this.set('value', 'https://www.w3schools.com/html/mov_bbb.mp4');
},
play: function () {
this.el.play();
},
stop: function () {
this.el.pause();
},
pause: function () {
this.el.pause();
},
createEl: function () {
var self = this;
this.el = document.createElement('video');
this.el.addEventListener('timeupdate', function (event) {
self.updating = true;
self.set('time', self.el.currentTime);
self.updating = false;
});
this.el.addEventListener('volumechange', function (event) {
self.updating = true;
self.set('volume', self.el.volume);
self.updating = false;
});
this.el.addEventListener('durationchange', function (event) {
self.set('duration', self.el.duration);
});
this.el.addEventListener('click', function () {
self.fire('click');
});
},
_prop: {
time: {
set: function (value) {
if (!this.updating) {
this.el.currentTime = value;
}
}
this.el.addEventListener('timeupdate', function (event) {
self.updating = true;
self.set('time', self.el.currentTime);
self.updating = false;
});
this.el.addEventListener('volumechange', function (event) {
self.updating = true;
self.set('volume', self.el.volume);
self.updating = false;
});
this.el.addEventListener('durationchange', function (event) {
self.set('duration', self.el.duration);
});
this.el.addEventListener('click', function () {
self.fire('click');
});
},
duration: {},
volume: {
description: 'Current volume',
get: function () {
return this.el.volume * 100;
_prop: {
time: {
set: function (value) {
if (!this.updating) {
this.el.currentTime = value;
}
}
},
set: function (value) {
if (!this.updating)
this.el.volume = value / 100;
}
},
controls: {
get: function () {
return this.el.controls;
duration: {},
volume: {
description: 'Current volume',
get: function () {
return this.el.volume * 100;
},
set: function (value) {
if (!this.updating)
this.el.volume = value / 100;
}
},
set: function (value) {
this.el.controls = value;
}
},
muted: {
get: function () {
return this.el.muted;
controls: {
get: function () {
return this.el.controls;
},
set: function (value) {
this.el.controls = value;
}
},
set: function (value) {
this.el.muted = value;
}
},
fullscreen: {
get: function () {
return !!(document.fullscreenElement);
muted: {
get: function () {
return this.el.muted;
},
set: function (value) {
this.el.muted = value;
}
},
set: function (value) {
if (value) {
var el = this.el;
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullScreen) {
el.webkitRequestFullScreen();
}
} else {
var doc = UIComponent.document;
if (doc.exitFullscreen) {
doc.exitFullscreen();
} else if (doc.cancelFullscreen) {
doc.cancelFullscreen();
} else if (doc.mozCancelFullScreen) {
doc.mozCancelFullScreen();
fullscreen: {
get: function () {
return !!(document.fullscreenElement);
},
set: function (value) {
if (value) {
var el = this.el;
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullScreen) {
el.webkitRequestFullScreen();
}
} else {
var doc = UIComponent.document;
if (doc.exitFullscreen) {
doc.exitFullscreen();
} else if (doc.cancelFullscreen) {
doc.cancelFullscreen();
} else if (doc.mozCancelFullScreen) {
doc.mozCancelFullScreen();
}
}
}
}
},
autoplay: {
set: function (value) {
if (value)
this.play();
}
},
loop: {
set: function (value) {
this.el.loop = value;
}
},
value: 'source',
source: {
set: function (value) {
this.stop();
this.el.src = value;
},
autoplay: {
set: function (value) {
if (value)
this.play();
}
},
loop: {
set: function (value) {
this.el.loop = value;
}
},
value: 'source',
source: {
set: function (value) {
this.stop();
this.el.src = value;
if (this.get('autoplay')) {
this.play();
if (this.get('autoplay')) {
this.play();
}
}
}
}
}
});
});
});
\ 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', {
updateLayout: function () {
var self = this;
return ContainerComponent.extend('UI.Controls', 'WrapPanel', {
updateLayout: function () {
var self = this;
setTimeout(function () {
var iterator = self._children.iterator(), item;
while (item = iterator.next()) {
if (item instanceof UIComponent) {
item.set('width', self.get('itemWidth'));
setTimeout(function () {
var iterator = self._children.iterator(), item;
while (item = iterator.next()) {
if (item instanceof UIComponent) {
item.set('width', self.get('itemWidth'));
}
}
}
}, 0);
}, 0);
base.updateLayout.call(this);
},
_handleChildren: function (childComp, index) {
var self = this;
var childNode = childComp.el;
childComp.set('width', this.get('itemWidth'));
base.updateLayout.call(this);
},
_handleChildren: function (childComp, index) {
var self = this;
var childNode = childComp.el;
childComp.set('width', this.get('itemWidth'));
//TODO rewrite to native properties
childNode.style.float = 'left';
childNode.style.position = 'relative';
childNode.style.overflow = 'hidden';
//TODO rewrite to native properties
childNode.style.float = 'left';
childNode.style.position = 'relative';
childNode.style.overflow = 'hidden';
childNode.addEventListener('click', function () {
self.set('selectedIndex', index);
self.fire('itemClick', self.get('selectedItem'), index);
});
},
_prop: {
itemWidth: {
set: function () {
this.updateLayout();
childNode.addEventListener('click', function () {
self.set('selectedIndex', index);
self.fire('itemClick', self.get('selectedItem'), index);
});
},
_prop: {
itemWidth: {
set: function () {
this.updateLayout();
}
}
}
}
});
});
\ 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')
.split(',')
.forEach(function (name) {
dict[name] = UIComponent.extend('UI.HTML', name, {
ctor: function () {
//this._ownComponents.push(new ContentContainer());
this.el = document.createElement(name);
this.el.classList.add(this.baseCls);
},
_prop: {
value: 'text',
text: {
set: function (val) {
//if (!this.textNode) {
// this.textNode = new exports['textNode'];
// this._ownComponents.push(this.textNode);
//}
//this.textNode.set('value', val);
module.exports =
QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
if (!this.textNode) {
this.textNode = document.createTextNode('');
this.el.appendChild(this.textNode);
}
this.textNode.nodeValue = val;
return ('button,canvas,center,div,' +
'h1,h2,h3,h4,h5,h6,' +
'li,ol,span,sub,sup,' +
'table,tbody,td,th,thead,tr,marquee')
.split(',')
.map(function (name) {
return UIComponent.extend('UI.HTML', name, {
ctor: function () {
this.el = document.createElement(name);
this.el.classList.add(this.baseCls);
},
_prop: {
value: 'text',
text: {
set: function (val) {
if (!this.textNode) {
this.textNode = document.createTextNode('');
this.el.appendChild(this.textNode);
}
this.textNode.nodeValue = val;
}
},
html: {
set: function (val) {
this.el.innerHTML = val;
}
}
}
},
html: {
set: function(val){
this.el.innerHTML = val;
}
}
}
});
});
});
});
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");
return QObject.extend('UI.Navigation', 'AbstractAnimation', {
ctor: function () {
this.set('duration', 300);
this.set('startCss', '');
this.set('endCss', '');
},
play: function (target, callback) {
var self = this;
target.set('pureCss', this.get('startCss'));
var AbstractAnimation = QObject.extend('UI.Navigation', 'AbstractAnimation', {
ctor: function () {
this.set('duration', 300);
this.set('startCss', '');
this.set('endCss', '');
},
play: function (target, callback) {
var self = this;
target.set('pureCss', this.get('startCss'));
setTimeout(function () {
target.set('pureCss', 'transition: all ' + self.get('duration') / 1000 + 's');
target.set('pureCss', self.get('endCss') + ';transition: all ' + self.get('duration') / 1000 + 's');
}, 0);
setTimeout(function () {
if (callback) callback();
}, this.get('duration'));
},
playReverse: function (target, callback) {
var self = this;
target.set('pureCss', this.get('endCss') + ';transition: all ' + this.get('duration') / 1000 + 's');
setTimeout(function () {
target.set('pureCss', self.get('startCss') + ';transition: all ' + self.get('duration') / 1000 + 's');
}, 0);
setTimeout(function () {
if (callback) callback();
}, this.get('duration'));
},
_prop: {
duration: {},
startCss: {},
endCss: {}
}
});
module.exports = AbstractAnimation;
\ No newline at end of file
setTimeout(function () {
target.set('pureCss', 'transition: all ' + self.get('duration') / 1000 + 's');
target.set('pureCss', self.get('endCss') + ';transition: all ' + self.get('duration') / 1000 + 's');
}, 0);
setTimeout(function () {
if (callback) callback();
}, this.get('duration'));
},
playReverse: function (target, callback) {
var self = this;
target.set('pureCss', this.get('endCss') + ';transition: all ' + this.get('duration') / 1000 + 's');
setTimeout(function () {
target.set('pureCss', self.get('startCss') + ';transition: all ' + self.get('duration') / 1000 + 's');
}, 0);
setTimeout(function () {
if (callback) callback();
}, this.get('duration'));
},
_prop: {
duration: {},
startCss: {},
endCss: {}
}
});
});
\ No newline at end of file
UI/Navigation/ScaleInAnimation.js
var AbstractAnimation = require('./AbstractAnimation');
var TypeTable =
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) {
newPage.el.style.transform = 'scale(0.2)';
newPage.el.style.opacity = '0';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.transform = 'scale(1)';
newPage.el.style.opacity = '1';
}, 20);
setTimeout(function () {
if (callback)
callback()
}, 320);
},
playReverse: function (newPage, callback) {
newPage.el.style.transform = 'scale(1)';
newPage.el.style.opacity = '1';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.transform = 'scale(0.2)';
newPage.el.style.opacity = '0';
}, 20);
setTimeout(function () {
newPage.el.style.transition = 'all 0s';
if (callback)
callback()
}, 320);
}
});
\ No newline at end of file
module.exports = QRequire(
'Navigation.AbstractAnimation',
function(
AbstractAnimation
) {
'use strict';
return AbstractAnimation.extend('UI.Navigation', 'ScaleInAnimation', {
play: function (newPage, callback) {
newPage.el.style.transform = 'scale(0.2)';
newPage.el.style.opacity = '0';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.transform = 'scale(1)';
newPage.el.style.opacity = '1';
}, 20);
setTimeout(function () {
if (callback)
callback()
}, 320);
},
playReverse: function (newPage, callback) {
newPage.el.style.transform = 'scale(1)';
newPage.el.style.opacity = '1';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.transform = 'scale(0.2)';
newPage.el.style.opacity = '0';
}, 20);
setTimeout(function () {
newPage.el.style.transition = 'all 0s';
if (callback)
callback()
}, 320);
}
});
});
\ No newline at end of file
UI/Navigation/ScaleOutAnimation.js
var AbstractAnimation = require('./AbstractAnimation');
var TypeTable =
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) {
newPage.el.style.transform = 'scale(1)';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.left = '0%';
}, 20);
setTimeout(function () {
newPage.el.style.transform = 'scale(1)';
if (callback)
callback()
}, 320);
},
playReverse: function (newPage, callback) {
newPage.el.style.transform = 'scale(1)';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.transform = 'scale(1)';
}, 20);
setTimeout(function () {
newPage.el.style.transition = 'all 0s';
if (callback)
callback()
}, 320);
}
});
\ No newline at end of file
module.exports = QRequire(
'Navigation.AbstractAnimation',
function(
AbstractAnimation
) {
'use strict';
return AbstractAnimation.extend('UI.Navigation', 'ScaleInAnimation', {
play: function (newPage, callback) {
newPage.el.style.transform = 'scale(1)';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.left = '0%';
}, 20);
setTimeout(function () {
newPage.el.style.transform = 'scale(1)';
if (callback)
callback()
}, 320);
},
playReverse: function (newPage, callback) {
newPage.el.style.transform = 'scale(1)';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.transform = 'scale(1)';
}, 20);
setTimeout(function () {
newPage.el.style.transition = 'all 0s';
if (callback)
callback()
}, 320);
}
});
});
\ No newline at end of file
UI/Navigation/SwipeInAnimation.js
var AbstractAnimation = require('./AbstractAnimation');
var TypeTable =
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) {
newPage.el.style.left = '100%';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.left = '0%';
}, 20);
setTimeout(function () {
newPage.el.style.transition = 'all 0s';
if (callback)
callback()
}, 320);
},
playReverse: function (newPage, callback) {
newPage.el.style.left = '0%';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.left = '100%';
}, 20);
setTimeout(function () {
newPage.el.style.transition = 'all 0s';
if (callback)
callback()
}, 320);
}
});
\ No newline at end of file
module.exports = QRequire(
'Navigation.AbstractAnimation',
function(
AbstractAnimation
) {
'use strict';
return AbstractAnimation.extend('UI.Navigation', 'SwipeInAnimation', {
play: function (newPage, callback) {
newPage.el.style.left = '100%';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.left = '0%';
}, 20);
setTimeout(function () {
newPage.el.style.transition = 'all 0s';
if (callback)
callback()
}, 320);
},
playReverse: function (newPage, callback) {
newPage.el.style.left = '0%';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.left = '100%';
}, 20);
setTimeout(function () {
newPage.el.style.transition = 'all 0s';
if (callback)
callback()
}, 320);
}
});
});
\ No newline at end of file
UI/Navigation/SwipeOutAnimation.js
var AbstractAnimation = require('./AbstractAnimation');
var TypeTable =
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) {
newPage.el.style.left = '0%';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.left = '-100%';
}, 20);
setTimeout(function () {
newPage.el.style.transition = 'all 0s';
if (callback)
callback()
}, 320);
},
playReverse: function (newPage, callback) {
newPage.el.style.left = '-100%';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.left = '0%';
}, 20);
setTimeout(function () {
newPage.el.style.transition = 'all 0s';
if (callback)
callback()
}, 320);
}
});
\ No newline at end of file
module.exports = QRequire(
'Navigation.AbstractAnimation',
function(
AbstractAnimation
) {
'use strict';
return AbstractAnimation.extend('UI.Navigation', 'SwipeOutAnimation', {
play: function (newPage, callback) {
newPage.el.style.left = '0%';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.left = '-100%';
}, 20);
setTimeout(function () {
newPage.el.style.transition = 'all 0s';
if (callback)
callback()
}, 320);
},
playReverse: function (newPage, callback) {
newPage.el.style.left = '-100%';
setTimeout(function () {
newPage.el.style.transition = 'all 0.3s';
newPage.el.style.left = '0%';
}, 20);
setTimeout(function () {
newPage.el.style.transition = 'all 0s';
if (callback)
callback()
}, 320);
}
});
});
\ No newline at end of file
UI/Page.js
var TypeTable =
typeof Q != "undefined"
? Q.Core.TypeTable
: require("../Core/TypeTable");
module.exports = QRequire('UI.UIComponent', function(
UIComponent
) {
'use strict';
return UIComponent.extend('UI', 'Page', {
load: function (parent) {
if (!parent) {
this.getVieport().appendChild(this.el);
}
this.updateLayout();
this.fire('loaded');
this.fire('drawed');
var UIComponent = require('./UIComponent');
//setInterval(function () {
if (!parent) {
this.tab = this.__shadowProtocol({type: 'tab'}).delegate;
}
//}.bind(this),1000);
module.exports = UIComponent.extend('UI', 'Page', {
load: function (parent) {
if (!parent) {
this.getVieport().appendChild(this.el);
}
this.updateLayout();
this.fire('loaded');
this.fire('drawed');
//setInterval(function () {
if (!parent) {
this.tab = this.__shadowProtocol({type: 'tab'}).delegate;
//this.bubble({type: 'tab', direction: 1, me: this});
},
_prop: {
value: 'title',
title: {
set: function (value) {
document.title = value;
},
get: function () {
return document.title;
}
},
dataContext: null
}
//}.bind(this),1000);
//this.bubble({type: 'tab', direction: 1, me: this});
},
_prop: {
value: 'title',
title: {
set: function (value) {
document.title = value;
},
get: function () {
return document.title;
}
},
dataContext: null
}
},
function () {
this.setAll({
height: '100%',
width: '100%',
//scroll: 'vertical',
pureCss: "position: absolute; top:0; bottom: 0; left: 0; right: 0; background-size: cover;"
function () {
this.setAll({
height: '100%',
width: '100%',
//scroll: 'vertical',
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 = {},
cssCache = {},
style;
var Style = AbstractComponent.extend('Core', 'Style', {
_anything: true,
_onChildAdd: function (child) {
module.exports =
QRequire('Core.AbstractComponent', function(
AbstractComponent
) {
'use strict';
var cache = {},
cssCache = {},
style;
var Style = AbstractComponent.extend('UI', 'Style', {
_anything: true,
_onChildAdd: function (child) {
child.ref('cls').subscribe(function (val, oldVal) {
child.ref('cls').subscribe(function (val, oldVal) {
});
},
_propChanged: function (key, value, oldValue) {
// OVERHACK
var subs = this.__refs[key];
if (subs)
for (var i = 0; i < subs.length; i++) {
subs[i].resolve(value, oldValue);
}
});
},
_propChanged: function (key, value, oldValue) {
// OVERHACK
var subs = this.__refs[key];
if (subs)
for (var i = 0; i < subs.length; i++) {
subs[i].resolve(value, oldValue);
}
var cls = cache[key] || (cache[key] = this.getBaseCls(key));
if(!cssCache[cls])
cssCache[cls] = {};
var cls = cache[key] || (cache[key] = this.getBaseCls(key));
if (!cssCache[cls])
cssCache[cls] = {};
this.setCss(cls, cssCache[cls], value);
},
addRule: function (cls, style) {
var id, rule;
if(!(style.sheet||{}).insertRule) {
id = (style.styleSheet || style.sheet).addRule(cls, '');
}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 !== '.'){
cls = val.cls
.split('.')
.filter(String)
.concat(baseCls)
.map(function(el){return '.'+el;})
.join('');
this.setCss(cls, cssCache[cls], value);
},
addRule: function (cls, style) {
var id, rule;
if (!(style.sheet || {}).insertRule) {
id = (style.styleSheet || style.sheet).addRule(cls, '');
} 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 !== '.') {
cls = val.cls
.split('.')
.filter(String)
.concat(baseCls)
.map(function (el) {
return '.' + el;
})
.join('');
}else{
cls = '.'+baseCls;
}
var ss = cssCache[cls] = cssCache[cls] || {};
if(!style) {
style = document.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);
} else {
cls = '.' + baseCls;
}
var ss = cssCache[cls] = cssCache[cls] || {};
if (!style) {
style = document.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(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]){
store[i] = rule.style[i] = val[i];
}
!ss.rule && (ss.rule = this.addRule(cls, style));
var rule = ss.rule;
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;
}
}
},
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;
}
});
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
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