JAVASCRIPT   16

font-fit.js

Guest on 15th August 2021 07:14:02 AM

  1.  
  2. angular
  3.    .module('fonderieComponent')
  4.    .directive('fontFit', [ 'resizer', function(resizer) {
  5.  
  6.       return {
  7.         restrict: 'AC',
  8.         scope : {
  9.  
  10.           minsize : "@",
  11.           maxsize : "@" ,
  12.           breakevery : "@",
  13.           step:"@"
  14.         },
  15.    
  16.         link: function ($scope, $element, $attr) {
  17.  
  18.             if($scope.minsize == undefined) {
  19.                 $scope.minsize = 36;
  20.             }
  21.  
  22.             if($scope.maxsize == undefined) {
  23.                 $scope.maxsize = 80;
  24.             }
  25.  
  26.             if($scope.step == undefined) {
  27.  
  28.                 $scope.step = 3;
  29.             }
  30.  
  31.  
  32.             var breakHtml = function (str, every) {
  33.  
  34.                 var text = "";
  35.  
  36.                 for (var i = 0, charsLength = str.length; i < charsLength; i += every) {
  37.                     var chunk = str.substring(i, i + every);
  38.                     text += chunk;
  39.                     text += "<br/>";
  40.  
  41.                 }
  42.  
  43.  
  44.                 return text;
  45.             }
  46.  
  47.             if($scope.breakevery !=undefined){
  48.  
  49.                 var html=breakHtml($element.html(), 2);
  50.  
  51.                 $element.html(html);
  52.  
  53.             }
  54.  
  55.             var parent = $element[0].parentNode;
  56.  
  57.             var fadeIn = false;
  58.  
  59.             // With default options (will use the object-based approach).
  60.             // The object-based approach is deprecated, and will be removed in v2.
  61.             /*var erd = elementResizeDetectorMaker();
  62.  
  63.             erd.listenTo(parent, function(element) {
  64.                
  65.                 fadeIn = false;
  66.                 resize();
  67.  
  68.             });*/
  69.  
  70.             var getComputedWidth = function (element) {
  71.  
  72.  
  73.                 var style = element.currentStyle || window.getComputedStyle(element),
  74.                 width = element.offsetWidth,
  75.                 margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight),
  76.                 padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
  77.                
  78.                 return width + (margin);
  79.  
  80.             }
  81.  
  82.             var getComputedHeight = function (element) {
  83.  
  84.  
  85.                 var style = element.currentStyle || window.getComputedStyle(element),
  86.                 height = element.offsetHeight, // or use style.width
  87.                 margin = parseFloat(style.marginTop) + parseFloat(style.marginBottom),
  88.                 padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
  89.            
  90.                 return height;
  91.  
  92.  
  93.             }
  94.    
  95.             var resize = function (callback) {
  96.  
  97.  
  98.                 $element.addClass('fadeOut');
  99.                 $element.removeClass('fadeIn');
  100.  
  101.  
  102.                 requestAnimationFrame(function() {
  103.  
  104.                     var font = $scope.maxsize + "px";
  105.  
  106.                     var min = Number($scope.minsize);
  107.                     var max = Number($scope.maxsize);
  108.  
  109.                     $element[0].style.fontSize = font;
  110.  
  111.                     $element[0].style.display = "inline";
  112.  
  113.                     var size = max;
  114.  
  115.                     var cycle = Number($scope.step);
  116.  
  117.                     for(var i = 0; i < cycle; ++i) {
  118.  
  119.                         size = Math.floor(size);
  120.  
  121.                         font = size + "px";
  122.  
  123.                         $element[0].style.fontSize = font;
  124.  
  125.                         var parentWidth = getComputedWidth(parent);
  126.                         var parentHeight = getComputedHeight(parent);
  127.  
  128.                         var width = getComputedWidth($element[0]);
  129.                         var height = getComputedHeight($element[0]);
  130.  
  131.                         if(parentHeight > height && parentWidth > width) {
  132.  
  133.                            
  134.                            // console.log('this fires');
  135.                             //size += Math.abs(max-size)/cycle;
  136.  
  137.                         } else {
  138.  
  139.                             size -=  Math.abs(max-min)/cycle;
  140.  
  141.  
  142.  
  143.                         }
  144.  
  145.  
  146.  
  147.                     }
  148.  
  149.                     if(typeof callback == 'function'){
  150.  
  151.                         callback();
  152.  
  153.                     };
  154.  
  155.  
  156.  
  157.                     window.setTimeout(function () {
  158.  
  159.                            
  160.                         $element.addClass('fadeIn');
  161.                         $element.removeClass('fadeOut');
  162.  
  163.  
  164.                     }, 200);
  165.  
  166.  
  167.                 });
  168.        
  169.             }
  170.  
  171.  
  172.             resize();
  173.  
  174.             resizer.addEventListener('resize', function (callback) {
  175.  
  176.                 resize(callback);
  177.  
  178.             }, $element);
  179.  
  180.            
  181.  
  182.         }
  183.         }
  184. }]);

Raw Paste


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