| 1 | import * as i0 from '@angular/core';
|
|---|
| 2 | import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, ContentChildren, NgModule } from '@angular/core';
|
|---|
| 3 | import * as i1 from '@angular/common';
|
|---|
| 4 | import { CommonModule } from '@angular/common';
|
|---|
| 5 | import { DomHandler } from 'primeng/dom';
|
|---|
| 6 | import { PrimeTemplate } from 'primeng/api';
|
|---|
| 7 |
|
|---|
| 8 | class 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 | }
|
|---|
| 170 | ScrollPanel.ɵ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 });
|
|---|
| 171 | ScrollPanel.ɵ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 });
|
|---|
| 183 | i0.ɵɵ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 | }] } });
|
|---|
| 219 | class ScrollPanelModule {
|
|---|
| 220 | }
|
|---|
| 221 | ScrollPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ScrollPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|---|
| 222 | ScrollPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ScrollPanelModule, declarations: [ScrollPanel], imports: [CommonModule], exports: [ScrollPanel] });
|
|---|
| 223 | ScrollPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ScrollPanelModule, imports: [[CommonModule]] });
|
|---|
| 224 | i0.ɵɵ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 |
|
|---|
| 237 | export { ScrollPanel, ScrollPanelModule };
|
|---|
