{"size": 4072, "ext": "js", "max_stars_repo_path": "admin/webapp/root/app_src/js/nv/common/curtainPanel.directive.js", "max_stars_repo_name": "rushk014/manager", "max_stars_repo_stars_event_min_datetime": "2022-01-17T02:48:03.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-29T09:16:08.000Z", "max_issues_repo_path": "admin/webapp/root/app_src/js/nv/common/curtainPanel.directive.js", "max_issues_repo_name": "rushk014/manager", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "admin/webapp/root/app_src/js/nv/common/curtainPanel.directive.js", "max_forks_repo_name": "rushk014/manager", "max_forks_repo_forks_event_min_datetime": "2022-01-14T18:12:28.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-28T04:58:14.000Z"}
{"max_stars_count": 19, "max_issues_count": null, "max_forks_count": 16, "avg_line_length": 32.8387096774, "max_line_length": 124, "alphanum_fraction": 0.5046660118}
(function () {
  "use strict";

  angular
    .module('app.common')
    .directive('curtainPanel', DashboardHeading);
  /*Use case:
           <curtain-panel html-content="{{html}}" width="70" height="200" button-top="10" button-right="10"></curtain-panel>
            attribute: html-content - If $sce.trustAsHtml applied, developer can pass html with style and script
                       width: Percentage value
                       height: Absolute pixel value
                       button-top/bottom/left/right: Absolute pixel value for info button position

           !!(Issue existing now) <curtain-panel html-content="{{html}}" width="70" height="200" ></curtain-panel>
  */

  DashboardHeading.$inject = [
    "$sanitize",
    "$timeout"
  ];
  function DashboardHeading(
    $sanitize,
    $timeout
  ) {
    return {
      restrict: "EA",
      templateUrl: "app/views/components/curtain-panel.html",
      scope: {
        htmlContent: "@",
        dimension: "@",
        top: "@",
        type: "@",
        buttonPosition: "@"
      },
      link: function(scope, element, attributes) {
        let transformOrigin = "top";
        let timer = null;
        if (attributes.type !== "drag-down" && attributes.type !== "info-click") {
          scope.type = "info-click";
        } else {
          scope.type = attributes.type;
        }
        scope.isShowingSummary = false;//attributes.defaultOpen === "true";
        scope.htmlContent = $sanitize(attributes.htmlContent);
        scope.dimension = {
          width: `${attributes.width}%`,
          height: scope.isShowingSummary ? `${attributes.height}px` : "0",
          transform: scope.isShowingSummary ? "scaleY(1)" : "scaleY(0)",
          transformOrigin: transformOrigin,
          transition: "all .5s ease",
          left: `calc(50% - ${attributes.width / 2}%)`
        }
        scope.top = {
          top: scope.isShowingSummary ? `${attributes.height}px` : "0",
          transition: "all .5s ease"
        }

        scope.buttonPosition = {
          position: "absolute",
          top: `${attributes.buttonTop}px` || "0",
          left: `${attributes.buttonLeft}px` || "0",
          right: `${attributes.buttonRight}px` || "0",
          bottom: `${attributes.buttonBottom}px` || "0"
        }

        const toggle = function(open) {
          if (open) {
            if (timer) $timeout.cancel(timer)
            scope.dimension = {
              width: `${attributes.width}%`,
              height: `${attributes.height}px`,
              transform: "scaleY(1)",
              transformOrigin: transformOrigin,
              transition: "all .5s ease",
              left: `calc(50% - ${attributes.width / 2}%)`
            }
            scope.top = {
              top: `${attributes.height}px`,
              transition: "all .5s ease"
            }
          } else {
            timer = $timeout(function() {
              scope.dimension = {
                width: `${attributes.width}%`,
                height: `${attributes.height}px`,
                transform: "scaleY(0)",
                transformOrigin: transformOrigin,
                transition: "all .5s ease",
                left: `calc(50% - ${attributes.width / 2}%)`
              }
              scope.top = {
                top: "0",
                transition: "all .5s ease"
              }
            },2000);
          }

        }

        // const globalClick = function(ev) {
        //   ev.stopPropagation();
        //   scope.isShowingSummary = false;
        //   toggle();
        // }

        scope.toggleSummary = function(ev, open) {
          ev.stopPropagation();
          toggle(open);
          // if (scope.isShowingSummary) {
          //   document.body.addEventListener("click", globalClick);
          // } else {
          //   document.body.removeEventListener("click", globalClick);
          // }
        }

        // scope.$on("destroy", function() {
        //   document.body.removeEventListener("click", globalClick);
        // });
      }
    }
  }

})();
