git.fiddlerwoaroof.com
Browse code

Implement type inheritance

fiddlerwoaroof authored on 08/07/2016 01:20:58
Showing 3 changed files
index.html
History View file @ 07b6350
... ... 
@@ -9,30 +9,11 @@
9 9 
   </head>
10 10
11 11 
   <body>
12 
-	 <h1><li class="name" data-bind="click">JIM</li>: The Javsascript Interface Manager!</h1>
12 
+	 <h1>JIM: The Javsascript Interface Manager!</h1>
13 13 
 	 <div>
14 14 
 		<button id="randomSentence">Random Sentence!</button>
15 15 
 		<button id="pickSentence">Pick a Sentence</button>
16 16 
 	 </div>
17 
-	 <!--
18 
-	 <div class="listbox">
19 
-		<h2>Names</h2>
20 
-		<ul id="names">
21 
-		  <li class="name">Mary</li>
22 
-		  <li class="name">Jane</li>
23 
-		  <li class="name">Anne</li>
24 
-		  <li class="name">John</li>
25 
-		</ul>
26 
-	 </div>
27 
-	 <div class="listbox">
28 
-		<h2>Occupations</h2>
29 
-		<ul id="occupations">
30 
-		  <li class="occupation">builder</li>
31 
-		  <li class="occupation">interface builder</li>
32 
-		</ul>
33 
-	 </div>
34 
-	 -->
35 
-
36 17 
 	 <div id="sentence"></div>
37 18 
 	 <div class="listbox">
38 19 
 		<h2>Subject</h2>
... ... 
@@ -40,7 +21,7 @@
40 21 
 		  <li class="subject">Combat form</li>
41 22 
 		  <li class="subject">Stock</li>
42 23 
 		  <li class="subject">Application software</li>
43 
-		  <li class="subject">The old st paul's stations</li>
24 
+		  <li class="subject">The old St Paul's stations</li>
44 25 
 		  <li class="subject">The cat</li>
45 26 
 		  <li class="subject">The dog</li>
46 27 
 		  <li class="subject">Bob, the tomato,</li>
lib/Command.js
History View file @ 07b6350
... ... 
@@ -52,10 +52,11 @@ Command = (function() {
52 52 
     },
53 53
54 54 
     receive(event, presentationType, arg) {
55 
+      var currentType = this.types[this.currentIdx-1];
55 56 
       var args = Array.prototype.splice(arguments);
56 57 
       args.shift();
57 
-      presentationType.removeReceiver(this);
58 
-      presentationType.deactivateAll();
58 
+      currentType.removeReceiver(this);
59 
+      currentType.deactivateAll();
59 60
60 61 
       if (presentationType.validate.apply(args)) {
61 62 
         this.boundArgs[this.currentIdx-1] = presentationType;
... ... 
@@ -80,6 +81,23 @@ Command = (function() {
80 81 
   }
81 82
82 83 
   Command.prototype = {
84 
+    bindTags(selector, event, parent) {
85 
+      // if (events === undefined) {
86 
+      //   events = [];
87 
+      // } else if (! events instanceof Array) {
88 
+      //   events = [events];
89 
+      // }
90 
+
91 
+      if (parent === undefined) {
92 
+        parent = document.body;
93 
+      }
94 
+
95 
+      var els = parent.querySelectorAll(selector);
96 
+      Array.prototype.forEach.call(els, function (theEl) {
97 
+        theEl.addEventListener(event, this, false);
98 
+      }, this);
99 
+    },
100 
+
83 101 
     run(args) {
84 102 
       if (args === undefined) {
85 103 
         args = [];
... ... 
@@ -91,7 +109,7 @@ Command = (function() {
91 109 
         var type = this.types[idx];
92 110 
         var arg = args[idx];
93 111 
         console.log(this.types[idx], args[idx]);
94 
-        if ( type.name !== arg.name ) {
112 
+        if ( !arg.isOfType(type.name) ) {
95 113 
           throw new PresentationTypeError('wrong type', this.types[idx], args[idx]);
96 114 
         }
97 115 
       }
lib/PresentationType.js
History View file @ 07b6350
... ... 
@@ -11,13 +11,12 @@ PresentationType = (function () {
11 11 
         selector = '.'+this.name;
12 12 
       }
13 13 
       this.selector = selector;
14 
+      this.receivers = [];
14 15 
     } else {
15 16 
       var result = presentationTypes[name];
16 17 
       if (result === undefined) {
17 18 
         result = new PresentationType(name);
18 19 
         presentationTypes[result.name] = result;
19 
-        result.receivers = [];
20 
-
21 20 
       }
22 21 
       return result;
23 22 
     }
... ... 
@@ -26,6 +25,13 @@ PresentationType = (function () {
26 25 
   PresentationType.prototype = {
27 26 
     presentationsTypes: presentationTypes,
28 27
28 
+    isOfType(name) {
29 
+      var type = presentationTypes[name];
30 
+      console.log(name);
31 
+      console.log(type);
32 
+      return type.isPrototypeOf(this);
33 
+    },
34 
+
29 35 
     addReceiver(receiver) {
30 36 
       this.receivers.push(receiver);
31 37 
       return this.receivers.length - 1;
... ... 
@@ -40,17 +46,28 @@ PresentationType = (function () {
40 46 
       return result;
41 47 
     },
42 48
43 
-    notifyReceivers(theEvent) {
49 
+    notifyReceivers(theEvent, self) {
50 
+      if (self === undefined) {
51 
+        self = this;
52 
+      }
53 
+
44 54 
       var outerArgs = Array.prototype.slice.call(arguments);
45 
-      outerArgs.unshift(theEvent, this, this.value);
55 
+      outerArgs.unshift(theEvent, self, self.value);
46 56
47 57 
       this.receivers.forEach((function (theReceiver) {
48 58 
         theReceiver.receive.apply(theReceiver, outerArgs);
49 59 
       }));
60 
+
61 
+      var parent = Object.getPrototypeOf(this);
62 
+      if (parent instanceof PresentationType && parent.receivers !== undefined && parent.receivers !== []) {
63 
+        parent.notifyReceivers(theEvent, self);
64 
+      }
50 65 
     },
51 66
52 67 
     selectAllTags() {
53 
-      return document.querySelectorAll(this.selector);
68 
+      return Array.prototype.slice.call(
69 
+        document.querySelectorAll(this.selector)
70 
+      );
54 71 
     },
55 72
56 73 
     selectAll() {
... ... 
@@ -61,10 +78,10 @@ PresentationType = (function () {
61 78 
     },
62 79
63 80 
     bindTags() {
64 
-      var els = this.selectAllTags();
81 
+      var els = this.selectAllTags().filter(function (theEl) { return theEl.ptObject === undefined; });
65 82
66 83 
       els.forEach(function (theEl) {
67 
-        var content = theEl.textContent;
84 
+        var content = theEl.textContent.trim();
68 85 
         var value = theEl.value;
69 86
70 87
... ... 
@@ -96,6 +113,10 @@ PresentationType = (function () {
96 113 
       });
97 114 
       tag.ptObject = result;
98 115
116 
+      this.classes.forEach(function (cls) {
117 
+        tag.classList.add(cls);
118 
+      });
119 
+
99 120 
       bindTypes.forEach(function (event) {
100 121 
         console.log(event);
101 122 
         tag.addEventListener(event, result, false);
... ... 
@@ -108,10 +129,43 @@ PresentationType = (function () {
108 129 
       }
109 130 
     },
110 131
132 
+    get classes() {
133 
+      var current = this,
134 
+          classes = new Set();
135 
+      while (current instanceof PresentationType) {
136 
+        if (current.name !== undefined) {
137 
+          classes.add(current.name);
138 
+        }
139 
+        current = Object.getPrototypeOf(current);
140 
+      }
141 
+
142 
+      return classes;
143 
+    },
144 
+
145 
+    extend(name, props) {
146 
+      if (this.children === undefined) {
147 
+        this.children = [];
148 
+      }
149 
+
150 
+      if (props === undefined) {
151 
+        props = {};
152 
+      }
153 
+
154 
+      props.name = name;
155 
+      if (props.selector === undefined) {
156 
+        props.selector = '.' + name;
157 
+      }
158 
+      props.receivers = [];
159 
+      var newType = Object.assign(Object.create(this), props);
160 
+      presentationTypes[name] = newType;
161 
+      this.children.push(newType);
162 
+      return newType;
163 
+    },
164 
+
111 165 
     makeTag(value, tagName, bindTypes, content) {
112 166 
       var newTag = document.createElement(tagName);
113 167
114 
-      newTag.classList.add(this.name);
168 
+      this.classes.forEach(function (cls) { newTag.classList.add(cls); });
115 169
116 170 
       if (bindTypes === undefined) {
117 171 
         bindTypes = [];