2013-12-03 02:49:52 +00:00
|
|
|
///////////////////////////////////////////////////////////////////////////
|
|
|
|
// GUI
|
|
|
|
|
2014-08-25 18:44:59 +00:00
|
|
|
var Actor = Minimart.Actor;
|
2014-07-24 00:21:51 +00:00
|
|
|
var World = Minimart.World;
|
|
|
|
var sub = Minimart.sub;
|
|
|
|
var pub = Minimart.pub;
|
|
|
|
var __ = Minimart.__;
|
|
|
|
var _$ = Minimart._$;
|
|
|
|
|
2013-12-03 02:49:52 +00:00
|
|
|
function piece(text, pos, lo, hi, cls) {
|
|
|
|
return "<span class='"+cls+"'>"+
|
|
|
|
((pos >= lo && pos < hi)
|
|
|
|
? text.substring(lo, pos) + "<span class='cursor'></span>" + text.substring(pos, hi)
|
|
|
|
: text.substring(lo, hi))
|
|
|
|
+ "</span>";
|
|
|
|
}
|
|
|
|
|
|
|
|
function spawnGui() {
|
2014-08-25 18:44:59 +00:00
|
|
|
World.spawn(new Actor(function () {
|
|
|
|
Actor.subscribe(
|
|
|
|
function () { return ["jQuery", "#inputRow", "+keypress", _$("event")]; },
|
|
|
|
function (event) {
|
|
|
|
var keycode = event.keyCode;
|
|
|
|
var character = String.fromCharCode(event.charCode);
|
|
|
|
if (keycode === 37 /* left */) {
|
|
|
|
World.send(["fieldCommand", "cursorLeft"]);
|
|
|
|
} else if (keycode === 39 /* right */) {
|
|
|
|
World.send(["fieldCommand", "cursorRight"]);
|
|
|
|
} else if (keycode === 9 /* tab */) {
|
|
|
|
// ignore
|
|
|
|
} else if (keycode === 8 /* backspace */) {
|
|
|
|
World.send(["fieldCommand", "backspace"]);
|
|
|
|
} else if (character) {
|
|
|
|
World.send(["fieldCommand", ["insert", character]]);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
Actor.observeAdvertisers(
|
|
|
|
function () { return ["fieldContents", _$("text"), _$("pos")]; },
|
|
|
|
{ singleton: "field" },
|
|
|
|
updateDisplay);
|
|
|
|
|
|
|
|
Actor.observeAdvertisers(
|
|
|
|
function () { return ["highlight", _$("state")]; },
|
|
|
|
{ singleton: "highlight" },
|
|
|
|
updateDisplay);
|
|
|
|
|
|
|
|
function updateDisplay() {
|
|
|
|
// BUG: escape text!
|
|
|
|
var text = this.field ? this.field.text : "";
|
|
|
|
var pos = this.field ? this.field.pos : 0;
|
|
|
|
var highlight = this.highlight ? this.highlight.state : false;
|
|
|
|
$("#fieldContents")[0].innerHTML = highlight
|
|
|
|
? piece(text, pos, 0, highlight[0], "normal") +
|
|
|
|
piece(text, pos, highlight[0], highlight[1], "highlight") +
|
|
|
|
piece(text, pos, highlight[1], text.length + 1, "normal")
|
|
|
|
: piece(text, pos, 0, text.length + 1, "normal");
|
|
|
|
}
|
|
|
|
}));
|
2013-12-03 02:49:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////////////////////////////////////////////////////
|
|
|
|
// Textfield Model
|
|
|
|
|
|
|
|
function spawnModel() {
|
|
|
|
var initialContents = "initial";
|
2014-08-25 18:44:59 +00:00
|
|
|
World.spawn(new Actor(function () {
|
|
|
|
this.fieldContents = initialContents;
|
|
|
|
this.cursorPos = initialContents.length; /* positions address gaps between characters */
|
|
|
|
|
|
|
|
Actor.advertise(
|
|
|
|
function () { return ["fieldContents", this.fieldContents, this.cursorPos]; });
|
|
|
|
|
|
|
|
Actor.subscribe(
|
|
|
|
function () { return ["fieldCommand", _$("command")]; },
|
|
|
|
function (command) {
|
|
|
|
if (command === "cursorLeft") {
|
|
|
|
this.cursorPos--;
|
|
|
|
if (this.cursorPos < 0)
|
|
|
|
this.cursorPos = 0;
|
|
|
|
} else if (command === "cursorRight") {
|
|
|
|
this.cursorPos++;
|
|
|
|
if (this.cursorPos > this.fieldContents.length)
|
|
|
|
this.cursorPos = this.fieldContents.length;
|
|
|
|
} else if (command === "backspace" && this.cursorPos > 0) {
|
|
|
|
this.fieldContents =
|
|
|
|
this.fieldContents.substring(0, this.cursorPos - 1) +
|
|
|
|
this.fieldContents.substring(this.cursorPos);
|
|
|
|
this.cursorPos--;
|
|
|
|
} else if (command.constructor === Array && command[0] === "insert") {
|
|
|
|
var newText = command[1];
|
|
|
|
this.fieldContents =
|
|
|
|
this.fieldContents.substring(0, this.cursorPos) +
|
|
|
|
newText +
|
|
|
|
this.fieldContents.substring(this.cursorPos);
|
|
|
|
this.cursorPos += newText.length;
|
|
|
|
}
|
|
|
|
this.updateRoutes();
|
|
|
|
});
|
|
|
|
}));
|
2013-12-03 02:49:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////////////////////////////////////////////////////
|
|
|
|
// Search engine
|
|
|
|
|
|
|
|
function spawnSearch() {
|
2014-08-25 18:44:59 +00:00
|
|
|
World.spawn(new Actor(function () {
|
|
|
|
var self = this;
|
|
|
|
self.fieldContents = "";
|
|
|
|
self.highlight = false;
|
|
|
|
|
|
|
|
Actor.advertise(
|
|
|
|
function () { return ["highlight", self.highlight]; });
|
|
|
|
|
|
|
|
Actor.subscribe(
|
|
|
|
function () { return ["jQuery", "#searchBox", "input", _$("event")]; },
|
|
|
|
search);
|
|
|
|
|
|
|
|
Actor.observeAdvertisers(
|
|
|
|
function () { return ["fieldContents", _$("text"), _$("pos")]; },
|
|
|
|
{ singleton: "field" },
|
|
|
|
function () {
|
|
|
|
self.fieldContents = self.field ? self.field.text : "";
|
|
|
|
search();
|
|
|
|
});
|
|
|
|
|
|
|
|
function search() {
|
|
|
|
var searchtext = $("#searchBox")[0].value;
|
|
|
|
var oldHighlight = self.highlight;
|
|
|
|
if (searchtext) {
|
|
|
|
var pos = self.fieldContents.indexOf(searchtext);
|
|
|
|
self.highlight = (pos !== -1) && [pos, pos + searchtext.length];
|
|
|
|
} else {
|
|
|
|
self.highlight = false;
|
2013-12-03 02:49:52 +00:00
|
|
|
}
|
2014-08-25 18:44:59 +00:00
|
|
|
if (JSON.stringify(oldHighlight) !== JSON.stringify(self.highlight)) {
|
|
|
|
self.updateRoutes();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}));
|
2013-12-03 02:49:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////////////////////////////////////////////////////
|
|
|
|
// Main
|
|
|
|
|
|
|
|
var G;
|
|
|
|
$(document).ready(function () {
|
2014-07-24 00:21:51 +00:00
|
|
|
G = new Minimart.Ground(function () {
|
|
|
|
Minimart.JQuery.spawnJQueryDriver();
|
|
|
|
Minimart.DOM.spawnDOMDriver();
|
|
|
|
Minimart.RoutingTableWidget.spawnRoutingTableWidget("#spy-holder", "spy");
|
2014-03-10 19:02:03 +00:00
|
|
|
|
2013-12-03 02:49:52 +00:00
|
|
|
spawnGui();
|
|
|
|
spawnModel();
|
|
|
|
spawnSearch();
|
|
|
|
});
|
|
|
|
G.startStepping();
|
|
|
|
});
|