app-decorators
Version:
Collection of useful ES7 Decorators, writtin in ES6, that can be used for building webapps
526 lines (438 loc) • 22.3 kB
JavaScript
System.register(['app-decorators/src/libs/random-storage', 'app-decorators/src/libs/customelement', 'app-decorators/src/libs/element-to-function'], function (_export, _context) {
"use strict";
var _storage, _Register, _elementToFunc, _typeof, _createClass, _this;
function _initDefineProp(target, property, descriptor, context) {
if (!descriptor) return;
Object.defineProperty(target, property, {
enumerable: descriptor.enumerable,
configurable: descriptor.configurable,
writable: descriptor.writable,
value: descriptor.initializer ? descriptor.initializer.call(context) : void 0
});
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
function _initializerWarningHelper(descriptor, context) {
throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}
function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
var desc = {};
Object['ke' + 'ys'](descriptor).forEach(function (key) {
desc[key] = descriptor[key];
});
desc.enumerable = !!desc.enumerable;
desc.configurable = !!desc.configurable;
if ('value' in desc || desc.initializer) {
desc.writable = true;
}
desc = decorators.slice().reverse().reduce(function (desc, decorator) {
return decorator(target, property, desc) || desc;
}, desc);
if (context && desc.initializer !== void 0) {
desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
desc.initializer = undefined;
}
if (desc.initializer === void 0) {
Object['define' + 'Property'](target, property, desc);
desc = null;
}
return desc;
}
return {
setters: [function (_appDecoratorsSrcLibsRandomStorage) {
_storage = _appDecoratorsSrcLibsRandomStorage;
}, function (_appDecoratorsSrcLibsCustomelement) {
_Register = _appDecoratorsSrcLibsCustomelement;
}, function (_appDecoratorsSrcLibsElementToFunction) {
_elementToFunc = _appDecoratorsSrcLibsElementToFunction.default;
}],
execute: function () {
_typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
_createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
_this = this;
describe.skip('@pipe decorator', function () {
// 1.) alle componenten inhalte instance(domNode) als blob speichern um sie beim nächsten mal als local file zu laden.
// Idee: alle componenten können miteinander kommunizieren, wenn sie
// mit x-foo oder mit irgendeinem html tag z.B. <div is="x-foo"></div>
// erstellt wurden sind.
//
// 2.) Man verringert den komplexität wert
it('...', function () {
var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _dec11, _dec12, _dec13, _dec14, _dec15, _dec16, _dec17, _dec18, _dec19, _dec20, _dec21, _dec22, _dec23, _dec24, _dec25, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _class3, _temp2, _dec26, _dec27, _dec28, _dec29, _dec30, _dec31, _dec32, _dec33, _dec34, _class4, _desc2, _value2, _class5, _descriptor5, _descriptor6, _descriptor7, _class6, _temp4, _dec35, _class7, _class8, _temp6, _dec36, _desc3, _value3, _class9;
var Stream = (_dec = error({ level: 3 }), _dec2 = datapool('information'), _dec3 = style([{
attachOn: "immediately",
imports: [],
styles: 'x-stream {\n\n\t\t\t\t$deltaX: @on(\'wheel\').currentTarget.deltaX;\n\t\t\t\t$deltaY: @on(\'wheel\').currentTarget.deltaY;\n\n\t\t\t\ttop: $deltaX;\n\t\t\t\tleft: $deltaY;\n\t\t\t\tposition: \'absolute\';\n\n\t\t\t\tcontent: "{{ < links.key }}"\n\t\t\t} \n',
type: "default"
}]), _dec4 = component({
name: 'x-stream'
}), _dec5 = on('wheel'), _dec6 = debounce(100), _dec7 = model.attr, _dec8 = model.attr, _dec9 = model.attr, _dec10 = model('change:vorname'), _dec11 = model('change:nachname'), _dec12 = on('get-links'), _dec13 = cond(_this.request.url), _dec14 = request(_this.request.url), _dec15 = request('http://bing.com'), _dec16 = extractFromString(/<a href="(.*)"<\/>/gm), _dec17 = model('change:links'), _dec18 = view.bind, _dec19 = on('startCircleAnimation'), _dec20 = pipe(animationConfig('ease-in-out')), _dec21 = pipe(moveup('100px', '1s'), 'async'), _dec22 = pipe(moveleft('200px', '500ms'), 'async'), _dec23 = pipe(movedown('200px', '800ms'), 'sync'), _dec24 = pipe(moveright('200px', '1s'), 'sync'), _dec25 = on('get', '?stream&firstname={{name}}&lastname{{nachname}}'), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = (_class2 = (_temp2 = _class3 = function (_elementToFunc2) {
_inherits(Stream, _elementToFunc2);
function Stream() {
var _ref;
var _temp, _this2, _ret;
_classCallCheck(this, Stream);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this2 = _possibleConstructorReturn(this, (_ref = Stream.__proto__ || Object.getPrototypeOf(Stream)).call.apply(_ref, [this].concat(args))), _this2), _initDefineProp(_this2, 'vorname', _descriptor, _this2), _initDefineProp(_this2, 'nachname', _descriptor2, _this2), _initDefineProp(_this2, 'links', _descriptor3, _this2), _initDefineProp(_this2, 'id', _descriptor4, _this2), _temp), _possibleConstructorReturn(_this2, _ret);
}
_createClass(Stream, [{
key: 'created',
value: function created() {
// variante 1
this.$.model.vorname = 'Serkan';
this.$.model.nachname = 'Sipahi';
// variante 2
this.$.model.set('vorname', 'Serkan');
this.$.model.set('nachname', 'Sipahi');
}
}, {
key: 'attached',
value: function attached() {
this.trigger('startCircleAnimation');
}
}, {
key: 'onWheel',
value: function onWheel(event) {
console.log(event.deltaX, event.deltaY);
}
/**
* Model settings
*/
}, {
key: 'onChangeVorname',
value: function onChangeVorname(oldValue, newValue) {
this.view.vorname = newValue;
}
}, {
key: 'onChangeNachname',
value: function onChangeNachname(oldValue, newValue) {
this.view.nachname = newValue;
}
}, {
key: 'onExtractedHTML',
value: function onExtractedHTML(links, error) {
if (error) {
throw this.Error('Es ist ein Fehler aufgereten!');
}
this.model.links.push(links);
console.log(this.informationen.model.title);
}
}, {
key: 'onChangeLinks',
value: function onChangeLinks(oldValue, newValue) {
this.view.links = newValue;
}
/**
* on
* @param {string} 'x-button'
* @return {undefined}
*/
}, {
key: 'animation_MoveCircleInBox',
value: function animation_MoveCircleInBox(result, error) {
if (error) {
throw this.Error('Es ist ein Fehler aufgereten!');
}
console.log('animation done!');
}
}, {
key: 'onClickButton',
value: function onClickButton(event) {
this.querySelector('a[is="x-a"]').click();
}
}, {
key: 'onPost',
value: function onPost(_ref2) {
var name = _ref2.name,
nachname = _ref2.nachname;
this.model.vorname = name;
this.model.nachname = nachname;
}
}]);
return Stream;
}(_elementToFunc(HTMLDivElement)), _class3.$$componentName = 'Stream', _temp2), (_applyDecoratedDescriptor(_class2.prototype, 'onWheel', [_dec5, _dec6], Object.getOwnPropertyDescriptor(_class2.prototype, 'onWheel'), _class2.prototype), _descriptor = _applyDecoratedDescriptor(_class2.prototype, 'vorname', [_dec7], {
enumerable: true,
initializer: function initializer() {
return '';
}
}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, 'nachname', [_dec8], {
enumerable: true,
initializer: function initializer() {
return '';
}
}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'links', [_dec9], {
enumerable: true,
initializer: function initializer() {
return [];
}
}), _applyDecoratedDescriptor(_class2.prototype, 'onChangeVorname', [_dec10], Object.getOwnPropertyDescriptor(_class2.prototype, 'onChangeVorname'), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, 'onChangeNachname', [_dec11], Object.getOwnPropertyDescriptor(_class2.prototype, 'onChangeNachname'), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, 'onExtractedHTML', [_dec12, $if, _dec13, _dec14, $else, _dec15, _dec16], Object.getOwnPropertyDescriptor(_class2.prototype, 'onExtractedHTML'), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, 'onChangeLinks', [_dec17], Object.getOwnPropertyDescriptor(_class2.prototype, 'onChangeLinks'), _class2.prototype), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'id', [_dec18], {
enumerable: true,
initializer: function initializer() {
return 0;
}
}), _applyDecoratedDescriptor(_class2.prototype, 'animation_MoveCircleInBox', [_dec19, _dec20, _dec21, _dec22, _dec23, _dec24], Object.getOwnPropertyDescriptor(_class2.prototype, 'animation_MoveCircleInBox'), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, 'onPost', [_dec25], Object.getOwnPropertyDescriptor(_class2.prototype, 'onPost'), _class2.prototype)), _class2)) || _class) || _class) || _class) || _class);
_Register.Register.customElement(Stream, _storage.storage.get(Stream).get('@component'));
var Person = (_dec26 = view({
"compiler": [7, ">= 4.0.0"],
"main": function main(container, depth0, helpers, partials, data) {
var helper,
alias1 = depth0 != null ? depth0 : container.nullContext || {},
alias2 = helpers.helperMissing,
alias3 = "function",
alias4 = container.escapeExpression;
return "\n <div>Personalnr: " + alias4((helper = (helper = helpers.persno || (depth0 != null ? depth0.persno : depth0)) != null ? helper : alias2, (typeof helper === 'undefined' ? 'undefined' : _typeof(helper)) === alias3 ? helper.call(alias1, {
"name": "persno",
"hash": {},
"data": data
}) : helper)) + "</div>\n <div>Vorname: " + alias4((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2, (typeof helper === 'undefined' ? 'undefined' : _typeof(helper)) === alias3 ? helper.call(alias1, {
"name": "name",
"hash": {},
"data": data
}) : helper)) + "</div>\n <div>Nachname: " + alias4((helper = (helper = helpers.nachname || (depth0 != null ? depth0.nachname : depth0)) != null ? helper : alias2, (typeof helper === 'undefined' ? 'undefined' : _typeof(helper)) === alias3 ? helper.call(alias1, {
"name": "nachname",
"hash": {},
"data": data
}) : helper)) + "</div>\n ";
},
"useData": true
}), _dec27 = component({
extends: 'com-model'
}), _dec28 = view('\n\t\t\t<div>Personalnr: {{persno}}</div>\n\t\t\t<div>Vorname: {{name}}</div>\n\t\t\t<div>Nachname: {{nachname}}</div>\n\t\t'), _dec29 = view.bind, _dec30 = view.bind, _dec31 = view.bind, _dec32 = on('created'), _dec33 = on('change:vorname'), _dec34 = on('change:nachname'), _dec26(_class4 = _dec27(_class4 = _dec28(_class4 = (_class5 = (_temp4 = _class6 = function (_elementToFunc3) {
_inherits(Person, _elementToFunc3);
function Person() {
var _ref3;
var _temp3, _this3, _ret2;
_classCallCheck(this, Person);
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return _ret2 = (_temp3 = (_this3 = _possibleConstructorReturn(this, (_ref3 = Person.__proto__ || Object.getPrototypeOf(Person)).call.apply(_ref3, [this].concat(args))), _this3), _initDefineProp(_this3, 'persno', _descriptor5, _this3), _initDefineProp(_this3, 'vorname', _descriptor6, _this3), _initDefineProp(_this3, 'nachname', _descriptor7, _this3), _temp3), _possibleConstructorReturn(_this3, _ret2);
}
_createClass(Person, [{
key: 'onCreated',
value: function onCreated() {}
}, {
key: 'changeName',
value: function changeName(event) {
this.$view.vorname = event.detail.value;
}
}, {
key: 'changeNachname',
value: function changeNachname() {
this.$view.nachname = event.detail.value;
}
}], [{
key: 'extends',
get: function get() {
return 'com-model';
}
}]);
return Person;
}(_elementToFunc(HTMLElement)), _class6.$$componentName = 'Person', _temp4), (_descriptor5 = _applyDecoratedDescriptor(_class5.prototype, 'persno', [_dec29], {
enumerable: true,
initializer: function initializer() {
return 0;
}
}), _descriptor6 = _applyDecoratedDescriptor(_class5.prototype, 'vorname', [_dec30], {
enumerable: true,
initializer: function initializer() {
return '';
}
}), _descriptor7 = _applyDecoratedDescriptor(_class5.prototype, 'nachname', [_dec31], {
enumerable: true,
initializer: function initializer() {
return '';
}
}), _applyDecoratedDescriptor(_class5.prototype, 'onCreated', [_dec32], Object.getOwnPropertyDescriptor(_class5.prototype, 'onCreated'), _class5.prototype), _applyDecoratedDescriptor(_class5.prototype, 'changeName', [_dec33], Object.getOwnPropertyDescriptor(_class5.prototype, 'changeName'), _class5.prototype), _applyDecoratedDescriptor(_class5.prototype, 'changeNachname', [_dec34], Object.getOwnPropertyDescriptor(_class5.prototype, 'changeNachname'), _class5.prototype)), _class5)) || _class4) || _class4) || _class4);
_Register.Register.customElement(Person, _storage.storage.get(Person).get('@component'));
var Staff = (_dec35 = component({
name: 'staff-list',
extends: 'com-collection'
}), _dec35(_class7 = (_temp6 = _class8 = function (_elementToFunc4) {
_inherits(Staff, _elementToFunc4);
function Staff() {
var _ref4;
var _temp5, _this4, _ret3;
_classCallCheck(this, Staff);
for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
return _ret3 = (_temp5 = (_this4 = _possibleConstructorReturn(this, (_ref4 = Staff.__proto__ || Object.getPrototypeOf(Staff)).call.apply(_ref4, [this].concat(args))), _this4), _this4.model = Person, _temp5), _possibleConstructorReturn(_this4, _ret3);
}
_createClass(Staff, null, [{
key: 'extends',
get: function get() {
return 'com-collection';
}
}]);
return Staff;
}(_elementToFunc(HTMLElement)), _class8.$$componentName = 'Staff', _temp6)) || _class7);
_Register.Register.customElement(Staff, _storage.storage.get(Staff).get('@component'));
var TodoNew = (_dec36 = on('keypress:keycode(13)'), (_class9 = function () {
function TodoNew() {
_classCallCheck(this, TodoNew);
}
_createClass(TodoNew, [{
key: 'onKeypress',
value: function onKeypress(_ref5) {
var keyCode = _ref5.keyCode,
target = _ref5.target;
// bei detached alles weglöschen delete this.$
this.$.trigger(document, EVENT_TODOMVC_NEW_ITEM, target.value);
target.value = '';
}
}]);
return TodoNew;
}(), (_applyDecoratedDescriptor(_class9.prototype, 'onKeypress', [_dec36], Object.getOwnPropertyDescriptor(_class9.prototype, 'onKeypress'), _class9.prototype)), _class9));
});
it.skip('should call this.onCreated.on, this.onCreated.view correctly', function () {
var _dec37, _dec38, _dec39, _dec40, _dec41, _dec42, _class10, _desc4, _value4, _class11, _descriptor8, _class12, _temp8;
var Item = (_dec37 = style([{
attachOn: "immediately",
imports: [],
styles: '#header {\n\t\t\t\tbackground-color: blue;\n\t\t\t} \n',
type: "default"
}]), _dec38 = view({
"compiler": [7, ">= 4.0.0"],
"main": function main(container, depth0, helpers, partials, data) {
var helper;
return "\n <header id=\"header\"></header>\n <span class=\"increment\"> + </span>\n <span class=\"decrement\"> - </span>\n <div class=\"container\">\n " + container.escapeExpression((helper = (helper = helpers.count || (depth0 != null ? depth0.count : depth0)) != null ? helper : helpers.helperMissing, typeof helper === "function" ? helper.call(depth0 != null ? depth0 : container.nullContext || {}, {
"name": "count",
"hash": {},
"data": data
}) : helper)) + "\n </div>\n\n <div id=\"count\"></div>\n <div class=\"someting\"></div>\n\n <input @on(change).value=\".field1, .field2\" class=\"field1\" />\n <input @on(change).value=\".field1, .field2\" class=\"field2\" />\n\n <buttom @on(click)=\"saveCount()\"> Save </button>\n\n ";
},
"useData": true
}), _dec39 = component({
name: 'app-counter',
extends: 'section'
}), _dec40 = view.bind, _dec41 = on('click .increment'), _dec42 = on('click .decrement'), _dec37(_class10 = _dec38(_class10 = _dec39(_class10 = (_class11 = (_temp8 = _class12 = function (_elementToFunc5) {
_inherits(Item, _elementToFunc5);
function Item() {
var _ref6;
var _temp7, _this5, _ret4;
_classCallCheck(this, Item);
for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
args[_key4] = arguments[_key4];
}
return _ret4 = (_temp7 = (_this5 = _possibleConstructorReturn(this, (_ref6 = Item.__proto__ || Object.getPrototypeOf(Item)).call.apply(_ref6, [this].concat(args))), _this5), _initDefineProp(_this5, 'count', _descriptor8, _this5), _temp7), _possibleConstructorReturn(_this5, _ret4);
}
_createClass(Item, [{
key: 'increment',
value: function increment(e) {
++this.count;
}
}, {
key: 'decrement',
value: function decrement(e) {
--this.count;
}
}, {
key: 'saveCount',
value: function saveCount(e) {}
}], [{
key: 'extends',
get: function get() {
return 'section';
}
}]);
return Item;
}(_elementToFunc(HTMLElement)), _class12.$$componentName = 'Item', _temp8), (_descriptor8 = _applyDecoratedDescriptor(_class11.prototype, 'count', [_dec40], {
enumerable: true,
initializer: function initializer() {
return 0;
}
}), _applyDecoratedDescriptor(_class11.prototype, 'increment', [_dec41], Object.getOwnPropertyDescriptor(_class11.prototype, 'increment'), _class11.prototype), _applyDecoratedDescriptor(_class11.prototype, 'decrement', [_dec42], Object.getOwnPropertyDescriptor(_class11.prototype, 'decrement'), _class11.prototype)), _class11)) || _class10) || _class10) || _class10);
_Register.Register.customElement(Item, _storage.storage.get(Item).get('@component'));
var item = Item.create();
item.querySelector('.increment').click();
item.querySelector('.increment').click();
item.querySelector('.increment').click();
// ###############
/**
* Options (sind zusätzliche events die gefeuert werden) for actions(Router)
* --no-history:
* 1.) Route wird aus der history entfernt
* 2.) Bestandteil des Routers
*
* --persist:
* 1.) Es wird zusätzlich eine unique id pro Komponente erstellt
* z.B. bei click: ?box-visible=open wird zu ?box-visible=open:cid-3344543
* 2.) Bestandteil des Routers
*
* --group:
* 1.) das wird: box-visible=open:cid-989898, box-visible=close:cid-6565656, box-visible=open:cid-878787
* zu: box-visible=cid-8877363844485746333
* 2.) Bestandteil des Routers
*
* --query:
*
* --query-all:
*
* --query-merge:
*
* --query-merge-all
*
*/
/*
@action('?box-visible={{state}} --query-merge-all') onVisible({ params, href }){
let { state } = params;
if(state === 'open'){
this.show();
} else {
this.hide();
}
href.toggle('state', 'open close');
href.set('state', 'close');
}
*/
});
});
}
};
});
//# sourceMappingURL=pipe.spec.js.map