syndicate-lang
/
js-marketplace-2014
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update textfield example to use Actor

This commit is contained in:
Tony Garnock-Jones 2014-08-25 11:44:59 -07:00
parent a0a6a3dbfe
commit f5e59bfcd8
1 changed files with 109 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

236
examples/textfield/index.js
View File

@ -1,7 +1,7 @@
/////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////
// GUI // GUI
var Route = Minimart.Route; var Actor = Minimart.Actor;
var World = Minimart.World; var World = Minimart.World;
var sub = Minimart.sub; var sub = Minimart.sub;
var pub = Minimart.pub; var pub = Minimart.pub;
@ -17,53 +17,47 @@ function piece(text, pos, lo, hi, cls) {
} }
function spawnGui() { function spawnGui() {
World.spawn({ World.spawn(new Actor(function () {
boot: function () { Actor.subscribe(
World.updateRoutes([sub(["jQuery", "#inputRow", "+keypress", __]), function () { return ["jQuery", "#inputRow", "+keypress", _$("event")]; },
sub(["fieldContents", __, __], 0, 1), function (event) {
sub(["highlight", __], 0, 1)]); var keycode = event.keyCode;
}, var character = String.fromCharCode(event.charCode);
fieldContentsSpec: Route.compileProjection(["fieldContents", _$, _$]), if (keycode === 37 /* left */) {
highlightSpec: Route.compileProjection(["highlight", _$]), World.send(["fieldCommand", "cursorLeft"]);
handleEvent: function (e) { } else if (keycode === 39 /* right */) {
switch (e.type) { World.send(["fieldCommand", "cursorRight"]);
case "routes": } else if (keycode === 9 /* tab */) {
var text = "", pos = 0, highlight = false; // ignore
// BUG: escape text! } else if (keycode === 8 /* backspace */) {
var fc = Route.matcherKeys(e.gestalt.project(this.fieldContentsSpec, true)); World.send(["fieldCommand", "backspace"]);
if (fc.length > 0) { } else if (character) {
text = fc[0][0]; World.send(["fieldCommand", ["insert", character]]);
pos = fc[0][1]; }
} });
var hl = Route.matcherKeys(e.gestalt.project(this.highlightSpec, true));
if (hl.length > 0) { Actor.observeAdvertisers(
highlight = hl[0][0]; function () { return ["fieldContents", _$("text"), _$("pos")]; },
} { singleton: "field" },
$("#fieldContents")[0].innerHTML = highlight updateDisplay);
? piece(text, pos, 0, highlight[0], "normal") +
piece(text, pos, highlight[0], highlight[1], "highlight") + Actor.observeAdvertisers(
piece(text, pos, highlight[1], text.length + 1, "normal") function () { return ["highlight", _$("state")]; },
: piece(text, pos, 0, text.length + 1, "normal"); { singleton: "highlight" },
break; updateDisplay);
case "message":
if (e.message[0] === "jQuery") { // it's a keypress event function updateDisplay() {
var keycode = e.message[3].keyCode; // BUG: escape text!
var character = String.fromCharCode(e.message[3].charCode); var text = this.field ? this.field.text : "";
if (keycode === 37 /* left */) { var pos = this.field ? this.field.pos : 0;
World.send(["fieldCommand", "cursorLeft"]); var highlight = this.highlight ? this.highlight.state : false;
} else if (keycode === 39 /* right */) { $("#fieldContents")[0].innerHTML = highlight
World.send(["fieldCommand", "cursorRight"]); ? piece(text, pos, 0, highlight[0], "normal") +
} else if (keycode === 9 /* tab */) { piece(text, pos, highlight[0], highlight[1], "highlight") +
// ignore piece(text, pos, highlight[1], text.length + 1, "normal")
} else if (keycode === 8 /* backspace */) { : piece(text, pos, 0, text.length + 1, "normal");
World.send(["fieldCommand", "backspace"]); }
} else if (character) { }));
World.send(["fieldCommand", ["insert", character]]);
}
}
}
}
});
} }
/////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////
@ -71,92 +65,80 @@ function spawnGui() {
function spawnModel() { function spawnModel() {
var initialContents = "initial"; var initialContents = "initial";
World.spawn({ World.spawn(new Actor(function () {
fieldContents: initialContents, this.fieldContents = initialContents;
cursorPos: initialContents.length, /* positions address gaps between characters */ this.cursorPos = initialContents.length; /* positions address gaps between characters */
boot: function () {
World.updateRoutes(this.subscriptions()); Actor.advertise(
}, function () { return ["fieldContents", this.fieldContents, this.cursorPos]; });
subscriptions: function () {
return [sub(["fieldCommand", __]), Actor.subscribe(
pub(["fieldContents", this.fieldContents, this.cursorPos])]; function () { return ["fieldCommand", _$("command")]; },
}, function (command) {
handleEvent: function (e) { if (command === "cursorLeft") {
switch (e.type) { this.cursorPos--;
case "message": if (this.cursorPos < 0)
if (e.message[1] === "cursorLeft") { this.cursorPos = 0;
this.cursorPos--; } else if (command === "cursorRight") {
if (this.cursorPos < 0) this.cursorPos++;
this.cursorPos = 0; if (this.cursorPos > this.fieldContents.length)
} else if (e.message[1] === "cursorRight") { this.cursorPos = this.fieldContents.length;
this.cursorPos++; } else if (command === "backspace" && this.cursorPos > 0) {
if (this.cursorPos > this.fieldContents.length) this.fieldContents =
this.cursorPos = this.fieldContents.length; this.fieldContents.substring(0, this.cursorPos - 1) +
} else if (e.message[1] === "backspace" && this.cursorPos > 0) { this.fieldContents.substring(this.cursorPos);
this.fieldContents = this.cursorPos--;
this.fieldContents.substring(0, this.cursorPos - 1) + } else if (command.constructor === Array && command[0] === "insert") {
this.fieldContents.substring(this.cursorPos); var newText = command[1];
this.cursorPos--; this.fieldContents =
} else if (e.message[1].constructor === Array && e.message[1][0] === "insert") { this.fieldContents.substring(0, this.cursorPos) +
var newText = e.message[1][1]; newText +
this.fieldContents = this.fieldContents.substring(this.cursorPos);
this.fieldContents.substring(0, this.cursorPos) + this.cursorPos += newText.length;
newText + }
this.fieldContents.substring(this.cursorPos); this.updateRoutes();
this.cursorPos += newText.length; });
} }));
World.updateRoutes(this.subscriptions());
break;
}
}
});
} }
/////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////
// Search engine // Search engine
function spawnSearch() { function spawnSearch() {
World.spawn({ World.spawn(new Actor(function () {
fieldContents: "", var self = this;
highlight: false, self.fieldContents = "";
fieldContentsSpec: Route.compileProjection(["fieldContents", _$, _$]), self.highlight = false;
boot: function () {
World.updateRoutes(this.subscriptions()); Actor.advertise(
}, function () { return ["highlight", self.highlight]; });
subscriptions: function () {
return [sub(["jQuery", "#searchBox", "input", __]), Actor.subscribe(
sub(["fieldContents", __, __], 0, 1), function () { return ["jQuery", "#searchBox", "input", _$("event")]; },
pub(["highlight", this.highlight])]; search);
},
search: function () { Actor.observeAdvertisers(
var searchtext = $("#searchBox")[0].value; function () { return ["fieldContents", _$("text"), _$("pos")]; },
var oldHighlight = this.highlight; { singleton: "field" },
if (searchtext) { function () {
var pos = this.fieldContents.indexOf(searchtext); self.fieldContents = self.field ? self.field.text : "";
this.highlight = (pos !== -1) && [pos, pos + searchtext.length]; search();
} else { });
this.highlight = false;
} function search() {
if (JSON.stringify(oldHighlight) !== JSON.stringify(this.highlight)) { var searchtext = $("#searchBox")[0].value;
World.updateRoutes(this.subscriptions()); var oldHighlight = self.highlight;
} if (searchtext) {
}, var pos = self.fieldContents.indexOf(searchtext);
handleEvent: function (e) { self.highlight = (pos !== -1) && [pos, pos + searchtext.length];
switch (e.type) { } else {
case "routes": self.highlight = false;
var fc = Route.matcherKeys(e.gestalt.project(this.fieldContentsSpec, true));
if (fc.length > 0) {
this.fieldContents = fc[0][0];
}
this.search();
break;
case "message":
if (e.message[0] === "jQuery") { // it's a search box input event
this.search();
}
}
} }
}); if (JSON.stringify(oldHighlight) !== JSON.stringify(self.highlight)) {
self.updateRoutes();
}
}
}));
} }
/////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////