zettapi_client/lib/directives/hideElement/hideElement.dir.js

Admin panel and client-side CRUD operations in angular to use with zettapi_server rest api to get started quickly in any CMS project.

app.directive('hideElement', function($timeout, $window) {
  return {
    restrict: 'A',
    scope: {
      exclude: '@'
    },
    link: function(scope, element, attrs) {
      function isVisible(ele) {
        if (angular.element(ele).hasClass('ng-hide')) return true;
        var rect = ele.getBoundingClientRect();
        var top = rect.top;
        var height = rect.height;
        return rect.top + rect.height <= $window.innerHeight;
      }

      function doResize() {
        var elements = document.querySelectorAll("[hide-element='" + attrs.hideElement + "']");
        var allVisible = true;
        elements.forEach(function(e) {
          allVisible = allVisible && isVisible(e);
        });
        if (!allVisible) {
          elements.forEach(function(e) {
            angular.element(e).removeClass('ng-hide');
          });
        } else {
          elements.forEach(function(e) {
            if (e.attributes.exclude.value !== 'true') {
              angular.element(e).addClass('ng-hide');
            } else {
              angular.element(e).removeClass('ng-hide');
            }
          });
        }
      }

      angular.element(document).ready(function() { doResize(); });
      angular.element($window).on('resize', doResize);
    }
  };
});