app-decorators-todomvc
Version:
Todomvc with app-decorators
196 lines (160 loc) • 9.59 kB
JavaScript
System.register(['app-decorators/src/libs/random-storage', 'app-decorators/src/libs/customelement', 'app-decorators/src/libs/element-to-function', 'app-decorators', './dom', './todo-new', './todo-list'], function (_export, _context) {
"use strict";
var _storage, _Register, _elementToFunc, component, view, on, action, style, addClass, removeClass, show, hide, text, click, _createClass, _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _class, _desc, _value, _class2, _class3, _temp, Todomvc;
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;
view = _appDecorators.view;
on = _appDecorators.on;
action = _appDecorators.action;
style = _appDecorators.style;
}, function (_dom) {
addClass = _dom.addClass;
removeClass = _dom.removeClass;
show = _dom.show;
hide = _dom.hide;
text = _dom.text;
click = _dom.click;
}, function (_todoNew) {}, function (_todoList) {}],
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('Todomvc', Todomvc = (_dec = style([{
attachOn: "load",
imports: ["./node_modules/todomvc-app-css/index.css"],
styles: "",
type: "on"
}, {
attachOn: "immediately",
imports: ["./node_modules/todomvc-common/base.css"],
styles: "",
type: "default"
}]), _dec2 = view('\n <section class="todoapp">\n <header class="header">\n <h1>todos</h1>\n <input is="todo-new" target=".todo-list" class="new-todo" placeholder="What needs to be done?" autofocus="">\n </header>\n <section class="main">\n <input class="toggle-all mark-all" id="toggle-all" type="checkbox" />\n <label for="toggle-all">Mark all as complete</label>\n <ul class="todo-list" is="todo-list"></ul>\n </section>\n <footer class="footer">\n <span class="todo-count"><strong>0</strong> items left</span>\n <ul class="filters">\n <li class="all"><a href="/filter-all">All</a></li>\n <li class="active"><a href="/filter-active">Active</a></li>\n <li class="completed"><a href="/filter-completed">Completed</a></li>\n </ul>\n <button class="clear-completed">Clear completed</button>\n </footer>\n </section>\n'), _dec3 = component({
name: 'app-todomvc'
}), _dec4 = on('count [is="todo-list"]'), _dec5 = on('change .toggle-all'), _dec6 = on('click .clear-completed'), _dec7 = action('/filter-{{type}}'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = (_temp = _class3 = function (_elementToFunc2) {
_inherits(Todomvc, _elementToFunc2);
function Todomvc() {
_classCallCheck(this, Todomvc);
return _possibleConstructorReturn(this, (Todomvc.__proto__ || Object.getPrototypeOf(Todomvc)).apply(this, arguments));
}
_createClass(Todomvc, [{
key: 'onListCount',
value: function onListCount(_ref) {
var _context2;
var params = _ref.params;
var $ = this.querySelector.bind(this);
var count = params.count,
left = params.left;
(_context2 = $('.todo-count strong'), text).call(_context2, left);
if (count > 0) {
var _context3;
(_context3 = $('footer'), show).call(_context3);
} else {
var _context4;
(_context4 = $('footer'), hide).call(_context4);
}
}
}, {
key: 'toggleAll',
value: function toggleAll() {
this.querySelector('ul[is="todo-list"]').toggle();
}
}, {
key: 'clearCompleted',
value: function clearCompleted() {
this.querySelector('[is="todo-list"]').clear();
}
}, {
key: 'filterItems',
value: function filterItems(_ref2) {
var _context5;
var params = _ref2.params,
target = _ref2.target;
/**
* set filter
*/
// reset filters by removing selected class
(_context5 = this.querySelectorAll('.filters li a'), removeClass).call(_context5, 'selected');
// add selected class to target
addClass.call(target, 'selected');
/**
* apply filter
*/
this.querySelector('ul[is="todo-list"]').filter(params.type);
}
}]);
return Todomvc;
}(_elementToFunc(HTMLDivElement)), _class3.$$componentName = 'Todomvc', _temp), (_applyDecoratedDescriptor(_class2.prototype, 'onListCount', [_dec4], Object.getOwnPropertyDescriptor(_class2.prototype, 'onListCount'), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, 'toggleAll', [_dec5], Object.getOwnPropertyDescriptor(_class2.prototype, 'toggleAll'), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, 'clearCompleted', [_dec6], Object.getOwnPropertyDescriptor(_class2.prototype, 'clearCompleted'), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, 'filterItems', [_dec7], Object.getOwnPropertyDescriptor(_class2.prototype, 'filterItems'), _class2.prototype)), _class2)) || _class) || _class) || _class));
_Register.Register.customElement(Todomvc, _storage.storage.get(Todomvc).get('@component'));
_export('Todomvc', Todomvc);
}
};
});