architype/EditorHelp.js at master · firestuff/architype · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
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();
  }
}