prepare advanced example

mauriciosoares · Jan 30, 2019 · 200331a · 200331a
1 parent 24c6ba8
commit 200331a
Show file tree

Hide file tree

Showing 11 changed files with 194 additions and 6 deletions.
diff --git a/examples/advanced/index.html b/examples/advanced/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+</head>
+<body>
+  <div class="tweet">
+    <form id="tweet-form">
+      <input type="text" class="tweet-input">
+    </form>
+  </div>
+
+  <ul class="tweetlist"  id="tweet-list">
+    <li class="tweetlist-item">
+      @omauriciosoares<br>
+      Core.js rocks!
+    </li>
+  </ul>
+
+  <script
+    src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
+    crossorigin="anonymous"></script>
+  <script type="module" src="./main.js"></script>
+</body>
+</html>
diff --git a/examples/advanced/main.js 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
@@ -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
@@ -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
@@ -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
@@ -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 = $(
+        `<li class="tweetlist-item">
+            ${data.author}<br>
+            ${data.tweet}
+        </li>`);
+        li.append();
+
+        return li;
+      }
+    }
+});
diff --git a/examples/advanced/tweet-validator.js 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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 import {Core} from "../../src/core/core.js";
 
-// tweet-list.js
+
 Core.register('tweet-list', function(sandbox) {
     return {
       init: function() {