Mar 19, 2018

Simple Javascript class with closure example for form with panels activated using buttons

This JS design is described as revealing modul template.
Here are more patterns:

https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript


"use strict";
var Acme = Acme || {};
Acme.TravelAgency = Acme.TravelAgency || {};
Acme.TravelAgency.RegisterForm = (function () {
    const btnActiveCSS = "btn-danger";
    var options = null;

    var init = function (optionsParam) {
        options = {
            conjuctionWord: ' in '
        };
        if (optionsParam !== undefined) {
            $.extend(options, optionsParam);
        }
    }
    var dom = {
        btnYourInfoId: "#btnYourInfo",
        btnAccountSetup: "#btnAccountSetup",
        panelAccountSetupId: "#panelAccountSetup",
        panelYourInfoId: "#panelYourInfo"
};
function bindCallBacks() {
$(document).on('click', dom.btnAccountSetup, show);
        $(document).on('click', dom.btnYourInfoId, show);
}
function show(senderBtnId) {
$(dom.panelAccountSetupId).hide();
$(dom.panelYourInfoId).hide();
senderBtnId = resolveSender(senderBtnId);
switch (senderBtnId) {
    case dom.btnYourInfoId:
        activateStepIcon(senderBtnId);
$(dom.panelYourInfoId).show();
                break;
            case dom.btnAccountSetup:
                activateStepIcon(senderBtnId);
                $(dom.panelAccountSetupId).show();
break;
default:
break;
}
}
function activateStepIcon(btnId)
{   
        $(dom.btnYourInfoId).removeClass(btnActiveCSS);
        $(dom.btnAccountSetup).removeClass(btnActiveCSS);
    $(btnId).addClass(btnActiveCSS);
}
function resolveSender(senderId) {
var result = senderId;
if (senderId.currentTarget && senderId.currentTarget.id)
result = senderId.currentTarget.id;
if (senderId[0] !== "#") {
result = "#" + result;
}
return result;
}
var init = function () {
bindCallBacks();
show(dom.btnYourInfoId); }
return new Object({
Init : init
});
})();

No comments:

Post a Comment