client-ui/source/shared/equal-height-columns-directive.js

Testing implementation of nodeJs Backend, angular frontend, and hopefully in a way that this can be deployed to s3/cloudfront

(function () {
    'use strict';

    angular.module(moduleName).directive('equalHeightColumns', equalHeightController);
    equalHeightController.$inject = ['$timeout'];

    function equalHeightController($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs, modelCtrl) {
                var setEqualHeightTimeout = null;
                function setEqualHeightElements() {
                    $timeout.cancel(setEqualHeightTimeout);
                    setEqualHeightTimeout = $timeout(function () {
                        var $cols = element.find('.equal-height');
                        if (!$cols.length) {
                            $cols = element.children();
                        }
                        if ($cols.length) {
                            $cols.height('auto');
                            var cTop = 0;
                            var cHeight = 0;
                            $cols.each(function () {
                                var $col = $(this);
                                // if top of columns do not match, force to 0 and short-circuit
                                cTop = !(cTop + cHeight) ? $col.offset().top : ($col.offset().top == cTop ? cTop : 0);
                                cHeight = Math.max($col.height(), cHeight);
                            });
                            if (cTop && cHeight) {
                                $cols.height(cHeight);
                            }
                        }
                    }, 500);
                }
                setEqualHeightElements();
                $(window).on('resize', setEqualHeightElements);
            }
        };
    };

})();