gd-sprest-js/build/fabric/searchbox.js

SharePoint 2013/Online js components.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _1 = require(".");
/**
 * Search Box Types
 */
var SearchBoxTypes;
(function (SearchBoxTypes) {
    SearchBoxTypes[SearchBoxTypes["Collapsed"] = 0] = "Collapsed";
    SearchBoxTypes[SearchBoxTypes["CommandBar"] = 1] = "CommandBar";
    SearchBoxTypes[SearchBoxTypes["Default"] = 2] = "Default";
})(SearchBoxTypes = exports.SearchBoxTypes || (exports.SearchBoxTypes = {}));
/**
 * Search Box
 */
exports.SearchBox = function (props) {
    // Method to get the fabric component
    var get = function () {
        // Return the textfield
        return _searchbox;
    };
    // Method to get the value
    var getValue = function () {
        // Get the text field value
        return _searchbox._searchBoxField.value || "";
    };
    // Method to set the value
    var setValue = function (value) {
        // Set the text field
        _searchbox._searchBoxField.value = value || "";
        // See if the value exists
        if (value) {
            // Ensure the 'has-text' class exists
            if (_searchbox._searchBox.classList.contains("has-text") == false) {
                // Add the class
                _searchbox._searchBox.classList.add("has-text");
            }
        }
        else {
            // See if the 'has-text' class exists
            if (_searchbox._searchBox.classList.contains("has-text")) {
                // Remove the class
                _searchbox._searchBox.classList.remove("has-text");
            }
        }
    };
    // Add the search box html
    props.el.innerHTML = _1.Templates.SearchBox(props);
    // Create the textfield
    var _searchbox = new _1.fabric.SearchBox(props.el.firstElementChild);
    // Set the blur event
    _searchbox._searchBoxField.addEventListener("blur", function (ev) {
        // Get the current value
        var value = getValue();
        if (value) {
            // Wait for the box to be cleared
            setTimeout(function () {
                // Update the value
                setValue(value);
            }, 20);
        }
    });
    // See if the key up event exists
    if (props.onKeyUp) {
        // Set the "Enter" key to execute the search
        _searchbox._searchBoxField.addEventListener("keyup", function (ev) {
            // Call the event
            props.onKeyUp(getValue(), ev);
        });
    }
    // Set the "Enter" key to execute the search
    _searchbox._searchBoxField.addEventListener("keydown", function (ev) {
        // See if the "Enter" key was hit
        if (ev.keyCode == 13) {
            // Disable panel from closing, if this is w/in a panel
            ev ? ev.preventDefault() : null;
            // Call the click event
            props.onClick ? props.onClick(getValue()) : null;
        }
    });
    // Set the clear click event
    _searchbox._searchBoxClearButton.addEventListener("click", function (ev) {
        // Disable postback
        ev ? ev.preventDefault() : null;
    });
    // Set the search click event
    _searchbox._container.querySelector(".ms-SearchBox-search").addEventListener("click", function (ev) {
        // Disable postback
        ev ? ev.preventDefault() : null;
        // Call the click event
        props.onClick ? props.onClick(getValue()) : null;
    });
    // Return the search box
    return {
        get: get,
        getValue: getValue,
        setValue: setValue
    };
};