ZipcodePopover.js

/* written by worc, with revisions by merrycakes */

var ZipcodePopover = (function () {
    var region, fragment, zipcodeMessage, zipcodeInput, countySelect, countyMessage,
        okButton, target, validControlKeys;

    fragment = {};

    /* I've got this idea to pass in keys we want to filter for or against */
    validControlKeys = [8, 37, 39, 13, 27];

    function init(targetElement) {

        target = targetElement;

        if (typeof target.data === 'undefined') {
            target.data = {};
        }
        if (typeof target.data.zipcode === 'undefined') {
            target.data.zipcode = '';
        }
        if (typeof target.data.county === 'undefined') {
            target.data.county = '';
        }

        region = {};
        region.zipcode = target.data.zipcode;
        region.county = target.data.county;

        generateFragment();
    }

    function generateFragment() {

        fragment = createElement('span', null, 'zipcode-popover-contents', null);
        zipcodeMessage = createElement('div', null, ['initial_first', 'zipcode-message'], 'Zipcode');
        zipcodeInput = createElement('input', null, 'zipcode-input', null);
        countySelect = createElement('select', null, 'zipcode-county-select', null);
        countyMessage = createElement('div', null, ['initial_first', 'zipcode-county-message'], 'County');
        okButton = createElement('button', null, ['btn-small', 'zipcode-ok-btn', 'color-gray'], 'OK');

        $(fragment).append(zipcodeMessage)
            .append(zipcodeInput)
            .append(countySelect)
            .append(countyMessage)
            .append(okButton);

        fragment.style.display = 'inline-block';
        zipcodeInput.maxLength = 5;
        zipcodeInput.value = target.data.zipcode;
        okButton.setAttribute('disabled', 'disabled');

        bindEvents();
        hideCountySelect();

        //return fragment;
    }

    function bindEvents() {
        $(document).on('click', PortletTools.escapeNamespace($nsThis.viewportId, '.zipcode-ok-btn'), submit)
            .on('onblur keyup', PortletTools.escapeNamespace($nsThis.viewportId, '.zipcode-popover-contents'), updateAndValidate)
            .on({
                keypress: restrictZipcodeInput,
                keydown: handleEscOrEnter
            })/*, PortletTools.escapeNamespace($nsThis.viewportId, '.zipcode-input'))
            .on('click', clickAway)*/;
    }

    function parseKeycode(event) {
        return event.which || event.keyCode;
    }

    function handleEscOrEnter(event) {
        var keycode = parseKeycode(event);
        if (keycode === enterPressed) {
            submit();
        } else if (keycode === escapePressed) {
            cancel();
        }
    }

    function restrictZipcodeInput(event) {
        var keycode = parseKeycode(event);
        if (!validNumberKey(keycode) && !validControlKey(keycode)) {
            event.preventDefault();
        }
    }

    function validNumberKey(keycode) {
        var regex = /[0-9]/;
        return regex.test(String.fromCharCode(keycode));
    }

    function validControlKey(keycode) {
        return $.inArray(keycode, validControlKeys) > -1;
    }

    function submit() {
        console.log('TODO: double check with backend before submitting these values');
        if (!$(okButton).is(':disabled')) {
            writeToBanner();
            hidePopover();
        }
    }

    function cancel() {
        writeToModal();
        hidePopover();
    }

    function writeToBanner() {
        var value = $(zipcodeInput).val();
        target = $('.zipcode-popover');
        target.text(value);
        target.data.zipcode = value;
    }

    function writeToModal() {
        target = $('.zipcode-popover');
        $('.zipcode-input').val(target.data.zipcode);
    }

    function updateAndValidate(event) {
        var zipcodeMaxLength = 5,
            error = null,
            regionData;

        updateReferencesFromEventDelegate($(event.delegateTarget));

        if ($(zipcodeInput).val().length === zipcodeMaxLength) {
            $.getJSON(PortalServices.PersonalizationAsyncService.endpoints.getPersonalization, function(json) {
                regionData = json.payload.personalization;
                regionData.zipcode = zipcodeInput.value;

                $.post(PortalServices.PersonalizationAsyncService.endpoints.updatePersonalization, regionData, function(e) {
                    console.log(e)
                });
            });




//                        try {
//                            householdDataManager.setRegion(region);
//                        } catch (e) {
//                            error = e;
//                            console.log(error);
//                        }
//                        regionData = householdDataManager.getRegionControlData();
            setCountySelectState(regionData);
            setErrorMessageState(regionData, error);
            setOkButtonState(regionData, error);
        } else {
            disableOkButton();
        }

//                    if ($(zipcodeInput).val().length === zipcodeMaxLength /* && backendCall returns a thumbs-up */) {
//                        console.log('TODO: backend success handling');
//                        hideRegionErrorMessage();
//                        enableOkButton();
//                    }
//
//                    if ($(zipcodeInput).val().length === zipcodeMaxLength /* && backendCall returns error */) {
//                        // showRegionErrorMessage();
//                        // disableOkButton();
//                        console.log('TODO: backend error handling ');
//                    }
    }

    function setOkButtonState(regionData, error) {
        console.log('TODO: handle changing OK state based on bad zipcode/region messages');
        console.log(regionData);
        console.log(error);
    }

    function setErrorMessageState(regionData, error) {
        console.log('TODO: handle bad zipcode/region messages from the backend');
        console.log(regionData);
        console.log(error);
    }

    function setCountySelectState(regionData) {
        if (regionData.possible_counties.length > 1) {
            showCountySelect();
            clearCountySelect();
            populateCountySelect(regionData.possible_counties);
            $(countySelect).find('option[value=" + regionData.selected_county + "]').attr('selected', 'selected');
        } else {
            hideCountySelect();
        }
    }

    function updateReferencesFromEventDelegate(eventDelegate) {
        zipcodeInput = eventDelegate.find('.zipcode-input')[0];
        zipcodeMessage = eventDelegate.find('.zipcode-message')[0];
        countySelect = eventDelegate.find('.zipcode-county-select')[0];
        countyMessage = eventDelegate.find('.zipcode-county-message')[0];
        okButton = eventDelegate.find('.zipcode-ok-btn')[0];
    }

    function disableOkButton() {
        $(okButton).removeClass('color-gray')
            .removeClass('color-black')
            .addClass('color-gray')
            .attr('disabled', 'disabled');
    }

    function enableOkButton() {
        $(okButton).removeClass('color-gray')
            .removeClass('color-black')
            .addClass('color-black')
            .removeAttr('disabled');
    }

    function showRegionErrorMessage() {
        $(zipcodeMessage).text('XXX ZIPCODE ERROR XXX');
    }

    function hideRegionErrorMessage() {
        $(zipcodeMessage).text('Zipcode');
    }

    function showCountySelect() {
        $(countySelect).show();
        $(countyMessage).show();
    }

    function populateCountySelect() {
        var element, i, args;
        args = arguments;
        for (i = 0; i < arguments.length; i++) {
            if ($.isArray(arguments[i])) {
                parseCountyArrayParam(arguments[i], args);
            } else {
                element = createElement('option', null, null, args[i]);
                $(countySelect).append(element);
            }
        }
    }

    function parseCountyArrayParam(array, args) {
        var i = 0;
        for (i; i < array.length; i++) {
            args[args.length] = array[i];
            args.length++;
        }
    }

    function clearCountySelect() {
        var countySelectQuery = $(countySelect);
        while (countySelectQuery.first()) {
            countySelectQuery.remove(countySelectQuery.first());
        }
    }

    function hideCountySelect() {
        $(countySelect).hide();
        $(countyMessage).hide();
    }

    function showPopover() {
        $('.zipcode-popover').popover('show');
    }

    function hidePopover() {
        $('.zipcode-popover').popover('hide');
    }

    function createElement(type, id, classNames, text) {
        var i,
            elementType = '<' + type + '/>',
            attributes = {};
        attributes.text = text;
        if (id !== null) {
            attributes.id = id;
        }
        if (classNames !== null) {
            attributes['class'] = '';
            if ($.isArray(classNames)) {
                for (i = 0; i < classNames.length; i++) {
                    attributes['class'] += attributes['class'] + ' ' + classNames[i];
                    attributes['class'] = attributes['class'].trim();
                }
            } else {
                attributes['class'] = classNames;
            }
        }
        return $(elementType, attributes)[0];
    }

    function getFragment() {
        return fragment;
    }

    return {
        html: getFragment,
        refresh: init
    };
}());