132 lines
2.6 KiB
JavaScript
132 lines
2.6 KiB
JavaScript
class EditorHelp extends EditorEntryBase {
|
|
constructor(id) {
|
|
super(id);
|
|
|
|
this.elem_.classList.add('help');
|
|
|
|
this.addLine();
|
|
this.addText('Navigation');
|
|
|
|
this.addLine();
|
|
this.addKey('←', '↓', '↑', '→');
|
|
|
|
this.addLine();
|
|
this.addKey('h', 'j', 'k', 'l');
|
|
|
|
this.addLine();
|
|
this.addKey('␛', '', '', '⏎');
|
|
|
|
this.addLine();
|
|
|
|
this.addLine();
|
|
this.addKey('n');
|
|
this.addText('Node ');
|
|
this.addKey('g');
|
|
this.addText('Group');
|
|
|
|
this.addLine();
|
|
this.addKey('i');
|
|
this.addText('Link ');
|
|
this.addKey('a');
|
|
this.addText('Label');
|
|
|
|
this.addLine();
|
|
this.addKey('t');
|
|
this.addText('Tag ');
|
|
this.addKey('?');
|
|
this.addText('Help ');
|
|
|
|
this.addLine();
|
|
this.addKey('⇧');
|
|
this.addText('+');
|
|
this.addKey('n');
|
|
this.addText('Node above');
|
|
|
|
this.addLine();
|
|
this.addKey('d');
|
|
this.addText('Delete ');
|
|
|
|
this.addLine();
|
|
this.addKey('⇧');
|
|
this.addText('+');
|
|
this.addKey('d');
|
|
this.addText('Del after ');
|
|
|
|
this.addLine();
|
|
this.addKey('␣');
|
|
this.addText('Highlight ');
|
|
|
|
this.addLine();
|
|
this.addKey('f');
|
|
this.addText('Flip link ');
|
|
|
|
this.addLine();
|
|
this.addKey('u');
|
|
this.addText('Undo ');
|
|
|
|
this.addLine();
|
|
this.addKey('⇧');
|
|
this.addText('+');
|
|
this.addKey('u');
|
|
this.addText('Redo ');
|
|
|
|
this.addLine();
|
|
this.addKey('m');
|
|
this.addText('Next theme ');
|
|
|
|
this.addLine();
|
|
|
|
this.addLine();
|
|
this.addLink(
|
|
'Tutorial',
|
|
'https://github.com/firestuff/architype/blob/master/TUTORIAL.md');
|
|
this.addLink(
|
|
'GitHub',
|
|
'https://github.com/firestuff/architype/blob/master/README.md');
|
|
}
|
|
|
|
addLine() {
|
|
this.line_ = document.createElement('div');
|
|
this.elem_.appendChild(this.line_);
|
|
}
|
|
|
|
addText(text) {
|
|
let elem = document.createElement('span');
|
|
elem.classList.add('text');
|
|
elem.innerText = text;
|
|
this.line_.appendChild(elem);
|
|
}
|
|
|
|
addKey(...symbols) {
|
|
for (let symbol of symbols) {
|
|
let key = document.createElement('div');
|
|
key.classList.add('key');
|
|
key.innerText = symbol;
|
|
this.line_.appendChild(key);
|
|
}
|
|
}
|
|
|
|
addLink(text, href) {
|
|
let a = document.createElement('a');
|
|
a.href = href;
|
|
a.innerText = text;
|
|
a.target = '_blank';
|
|
this.line_.appendChild(a);
|
|
}
|
|
|
|
afterDomAdd() {
|
|
this.elem_.focus();
|
|
}
|
|
|
|
serialize() {
|
|
return super.serialize({
|
|
type: 'help',
|
|
});
|
|
}
|
|
|
|
static unserialize(ser) {
|
|
return (new EditorHelp(ser.id)).getElement();
|
|
}
|
|
}
|
|
|