'))));
},
handleEvent: function (e) {
if (e.type === "message" && e.message === "bump_count") {
@@ -49,7 +50,7 @@ $(document).ready(function () {
});
G.dataspace.setOnStateChange(function (mux, patch) {
- $("#spy-holder").text(Syndicate.prettyTrie(mux.routingTable));
+ document.getElementById('spy-holder').innerText = Syndicate.prettyTrie(mux.routingTable);
});
G.startStepping();
diff --git a/examples/index.md b/examples/index.md
index 537b758..785187a 100644
--- a/examples/index.md
+++ b/examples/index.md
@@ -13,36 +13,25 @@ This is a simple clickable button; each time the button is clicked,
the number on the face of the button is incremented.
The actor maintaining the counter also maintains the button's label
-and listens to click events. It uses the Syndicate/js DOM driver to
-publish the button's label text based on its internal state, and the
-Syndicate/js jQuery driver to subscribe to button click events.
+and listens to click events. It uses the Syndicate/js UI driver to
+publish the button's label text based on its internal state and to
+subscribe to button click events.
- [DEMO](button/)
- [Source code](button/index.js) using the Syndicate/js DSL
## DOM example
-This example demonstrates two actors, each using the Syndicate/js DOM
-driver to display user interface, and the jQuery driver to receive
-events from it. The first actor presents a button to the user, which
-when clicked sends a message to the other actor. The second actor
-receives messages from the first, updates its internal state, and
-reflects its new internal state in its visible UI.
+This example demonstrates two actors, each using the Syndicate/js UI
+driver to display user interface and receive events from it. The first
+actor presents a button to the user, which when clicked sends a
+message to the other actor. The second actor receives messages from
+the first, updates its internal state, and reflects its new internal
+state in its visible UI.
- [DEMO](dom/)
- [Source code](dom/index.js) in plain JavaScript
-## jQuery Example
-
-This example is similar to the button example, but uses plain
-JavaScript instead of the Syndicate/js DSL, calling out to Syndicate
-as a library. It uses the Syndicate/js jQuery driver to receive click
-events from the button, but does not use the Syndicate/js DOM driver;
-instead, it updates the DOM directly.
-
- - [DEMO](jquery/)
- - [Source code](jquery/index.js) in plain JavaScript
-
## Text Entry Widget
This is a simple text entry GUI control, following a design of
diff --git a/examples/iot/index.js b/examples/iot/index.js
index 445698c..7504683 100644
--- a/examples/iot/index.js
+++ b/examples/iot/index.js
@@ -5,17 +5,15 @@ assertion type tvAlert(text);
assertion type switchAction(on);
assertion type componentPresent(name);
-var DOM = Syndicate.DOM.DOM;
-var jQueryEvent = Syndicate.JQuery.jQueryEvent;
-
///////////////////////////////////////////////////////////////////////////
// TV
function spawnTV() {
actor {
+ var ui = new Syndicate.UI.Anchor();
react {
during tvAlert($text) {
- assert DOM('#tv', 'alert', Mustache.render($('#alert_template').html(), { text: text }));
+ assert ui.context(text).html('#tv', Mustache.render($('#alert_template').html(), { text: text }));
}
}
}
@@ -28,7 +26,7 @@ function spawnRemoteControl() {
actor {
react {
assert componentPresent('remote control');
- on message jQueryEvent('#remote-control', 'click', _) {
+ on message Syndicate.UI.globalEvent('#remote-control', 'click', _) {
:: remoteClick();
}
}
@@ -63,23 +61,24 @@ function spawnRemoteListener() {
function spawnStoveSwitch() {
actor {
this.powerOn = false;
+ this.ui = new Syndicate.UI.Anchor();
react {
assert componentPresent('stove switch');
assert switchState(this.powerOn);
- assert DOM('#stove-switch', 'switch-state',
- Mustache.render($('#stove_element_template').html(),
- { imgurl: ("img/stove-coil-element-" +
- (this.powerOn ? "hot" : "cold") + ".jpg") }));
+ assert this.ui.html('#stove-switch',
+ Mustache.render($('#stove_element_template').html(),
+ { imgurl: ("img/stove-coil-element-" +
+ (this.powerOn ? "hot" : "cold") + ".jpg") }));
- on message jQueryEvent('#stove-switch-on', 'click', _) { this.powerOn = true; }
- on message jQueryEvent('#stove-switch-off', 'click', _) { this.powerOn = false; }
+ on message Syndicate.UI.globalEvent('#stove-switch-on', 'click', _) { this.powerOn = true; }
+ on message Syndicate.UI.globalEvent('#stove-switch-off', 'click', _) { this.powerOn = false; }
on message switchAction($newState) {
this.powerOn = newState;
}
} until {
- case message jQueryEvent('#kill-stove-switch', 'click', _);
+ case message Syndicate.UI.globalEvent('#kill-stove-switch', 'click', _);
}
}
}
@@ -87,18 +86,19 @@ function spawnStoveSwitch() {
function spawnPowerDrawMonitor() {
actor {
this.watts = 0;
+ this.ui = new Syndicate.UI.Anchor();
react {
assert componentPresent('power draw monitor');
assert powerDraw(this.watts);
- assert DOM('#power-draw-meter', 'power-draw',
- Mustache.render($('#power_draw_template').html(), { watts: this.watts }));
+ assert this.ui.html('#power-draw-meter',
+ Mustache.render($('#power_draw_template').html(), { watts: this.watts }));
on asserted switchState($on) {
this.watts = on ? 1500 : 0;
}
} until {
- case message jQueryEvent('#kill-power-draw-monitor', 'click', _);
+ case message Syndicate.UI.globalEvent('#kill-power-draw-monitor', 'click', _);
}
}
}
@@ -207,7 +207,7 @@ function spawnChaosMonkey() {
jKillButtons.prop('disabled', true);
}
}
- on message jQueryEvent(spawnButtonSelector, 'click', _) {
+ on message Syndicate.UI.globalEvent(spawnButtonSelector, 'click', _) {
spawnFunction();
}
}
@@ -219,8 +219,7 @@ function spawnChaosMonkey() {
$(document).ready(function () {
ground dataspace G {
- Syndicate.JQuery.spawnJQueryDriver();
- Syndicate.DOM.spawnDOMDriver();
+ Syndicate.UI.spawnUIDriver();
Syndicate.Timer.spawnTimerDriver();
spawnTV();
diff --git a/examples/jquery/index.html b/examples/jquery/index.html
deleted file mode 100644
index d5bea5b..0000000
--- a/examples/jquery/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
- Syndicate: jQuery Example
-
-
-
-
-
-
-
jQuery example
-
-
0
-
-
-
diff --git a/examples/jquery/index.js b/examples/jquery/index.js
deleted file mode 100644
index 891cc0b..0000000
--- a/examples/jquery/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-"use strict";
-
-var G;
-$(document).ready(function () {
- var Dataspace = Syndicate.Dataspace;
- var sub = Syndicate.sub;
- var __ = Syndicate.__;
- var _$ = Syndicate._$;
-
- G = new Syndicate.Ground(function () {
- console.log('starting ground boot');
-
- Syndicate.JQuery.spawnJQueryDriver();
-
- Dataspace.spawn({
- boot: function () {
- return sub(Syndicate.JQuery.jQueryEvent('#clicker', 'click', __));
- },
- handleEvent: function (e) {
- if (e.type === 'message'
- && Syndicate.JQuery.jQueryEvent.isClassOf(e.message)
- && e.message[0] === '#clicker')
- {
- var r = $('#result');
- r.html(Number(r.html()) + 1);
- }
- }
- });
- });
- G.dataspace.setOnStateChange(function (mux, patch) {
- $("#spy-holder").text(Syndicate.prettyTrie(mux.routingTable));
- });
- G.startStepping();
-});
diff --git a/examples/smoketest-dsl/index.html b/examples/smoketest-dsl/index.html
index b8208b7..b9a3fc6 100644
--- a/examples/smoketest-dsl/index.html
+++ b/examples/smoketest-dsl/index.html
@@ -3,7 +3,6 @@
Syndicate: Smoketest with DSL
-
diff --git a/examples/smoketest/index.html b/examples/smoketest/index.html
index f5a020e..e6853cf 100644
--- a/examples/smoketest/index.html
+++ b/examples/smoketest/index.html
@@ -3,7 +3,6 @@
Syndicate: Smoketest
-
diff --git a/examples/smoketest/index.js b/examples/smoketest/index.js
index a960659..a64f6c5 100644
--- a/examples/smoketest/index.js
+++ b/examples/smoketest/index.js
@@ -3,33 +3,33 @@
var beep = Syndicate.Struct.makeConstructor('beep', ['counter']);
var G;
-$(document).ready(function () {
- var Dataspace = Syndicate.Dataspace;
- var sub = Syndicate.sub;
- var __ = Syndicate.__;
- var _$ = Syndicate._$;
+document.addEventListener('DOMContentLoaded', function () {
+ var Dataspace = Syndicate.Dataspace;
+ var sub = Syndicate.sub;
+ var __ = Syndicate.__;
+ var _$ = Syndicate._$;
- G = new Syndicate.Ground(function () {
- console.log('starting ground boot');
+ G = new Syndicate.Ground(function () {
+ console.log('starting ground boot');
- Dataspace.spawn({
- counter: 0,
- boot: function () {},
- handleEvent: function (e) {},
- step: function () {
- Dataspace.send(beep(this.counter++));
- return this.counter <= 10;
- }
- });
-
- Dataspace.spawn({
- boot: function () { return sub(beep.pattern); },
- handleEvent: function (e) {
- if (e.type === 'message') {
- console.log("beep!", e.message[0]);
- }
- }
- });
+ Dataspace.spawn({
+ counter: 0,
+ boot: function () {},
+ handleEvent: function (e) {},
+ step: function () {
+ Dataspace.send(beep(this.counter++));
+ return this.counter <= 10;
+ }
});
- G.startStepping();
+
+ Dataspace.spawn({
+ boot: function () { return sub(beep.pattern); },
+ handleEvent: function (e) {
+ if (e.type === 'message') {
+ console.log("beep!", e.message[0]);
+ }
+ }
+ });
+ });
+ G.startStepping();
});
diff --git a/examples/svg/index.html b/examples/svg/index.html
index 243dd81..928f7d5 100644
--- a/examples/svg/index.html
+++ b/examples/svg/index.html
@@ -4,7 +4,6 @@
Syndicate: SVG
-
diff --git a/examples/svg/index.js b/examples/svg/index.js
index 153eeda..5811235 100644
--- a/examples/svg/index.js
+++ b/examples/svg/index.js
@@ -1,25 +1,22 @@
-var DOM = Syndicate.DOM.DOM;
+ground dataspace G {
+ Syndicate.UI.spawnUIDriver();
+ Syndicate.Timer.spawnTimerDriver();
-$(document).ready(function () {
- ground dataspace G {
- Syndicate.DOM.spawnDOMDriver();
- Syndicate.Timer.spawnTimerDriver();
+ actor {
+ var ui = new Syndicate.UI.Anchor();
+ react {
+ assert ui.html('#clock',
+ '')
+ when (typeof this.angle === 'number');
- actor {
- react {
- assert DOM('#clock', 'clock',
- '')
- when (typeof this.angle === 'number');
-
- on message Syndicate.Timer.periodicTick(1000) {
- this.angle = ((((Date.now() / 1000) % 60) / 60) - 0.25) * 2 * Math.PI;
- this.handX = 50 + 40 * Math.cos(this.angle);
- this.handY = 50 + 40 * Math.sin(this.angle);
- }
+ on message Syndicate.Timer.periodicTick(1000) {
+ this.angle = ((((Date.now() / 1000) % 60) / 60) - 0.25) * 2 * Math.PI;
+ this.handX = 50 + 40 * Math.cos(this.angle);
+ this.handY = 50 + 40 * Math.sin(this.angle);
}
}
}
-});
+}
diff --git a/examples/textfield-dsl/index.html b/examples/textfield-dsl/index.html
index 9684bd4..a8aa208 100644
--- a/examples/textfield-dsl/index.html
+++ b/examples/textfield-dsl/index.html
@@ -4,7 +4,6 @@
Syndicate: Textfield Example (DSL variation)
-
diff --git a/examples/textfield-dsl/index.js b/examples/textfield-dsl/index.js
index 747f709..45e47a5 100644
--- a/examples/textfield-dsl/index.js
+++ b/examples/textfield-dsl/index.js
@@ -1,7 +1,7 @@
///////////////////////////////////////////////////////////////////////////
// GUI
-var jQueryEvent = Syndicate.JQuery.jQueryEvent;
+var globalEvent = Syndicate.UI.globalEvent;
assertion type fieldCommand(detail);
assertion type fieldContents(text, pos);
assertion type highlight(state);
@@ -36,7 +36,7 @@ function spawnGui() {
var highlight = this.highlightState;
var hLeft = highlight ? highlight[0] : 0;
var hRight = highlight ? highlight[1] : 0;
- $("#fieldContents")[0].innerHTML = highlight
+ document.getElementById("fieldContents").innerHTML = highlight
? piece(text, pos, 0, hLeft, "normal") +
piece(text, pos, hLeft, hRight, "highlight") +
piece(text, pos, hRight, text.length + 1, "normal")
@@ -44,18 +44,22 @@ function spawnGui() {
};
react {
- on message jQueryEvent("#inputRow", "+keypress", $event) {
- var keycode = event.keyCode;
+ on message globalEvent("#inputRow", "+keydown", $event) {
+ switch (event.keyCode) {
+ case 37 /* left */: :: fieldCommand("cursorLeft"); break;
+ case 39 /* right */: :: fieldCommand("cursorRight"); break;
+ case 9 /* tab */: /* ignore */ break;
+ case 8 /* backspace */:
+ event.preventDefault(); // that this works here is a minor miracle
+ :: fieldCommand("backspace");
+ break;
+ default: break;
+ }
+ }
+
+ on message globalEvent("#inputRow", "+keypress", $event) {
var character = String.fromCharCode(event.charCode);
- if (keycode === 37 /* left */) {
- :: fieldCommand("cursorLeft");
- } else if (keycode === 39 /* right */) {
- :: fieldCommand("cursorRight");
- } else if (keycode === 9 /* tab */) {
- // ignore
- } else if (keycode === 8 /* backspace */) {
- :: fieldCommand("backspace");
- } else if (character) {
+ if (event.charCode && character) {
:: fieldCommand(["insert", character]);
}
}
@@ -126,7 +130,7 @@ function spawnSearch() {
this.highlight = false;
this.search = function () {
- var searchtext = $("#searchBox")[0].value;
+ var searchtext = document.getElementById("searchBox").value;
if (searchtext) {
var pos = this.fieldValue.indexOf(searchtext);
this.highlight = (pos !== -1) && [pos, pos + searchtext.length];
@@ -138,7 +142,7 @@ function spawnSearch() {
react {
assert highlight(this.highlight);
- on message jQueryEvent("#searchBox", "input", $event) {
+ on message globalEvent("#searchBox", "input", $event) {
this.search();
}
@@ -153,17 +157,14 @@ function spawnSearch() {
///////////////////////////////////////////////////////////////////////////
// Main
-$(document).ready(function () {
- ground dataspace G {
- Syndicate.JQuery.spawnJQueryDriver();
- Syndicate.DOM.spawnDOMDriver();
+ground dataspace G {
+ Syndicate.UI.spawnUIDriver();
- spawnGui();
- spawnModel();
- spawnSearch();
- }
+ spawnGui();
+ spawnModel();
+ spawnSearch();
+}
- G.dataspace.setOnStateChange(function (mux, patch) {
- $("#spy-holder").text(Syndicate.prettyTrie(mux.routingTable));
- });
+G.dataspace.setOnStateChange(function (mux, patch) {
+ document.getElementById("spy-holder").innerText = Syndicate.prettyTrie(mux.routingTable);
});
diff --git a/examples/textfield/index.html b/examples/textfield/index.html
index 42c64ad..be063ad 100644
--- a/examples/textfield/index.html
+++ b/examples/textfield/index.html
@@ -4,7 +4,6 @@
Syndicate: Textfield Example
-
diff --git a/examples/textfield/index.js b/examples/textfield/index.js
index ec8ff04..adf8a86 100644
--- a/examples/textfield/index.js
+++ b/examples/textfield/index.js
@@ -7,7 +7,7 @@ var Patch = Syndicate.Patch;
var __ = Syndicate.__;
var _$ = Syndicate._$;
-var jQueryEvent = Syndicate.JQuery.jQueryEvent;
+var globalEvent = Syndicate.UI.globalEvent;
var fieldContents = Syndicate.Struct.makeConstructor('fieldContents', ['text', 'pos']);
var highlight = Syndicate.Struct.makeConstructor('highlight', ['state']);
var fieldCommand = Syndicate.Struct.makeConstructor('fieldCommand', ['detail']);
@@ -36,7 +36,8 @@ function spawnGui() {
highlight: { state: false },
boot: function () {
- return Patch.sub(jQueryEvent("#inputRow", "+keypress", __))
+ return Patch.sub(globalEvent("#inputRow", "keypress", __))
+ .andThen(Patch.sub(globalEvent("#inputRow", "+keydown", __)))
.andThen(Patch.sub(fieldContents.pattern))
.andThen(Patch.sub(highlight.pattern));
},
@@ -46,31 +47,40 @@ function spawnGui() {
handleEvent: function (e) {
var self = this;
switch (e.type) {
- case "message":
- var event = e.message[2];
- var keycode = event.keyCode;
- var character = String.fromCharCode(event.charCode);
- if (keycode === 37 /* left */) {
- Dataspace.send(fieldCommand("cursorLeft"));
- } else if (keycode === 39 /* right */) {
- Dataspace.send(fieldCommand("cursorRight"));
- } else if (keycode === 9 /* tab */) {
- // ignore
- } else if (keycode === 8 /* backspace */) {
- Dataspace.send(fieldCommand("backspace"));
- } else if (character) {
- Dataspace.send(fieldCommand(["insert", character]));
- }
- break;
- case "stateChange":
- Trie.projectObjects(e.patch.added, this.fieldContentsProjection).forEach(function (c) {
- self.field = c;
- });
- Trie.projectObjects(e.patch.added, this.highlightProjection).forEach(function (c) {
- self.highlight = c;
- });
- this.updateDisplay();
- break;
+ case "message":
+ var event = e.message[2];
+ switch (event.type) {
+ case "keydown":
+ switch (event.keyCode) {
+ case 37 /* left */: Dataspace.send(fieldCommand("cursorLeft")); break;
+ case 39 /* right */: Dataspace.send(fieldCommand("cursorRight")); break;
+ case 9 /* tab */: /* ignore */ break;
+ case 8 /* backspace */:
+ event.preventDefault(); // that this works here is a minor miracle
+ Dataspace.send(fieldCommand("backspace"));
+ break;
+ default: break;
+ }
+ break;
+ case "keypress":
+ var character = String.fromCharCode(event.charCode);
+ if (event.charCode && character) {
+ Dataspace.send(fieldCommand(["insert", character]));
+ }
+ break;
+ default:
+ break;
+ }
+ break;
+ case "stateChange":
+ Trie.projectObjects(e.patch.added, this.fieldContentsProjection).forEach(function (c) {
+ self.field = c;
+ });
+ Trie.projectObjects(e.patch.added, this.highlightProjection).forEach(function (c) {
+ self.highlight = c;
+ });
+ this.updateDisplay();
+ break;
}
},
@@ -80,7 +90,7 @@ function spawnGui() {
var highlight = this.highlight ? this.highlight.state : false;
var hLeft = highlight ? highlight[0] : 0;
var hRight = highlight ? highlight[1] : 0;
- $("#fieldContents")[0].innerHTML = highlight
+ document.getElementById("fieldContents").innerHTML = highlight
? piece(text, pos, 0, hLeft, "normal") +
piece(text, pos, hLeft, hRight, "highlight") +
piece(text, pos, hRight, text.length + 1, "normal")
@@ -149,14 +159,14 @@ function spawnSearch() {
boot: function () {
this.publishState();
- return Patch.sub(jQueryEvent("#searchBox", "input", __))
+ return Patch.sub(globalEvent("#searchBox", "input", __))
.andThen(Patch.sub(fieldContents.pattern));
},
fieldContentsProjection: fieldContents(_$("text"), _$("pos")),
handleEvent: function (e) {
var self = this;
- if (jQueryEvent.isClassOf(e.message)) {
+ if (globalEvent.isClassOf(e.message)) {
this.search();
}
if (e.type === "stateChange") {
@@ -174,7 +184,7 @@ function spawnSearch() {
},
search: function () {
- var searchtext = $("#searchBox")[0].value;
+ var searchtext = document.getElementById("searchBox").value;
var oldHighlight = this.highlight;
if (searchtext) {
var pos = this.fieldValue.indexOf(searchtext);
@@ -193,10 +203,9 @@ function spawnSearch() {
// Main
var G;
-$(document).ready(function () {
+document.addEventListener('DOMContentLoaded', function () {
G = new Syndicate.Ground(function () {
- Syndicate.JQuery.spawnJQueryDriver();
- Syndicate.DOM.spawnDOMDriver();
+ Syndicate.UI.spawnUIDriver();
spawnGui();
spawnModel();
@@ -204,7 +213,7 @@ $(document).ready(function () {
});
G.dataspace.setOnStateChange(function (mux, patch) {
- $("#spy-holder").text(Syndicate.prettyTrie(mux.routingTable));
+ document.getElementById("spy-holder").innerText = Syndicate.prettyTrie(mux.routingTable);
});
G.startStepping();