diff --git a/package-lock.json b/package-lock.json index 441e8ccd..35bad1f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,22 +5,22 @@ "requires": true, "dependencies": { "@mcschema/core": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.5.2.tgz", - "integrity": "sha512-uRHTJx1yzwSc5iJBCu+7s9R2j5E4JMD6/iynsVivol/mIarJ1rL5GuPv1pCPaxTx4brXqRVLcXZSteBY/ovKTA==" + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.5.5.tgz", + "integrity": "sha512-2wwtBgwoFm3HgUiT2w/m9IBqGKcYcLY2aRieDSbK6DKoXUbPaU/yKXsZHK76Mr9u5S3knxL0gfZHFXrR03ajtg==" }, "@mcschema/java-1.16": { - "version": "0.2.12", - "resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.2.12.tgz", - "integrity": "sha512-Qh+N7yBqWcajwtzvgZX++38IsLRL1GeVfPqOUJjE9w6Yo953dCS3egD7s+NdS0p45sMX5wN+10JlhiEQFGPbqQ==", + "version": "0.2.14", + "resolved": "https://registry.npmjs.org/@mcschema/java-1.16/-/java-1.16-0.2.14.tgz", + "integrity": "sha512-5Jc4YlpDcSDzUXuyiu5+mihILYFuPZ56eAd77QALX1TmgceSEaR5BnUSV7tJ5Yyn/ifIDpKWGQYAGFFtPXM5Fw==", "requires": { - "@mcschema/core": "^0.5.2" + "@mcschema/core": "^0.5.4" } }, "@mcschema/locales": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/@mcschema/locales/-/locales-0.1.3.tgz", - "integrity": "sha512-D8AYwICYmOgDp1ia85jUcTTcJkmylzB7ElVYIMFmsokm+Fjav1ptxJXdv1SDctII749LEWQy7+oF53xpB7zneA==" + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/@mcschema/locales/-/locales-0.1.5.tgz", + "integrity": "sha512-5LbvGoNz523RPjU0yfdUdSPaUcooOOkU2nuh+18ZHwrpwp0nuusPvW57DFjAygF2eh9QwdTmWn9tVBWc1S0rCg==" }, "@nodelib/fs.scandir": { "version": "2.1.3", diff --git a/package.json b/package.json index ebeb9f90..8e4e590f 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ "author": "Misode", "license": "MIT", "dependencies": { - "@mcschema/core": "^0.5.2", - "@mcschema/locales": "^0.1.3", - "@mcschema/java-1.16": "^0.2.12", + "@mcschema/core": "^0.5.5", + "@mcschema/locales": "^0.1.5", + "@mcschema/java-1.16": "^0.2.14", "@types/google.analytics": "0.0.40", "@types/split.js": "^1.4.0", "copy-webpack-plugin": "^6.0.1", diff --git a/src/app/app.ts b/src/app/app.ts index 31200bc6..22b006f2 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -41,8 +41,29 @@ let models: { [key: string]: DataModel } = {} config.models.forEach(buildModel) const treeViewObserver = (el: HTMLElement) => { + el.querySelectorAll('.node-header[data-help]').forEach(e => { + const div = document.createElement('div') + div.className = 'node-icon' + div.addEventListener('click', evt => { + div.getElementsByTagName('span')[0].classList.add('show') + document.body.addEventListener('click', evt => { + div.getElementsByTagName('span')[0].classList.remove('show') + }, { capture: true, once: true }) + }) + div.insertAdjacentHTML('beforeend', `${e.getAttribute('data-help')}`) + e.appendChild(div) + }) el.querySelectorAll('.node-header[data-error]').forEach(e => { - e.insertAdjacentHTML('beforeend', ``) + const div = document.createElement('div') + div.className = 'node-icon' + div.addEventListener('click', evt => { + div.getElementsByTagName('span')[0].classList.add('show') + document.body.addEventListener('click', evt => { + div.getElementsByTagName('span')[0].classList.remove('show') + }, { capture: true, once: true }) + }) + div.insertAdjacentHTML('beforeend', `${e.getAttribute('data-error')}`) + e.appendChild(div) }) el.querySelectorAll('.collapse.closed, button.add').forEach(e => { e.insertAdjacentHTML('afterbegin', ``) diff --git a/src/styles/nodes.css b/src/styles/nodes.css index fe617b7d..fc204a7f 100644 --- a/src/styles/nodes.css +++ b/src/styles/nodes.css @@ -10,6 +10,7 @@ --node-remove: #e76f51; --node-remove-border: #be4b2e; --node-indent-border: #b9b9b9; + --node-popup: #1f2020e6; --category-predicate: #65b5b8; --category-predicate-border: #187e81; --category-function: #979fa7; @@ -28,6 +29,7 @@ --node-remove: #b64023; --node-remove-border: #7e1d05; --node-indent-border: #454749; + --node-popup: #0a0a0ae6; --category-predicate: #306163; --category-predicate-border: #224849; --category-function: #838383; @@ -118,8 +120,12 @@ .node-header > *:last-child, .node-header > input[list]:nth-last-child(2), +.node-header[data-help] > *:nth-last-child(2), +.node-header[data-help] > input[list]:nth-last-child(3), .node-header[data-error] > *:nth-last-child(2), -.node-header[data-error] > input[list]:nth-last-child(3) { +.node-header[data-error] > input[list]:nth-last-child(3), +.node-header[data-help][data-error] > *:nth-last-child(3), +.node-header[data-help][data-error] > input[list]:nth-last-child(4) { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } @@ -182,12 +188,59 @@ button.add svg { border-bottom-right-radius: 6px; } -.node-header[data-error] > svg { +.node-icon { border: none; + position: relative; + display: inline-block; +} + +.node-icon svg { + cursor: pointer; +} + +.node-icon .icon-popup { + visibility: hidden; + width: 240px; + background-color: var(--node-popup); + color: var(--node-text); + text-align: center; + border-radius: 6px; + padding: 8px 4px; + position: absolute; + z-index: 1; + top: 125%; + left: 50%; + margin-left: -120px; +} + +.node-icon .icon-popup::after { + content: ""; + position: absolute; + bottom: 100%; + left: 50%; + margin-left: -3px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent var(--node-popup) transparent; +} + +.node-icon:hover .icon-popup, +.node-icon .icon-popup.show { + visibility: visible; +} + +.node-icon > svg { height: 34px; width: 34px; min-width: 34px; - padding-left: 6px; + margin-left: 6px; +} + +.node-header svg.node-help { + fill: var(--node-border); +} + +.node-header svg.node-error { fill: var(--node-remove); }