directive.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. starter.directive('itemMember', function (Dept) {
  2. return {
  3. restrict: 'E',
  4. replace: true,
  5. template: '<div><ion-checkbox ng-model="emp.selected" ng-disabled="emp.disabled" ng-change="change(emp)" class="ion-checkbox-class">' +
  6. '<img ng-src="../../../img/panda.png" />' +
  7. '<label class="labelname">{{emp.username}}</label>' +
  8. '<label class="labelrole">{{emp.degree}}</label>' +
  9. '</ion-checkbox>' +
  10. '</div>'
  11. };
  12. })
  13. .directive('itemDept', function (Dept) {
  14. return {
  15. restrict: 'E',
  16. replace: true,
  17. template: '<div>' +
  18. '<ion-item class="item item-icon-right" type="item-text-wrap" ng-click="changedept(dept);">' +
  19. '{{dept.depname}}' +
  20. '<i class="icon ion-chevron-right icon-accessory" ng-show="dept.isShow"></i>' +
  21. '</ion-item>' +
  22. '</div>'
  23. };
  24. })
  25. .directive('footerMember', function (Dept) {
  26. return {
  27. restrict: 'E',
  28. replace: true,
  29. template: '<div class="bar bar-footer bar-dark footer-div" ng-class={true:"bigview",false:""}[isUp]>' +
  30. '<i class="cirl-i" ng-class={true:"ion-ios-arrow-down",false:"ion-ios-arrow-up"}[isUp] ng-click="isUp = !isUp"></i>' +
  31. '<ul class="ul-imgs dept-icon">' +
  32. '<li ng-repeat="user in selectedemplst">{{user.username}}</li>' +
  33. '</ul>' +
  34. '<button ng-disabled="selectedemplst.length==0" ng-click="ok();" class="button pull-right button-calm">确定{{selectcount}}</button>' +
  35. '</div>'
  36. };
  37. })
  38. .directive('rjCloseBackDrop', [function () {
  39. return {
  40. scope: false,
  41. restrict: 'A',
  42. replace: false,
  43. link: function (scope, iElm, iAttrs, controller) {
  44. var htmlEl = angular.element(document.querySelector('html'));
  45. htmlEl.unbind("click");
  46. htmlEl.on("click", function (event) {
  47. if (event.target.nodeName === "HTML" &&
  48. scope.popup.optionsPopup &&
  49. scope.popup.isPopup) {
  50. scope.popup.optionsPopup.close();
  51. scope.popup.isPopup = false;
  52. } else if (event.target.nodeName === "DIV" &&
  53. scope.popup.optionsPopup &&
  54. scope.popup.isSetPopup) {
  55. scope.popup.optionsPopup.close();
  56. scope.popup.isSetPopup = false;
  57. }
  58. });
  59. }
  60. };
  61. }])
  62. //放大缩小图片
  63. .directive('ngPinchZoom', [function () {
  64. var _directive = {
  65. restrict: 'A',
  66. scope: false,
  67. link: _link
  68. };
  69. function _link(scope, element, attrs) {
  70. var elWidth, elHeight;
  71. // mode : 'pinch' or 'swipe'
  72. var mode = '';
  73. // distance between two touche points (mode : 'pinch')
  74. var distance = 0;
  75. var initialDistance = 0;
  76. // image scaling
  77. var scale = 1;
  78. var relativeScale = 1;
  79. var initialScale = 1;
  80. var maxScale = parseInt(attrs.maxScale, 10);
  81. if (isNaN(maxScale) || maxScale <= 1) {
  82. maxScale = 3;
  83. }
  84. // position of the upper left corner of the element
  85. var positionX = 0;
  86. var positionY = 0;
  87. var initialPositionX = 0;
  88. var initialPositionY = 0;
  89. // central origin (mode : 'pinch')
  90. var originX = 0;
  91. var originY = 0;
  92. // start coordinate and amount of movement (mode : 'swipe')
  93. var startX = 0;
  94. var startY = 0;
  95. var moveX = 0;
  96. var moveY = 0;
  97. var image = new Image();
  98. image.onload = function () {
  99. elWidth = element[0].clientWidth;
  100. elHeight = element[0].clientHeight;
  101. element.css({
  102. '-webkit-transform-origin': '0 0',
  103. 'transform-origin': '0 0'
  104. });
  105. element.on('touchstart', touchstartHandler);
  106. element.on('touchmove', touchmoveHandler);
  107. element.on('touchend', touchendHandler);
  108. };
  109. if (attrs.ngSrc) {
  110. image.src = attrs.ngSrc;
  111. } else {
  112. if (attrs.src) {
  113. image.src = attrs.src;
  114. }
  115. }
  116. /**
  117. * @param {object} evt
  118. */
  119. function touchstartHandler(evt) {
  120. var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;
  121. startX = touches[0].clientX;
  122. startY = touches[0].clientY;
  123. initialPositionX = positionX;
  124. initialPositionY = positionY;
  125. moveX = 0;
  126. moveY = 0;
  127. }
  128. /**
  129. * @param {object} evt
  130. */
  131. function touchmoveHandler(evt) {
  132. var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;
  133. if (mode === '') {
  134. if (touches.length === 1 && scale > 1) {
  135. mode = 'swipe';
  136. } else if (touches.length === 2) {
  137. mode = 'pinch';
  138. initialScale = scale;
  139. initialDistance = getDistance(touches);
  140. originX = touches[0].clientX -
  141. parseInt((touches[0].clientX - touches[1].clientX) / 2, 10) -
  142. element[0].offsetLeft - initialPositionX;
  143. originY = touches[0].clientY -
  144. parseInt((touches[0].clientY - touches[1].clientY) / 2, 10) -
  145. element[0].offsetTop - initialPositionY;
  146. }
  147. }
  148. if (mode === 'swipe') {
  149. evt.preventDefault();
  150. moveX = touches[0].clientX - startX;
  151. moveY = touches[0].clientY - startY;
  152. positionX = initialPositionX + moveX;
  153. positionY = initialPositionY + moveY;
  154. transformElement();
  155. } else if (mode === 'pinch' && touches.length === 2) {
  156. evt.preventDefault();
  157. distance = getDistance(touches);
  158. relativeScale = distance / initialDistance;
  159. scale = relativeScale * initialScale;
  160. positionX = originX * (1 - relativeScale) + initialPositionX + moveX;
  161. positionY = originY * (1 - relativeScale) + initialPositionY + moveY;
  162. transformElement();
  163. }
  164. }
  165. /**
  166. * @param {object} evt
  167. */
  168. function touchendHandler(evt) {
  169. var touches = evt.originalEvent ? evt.originalEvent.touches : evt.touches;
  170. if (mode === '' || touches.length > 0) {
  171. return;
  172. }
  173. if (scale < 1) {
  174. scale = 1;
  175. positionX = 0;
  176. positionY = 0;
  177. } else if (scale > maxScale) {
  178. scale = maxScale;
  179. relativeScale = scale / initialScale;
  180. positionX = originX * (1 - relativeScale) + initialPositionX + moveX;
  181. positionY = originY * (1 - relativeScale) + initialPositionY + moveY;
  182. } else {
  183. if (positionX > 0) {
  184. positionX = 0;
  185. } else if (positionX < elWidth * (1 - scale)) {
  186. positionX = elWidth * (1 - scale);
  187. }
  188. if (positionY > 0) {
  189. positionY = 0;
  190. } else if (positionY < elHeight * (1 - scale)) {
  191. positionY = elHeight * (1 - scale);
  192. }
  193. }
  194. transformElement(0.1);
  195. mode = '';
  196. }
  197. /**
  198. * @param {Array} touches
  199. * @return {number}
  200. */
  201. function getDistance(touches) {
  202. var d = Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) +
  203. Math.pow(touches[0].clientY - touches[1].clientY, 2));
  204. return parseInt(d, 10);
  205. }
  206. /**
  207. * @param {number} [duration]
  208. */
  209. function transformElement(duration) {
  210. var transition = duration ? 'all cubic-bezier(0,0,.5,1) ' + duration + 's' : '';
  211. var matrixArray = [scale, 0, 0, scale, positionX, positionY];
  212. var matrix = 'matrix(' + matrixArray.join(',') + ')';
  213. element.css({
  214. '-webkit-transition': transition,
  215. transition: transition,
  216. '-webkit-transform': matrix + ' translate3d(0,0,0)',
  217. transform: matrix
  218. });
  219. }
  220. }
  221. return _directive;
  222. }])
  223. .directive('focusMe', function ($timeout) {
  224. return {
  225. scope: {
  226. trigger: '=focusMe'
  227. },
  228. link: function (scope, element) {
  229. scope.$watch('trigger', function (value) {
  230. if (value === true) {
  231. $timeout(function () {
  232. element[0].focus();
  233. });
  234. }
  235. });
  236. }
  237. };
  238. })
  239. .directive('imagePopover', [function () {
  240. return {
  241. restrict: "E",
  242. scope: {
  243. allImages: '='
  244. },
  245. template: "<img ng-repeat='img in allImages' ng-click='showImages($index,$event)' ng-src='{{img.file_thumbnail_path}}' class='img-popver-pad'/>",
  246. controller: function ($scope, $rootScope, $ionicModal) {
  247. $scope.showImages = function (index, event) {
  248. if (event != undefined) {
  249. event.stopPropagation();
  250. }
  251. $scope.activeSlide = index;
  252. $scope.showModal('../../templates/modal-imagepopover.html');
  253. };
  254. $scope.bigImage = $rootScope.commons.bigImage;
  255. $scope.showModal = function (templateUrl) {
  256. $rootScope.commons.fun = clear_change;
  257. $rootScope.commons.bigImage = true;
  258. $ionicModal.fromTemplateUrl(templateUrl, {
  259. scope: $scope,
  260. animation: 'slide-in-up'
  261. }).then(function (modal) {
  262. $rootScope.commons.modal = modal;
  263. $rootScope.commons.modal.show();
  264. });
  265. };
  266. $scope.closeModal = function () {
  267. clear_change();
  268. $rootScope.commons.fun = null;
  269. };
  270. function clear_change() {
  271. $rootScope.commons.bigImage = false;
  272. $rootScope.commons.modal.hide();
  273. $rootScope.commons.modal.remove();
  274. $rootScope.commons.modal = null;
  275. }
  276. }
  277. }
  278. }])
  279. .directive('removePopoverHeader', [function () {
  280. return {
  281. restrict: "A",
  282. link: function (scope, iElm, iAttrs, controller) {
  283. document.getElementsByClassName('popup')[0].removeChild(document.getElementsByClassName('popup-head')[0]);
  284. }
  285. }
  286. }])