essa-platform / es-ng-antd

Blame view

build/ImagePreviewGroup/ImagePreviewGroup.js 4.09 KB
Edit Raw Normal View History
3a3ecabe   Imshann   init 
1
 
  import template from "./ImagePreviewGroup.html";
1145f171   Imshann   优化Image相关组件 
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  angular.module("esNgAntd").directive("antdImagePreviewGroup", ["esNgAntd", function (esNgAntd) {
    return {
      template: template,
      restrict: "E",
      replace: true,
      transclude: true,
      scope: {
        preview: "="
      },
      controller: function ($scope, $element, $attrs) {
        this.getContext = function () {
          return $scope;
        };
3a3ecabe   Imshann   init 
15
1145f171   Imshann   优化Image相关组件 
16
17
18
19
20
21
 
        $scope.state = {
          current: 0,
          visible: false,
          src: null,
          childrens: []
        };
1b6f912f   Imshann   优化 
22
1145f171   Imshann   优化Image相关组件 
23
24
25
26
 
        $scope.addChildren = function (children) {
          $scope.state.childrens.push(children);
          return $scope.state.childrens.length - 1;
        };
1b6f912f   Imshann   优化 
27
1145f171   Imshann   优化Image相关组件 
28
29
 
        $scope.setCurrent = function (value) {
          $scope.state.current = value;
4c519425   Imshann   优化图片组件 
30
1145f171   Imshann   优化Image相关组件 
31
32
33
34
 
          if (typeof $scope.preview === "object" && typeof $scope.preview.onCurrentChange === "function") {
            $scope.preview.onCurrentChange(value);
          }
        };
4c519425   Imshann   优化图片组件 
35
1145f171   Imshann   优化Image相关组件 
36
37
 
        $scope.setVisible = function (value) {
          $scope.state.visible = value;
4c519425   Imshann   优化图片组件 
38
1145f171   Imshann   优化Image相关组件 
39
40
41
42
 
          if (typeof $scope.preview === "object" && typeof $scope.preview.onVisibleChange === "function") {
            $scope.preview.onVisibleChange(value);
          }
        };
4c519425   Imshann   优化图片组件 
43
1145f171   Imshann   优化Image相关组件 
44
45
46
47
48
 
        $scope.handleOpen = function (index) {
          $scope.setCurrent(index);
          $scope.state.src = $scope.state.childrens[index].state.src;
          $scope.setVisible(true);
        };
1b6f912f   Imshann   优化 
49
1145f171   Imshann   优化Image相关组件 
50
51
52
 
        $scope.handleClose = function () {
          $scope.setVisible(false);
        };
1b6f912f   Imshann   优化 
53
1145f171   Imshann   优化Image相关组件 
54
55
56
57
 
        $scope.handlePrev = function () {
          $scope.setCurrent($scope.state.current > 0 ? $scope.state.current - 1 : 0);
          $scope.state.src = $scope.state.childrens[$scope.state.current].state.src;
        };
1b6f912f   Imshann   优化 
58
1145f171   Imshann   优化Image相关组件 
59
60
61
62
 
        $scope.handleNext = function () {
          $scope.setCurrent($scope.state.current < $scope.state.childrens.length - 1 ? $scope.state.current + 1 : $scope.state.childrens.length - 1);
          $scope.state.src = $scope.state.childrens[$scope.state.current].state.src;
        };
1b6f912f   Imshann   优化 
63
1145f171   Imshann   优化Image相关组件 
64
65
 
        $scope.handlePreview = function () {
          let className;
4c519425   Imshann   优化图片组件 
66
1145f171   Imshann   优化Image相关组件 
67
68
69
 
          if ($attrs.class) {
            className = ` ${$attrs.class}`;
          }
4c519425   Imshann   优化图片组件 
70
1145f171   Imshann   优化Image相关组件 
71
 
          esNgAntd.createLayer(`
4c519425   Imshann   优化图片组件 
72
 
              <div class="ant-image-preview-root${className}">
1b6f912f   Imshann   优化 
73
74
75
76
77
78
79
80
 
                  <div class="ant-image-preview-mask" ng-if="state.visible"></div>
                  <div class="ant-image-preview-wrap" ng-show="state.visible">
                      <div class="ant-image-preview">
                          <div class="ant-image-preview-content">
                              <div class="ant-image-preview-body">
                                  <ul class="ant-image-preview-operations">
                                      <li class="ant-image-preview-operations-operation">
                                          <span class="anticon anticon-close ant-image-preview-operations-icon" ng-click="handleClose()">
81f8a467   Imshann   调整组件前缀 
81
 
                                              <antd-icon type="CloseOutlined"></antd-icon>
1b6f912f   Imshann   优化 
82
83
84
85
86
87
88
 
                                          </span>
                                      </li> 
                                  </ul>
                                  <div class="ant-image-preview-img-wrapper">
                                      <img class="ant-image-preview-img" ng-src="{{state.src}}"/>
                                  </div>
                                  <div ng-class="{'ant-image-preview-switch-left': true, 'ant-image-preview-switch-left-disabled': state.current===0}" ng-click="handlePrev()">
81f8a467   Imshann   调整组件前缀 
89
 
                                      <antd-icon type="LeftOutlined"></antd-icon>
1b6f912f   Imshann   优化 
90
91
 
                                  </div>
                                  <div ng-class="{'ant-image-preview-switch-right': true,'ant-image-preview-switch-right-disabled': (state.childrens.length-1)===state.current}"  ng-click="handleNext()">
81f8a467   Imshann   调整组件前缀 
92
 
                                      <antd-icon type="RightOutlined"></antd-icon>
1b6f912f   Imshann   优化 
93
94
95
96
97
98
 
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
1145f171   Imshann   优化Image相关组件 
99
100
101
102
103
104
105
106
107
108
 
          `, $scope);
        };
  
        $scope.parent = $scope.$parent;
      },
      link: function ($scope, $element, $attrs) {
        $scope.handlePreview();
      }
    };
  }]);