source: trip-planner-front/node_modules/primeng/fesm2020/primeng-scrollpanel.mjs@ 84d0fbb

Last change on this file since 84d0fbb was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

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