Retro/pcjs
Watch
1
0
Fork
You've already forked pcjs
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sticky machine and machine command controls are implemented in Jekyll now, too

Browse source
This commit is contained in:
Jeff Parsons 2017-01-03 16:31:08 -08:00 • committed by Jeff Parsons
commit 35eb925f62
5 changed files with 51 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

16
_includes/machine-command.html Normal file
View file

@ -0,0 +1,16 @@
{% comment %}
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:
{% include machine-command.html type='button' label='Try It!' machine='vt100' component='Keyboard' command='sendString' value='Hello World' %}
and which should generate something like:
<button type="button" onclick="commandMachine('vt100','Keyboard','sendString','Hello World')">Try It!</button>
Well, that's us. So let's do it!
{% 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 %}

42
_includes/machine-engines.html
View file

@ -145,46 +145,8 @@ of our Markdown or XML documents. Examples: 'automount' becomes 'autoMount', 'a
{% endif %}
<script type="text/javascript">{{ machine_embed }}('{{ machine.id }}','{{ machine_config }}','{{ machine_template }}','{{ machine_parms }}');</script>
{% if machine.sticky == "top" %}
<script type="text/javascript">
var startMachinePos = -1;
window.onscroll = function() {
var machine = document.getElementById('{{ machine.id }}');
if (machine) {
var machineFooter = document.getElementById('{{ machine.id }}.footer');
if (startMachinePos < 0) {
startMachinePos = findTop(machine);
}
if (window.pageYOffset <= startMachinePos) {
machine.style.position = 'relative';
machine.style.zIndex = 'auto';
machine.style.backgroundColor = '';
machine.style.paddingRight = 0;
if (machineFooter) machineFooter.style.paddingTop = 0;
} else {
machine.style.position = 'fixed';
machine.style.zIndex = 1;
machine.style.backgroundColor = 'white';
machine.style.paddingRight = '30px';
machine.style.top = 0;
if (machineFooter) machineFooter.style.paddingTop = machine.offsetHeight + 'px';
}
}
};
function findTop(obj) {
var curTop = 0;
if (typeof obj.offsetParent != 'undefined' && obj.offsetParent) {
while (obj.offsetParent) {
curTop += obj.offsetTop;
obj = obj.offsetParent;
}
curTop += obj.offsetTop;
}
else if (obj.y) {
curTop += obj.y;
}
return curTop;
}
</script>
<script type="text/javascript" src="{{ site.baseurl }}/modules/shared/lib/sticky.js"></script>
<script type="text/javascript">addStickyMachine('{{ machine.id }}');</script>
{% endif %}
{% if page.build %}
<script type="text/javascript" src="{{ site.baseurl }}/modules/build/lib/build.js"></script>