1 | 'use strict';
|
2 | let sdoBox = {
|
3 | init() {
|
4 | this.$alternativeId = null;
|
5 | this.$outer = document.createElement('div');
|
6 | this.$outer.classList.add('toolbox-container');
|
7 | this.$container = document.createElement('div');
|
8 | this.$container.classList.add('toolbox');
|
9 | this.$displayLink = document.createElement('a');
|
10 | this.$displayLink.setAttribute('href', '#');
|
11 | this.$displayLink.textContent = 'Syntax-Directed Operations';
|
12 | this.$displayLink.addEventListener('click', e => {
|
13 | e.preventDefault();
|
14 | e.stopPropagation();
|
15 | referencePane.showSDOs(sdoMap[this.$alternativeId] || {}, this.$alternativeId);
|
16 | });
|
17 | this.$container.appendChild(this.$displayLink);
|
18 | this.$outer.appendChild(this.$container);
|
19 | document.body.appendChild(this.$outer);
|
20 | },
|
21 |
|
22 | activate(el) {
|
23 | clearTimeout(this.deactiveTimeout);
|
24 | Toolbox.deactivate();
|
25 | this.$alternativeId = el.id;
|
26 | let numSdos = Object.keys(sdoMap[this.$alternativeId] || {}).length;
|
27 | this.$displayLink.textContent = 'Syntax-Directed Operations (' + numSdos + ')';
|
28 | this.$outer.classList.add('active');
|
29 | let top = el.offsetTop - this.$outer.offsetHeight;
|
30 | let left = el.offsetLeft + 50 - 10;
|
31 | this.$outer.setAttribute('style', 'left: ' + left + 'px; top: ' + top + 'px');
|
32 | if (top < document.body.scrollTop) {
|
33 | this.$container.scrollIntoView();
|
34 | }
|
35 | },
|
36 |
|
37 | deactivate() {
|
38 | clearTimeout(this.deactiveTimeout);
|
39 | this.$outer.classList.remove('active');
|
40 | },
|
41 | };
|
42 |
|
43 | document.addEventListener('DOMContentLoaded', () => {
|
44 | if (typeof sdoMap == 'undefined') {
|
45 | console.error('could not find sdo map');
|
46 | return;
|
47 | }
|
48 | sdoBox.init();
|
49 |
|
50 | let insideTooltip = false;
|
51 | sdoBox.$outer.addEventListener('pointerenter', () => {
|
52 | insideTooltip = true;
|
53 | });
|
54 | sdoBox.$outer.addEventListener('pointerleave', () => {
|
55 | insideTooltip = false;
|
56 | sdoBox.deactivate();
|
57 | });
|
58 |
|
59 | sdoBox.deactiveTimeout = null;
|
60 | [].forEach.call(document.querySelectorAll('emu-grammar[type=definition] emu-rhs'), node => {
|
61 | node.addEventListener('pointerenter', function () {
|
62 | sdoBox.activate(this);
|
63 | });
|
64 |
|
65 | node.addEventListener('pointerleave', () => {
|
66 | sdoBox.deactiveTimeout = setTimeout(() => {
|
67 | if (!insideTooltip) {
|
68 | sdoBox.deactivate();
|
69 | }
|
70 | }, 500);
|
71 | });
|
72 | });
|
73 |
|
74 | document.addEventListener(
|
75 | 'keydown',
|
76 | debounce(e => {
|
77 | if (e.code === 'Escape') {
|
78 | sdoBox.deactivate();
|
79 | }
|
80 | })
|
81 | );
|
82 | });
|