Range Font - Shared with Office Add-in Playground

Range Font (Office Add-in Playground).json

{
    "name": "Range Font",
    "playgroundVersion": 1
}

app.js

// This is a compiled version of the TypeScript/JavaScript code ("app.ts").
// In case the original code was already JavaScript, this is likely identical to "app.js".

$("#sample-button").click(runSample);
$("#picker").spectrum({
    color: '#cf0',
    showInput: true,
    showPalette: true,
    preferredFormat: "hex",
    hideAfterPaletteSelect: false,
    palette: [
        ['black', 'gray', 'silver'],
        ['white', 'maroon', 'violet'],
        ['olive', 'yellow', 'green'],
        ['lime', 'teal', 'aqua'],
        ['red', 'blue', 'navy',],
        ['blanchedalmond', 'rgb(255, 128, 0);', 'hsv 100 70 50'],
        ['purple']
    ]
});
function runSample() {
    Word.run(function (context) {
        var selection = context.document.getSelection();
        selection.font.color = $('#picker').spectrum('get').toHexString();
        return context.sync()
            .then(function () {
            showNotification('Success', "Range Font Color Set.");
        });
    })
        .catch(handleError);
}
function handleError(error) {
    showNotification("Error", error);
    // Log additional information to the console, if applicable:
    if (error instanceof OfficeExtension.Error) {
        console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
}
function showNotification(header, text) {
    var container = document.getElementById('notification-popup');
    var headerPlaceholder = container.querySelector('.notification-popup-title');
    var textPlaceholder = container.querySelector('.ms-MessageBanner-clipper');
    headerPlaceholder.textContent = header;
    textPlaceholder.textContent = text;
    var closeButton = container.querySelector('.ms-MessageBanner-close');
    closeButton.addEventListener("click", function () {
        if (container.className.indexOf("hide") === -1) {
            container.className = "ms-MessageBanner is-hidden";
        }
        closeButton.removeEventListener("click", null);
    });
    container.className = "ms-MessageBanner is-expanded";
}

app.ts

$("#sample-button").click(runSample);

$("#picker").spectrum({
    color: '#cf0',
    showInput:true,
    showPalette:true,
    preferredFormat:"hex",
    hideAfterPaletteSelect:false,
    palette: [
        ['black', 'gray', 'silver'],
        ['white', 'maroon', 'violet'],
        ['olive', 'yellow', 'green'],
        ['lime', 'teal', 'aqua'],       
        ['red', 'blue', 'navy',],
        ['blanchedalmond', 'rgb(255, 128, 0);', 'hsv 100 70 50'],
        ['purple']
    ]
});

function runSample() {
    Word.run(function (context) {
        var selection = context.document.getSelection();
        selection.font.color = $('#picker').spectrum('get').toHexString();
        return context.sync()
            .then(function() {
                showNotification('Success', "Range Font Color Set.");
            });
    })
    .catch(handleError);
}

function handleError(error) {
    showNotification("Error", error);
    // Log additional information to the console, if applicable:
    if (error instanceof OfficeExtension.Error) {
        console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
}

function showNotification(header, text) {
    var container = document.getElementById('notification-popup');
    var headerPlaceholder = container.querySelector('.notification-popup-title');
    var textPlaceholder = container.querySelector('.ms-MessageBanner-clipper');

    headerPlaceholder.textContent = header;
    textPlaceholder.textContent = text;
        
    var closeButton = container.querySelector('.ms-MessageBanner-close');
    closeButton.addEventListener("click", function () {
        if (container.className.indexOf("hide") === -1) {
            container.className = "ms-MessageBanner is-hidden";
        }
        closeButton.removeEventListener("click", null);
    });

    container.className = "ms-MessageBanner is-expanded";
}


interface JQuery {
    spectrum(options?: any): any;
}

index.html

<div id="content-main" class="ms-font-m">
    <h1 class="ms-font-xl">Sample snippet</h1>
    <p>This sample will color the selected range in specified color.</p>
    <button id="sample-button" class="ms-Button ms-Button--primary">
        <span class="ms-Button-label">Run sample!</span>
    </button>
    <input type="text" id="picker" />
</div>

<div id="notification-popup" class="ms-MessageBanner is-hidden">
    <div class="notification-popup-title ms-fontSize-l ms-fontWeight-semibold"></div>
    <div class="ms-MessageBanner-content">
        <div class="ms-MessageBanner-text">
            <div class="ms-MessageBanner-clipper"></div>
        </div>
    </div>
    <button class="ms-MessageBanner-close">
        <i class="ms-Icon ms-Icon--x"></i>
    </button>
</div>

libraries.txt

# Office.js CDN reference
//appsforoffice.microsoft.com/lib/1/hosted/Office.js

# NPM CDN references
jquery
office-ui-fabric/dist/js/jquery.fabric.min.js
office-ui-fabric/dist/css/fabric.min.css
office-ui-fabric/dist/css/fabric.components.min.css

# IntelliSense definitions
//raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/office-js/office-js.d.ts
//raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/jquery/jquery.d.ts

https://bgrins.github.io/spectrum/spectrum.css
https://bgrins.github.io/spectrum/spectrum.js

style.css

/* Notification pane customizations, including overwriting some Fabric UI defaults */

#notification-popup .notification-popup-title {
    text-align: left;
    margin: 15px 50px 0 15px;
}

#notification-popup.ms-MessageBanner {
    position: absolute;
    left: 0px;
    bottom: 0px;
    text-align: left;
    height: inherit;
}

#notification-popup.ms-MessageBanner, #notification-popup .ms-MessageBanner-text {
    min-width: inherit;
}
#notification-popup .ms-MessageBanner-text {
    margin: 0;
    padding: 18px 15px;
}


/* Other styling */

#content-main {
    padding: 10px;
}
#sample-button {
    margin-top: 10px;
}