essa-platform / es-ng-antd

Blame view

build/ImagePreviewGroup/ImagePreviewGroup.js 5.26 KB
Edit Raw Normal View History
3a3ecabe   Imshann   init 
1
 
  import template from "./ImagePreviewGroup.html";
1b6f912f   Imshann   优化 
2
3
 
  angular
      .module("esNgAntd")
81f8a467   Imshann   调整组件前缀 
4
 
      .directive("antdImagePreviewGroup", function (esNgAntd) {
1b6f912f   Imshann   优化 
5
 
          return {
81f8a467   Imshann   调整组件前缀 
6
 
              controllerAs: "antdImagePreviewGroup",
1b6f912f   Imshann   优化 
7
8
9
 
              restrict: "E",
              transclude: true,
              replace: true,
4c519425   Imshann   优化图片组件 
10
11
12
 
              scope: {
                  preview: "=",
              },
1b6f912f   Imshann   优化 
13
 
              template: template,
4c519425   Imshann   优化图片组件 
14
 
              controller: function ($scope, $element, $attrs) {
1b6f912f   Imshann   优化 
15
16
17
 
                  this.getContext = function () {
                      return $scope;
                  };
3a3ecabe   Imshann   init 
18
1b6f912f   Imshann   优化 
19
20
21
22
23
24
25
26
27
28
29
30
 
                  $scope.state = {
                      current: 0,
                      visible: false,
                      src: null,
                      childrens: [],
                  };
  
                  $scope.addChildren = function (children) {
                      $scope.state.childrens.push(children);
                      return $scope.state.childrens.length - 1;
                  };
4c519425   Imshann   优化图片组件 
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
                  $scope.setCurrent = function (value) {
                      $scope.state.current = value;
  
                      if (
                          typeof $scope.preview === "object" &&
                          typeof $scope.preview.onCurrentChange === "function"
                      ) {
                          $scope.preview.onCurrentChange(value);
                      }
                  };
  
                  $scope.setVisible = function (value) {
                      $scope.state.visible = value;
  
                      if (
                          typeof $scope.preview === "object" &&
                          typeof $scope.preview.onVisibleChange === "function"
                      ) {
                          $scope.preview.onVisibleChange(value);
                      }
                  };
1b6f912f   Imshann   优化 
53
 
                  $scope.handleOpen = function (index) {
4c519425   Imshann   优化图片组件 
54
 
                      $scope.setCurrent(index);
1b6f912f   Imshann   优化 
55
 
                      $scope.state.src = $scope.state.childrens[index].state.src;
4c519425   Imshann   优化图片组件 
56
 
                      $scope.setVisible(true);
1b6f912f   Imshann   优化 
57
58
59
 
                  };
  
                  $scope.handleClose = function () {
4c519425   Imshann   优化图片组件 
60
 
                      $scope.setVisible(false);
1b6f912f   Imshann   优化 
61
62
63
 
                  };
  
                  $scope.handlePrev = function () {
4c519425   Imshann   优化图片组件 
64
65
66
 
                      $scope.setCurrent(
                          $scope.state.current > 0 ? $scope.state.current - 1 : 0
                      );
1b6f912f   Imshann   优化 
67
68
69
70
71
 
                      $scope.state.src =
                          $scope.state.childrens[$scope.state.current].state.src;
                  };
  
                  $scope.handleNext = function () {
4c519425   Imshann   优化图片组件 
72
 
                      $scope.setCurrent(
1b6f912f   Imshann   优化 
73
74
 
                          $scope.state.current < $scope.state.childrens.length - 1
                              ? $scope.state.current + 1
4c519425   Imshann   优化图片组件 
75
76
 
                              : $scope.state.childrens.length - 1
                      );
1b6f912f   Imshann   优化 
77
78
79
80
81
 
                      $scope.state.src =
                          $scope.state.childrens[$scope.state.current].state.src;
                  };
  
                  $scope.handlePreview = function () {
4c519425   Imshann   优化图片组件 
82
83
84
85
86
87
 
                      let className;
  
                      if ($attrs.class) {
                          className = ` ${$attrs.class}`;
                      }
1b6f912f   Imshann   优化 
88
89
 
                      esNgAntd.createLayer(
                          `
4c519425   Imshann   优化图片组件 
90
 
              <div class="ant-image-preview-root${className}">
1b6f912f   Imshann   优化 
91
92
93
94
95
96
97
98
 
                  <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   调整组件前缀 
99
 
                                              <antd-icon type="CloseOutlined"></antd-icon>
1b6f912f   Imshann   优化 
100
101
102
103
104
105
106
 
                                          </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   调整组件前缀 
107
 
                                      <antd-icon type="LeftOutlined"></antd-icon>
1b6f912f   Imshann   优化 
108
109
 
                                  </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   调整组件前缀 
110
 
                                      <antd-icon type="RightOutlined"></antd-icon>
1b6f912f   Imshann   优化 
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          `,
                          $scope
                      );
                  };
              },
              link: function (
                  $scope,
                  $element,
                  $attrs,
                  $controllers,
                  $transclude
              ) {
                  $scope.handlePreview();
              },
          };
      });