ngx-tooltip.pure.amd.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. define("ngx-tooltip/TooltipContent", ["require", "exports", "@angular/core"], function (require, exports, core_1) {
  2. var TooltipContent = (function () {
  3. // -------------------------------------------------------------------------
  4. // Constructor
  5. // -------------------------------------------------------------------------
  6. function TooltipContent(element, cdr) {
  7. this.element = element;
  8. this.cdr = cdr;
  9. this.placement = "bottom";
  10. this.animation = true;
  11. // -------------------------------------------------------------------------
  12. // Properties
  13. // -------------------------------------------------------------------------
  14. this.top = -100000;
  15. this.left = -100000;
  16. this.isIn = false;
  17. this.isFade = false;
  18. }
  19. // -------------------------------------------------------------------------
  20. // Lifecycle callbacks
  21. // -------------------------------------------------------------------------
  22. TooltipContent.prototype.ngAfterViewInit = function () {
  23. this.show();
  24. this.cdr.detectChanges();
  25. };
  26. // -------------------------------------------------------------------------
  27. // Public Methods
  28. // -------------------------------------------------------------------------
  29. TooltipContent.prototype.show = function () {
  30. if (!this.hostElement)
  31. return;
  32. var p = this.positionElements(this.hostElement, this.element.nativeElement.children[0], this.placement);
  33. this.top = p.top;
  34. this.left = p.left;
  35. this.isIn = true;
  36. if (this.animation)
  37. this.isFade = true;
  38. };
  39. TooltipContent.prototype.hide = function () {
  40. this.top = -100000;
  41. this.left = -100000;
  42. this.isIn = true;
  43. if (this.animation)
  44. this.isFade = false;
  45. };
  46. // -------------------------------------------------------------------------
  47. // Private Methods
  48. // -------------------------------------------------------------------------
  49. TooltipContent.prototype.positionElements = function (hostEl, targetEl, positionStr, appendToBody) {
  50. if (appendToBody === void 0) { appendToBody = false; }
  51. var positionStrParts = positionStr.split("-");
  52. var pos0 = positionStrParts[0];
  53. var pos1 = positionStrParts[1] || "center";
  54. var hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
  55. var targetElWidth = targetEl.offsetWidth;
  56. var targetElHeight = targetEl.offsetHeight;
  57. var shiftWidth = {
  58. center: function () {
  59. return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2;
  60. },
  61. left: function () {
  62. return hostElPos.left;
  63. },
  64. right: function () {
  65. return hostElPos.left + hostElPos.width;
  66. }
  67. };
  68. var shiftHeight = {
  69. center: function () {
  70. return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2;
  71. },
  72. top: function () {
  73. return hostElPos.top;
  74. },
  75. bottom: function () {
  76. return hostElPos.top + hostElPos.height;
  77. }
  78. };
  79. var targetElPos;
  80. switch (pos0) {
  81. case "right":
  82. targetElPos = {
  83. top: shiftHeight[pos1](),
  84. left: shiftWidth[pos0]()
  85. };
  86. break;
  87. case "left":
  88. targetElPos = {
  89. top: shiftHeight[pos1](),
  90. left: hostElPos.left - targetElWidth
  91. };
  92. break;
  93. case "bottom":
  94. targetElPos = {
  95. top: shiftHeight[pos0](),
  96. left: shiftWidth[pos1]()
  97. };
  98. break;
  99. default:
  100. targetElPos = {
  101. top: hostElPos.top - targetElHeight,
  102. left: shiftWidth[pos1]()
  103. };
  104. break;
  105. }
  106. return targetElPos;
  107. };
  108. TooltipContent.prototype.position = function (nativeEl) {
  109. var offsetParentBCR = { top: 0, left: 0 };
  110. var elBCR = this.offset(nativeEl);
  111. var offsetParentEl = this.parentOffsetEl(nativeEl);
  112. if (offsetParentEl !== window.document) {
  113. offsetParentBCR = this.offset(offsetParentEl);
  114. offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;
  115. offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;
  116. }
  117. var boundingClientRect = nativeEl.getBoundingClientRect();
  118. return {
  119. width: boundingClientRect.width || nativeEl.offsetWidth,
  120. height: boundingClientRect.height || nativeEl.offsetHeight,
  121. top: elBCR.top - offsetParentBCR.top,
  122. left: elBCR.left - offsetParentBCR.left
  123. };
  124. };
  125. TooltipContent.prototype.offset = function (nativeEl) {
  126. var boundingClientRect = nativeEl.getBoundingClientRect();
  127. return {
  128. width: boundingClientRect.width || nativeEl.offsetWidth,
  129. height: boundingClientRect.height || nativeEl.offsetHeight,
  130. top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop),
  131. left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft)
  132. };
  133. };
  134. TooltipContent.prototype.getStyle = function (nativeEl, cssProp) {
  135. if (nativeEl.currentStyle)
  136. return nativeEl.currentStyle[cssProp];
  137. if (window.getComputedStyle)
  138. return window.getComputedStyle(nativeEl)[cssProp];
  139. // finally try and get inline style
  140. return nativeEl.style[cssProp];
  141. };
  142. TooltipContent.prototype.isStaticPositioned = function (nativeEl) {
  143. return (this.getStyle(nativeEl, "position") || "static") === "static";
  144. };
  145. TooltipContent.prototype.parentOffsetEl = function (nativeEl) {
  146. var offsetParent = nativeEl.offsetParent || window.document;
  147. while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) {
  148. offsetParent = offsetParent.offsetParent;
  149. }
  150. return offsetParent || window.document;
  151. };
  152. return TooltipContent;
  153. }());
  154. __decorate([
  155. core_1.Input(),
  156. __metadata("design:type", HTMLElement)
  157. ], TooltipContent.prototype, "hostElement", void 0);
  158. __decorate([
  159. core_1.Input(),
  160. __metadata("design:type", String)
  161. ], TooltipContent.prototype, "content", void 0);
  162. __decorate([
  163. core_1.Input(),
  164. __metadata("design:type", String)
  165. ], TooltipContent.prototype, "placement", void 0);
  166. __decorate([
  167. core_1.Input(),
  168. __metadata("design:type", Boolean)
  169. ], TooltipContent.prototype, "animation", void 0);
  170. TooltipContent = __decorate([
  171. core_1.Component({
  172. selector: "tooltip-content",
  173. template: "\n<div class=\"tooltip {{ placement }}\"\n [style.top]=\"top + 'px'\"\n [style.left]=\"left + 'px'\"\n [class.in]=\"isIn\"\n [class.fade]=\"isFade\"\n role=\"tooltip\">\n <div class=\"tooltip-arrow\"></div> \n <div class=\"tooltip-inner\">\n <ng-content></ng-content>\n {{ content }}\n </div> \n</div>\n"
  174. }),
  175. __metadata("design:paramtypes", [core_1.ElementRef,
  176. core_1.ChangeDetectorRef])
  177. ], TooltipContent);
  178. exports.TooltipContent = TooltipContent;
  179. });
  180. define("ngx-tooltip/Tooltip", ["require", "exports", "@angular/core", "ngx-tooltip/TooltipContent"], function (require, exports, core_2, TooltipContent_1) {
  181. var Tooltip = (function () {
  182. // -------------------------------------------------------------------------
  183. // Constructor
  184. // -------------------------------------------------------------------------
  185. function Tooltip(viewContainerRef, resolver) {
  186. this.viewContainerRef = viewContainerRef;
  187. this.resolver = resolver;
  188. this.tooltipAnimation = true;
  189. this.tooltipPlacement = "bottom";
  190. }
  191. // -------------------------------------------------------------------------
  192. // Public Methods
  193. // -------------------------------------------------------------------------
  194. Tooltip.prototype.show = function () {
  195. if (this.tooltipDisabled || this.visible)
  196. return;
  197. this.visible = true;
  198. if (typeof this.content === "string") {
  199. var factory = this.resolver.resolveComponentFactory(TooltipContent_1.TooltipContent);
  200. if (!this.visible)
  201. return;
  202. this.tooltip = this.viewContainerRef.createComponent(factory);
  203. this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement;
  204. this.tooltip.instance.content = this.content;
  205. this.tooltip.instance.placement = this.tooltipPlacement;
  206. this.tooltip.instance.animation = this.tooltipAnimation;
  207. }
  208. else {
  209. var tooltip = this.content;
  210. tooltip.hostElement = this.viewContainerRef.element.nativeElement;
  211. tooltip.placement = this.tooltipPlacement;
  212. tooltip.animation = this.tooltipAnimation;
  213. tooltip.show();
  214. }
  215. };
  216. Tooltip.prototype.hide = function () {
  217. if (!this.visible)
  218. return;
  219. this.visible = false;
  220. if (this.tooltip)
  221. this.tooltip.destroy();
  222. if (this.content instanceof TooltipContent_1.TooltipContent)
  223. this.content.hide();
  224. };
  225. return Tooltip;
  226. }());
  227. __decorate([
  228. core_2.Input("tooltip"),
  229. __metadata("design:type", Object)
  230. ], Tooltip.prototype, "content", void 0);
  231. __decorate([
  232. core_2.Input(),
  233. __metadata("design:type", Boolean)
  234. ], Tooltip.prototype, "tooltipDisabled", void 0);
  235. __decorate([
  236. core_2.Input(),
  237. __metadata("design:type", Boolean)
  238. ], Tooltip.prototype, "tooltipAnimation", void 0);
  239. __decorate([
  240. core_2.Input(),
  241. __metadata("design:type", String)
  242. ], Tooltip.prototype, "tooltipPlacement", void 0);
  243. __decorate([
  244. core_2.HostListener("focusin"),
  245. core_2.HostListener("mouseenter"),
  246. __metadata("design:type", Function),
  247. __metadata("design:paramtypes", []),
  248. __metadata("design:returntype", void 0)
  249. ], Tooltip.prototype, "show", null);
  250. __decorate([
  251. core_2.HostListener("focusout"),
  252. core_2.HostListener("mouseleave"),
  253. __metadata("design:type", Function),
  254. __metadata("design:paramtypes", []),
  255. __metadata("design:returntype", void 0)
  256. ], Tooltip.prototype, "hide", null);
  257. Tooltip = __decorate([
  258. core_2.Directive({
  259. selector: "[tooltip]"
  260. }),
  261. __metadata("design:paramtypes", [core_2.ViewContainerRef,
  262. core_2.ComponentFactoryResolver])
  263. ], Tooltip);
  264. exports.Tooltip = Tooltip;
  265. });
  266. define("ngx-tooltip/index", ["require", "exports", "@angular/core", "@angular/common", "ngx-tooltip/Tooltip", "ngx-tooltip/TooltipContent", "ngx-tooltip/Tooltip", "ngx-tooltip/TooltipContent"], function (require, exports, core_3, common_1, Tooltip_1, TooltipContent_2, Tooltip_2, TooltipContent_3) {
  267. function __export(m) {
  268. for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
  269. }
  270. __export(Tooltip_2);
  271. __export(TooltipContent_3);
  272. var TooltipModule = (function () {
  273. function TooltipModule() {
  274. }
  275. return TooltipModule;
  276. }());
  277. TooltipModule = __decorate([
  278. core_3.NgModule({
  279. imports: [
  280. common_1.CommonModule
  281. ],
  282. declarations: [
  283. Tooltip_1.Tooltip,
  284. TooltipContent_2.TooltipContent,
  285. ],
  286. exports: [
  287. Tooltip_1.Tooltip,
  288. TooltipContent_2.TooltipContent,
  289. ],
  290. entryComponents: [
  291. TooltipContent_2.TooltipContent
  292. ]
  293. })
  294. ], TooltipModule);
  295. exports.TooltipModule = TooltipModule;
  296. });
  297. define("ngx-tooltip", ["require", "exports", "ngx-tooltip/index"], function (require, exports, index_1) {
  298. function __export(m) {
  299. for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
  300. }
  301. __export(index_1);
  302. });