1 | import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, NgZone, ChangeDetectorRef, Input, ViewChild, ContentChildren, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import { DomHandler } from 'primeng/dom';
|
4 | import { PrimeTemplate } from 'primeng/api';
|
5 |
|
6 | class ScrollPanel {
|
7 | constructor(el, zone, cd) {
|
8 | this.el = el;
|
9 | this.zone = zone;
|
10 | this.cd = cd;
|
11 | this.timeoutFrame = (fn) => setTimeout(fn, 0);
|
12 | }
|
13 | ngAfterViewInit() {
|
14 | this.zone.runOutsideAngular(() => {
|
15 | this.moveBar();
|
16 | this.moveBar = this.moveBar.bind(this);
|
17 | this.onXBarMouseDown = this.onXBarMouseDown.bind(this);
|
18 | this.onYBarMouseDown = this.onYBarMouseDown.bind(this);
|
19 | this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
|
20 | this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);
|
21 | window.addEventListener('resize', this.moveBar);
|
22 | this.contentViewChild.nativeElement.addEventListener('scroll', this.moveBar);
|
23 | this.contentViewChild.nativeElement.addEventListener('mouseenter', this.moveBar);
|
24 | this.xBarViewChild.nativeElement.addEventListener('mousedown', this.onXBarMouseDown);
|
25 | this.yBarViewChild.nativeElement.addEventListener('mousedown', this.onYBarMouseDown);
|
26 | this.calculateContainerHeight();
|
27 | this.initialized = true;
|
28 | });
|
29 | }
|
30 | ngAfterContentInit() {
|
31 | this.templates.forEach((item) => {
|
32 | switch (item.getType()) {
|
33 | case 'content':
|
34 | this.contentTemplate = item.template;
|
35 | break;
|
36 | default:
|
37 | this.contentTemplate = item.template;
|
38 | break;
|
39 | }
|
40 | });
|
41 | }
|
42 | calculateContainerHeight() {
|
43 | let container = this.containerViewChild.nativeElement;
|
44 | let content = this.contentViewChild.nativeElement;
|
45 | let xBar = this.xBarViewChild.nativeElement;
|
46 | let containerStyles = getComputedStyle(container), xBarStyles = getComputedStyle(xBar), pureContainerHeight = DomHandler.getHeight(container) - parseInt(xBarStyles['height'], 10);
|
47 | if (containerStyles['max-height'] != "none" && pureContainerHeight == 0) {
|
48 | if (content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
|
49 | container.style.height = containerStyles['max-height'];
|
50 | }
|
51 | else {
|
52 | container.style.height = content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + "px";
|
53 | }
|
54 | }
|
55 | }
|
56 | moveBar() {
|
57 | let container = this.containerViewChild.nativeElement;
|
58 | let content = this.contentViewChild.nativeElement;
|
59 |
|
60 | let xBar = this.xBarViewChild.nativeElement;
|
61 | let totalWidth = content.scrollWidth;
|
62 | let ownWidth = content.clientWidth;
|
63 | let bottom = (container.clientHeight - xBar.clientHeight) * -1;
|
64 | this.scrollXRatio = ownWidth / totalWidth;
|
65 |
|
66 | let yBar = this.yBarViewChild.nativeElement;
|
67 | let totalHeight = content.scrollHeight;
|
68 | let ownHeight = content.clientHeight;
|
69 | let right = (container.clientWidth - yBar.clientWidth) * -1;
|
70 | this.scrollYRatio = ownHeight / totalHeight;
|
71 | this.requestAnimationFrame(() => {
|
72 | if (this.scrollXRatio >= 1) {
|
73 | DomHandler.addClass(xBar, 'p-scrollpanel-hidden');
|
74 | }
|
75 | else {
|
76 | DomHandler.removeClass(xBar, 'p-scrollpanel-hidden');
|
77 | const xBarWidth = Math.max(this.scrollXRatio * 100, 10);
|
78 | const xBarLeft = content.scrollLeft * (100 - xBarWidth) / (totalWidth - ownWidth);
|
79 | xBar.style.cssText = 'width:' + xBarWidth + '%; left:' + xBarLeft + '%;bottom:' + bottom + 'px;';
|
80 | }
|
81 | if (this.scrollYRatio >= 1) {
|
82 | DomHandler.addClass(yBar, 'p-scrollpanel-hidden');
|
83 | }
|
84 | else {
|
85 | DomHandler.removeClass(yBar, 'p-scrollpanel-hidden');
|
86 | const yBarHeight = Math.max(this.scrollYRatio * 100, 10);
|
87 | const yBarTop = content.scrollTop * (100 - yBarHeight) / (totalHeight - ownHeight);
|
88 | yBar.style.cssText = 'height:' + yBarHeight + '%; top: calc(' + yBarTop + '% - ' + xBar.clientHeight + 'px);right:' + right + 'px;';
|
89 | }
|
90 | });
|
91 | }
|
92 | onYBarMouseDown(e) {
|
93 | this.isYBarClicked = true;
|
94 | this.lastPageY = e.pageY;
|
95 | DomHandler.addClass(this.yBarViewChild.nativeElement, 'p-scrollpanel-grabbed');
|
96 | DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
|
97 | document.addEventListener('mousemove', this.onDocumentMouseMove);
|
98 | document.addEventListener('mouseup', this.onDocumentMouseUp);
|
99 | e.preventDefault();
|
100 | }
|
101 | onXBarMouseDown(e) {
|
102 | this.isXBarClicked = true;
|
103 | this.lastPageX = e.pageX;
|
104 | DomHandler.addClass(this.xBarViewChild.nativeElement, 'p-scrollpanel-grabbed');
|
105 | DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
|
106 | document.addEventListener('mousemove', this.onDocumentMouseMove);
|
107 | document.addEventListener('mouseup', this.onDocumentMouseUp);
|
108 | e.preventDefault();
|
109 | }
|
110 | onDocumentMouseMove(e) {
|
111 | if (this.isXBarClicked) {
|
112 | this.onMouseMoveForXBar(e);
|
113 | }
|
114 | else if (this.isYBarClicked) {
|
115 | this.onMouseMoveForYBar(e);
|
116 | }
|
117 | else {
|
118 | this.onMouseMoveForXBar(e);
|
119 | this.onMouseMoveForYBar(e);
|
120 | }
|
121 | }
|
122 | onMouseMoveForXBar(e) {
|
123 | let deltaX = e.pageX - this.lastPageX;
|
124 | this.lastPageX = e.pageX;
|
125 | this.requestAnimationFrame(() => {
|
126 | this.contentViewChild.nativeElement.scrollLeft += deltaX / this.scrollXRatio;
|
127 | });
|
128 | }
|
129 | onMouseMoveForYBar(e) {
|
130 | let deltaY = e.pageY - this.lastPageY;
|
131 | this.lastPageY = e.pageY;
|
132 | this.requestAnimationFrame(() => {
|
133 | this.contentViewChild.nativeElement.scrollTop += deltaY / this.scrollYRatio;
|
134 | });
|
135 | }
|
136 | scrollTop(scrollTop) {
|
137 | let scrollableHeight = this.contentViewChild.nativeElement.scrollHeight - this.contentViewChild.nativeElement.clientHeight;
|
138 | scrollTop = scrollTop > scrollableHeight ? scrollableHeight : scrollTop > 0 ? scrollTop : 0;
|
139 | this.contentViewChild.nativeElement.scrollTop = scrollTop;
|
140 | }
|
141 | onDocumentMouseUp(e) {
|
142 | DomHandler.removeClass(this.yBarViewChild.nativeElement, 'p-scrollpanel-grabbed');
|
143 | DomHandler.removeClass(this.xBarViewChild.nativeElement, 'p-scrollpanel-grabbed');
|
144 | DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
|
145 | document.removeEventListener('mousemove', this.onDocumentMouseMove);
|
146 | document.removeEventListener('mouseup', this.onDocumentMouseUp);
|
147 | this.isXBarClicked = false;
|
148 | this.isYBarClicked = false;
|
149 | }
|
150 | requestAnimationFrame(f) {
|
151 | let frame = window.requestAnimationFrame || this.timeoutFrame;
|
152 | frame(f);
|
153 | }
|
154 | ngOnDestroy() {
|
155 | if (this.initialized) {
|
156 | window.removeEventListener('resize', this.moveBar);
|
157 | this.contentViewChild.nativeElement.removeEventListener('scroll', this.moveBar);
|
158 | this.contentViewChild.nativeElement.removeEventListener('mouseenter', this.moveBar);
|
159 | this.xBarViewChild.nativeElement.removeEventListener('mousedown', this.onXBarMouseDown);
|
160 | this.yBarViewChild.nativeElement.removeEventListener('mousedown', this.onYBarMouseDown);
|
161 | }
|
162 | }
|
163 | refresh() {
|
164 | this.moveBar();
|
165 | }
|
166 | }
|
167 | ScrollPanel.decorators = [
|
168 | { type: Component, args: [{
|
169 | selector: 'p-scrollPanel',
|
170 | template: `
|
171 | <div #container [ngClass]="'p-scrollpanel p-component'" [ngStyle]="style" [class]="styleClass">
|
172 | <div class="p-scrollpanel-wrapper">
|
173 | <div #content class="p-scrollpanel-content">
|
174 | <ng-content></ng-content>
|
175 | <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
176 | </div>
|
177 | </div>
|
178 | <div #xBar class="p-scrollpanel-bar p-scrollpanel-bar-x"></div>
|
179 | <div #yBar class="p-scrollpanel-bar p-scrollpanel-bar-y"></div>
|
180 | </div>
|
181 | `,
|
182 | changeDetection: ChangeDetectionStrategy.OnPush,
|
183 | encapsulation: ViewEncapsulation.None,
|
184 | styles: [".p-scrollpanel-wrapper{float:left;height:100%;overflow:hidden;position:relative;width:100%;z-index:1}.p-scrollpanel-content{box-sizing:border-box;height:calc(100% + 18px);overflow:auto;padding:0 18px 18px 0;position:relative;width:calc(100% + 18px)}.p-scrollpanel-bar{background:#c1c1c1;border-radius:3px;cursor:pointer;opacity:0;position:relative;transition:opacity .25s linear;z-index:2}.p-scrollpanel-bar-y{top:0;width:9px}.p-scrollpanel-bar-x{bottom:0;height:9px}.p-scrollpanel-hidden{visibility:hidden}.p-scrollpanel:active .p-scrollpanel-bar,.p-scrollpanel:hover .p-scrollpanel-bar{opacity:1}.p-scrollpanel-grabbed{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}"]
|
185 | },] }
|
186 | ];
|
187 | ScrollPanel.ctorParameters = () => [
|
188 | { type: ElementRef },
|
189 | { type: NgZone },
|
190 | { type: ChangeDetectorRef }
|
191 | ];
|
192 | ScrollPanel.propDecorators = {
|
193 | style: [{ type: Input }],
|
194 | styleClass: [{ type: Input }],
|
195 | containerViewChild: [{ type: ViewChild, args: ['container',] }],
|
196 | contentViewChild: [{ type: ViewChild, args: ['content',] }],
|
197 | xBarViewChild: [{ type: ViewChild, args: ['xBar',] }],
|
198 | yBarViewChild: [{ type: ViewChild, args: ['yBar',] }],
|
199 | templates: [{ type: ContentChildren, args: [PrimeTemplate,] }]
|
200 | };
|
201 | class ScrollPanelModule {
|
202 | }
|
203 | ScrollPanelModule.decorators = [
|
204 | { type: NgModule, args: [{
|
205 | imports: [CommonModule],
|
206 | exports: [ScrollPanel],
|
207 | declarations: [ScrollPanel]
|
208 | },] }
|
209 | ];
|
210 |
|
211 |
|
212 |
|
213 |
|
214 |
|
215 | export { ScrollPanel, ScrollPanelModule };
|
216 |
|