From cafbd5187b90466fd175dd2498885e6a294fa70e Mon Sep 17 00:00:00 2001 From: EEvgeniiF Date: Tue, 8 Nov 2016 21:46:40 +0300 Subject: [PATCH 1/6] implement EventEmitter (NOT TESTED :grin:) --- js/EventEmitter.js | 61 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 js/EventEmitter.js diff --git a/js/EventEmitter.js b/js/EventEmitter.js new file mode 100644 index 00000000..790f0eb0 --- /dev/null +++ b/js/EventEmitter.js @@ -0,0 +1,61 @@ +'use strict'; +export default class EventEmitter { + listeners = {}; + observables = {}; + + on(eventName, handler) { + if (typeof this.listeners[eventName] === 'undefined') { + this.listeners[eventName] = []; + } + this.listeners[eventName].push(handler); + } + + emit(eventName, ...args) { + if (typeof this.listeners[eventName] !== 'undefined') { + this.listeners[eventName].forEach(func => { + func(eventName, ...args); + }); + } + } + + off(eventName, handler) { + if (typeof this.listeners[eventName] !== 'undefined') { + this.listeners[eventName] = this.listeners[eventName].filter(listen => handler != listen); + } + } + + removeAll(eventName) { + delete this.listeners[eventName]; + } + + listenTo(observable, eventName) { + if (typeof observable.on === 'undefined' || + typeof observable.off === 'undefined') { + throw new Error('There are not "on" or "off" methods'); + } + observable.on(eventName, this.handler); + if (typeof this.observables[eventName] === 'undefined') { + this.observables[eventName] = []; + } + this.observables[eventName].push(observable); + + } + + handler(eventName, ...args) { + } + + unlistenFrom(observable, eventName) { + observable.off(eventName, this.handler); + if (typeof this.observables[eventName] !== 'undefined') { + this.observables[eventName] = this.observables[eventName].filter(obs => obs !== observable); + } + } + + unlistenAll() { + for (let key in this.observables) { + this.observables[key].forEach(obs => obs.off(key, this.handler)); + delete this.observables[key]; + } + } + +} From 5c14151a0e611e27c19f24219c93d7060b1a67d9 Mon Sep 17 00:00:00 2001 From: EEvgeniiF Date: Tue, 8 Nov 2016 21:51:47 +0300 Subject: [PATCH 2/6] merge --- .gitignore | 1 + .idea/jsLibraryMappings.xml | 6 ++++++ index.html | 2 +- js/app.js | 1 + package.json | 9 ++++++++- readme.md | 5 +++++ 6 files changed, 22 insertions(+), 2 deletions(-) create mode 100644 .idea/jsLibraryMappings.xml diff --git a/.gitignore b/.gitignore index 3c3629e6..1bce614d 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +js/result.js diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 00000000..b8387eb1 --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index b092a0ab..aeb5bc6e 100644 --- a/index.html +++ b/index.html @@ -70,6 +70,6 @@

todos

- + diff --git a/js/app.js b/js/app.js index c2c7396c..776e66cd 100644 --- a/js/app.js +++ b/js/app.js @@ -2,5 +2,6 @@ 'use strict'; // Your starting point. Enjoy the ride! + // Write npm run watch-js to start coding })(window); diff --git a/package.json b/package.json index e939a50f..826679f0 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,13 @@ "private": true, "dependencies": { "todomvc-app-css": "^2.0.0", - "todomvc-common": "^1.0.0" + "todomvc-common": "^1.0.0", + "watchify": "^3.7.0", + "browserify": "^13.1.1" + }, + + "scripts": { + "build-js": "browserify js/app.js > js/result.js", + "watch-js": "watchify js/app.js -o js/result.js" } } diff --git a/readme.md b/readme.md index 2d139eb8..bab3d966 100644 --- a/readme.md +++ b/readme.md @@ -17,3 +17,8 @@ ## License Creative Commons License
This work by TasteJS is licensed under a Creative Commons Attribution 4.0 International License. + +## Usage (build js) + +`npm run build-js` (just build js file) +`npm run watch-js` (start watching your js file) From 39c6597929f51d9bb615112be7653cab4ddf405f Mon Sep 17 00:00:00 2001 From: EEvgeniiF Date: Tue, 8 Nov 2016 22:05:10 +0300 Subject: [PATCH 3/6] edit some signature, add comments --- .gitignore | 1 + js/EventEmitter.js | 30 ++++++++++++++++++------------ 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/.gitignore b/.gitignore index 1bce614d..f0449be1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules js/result.js +.idea diff --git a/js/EventEmitter.js b/js/EventEmitter.js index 790f0eb0..dbdd27f7 100644 --- a/js/EventEmitter.js +++ b/js/EventEmitter.js @@ -3,13 +3,17 @@ export default class EventEmitter { listeners = {}; observables = {}; + /* + methods for observable object + */ + // subscribe to event on(eventName, handler) { if (typeof this.listeners[eventName] === 'undefined') { this.listeners[eventName] = []; } this.listeners[eventName].push(handler); } - + // rise the event emit(eventName, ...args) { if (typeof this.listeners[eventName] !== 'undefined') { this.listeners[eventName].forEach(func => { @@ -17,43 +21,45 @@ export default class EventEmitter { }); } } - + //unsubscribe from event off(eventName, handler) { if (typeof this.listeners[eventName] !== 'undefined') { this.listeners[eventName] = this.listeners[eventName].filter(listen => handler != listen); } } - + //remove all subscribers removeAll(eventName) { delete this.listeners[eventName]; } - listenTo(observable, eventName) { + /* + methods for listener object + */ + + // connect handler method to listen eventName of observable object + listenTo(observable, eventName, handler) { if (typeof observable.on === 'undefined' || typeof observable.off === 'undefined') { throw new Error('There are not "on" or "off" methods'); } - observable.on(eventName, this.handler); + observable.on(eventName, handler); if (typeof this.observables[eventName] === 'undefined') { this.observables[eventName] = []; } - this.observables[eventName].push(observable); - - } + this.observables[eventName].push({observable, handler}); - handler(eventName, ...args) { } unlistenFrom(observable, eventName) { - observable.off(eventName, this.handler); + observable.off(eventName, this.observables[eventName].handler); if (typeof this.observables[eventName] !== 'undefined') { - this.observables[eventName] = this.observables[eventName].filter(obs => obs !== observable); + this.observables[eventName] = this.observables[eventName].filter(obs => obs.observable !== observable); } } unlistenAll() { for (let key in this.observables) { - this.observables[key].forEach(obs => obs.off(key, this.handler)); + this.observables[key].forEach(obs => obs.observable.off(key, obs.handler)); delete this.observables[key]; } } From 4cfc680ebbd7451aa351df6d8053a1769f3730e3 Mon Sep 17 00:00:00 2001 From: EEvgeniiF Date: Sun, 13 Nov 2016 15:15:17 +0300 Subject: [PATCH 4/6] 12 --- .idea/jsLibraryMappings.xml | 1 + 1 file changed, 1 insertion(+) diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml index b8387eb1..a698bcc5 100644 --- a/.idea/jsLibraryMappings.xml +++ b/.idea/jsLibraryMappings.xml @@ -1,6 +1,7 @@ + \ No newline at end of file From 397bb9622bb8a0342ba7125bbbaf806137675262 Mon Sep 17 00:00:00 2001 From: EEvgeniiF Date: Sun, 13 Nov 2016 16:09:37 +0300 Subject: [PATCH 5/6] add model and simple imitation working with API --- index.html | 5 +---- js/api.js | 9 +++++++++ js/model.js | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 4 deletions(-) create mode 100644 js/api.js create mode 100644 js/model.js diff --git a/index.html b/index.html index aeb5bc6e..024b2689 100644 --- a/index.html +++ b/index.html @@ -62,11 +62,8 @@

todos

diff --git a/js/api.js b/js/api.js new file mode 100644 index 00000000..348de285 --- /dev/null +++ b/js/api.js @@ -0,0 +1,9 @@ +module.exports={ + save: (store)=>{ + //TODO better to surround it by try-catch + localStorage.setItem('store', JSON.stringify(store)); + }, + load: ()=>{ + return JSON.parse(localStorage.getItem('store')); + } +}; diff --git a/js/model.js b/js/model.js new file mode 100644 index 00000000..b72910e2 --- /dev/null +++ b/js/model.js @@ -0,0 +1,55 @@ +'use strict'; +const api = require('./api'); + +class Model { + var store = { + lastId: -1, + todo: [ + { + id: 0, + name: 'task for test', + isCompleted: false + } + ] + }; + constructor(){ + this.addTask = this.addTask.bind(this); + this.removeTask = this.removeTask.bind(this); + this.toggleTask = this.toggleTask.bind(this); + this.removeAll = this.removeAll.bind(this); + this.save = this.save.bind(this); + this.load = this.load.bind(this); + } + addTask(name, isCompleted = true) { + var id = this.store.lastId + 1; + this.store.todo.push({id:id, name: name, isCompleted: isCompleted}); + this.store.lastId = id; + return id; + } + removeTask(id){ + this.store.todo = this.store.todo.filter(todo => todo.id !== id); + } + toggleTask(id){ + this.store.todo = this.store.map(todo =>{ + if (todo!== id) + return todo; + else { + todo.isCompleted = !todo.isCompleted; + return todo; + } + }); + } + removeAll(){ + this.store.todo = []; + this.store.lastId = -1; + } + save(){ + api.save(this.store); + } + load(){ + this.store = api.load(); + } + +} + +module.exports = Model; From 1fdef8335ecc4443eb325d6dfaa8844832be3f09 Mon Sep 17 00:00:00 2001 From: EEvgeniiF Date: Tue, 15 Nov 2016 12:51:42 +0300 Subject: [PATCH 6/6] tried to start to do View component --- index.html | 77 ++++++++++++++++++++++++++++++++-------------------- js/view.js | 7 +++++ package.json | 6 ++-- 3 files changed, 57 insertions(+), 33 deletions(-) create mode 100644 js/view.js diff --git a/index.html b/index.html index 024b2689..b62f3fc2 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +
@@ -15,6 +16,8 @@

todos

+ +
@@ -22,46 +25,60 @@

todos

    -
  • -
    - - - -
    - -
    • -
  • -
    - - - -
    - -
    • + + + + + + + + + + + + + + + + +
- 0 item left + - + + + + + + + + + + + - +
diff --git a/js/view.js b/js/view.js new file mode 100644 index 00000000..6c3c87a3 --- /dev/null +++ b/js/view.js @@ -0,0 +1,7 @@ +const Handlebars = require('handlebars'); + +var source = $("todo").html(); +var template = Handlebars.compile(source); +var context = { todo: [{name: "first task"}, {name:"second task"}] }; +var html = template(context); +$("document").append(html); diff --git a/package.json b/package.json index 826679f0..614dc4c7 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "private": true, "dependencies": { + "browserify": "^13.1.1", + "handlebars": "^4.0.6", "todomvc-app-css": "^2.0.0", "todomvc-common": "^1.0.0", - "watchify": "^3.7.0", - "browserify": "^13.1.1" + "watchify": "^3.7.0" }, - "scripts": { "build-js": "browserify js/app.js > js/result.js", "watch-js": "watchify js/app.js -o js/result.js"