Cacher is the code snippet organizer for pro developers

name: Fabric JS - Using form data
description: Takes form data entered in the task pane and pushes it into the document. This is meant to show the use of common Fabric elements.
author: rramona2
host: WORD
api_set: {}
script:
    content: |
        $("#run").click(run);
        $("#clear").click(clear);
        $('#tgl-fruit-vege').click(switchLabels);

        initializeUI();

        let acceptCheckBox;

        async function switchLabels() {
            if ($('#tgl-fruit-vege').children('label').hasClass('is-selected')) {
                $('#lbl-title').text('Favorite vegetable');
                $('#lbl-snack').text('Is this vegetable eaten as a snack?');
            }
            else {
                $('#lbl-title').text('Favorite fruit');
                $('#lbl-snack').text('Is this fruit eaten as a snack?');
            }
        }

        async function run() {
            if (acceptCheckBox.getValue()) {
                $('#error-message').hide();
                try {
                    await Word.run(async (context) => {
                        const strName = `Name: ${$('#fruit-name').val()}`;
                        const strColor = `Color: ${$('#color').val()}`;

                        let strEatenSnack = 'Eaten as a snack: ';
                        const eatSnack = $('.ms-RadioButton-field');
                        eatSnack.each(function () {
                            var _this = $(this);
                            if (_this.hasClass('is-checked')) {
                                strEatenSnack = strEatenSnack + (_this.siblings('input').val());
                            }
                        });

                        const strAdditionalComments = 'Additional Comments: ' + $('#txtAdditionalComments').val();
                        const strAcceptedTC = 'Terms and conditions accepted: ' + acceptCheckBox.getValue();

                        const body = context.document.body;
                        body.insertParagraph(strName, Word.InsertLocation.end);
                        body.insertParagraph(strColor, Word.InsertLocation.end);
                        body.insertParagraph(strEatenSnack, Word.InsertLocation.end);
                        body.insertParagraph(strAdditionalComments, Word.InsertLocation.end);
                        body.insertParagraph(strAcceptedTC, Word.InsertLocation.end);

                        await context.sync();
                    });
                }
                catch (error) {
                    OfficeHelpers.UI.notify(error);
                    OfficeHelpers.Utilities.log(error);
                }
            }
            else {
                $('#error-message').show();
            }
        }

        async function clear() {
            try {
                $('#fruit-name').val('');
                $('#color').siblings('ul.ms-Dropdown-items').children('.is-selected').removeClass('is-selected');
                $('#color').siblings('.ms-Dropdown-title').text('Black');
                $('#color').val('Black');
                $(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
                $('#choicefieldgroup-no').removeClass('is-checked');
                $('#choicefieldgroup-yes').addClass('is-checked');
                acceptCheckBox.unCheck();
            }
            catch (error) {
                OfficeHelpers.UI.notify(error);
                OfficeHelpers.Utilities.log(error);
            }
        }

        async function initializeUI() {
            const textFieldElements = document.querySelectorAll(".ms-TextField");
            for (let i = 0; i < textFieldElements.length; i++) {
                new fabric['TextField'](textFieldElements[i]);
            }

            const dropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
            for (let i = 0; i < dropdownHTMLElements.length; ++i) {
                new fabric['Dropdown'](dropdownHTMLElements[i]);
            }

            const checkBoxElements = document.querySelectorAll(".ms-CheckBox");
            acceptCheckBox = new fabric['CheckBox'](checkBoxElements[0]);

            const choiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
            for (let i = 0; i < choiceFieldGroupElements.length; i++) {
                new fabric['ChoiceFieldGroup'](choiceFieldGroupElements[i]);
            }

            const toggleElements = document.querySelectorAll(".ms-Toggle");
            for (let i = 0; i < toggleElements.length; i++) {
                new fabric['Toggle'](toggleElements[i]);
            }

            $('#error-message').hide();
        }


        // To avoid compile errors for the undeclared "fabric" object, declare it to the type-system here.
        declare var fabric;
    language: typescript
template:
    content: |-
        <div class="ms-Toggle ms-Toggle--textRight" id="tgl-fruit-vege">
          <span class="ms-Toggle-description">Fruit or Vegetable?</span> 
          <input type="checkbox" id="demo-toggle-1" class="ms-Toggle-input" />
          <label for="demo-toggle-1" class="ms-Toggle-field" tabindex="0">
            <span class="ms-Label ms-Label--off">Fruit</span> 
            <span class="ms-Label ms-Label--on">Vegetable</span> 
          </label>
        </div>
        <p id="lbl-title" class="ms-font-xl">Favorite fruit</p>
        <div class="ms-TextField">
          <label class="ms-Label">Name</label>
          <input class="ms-TextField-field" id="fruit-name" type="text" value="" placeholder="">
        </div>
        <div class="ms-Dropdown" tabindex="0">
          <label class="ms-Label">What color is it?</label>
          <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
          <select class="ms-Dropdown-select" id="color">
            <option value="Black">Black</option>
            <option value="Blue">Blue</option>
            <option value="Green">Green</option>
            <option value="Red">Red</option>
            <option value="Yellow">Yellow</option>
          </select>
        </div>
        <div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
          <div class="ms-ChoiceFieldGroup-title">
            <label class="ms-Label" id="lbl-snack">Is this fruit eaten as a snack?</label>
          </div>
          <ul class="ms-ChoiceFieldGroup-list">
            <li class="ms-RadioButton">
              <input tabindex="-1" value="yes" type="radio" class="ms-RadioButton-input">
              <label role="radio"  id="choicefieldgroup-yes" class="ms-RadioButton-field is-checked" tabindex="0" aria-checked="false" name="choicefieldgroup" aria-disabled="true">
                <span class="ms-Label">Yes</span> 
              </label>
            </li>
            <li class="ms-RadioButton">
              <input tabindex="-1" value="no" type="radio" class="ms-RadioButton-input">
              <label role="radio" id="choicefieldgroup-no" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
                <span class="ms-Label">No</span> 
              </label>
            </li>
          </ul>
        </div>
        <p/>
        <div class="ms-TextField ms-TextField--multiline">
          <label class="ms-Label">Any other comments?</label>
          <textarea id="txtAdditionalComments" class="ms-TextField-field"></textarea>
        </div>
        <div class="ms-CheckBox">
          <input tabindex="-1" id="chkAccept" type="checkbox" class="ms-CheckBox-input">
          <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa">
            <span class="ms-Label">Accept medical terms and conditions</span> 
          </label>
        </div>
        <div class="ms-MessageBar ms-MessageBar--error" id="error-message">
          <div class="ms-MessageBar-content">
            <div class="ms-MessageBar-icon">
              <i class="ms-Icon ms-Icon--ErrorBadge"></i>
            </div>
            <div class="ms-MessageBar-text">
              Please accept the terms and conditions.
            </div>
          </div>
        </div>
        <p>
        <br/>
        <button id="run" class="ms-Button">
            <span class="ms-Button-label">Add</span>
        </button>
        <button id="clear" class="ms-Button">
            <span class="ms-Button-label">Clear</span>
        </button>
    language: html
style:
    content: ''
    language: css
libraries: |-
    // Office.js
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js

    // NPM libraries
    jquery@3.1.1
    office-ui-fabric-js@1.4.0/dist/js/fabric.min.js
    office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
    office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css
    @microsoft/office-js-helpers@0.7.1/dist/office.helpers.min.js
    core-js@2.4.1/client/core.min.js

    // IntelliSense: Use dt~library_name for DefinitelyTyped or URLs to d.ts files
    @types/office-js
    @types/jquery
    @types/core-js
    @microsoft/office-js-helpers@0.7.1/dist/office.helpers.d.ts