all files / js/ filterui.js

100% Statements 75/75
100% Branches 4/4
100% Functions 22/22
100% Lines 75/75
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155                                       15×   15× 15×   15× 15× 15× 15×   15×     15×     15× 15×     16×       15×                                           15×     15× 15× 15×     15× 15× 15×     15× 15× 15×     15× 15× 15×     45×     45×     45×                            
var $ = require('jquery');
require('jquery-ui');
require('jquery-deserialize');
require('jquery-ui-timepicker-addon');
var freewall = require('freewall').Freewall;
 
/** Set of filters.
 * @constructor
 * @param {string} containerID - DOM element ID of the widget
 * @param {string[]} [tabs] -
    list of selectors pointing to divs corresponding to each tab
 */
var FilterForm = (function(){
    'use strict';
 
    var TIME_PICKER_SETTINGS = {
        showButtonPanel: true,
        controlType: 'select',
        oneLine: true,
        dateFormat: "yy-mm-dd"
    };
    var DATE_PICKER_SETTINGS = {
        showButtonPanel: true,
        dateFormat: "yy-mm-dd"
    };
 
    var FilterForm = function(containerID, tabs) {
 
        this.containerID = containerID;
 
        var that = this;
        var walls = [];
 
        deserializeForms();
        setSerializationOnChangeEvent();
        addCustomPickers();
        saveReferenceInDOM(that);
 
        if (tabs && tabs instanceof Array) {
            setFreewall();
            setTabs();
        }
 
        function getHashString() {
            return window.location.hash.substring(1);
        }
 
        function deserializeForms() {
            var data = getHashString();
            $('filter-form').find('form').deserialize(data);
        }
 
        function serializeForms() {
            var nonEmptyInputFields = $("filter-form input").filter(function () {
                return !!this.value;
            });
            var newHash = nonEmptyInputFields.serialize();
            window.location.hash = newHash;
        }
 
        function setSerializationOnChangeEvent() {
            $(containerID).on("change", function (event) {
                serializeForms();
            });
        }
 
        function setTabs() {
            $(containerID + '_ff').tabs({
                create: rearrangeAllColumns,
                activate: rearrangeAllColumns
            });
        }
 
        function rearrangeAllColumns() {
            for (var i in walls) {
                walls[i].fitWidth();
            }
        }
 
        function setFreewall() {
            for (var idx in tabs) {
                var wall = new freewall(tabs[idx]);
                walls.push(wall);
                wall.reset({
                    selector: '.ff-group',
                    animate: true,
                    cellW: 170,
                    cellH: 'auto',
                    gutterY: 0,
                    onResize: rearrangeAllColumns
                });
                rearrangeAllColumns();
            }
        }
 
        function saveReferenceInDOM(that) {
            $(containerID).data('FilterForm', that);
        }
 
        function addCustomPickers() {
            addCustomDatePicker();
            addCustiomTimeDateTimePicker();
            addCustomTimePicker();
        }
 
        function addCustomDatePicker() {
            var dateFields = getInputFieldsOfType('date');
            dateFields.datepicker(DATE_PICKER_SETTINGS);
            convertInputToTextType(dateFields);
        }
 
        function addCustiomTimeDateTimePicker() {
            var dateTimeFields = getInputFieldsOfType('datetime-local');
            dateTimeFields.datetimepicker(TIME_PICKER_SETTINGS);
            convertInputToTextType(dateTimeFields);
        }
 
        function addCustomTimePicker() {
            var timeFields = getInputFieldsOfType('time');
            timeFields.timepicker(TIME_PICKER_SETTINGS);
            convertInputToTextType(timeFields);
        }
 
        function getInputFieldsOfType(inputType) {
            return $("filter-form").find(getInputTypeSelector(inputType));
        }
 
        function getInputTypeSelector(inputType) {
            return "input[type='"+ inputType + "']";
        }
 
        function convertInputToTextType($field) {
            $field.attr('type','text');
        }
 
    };
 
    FilterForm.prototype = {
        serialize: function() {
             return $(this.containerID).serialize();
        },
        onSubmit: function(callback) {
            $(this.containerID).on("submit", function(event) {
                event.preventDefault();
                event.stopPropagation();
                callback(event);
            });
        }
    };
 
    return FilterForm;
})();
 
module.exports = FilterForm;