0
\$\begingroup\$

This is part of a Tampermonkey script that generates a box in the top right of a webpage and generates a list of checked boxes from the specified list selector (list chosen through buttons). The script works as expected; however, I am not a web guy and do not pretend to be one. My main source of contention is how poorly designed the UI is. Any advice on improving the code and UI would be much appreciated.

Initial box on page.

var zNode       = document.createElement ('div');
zNode.innerHTML = '<h3>Create List of Items</h3><h6><b>Not Selected<span></span>Selected</b></h6>'  +
    '<button id="hospNotSelectBtn" type="button">Hospitals</button><span></span>'                   +
    '<button id="hospSelectBtn" type="button">Hospitals</button><br>'                               +
    '<button id="deptNotSelectBtn" type="button">Departments</button><span></span>'                 +
    '<button id="deptSelectBtn" type="button">Departments</button><br>'                             +
    '<button id="jobNotSelectBtn" type="button">Job Titles</button><span></span>'                   +
    '<button id="jobSelectBtn" type="button">Job Titles</button><br>'                               +
    '<button id="jobFunctionNotSelectBtn" type="button">Job Functions</button><span></span>'        +
    '<button id="jobFunctionSelectBtn" type="button">Job Functions</button>'
;
zNode.setAttribute ('id', 'myContainer');
document.body.appendChild (zNode);


GM_addStyle ( multilineStr ( function () {/*!
    #myContainer {
        position:               absolute;
        top:                    0;
        right:                  0;
        font-size:              20px;
        color:                  white;
        background:             green;
        border:                 3px outset black;
        margin:                 2px;
        padding:                2px 2px;
        text-align:             center;
    }
    #myContainer span {
        margin:                 0 10px;
    }
*/} ) );

//Function provided by Brock Adams of SE
function multilineStr (dummyFunc) {
    var str = dummyFunc.toString ();
    str     = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*!
        .replace (/\s*\*\/\s*\}\s*$/, '')   // Strip */ }
        .replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
    ;
    return str;
}
\$\endgroup\$
  • 1
    \$\begingroup\$ Those are just input buttons that won't change in appearance after being pressed/clicked... Is that the intention? And if so, would the other button in the same row need to have the opposite appearance (i.e.checked/not checked)? \$\endgroup\$ – Sᴀᴍ Onᴇᴌᴀ Sep 7 '17 at 18:16
  • 1
    \$\begingroup\$ In addition to Sam's concern, you may want to use template strings instead of that multiline string hack. \$\endgroup\$ – Gerrit0 Sep 7 '17 at 18:58
  • \$\begingroup\$ Only one button works at a time. Each time a new button is clicked the information from before (if it exists) is deleted and a new box is created. The button indicating itself as active would be nice. Buttons do not need to be inverted on the other side. Originally, I had the idea of using a toggle switch to indicate "Selected items" and "Items not selected" but couldn't get it to work correctly. I will look into template strings. Thanks. \$\endgroup\$ – JG7 Sep 7 '17 at 19:13
  • \$\begingroup\$ Note: Just looked into template strings. I switched over to using backticks and removed the hack. Such a beautiful solution to that portion. Should I expect this solution to work with Firefox as well? Thanks! (Again, not a JS guy). \$\endgroup\$ – JG7 Sep 7 '17 at 19:26
  • \$\begingroup\$ There are 8 collections of check boxes on the webpage that I care about. Some collections have 100 options while others could have many, many more (and ever growing). Up to now, the auditing process has required me to look through the lists to determine what is checked or what isn't checked (depending on what the goal is at the time). It is very easy to overlook a selected checkbox here or an empty one there so the script reports out (in a read-only text box off to the side) exactly what is checked and isn't checked based on a query (supplied through the buttons). \$\endgroup\$ – JG7 Sep 9 '17 at 21:36
0
\$\begingroup\$

In order to simplify the user interface I switched to using a drop down list. It has minimized the amount of visual interference the original script had on the webpage as well as streamlined the code.

Initial appearance

Available choices

var zNode       = document.createElement ('div');
zNode.innerHTML = `<h5>Selection Report</h5><select name='selection' id='numbers'">
    <option value="Choose" selected="selected">Choose Option</option>
    <option value="#ctl00_CPH_lsD_pnlListSelector input:checked">Departments Selected</option>
    <option value="#ctl00_CPH_lsD_pnlListSelector input:not(:checked)">Departments Not Selected</option>
    <option value="#ctl00_CPH_lstSelectorPosition3_pnlListSelector input:checked">Hospitals Selected</option>
    <option value="#ctl00_CPH_lstSelectorPosition3_pnlListSelector input:not(:checked)">Hospitals Not Selected</option>
    <option value="#ctl00_CPH_lsJT_pnlListSelector input:checked">Job Titles Selected</option>
    <option value="#ctl00_CPH_lsJT_pnlListSelector input:not(:checked)">Job Titles Not Selected</option>
    <option value="#ctl00_CPH_lsJF_pnlListSelector input:checked">Job Functions Selected</option>
    <option value="#ctl00_CPH_lsJF_pnlListSelector input:not(:checked)">Job Functions Not Selected</option>
</select>`;

zNode.setAttribute ('id', 'myContainer');
document.body.appendChild (zNode);

GM_addStyle ( `
    #myContainer {
        position:               absolute;
        top:                    0;
        right:                  0;
        font-size:              20px;
        color:                  white;
        background:             green;
        border:                 3px outset black;
        margin:                 2px;
        padding:                2px 2px;
        text-align:             center;
    }
    #myContainer span {
        margin:                 0 10px;
    }
    #hospNotSelectBtn {
        cursor:                 pointer;
    }
    #hospSelectBtn {
        cursor:                 pointer;
    }
    #deptNotSelectBtn {
        cursor:                 pointer;
    }
    #deptSelectBtn {
        cursor:                 pointer;
    }
    #jobSelectBtn {
        cursor:                 pointer;
    }
    #jobNotSelectBtn {
        cursor:                 pointer;
    }
    #jobFunctionSelectBtn {
        cursor:                 pointer;
    }
    #jobFunctionNotSelectBtn {
        cursor:                 pointer;
    }
    #myAlertBox {
        font-size: small;
        background: white;
        border: 5px solid green;
        padding: 4px;
        position: absolute;
        top: 280px; right: 80px;
        max-width: 300px;
        white-space:pre-wrap;
    }`);
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.