modules/yangman-resources/src/main/resources/yangman/directives/height-watcher.directive.js

   1 define([], function () {
   2     'use strict';
   3
   4     angular.module('app.yangman').directive('heightWatcher', heightWatcherDirective);
   5
   6     function heightWatcherDirective() {
   7     return {
   8         restrict: 'A',
   9         link: function (scope, element, attrs) {
  10             scope.$watch(function () {
  11                 return element.css(attrs['watchAttribute']);
  12             },  heightChangedCallBack,
  13             true);
  14
  15             scope.heightTotal = null;
  16
  17             function heightChangedCallBack(newHeight, oldHeight) {
  18                 var heightReceivedData, heightSentData;
  19
  20                 if (newHeight !== oldHeight) {
  21                     // set total available height
  22                     scope.heightTotal = angular.element('#jsonSection')[0].offsetHeight;
  23
  24                     // set full height of ReceiveData (if there will be no sent data)
  25                     angular.element('#ReceiveData').css('height', scope.heightTotal + 'px');
  26
  27                     heightSentData = angular.element('#sentData')[0].offsetHeight;
  28                     heightReceivedData = angular.element('#ReceiveData')[0].offsetHeight;
  29
  30                     // set ReceiveData height to fill up bottom
  31                     if ((heightSentData + heightReceivedData) < scope.heightTotal) {
  32                         angular.element('#ReceiveData').css('height', scope.heightTotal - heightSentData + 'px');
  33                     }
  34                 }
  35             }
  36         }
  37     };
  38     }
  39 });