JAVASCRIPT   28

framer.js

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

  1.  
  2. angular
  3.    .module('fonderieComponent')
  4.    .directive('framer', [ 'resizer', function (resizer) {
  5.  
  6.       return {
  7.         restrict: 'E',
  8.         scope : {
  9.             cropx:'@',
  10.             cropy:'@',
  11.             cropwidth:'@',
  12.             cropheight:'@',
  13.             width:'@',
  14.             height:'@',
  15.             layout:'<'
  16.  
  17.         },
  18.         link: function ($scope, $element, $attr) {
  19.  
  20.             var image;
  21.  
  22.  
  23.             $scope.cropx = Number($scope.cropx);
  24.             $scope.cropy = Number($scope.cropy);
  25.  
  26.             $scope.cropwidth = Number($scope.cropwidth);
  27.             $scope.cropheight = Number($scope.cropheight);
  28.  
  29.             $scope.width = Number($scope.width);
  30.             $scope.height = Number($scope.height);
  31.  
  32.  
  33.  
  34.             $scope.$watch('width', function () {
  35.  
  36.                 $scope.width = Number($scope.width);
  37.             });
  38.  
  39.             $scope.$watch('height', function () {
  40.  
  41.  
  42.                 $scope.height = Number($scope.height);
  43.             });
  44.  
  45.  
  46.  
  47.             var elementStyle = $element[0].style;
  48.  
  49.             var parent = $element.parent();
  50.  
  51.             elementStyle.display = 'block';
  52.             elementStyle.position = 'absolute';
  53.             elementStyle.left = '0px';
  54.             elementStyle.top ='0px';
  55.             elementStyle.width = '100%';
  56.             elementStyle.height = '100%';
  57.  
  58.  
  59.             elementStyle.overflow = 'hidden';
  60.  
  61.  
  62.             if($scope.layout == undefined) {
  63.  
  64.                 $scope.layout = "fit";
  65.             }
  66.  
  67.             if($attr.layout != undefined) {
  68.  
  69.                 $scope.layout = $attr.layout;
  70.             }
  71.  
  72.  
  73.             // With default options (will use the object-based approach).
  74.             // The object-based approach is deprecated, and will be removed in v2.
  75.             // var erd = elementResizeDetectorMaker();
  76.  
  77.             // var resized=false;
  78.  
  79.             /* erd.listenTo($element[0], function(element) {
  80.  
  81.                     resized = false;
  82.                     resize();
  83.  
  84.  
  85.  
  86.                 });
  87.             */
  88.  
  89.             resizer.addEventListener('resize', function (callback) {
  90.  
  91.                 resize(callback);
  92.  
  93.             }, $element);
  94.  
  95.             $scope.$watch('layout', function () {
  96.  
  97.                 resized = false;
  98.                 resize();
  99.  
  100.             });
  101.            
  102.             var imgDom = $element.children();
  103.  
  104.  
  105.  
  106.             imgDom.on('load', function () {
  107.  
  108.                 image = this;
  109.  
  110.                 var scope = $scope;
  111.  
  112.  
  113.                 if(image.naturalWidth != undefined) {
  114.  
  115.                     scope.width = Number(image.naturalWidth);
  116.                 }
  117.  
  118.                 if(image.naturalHeight != undefined) {
  119.  
  120.                     scope.height = Number(image.naturalHeight);
  121.                    
  122.                 }
  123.  
  124.                 resize();
  125.  
  126.             });
  127.  
  128.  
  129.  
  130.             var resize =  function (callback) {
  131.  
  132.  
  133.                 var scope = $scope;
  134.                 $element.addClass('fadeOut');
  135.                 $element.removeClass('fadeIn');
  136.  
  137.  
  138.  
  139.  
  140.                 requestAnimationFrame(function() {
  141.  
  142.    
  143.  
  144.                     if(scope.layout == "normal") {
  145.  
  146.                         computeNormalLayout();
  147.  
  148.                     } else if(scope.layout == "fit") {
  149.  
  150.                         computeFitLayout();
  151.  
  152.                     }
  153.                    
  154.  
  155.                     if(typeof callback == 'function'){
  156.  
  157.                         callback();
  158.  
  159.                     };
  160.  
  161.  
  162.                     window.setTimeout(function () {
  163.  
  164.                            
  165.                         $element.addClass('fadeIn');
  166.                         $element.removeClass('fadeOut');
  167.  
  168.  
  169.                     }, 200);
  170.  
  171.  
  172.                 });
  173.  
  174.  
  175.  
  176.             }
  177.  
  178.             $scope.resize = resize;
  179.  
  180.             resize();
  181.  
  182.  
  183.  
  184.             var computeNormalLayout = function () {
  185.  
  186.                 var scope = $scope;
  187.  
  188.                 if(image == undefined) {
  189.                    
  190.                     imgDom = $element.children();
  191.                     image = imgDom[0];
  192.  
  193.                 }
  194.  
  195.                 var parentW = $element[0].offsetWidth;
  196.                 var parentH = $element[0].offsetHeight;
  197.  
  198.                 var elementW, elementH;
  199.  
  200.  
  201.                 if(image.naturalWidth != undefined) {
  202.  
  203.                     elementW = Number(image.naturalWidth);
  204.                 }
  205.  
  206.                 if(image.naturalHeight != undefined) {
  207.  
  208.                     elementH = Number(image.naturalHeight);
  209.                    
  210.                 }
  211.  
  212.  
  213.                 if(parentW/parentH < scope.width/scope.height) {
  214.  
  215.  
  216.                     elementW = parentW;
  217.  
  218.                     elementH = elementW*(scope.height/scope.width);
  219.  
  220.  
  221.                     image.style.height = elementH +"px";
  222.                     image.style.width = elementW+"px";
  223.                     image.style.position = "absolute";
  224.                     image.style.margin = "auto";
  225.                     image.style.display = "block";
  226.                     image.style.top = "0px";
  227.  
  228.  
  229.            
  230.  
  231.  
  232.                     image.style.top = parentH/2-elementH/2 + "px";
  233.  
  234.                     image.style.left = parentW/2-elementW/2+"px";
  235.  
  236.                 } else {
  237.  
  238.  
  239.  
  240.                     elementH = parentH;
  241.  
  242.  
  243.  
  244.                     elementW = elementH*(scope.width/scope.height);
  245.  
  246.                     image.style.height = elementH +"px";
  247.                     image.style.width = elementW+"px";
  248.                     image.style.position = "absolute";
  249.                     image.style.margin = "auto";
  250.                     image.style.display = "block";
  251.                     image.style.left = parentW/2-elementW/2+"px";
  252.                     image.style.top = parentH/2-elementH/2 + "px";
  253.  
  254.                 }
  255.  
  256.  
  257.             }
  258.  
  259.  
  260.             var computeFitLayout = function () {
  261.  
  262.                 var scope = $scope;
  263.  
  264.  
  265.                 if(image == undefined) {
  266.                    
  267.                     imgDom =  $element.children();
  268.                     image = imgDom[0];
  269.  
  270.                 }
  271.  
  272.                 var RCx = Number(scope.cropx) + Number(scope.cropwidth)/2;
  273.                 var RCy =  Number(scope.cropy) + Number(scope.cropheight)/2;
  274.  
  275.                 var RCxPct =  RCx/scope.width;
  276.                 var RCyPct = RCy/scope.height;
  277.  
  278.                 var imageW = image.naturalWidth;
  279.                 var imageH = image.naturalHeight;
  280.  
  281.                 var parentW = $element[0].offsetWidth;
  282.                 var parentH = $element[0].offsetHeight;
  283.  
  284.  
  285.                 var imageRatio = imageH/imageW;
  286.  
  287.                 var parentRatio = parentH/parentW;
  288.  
  289.            
  290.                 image.style.position = "absolute";
  291.  
  292.                 //Width will be 100%;
  293.                 if(imageRatio > parentRatio) {
  294.  
  295.                     var imageWidth = parentW;
  296.  
  297.                     image.style.width = imageWidth+"px";
  298.                     image.style.height = "auto";
  299.  
  300.                     var top = RCyPct * image.offsetHeight - parentH/2;
  301.  
  302.                     if(top < 0) {
  303.  
  304.                         top = 0;
  305.                     }
  306.  
  307.                     if(image.offsetHeight - top < parentH) {
  308.  
  309.                         top += (image.offsetHeight - top) - parentH;
  310.  
  311.                     }
  312.  
  313.                     image.style.top = -top + "px";
  314.                     image.style.left = "0px";
  315.  
  316.                 } else {
  317.  
  318.                     var imageHeight = parentH;
  319.  
  320.                     image.style.height = imageHeight + "px";
  321.                     image.style.width = "auto";
  322.  
  323.                     var left = RCxPct * image.offsetWidth - parentW/2;
  324.  
  325.                     if(left < 0){
  326.  
  327.                         left = 0;
  328.  
  329.                     }
  330.  
  331.                     if(image.offsetWidth - left < parentW) {
  332.  
  333.                         left += (image.offsetWidth - left) - parentW;
  334.                     }
  335.  
  336.                     image.style.top = "0px";
  337.                     image.style.left = -left + "px";
  338.  
  339.                 }
  340.            
  341.             }
  342.  
  343.             /* resizer.addEventListener('scroll', function(e) {
  344.                
  345.                 console.log('firing');
  346.                 resize();
  347.             });*/
  348.      
  349.         }
  350.   };
  351. }]);

Raw Paste


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