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

SharePoint 2013/Online js components.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _1 = require(".");
/**
 * Text Field Types
 */
var TextFieldTypes;
(function (TextFieldTypes) {
    TextFieldTypes[TextFieldTypes["Default"] = 0] = "Default";
    TextFieldTypes[TextFieldTypes["Multi"] = 1] = "Multi";
    TextFieldTypes[TextFieldTypes["Underline"] = 2] = "Underline";
})(TextFieldTypes = exports.TextFieldTypes || (exports.TextFieldTypes = {}));
/**
 * Text Field
 */
exports.TextField = function (props) {
    // Method to get the fabric component
    var get = function () {
        // Return the textfield
        return _textfield;
    };
    // Method to get the value
    var getValue = function () {
        // Get the text field
        return _textfield._textField.value || "";
    };
    // Method to set the error message
    var setErrorMessage = function (message) {
        // Get the error message
        var errorMessage = _textfield._container.querySelector(".error");
        if (errorMessage) {
            // Set the error message
            errorMessage.innerHTML = message || "";
        }
    };
    // Method to set the value
    var setValue = function (value) {
        // Set the text field
        _textfield._textField.value = value || "";
    };
    // Method to validate the value
    var validate = function (value) {
        // Clear the error message
        setErrorMessage("");
        // See if this field is required
        if (props.required && (value || "").length == 0) {
            // Set the error message
            setErrorMessage("This field is required");
            // Validation failed
            return false;
        }
        // Validation passed
        return true;
    };
    // Add the textfield html
    props.el.innerHTML = _1.Templates.TextField(props);
    // Create the textfield
    var _textfield = new _1.fabric.TextField(props.el.firstElementChild);
    var _value = props.value || "";
    // The change event
    var onChange = function () {
        var value = getValue().trim();
        // See if the value is the same
        if (value == _value) {
            return;
        }
        // Update the value
        _value = value;
        // Validate the value
        if (validate(value) && props.onChange) {
            // Call the change event
            props.onChange(value);
        }
    };
    // Set the blur event
    _textfield._textField.addEventListener("blur", onChange);
    // Set the change event
    _textfield._textField.addEventListener("change", onChange);
    // Set the focus event
    _textfield._textField.addEventListener("focus", onChange);
    // Ensure this is not a note field
    if (props.type != TextFieldTypes.Multi) {
        // Disable the postback for the "Enter" key
        _textfield._textField.addEventListener("keydown", function (ev) {
            // See if the "Enter" key was hit
            if (ev.keyCode == 13) {
                // Disable panel from closing
                ev ? ev.preventDefault() : null;
            }
        });
    }
    // Validate the textfield
    validate(props.value);
    // Return the text field
    return {
        get: get,
        getValue: getValue,
        setErrorMessage: setErrorMessage,
        setValue: setValue
    };
};