diff --git a/app/components/behaviors/behavior-graph.js b/app/components/behaviors/behavior-graph.js index b7912ba4..7c3e096b 100644 --- a/app/components/behaviors/behavior-graph.js +++ b/app/components/behaviors/behavior-graph.js @@ -80,7 +80,47 @@ export default Ember.Component.extend({ // ******************** Declare actions ******************** // actions used in the .hbs file actions: { - + handleInput(event) { + let inputValue = event.target.value; + + let accordions = event.target.parentElement.getElementsByClassName("accordion"); + for (let i = 0; i < accordions.length; i++) { + let accordion = accordions[i]; + for (let j = 0; j < accordion.children.length; j++) { + let child = accordion.children[j]; + if(inputValue === ""){ + child.classList.remove('active'); + } else { + child.classList.add('active'); + } + } + } + + // Declare variables + let filter, container, list, element, i, txtValue; + filter = inputValue.toUpperCase(); + container = event.target.parentElement; + list = container.getElementsByClassName("node-name"); + + // Loop through all list items, and hide those who don't match the search query + for (i = 0; i < list.length; i++) { + element = list[i]; + txtValue = element.textContent || element.innerText; + if (txtValue.toUpperCase().indexOf(filter) > -1) { + element.parentElement.classList.add("visible"); + let categorietext = element.parentElement.parentElement.parentElement.children[0].children[1].children[0].innerText; + if(categorietext === "Default Nodes"){ + element.parentElement.style.display = "flex !important"; + console.log(element.parentElement) + } else { + element.parentElement.style.display = ""; + } + } else { + element.parentElement.style.display = "none"; + element.parentElement.classList.remove("visible"); + } + } + } }, willDestroyElement() { diff --git a/app/styles/components/behaviors/behavior-graph.css b/app/styles/components/behaviors/behavior-graph.css index eae6d6bf..b864ca40 100644 --- a/app/styles/components/behaviors/behavior-graph.css +++ b/app/styles/components/behaviors/behavior-graph.css @@ -87,16 +87,24 @@ div.button-group { padding: 0 !important; } - .node-container h4 { - height: 2.5em; - margin-top: 20px !important; - margin-bottom: 0px !important; - background: color-title-bg; - color: color-h-font; - font-family: "Segoe UI", monospace, Arial,sans-serif; - font-size: 16px; - padding: 10px 15px; - } +.node-container h4 { + height: 2.5em; + margin-top: 20px !important; + margin-bottom: 0px !important; + background: color-title-bg; + color: color-h-font; + font-family: "Segoe UI", monospace, Arial,sans-serif; + font-size: 16px; + padding: 10px 15px; +} + +:global(#searchInput) { + height: 2.5em; + margin-bottom: 0px !important; + font-family: "Segoe UI", monospace, Arial, sans-serif; + font-size: 16px; + padding: 10px 15px; +} :global(.title.composite-selection), :global(.title.decorator-selection), diff --git a/app/templates/components/behaviors/behavior-graph.hbs b/app/templates/components/behaviors/behavior-graph.hbs index 5c54cc10..bbbce650 100644 --- a/app/templates/components/behaviors/behavior-graph.hbs +++ b/app/templates/components/behaviors/behavior-graph.hbs @@ -21,6 +21,8 @@ --}} {{!-- --}} + +