0

We have an hardware platform that we adapt through different projects. The firmware provides common functionalities, and also adds, removes some specifically per project. We have a huge documentation (Word file) with all functionalities and would like to make it be dynamic so that project-specific items would be hidden/shown based on project selected.

As an example, we may have:

  • Feature 1 specific to project A
  • Feature 2 specific to project B
  • Feature 3 shared by A and B
  • Feature 4 shared by all projects

We'd like a specification file with a combo-box (or something else) where you can select All, project A, project B or project C and that would display:

  • If we select All: Feature 1, 2, 3 and 4
  • If we select A: Feature 1, 3, and 4
  • If we select B: Feature 2, 3, and 4
  • If we select C: Feature 4

I think html could be a nice way to do this (an html file would then replace the docx file), but then we want the file to work on a local machine (no php or script needing file to be hosted on a web server).

I found this post that works locally but I don't see how to adapt it to handle Feature 3 shared by A and B, nor how to show all when All is selected...(actually, I doubt this approach would fit my needs as it filters content by id and I bet an item can only have one id).

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <style>
.inv {
    display: none;
}
    </style>
    <body>
        <select id="target">
            <option value="view_all">Show all</option>
            <option value="project_a">Project A</option>
            <option value="project_b">Project B</option>
            <option value="project_c">Project C</option>
        <select>

        <div id="project_a" class="inv">Feature 1</div>
        <div id="project_b" class="inv">Feature 2</div>
        <!-- how to handle Feature 3 shared by A and B? -->
        <div>Feature 4</div>

        <script>
            document
                .getElementById('target')
                .addEventListener('change', function () {
                    <!-- how to have everyone visible when All is selected? -->
                    'use strict';
                    var vis = document.querySelector('.vis'),   
                        target = document.getElementById(this.value);
                    if (vis !== null) {
                        vis.className = 'inv';
                    }
                    if (target !== null ) {
                        target.className = 'vis';
                    }
            });
        </script>
    </body>
</html>

Any idea how I can achieve this with this approach or another (based on html, or something else)...?

jpo38
  • 20,821
  • 10
  • 70
  • 151
  • A combobox is a UI control that is a combination (hence the name) of a drop down menu (which is what you get with a select in HTML) and a text input (an input of type text). HTML doesn't have any native controls that are represented as comboboxes. You have a select element (which will render as a drop down menu). – Quentin Nov 18 '17 at 08:47
  • _"(actually, I doubt this approach would fit my needs as it filters content by id and I bet an item can only have one id)"_ - then rewrite it to filter by class(es) instead. – CBroe Nov 18 '17 at 09:37
  • @CBroe: I'm not so familiar with html, how would this be done? – jpo38 Nov 18 '17 at 10:08

0 Answers0