ng-essentials/src/services/app-intro.service.js

Ready to use all type of essential components for an web application.

var AppIntroService = /** @class */ (function () {
    function AppIntroService(config) {
        this.activeIndex = -1;
        this.dataJson = config.data;
    }
    AppIntroService.prototype.start = function () {
        if (!this.dataJson) {
            console.info("Data is not provided.");
            return;
        }
        this.destroy();
        $("body").append(this.getHtmlRelatedToThisIntro());
        this.bindActions();
        this.moveToNext();
    };
    AppIntroService.prototype.bindActions = function () {
        var _this = this;
        document.getElementById("next_btn").addEventListener("click", function () {
            _this.moveToNext();
        });
        document.getElementById("prev_btn").addEventListener("click", function () {
            _this.moveToPrevious();
        });
        document.getElementById("done_btn").addEventListener("click", function () {
            _this.destroy();
        });
        document.getElementsByClassName("teach_app_backdrop")[0].addEventListener("click", function () {
            _this.destroy();
        });
    };
    AppIntroService.prototype.destroy = function () {
        this.beforeMoveInterceptor();
        $(".teach_app_container").remove();
    };
    AppIntroService.prototype.validate = function () {
        if (!this.activeIndex) {
            return false;
        }
        else if (this.activeIndex < 0 || this.activeIndex >= this.dataJson.length) {
            return false;
        }
        else {
            return true;
        }
    };
    AppIntroService.prototype.beforeMoveInterceptor = function () {
        if (!this.validate()) {
            return;
        }
        console.log(this.activeIndex);
        var obj = this.dataJson[this.activeIndex];
        var elem = $(obj.selector);
        $(elem).removeClass("teach_app_active_elem");
    };
    AppIntroService.prototype.moveToNext = function () {
        this.beforeMoveInterceptor();
        this.activeIndex++;
        this.inItMsgObj(this.dataJson[this.activeIndex]);
    };
    AppIntroService.prototype.moveToPrevious = function () {
        this.beforeMoveInterceptor();
        this.activeIndex--;
        this.inItMsgObj(this.dataJson[this.activeIndex]);
    };
    AppIntroService.prototype.moveStepInterceptor = function () {
        $("#arrow_pointer").removeClass("arrow-left");
        $("#arrow_pointer").removeClass("arrow-right");
        $("#arrow_pointer").removeClass("arrow-top");
        $("#arrow_pointer").removeClass("arrow-bottom");
        $(".teach_app_msg_container").css({
            'left': 'auto',
            'right': 'auto',
            'top': 'auto',
            'bottom': 'auto'
        });
        $("#next_btn").hide();
        $("#prev_btn").hide();
        $("#done_btn").hide();
        if (this.activeIndex == 0) {
            if (this.dataJson.length == 1) {
                $("#done_btn").show();
            }
            else {
                $("#next_btn").show();
            }
        }
        else if (this.activeIndex >= this.dataJson.length - 1) {
            $("#prev_btn").show();
            $("#done_btn").show();
        }
        else {
            $("#next_btn").show();
            $("#prev_btn").show();
        }
    };
    AppIntroService.prototype.inItMsgObj = function (data) {
        this.moveStepInterceptor();
        $("#message_display").html(data.message);
        this.highlightSelector(data.selector);
        switch (data.position) {
            case "left":
                this.showMsgOnLeft(data.selector);
                break;
            case "top":
                this.showMsgOnTop(data.selector);
                break;
            case "right":
                this.showMsgOnRight(data.selector);
                break;
            case "bottom":
                this.showMsgOnBottom(data.selector);
                break;
        }
    };
    AppIntroService.prototype.showMsgOnLeft = function (selector) {
        var msgElem = $(".teach_app_msg_container");
        var elemWidth = msgElem.innerWidth();
        $("#arrow_pointer").addClass("arrow-right");
        msgElem.css({
            'display': 'block',
            'left': -(elemWidth + 15),
            'top': 'auto',
            'right': 'auto',
            'bottom': 'auto'
        });
    };
    AppIntroService.prototype.showMsgOnTop = function (selector) {
        var msgElem = $(".teach_app_msg_container");
        var elemHeight = msgElem.innerHeight();
        $("#arrow_pointer").addClass("arrow-bottom");
        msgElem.css({
            'display': 'block',
            'top': -(elemHeight + 15),
            'left': 'auto',
            'right': 'auto',
            'bottom': 'auto'
        });
    };
    AppIntroService.prototype.showMsgOnBottom = function (selector) {
        var msgElem = $(".teach_app_msg_container");
        $("#arrow_pointer").addClass("arrow-top");
        var elemHeight = $(selector).innerHeight();
        msgElem.css({
            'display': 'block',
            'top': (elemHeight + 25),
            'left': 'auto',
            'right': 'auto',
            'bottom': 'auto'
        });
    };
    AppIntroService.prototype.showMsgOnRight = function (selector) {
        var msgElem = $(".teach_app_msg_container");
        var elemWidth = $(selector).innerWidth();
        $("#arrow_pointer").addClass("arrow-left");
        msgElem.css({
            'display': 'block',
            'left': (elemWidth + 25),
            'top': 'auto',
            'right': 'auto',
            'bottom': 'auto'
        });
    };
    AppIntroService.prototype.highlightSelector = function (selector) {
        var elem = $(selector);
        var offset = elem.offset();
        var position = elem.position();
        var elemHeight = elem.innerHeight();
        var elemWidth = elem.innerWidth();
        $(".teach_app_elem_container").css({
            'height': elemHeight + 10,
            'width': elemWidth + 10,
            'left': offset.left - 5,
            'top': offset.top - 10
        });
        $(selector).addClass("teach_app_active_elem");
    };
    AppIntroService.prototype.getHtmlRelatedToThisIntro = function () {
        return "\n      <div class=\"teach_app_container\">\n        <div class=\"teach_app_backdrop\"></div>\n        <div class=\"teach_app_elem_container\">\n          <div class=\"teach_app_msg_container\">\n            <div id=\"message_display\"></div>\n            <div class=\"teach_app_actions\">\n              <button id=\"prev_btn\" class=\"btn btn-link\">Prev</button>\n              <button id=\"next_btn\" class=\"btn btn-link\">Next</button>\n              <button id=\"done_btn\" class=\"btn btn-link\">Done</button>\n            </div>\n            <div id=\"arrow_pointer\"></div>\n          </div>\n        </div>\n      </div>\n    ";
    };
    return AppIntroService;
}());
export { AppIntroService };
//# sourceMappingURL=app-intro.service.js.map