JAVASCRIPT   57

gallery.js

Guest on 15th August 2021 07:19:19 AM

  1. angular
  2.    .module('fonderieComponent')
  3.    .directive('gallery', [ '$timeout', 'resizer', function ($timeout, resizer) {
  4.  
  5.       return {
  6.         restrict: 'E',
  7.         transclude : "true",
  8.  
  9.         scope : {
  10.  
  11.         },
  12.  
  13.         link: function ($scope, $element, $attr, _, transclude) {
  14.  
  15.  
  16.  
  17.             transclude($scope, function(clone) {
  18.                
  19.                 $element.append(clone);
  20.            
  21.             });
  22.  
  23.  
  24.             //The active gallery item;
  25.             $scope.activeItem;
  26.  
  27.             var galleryItems = $element.find('[gallery-item]');
  28.  
  29.             var index = 0;
  30.  
  31.             var timer;
  32.        
  33.             var galleryLength = $element.find('[gallery-item]').length;
  34.  
  35.  
  36.             if(galleryLength <= 1) {
  37.  
  38.                 $element.find('previous')[0].style.display = "none";
  39.                 $element.find('next')[0].style.display = "none";
  40.             }
  41.  
  42.  
  43.             $element.find('previous').bind('click', function () {
  44.  
  45.                 previous();
  46.  
  47.             });
  48.  
  49.             $element.find('next').bind('click', function () {
  50.  
  51.                 next();
  52.  
  53.             });
  54.  
  55.  
  56.             var next = function () {
  57.                
  58.                 index +=1;
  59.  
  60.                 index =  index%galleryItems.length;
  61.  
  62.                 render();
  63.  
  64.             }
  65.  
  66.  
  67.             var previous = function () {
  68.  
  69.                 index -= 1;
  70.  
  71.                 index = (index+galleryItems.length)%galleryItems.length;
  72.  
  73.                 render();
  74.  
  75.             }
  76.  
  77.  
  78.  
  79.             var render = function () {
  80.  
  81.                galleryItems = $element.find('[gallery-item]');
  82.  
  83.                galleryItems.each(function( i ) {
  84.  
  85.  
  86.                     if(index == i ) {
  87.  
  88.                         galleryItems[i].style.visibility = 'visible';
  89.                         galleryItems[i].style.pointerEvents = 'auto';
  90.  
  91.  
  92.                         galleryItems[i].style.opacity = "1";
  93.  
  94.                     } else {
  95.  
  96.                         galleryItems[i].style.visibility = 'hidden';
  97.                         galleryItems[i].style.pointerEvents = 'none';
  98.                         galleryItems[i].style.opacity = "0";
  99.        
  100.                     }
  101.  
  102.                 });
  103.  
  104.  
  105.              
  106.  
  107.    
  108.          
  109.  
  110.             }
  111.  
  112.             $scope.layout = "fit";
  113.             $scope.fullscreen = false;
  114.  
  115.             $element.addClass('windowed');
  116.  
  117.             $scope.setFullScreen = function (bool) {
  118.  
  119.                 if(bool == true) {
  120.  
  121.  
  122.  
  123.                     $element.addClass('fullscreen');
  124.  
  125.                     $element.removeClass('windowed');
  126.  
  127.  
  128.  
  129.                     $scope.layout = "normal";
  130.                     $scope.fullscreen = true;
  131.  
  132.  
  133.                     $element[0].style.zIndex = "100";
  134.                     $element[0].style.position = "fixed";
  135.                     $element[0].style.top = "0px";
  136.                     $element[0].style.left = "0px";
  137.                     $element[0].style.width = "100%";
  138.                     $element[0].style.height = "100%";
  139.                     $element[0].style.backgroundColor="#222";
  140.  
  141.                     resizer.reset();
  142.  
  143.  
  144.                     window.dispatchEvent(new Event("resize"));
  145.  
  146.  
  147.  
  148.                 } else {
  149.  
  150.                     console.log('not fullscreen');
  151.  
  152.  
  153.                     $element.removeClass('fullscreen');
  154.  
  155.                     $element.addClass('windowed');
  156.  
  157.                    
  158.                     $scope.layout = "fit";
  159.                     $scope.fullscreen = false;
  160.  
  161.                     $element[0].style.zIndex = "";
  162.                     $element[0].style.position = "absolute";
  163.                     $element[0].style.top = "0px";
  164.                     $element[0].style.left = "0px";
  165.                     $element[0].style.width = "100%";
  166.                     $element[0].style.height = "100%";
  167.                     $element[0].style.backgroundColor="";
  168.  
  169.  
  170.                     resizer.reset();
  171.  
  172.                     window.dispatchEvent(new Event("resize"));
  173.  
  174.                 }
  175.  
  176.                 $scope.$broadcast('gallery-fullscreen', $scope);
  177.  
  178.  
  179.             }
  180.  
  181.             $scope.openFullScreen = function () {
  182.  
  183.                 $scope.setFullScreen(true);
  184.  
  185.             }
  186.  
  187.             $scope.closeFullScreen = function () {
  188.  
  189.                 $scope.setFullScreen(false);
  190.             }
  191.  
  192.  
  193.  
  194.             render();
  195.  
  196.         }
  197.  
  198.     }
  199.  
  200. }]);

Raw Paste


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