Injectable Context Menu

R2D2BC

Injectable Context Menu

<script>

    var selectionMenuItems = [
        { 
            id: 'anIconExampleID', 
            callback: function (selection) {
                console.log(selection)
            }
        }, { 
            id: 'anotherIcon', 
            callback: function (selection) {
                console.log(selection)
            }
        }
    ]
        
    D2Reader.load({
        url: new URL("http....."),
        injectables: injectables,
        selectionMenuItems: selectionMenuItems
    }).then(instance => {
        console.log("D2Reader loaded ", instance);
    }).catch(error => {
        console.error("error.message ", error.message);
    });

</script>

HTML Toolbox

This html is to be placed anywhere where the reader is being initialized. See here the buttons with the same ids as the ones in the script above. The minimum needed here is:

"<button id="anotherIcon"><span></span></button>" = example of a button corresponding with above selection menu item

"toolbox-backdrop" = is needed to be able to click outside the toolbox

"highlight-toolbox" = is the root toolbox container and within that container there are 2 different containers:

"highlight-toolbox-mode-add" = the main toolbox that shows right after a selection has been made
"highlight-toolbox-mode-colors" = this is specifically to the colors, when changing the color, but it would not be needed if no colorIcon is defined
"highlight-toolbox-mode-edit" = the toolbox that shows when clicking on a highlight

<div id="toolbox-backdrop" class="toolbox-backdrop"></div>
<span id="highlight-toolbox" class="highlight-toolbox">
    <div id="highlight-toolbox-mode-colors">
        <button id="dismissIcon"><i class="material-icons" style="color:gray">close</i></button>
    </div>
    <div id="highlight-toolbox-mode-add">
        <button id="colorIcon"><span></span></button>
        <button id="highlightIcon"><span></span></button>
        <button id="underlineIcon"><span></span></button>
        <button id="speakIcon"><span></span></button>
        <button id="anotherIcon"><span></span></button>
    </div>
    <div id="highlight-toolbox-mode-edit">
        <button id="deleteIcon"><i class="material-icons" style="color:gray">delete</i></button>
    </div>
</span>