Nachricht für neue Nutzer.
Nachricht für engagierte Nutzer.
Widget:KnowHowComputer: Unterschied zwischen den Versionen
Aus ZUM-Unterrichten
KKeine Bearbeitungszusammenfassung |
KKeine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
<includeonly> | <includeonly> <script type="text/JavaScript"> | ||
<script type="text/JavaScript"> | |||
(function () { | (function () { | ||
| Zeile 27: | Zeile 26: | ||
gap: 1rem; | gap: 1rem; | ||
grid-template-areas: | grid-template-areas: | ||
"nav nav " | "nav nav " | ||
"main side "; | "main side "; | ||
grid-template-rows: min-content min-content; | grid-template-rows: min-content min-content; | ||
} | } | ||
| Zeile 90: | Zeile 84: | ||
<div> | <div> | ||
<nav class="steueritem"> | <nav class="steueritem"> | ||
<input type="button" | <input type="button" | ||
| Zeile 227: | Zeile 220: | ||
this.shadowRoot.querySelector(':host > div') | this.shadowRoot.querySelector(':host > div') | ||
.classList | .classList | ||
.toggle('no-help', this.hasAttribute('no-help')); | |||
} | } | ||
attributeChangedCallback (name, oldValue, newValue) { | attributeChangedCallback(name, oldValue, newValue) { | ||
this.refreshHelp() | this.refreshHelp() | ||
} | } | ||
| Zeile 274: | Zeile 267: | ||
// Use Array.from to convert HTMLCollection to Array | // Use Array.from to convert HTMLCollection to Array | ||
return Array.from(this.querySelectorAll('khc-memory')) | return Array.from(this.querySelectorAll('khc-memory')) | ||
.map(element => { | .map((element, idx) => { | ||
const programText = element.textContent.trim(); | const programText = element.textContent.trim(); | ||
const program = this.parseProgram(programText); | const [name, program] = this.parseProgram(programText); | ||
return { | return { | ||
name: name, | name: name ?? `Program ${idx + 1}`, | ||
program: program | program: program | ||
}; | }; | ||
| Zeile 288: | Zeile 280: | ||
// Parse program text into a program object | // Parse program text into a program object | ||
parseProgram(programText) { | parseProgram(programText) { | ||
const lines = programText.split('\n') | |||
.map(line => line.trim()) | |||
.filter(line => line !== ''); | |||
let name = | |||
lines.slice(0, 1) | |||
.filter(l => l.startsWith('#')) | |||
.map(l => l.replace(/^#*/, '')) | |||
.map(l => l.trim()) | |||
.find(l => l !== '') ?? null; | |||
return [ | |||
name, | |||
Object.fromEntries( | |||
lines | |||
.filter(l => !l.startsWith('#')) // filter out comments | |||
.map(l => l.split(':', 2).map(s => s.trim())) // split and trim parts | |||
.filter(([address, instruction]) => (address && instruction))) // filter incomplete lines; | |||
]; | |||
} | } | ||
| Zeile 735: | Zeile 741: | ||
})(); | })(); | ||
</script> | </script> | ||
<know-how-computer | <know-how-computer | ||
<!--{if $noHelp|validate:'boolean'|default:'false' == 'true'}--> | <!--{if $noHelp|validate:'boolean'|default:'false' == 'true'}--> | ||
