diff --git a/examples/advanced/index.html b/examples/advanced/index.html new file mode 100644 index 0000000..5212cf4 --- /dev/null +++ b/examples/advanced/index.html @@ -0,0 +1,26 @@ + + + + + Document + + +
+
+ +
+
+ + + + + + + diff --git a/examples/advanced/main.js b/examples/advanced/main.js new file mode 100644 index 0000000..f2aea32 --- /dev/null +++ b/examples/advanced/main.js @@ -0,0 +1,10 @@ +import {Core} from "../../src/core/core.js"; +import "./tweet-form.js"; +import "./tweet-list.js"; +import "./tweet-counter.js"; + + +Core.start('tweet-counter', 'first counter'); +Core.start('tweet-form'); +Core.start('tweet-list'); +Core.start('tweet-counter', 'second counter'); diff --git a/examples/advanced/projectCommon.js b/examples/advanced/projectCommon.js new file mode 100644 index 0000000..a50fb78 --- /dev/null +++ b/examples/advanced/projectCommon.js @@ -0,0 +1,27 @@ +/* +this file exports the common interface for the entire project +common things: ui, network, event symbols, etc ... +*/ + +export {$, fetcher, events, errors} + +const $ = window.$; + +// like fetch but throws on 400+ +const fetcher = (url, options) => { + return fetch(url, options).then((response) => { + if (!response.ok) { + throw response; + } + return response; + }); +}; + +const events = { + receiveTweet: Symbol(), + submitTweet: Symbol() +}; + +const errors = { + tweetTooLong: Symbol() +}; diff --git a/examples/advanced/tweet-counter.js b/examples/advanced/tweet-counter.js new file mode 100644 index 0000000..fb9190c --- /dev/null +++ b/examples/advanced/tweet-counter.js @@ -0,0 +1,31 @@ +import {Core} from "../../src/core/core.js"; +import {$, fetcher, events} from "./projectCommon.js"; + +Core.register('tweet-counter', function(sandbox) { + return { + init: function() { + this.counter = document.createElement("output") + this.count = 0; + this.updateCount(); + document.body.appendChild(this.counter); + this.listen(); + }, + + listen: function() { + sandbox.listen(events.receiveTweet, this.newTweet, this); + }, + + updateCount: function() { + this.counter.textContent = this.count; + }, + + newTweet: function(data) { + this.count++; + this.updateCount(); + }, + + destroy: function() { + this.counter.remove(); + } + } +}, true); diff --git a/examples/advanced/tweet-form.js b/examples/advanced/tweet-form.js new file mode 100644 index 0000000..3e294f0 --- /dev/null +++ b/examples/advanced/tweet-form.js @@ -0,0 +1,37 @@ +import {Core} from "../../src/core/core.js"; +import {$, fetcher, events} from "./projectCommon.js"; + + +Core.register('tweet-form', function(sandbox) { + return { + init: function() { + this.$form = $('#tweet-form'); + this.$input = this.$form.find('input'); + + this.addListeners(); + }, + + addListeners: function() { + this.$form.on('submit', this.onSubmit.bind(this)); + }, + + onSubmit: function(e) { + e.preventDefault(); + + var newTweet = this.$input[0].value; + this.$input[0].value = ''; + + this.notify(events.submitTweet); + }, + + notify: function(tweet) { + sandbox.notify({ + type: 'new-tweet', + data: { + tweet: tweet, + author: '@omauriciosoares' + } + }); + } + } +}); diff --git a/examples/advanced/tweet-list.js b/examples/advanced/tweet-list.js new file mode 100644 index 0000000..4340523 --- /dev/null +++ b/examples/advanced/tweet-list.js @@ -0,0 +1,34 @@ +import {Core} from "../../src/core/core.js"; +import {$, fetcher, events} from "./projectCommon.js"; + + +Core.register('tweet-list', function(sandbox) { + return { + init: function() { + this.$list = $('#tweet-list'); + + this.listen(); + }, + + listen: function() { + sandbox.listen(events.receiveTweet, this.newTweet, this); + }, + + newTweet: function(data) { + var newTweetHtml = this.getHtml(data); + + this.$list.prepend(newTweetHtml); + }, + + getHtml: function(data) { + var li = $( + `
  • + ${data.author}
    + ${data.tweet} +
  • `); + li.append(); + + return li; + } + } +}); diff --git a/examples/advanced/tweet-validator.js b/examples/advanced/tweet-validator.js new file mode 100644 index 0000000..aa671c6 --- /dev/null +++ b/examples/advanced/tweet-validator.js @@ -0,0 +1,26 @@ +import {Core} from "../../src/core/core.js"; +import {$, fetcher, events, errors} from "./projectCommon.js"; + + +Core.register('tweet-list', function(sandbox) { + return { + init: function() { + this.maxLength = 100; + + this.listen(); + }, + + listen: function() { + sandbox.listen(events.submitTweet, this.validateTweet, this); + }, + + validateTweet: function(data) { + if (data.length > this.maxLength) { + this.notify(events.error, errors.tweetTooLong); + return; + } + this.notify(events.receiveTweet, data); + } + + } +}); diff --git a/examples/simple/main.js b/examples/simple/main.js index b5c4966..f2aea32 100644 --- a/examples/simple/main.js +++ b/examples/simple/main.js @@ -4,10 +4,7 @@ import "./tweet-list.js"; import "./tweet-counter.js"; - -// boot.js Core.start('tweet-counter', 'first counter'); Core.start('tweet-form'); -//Core.start(); Core.start('tweet-list'); Core.start('tweet-counter', 'second counter'); diff --git a/examples/simple/tweet-counter.js b/examples/simple/tweet-counter.js index e6fb12c..533d3c0 100644 --- a/examples/simple/tweet-counter.js +++ b/examples/simple/tweet-counter.js @@ -1,5 +1,5 @@ import {Core} from "../../src/core/core.js"; -// tweet-form.js + Core.register('tweet-counter', function(sandbox) { return { init: function() { diff --git a/examples/simple/tweet-form.js b/examples/simple/tweet-form.js index d70ed89..a8b8e0e 100644 --- a/examples/simple/tweet-form.js +++ b/examples/simple/tweet-form.js @@ -1,6 +1,6 @@ import {Core} from "../../src/core/core.js"; -// tweet-form.js + Core.register('tweet-form', function(sandbox) { return { init: function() { diff --git a/examples/simple/tweet-list.js b/examples/simple/tweet-list.js index 9cd6d05..6d61a82 100644 --- a/examples/simple/tweet-list.js +++ b/examples/simple/tweet-list.js @@ -1,6 +1,6 @@ import {Core} from "../../src/core/core.js"; -// tweet-list.js + Core.register('tweet-list', function(sandbox) { return { init: function() {