JAVASCRIPT   16

ellipsis.js

Guest on 15th August 2021 07:12:51 AM

  1.  
  2. angular
  3.    .module('fonderieComponent')
  4.    .directive('ellipsis', ['resizer', function (resizer) {
  5.  
  6.       return {
  7.         restrict: 'A',
  8.         scope : {
  9.  
  10.           height : "@"
  11.         },
  12.    
  13.         link: function ($scope, $element, $attr) {
  14.  
  15.             $element.addClass('fadeIn');
  16.  
  17.  
  18.             if($scope.height==undefined) {
  19.  
  20.                 $scope.height = Number($element[0].offsetHeight);
  21.  
  22.             }
  23.  
  24.            // $element[0].style.height = $scope.height+"px";
  25.            // $element[0].style.position = "relative";
  26.  
  27.             var reset = function () {
  28.  
  29.                 for(var i =0;  i<$element[0].childNodes.length; i++) {
  30.  
  31.                     var childElement = $element[0].childNodes[i];
  32.  
  33.                     if(childElement.style == undefined) {
  34.                         continue;
  35.                     }
  36.                  
  37.                     childElement.style.display = "";
  38.  
  39.                 }
  40.  
  41.             }
  42.  
  43.             reset();
  44.  
  45.             var getComputedWidth = function (element) {
  46.  
  47.                 var style = element.currentStyle || window.getComputedStyle(element),
  48.                 width = element.offsetWidth,
  49.                 margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight),
  50.                 padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
  51.                
  52.                 return width + (margin);
  53.  
  54.             }
  55.  
  56.             var getComputedHeight = function (element) {
  57.  
  58.  
  59.                 var style = element.currentStyle || window.getComputedStyle(element),
  60.                 height = element.offsetHeight, // or use style.width
  61.                 margin = parseFloat(style.marginTop) + parseFloat(style.marginBottom),
  62.                 padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
  63.            
  64.                 return height + (margin);
  65.  
  66.  
  67.             }
  68.  
  69.  
  70.             var resize = function (callback) {
  71.  
  72.  
  73.                 requestAnimationFrame(function() {
  74.  
  75.                     reset();
  76.  
  77.                     //Loop through children and evaluate height on containter;
  78.                     for(var i =$element[0].childNodes.length-1;  i>0; --i) {
  79.  
  80.                         var childElement = $element[0].childNodes[i];
  81.  
  82.                         if(childElement.style == undefined || childElement.tagName == "OBJECT") {
  83.  
  84.                             continue;
  85.                         }
  86.  
  87.                         childElement.style.display = "";
  88.  
  89.                     }
  90.                    
  91.                     //Loop through children and evaluate height on containter;
  92.                     for(var i =$element[0].childNodes.length-1;  i>=0; --i) {
  93.  
  94.                         var childElement = $element[0].childNodes[i];
  95.  
  96.                         if(childElement.style == undefined || childElement.tagName == "OBJECT") {
  97.  
  98.                             continue;
  99.                         }
  100.  
  101.                         var computedHeight = getComputedHeight($element[0]);
  102.  
  103.                         if(Number($scope.height) < computedHeight) {
  104.  
  105.                             childElement.style.display = "none";
  106.  
  107.                         } else {
  108.  
  109.                             childElement.style.display = "";
  110.  
  111.                         }
  112.  
  113.  
  114.                     }
  115.  
  116.                    
  117.                     if(typeof callback == 'function'){
  118.  
  119.                         callback();
  120.  
  121.                     };
  122.  
  123.                 })
  124.  
  125.             }
  126.  
  127.  
  128.             resize();
  129.  
  130.             resizer.addEventListener('resize', function (callback) {
  131.  
  132.                 resize(callback);
  133.  
  134.             }, $element);
  135.  
  136.             /*
  137.            
  138.             resizer.addEventListener('scroll', function(e) {
  139.            
  140.  
  141.                 console.log('firing');
  142.                 resize();
  143.             });
  144.             */
  145.      
  146.         }
  147.         }
  148. }]);

Raw Paste


Login or Register to edit or fork this paste. It's free.