From 38273f5b9c204875ffbbf98fa1cea84404bc42d3 Mon Sep 17 00:00:00 2001 From: joaovictor3g Date: Fri, 20 Oct 2023 15:13:20 -0300 Subject: [PATCH 1/4] adds libraries select --- web/assets/css/dropdown.css | 75 ++++++++ web/assets/js/main.js | 93 +++++++-- web/assets/js/utils/group.js | 18 ++ web/index.html | 359 ++++++++++++++++++++++------------- 4 files changed, 391 insertions(+), 154 deletions(-) create mode 100644 web/assets/css/dropdown.css create mode 100644 web/assets/js/utils/group.js diff --git a/web/assets/css/dropdown.css b/web/assets/css/dropdown.css new file mode 100644 index 0000000..0db47aa --- /dev/null +++ b/web/assets/css/dropdown.css @@ -0,0 +1,75 @@ +.container-list { + padding: 0.75rem; + margin-top: 0.25rem; + font-size: 0.875rem; + line-height: 1.25rem; + color: #374151; +} + +.container-list .sublist-item { + display: flex; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-right: 1rem; + justify-content: space-between; + align-items: center; +} + +.container-list .sublist-item:hover { + background-color: #8447d108; +} + +.list-item .list-item-label { + font-size: 14px; + line-height: 24px; + font-weight: 500; +} + +.control { + display: flex; + padding: 0.5rem; + gap: 0.5rem; + align-items: center; + border-radius: 0.25rem; +} + +.control .checkbox { + border-radius: 0.25rem; + border-color: #d1d5db; + width: 1rem; + height: 1rem; + background-color: #f3f4f6; + color: #8447d1; +} + +.control .checkbox:focus { + box-shadow: initial; +} + +.control .label { + font-weight: 400; + color: #4b5563; + font-size: 14px; +} + +.dark #libraries-select-button { + color: #ffffff; + border: 1px solid #383c43; +} + +.dark #dropdownHelper { + background-color: #2a2d32; +} + +.dark .control .checkbox { + background-color: transparent; + border: 1px solid #00000060; +} + +.dark .control .label { + color: #ffffffd9; +} + +.dark .list-item span { + color: #ffffff; +} diff --git a/web/assets/js/main.js b/web/assets/js/main.js index 2a59a2b..da1165e 100644 --- a/web/assets/js/main.js +++ b/web/assets/js/main.js @@ -15,8 +15,12 @@ */ import { AceEditor } from "./editor.js"; +import { groupBy } from "./utils/group.js"; -const selectInstance = NiceSelect.bind(document.getElementById("examples")); +const librariesSelect = document.getElementById("dropdownHelper"); + +const exampleSelect = document.getElementById("examples"); +const exampleSelectInstance = NiceSelect.bind(exampleSelect); // Add the following polyfill for Microsoft Edge 17/18 support: // @@ -185,19 +189,7 @@ fetch("../assets/data.json") // Dynamically set the CEL Go version document.getElementById("version").innerText = versions["cel-go"]; - // Load the examples into the select element - const examplesList = document.getElementById("examples"); - - const groupByCategory = examples.reduce((acc, example) => { - return { - ...acc, - [example.category]: [...(acc[example.category] ?? []), example], - }; - }, {}); - - const examplesByCategory = Object.entries(groupByCategory).map( - ([key, value]) => ({ label: key, value }) - ); + const examplesByCategory = groupBy(examples, "category"); examplesByCategory.forEach((example) => { const optGroup = document.createElement("optgroup"); @@ -220,25 +212,90 @@ fetch("../assets/data.json") } else if (example.label === "Blank") { return; } else { - examplesList.appendChild(optGroup); + exampleSelect.appendChild(optGroup); } }); const blankOption = document.createElement("option"); blankOption.innerText = "Blank"; blankOption.value = "Blank"; - examplesList.appendChild(blankOption); + exampleSelect.appendChild(blankOption); - selectInstance.update(); + exampleSelectInstance.update(); - examplesList.addEventListener("change", (event) => { + exampleSelect.addEventListener("change", (event) => { const example = examples.find( (example) => example.name === event.target.value ); celEditor.setValue(example.cel, -1); dataEditor.setValue(example.data, -1); }); + + loadLibrarySelect(examplesByCategory); }) .catch((err) => { console.error(err); }); + +function loadLibrarySelect(data) { + const list = document.createElement("ul"); + list.className = "container-list"; + list["aria-labelledby"] = "dropdownHelperButton"; + + data.forEach((item) => { + const listItem = document.createElement("li"); + listItem.className = "list-item"; + listItem.innerHTML = `${item.label}`; + + if (item.label === "default") return; + + item.value.forEach((value) => { + const sublist = document.createElement("ul"); + const sublistItem = document.createElement("li"); + sublistItem.className = "sublist-item"; + + const control = document.createElement("label"); + control.className = "control"; + control.htmlFor = value.name; + + const checkbox = document.createElement("input"); + checkbox.setAttribute("type", "checkbox"); + checkbox.setAttribute("id", value.name); + checkbox.className = "checkbox"; + + const label = document.createElement("span"); + label.className = "label"; + label.innerText = value.name; + + control.appendChild(checkbox); + control.appendChild(label); + + const showExampleButton = document.createElement("button"); + + sublistItem.onmouseover = (ev) => { + showExampleButton.innerText = "Show example"; + sublistItem.appendChild(showExampleButton); + showExampleButton.className = "show-example-text"; + showExampleButton.style.color = "#B076F9"; + showExampleButton.style.fontSize = "14px"; + showExampleButton.style.fontWeight = "500"; + + sublistItem.style.backgroundColor = "#8447D108"; + }; + + sublistItem.onmouseleave = (ev) => { + sublistItem.removeChild(showExampleButton); + sublistItem.style.backgroundColor = "initial"; + }; + + sublistItem.appendChild(control); + + sublist.appendChild(sublistItem); + listItem.appendChild(sublist); + }); + + list.append(listItem); + }); + + librariesSelect.appendChild(list); +} diff --git a/web/assets/js/utils/group.js b/web/assets/js/utils/group.js new file mode 100644 index 0000000..05e91d8 --- /dev/null +++ b/web/assets/js/utils/group.js @@ -0,0 +1,18 @@ +export function groupBy(data, by) { + if (!by in data[0]) + throw new Error("You must provide a valid 'by' argument!"); + + const reducedData = data.reduce((acc, cur) => { + return { + ...acc, + [cur[by]]: [...(acc[cur[by]] ?? []), cur], + }; + }, {}); + + const groupedData = Object.entries(reducedData).map(([key, value]) => ({ + label: key, + value, + })); + + return groupedData; +} diff --git a/web/index.html b/web/index.html index 0d67a70..5c1c180 100644 --- a/web/index.html +++ b/web/index.html @@ -1,4 +1,4 @@ - + + + + CEL Playground + + + + + - - - CEL Playground - - - - - - - - - - - - + + - gtag('config', 'G-GV0C317DWN'); - - + + + - - -
-
-
-
-
- - Expression - - (CEL format) -
- -
-
-
-
-
-
-
- - Input - - (YAML or JSON format) -
- -
-
-
-
-
- Output -
- -
-
-
-
- - - - - + + + + + + + +
+
+
+
+
+ Expression + (CEL format) +
+ +
+
+
+
+
+
+
+ Input + (YAML or JSON format) +
+ +
+
+
+
+
Output
+ +
+
+
+
+ + + + + + + From 5ee4c556cc4e4f9bebb552f68a9d05182492a1c9 Mon Sep 17 00:00:00 2001 From: joaovictor3g Date: Fri, 20 Oct 2023 16:55:03 -0300 Subject: [PATCH 2/4] fixes styles --- web/assets/css/dropdown.css | 20 ++++++++++++++++++++ web/assets/css/styles.css | 3 +++ web/index.html | 24 +++++++++++++++--------- 3 files changed, 38 insertions(+), 9 deletions(-) diff --git a/web/assets/css/dropdown.css b/web/assets/css/dropdown.css index 0db47aa..52afe1c 100644 --- a/web/assets/css/dropdown.css +++ b/web/assets/css/dropdown.css @@ -1,3 +1,14 @@ +#libraries-select-button { + border-radius: 0.25rem; + border-width: 1px; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + letter-spacing: -0.025em; + line-height: 1.5; + color: #4b5563; +} + .container-list { padding: 0.75rem; margin-top: 0.25rem; @@ -25,6 +36,11 @@ font-weight: 500; } +.list-item:not(:first-of-type) { + border-top: 1px solid #e3e3e3; + padding: 1rem 0; +} + .control { display: flex; padding: 0.5rem; @@ -73,3 +89,7 @@ .dark .list-item span { color: #ffffff; } + +.dark .list-item:not(:first-of-type) { + border-top: 1px solid #383c43; +} diff --git a/web/assets/css/styles.css b/web/assets/css/styles.css index b77ed02..af9cffb 100644 --- a/web/assets/css/styles.css +++ b/web/assets/css/styles.css @@ -136,6 +136,7 @@ a { border: 1px solid #e6e6e6; background: #fff; position: relative; + overflow: hidden; } .dark .share-url__container { @@ -153,6 +154,7 @@ a { line-height: 24px; letter-spacing: 0.12px; border: none; + outline: none; } .dark .share-url__input { @@ -178,6 +180,7 @@ a { .share-url__input:focus { outline: none; + border: none; } .share-url__copy { diff --git a/web/index.html b/web/index.html index 5c1c180..42ee161 100644 --- a/web/index.html +++ b/web/index.html @@ -19,12 +19,22 @@ CEL Playground + - + + + + + + + - - - -