sa-totop
Version:
A lightweight Angular standalone component for smooth scroll-to-top functionality.
1 lines • 7.38 kB
Source Map (JSON)
{"version":3,"file":"sa-totop.mjs","sources":["../../../projects/totop/src/lib/totop.component.ts","../../../projects/totop/src/sa-totop.ts"],"sourcesContent":["import { CommonModule, isPlatformBrowser } from '@angular/common';\r\nimport {\r\n Component,\r\n EventEmitter,\r\n Inject,\r\n Input,\r\n Output,\r\n PLATFORM_ID,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sa-totop',\r\n standalone: true,\r\n imports: [CommonModule],\r\n template: `\r\n <div\r\n (click)=\"toTop()\"\r\n [style]=\"\r\n '--width:' +\r\n width +\r\n 'px;' +\r\n '--animation-time:' +\r\n duration +\r\n 's;' +\r\n '--color:' +\r\n color +\r\n ';--background:' +\r\n background +\r\n ';--bottom:' +\r\n bottom +\r\n 'px' +\r\n ';--end:' +\r\n end +\r\n 'px'\r\n \"\r\n [ngClass]=\"{\r\n hide: scrollHeight < visibilityHeight && !alwaysVisible,\r\n active: documentHieght - 1000 < scrollHeight\r\n }\"\r\n >\r\n <ng-container *ngIf=\"!customeBtn\">\r\n <button>\r\n <svg\r\n width=\"100%\"\r\n height=\"100%\"\r\n viewBox=\"-1 -1 102 102\"\r\n [style]=\"'--progress:' + dashOffset\"\r\n >\r\n <path d=\"M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98\"></path>\r\n </svg>\r\n <svg\r\n id=\"arrow\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 384 512\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z\"\r\n ></path>\r\n </svg>\r\n </button>\r\n <div></div>\r\n </ng-container>\r\n <ng-content></ng-content>\r\n </div>\r\n `,\r\n styleUrl: './totop.component.scss',\r\n})\r\nexport class TotopComponent {\r\n constructor(@Inject(PLATFORM_ID) private platformId: object) {}\r\n\r\n @Input() width: number = 40;\r\n @Input() bottom: number = 20;\r\n @Input() end: number = 20;\r\n @Input() color: string = '#0891b2';\r\n @Input() scrollBehavior: ScrollBehavior = 'smooth';\r\n @Input() background: string = 'transparent';\r\n @Input() duration: number = 0.3;\r\n @Input() visibilityHeight: number = 450;\r\n @Input() alwaysVisible: boolean = false;\r\n @Input() customeBtn: boolean = false;\r\n @Output() scrollComplete = new EventEmitter<any>();\r\n @Output() toTopClicked = new EventEmitter<any>();\r\n documentHieght: number = 0;\r\n scrollHeight: number = 0;\r\n divisionConst: number = 0;\r\n dashOffset: number = 310;\r\n screenHieght: number = 0;\r\n toTop() {\r\n if (isPlatformBrowser(this.platformId)) {\r\n this.toTopClicked.emit();\r\n window.scroll({\r\n top: 0,\r\n left: 0,\r\n behavior: this.scrollBehavior,\r\n });\r\n }\r\n }\r\n ngOnInit(): void {\r\n if (isPlatformBrowser(this.platformId)) {\r\n this.screenHieght = window.innerHeight;\r\n window.onscroll = () => {\r\n this.documentHieght = document.documentElement.scrollHeight;\r\n this.divisionConst = this.documentHieght / 310;\r\n this.scrollHeight = document.documentElement.scrollTop;\r\n let position =\r\n this.documentHieght - this.screenHieght - this.scrollHeight;\r\n this.dashOffset = position / this.divisionConst;\r\n\r\n if (this.documentHieght - 1000 < this.scrollHeight) {\r\n this.scrollComplete.emit();\r\n }\r\n };\r\n }\r\n }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}