Support for scripts on web pages

This commit is contained in:
Jeff Parsons 2017-01-25 09:44:06 -08:00 committed by Jeff Parsons
commit c37cb26800
4 changed files with 28 additions and 17 deletions

View file

@ -2,15 +2,21 @@
As discussed in /_posts/2017-01-03-pdp-11-tutorials.md, when a page (usually part of a tutorial)
wants to create a control that tests some feature of a machine, the page will define a machine command
using a Liquid-style include that looks like:
using a Liquid-style include that looks like this:
{% include machine-command.html type='button' label='Try It!' machine='vt100' component='Keyboard' command='sendString' value='Hello World' %}
and which should generate something like:
and which should generate something like this:
<button type="button" onclick="commandMachine('vt100','Keyboard','sendString','Hello World')">Try It!</button>
Well, that's us. So let's do it!
Alternatively, if the command parameter is the name of a command string in the page's Front Matter, then this:
{% include machine-command.html type='button' label='Try It!' machine='vt100' component='Keyboard' command='scriptName' %}
should generate something like this:
<button type="button" onclick="commandMachine('vt100','Keyboard','script','...')">Try It!</button>
{% endcomment %}
{% if include.type == "button" %}<button type="button" onclick="commandMachine('{{ include.machine }}','{{ include.component }}','{{ include.command }}','{{ include.value }}')">{{ include.label }}</button>{% else %}<!-- Unrecognized machine control type: {{ include.type }} -->{% endif %}
{% if page.commands[include.command] != nil %}{% assign machine_command = "script" %}{% capture command_value %}{{ page.commands[include.command] | replace:'"','&quot;' }}{% endcapture %}{% else %}{% capture machine_command %}{{ include.command }}{% endcapture %}{% capture command_value %}{{ include.value }}{% endcapture %}{% endif %}{% if include.type == "button" %}<button type="button" onclick="commandMachine('{{ include.machine }}','{{ include.component }}','{{ machine_command }}','{{ command_value }}')">{{ include.label }}</button>{% else %}<!-- Unrecognized machine control type: {{ include.type }} -->{% endif %}

View file

@ -14,10 +14,10 @@ machines:
sticky: top
commands:
bootXXDP: |
select rl11 listDrives RL0
select rl11 listDisks "XXDP+ Diagnostics"
load rl11
boot rl11
select rl11 listDrives RL0;
select rl11 listDisks "XXDP+ Diagnostics";
click rl11 loadDisk;
click rl11 bootDisk
---
This machine is ready to boot [XXDP+ Diagnostics](/disks/dec/rl02k/xxdp/) ("BOOT RL0") and run

View file

@ -105,7 +105,9 @@ class Component {
this.name = parms['name'];
this.comment = parms['comment'];
this.parms = parms;
this['exports'] = {};
this['bindings'] = {};
var i = this.id.indexOf('.');
if (i < 0) {
@ -129,7 +131,6 @@ class Component {
this.fnReady = null;
this.clearError();
this.bindings = {};
this.bitsMessage = bitsMessage || 0;
/** @type {Object|null} controlPrint is the HTML control, if any, that we can print to */

View file

@ -112,15 +112,19 @@ function commandMachine(idMachine, sComponent, sCommand, sValue)
if (window.findMachineComponent) {
var component = window.findMachineComponent(idMachine, sComponent);
if (component) {
var exports = component['exports'];
if (exports) {
var fnCommand = exports[sCommand];
if (fnCommand) {
//noinspection JSUnresolvedFunction
if (!fnCommand.call(component, sValue)) {
window.alert("Error calling " + idMachine + "." + sComponent + "." + sCommand + "(" + sValue + ")");
if (sCommand == "script") {
window.alert("script(" + sValue + ")");
} else {
var exports = component['exports'];
if (exports) {
var fnCommand = exports[sCommand];
if (fnCommand) {
//noinspection JSUnresolvedFunction
if (!fnCommand.call(component, sValue)) {
window.alert("Error calling " + idMachine + "." + sComponent + "." + sCommand + "(" + sValue + ")");
}
return;
}
return;
}
}
}