Excel Testing - Shared with Office Add-in Playground

Excel Testing (Office Add-in Playground).json

{
    "name": "Excel Testing",
    "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".

$("#button1").click(button1);
$("#button2").click(button2);
var range1, range2;
function button1() {
    Excel.run(function (ctx) {
        var sheet = ctx.workbook.worksheets.getActiveWorksheet();
        range1 = sheet.getRange("A1");
        range2 = sheet.getRange("B5");
        ctx.trackedObjects.add(range1);
        ctx.trackedObjects.add(range2);
        return ctx.sync()
            .then(function () {
            showNotification("Success", "success");
        });
    })
        .catch(handleError);
}
function button2() {
    Excel.run([range1, range2], function (ctx) {
        range1.values = [["Quarterly Sales Report"]];
        range2.values = [["Quarterly Sales Report"]];
        return ctx.sync();
    }).catch(function (error) {
        range1.context.trackedObjects.remove(range1);
        range1.context.trackedObjects.remove(range2);
        range1.context.sync();
        showNotification("Error", error.message);
    });
}
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

$("#button1").click(button1);
$("#button2").click(button2);

var range1, range2;
function button1() {
    Excel.run(function (ctx) {
        var sheet = ctx.workbook.worksheets.getActiveWorksheet();
        range1 = sheet.getRange("A1");
        range2 = sheet.getRange("B5");        
        ctx.trackedObjects.add(range1);
        ctx.trackedObjects.add(range2);
        return ctx.sync()
        .then(function(){
            showNotification("Success", "success");
        });
    })
    .catch(handleError);
}

function button2() {
    Excel.run([range1, range2], function (ctx) {
            range1.values = [["Quarterly Sales Report"]];
            range2.values =[["Quarterly Sales Report"]];
            return ctx.sync();
        }).catch(function (error) {
            range1.context.trackedObjects.remove(range1);
            range1.context.trackedObjects.remove(range2);
            range1.context.sync();
            showNotification("Error", error.message);
        });
}

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";
}

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 yellow, and also display the selection address in a notification pane.</p>
    <button id="button1" class="ms-Button ms-Button--primary">
        <span class="ms-Button-label">Button 1</span>
    </button>
    <button id="button2" class="ms-Button ms-Button--primary">
        <span class="ms-Button-label">Button 2</span>
    </button>
</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

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;
}