app-decorators-todomvc
Version:
Todomvc with app-decorators
295 lines (247 loc) • 12.4 kB
JavaScript
System.register(['app-decorators/src/libs/random-storage', 'app-decorators/src/libs/customelement', 'app-decorators/src/libs/element-to-function', 'app-decorators', './todo-item', './utils', './dom'], function (_export, _context) {
"use strict";
var _storage, _Register, _elementToFunc, component, on, TodoItem, forEach, trigger, append, removeClass, addClass, find, click, toggleClass, findAll, _createClass, _dec, _dec2, _dec3, _dec4, _class, _desc, _value, _class2, _class3, _temp, TodoList;
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 _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;
}, function (_appDecorators) {
component = _appDecorators.component;
on = _appDecorators.on;
}, function (_todoItem) {
TodoItem = _todoItem.TodoItem;
}, function (_utils) {
forEach = _utils.forEach;
trigger = _utils.trigger;
}, function (_dom) {
append = _dom.append;
removeClass = _dom.removeClass;
addClass = _dom.addClass;
find = _dom.find;
click = _dom.click;
toggleClass = _dom.toggleClass;
findAll = _dom.findAll;
}],
execute: function () {
_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;
};
}();
_export('TodoList', TodoList = (_dec = component({
name: 'todo-list',
extends: 'ul'
}), _dec2 = on('new-item'), _dec3 = on('complete [is="todo-item"]'), _dec4 = on('delete [is="todo-item"]'), _dec(_class = (_class2 = (_temp = _class3 = function (_elementToFunc2) {
_inherits(TodoList, _elementToFunc2);
function TodoList() {
_classCallCheck(this, TodoList);
return _possibleConstructorReturn(this, (TodoList.__proto__ || Object.getPrototypeOf(TodoList)).apply(this, arguments));
}
_createClass(TodoList, [{
key: 'onNewItem',
value: function onNewItem(_ref) {
var params = _ref.params;
var todoItem = TodoItem.create({ text: params });
append.call(this, todoItem);
this.update();
}
}, {
key: 'onComplete',
value: function onComplete(_ref2) {
var target = _ref2.target;
target.complete();
this.update();
}
}, {
key: 'onDelete',
value: function onDelete(_ref3) {
var target = _ref3.target;
target.remove();
this.update();
}
}, {
key: 'clear',
value: function clear() {
var _context2;
(_context2 = this.querySelectorAll('li'), forEach).call(_context2, function (element) {
return element.remove();
});
this._triggerCounts({
count: 0, left: 0, completed: 0
});
}
}, {
key: 'update',
value: function update() {
var count = this._getAllCount();
var left = this._getLeftCount();
var completed = this._getCompleteCount();
this._triggerCounts({
count: count, left: left, completed: completed
});
}
}, {
key: 'count',
value: function count(type) {
switch (type) {
case 'all':
return this._getAllCount();
break;
case 'left':
return this._getLeftCount();
break;
case 'complete':
return this._getCompleteCount();
break;
}
}
}, {
key: 'filter',
value: function filter(type) {
var $ = this.querySelectorAll.bind(this);
switch (type) {
case 'all':
this._applyFilterAll($);
break;
case 'active':
this._applyFilterActive($);
break;
case 'completed':
this._applyFilterCompleted($);
break;
}
}
}, {
key: 'toggle',
value: function toggle() {
var maxCount = this.count('all');
var completeCount = this.count('complete');
if (completeCount > 0 && completeCount < maxCount) {
var _context3;
(_context3 = findAll.call(this, 'li:not(.completed)'), forEach).call(_context3, function (el) {
var _context4;
return (_context4 = (_context4 = find.call(el, 'input'), click).call(_context4), addClass).call(_context4, 'completed');
});
} else {
var _context5;
(_context5 = findAll.call(this, 'li'), forEach).call(_context5, function (el) {
var _context6;
return (_context6 = (_context6 = find.call(el, 'input'), click).call(_context6), toggleClass).call(_context6, 'completed');
});
}
}
}, {
key: '_triggerCounts',
value: function _triggerCounts(params) {
trigger.call(this, 'count', params);
}
}, {
key: '_applyFilterAll',
value: function _applyFilterAll($) {
var _context7;
(_context7 = $('ul[is="todo-list"] li'), removeClass).call(_context7, 'hidden');
}
}, {
key: '_applyFilterActive',
value: function _applyFilterActive($) {
var _context8;
(_context8 = $('ul[is="todo-list"] li'), removeClass).call(_context8, 'hidden');
(_context8 = $('ul[is="todo-list"] li.completed'), addClass).call(_context8, 'hidden');
}
}, {
key: '_applyFilterCompleted',
value: function _applyFilterCompleted($) {
var _context9;
(_context9 = $('ul[is="todo-list"] li'), removeClass).call(_context9, 'hidden');
(_context9 = $('ul[is="todo-list"] li:not(.completed)'), addClass).call(_context9, 'hidden');
}
}, {
key: '_getAllCount',
value: function _getAllCount() {
return this.querySelectorAll('li').length;
}
}, {
key: '_getLeftCount',
value: function _getLeftCount() {
return this.querySelectorAll('li:not(.completed)').length;
}
}, {
key: '_getCompleteCount',
value: function _getCompleteCount() {
return this.querySelectorAll('li.completed').length;
}
}], [{
key: 'extends',
get: function get() {
return 'ul';
}
}]);
return TodoList;
}(_elementToFunc(HTMLUListElement)), _class3.$$componentName = 'TodoList', _temp), (_applyDecoratedDescriptor(_class2.prototype, 'onNewItem', [_dec2], Object.getOwnPropertyDescriptor(_class2.prototype, 'onNewItem'), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, 'onComplete', [_dec3], Object.getOwnPropertyDescriptor(_class2.prototype, 'onComplete'), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, 'onDelete', [_dec4], Object.getOwnPropertyDescriptor(_class2.prototype, 'onDelete'), _class2.prototype)), _class2)) || _class));
_Register.Register.customElement(TodoList, _storage.storage.get(TodoList).get('@component'));
_export('TodoList', TodoList);
}
};
});