All Downloads are FREE. Search and download functionalities are using the official Maven repository.

META-INF.resources.butterfaces-dist-bundle-js.butterfaces-ts-bundle.js Maven / Gradle / Ivy

Go to download

There is a newer version: 3.5.0
Show newest version
///
///
var ButterFaces;
(function (ButterFaces) {
    var Ajax = /** @class */ (function () {
        function Ajax() {
        }
        Ajax.sendRequest = function (clientId, event, renderIds, /*optional string */ params, disableRenderIds) {
            jsf.ajax.request(clientId, event, {
                "javax.faces.behavior.event": event,
                render: renderIds.join(", "),
                params: params,
                "butterfaces.params": params,
                onevent: (function (data) {
                    // console.log(data);
                    if (disableRenderIds) {
                        ButterFaces.Ajax.disableElementsOnRequest(data, renderIds);
                    }
                })
            });
        };
        Ajax.disableElementsOnRequest = function (data, ids) {
            var status = data.status;
            // console.log(data);
            // console.log(ids);
            switch (status) {
                case "begin": // Before the ajax request is sent.
                    // console.log('ajax request begin');
                    for (var i = 0; i < ids.length; i++) {
                        var $elementToDisable = $(document.getElementById(ids[i]));
                        if ($elementToDisable.length !== 0) {
                            // console.log('disable ' + ids[i]);
                            new ButterFaces.Overlay(0, false, document.getElementById(ids[i])).show();
                            // console.log('disablee ' + ids[i]);
                        }
                    }
                    break;
                case "complete": // After the ajax response is arrived.
                    // console.log('ajax request complete');
                    break;
                case "success": // After update of HTML DOM based on ajax response..
                    // console.log('ajax request success');
                    for (var i = 0; i < ids.length; i++) {
                        var $elementToEmable = $(document.getElementById(ids[i]));
                        if ($elementToEmable.length !== 0) {
                            // console.log('enable ' + ids[i]);
                            new ButterFaces.Overlay(0, false, document.getElementById(ids[i])).hide();
                            // console.log('enabled ' + ids[i]);
                        }
                    }
                    break;
            }
        };
        return Ajax;
    }());
    ButterFaces.Ajax = Ajax;
})(ButterFaces || (ButterFaces = {}));

///
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
/**
 * jQuery-Plugin "Expanded TextAreas" for expandable text areas. It is used for the JSF-Component "b:textarea".
 * Works with at least jQuery 1.7.
 *
 * How to use:
 * jQuery("#someTextAreaSelector").butterExpandable();
 */
(function ($) {
    // you have to extend jQuery with the fn["pluginName"] notation because in Typescript you can't extend
    // the existing typing interface with fn.pluginName!
    $.fn["butterExpandable"] = function () {
        return this.each(function (index, element) {
            var rootElement = $(element);
            if (rootElement.find("textarea").length > 0) {
                new ButterFaces.TextareaExpandable(rootElement);
            }
            else {
                new ButterFaces.DivExpandable(rootElement);
            }
        });
    };
})(jQuery);
var ButterFaces;
(function (ButterFaces) {
    var EXPAND_HEIGHT = 250; //in px
    var EXPAND_WIDTH = 500; //in px
    var ANIMATION_DURATION = 200; //in ms
    var REPOSITION_INTERVAL = 500; //in ms
    var EASING = "swing";
    var KEYCODE_ESCAPE = 27;
    var AbstractExpandable = /** @class */ (function () {
        function AbstractExpandable(rootElement) {
            this.rootElement = rootElement;
        }
        AbstractExpandable.prototype.expandElement = function (event) {
            var _this = this;
            if (this.isExpansionEventIgnored(event)) {
                return;
            }
            this.initialHeight = this.originalElement.outerHeight();
            this.initialWidth = this.originalElement.outerWidth();
            this.initialOffset = this.originalElement.offset();
            //create a ghost element that be animated on gets the focus
            this.ghostElement = this.createGhostElement();
            this.transferValueToGhostElement();
            this.ghostElement.css("width", this.initialWidth)
                .css("height", this.initialHeight)
                .css("position", "absolute")
                .css("top", this.initialOffset.top)
                .css("left", this.initialOffset.left)
                .css("z-index", 2000)
                .css("box-shadow", "5px 5px 5px 0 #999")
                .addClass("butter-component-expandable-ghost")
                .appendTo($("body"))
                .animate({
                height: EXPAND_HEIGHT,
                width: this.initialWidth > EXPAND_WIDTH ? this.initialWidth : EXPAND_WIDTH
            }, ANIMATION_DURATION, EASING, function () {
                $(document)
                    .on("click.expandable", function (event) {
                    _this.handleMouseClick(event);
                })
                    .on("keydown.expandable", function (event) {
                    _this.handleEscapeKey(event);
                });
                $(window).on("resize.expandable", function () {
                    _this.repositionGhostElement();
                });
                //keep track of the orginal element"s position
                _this.positionTriggerInterval = window.setInterval(function () { return _this.repositionGhostElement; }, REPOSITION_INTERVAL);
            });
            //make original invisible
            this.originalElement
                .css("visibility", "hidden")
                .siblings()
                .css("visibility", "hidden");
            this.onGhostElementCreated();
        };
        /**
         * Collapses the ghost element and sets the value if not isCancelled
         * @param isCancelled
         */
        AbstractExpandable.prototype.collapseElement = function (cancelled) {
            // "cancelled" can be an event object
            var isCancelled = typeof cancelled === "boolean" && cancelled;
            $(document)
                .off("click.expandable")
                .off("keydown.expandable");
            //make original visible again
            this.originalElement
                .css("visibility", "visible")
                .siblings()
                .css("visibility", "visible");
            var self = this;
            this.ghostElement.animate({
                height: self.initialHeight,
                width: self.initialWidth
            }, ANIMATION_DURATION, EASING, function () {
                //on animation complete
                self.onGhostElementCollapsed(isCancelled);
                //delete the ghost element
                self.ghostElement.remove();
                self.ghostElement = null;
                //delete position trigger timeout and resize listener
                window.clearInterval(self.positionTriggerInterval);
                $(window).off("resize.expandable");
            });
        };
        AbstractExpandable.prototype.handleMouseClick = function (event) {
            // collapse ghost element if user clicks beside it
            if (!$(event.target).is(".butter-component-expandable-ghost")) {
                this.collapseElement(false);
            }
        };
        AbstractExpandable.prototype.handleEscapeKey = function (event) {
            if (event.which === KEYCODE_ESCAPE) {
                this.collapseElement(true);
            }
        };
        AbstractExpandable.prototype.repositionGhostElement = function () {
            //keep track of window resizing and reposition the ghost element
            if (this.ghostElement !== undefined && this.ghostElement != null) {
                this.initialOffset = this.originalElement.offset();
                this.ghostElement
                    .css("top", this.initialOffset.top)
                    .css("left", this.initialOffset.left);
            }
        };
        return AbstractExpandable;
    }());
    var DivExpandable = /** @class */ (function (_super) {
        __extends(DivExpandable, _super);
        function DivExpandable(rootElement) {
            var _this = _super.call(this, rootElement) || this;
            _this.originalElement = _this.rootElement.find(".butter-component-value-readonly");
            _this.rearrangeOriginalElementStructure();
            return _this;
        }
        DivExpandable.prototype.rearrangeOriginalElementStructure = function () {
            var _this = this;
            var _label = this.rootElement.find(".butter-component-label");
            this.originalElement
                .addClass("butter-component-expandable-original")
                .click(function (event) {
                _this.expandElement(event);
            })
                .detach();
            var _container = $("
")
                .addClass("butter-component-expandable-readonly-container")
                .insertAfter(_label);
            var _icon = $("").addClass("input-group-text glyphicon glyphicon-resize-full");
            this.originalElement.appendTo(_container);
            $("
")
                .addClass("butter-component-expandable-readonly-icon")
                .append(_icon)
                .appendTo(_container);
        };
        DivExpandable.prototype.createGhostElement = function () {
            return $("
");
        };
        DivExpandable.prototype.isExpansionEventIgnored = function (event) {
            return false;
        };
        DivExpandable.prototype.onGhostElementCreated = function () {
            // do nothing
        };
        DivExpandable.prototype.onGhostElementCollapsed = function (isCancelled) {
            // do nothing
        };
        DivExpandable.prototype.transferValueToGhostElement = function () {
            $("
")
                .html(this.originalElement.html())
                .addClass("butter-component-expandable-ghost-readonlyContent")
                .appendTo(this.ghostElement);
        };
        return DivExpandable;
    }(AbstractExpandable));
    ButterFaces.DivExpandable = DivExpandable;
    var TextareaExpandable = /** @class */ (function (_super) {
        __extends(TextareaExpandable, _super);
        function TextareaExpandable(rootElement) {
            var _this = _super.call(this, rootElement) || this;
            _this.blockFocusEventOnOriginal = false;
            _this.blockBlurEventOnOriginal = false;
            _this.originalElement = _this.rootElement.find("textarea");
            _this.originalElement.addClass("butter-component-expandable-original");
            _this.originalElement.focus(function (event) {
                _this.expandElement(event);
            });
            _this.originalElement.blur(function (event) {
                _this.handleBlurEvent(event);
            });
            _this.addInputGroupAddon();
            return _this;
        }
        TextareaExpandable.prototype.addInputGroupAddon = function () {
            this.originalElement
                .addClass("form-control")
                .parent()
                .addClass("input-group");
            $("")
                .insertAfter(this.originalElement);
        };
        TextareaExpandable.prototype.handleBlurEvent = function (event) {
            if (this.blockBlurEventOnOriginal) {
                // prevent blur event bubbling, so it will not be triggered in jsf
                event.preventDefault();
            }
        };
        TextareaExpandable.prototype.createGhostElement = function () {
            return $("