├── .yarnrc ├── packages ├── ngx-infinite-viewer │ ├── src │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── app.component.spec.ts │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── styles.css │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── test.ts │ │ └── polyfills.ts │ ├── projects │ │ └── ngx-infinite-viewer │ │ │ ├── src │ │ │ ├── lib │ │ │ │ ├── ngx-infinite-viewer.service.ts │ │ │ │ ├── types.ts │ │ │ │ ├── ngx-infinite-viewer.module.ts │ │ │ │ ├── ngx-infinite-viewer.service.spec.ts │ │ │ │ ├── ngx-infinite-viewer.interface.ts │ │ │ │ ├── ngx-infinite-viewer.component.spec.ts │ │ │ │ ├── consts.ts │ │ │ │ └── ngx-infinite-viewer.component.ts │ │ │ ├── public-api.ts │ │ │ └── test.ts │ │ │ ├── ng-package.json │ │ │ ├── tsconfig.lib.prod.json │ │ │ ├── tsconfig.spec.json │ │ │ ├── tsconfig.lib.json │ │ │ ├── .browserslistrc │ │ │ ├── package.json │ │ │ ├── karma.conf.js │ │ │ ├── README.md │ │ │ └── CHANGELOG.md │ ├── .editorconfig │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── .browserslistrc │ ├── .gitignore │ ├── README.md │ ├── tsconfig.json │ ├── package.json │ ├── karma.conf.js │ └── angular.json ├── preact-infinite-viewer │ ├── src │ │ ├── demo │ │ │ ├── App.css │ │ │ ├── index.tsx │ │ │ └── App.tsx │ │ └── preact-infinite-viewer │ │ │ ├── index.esm.ts │ │ │ ├── index.umd.ts │ │ │ ├── InfiniteViewer.js │ │ │ ├── index.ts │ │ │ └── InfiniteViewer.d.ts │ ├── tsconfig.build.json │ ├── tsconfig.declaration.json │ ├── rollup.config.demo.js │ ├── tsconfig.json │ ├── demo │ │ ├── index.html │ │ └── logo.svg │ ├── tslint.json │ ├── LICENSE │ ├── rollup.config.js │ ├── package.json │ └── README.md ├── react-infinite-viewer │ ├── mocha.opts │ ├── src │ │ ├── react-app-env.d.ts │ │ ├── react-infinite-viewer │ │ │ ├── index.umd.ts │ │ │ ├── index.ts │ │ │ ├── consts.ts │ │ │ ├── types.ts │ │ │ └── InfiniteViewer.tsx │ │ ├── App.test.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── App.tsx │ │ ├── App.css │ │ ├── logo.svg │ │ └── serviceWorker.ts │ ├── public │ │ ├── emo.png │ │ ├── favicon.ico │ │ ├── manifest.json │ │ └── index.html │ ├── tsconfig.build.json │ ├── .gitignore │ ├── tsconfig.declaration.json │ ├── tsconfig.test.json │ ├── rollup.config.js │ ├── tsconfig.json │ ├── tslint.json │ ├── LICENSE │ ├── package.json │ └── README.md ├── vue-infinite-viewer │ ├── .browserslistrc │ ├── postcss.config.js │ ├── src │ │ ├── global.d.ts │ │ ├── index.ts │ │ ├── index.umd.ts │ │ ├── InfiniteViewer.vue.d.ts │ │ └── InfiniteViewer.vue │ ├── demo │ │ ├── shims-vue.d.ts │ │ ├── index.ts │ │ └── App.vue │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── .gitignore │ ├── tsconfig.declaration.json │ ├── tslint.json │ ├── rollup.config.js │ ├── tsconfig.json │ ├── package.json │ ├── README.md │ └── CHANGELOG.md ├── vue3-infinite-viewer │ ├── .browserslistrc │ ├── postcss.config.js │ ├── src │ │ ├── global.d.ts │ │ ├── index.umd.ts │ │ ├── index.ts │ │ ├── InfiniteViewer.vue.d.ts │ │ └── InfiniteViewer.vue │ ├── demo │ │ ├── index.ts │ │ ├── shims-vue.d.ts │ │ └── App.vue │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── .gitignore │ ├── tsconfig.declaration.json │ ├── rollup.config.js │ ├── tsconfig.json │ ├── package.json │ └── README.md ├── svelte-infinite-viewer │ ├── public │ │ ├── bundle.css │ │ ├── favicon.png │ │ ├── bundle.css.map │ │ ├── index.html │ │ └── global.css │ ├── .gitignore │ ├── src │ │ ├── main.js │ │ ├── App.svelte │ │ └── svelte-infinite-viewer │ │ │ ├── index.js │ │ │ ├── index.d.ts │ │ │ └── InfiniteViewer.svelte │ ├── rollup.build.config.js │ ├── LICENSE │ ├── package.json │ ├── rollup.config.js │ ├── tsconfig.json │ └── README.md ├── lit-infinite-viewer │ ├── src │ │ ├── index.ts │ │ └── LitInfiniteViewer.ts │ ├── tsconfig.build.json │ ├── demo │ │ ├── index.ts │ │ └── index.html │ ├── tsconfig.declaration.json │ ├── rollup.demo.config.js │ ├── rollup.config.js │ ├── tsconfig.json │ ├── LICENSE │ └── package.json └── infinite-viewer │ ├── src │ ├── InfiniteViewer.tsx │ ├── index.umd.ts │ ├── index.ts │ ├── index.cjs.ts │ ├── utils.ts │ ├── ScrollBar.ts │ └── consts.ts │ ├── tsconfig.declaration.json │ ├── tsconfig.test.json │ ├── .editorconfig │ ├── .npmignore │ ├── tsconfig.json │ ├── rollup.config.js │ ├── test │ └── iframe.html │ └── package.json ├── demo └── images │ └── logo.png ├── .gitignore ├── .editorconfig ├── .npmignore ├── static └── scripts │ └── custom.js ├── config └── update-type-consts.js ├── .github └── FUNDING.yml ├── tslint.json ├── lerna.json ├── LICENSE ├── jsdoc.json └── package.json /.yarnrc: -------------------------------------------------------------------------------- 1 | workspaces-experimental true 2 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/src/demo/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/mocha.opts: -------------------------------------------------------------------------------- 1 | --timeout 10000 2 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/public/bundle.css: -------------------------------------------------------------------------------- 1 | 2 | /*# sourceMappingURL=bundle.css.map */ -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /demo/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/infinite-viewer/HEAD/demo/images/logo.png -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /packages/lit-infinite-viewer/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LitInfiniteViewer"; 2 | export * from "infinite-viewer"; 3 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/demo/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/infinite-viewer/HEAD/packages/ngx-infinite-viewer/src/favicon.ico -------------------------------------------------------------------------------- /packages/react-infinite-viewer/public/emo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/infinite-viewer/HEAD/packages/react-infinite-viewer/public/emo.png -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/demo/index.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/lit-infinite-viewer/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "target": "es2015", 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/infinite-viewer/HEAD/packages/react-infinite-viewer/public/favicon.ico -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/infinite-viewer/HEAD/packages/vue-infinite-viewer/public/favicon.ico -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/infinite-viewer/HEAD/packages/vue3-infinite-viewer/public/favicon.ico -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/src/preact-infinite-viewer/index.esm.ts: -------------------------------------------------------------------------------- 1 | import InfiniteViewer from "./InfiniteViewer"; 2 | 3 | export default InfiniteViewer; 4 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/src/preact-infinite-viewer/index.umd.ts: -------------------------------------------------------------------------------- 1 | import InfiniteViewer from "./InfiniteViewer"; 2 | 3 | export default InfiniteViewer; 4 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/react-infinite-viewer/index.umd.ts: -------------------------------------------------------------------------------- 1 | import InfiniteViewer from "./InfiniteViewer"; 2 | 3 | export default InfiniteViewer; 4 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "jsx": "react" 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/infinite-viewer/HEAD/packages/svelte-infinite-viewer/public/favicon.png -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/src/preact-infinite-viewer/InfiniteViewer.js: -------------------------------------------------------------------------------- 1 | import InfiniteViewer from "react-infinite-viewer"; 2 | export default InfiniteViewer; 3 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/src/demo/index.tsx: -------------------------------------------------------------------------------- 1 | import { render, h } from "preact"; 2 | import App from "./App"; 3 | 4 | render(, document.getElementById("root")!); 5 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/demo/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | 5 | new Vue({ 6 | render: (h: any) => h(App), 7 | }).$mount('#app'); 8 | -------------------------------------------------------------------------------- /packages/infinite-viewer/src/InfiniteViewer.tsx: -------------------------------------------------------------------------------- 1 | import InfiniteViewerManager from "./InfiniteViewerManager"; 2 | 3 | export default class InfiniteViewer extends InfiniteViewerManager {} 4 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "jsxFactory": "h", 6 | }, 7 | } 8 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/public/bundle.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "file": "bundle.css", 4 | "sources": [], 5 | "sourcesContent": [], 6 | "names": [], 7 | "mappings": "" 8 | } -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/react-infinite-viewer/index.ts: -------------------------------------------------------------------------------- 1 | import InfiniteViewer from "./InfiniteViewer"; 2 | 3 | export default InfiniteViewer; 4 | export * from "infinite-viewer"; 5 | export * from "./types"; 6 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | name: 'world' 7 | } 8 | }); 9 | 10 | export default app; -------------------------------------------------------------------------------- /packages/infinite-viewer/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import InfiniteViewer, * as modules from "./index"; 2 | 3 | for (const name in modules) { 4 | (InfiniteViewer as any)[name] = modules[name]; 5 | } 6 | 7 | export default InfiniteViewer; 8 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/react-infinite-viewer/consts.ts: -------------------------------------------------------------------------------- 1 | import { EVENTS } from "infinite-viewer"; 2 | import { camelize } from "@daybrush/utils"; 3 | 4 | export const REACT_EVENTS = EVENTS.map(name => camelize(`on ${name}`)); 5 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/src/index.ts: -------------------------------------------------------------------------------- 1 | // import VueInfiniteViewer from './VueInfiniteViewer'; 2 | import InfiniteViewer from './InfiniteViewer.vue'; 3 | 4 | export default InfiniteViewer; 5 | export { InfiniteViewer as VueInfiniteViewer }; 6 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import InfiniteViewer, * as modules from './index'; 2 | 3 | for (const name in modules) { 4 | (InfiniteViewer as any)[name] = (modules as any)[name]; 5 | } 6 | export default InfiniteViewer; 7 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import InfiniteViewer, * as modules from './index'; 2 | 3 | for (const name in modules) { 4 | (InfiniteViewer as any)[name] = (modules as any)[name]; 5 | } 6 | export default InfiniteViewer; 7 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/demo/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | declare module '*.vue' { 3 | import type { DefineComponent } from 'vue' 4 | const component: DefineComponent<{}, {}, any> 5 | export default component 6 | } 7 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/src/index.ts: -------------------------------------------------------------------------------- 1 | // import VueInfiniteViewer from './VueInfiniteViewer'; 2 | import InfiniteViewer from './InfiniteViewer.vue'; 3 | 4 | export default InfiniteViewer; 5 | export { InfiniteViewer as VueInfiniteViewer }; 6 | -------------------------------------------------------------------------------- /packages/lit-infinite-viewer/demo/index.ts: -------------------------------------------------------------------------------- 1 | import { html, render } from "lit"; 2 | import "../src/LitInfiniteViewer"; 3 | 4 | render(html` 5 | 6 |
7 | `, document.body); 8 | -------------------------------------------------------------------------------- /packages/infinite-viewer/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "declaration": true, 5 | "removeComments": false, 6 | "emitDeclarationOnly": true, 7 | "declarationDir": "declaration" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/src/preact-infinite-viewer/index.ts: -------------------------------------------------------------------------------- 1 | import InfiniteViewer from "./InfiniteViewer"; 2 | 3 | export * from "react-infinite-viewer/declaration/types"; 4 | export * from "infinite-viewer/declaration/types"; 5 | export default InfiniteViewer; 6 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/src/lib/ngx-infinite-viewer.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class NgxInfiniteViewerService { 7 | 8 | constructor() { } 9 | } 10 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/src/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 10 |
AA
11 | 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.DS_Store 3 | .DS_Store 4 | doc/ 5 | dist/ 6 | release/ 7 | npm-debug.log* 8 | coverage/ 9 | jsdoc/ 10 | doc/ 11 | outjs/ 12 | declaration/ 13 | build/ 14 | .vscode/ 15 | packages/*/dist 16 | rollup-plugin-visualizer/ 17 | statistics/ 18 | .scene_cache 19 | *.mp4 -------------------------------------------------------------------------------- /packages/infinite-viewer/src/index.ts: -------------------------------------------------------------------------------- 1 | import InfiniteViewer from "./InfiniteViewer"; 2 | 3 | export default InfiniteViewer; 4 | export { 5 | OPTIONS, 6 | PROPERTIES, 7 | EVENTS, 8 | METHODS, 9 | CLASS_NAME, 10 | } from "./consts"; 11 | 12 | export * from "./types"; 13 | -------------------------------------------------------------------------------- /packages/infinite-viewer/src/index.cjs.ts: -------------------------------------------------------------------------------- 1 | import InfiniteViewer, * as modules from "./index"; 2 | 3 | for (const name in modules) { 4 | (InfiniteViewer as any)[name] = modules[name]; 5 | } 6 | 7 | module.exports = InfiniteViewer; 8 | export default InfiniteViewer; 9 | export * from "./index"; 10 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ngx-infinite-viewer 3 | */ 4 | 5 | export * from './lib/ngx-infinite-viewer.service'; 6 | export * from './lib/ngx-infinite-viewer.component'; 7 | export * from './lib/ngx-infinite-viewer.module'; 8 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/src/lib/types.ts: -------------------------------------------------------------------------------- 1 | import { EventEmitter } from '@angular/core'; 2 | import { InfiniteViewerEvents } from 'infinite-viewer'; 3 | 4 | export type NgxInfiniteViewerEvents = { 5 | [key in keyof InfiniteViewerEvents]: EventEmitter 6 | }; 7 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'ngx-infinite-viewer-project'; 10 | } 11 | -------------------------------------------------------------------------------- /packages/infinite-viewer/tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "noImplicitAny": false, 6 | "types": [ 7 | "karma-chai", 8 | "mocha" 9 | ] 10 | }, 11 | "include": [ 12 | "./src/**/*.ts", 13 | "./test/**/*.ts" 14 | ] 15 | } -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-infinite-viewer", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | }, 7 | "allowedNonPeerDependencies": [ 8 | "infinite-viewer" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [{*.js,*.ts,*.tsx,*.jsx}] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_style = space 8 | indent_size = 4 9 | insert_final_newline = true 10 | max_line_length = 80 11 | trim_trailing_whitespace = true 12 | 13 | [{package.json,.travis.yml}] 14 | indent_style = space 15 | indent_size = 4 -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.DS_Store 3 | .DS_Store 4 | doc/ 5 | template/ 6 | example/ 7 | karma.conf.js 8 | test/ 9 | mocha.opts 10 | Gruntfile.js 11 | webpack.*.js 12 | .travis.yml 13 | packages 14 | release/ 15 | demo/ 16 | coverage/ 17 | dist/report.html 18 | rollup-plugin-visualizer/ 19 | outjs/ 20 | .scene_cache 21 | *.mp3 22 | *.mp4 23 | storybook -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "removeComments": false, 5 | "declaration": true, 6 | "emitDeclarationOnly": true, 7 | "declarationDir": "declaration" 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.tsx", 12 | "src/**/*.vue" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "removeComments": false, 5 | "declaration": true, 6 | "emitDeclarationOnly": true, 7 | "declarationDir": "declaration" 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.tsx", 12 | "src/**/*.vue" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/infinite-viewer/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [{*.js,*.ts,*.tsx,*.jsx}] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_style = space 8 | indent_size = 4 9 | insert_final_newline = true 10 | max_line_length = 80 11 | trim_trailing_whitespace = true 12 | 13 | [{package.json,.travis.yml}] 14 | indent_style = space 15 | indent_size = 4 -------------------------------------------------------------------------------- /packages/infinite-viewer/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.DS_Store 3 | .DS_Store 4 | doc/ 5 | template/ 6 | example/ 7 | karma.conf.js 8 | test/ 9 | mocha.opts 10 | Gruntfile.js 11 | webpack.*.js 12 | .travis.yml 13 | packages 14 | release/ 15 | demo/ 16 | coverage/ 17 | dist/report.html 18 | rollup-plugin-visualizer/ 19 | outjs/ 20 | .scene_cache 21 | *.mp3 22 | *.mp4 23 | storybook -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/lit-infinite-viewer/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "allowJs": false, 5 | "noEmit": false, 6 | "isolatedModules": false, 7 | "removeComments": false, 8 | "declaration": true, 9 | "emitDeclarationOnly": true, 10 | "declarationDir": "declaration" 11 | }, 12 | "include": [ 13 | "./src/**/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NgxInfiniteViewerProject 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /static/scripts/custom.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | window.dataLayer = window.dataLayer || []; 3 | function gtag() { dataLayer.push(arguments); } 4 | gtag('js', new Date()); 5 | 6 | gtag('config', 'G-TRBNXHQ0ZF'); 7 | var script = document.createElement("script"); 8 | 9 | script.src = "https://www.googletagmanager.com/gtag/js?id=G-TRBNXHQ0ZF"; 10 | 11 | document.body.appendChild(script); 12 | })(); 13 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/src/lib/ngx-infinite-viewer.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { NgxInfiniteViewerComponent } from './ngx-infinite-viewer.component'; 3 | 4 | 5 | 6 | @NgModule({ 7 | declarations: [NgxInfiniteViewerComponent], 8 | imports: [ 9 | ], 10 | exports: [NgxInfiniteViewerComponent] 11 | }) 12 | export class NgxInfiniteViewerModule { } 13 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | imports: [ 11 | BrowserModule 12 | ], 13 | providers: [], 14 | bootstrap: [AppComponent] 15 | }) 16 | export class AppModule { } 17 | -------------------------------------------------------------------------------- /packages/lit-infinite-viewer/rollup.demo.config.js: -------------------------------------------------------------------------------- 1 | const buildHelper = require("@daybrush/builder"); 2 | 3 | const defaultOptions = { 4 | input: "./demo/index.ts", 5 | tsconfig: "tsconfig.build.json", 6 | sourcemap: true, 7 | }; 8 | export default buildHelper([ 9 | { 10 | ...defaultOptions, 11 | format: "iife", 12 | output: "./demo/dist/index.js", 13 | resolve: true, 14 | exports: "named", 15 | }, 16 | ]); 17 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /packages/lit-infinite-viewer/demo/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [] 10 | }, 11 | "exclude": [ 12 | "src/test.ts", 13 | "**/*.spec.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "allowJs": false, 5 | "noEmit": false, 6 | "isolatedModules": false, 7 | "removeComments": false, 8 | "declaration": true, 9 | "emitDeclarationOnly": true, 10 | "declarationDir": "declaration" 11 | }, 12 | "include": [ 13 | "./src/react-infinite-viewer/**/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/src/demo/App.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from "preact"; 2 | import "./App.css"; 3 | import InfiniteViewer from "../preact-infinite-viewer/InfiniteViewer"; 4 | 5 | class App extends Component { 6 | public render() { 7 | return ( 8 | 9 |
AA
10 | 11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "allowJs": false, 5 | "noEmit": false, 6 | "isolatedModules": false, 7 | "removeComments": false, 8 | "declaration": true, 9 | "emitDeclarationOnly": true, 10 | "declarationDir": "declaration" 11 | }, 12 | "include": [ 13 | "./src/preact-infinite-viewer/**/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "warning", 3 | "extends": [ 4 | "tslint:recommended" 5 | ], 6 | "linterOptions": { 7 | "exclude": [ 8 | "node_modules/**" 9 | ] 10 | }, 11 | "rules": { 12 | "indent": [true, "spaces", 2], 13 | "interface-name": false, 14 | "no-consecutive-blank-lines": false, 15 | "object-literal-sort-keys": false, 16 | "ordered-imports": false, 17 | "quotemark": [true, "single"] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/infinite-viewer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./outjs/", 4 | "esModuleInterop": false, 5 | "sourceMap": true, 6 | "module": "es2015", 7 | "target": "es5", 8 | "experimentalDecorators": true, 9 | "skipLibCheck": true, 10 | "moduleResolution": "node", 11 | "lib": [ 12 | "es2015", 13 | "dom" 14 | ], 15 | "jsx": "react", 16 | "jsxFactory": "h" 17 | }, 18 | "include": [ 19 | "./src/**/*.ts", "src/**/*.tsx" 20 | ] 21 | } -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /config/update-type-consts.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const { convertProperties } = require("@daybrush/release/angular"); 3 | const { EVENTS, OPTIONS } = require("../packages/infinite-viewer/dist/infinite-viewer.cjs.js"); 4 | 5 | convertProperties( 6 | { 7 | ANGULAR_INFINITE_VIEWER_INPUTS: OPTIONS, 8 | ANGULAR_INFINITE_VIEWER_OUTPUTS: EVENTS, 9 | }, 10 | [ 11 | path.resolve(__dirname, "../packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/src/public-api.ts"), 12 | ], 13 | ); 14 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/src/lib/ngx-infinite-viewer.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { NgxInfiniteViewerService } from './ngx-infinite-viewer.service'; 4 | 5 | describe('NgxInfiniteViewerService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: NgxInfiniteViewerService = TestBed.get(NgxInfiniteViewerService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | // import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | // serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /packages/lit-infinite-viewer/rollup.config.js: -------------------------------------------------------------------------------- 1 | const buildHelper = require("@daybrush/builder"); 2 | 3 | const defaultOptions = { 4 | input: "./src/index.ts", 5 | tsconfig: "tsconfig.build.json", 6 | sourcemap: true, 7 | }; 8 | export default buildHelper([ 9 | { 10 | ...defaultOptions, 11 | format: "es", 12 | output: "./dist/infinite-viewer.esm.js", 13 | exports: "named", 14 | }, 15 | { 16 | ...defaultOptions, 17 | format: "cjs", 18 | output: "./dist/infinite-viewer.cjs.js", 19 | exports: "named", 20 | }, 21 | ]); 22 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/src/InfiniteViewer.vue.d.ts: -------------------------------------------------------------------------------- 1 | import { MethodInterface } from "framework-utils"; 2 | import VanillaInfiniteViewer, { InfiniteViewerOptions, InfiniteViewerMethods } from "infinite-viewer"; 3 | 4 | interface InfiniteViewerInterface 5 | extends InfiniteViewerOptions, 6 | MethodInterface< 7 | InfiniteViewerMethods, 8 | VanillaInfiniteViewer, 9 | InfiniteViewerInterface 10 | > { 11 | name: string; 12 | } 13 | declare const InfiniteViewer: InfiniteViewerInterface; 14 | type InfiniteViewer = InfiniteViewerInterface; 15 | 16 | export default InfiniteViewer; 17 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/src/InfiniteViewer.vue.d.ts: -------------------------------------------------------------------------------- 1 | import { MethodInterface } from "framework-utils"; 2 | import VanillaInfiniteViewer, { InfiniteViewerOptions, InfiniteViewerMethods } from "infinite-viewer"; 3 | 4 | interface InfiniteViewerInterface 5 | extends InfiniteViewerOptions, 6 | MethodInterface< 7 | InfiniteViewerMethods, 8 | VanillaInfiniteViewer, 9 | InfiniteViewerInterface 10 | > { 11 | name: string; 12 | } 13 | declare const InfiniteViewer: InfiniteViewerInterface; 14 | type InfiniteViewer = InfiniteViewerInterface; 15 | 16 | export default InfiniteViewer; 17 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/src/preact-infinite-viewer/InfiniteViewer.d.ts: -------------------------------------------------------------------------------- 1 | import { InfiniteViewerProps } from "react-infinite-viewer/declaration/types"; 2 | import Preact, { Component } from "preact"; 3 | import VanillaInfiniteViewer, { InfiniteViewerMethods } from "infinite-viewer"; 4 | import { MethodInterface } from "framework-utils"; 5 | 6 | export default class PreactInfiniteViewer extends Component> { 7 | public render(): any; 8 | } 9 | export default interface PreactInfiniteViewer extends MethodInterface {} {} 10 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "noImplicitAny": false, 6 | "jsx": "react", 7 | "types": [ 8 | "karma-chai", 9 | "mocha" 10 | ], 11 | "strict": false, 12 | "strictNullChecks": false, 13 | "forceConsistentCasingInFileNames": false, 14 | "resolveJsonModule": false, 15 | "isolatedModules": false, 16 | "noEmit": false 17 | }, 18 | "include": [ 19 | "./src/**/*.ts", 20 | "./test/**/*.ts", 21 | "./test/**/*.tsx" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/rollup.config.js: -------------------------------------------------------------------------------- 1 | import builder from "@daybrush/builder"; 2 | 3 | const defaultOptions = { 4 | tsconfig: "tsconfig.build.json", 5 | }; 6 | 7 | export default builder([ 8 | { 9 | ...defaultOptions, 10 | input: "src/react-infinite-viewer/index.ts", 11 | output: "./dist/infinite-viewer.esm.js", 12 | format: "es", 13 | exports: "named", 14 | }, 15 | { 16 | ...defaultOptions, 17 | input: "src/react-infinite-viewer/index.umd.ts", 18 | output: "./dist/infinite-viewer.cjs.js", 19 | format: "cjs", 20 | exports: "default", 21 | }, 22 | ]); 23 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-selecto 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue3-infinite-viewer 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/rollup.config.js: -------------------------------------------------------------------------------- 1 | const buildHelper = require("@daybrush/builder"); 2 | const vuePlugin = require("rollup-plugin-vue"); 3 | 4 | const defaultOptions = { 5 | sourcemap: true, 6 | input: "./src/index.ts", 7 | exports: "named", 8 | plugins: [ 9 | vuePlugin(), 10 | ] 11 | }; 12 | export default buildHelper([ 13 | { 14 | ...defaultOptions, 15 | format: "es", 16 | output: "./dist/infinite-viewer.esm.js", 17 | }, 18 | { 19 | ...defaultOptions, 20 | format: "cjs", 21 | input: "./src/index.umd.ts", 22 | exports: "default", 23 | output: "./dist/infinite-viewer.cjs.js", 24 | }, 25 | ]); 26 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/rollup.build.config.js: -------------------------------------------------------------------------------- 1 | import buildHelper from "@daybrush/builder"; 2 | import svelte from 'rollup-plugin-svelte'; 3 | 4 | const defaultOptions = { 5 | tsconfig: "", 6 | input: './src/svelte-infinite-viewer/index.js', 7 | commonjs: true, 8 | external: { 9 | "svelte": "svelte", 10 | }, 11 | plugins: [ 12 | svelte(), 13 | ], 14 | } 15 | export default buildHelper([ 16 | { 17 | ...defaultOptions, 18 | output: "dist/infinite-viewer.cjs.js", 19 | format: "cjs", 20 | }, 21 | { 22 | ...defaultOptions, 23 | output: "dist/infinite-viewer.esm.js", 24 | format: "es", 25 | }, 26 | ]); 27 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/demo/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 28 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/demo/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 28 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/react-infinite-viewer/types.ts: -------------------------------------------------------------------------------- 1 | import { InfiniteViewerEvents, InfiniteViewerOptions } from "infinite-viewer"; 2 | 3 | export interface InfiniteViewerEventNames { 4 | onScroll: "scroll"; 5 | onDragStart: "dragStart"; 6 | onDrag: "drag"; 7 | onDragEnd: "dragEnd"; 8 | onPinchStart: "pinchStart"; 9 | onPinch: "pinch"; 10 | onAbortPinch: "abortPinch"; 11 | } 12 | export type InfiniteViewerEventProps = { 13 | [key in keyof InfiniteViewerEventNames]: (e: InfiniteViewerEvents[InfiniteViewerEventNames[key]]) => any; 14 | }; 15 | export type InfiniteViewerProps = InfiniteViewerOptions & InfiniteViewerEventProps & { 16 | className?: string; 17 | [key: string]: any; 18 | }; 19 | -------------------------------------------------------------------------------- /packages/lit-infinite-viewer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "experimentalDecorators": true, 4 | "target": "es2015", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "allowJs": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "allowSyntheticDefaultImports": true, 14 | "strict": false, 15 | "forceConsistentCasingInFileNames": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true 21 | }, 22 | "include": [ 23 | "src" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/src/svelte-infinite-viewer/index.js: -------------------------------------------------------------------------------- 1 | import InfiniteViewer from "./InfiniteViewer.svelte"; 2 | import { METHODS } from "infinite-viewer"; 3 | 4 | export default /*#__PURE__*/ (() => { 5 | const prototype = InfiniteViewer.prototype; 6 | 7 | if (!prototype) { 8 | return InfiniteViewer; 9 | } 10 | METHODS.forEach(name => { 11 | prototype[name] = function (...args) { 12 | const self = this.getInstance(); 13 | const result = self[name](...args); 14 | 15 | if (result === self) { 16 | return this; 17 | } else { 18 | return result; 19 | } 20 | }; 21 | }); 22 | return InfiniteViewer; 23 | })(); 24 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/src/lib/ngx-infinite-viewer.interface.ts: -------------------------------------------------------------------------------- 1 | import VanillaInfiniteViewer, { METHODS, InfiniteViewerMethods, InfiniteViewerOptions } from 'infinite-viewer'; 2 | import { withMethods, MethodInterface } from 'framework-utils'; 3 | import { NgxInfiniteViewerComponent } from './ngx-infinite-viewer.component'; 4 | import { NgxInfiniteViewerEvents } from './types'; 5 | 6 | export class NgxInfiniteViewerInterface { 7 | @withMethods(METHODS as any) 8 | protected infiniteViewer!: VanillaInfiniteViewer; 9 | } 10 | export interface NgxInfiniteViewerInterface 11 | extends MethodInterface, 12 | InfiniteViewerOptions, NgxInfiniteViewerEvents { } 13 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/rollup.config.demo.js: -------------------------------------------------------------------------------- 1 | import builder from "@daybrush/builder"; 2 | import css from "rollup-plugin-css-bundle"; 3 | const preact = require("rollup-plugin-preact"); 4 | 5 | 6 | 7 | 8 | export default builder({ 9 | input: "./src/demo/index.tsx", 10 | tsconfig: "./tsconfig.build.json", 11 | sourcemap: false, 12 | format: "umd", 13 | output: "./demo/dist/index.js", 14 | name: "app", 15 | exports: "named", 16 | plugins: [ 17 | css({ output: "./demo/dist/index.css" }), 18 | preact({ 19 | noPropTypes: true, 20 | noEnv: true, 21 | noReactIs: true, 22 | resolvePreactCompat: true, 23 | usePreactX: true, 24 | }), 25 | ], 26 | }); 27 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/rollup.config.js: -------------------------------------------------------------------------------- 1 | const buildHelper = require("@daybrush/builder"); 2 | const vuePlugin = require("rollup-plugin-vue"); 3 | 4 | const defaultOptions = { 5 | sourcemap: true, 6 | input: "./src/index.ts", 7 | exports: "named", 8 | plugins: [ 9 | vuePlugin(), 10 | ], 11 | external: { 12 | "vue": "Vue", 13 | }, 14 | }; 15 | export default buildHelper([ 16 | { 17 | ...defaultOptions, 18 | format: "es", 19 | output: "./dist/infinite-viewer.esm.js", 20 | }, 21 | { 22 | ...defaultOptions, 23 | format: "cjs", 24 | // input: "./src/index.umd.ts", 25 | exports: "named", 26 | output: "./dist/infinite-viewer.cjs.js", 27 | }, 28 | ]); 29 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: daybrush # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import InfiniteViewer from "./react-infinite-viewer/InfiniteViewer"; 3 | import "./App.css"; 4 | 5 | function App() { 6 | const [visible, setVisible] = React.useState(true); 7 | 8 | return ( 9 | 14 |
15 |

text

16 | 19 |
20 | 21 | ); 22 | } 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/src/svelte-infinite-viewer/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import { SvelteComponentTyped } from "svelte"; 3 | import { InfiniteViewerMethods, InfiniteViewerOptions, InfiniteViewerEvents } from "infinite-viewer"; 4 | 5 | export type SvelteInfiniteViewerEvents = { 6 | [key in keyof InfiniteViewerEvents]: CustomEvent; 7 | } 8 | export interface SvelteInfiniteViewerProps extends Partial { 9 | className?: string; 10 | } 11 | export default class InfiniteViewerComponent extends SvelteComponentTyped< 12 | SvelteInfiniteViewerProps, 13 | SvelteInfiniteViewerEvents 14 | > { } 15 | 16 | export default interface InfiniteViewerComponent extends InfiniteViewerMethods { 17 | } 18 | export * from "infinite-viewer"; 19 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./outjs/", 4 | "esModuleInterop": false, 5 | "sourceMap": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "experimentalDecorators": true, 9 | "skipLibCheck": true, 10 | "moduleResolution": "node", 11 | "jsxFactory": "h", 12 | "lib": [ 13 | "es2015", 14 | "dom" 15 | ], 16 | "allowJs": true, 17 | "allowSyntheticDefaultImports": true, 18 | "strict": true, 19 | "strictNullChecks": true, 20 | "forceConsistentCasingInFileNames": true, 21 | "resolveJsonModule": true, 22 | "isolatedModules": true, 23 | "noEmit": true 24 | }, 25 | "include": [ 26 | "./src/**/*.ts", "src/preact-selecto/Selecto.js", "src/preact-selecto/Selecto.d.ts" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-infinite-viewer", 3 | "version": "0.27.1", 4 | "description": "Angular Infinite Viewer is Document Viewer Component with infinite scrolling.", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/daybrush/infinite-viewer/tree/master/packages/ngx-infinite-viewer" 8 | }, 9 | "keywords": [ 10 | "scroll", 11 | "scroller", 12 | "viewer", 13 | "infinite", 14 | "moveable", 15 | "angular" 16 | ], 17 | "author": "Daybrush", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/daybrush/infinite-viewer/issues" 21 | }, 22 | "homepage": "https://github.com/daybrush/infinite-viewer#readme", 23 | "dependencies": { 24 | "infinite-viewer": "~0.29.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/infinite-viewer/rollup.config.js: -------------------------------------------------------------------------------- 1 | 2 | import builder from "@daybrush/builder"; 3 | 4 | export default builder([ 5 | { 6 | name: "InfiniteViewer", 7 | input: "src/index.umd.ts", 8 | output: "./dist/infinite-viewer.js", 9 | resolve: true, 10 | }, 11 | { 12 | name: "InfiniteViewer", 13 | input: "src/index.umd.ts", 14 | output: "./dist/infinite-viewer.min.js", 15 | resolve: true, 16 | uglify: true, 17 | 18 | }, 19 | { 20 | input: "src/index.ts", 21 | output: "./dist/infinite-viewer.esm.js", 22 | exports: "named", 23 | format: "es", 24 | }, 25 | { 26 | input: "src/index.cjs.ts", 27 | output: "./dist/infinite-viewer.cjs.js", 28 | exports: "named", 29 | format: "cjs", 30 | }, 31 | ]); 32 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Preact App 6 | 7 | 8 | 9 | 10 |
11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "experimentalDecorators": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": [ 15 | "webpack-env" 16 | ], 17 | "paths": { 18 | "@/*": [ 19 | "src/*" 20 | ] 21 | }, 22 | "lib": [ 23 | "esnext", 24 | "dom", 25 | "dom.iterable", 26 | "scripthost" 27 | ] 28 | }, 29 | "include": [ 30 | "src/**/*.ts", 31 | "src/**/*.tsx", 32 | "src/**/*.vue", 33 | "tests/**/*.ts", 34 | "tests/**/*.tsx" 35 | ], 36 | "exclude": [ 37 | "node_modules" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "experimentalDecorators": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": [ 15 | "webpack-env" 16 | ], 17 | "paths": { 18 | "@/*": [ 19 | "src/*" 20 | ] 21 | }, 22 | "lib": [ 23 | "esnext", 24 | "dom", 25 | "dom.iterable", 26 | "scripthost" 27 | ] 28 | }, 29 | "include": [ 30 | "src/**/*.ts", 31 | "src/**/*.tsx", 32 | "src/**/*.vue", 33 | "tests/**/*.ts", 34 | "tests/**/*.tsx" 35 | ], 36 | "exclude": [ 37 | "node_modules" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/src/lib/ngx-infinite-viewer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NgxInfiniteViewerComponent } from './ngx-infinite-viewer.component'; 4 | 5 | describe('NgxInfiniteViewerComponent', () => { 6 | let component: NgxInfiniteViewerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NgxInfiniteViewerComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NgxInfiniteViewerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | declare const require: { 12 | context(path: string, deep?: boolean, filter?: RegExp): { 13 | (id: string): T; 14 | keys(): string[]; 15 | }; 16 | }; 17 | 18 | // First, initialize the Angular testing environment. 19 | getTestBed().initTestEnvironment( 20 | BrowserDynamicTestingModule, 21 | platformBrowserDynamicTesting(), 22 | ); 23 | 24 | // Then we find all the tests. 25 | const context = require.context('./', true, /\.spec\.ts$/); 26 | // And load the modules. 27 | context.keys().map(context); 28 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": [ 4 | "tslint:recommended" 5 | ], 6 | "rules": { 7 | "space-before-function-paren": false, 8 | "jsdoc-format": false, 9 | "forin": false, 10 | "no-console": false, 11 | "no-any": false, 12 | "interface-name": false, 13 | "indent": [ 14 | true, 15 | "spaces", 16 | 4 17 | ], 18 | "ordered-imports": false, 19 | "object-literal-sort-keys": false, 20 | "no-unused-expression": false, 21 | "arrow-parens": [ 22 | true, 23 | "ban-single-arg-parens" 24 | ], 25 | "max-line-length": [ 26 | true, 27 | { 28 | "limit": 120, 29 | "ignore-pattern": "\\*|//" 30 | } 31 | ], 32 | "trailing-comma": [ 33 | true, 34 | { 35 | "multiline": { 36 | "objects": "always", 37 | "arrays": "always", 38 | "functions": "always", 39 | "typeLiterals": "ignore" 40 | }, 41 | "esSpecCompliant": true 42 | } 43 | ] 44 | } 45 | } -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmClient": "yarn", 3 | "useWorkspaces": true, 4 | "packages": [ 5 | "packages/*", 6 | "packages/ngx-infinite-viewer/projects/ngx-infinite-viewer" 7 | ], 8 | "version": "independent", 9 | "lernaHelperOptions": { 10 | "deployFileMap": [ 11 | { 12 | "basePath": "packages/infinite-viewer/dist", 13 | "dists": [ 14 | "demo/release/{{version}}/dist", 15 | "demo/release/latest/dist" 16 | ] 17 | }, 18 | { 19 | "basePath": "doc", 20 | "dists": [ 21 | "demo/release/{{version}}/doc", 22 | "demo/release/latest/doc" 23 | ] 24 | } 25 | ], 26 | "beforeReleaseScripts": [ 27 | "npm run demo:build", 28 | "npm run deploy" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./outjs/", 4 | "esModuleInterop": false, 5 | "sourceMap": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "experimentalDecorators": true, 9 | "skipLibCheck": true, 10 | "moduleResolution": "node", 11 | "jsx": "preserve", 12 | "lib": [ 13 | "es2019", 14 | "es2015", 15 | "dom" 16 | ], 17 | "allowJs": true, 18 | "allowSyntheticDefaultImports": true, 19 | "strict": true, 20 | "strictNullChecks": true, 21 | "forceConsistentCasingInFileNames": true, 22 | "resolveJsonModule": true, 23 | "isolatedModules": true, 24 | "noEmit": true 25 | }, 26 | "include": [ 27 | "./src/**/*.ts", 28 | "./src/**/*.tsx", 29 | "./test/**/*.ts", 30 | "./test/**/*.tsx" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": [ 4 | "tslint:recommended" 5 | ], 6 | "rules": { 7 | "typedef": [true, "parameter"], 8 | "jsdoc-format": false, 9 | "forin": false, 10 | "no-console": false, 11 | "no-any": false, 12 | "interface-name": false, 13 | "indent": [ 14 | true, 15 | "spaces", 16 | 4 17 | ], 18 | "ordered-imports": false, 19 | "object-literal-sort-keys": false, 20 | "no-unused-expression": false, 21 | "arrow-parens": [ 22 | true, 23 | "ban-single-arg-parens" 24 | ], 25 | "max-line-length": [ 26 | true, 27 | { 28 | "limit": 120, 29 | "ignore-pattern": "(\\* @)|//" 30 | } 31 | ], 32 | "trailing-comma": [ 33 | true, 34 | { 35 | "multiline": { 36 | "objects": "always", 37 | "arrays": "always", 38 | "functions": "always", 39 | "typeLiterals": "ignore" 40 | }, 41 | "esSpecCompliant": true 42 | } 43 | ] 44 | } 45 | } -------------------------------------------------------------------------------- /packages/react-infinite-viewer/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": [ 4 | "tslint:recommended" 5 | ], 6 | "rules": { 7 | "typedef": [true, "parameter"], 8 | "jsdoc-format": false, 9 | "forin": false, 10 | "no-console": false, 11 | "no-any": false, 12 | "no-empty": false, 13 | "no-empty-interface": false, 14 | "interface-name": false, 15 | "indent": [ 16 | true, 17 | "spaces", 18 | 4 19 | ], 20 | "ordered-imports": false, 21 | "object-literal-sort-keys": false, 22 | "no-unused-expression": false, 23 | "arrow-parens": [ 24 | true, 25 | "ban-single-arg-parens" 26 | ], 27 | "max-line-length": [ 28 | true, 29 | { 30 | "limit": 120, 31 | "ignore-pattern": "(\\* @)|//" 32 | } 33 | ], 34 | "trailing-comma": [ 35 | true, 36 | { 37 | "multiline": { 38 | "objects": "always", 39 | "arrays": "always", 40 | "functions": "always", 41 | "typeLiterals": "ignore" 42 | }, 43 | "esSpecCompliant": true 44 | } 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Daybrush 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/lit-infinite-viewer/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Daybrush 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/react-infinite-viewer/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Daybrush 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Daybrush 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Daybrush 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | }); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'ngx-infinite-viewer-project'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.componentInstance; 22 | expect(app.title).toEqual('ngx-infinite-viewer-project'); 23 | }); 24 | 25 | it('should render title', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.nativeElement as HTMLElement; 29 | expect(compiled.querySelector('.content span')?.textContent).toContain('ngx-infinite-viewer-project app is running!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/README.md: -------------------------------------------------------------------------------- 1 | # NgxInfiniteViewerProject 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.9. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/public/global.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | color: #333; 9 | margin: 0; 10 | padding: 8px; 11 | box-sizing: border-box; 12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 13 | } 14 | 15 | a { 16 | color: rgb(0,100,200); 17 | text-decoration: none; 18 | } 19 | 20 | a:hover { 21 | text-decoration: underline; 22 | } 23 | 24 | a:visited { 25 | color: rgb(0,80,160); 26 | } 27 | 28 | label { 29 | display: block; 30 | } 31 | 32 | input, button, select, textarea { 33 | font-family: inherit; 34 | font-size: inherit; 35 | padding: 0.4em; 36 | margin: 0 0 0.5em 0; 37 | box-sizing: border-box; 38 | border: 1px solid #ccc; 39 | border-radius: 2px; 40 | } 41 | 42 | input:disabled { 43 | color: #ccc; 44 | } 45 | 46 | input[type="range"] { 47 | height: 0; 48 | } 49 | 50 | button { 51 | color: #333; 52 | background-color: #f4f4f4; 53 | outline: none; 54 | } 55 | 56 | button:disabled { 57 | color: #999; 58 | } 59 | 60 | button:not(:disabled):active { 61 | background-color: #ddd; 62 | } 63 | 64 | button:focus { 65 | border-color: #666; 66 | } 67 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitOverride": true, 10 | "noPropertyAccessFromIndexSignature": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "sourceMap": true, 14 | "paths": { 15 | "ngx-infinite-viewer": [ 16 | "dist/ngx-infinite-viewer/ngx-infinite-viewer", 17 | "dist/ngx-infinite-viewer" 18 | ] 19 | }, 20 | "declaration": false, 21 | "downlevelIteration": true, 22 | "experimentalDecorators": true, 23 | "moduleResolution": "node", 24 | "importHelpers": true, 25 | "target": "es2017", 26 | "module": "es2020", 27 | "lib": [ 28 | "es2020", 29 | "dom" 30 | ] 31 | }, 32 | "angularCompilerOptions": { 33 | "enableIvy": true, 34 | "compilationMode": "partial", 35 | "enableI18nLegacyMessageIdFormat": false, 36 | "strictInjectionParameters": true, 37 | "strictInputAccessModifiers": true, 38 | "strictTemplates": true 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/lit-infinite-viewer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lit-infinite-viewer", 3 | "version": "0.27.1", 4 | "types": "declaration/index.d.ts", 5 | "main": "dist/infinite-viewer.cjs.js", 6 | "module": "dist/infinite-viewer.esm.js", 7 | "keywords": [ 8 | "select", 9 | "infinite-viewer", 10 | "selection", 11 | "selectable", 12 | "moveable", 13 | "preact" 14 | ], 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/daybrush/infinite-viewer/blob/master/packages/preact-infinite-viewer" 18 | }, 19 | "author": "Daybrush", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/daybrush/infinite-viewer/issues" 23 | }, 24 | "homepage": "https://daybrush.com/infinite-viewer", 25 | "scripts": { 26 | "start": "rollup -c rollup.demo.config.js -w", 27 | "build": "rollup -c && npm run declaration", 28 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json" 29 | }, 30 | "files": [ 31 | "./*", 32 | "dist/*" 33 | ], 34 | "devDependencies": { 35 | "@daybrush/builder": "^0.1.2", 36 | "lit": "^2.7.0 || ^3.0.0", 37 | "typescript": "^4.5.0 <4.6.0" 38 | }, 39 | "dependencies": { 40 | "infinite-viewer": "~0.29.1" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/infinite-viewer/test/iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 21 |
22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-infinite-viewer-project", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build ngx-infinite-viewer", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "lernaHelperPublishPath": "./dist/ngx-infinite-viewer", 13 | "dependencies": { 14 | "@angular/animations": "~13.3.0", 15 | "@angular/common": "~13.3.0", 16 | "@angular/compiler": "~13.3.0", 17 | "@angular/core": "~13.3.0", 18 | "@angular/forms": "~13.3.0", 19 | "@angular/platform-browser": "~13.3.0", 20 | "@angular/platform-browser-dynamic": "~13.3.0", 21 | "@angular/router": "~13.3.0", 22 | "infinite-viewer": "~0.29.1", 23 | "rxjs": "~7.5.0", 24 | "tslib": "^2.3.0", 25 | "zone.js": "~0.11.4" 26 | }, 27 | "devDependencies": { 28 | "@angular-devkit/build-angular": "~13.3.9", 29 | "@angular/cli": "~13.3.9", 30 | "@angular/compiler-cli": "~13.3.0", 31 | "@types/jasmine": "~3.10.0", 32 | "@types/node": "^12.11.1", 33 | "jasmine-core": "~4.0.0", 34 | "karma": "~6.3.0", 35 | "karma-chrome-launcher": "~3.1.0", 36 | "karma-coverage": "~2.1.0", 37 | "karma-jasmine": "~4.0.0", 38 | "karma-jasmine-html-reporter": "~1.7.0", 39 | "ng-packagr": "^13.0.0", 40 | "typescript": "^4.5.0 <4.6.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /jsdoc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": [], 4 | "recurseDepth": 10, 5 | "opts": { 6 | "template": "./node_modules/daybrush-jsdoc-template", 7 | "destination": "./doc/" 8 | }, 9 | "source": { 10 | "include": ["./packages/infinite-viewer/src", "README.md", "node_modules/@scena/event-emitter/src/"], 11 | "includePattern": "(.+\\.js(doc|x)?|.+\\.ts(doc|x)?)$", 12 | "excludePattern": "(^|\\/|\\\\)_" 13 | }, 14 | "sourceType": "module", 15 | "tags": { 16 | "allowUnknownTags": true, 17 | "dictionaries": ["jsdoc","closure"] 18 | }, 19 | "templates": { 20 | "cleverLinks": false, 21 | "monospaceLinks": false, 22 | "default": { 23 | "staticFiles": { 24 | "include": [ 25 | "./static" 26 | ] 27 | } 28 | } 29 | }, 30 | "linkMap": { 31 | "IObject": "http://daybrush.com/utils/release/latest/doc/global.html#ObjectInterface", 32 | "OnDragStart": "https://daybrush.com/gesto/release/latest/doc/Gesto.html#.OnDragStart" 33 | }, 34 | "docdash": { 35 | "repo": "daybrush/infinite-viewer", 36 | "menu": { 37 | "Github repo": { 38 | "href": "https://github.com/daybrush/infinite-viewer", 39 | "target": "_blank", 40 | "class": "menu-item", 41 | "id": "repository" 42 | } 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/src/lib/consts.ts: -------------------------------------------------------------------------------- 1 | // auto 2 | // eslint-disable-next-line max-len 3 | export const ANGULAR_INFINITE_VIEWER_INPUTS: ["margin","threshold","zoomOffsetX","zoomOffsetY","zoom","zoomX","zoomY","rangeX","rangeY","rangeOffsetX","rangeOffsetY","usePinch","useMouseDrag","pinchThreshold","maxPinchWheel","wheelScale","displayVerticalScroll","displayHorizontalScroll","translateZ","useAutoZoom","wheelPinchKey","zoomRange","zoomRangeX","zoomRangeY","pinchDirection","useOverflowScroll","preventWheelClick","useWheelPinch","useWheelScroll","useGesture","cspNonce","wrapperElement","scrollAreaElement","verticalScrollElement","horizontalScrollElement","useResizeObserver","wheelContainer","useBounceScrollBar"] = ["margin","threshold","zoomOffsetX","zoomOffsetY","zoom","zoomX","zoomY","rangeX","rangeY","rangeOffsetX","rangeOffsetY","usePinch","useMouseDrag","pinchThreshold","maxPinchWheel","wheelScale","displayVerticalScroll","displayHorizontalScroll","translateZ","useAutoZoom","wheelPinchKey","zoomRange","zoomRangeX","zoomRangeY","pinchDirection","useOverflowScroll","preventWheelClick","useWheelPinch","useWheelScroll","useGesture","cspNonce","wrapperElement","scrollAreaElement","verticalScrollElement","horizontalScrollElement","useResizeObserver","wheelContainer","useBounceScrollBar"]; 4 | export const ANGULAR_INFINITE_VIEWER_OUTPUTS: ["scroll","abortPinch","dragStart","dragEnd","pinchStart","pinch"] = ["scroll","abortPinch","dragStart","dragEnd","pinchStart","pinch"]; 5 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/rollup.config.js: -------------------------------------------------------------------------------- 1 | import builder from "@daybrush/builder"; 2 | const preact = require("rollup-plugin-preact"); 3 | 4 | 5 | const defaultOptions = { 6 | tsconfig: "tsconfig.build.json", 7 | external: { 8 | "@daybrush/utils": "utils", 9 | "gesto": "Gesto", 10 | "preact": "Preact", 11 | "preact/compat": "preact/compat", 12 | "preact-compat": "preact-compat", 13 | "css-styled": "css-styled", 14 | "preact-ruler": "preact-ruler", 15 | "framework-utils": "framework-utils", 16 | "infinite-viewer": "infinite-viewer", 17 | "@egjs/agent": "eg.Agent", 18 | "@egjs/children-differ": "eg.ChildrenDiffer", 19 | }, 20 | exports: "named", 21 | plugins: [ 22 | preact({ 23 | noPropTypes: false, 24 | noEnv: false, 25 | noReactIs: false, 26 | usePreactX: true, 27 | aliasModules: { 28 | "react-ruler": "preact-ruler", 29 | }, 30 | }), 31 | ], 32 | sourcemap: false, 33 | }; 34 | 35 | export default builder([ 36 | { 37 | ...defaultOptions, 38 | input: "src/preact-infinite-viewer/index.esm.ts", 39 | output: "./dist/infinite-viewer.esm.js", 40 | format: "es", 41 | }, 42 | { 43 | ...defaultOptions, 44 | input: "src/preact-infinite-viewer/index.umd.ts", 45 | output: "./dist/infinite-viewer.cjs.js", 46 | format: "cjs", 47 | exports: "default", 48 | }, 49 | ]); 50 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, './coverage/ngx-infinite-viewer-project'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, '../../coverage/ngx-infinite-viewer'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /packages/infinite-viewer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "infinite-viewer", 3 | "version": "0.29.1", 4 | "description": "Infinite Viewer is Document Viewer Component with infinite scrolling up, down, left and right.", 5 | "main": "./dist/infinite-viewer.cjs.js", 6 | "module": "./dist/infinite-viewer.esm.js", 7 | "sideEffects": false, 8 | "types": "declaration/index.d.ts", 9 | "scripts": { 10 | "start": "rollup -c -w", 11 | "build": "rollup -c && npm run declaration && print-sizes ./dist", 12 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/daybrush/infinite-viewer.git" 17 | }, 18 | "keywords": [ 19 | "scroll", 20 | "scroller", 21 | "viewer", 22 | "infinite", 23 | "moveable" 24 | ], 25 | "author": "Daybrush", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/daybrush/infinite-viewer/issues" 29 | }, 30 | "homepage": "https://github.com/daybrush/infinite-viewer#readme", 31 | "files": [ 32 | "./*", 33 | "dist/*" 34 | ], 35 | "dependencies": { 36 | "@daybrush/utils": "^1.13.0", 37 | "@egjs/agent": "^2.2.1", 38 | "@scena/event-emitter": "^1.0.5", 39 | "css-styled": "^1.0.8", 40 | "framework-utils": "^1.1.0", 41 | "gesto": "^1.19.1" 42 | }, 43 | "devDependencies": { 44 | "@daybrush/builder": "^0.1.2", 45 | "@daybrush/release": "^0.2.4", 46 | "print-sizes": "^0.2.0", 47 | "tslib": "^2.4.0", 48 | "typescript": "^4.5.0 <4.6.0" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | React App 23 | 24 | 25 | 26 |
27 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-infinite-viewer", 3 | "version": "0.17.1", 4 | "description": "Vue 3 Infinite Viewer is Document Viewer Component with infinite scrolling.", 5 | "types": "declaration/index.d.ts", 6 | "main": "dist/infinite-viewer.cjs.js", 7 | "module": "dist/infinite-viewer.esm.js", 8 | "sideEffects": false, 9 | "scripts": { 10 | "serve": "vue-cli-service serve demo", 11 | "build": "rm -rf dist && rollup -c && npm run declaration", 12 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json && cp ./src/InfiniteViewer.vue.d.ts ./declaration", 13 | "lint": "vue-cli-service lint --no-fix" 14 | }, 15 | "keywords": [ 16 | "scroll", 17 | "scroller", 18 | "viewer", 19 | "infinite", 20 | "moveable", 21 | "vue" 22 | ], 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/daybrush/infinite-viewer/blob/master/packages/vue-infinite-viewer" 26 | }, 27 | "author": "Daybrush", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/daybrush/infinite-viewer/issues" 31 | }, 32 | "files": [ 33 | "./*", 34 | "dist/*" 35 | ], 36 | "homepage": "https://daybrush.com/infinite-viewer", 37 | "dependencies": { 38 | "infinite-viewer": "~0.29.1" 39 | }, 40 | "devDependencies": { 41 | "@daybrush/builder": "^0.1.2", 42 | "@vue/cli-plugin-typescript": "~4.5.0", 43 | "@vue/cli-service": "~4.5.0", 44 | "@vue/compiler-sfc": "^3.0.0", 45 | "rollup-plugin-vue": "^6.0.0", 46 | "tslib": "^2.3.1", 47 | "typescript": "^4.5.0 <4.6.0", 48 | "vue": "^3.1.1" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-infinite-viewer", 3 | "version": "0.27.1", 4 | "description": "Vue Infinite Viewer is Document Viewer Component with infinite scrolling.", 5 | "types": "declaration/index.d.ts", 6 | "main": "dist/infinite-viewer.cjs.js", 7 | "module": "dist/infinite-viewer.esm.js", 8 | "sideEffects": false, 9 | "scripts": { 10 | "serve": "vue-cli-service serve demo", 11 | "build": "rm -rf dist && rollup -c && npm run declaration", 12 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json && cp ./src/InfiniteViewer.vue.d.ts ./declaration", 13 | "lint": "vue-cli-service lint --no-fix" 14 | }, 15 | "keywords": [ 16 | "scroll", 17 | "scroller", 18 | "viewer", 19 | "infinite", 20 | "moveable", 21 | "vue" 22 | ], 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/daybrush/infinite-viewer/blob/master/packages/vue-infinite-viewer" 26 | }, 27 | "author": "Daybrush", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/daybrush/infinite-viewer/issues" 31 | }, 32 | "files": [ 33 | "./*", 34 | "dist/*" 35 | ], 36 | "homepage": "https://daybrush.com/infinite-viewer", 37 | "dependencies": { 38 | "infinite-viewer": "~0.29.1" 39 | }, 40 | "devDependencies": { 41 | "@daybrush/builder": "^0.1.2", 42 | "@vue/cli-plugin-typescript": "^3.12.0", 43 | "@vue/cli-service": "^3.12.0", 44 | "rollup-plugin-vue": "^5.1.9", 45 | "typescript": "^4.5.0 <4.6.0", 46 | "vue": "^2.6.11", 47 | "vue-selecto": "^0.1.1", 48 | "vue-template-compiler": "^2.6.11" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-infinite-viewer", 3 | "version": "0.27.1", 4 | "description": "Svelte Infinite Viewer is Document Viewer Component with infinite scrolling.", 5 | "main": "./dist/infinite-viewer.cjs.js", 6 | "module": "./dist/infinite-viewer.esm.js", 7 | "svelte": "./src/svelte-infinite-viewer/index.js", 8 | "types": "./src/svelte-infinite-viewer/index.d.ts", 9 | "sideEffects": false, 10 | "scripts": { 11 | "build": "rollup -c rollup.build.config.js && print-sizes ./dist", 12 | "dev": "rollup -c -w", 13 | "start": "sirv public", 14 | "build:dev": "rollup -c" 15 | }, 16 | "keywords": [ 17 | "scroll", 18 | "scroller", 19 | "viewer", 20 | "infinite", 21 | "moveable", 22 | "svelte" 23 | ], 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/daybrush/infinite-viewer/blob/master/packages/svelte-infinite-viewer" 27 | }, 28 | "author": "Daybrush", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/daybrush/infinite-viewer/issues" 32 | }, 33 | "files": [ 34 | "./*", 35 | "dist/*" 36 | ], 37 | "homepage": "https://daybrush.com/infinite-viewer", 38 | "devDependencies": { 39 | "@daybrush/builder": "^0.1.2", 40 | "@pyoner/svelte-ts-preprocess": "^1.2.1", 41 | "rollup": "^1.12.0", 42 | "rollup-plugin-commonjs": "^10.0.0", 43 | "rollup-plugin-livereload": "^1.0.4", 44 | "rollup-plugin-node-resolve": "^5.2.0", 45 | "rollup-plugin-svelte": "^7.1.0", 46 | "rollup-plugin-terser": "^5.2.0", 47 | "sirv-cli": "^0.4.4", 48 | "svelte": "^3.16.4", 49 | "svelte-preprocess": "^3.2.2", 50 | "tslib": "^1.10.0", 51 | "typescript": "^4.5.0 <4.6.0" 52 | }, 53 | "dependencies": { 54 | "infinite-viewer": "~0.29.1" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/App.css: -------------------------------------------------------------------------------- 1 | .infinite-react { 2 | width: 100vw; 3 | height: 100vh; 4 | } 5 | 6 | .wrap { 7 | width: 100%; 8 | height: 100%; 9 | } 10 | 11 | :root { 12 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 13 | font-size: 16px; 14 | line-height: 24px; 15 | font-weight: 400; 16 | 17 | color-scheme: light dark; 18 | color: rgba(255, 255, 255, 0.87); 19 | background-color: #242424; 20 | 21 | font-synthesis: none; 22 | text-rendering: optimizeLegibility; 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | -webkit-text-size-adjust: 100%; 26 | } 27 | 28 | a { 29 | font-weight: 500; 30 | color: #646cff; 31 | text-decoration: inherit; 32 | } 33 | a:hover { 34 | color: #535bf2; 35 | } 36 | 37 | body { 38 | margin: 0; 39 | display: flex; 40 | place-items: center; 41 | min-width: 320px; 42 | min-height: 100vh; 43 | } 44 | 45 | h1 { 46 | font-size: 3.2em; 47 | line-height: 1.1; 48 | } 49 | 50 | button { 51 | border-radius: 8px; 52 | border: 1px solid transparent; 53 | padding: 0.6em 1.2em; 54 | font-size: 1em; 55 | font-weight: 500; 56 | font-family: inherit; 57 | background-color: #1a1a1a; 58 | cursor: pointer; 59 | transition: border-color 0.25s; 60 | } 61 | button:hover { 62 | border-color: #646cff; 63 | } 64 | button:focus, 65 | button:focus-visible { 66 | outline: 4px auto -webkit-focus-ring-color; 67 | } 68 | 69 | @media (prefers-color-scheme: light) { 70 | :root { 71 | color: #213547; 72 | background-color: #ffffff; 73 | } 74 | a:hover { 75 | color: #747bff; 76 | } 77 | button { 78 | background-color: #f9f9f9; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "preact-infinite-viewer", 3 | "version": "0.25.1", 4 | "description": "Preact Infinite Viewer is Document Viewer Component with infinite scrolling.", 5 | "main": "./dist/infinite-viewer.cjs.js", 6 | "module": "./dist/infinite-viewer.esm.js", 7 | "sideEffects": false, 8 | "types": "declaration/index.d.ts", 9 | "scripts": { 10 | "lint": "tslint -c tslint.json 'src/**/*.ts'", 11 | "start": "open ./demo/index.html && rollup -c rollup.config.demo.js -w", 12 | "build": "rollup -c && npm run declaration && print-sizes ./dist ", 13 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json && npm run declaration:cp", 14 | "declaration:cp": "cp src/preact-infinite-viewer/InfiniteViewer.d.ts declaration/InfiniteViewer.d.ts" 15 | }, 16 | "keywords": [ 17 | "scroll", 18 | "scroller", 19 | "viewer", 20 | "infinite", 21 | "moveable", 22 | "preact" 23 | ], 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/daybrush/infinite-viewer/blob/master/packages/preact-infinite-viewer" 27 | }, 28 | "author": "Daybrush", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/daybrush/infinite-viewer/issues" 32 | }, 33 | "homepage": "https://daybrush.com/infinite-viewer", 34 | "devDependencies": { 35 | "@daybrush/builder": "^0.1.2", 36 | "preact": "^10.1.1", 37 | "print-sizes": "^0.1.0", 38 | "rollup-plugin-css-bundle": "^1.0.4", 39 | "rollup-plugin-preact": "^0.5.2", 40 | "typescript": "^4.5.0 <4.6.0" 41 | }, 42 | "dependencies": { 43 | "react-infinite-viewer": "~0.28.1" 44 | }, 45 | "files": [ 46 | "./*", 47 | "dist/*" 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import commonjs from 'rollup-plugin-commonjs'; 4 | import livereload from 'rollup-plugin-livereload'; 5 | import { terser } from 'rollup-plugin-terser'; 6 | 7 | const production = !process.env.ROLLUP_WATCH; 8 | 9 | export default { 10 | input: 'src/main.js', 11 | output: { 12 | sourcemap: true, 13 | format: 'iife', 14 | name: 'app', 15 | file: 'public/build/bundle.js' 16 | }, 17 | plugins: [ 18 | svelte({ 19 | // enable run-time checks when not in production 20 | dev: !production, 21 | // we'll extract any component CSS out into 22 | // a separate file — better for performance 23 | css: css => { 24 | css.write('public/build/bundle.css'); 25 | } 26 | }), 27 | 28 | // If you have external dependencies installed from 29 | // npm, you'll most likely need these plugins. In 30 | // some cases you'll need additional configuration — 31 | // consult the documentation for details: 32 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 33 | resolve({ 34 | browser: true, 35 | dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/') 36 | }), 37 | commonjs(), 38 | 39 | // In dev mode, call `npm run start` once 40 | // the bundle has been generated 41 | !production && serve(), 42 | 43 | // Watch the `public` directory and refresh the 44 | // browser on changes when not in production 45 | !production && livereload('public'), 46 | 47 | // If we're building for production (npm run build 48 | // instead of npm run dev), minify 49 | production && terser() 50 | ], 51 | watch: { 52 | clearScreen: false 53 | } 54 | }; 55 | 56 | function serve() { 57 | let started = false; 58 | 59 | return { 60 | writeBundle() { 61 | if (!started) { 62 | started = true; 63 | 64 | require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 65 | stdio: ['ignore', 'inherit', 'inherit'], 66 | shell: true 67 | }); 68 | } 69 | } 70 | }; 71 | } 72 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-infinite-viewer", 3 | "version": "0.28.1", 4 | "description": "React Infinite Viewer is Document Viewer Component with infinite scrolling.", 5 | "main": "./dist/infinite-viewer.cjs.js", 6 | "module": "./dist/infinite-viewer.esm.js", 7 | "sideEffects": false, 8 | "types": "declaration/index.d.ts", 9 | "scripts": { 10 | "lint": "tslint -c tslint.json 'src/react-infinite-viewer/**/*.ts' 'src/react-infinite-viewer/**/*.tsx'", 11 | "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start", 12 | "build": "rollup -c && npm run declaration && print-sizes ./dist ", 13 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json", 14 | "packages": "pvu --path=../ --update=preact-infinite-viewer --build=preact-infinite-viewer --publish=preact-infinite-viewer" 15 | }, 16 | "keywords": [ 17 | "infinite-viewer", 18 | "scroll", 19 | "scroller", 20 | "viewer", 21 | "infinite", 22 | "moveable", 23 | "react" 24 | ], 25 | "files": [ 26 | "./*", 27 | "dist/*" 28 | ], 29 | "repository": { 30 | "type": "git", 31 | "url": "https://github.com/daybrush/infinite-viewer/blob/master/packages/react-infinite-viewer" 32 | }, 33 | "author": "Daybrush", 34 | "license": "MIT", 35 | "bugs": { 36 | "url": "https://github.com/daybrush/infinite-viewer/issues" 37 | }, 38 | "homepage": "https://daybrush.com/infinite-viewer", 39 | "devDependencies": { 40 | "@daybrush/builder": "^0.1.2", 41 | "@types/react-dom": "^16.9.4", 42 | "print-sizes": "0.0.4", 43 | "react": "^16.8.6", 44 | "react-dom": "^16.8.6", 45 | "react-scripts": "^3.0.1", 46 | "tslint": "^5.16.0", 47 | "typescript": "^4.5.0 <4.6.0" 48 | }, 49 | "dependencies": { 50 | "infinite-viewer": "~0.29.1" 51 | }, 52 | "browserslist": { 53 | "production": [ 54 | ">0.2%", 55 | "not dead", 56 | "not op_mini all" 57 | ], 58 | "development": [ 59 | "last 1 chrome version", 60 | "last 1 firefox version", 61 | "last 1 safari version" 62 | ] 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/src/svelte-infinite-viewer/InfiniteViewer.svelte: -------------------------------------------------------------------------------- 1 | 77 |
78 |
79 |
80 | 81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including 12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** 22 | * By default, zone.js will patch all possible macroTask and DomEvents 23 | * user can disable parts of macroTask/DomEvents patch by setting following flags 24 | * because those flags need to be set before `zone.js` being loaded, and webpack 25 | * will put import in the top of bundle, so user need to create a separate file 26 | * in this directory (for example: zone-flags.ts), and put the following flags 27 | * into that file, and then add the following code before importing zone.js. 28 | * import './zone-flags'; 29 | * 30 | * The flags allowed in zone-flags.ts are listed here. 31 | * 32 | * The following flags will work for all browsers. 33 | * 34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 37 | * 38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 40 | * 41 | * (window as any).__Zone_enable_cross_context_check = true; 42 | * 43 | */ 44 | 45 | /*************************************************************************************************** 46 | * Zone JS is required by default for Angular itself. 47 | */ 48 | import 'zone.js'; // Included with Angular CLI. 49 | 50 | 51 | /*************************************************************************************************** 52 | * APPLICATION IMPORTS 53 | */ 54 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/demo/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/src/InfiniteViewer.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/src/InfiniteViewer.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /packages/infinite-viewer/src/utils.ts: -------------------------------------------------------------------------------- 1 | import { OnDrag } from "gesto"; 2 | import { TINY_NUM } from "./consts"; 3 | import { AnimationOptions } from "./types"; 4 | 5 | export function measureSpeed(e: OnDrag) { 6 | const { deltaX, deltaY, datas } = e; 7 | const time = Date.now(); 8 | const prevSpeed = datas.speed; 9 | 10 | if (!prevSpeed) { 11 | datas.speed = [0, 0]; 12 | datas.time = time; 13 | return; 14 | } 15 | const dt = time - datas.time; 16 | datas.speed = [prevSpeed[0] / 2 + deltaX / dt, prevSpeed[1] / 2 + deltaY / dt]; 17 | } 18 | 19 | export function getDuration(speed: number[], a: number) { 20 | const normalSpeed = Math.sqrt(speed[0] * speed[0] + speed[1] * speed[1]); 21 | 22 | return Math.abs(normalSpeed / a); 23 | } 24 | export function getDestPos(speed: number[], a: number) { 25 | const duration = getDuration(speed, a); 26 | 27 | return [ 28 | -speed[0] / 2 * duration, 29 | -speed[1] / 2 * duration, 30 | ]; 31 | } 32 | export function minmax(value: number, min: number, max: number) { 33 | return Math.min(max, Math.max(min, value)); 34 | } 35 | 36 | export function abs(v: number) { 37 | return Math.abs(v); 38 | } 39 | 40 | export function getRange( 41 | pos: number, 42 | margin: number, 43 | range: number[], 44 | threshold: number, 45 | isReal: boolean, 46 | ) { 47 | const min = isReal || isFinite(range[0]) 48 | ? range[0] 49 | : Math.min(-1, Math.floor(pos / margin)) * margin - threshold; 50 | const max = isReal || isFinite(range[1]) 51 | ? range[1] 52 | : Math.max(1, Math.ceil(pos / margin)) * margin + threshold; 53 | 54 | return [min, max]; 55 | } 56 | 57 | export function throttle(value: number) { 58 | return Math.round(value / TINY_NUM) * TINY_NUM; 59 | } 60 | 61 | 62 | export function checkDefault(value: T | undefined | null, defaultValue: T): T { 63 | return value != null ? value : defaultValue; 64 | } 65 | 66 | 67 | 68 | export function startAnimation( 69 | callback: (ratioDist: number) => void, 70 | timerCallback: (next: () => void) => void, 71 | options: AnimationOptions, 72 | ) { 73 | const duration = options.duration; 74 | const easing = options.easing || ((x: number) => 1 - Math.pow(1 - x, 3)); 75 | const startTime = Date.now(); 76 | let prevTime = startTime; 77 | 78 | const next = () => { 79 | const now = Date.now(); 80 | let t = now - startTime; 81 | 82 | if (duration < t) { 83 | t = duration; 84 | } 85 | const ratio = easing(t / duration); 86 | const prevRatio = easing((prevTime - startTime) / duration); 87 | 88 | prevTime = now; 89 | 90 | callback(ratio - prevRatio); 91 | 92 | if (t >= duration) { 93 | return; 94 | } 95 | timerCallback(next); 96 | }; 97 | timerCallback(next); 98 | } 99 | -------------------------------------------------------------------------------- /packages/lit-infinite-viewer/src/LitInfiniteViewer.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit"; 2 | import {customElement, property} from 'lit/decorators.js'; 3 | import VanillaInfiniteViewer, { 4 | InfiniteViewerOptions, 5 | EVENTS, PROPERTIES, InfiniteViewerMethods, METHODS, OPTIONS 6 | } from "infinite-viewer"; 7 | import { Properties, withMethods, MethodInterface } from "framework-utils"; 8 | import { camelize } from "@daybrush/utils"; 9 | 10 | @Properties(PROPERTIES as any, (prototype, name) => { 11 | property({ type: Object })(prototype, name); 12 | }) 13 | @customElement("lit-infinite-viewer") 14 | export class LitInfiniteViewer extends LitElement { 15 | @withMethods(METHODS as any, { 16 | click: "clickViewer", 17 | scrollTo: "scrollToViewer", 18 | scrollBy: "scrollByViewer", 19 | }) 20 | private infiniteViewer!: VanillaInfiniteViewer; 21 | public firstUpdated() { 22 | const options: Partial = {}; 23 | 24 | OPTIONS.forEach(name => { 25 | if (typeof this[name] !== "undefined") { 26 | options[name as any] = this[name]; 27 | } 28 | }); 29 | const viewport = this.children[0] as HTMLElement; 30 | 31 | this.infiniteViewer = new VanillaInfiniteViewer( 32 | this, 33 | viewport, 34 | { 35 | ...options, 36 | }, 37 | ); 38 | 39 | const infiniteViewer = this.infiniteViewer; 40 | 41 | EVENTS.forEach((name, i) => { 42 | infiniteViewer.on(name, e => { 43 | const result = this.dispatchEvent(new CustomEvent(camelize(`lit ${name}`), { 44 | detail: { ...e }, 45 | })); 46 | 47 | if (result === false) { 48 | (e as any).stop(); 49 | } 50 | }); 51 | }); 52 | } 53 | public render() { 54 | return html`
55 |
56 | 57 |
58 |
59 |
60 |
61 |
62 |
63 |
`; 64 | } 65 | public updated(changedProperties) { 66 | const infiniteViewer = this.infiniteViewer; 67 | changedProperties.forEach((oldValue, propName) => { 68 | if (PROPERTIES.indexOf(propName)) { 69 | infiniteViewer[propName] = this[propName]; 70 | } 71 | }); 72 | } 73 | public disconnectedCallback() { 74 | super.disconnectedCallback(); 75 | this.infiniteViewer.destroy(); 76 | } 77 | } 78 | export interface LitInfiniteViewer extends InfiniteViewerOptions, 79 | MethodInterface { } 84 | 85 | declare global { 86 | interface HTMLElementTagNameMap { 87 | "lit-infinite-viewer": LitInfiniteViewer; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/src/lib/ngx-infinite-viewer.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, ElementRef, 3 | AfterViewInit, OnDestroy, OnChanges, SimpleChanges, ViewChild, Input, Output, OnInit, EventEmitter, 4 | } from '@angular/core'; 5 | import VanillaInfiniteViewer, { 6 | PROPERTIES, EVENTS, InfiniteViewerProperties, InfiniteViewerOptions, OPTIONS, 7 | } from 'infinite-viewer'; 8 | import { NgxInfiniteViewerInterface } from './ngx-infinite-viewer.interface'; 9 | import { ANGULAR_INFINITE_VIEWER_INPUTS, ANGULAR_INFINITE_VIEWER_OUTPUTS } from './consts'; 10 | 11 | 12 | @Component({ 13 | selector: 'ngx-infinite-viewer, [NgxInfiniteViewer]', 14 | template: ` 15 |
16 |
17 | 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | `, 27 | styles: [], 28 | inputs: ANGULAR_INFINITE_VIEWER_INPUTS, 29 | outputs: ANGULAR_INFINITE_VIEWER_OUTPUTS, 30 | }) 31 | export class NgxInfiniteViewerComponent 32 | extends NgxInfiniteViewerInterface 33 | implements OnDestroy, AfterViewInit, OnChanges, InfiniteViewerOptions { 34 | @ViewChild('scrollAreaElement', { static: false }) scrollAreaElementRef!: ElementRef; 35 | @ViewChild('wrapperElement', { static: false }) wrapperElementRef!: ElementRef; 36 | @ViewChild('horizontalScrollElement', { static: false }) horizontalScrollElementRef!: ElementRef; 37 | @ViewChild('verticalScrollElement', { static: false }) verticalScrollElementRef!: ElementRef; 38 | 39 | constructor(public containerElementRef: ElementRef) { 40 | super(); 41 | EVENTS.forEach(name => { 42 | (this as any)[name] = new EventEmitter(); 43 | }); 44 | } 45 | 46 | ngAfterViewInit(): void { 47 | const options: Partial = {}; 48 | OPTIONS.forEach((name) => { 49 | if (name in this && typeof this[name] !== 'undefined') { 50 | (options as any)[name] = this[name]; 51 | } 52 | }); 53 | this.infiniteViewer = new VanillaInfiniteViewer( 54 | this.containerElementRef.nativeElement, 55 | this.scrollAreaElementRef.nativeElement.nextElementSibling as HTMLElement, 56 | { 57 | ...options, 58 | wrapperElement: this.wrapperElementRef.nativeElement, 59 | scrollAreaElement: this.scrollAreaElementRef.nativeElement, 60 | horizontalScrollElement: this.horizontalScrollElementRef.nativeElement, 61 | verticalScrollElement: this.verticalScrollElementRef.nativeElement, 62 | }, 63 | ); 64 | 65 | 66 | const infiniteViewer = this.infiniteViewer; 67 | 68 | EVENTS.forEach(name => { 69 | infiniteViewer.on(name, e => { 70 | this[name].emit(e as any); 71 | }); 72 | }); 73 | } 74 | ngOnChanges(changes: SimpleChanges): void { 75 | const infiniteViewer = this.infiniteViewer; 76 | 77 | if (!infiniteViewer) { 78 | return; 79 | } 80 | for (const name in changes) { 81 | if (PROPERTIES.indexOf(name as any) < -1) { 82 | continue; 83 | } 84 | const { previousValue, currentValue } = changes[name]; 85 | 86 | if (previousValue === currentValue) { 87 | continue; 88 | } 89 | (infiniteViewer as any)[name] = currentValue; 90 | } 91 | } 92 | ngOnDestroy() { 93 | this.infiniteViewer.destroy(); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/react-infinite-viewer/InfiniteViewer.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import VanillaInfiniteViewer, { 3 | CLASS_NAME, 4 | OPTIONS, 5 | InfiniteViewerOptions, 6 | PROPERTIES, 7 | InfiniteViewerProperties, 8 | EVENTS, 9 | InfiniteViewerMethods, 10 | METHODS, 11 | } from "infinite-viewer"; 12 | import { ref, MethodInterface, withMethods } from "framework-utils"; 13 | import { InfiniteViewerProps } from "./types"; 14 | import { REACT_EVENTS } from "./consts"; 15 | 16 | export default class InfiniteViewer extends React.PureComponent> { 17 | @withMethods(METHODS as any) 18 | private infiniteViewer!: VanillaInfiniteViewer; 19 | private containerElement!: HTMLElement; 20 | private wrapperElement!: HTMLElement; 21 | private scrollAreaElement!: HTMLElement; 22 | private horizontalScrollElement!: HTMLElement; 23 | private verticalScrollElement!: HTMLElement; 24 | public render() { 25 | const className = this.props.className; 26 | 27 | return
28 |
29 |
30 | {this.props.children} 31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
; 39 | } 40 | public componentDidMount() { 41 | const props = this.props; 42 | const options: Partial = {}; 43 | 44 | OPTIONS.forEach(name => { 45 | if (name in props && typeof props[name] !== "undefined") { 46 | (options as any)[name] = props[name]; 47 | } 48 | }); 49 | this.infiniteViewer = new VanillaInfiniteViewer( 50 | this.containerElement, 51 | this.scrollAreaElement.nextElementSibling as HTMLElement, 52 | { 53 | ...options, 54 | wrapperElement: this.wrapperElement, 55 | scrollAreaElement: this.scrollAreaElement, 56 | horizontalScrollElement: this.horizontalScrollElement, 57 | verticalScrollElement: this.verticalScrollElement, 58 | }, 59 | ); 60 | 61 | EVENTS.forEach((name, i) => { 62 | this.infiniteViewer.on(name, (e: any) => { 63 | const selfProps = this.props as any; 64 | const result = selfProps[REACT_EVENTS[i]] && selfProps[REACT_EVENTS[i]](e); 65 | 66 | if (result === false) { 67 | e.stop(); 68 | } 69 | }); 70 | }); 71 | } 72 | public componentDidUpdate(prevProps: Partial) { 73 | const props = this.props; 74 | const infiniteViewer = this.infiniteViewer; 75 | 76 | PROPERTIES.forEach(name => { 77 | if (name in props && infiniteViewer[name] !== props[name]) { 78 | (infiniteViewer as any)[name] = props[name]; 79 | } 80 | }); 81 | } 82 | public componentWillUnmount() { 83 | this.infiniteViewer.destroy(); 84 | } 85 | public getElement() { 86 | return this.containerElement; 87 | } 88 | } 89 | // tslint:disable-next-line: max-line-length 90 | export default interface InfiniteViewer extends MethodInterface {} 91 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "infinite-viewer-root", 3 | "private": true, 4 | "description": "Infinite Viewer is Document Viewer Component with infinite scrolling up, down, left and right.", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/daybrush/infinite-viewer.git" 8 | }, 9 | "keywords": [ 10 | "scroll", 11 | "scroller", 12 | "viewer", 13 | "infinite", 14 | "moveable" 15 | ], 16 | "author": "Daybrush", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/daybrush/infinite-viewer/issues" 20 | }, 21 | "homepage": "https://github.com/daybrush/infinite-viewer#readme", 22 | "scripts": { 23 | "build": "npm run build --prefix ./packages/infinite-viewer", 24 | "packages:update": "lerna-helper version && npm run update-type-consts", 25 | "update-type-consts": "node ./config/update-type-consts.js", 26 | "packages:build": "npm run build --prefix packages/infinite-viewer && npm run update-type-consts && lerna run build --ignore ngx-infinite-viewer --ignore infinite-viewer", 27 | "packages:publish": "lerna-helper publish --ignore ngx-infinite-viewer --commit 'chore: publish packages'", 28 | "demo:build": "npm run packages:build && npm run doc", 29 | "changelog": "lerna-helper changelog --type all --base infinite-viewer", 30 | "changelog:root": "lerna-helper changelog --type root --base infinite-viewer", 31 | "doc": "rm -rf ./doc && jsdoc -c jsdoc.json", 32 | "predeploy": "lerna-helper deploy --base infinite-viewer --pre", 33 | "deploy": "lerna-helper deploy --base infinite-viewer", 34 | "release": "lerna-helper release --base infinite-viewer" 35 | }, 36 | "devDependencies": { 37 | "@daybrush/jsdoc": "^0.4.5", 38 | "@daybrush/release": "^0.7.0", 39 | "cpx": "1.5.0", 40 | "daybrush-jsdoc-template": "^1.9.0", 41 | "gh-pages": "^2.0.1", 42 | "intercept-stdout": "0.1.2", 43 | "lerna": "^4.0.0", 44 | "lerna-changelog": "2.2.0", 45 | "typescript": "^4.5.0 <4.6.0" 46 | }, 47 | "workspaces": { 48 | "nohoist": [ 49 | "**/@daybrush/builder", 50 | "**/@daybrush/builder/**", 51 | "**/rollup-plugin-vue", 52 | "**/rollup-plugin-vue/**", 53 | "**/karma", 54 | "**/karma/**", 55 | "**/karma-*", 56 | "**/karma-*/**", 57 | "**/@tyoes/chai", 58 | "**/@tyoes/chai/**", 59 | "**/@types/karma-chai", 60 | "**/@types/karma-chai/**", 61 | "**/@types/mocha", 62 | "**/@types/mocha/**", 63 | "**/@vue/*", 64 | "**/@vue/*/**", 65 | "**/vue", 66 | "**/vue/**" 67 | ], 68 | "packages": [ 69 | "packages/*", 70 | "packages/ngx-infinite-viewer/projects/ngx-infinite-viewer" 71 | ] 72 | }, 73 | "resolutions": { 74 | "@daybrush/utils": "^1.7.1", 75 | "@types/react": "^16.9.17", 76 | "typescript": "^4.5.0 <4.6.0", 77 | "@egjs/agent": "^2.2.1", 78 | "@egjs/children-differ": "^1.0.1", 79 | "@scena/dragscroll": "^1.2.0", 80 | "@scena/matrix": "^1.1.1", 81 | "css-to-mat": "^1.0.3", 82 | "framework-utils": "^1.1.0", 83 | "gesto": "^1.12.2", 84 | "overlap-area": "^1.1.0", 85 | "tslib": "^2.3.0", 86 | "css-styled": "^1.0.7" 87 | }, 88 | "overrides": { 89 | "@daybrush/utils": "^1.7.1", 90 | "@types/react": "^16.9.17", 91 | "typescript": "^4.5.0 <4.6.0", 92 | "@egjs/agent": "^2.2.1", 93 | "@egjs/children-differ": "^1.0.1", 94 | "@scena/dragscroll": "^1.2.0", 95 | "@scena/matrix": "^1.1.1", 96 | "css-to-mat": "^1.0.3", 97 | "framework-utils": "^1.1.0", 98 | "gesto": "^1.12.2", 99 | "overlap-area": "^1.1.0", 100 | "tslib": "^2.3.0", 101 | "css-styled": "^1.0.7" 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "ngx-infinite-viewer-project": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:application": { 10 | "strict": true 11 | } 12 | }, 13 | "root": "", 14 | "sourceRoot": "src", 15 | "prefix": "app", 16 | "architect": { 17 | "build": { 18 | "builder": "@angular-devkit/build-angular:browser", 19 | "options": { 20 | "outputPath": "dist/ngx-infinite-viewer-project", 21 | "index": "src/index.html", 22 | "main": "src/main.ts", 23 | "polyfills": "src/polyfills.ts", 24 | "tsConfig": "tsconfig.app.json", 25 | "assets": [ 26 | "src/favicon.ico", 27 | "src/assets" 28 | ], 29 | "styles": [ 30 | "src/styles.css" 31 | ], 32 | "scripts": [] 33 | }, 34 | "configurations": { 35 | "production": { 36 | "budgets": [ 37 | { 38 | "type": "initial", 39 | "maximumWarning": "500kb", 40 | "maximumError": "1mb" 41 | }, 42 | { 43 | "type": "anyComponentStyle", 44 | "maximumWarning": "2kb", 45 | "maximumError": "4kb" 46 | } 47 | ], 48 | "fileReplacements": [ 49 | { 50 | "replace": "src/environments/environment.ts", 51 | "with": "src/environments/environment.prod.ts" 52 | } 53 | ], 54 | "outputHashing": "all" 55 | }, 56 | "development": { 57 | "buildOptimizer": false, 58 | "optimization": false, 59 | "vendorChunk": true, 60 | "extractLicenses": false, 61 | "sourceMap": true, 62 | "namedChunks": true 63 | } 64 | }, 65 | "defaultConfiguration": "production" 66 | }, 67 | "serve": { 68 | "builder": "@angular-devkit/build-angular:dev-server", 69 | "configurations": { 70 | "production": { 71 | "browserTarget": "ngx-infinite-viewer-project:build:production" 72 | }, 73 | "development": { 74 | "browserTarget": "ngx-infinite-viewer-project:build:development" 75 | } 76 | }, 77 | "defaultConfiguration": "development" 78 | }, 79 | "extract-i18n": { 80 | "builder": "@angular-devkit/build-angular:extract-i18n", 81 | "options": { 82 | "browserTarget": "ngx-infinite-viewer-project:build" 83 | } 84 | }, 85 | "test": { 86 | "builder": "@angular-devkit/build-angular:karma", 87 | "options": { 88 | "main": "src/test.ts", 89 | "polyfills": "src/polyfills.ts", 90 | "tsConfig": "tsconfig.spec.json", 91 | "karmaConfig": "karma.conf.js", 92 | "assets": [ 93 | "src/favicon.ico", 94 | "src/assets" 95 | ], 96 | "styles": [ 97 | "src/styles.css" 98 | ], 99 | "scripts": [] 100 | } 101 | } 102 | } 103 | }, 104 | "ngx-infinite-viewer": { 105 | "projectType": "library", 106 | "root": "projects/ngx-infinite-viewer", 107 | "sourceRoot": "projects/ngx-infinite-viewer/src", 108 | "prefix": "lib", 109 | "architect": { 110 | "build": { 111 | "builder": "@angular-devkit/build-angular:ng-packagr", 112 | "options": { 113 | "project": "projects/ngx-infinite-viewer/ng-package.json" 114 | }, 115 | "configurations": { 116 | "production": { 117 | "tsConfig": "projects/ngx-infinite-viewer/tsconfig.lib.prod.json" 118 | }, 119 | "development": { 120 | "tsConfig": "projects/ngx-infinite-viewer/tsconfig.lib.json" 121 | } 122 | }, 123 | "defaultConfiguration": "production" 124 | }, 125 | "test": { 126 | "builder": "@angular-devkit/build-angular:karma", 127 | "options": { 128 | "main": "projects/ngx-infinite-viewer/src/test.ts", 129 | "tsConfig": "projects/ngx-infinite-viewer/tsconfig.spec.json", 130 | "karmaConfig": "projects/ngx-infinite-viewer/karma.conf.js" 131 | } 132 | } 133 | } 134 | } 135 | }, 136 | "defaultProject": "ngx-infinite-viewer-project" 137 | } 138 | -------------------------------------------------------------------------------- /packages/vue-infinite-viewer/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

Vue Infinite Viewer

4 |

5 | npm version 6 | 7 | 8 | React 9 | Preact 10 | Angular 11 | Vue 14 | Svelte 17 | Lit 20 |

21 |

Vue Infinite Viewer is Document Viewer Component with infinite scrolling. 22 |

23 | 24 |

25 | Demo / 26 | API / 27 | Main Project 28 |

29 | 30 | ## ⚙️ Installation 31 | ### npm 32 | ```bash 33 | $ npm install vue-infinite-viewer 34 | ``` 35 | 36 | ## 🚀 How to use 37 | 38 | ```html 39 | 44 | 53 | ``` 54 | 55 | 56 | ## ⚙️ Developments 57 | ### `npm run dev` 58 | 59 | Compiles and hot-reloads for development 60 | 61 | 62 | ## ⭐️ Show Your Support 63 | Please give a ⭐️ if this project helped you! 64 | 65 | ## 👏 Contributing 66 | 67 | If you have any questions or requests or want to contribute to `infinite-viewer` or other packages, please write the [issue](https://github.com/daybrush/infinite-viewer/issues) or give me a Pull Request freely. 68 | 69 | ## 🐞 Bug Report 70 | 71 | If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/infinite-viewer/issues) on GitHub. 72 | 73 | 74 | ## 📝 License 75 | 76 | This project is [MIT](https://github.com/daybrush/infinite-viewer/blob/master/LICENSE) licensed. 77 | 78 | ``` 79 | MIT License 80 | 81 | Copyright (c) 2020 Daybrush 82 | 83 | Permission is hereby granted, free of charge, to any person obtaining a copy 84 | of this software and associated documentation files (the "Software"), to deal 85 | in the Software without restriction, including without limitation the rights 86 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 87 | copies of the Software, and to permit persons to whom the Software is 88 | furnished to do so, subject to the following conditions: 89 | 90 | The above copyright notice and this permission notice shall be included in all 91 | copies or substantial portions of the Software. 92 | 93 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 94 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 95 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 96 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 97 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 98 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 99 | SOFTWARE. 100 | ``` 101 | -------------------------------------------------------------------------------- /packages/vue3-infinite-viewer/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

Vue 3 Infinite Viewer

4 |

5 | npm version 6 | 7 | 8 | React 9 | Preact 10 | Angular 11 | Vue 14 | Svelte 17 | Lit 20 |

21 |

Vue Infinite Viewer is Document Viewer Component with infinite scrolling. 22 |

23 | 24 |

25 | Demo / 26 | API / 27 | Main Project 28 |

29 | 30 | ## ⚙️ Installation 31 | ### npm 32 | ```bash 33 | $ npm install vue3-infinite-viewer 34 | ``` 35 | 36 | ## 🚀 How to use 37 | 38 | ```html 39 | 44 | 53 | ``` 54 | 55 | 56 | ## ⚙️ Developments 57 | ### `npm run dev` 58 | 59 | Compiles and hot-reloads for development 60 | 61 | 62 | ## ⭐️ Show Your Support 63 | Please give a ⭐️ if this project helped you! 64 | 65 | ## 👏 Contributing 66 | 67 | If you have any questions or requests or want to contribute to `infinite-viewer` or other packages, please write the [issue](https://github.com/daybrush/infinite-viewer/issues) or give me a Pull Request freely. 68 | 69 | ## 🐞 Bug Report 70 | 71 | If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/infinite-viewer/issues) on GitHub. 72 | 73 | 74 | ## 📝 License 75 | 76 | This project is [MIT](https://github.com/daybrush/infinite-viewer/blob/master/LICENSE) licensed. 77 | 78 | ``` 79 | MIT License 80 | 81 | Copyright (c) 2020 Daybrush 82 | 83 | Permission is hereby granted, free of charge, to any person obtaining a copy 84 | of this software and associated documentation files (the "Software"), to deal 85 | in the Software without restriction, including without limitation the rights 86 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 87 | copies of the Software, and to permit persons to whom the Software is 88 | furnished to do so, subject to the following conditions: 89 | 90 | The above copyright notice and this permission notice shall be included in all 91 | copies or substantial portions of the Software. 92 | 93 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 94 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 95 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 96 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 97 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 98 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 99 | SOFTWARE. 100 | ``` 101 | -------------------------------------------------------------------------------- /packages/preact-infinite-viewer/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

Preact Infinite Viewer

4 |

5 | npm version 6 | 7 | 8 | React 9 | Preact 10 | Angular 11 | Vue 14 | Svelte 17 | Lit 20 |

21 |

Preact Infinite Viewer is Document Viewer Component with infinite scrolling. 22 |

23 | 24 |

25 | Demo / 26 | API / 27 | Main Project 28 |

29 | 30 | ## ⚙️ Installation 31 | ### npm 32 | ```bash 33 | $ npm install preact-infinite-viewer 34 | ``` 35 | 36 | ## 🚀 How to use 37 | 38 | ```jsx 39 | import InfiniteViewer from "preact-infinite-viewer"; 40 | 41 | { 48 | console.log(e); 49 | }} 50 | > 51 |
52 | Target 53 |
54 | 55 | ``` 56 | 57 | 58 | ## ⚙️ Developments 59 | ### `npm start` 60 | 61 | Open ./demo/index.html 62 | 63 | 64 | ## ⭐️ Show Your Support 65 | Please give a ⭐️ if this project helped you! 66 | 67 | ## 👏 Contributing 68 | 69 | If you have any questions or requests or want to contribute to `infinite-viewer` or other packages, please write the [issue](https://github.com/daybrush/infinite-viewer/issues) or give me a Pull Request freely. 70 | 71 | ## 🐞 Bug Report 72 | 73 | If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/infinite-viewer/issues) on GitHub. 74 | 75 | 76 | ## 📝 License 77 | 78 | This project is [MIT](https://github.com/daybrush/infinite-viewer/blob/master/LICENSE) licensed. 79 | 80 | ``` 81 | MIT License 82 | 83 | Copyright (c) 2020 Daybrush 84 | 85 | Permission is hereby granted, free of charge, to any person obtaining a copy 86 | of this software and associated documentation files (the "Software"), to deal 87 | in the Software without restriction, including without limitation the rights 88 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 89 | copies of the Software, and to permit persons to whom the Software is 90 | furnished to do so, subject to the following conditions: 91 | 92 | The above copyright notice and this permission notice shall be included in all 93 | copies or substantial portions of the Software. 94 | 95 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 96 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 97 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 98 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 99 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 100 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 101 | SOFTWARE. 102 | ``` -------------------------------------------------------------------------------- /packages/react-infinite-viewer/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

React Infinite Viewer

4 |

5 | npm version 6 | 7 | 8 | React 9 | Preact 10 | Angular 11 | Vue 14 | Svelte 17 | Lit 20 |

21 |

React Infinite Viewer is Document Viewer Component with infinite scrolling. 22 |

23 | 24 |

25 | Demo / 26 | API / 27 | Main Project 28 |

29 | 30 | ## ⚙️ Installation 31 | ### npm 32 | ```bash 33 | $ npm install react-infinite-viewer 34 | ``` 35 | 36 | ## 🚀 How to use 37 | 38 | ```jsx 39 | import InfiniteViewer from "react-infinite-viewer"; 40 | 41 | { 48 | console.log(e); 49 | }} 50 | > 51 |
52 | Target 53 |
54 | 55 | ``` 56 | 57 | 58 | ## ⚙️ Developments 59 | ### `npm start` 60 | 61 | Runs the app in the development mode.
62 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 63 | 64 | The page will reload if you make edits.
65 | You will also see any lint errors in the console. 66 | 67 | 68 | ## ⭐️ Show Your Support 69 | Please give a ⭐️ if this project helped you! 70 | 71 | ## 👏 Contributing 72 | 73 | If you have any questions or requests or want to contribute to `infinite-viewer` or other packages, please write the [issue](https://github.com/daybrush/infinite-viewer/issues) or give me a Pull Request freely. 74 | 75 | ## 🐞 Bug Report 76 | 77 | If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/infinite-viewer/issues) on GitHub. 78 | 79 | 80 | ## 📝 License 81 | 82 | This project is [MIT](https://github.com/daybrush/infinite-viewer/blob/master/LICENSE) licensed. 83 | 84 | ``` 85 | MIT License 86 | 87 | Copyright (c) 2020 Daybrush 88 | 89 | Permission is hereby granted, free of charge, to any person obtaining a copy 90 | of this software and associated documentation files (the "Software"), to deal 91 | in the Software without restriction, including without limitation the rights 92 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 93 | copies of the Software, and to permit persons to whom the Software is 94 | furnished to do so, subject to the following conditions: 95 | 96 | The above copyright notice and this permission notice shall be included in all 97 | copies or substantial portions of the Software. 98 | 99 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 100 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 101 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 102 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 103 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 104 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 105 | SOFTWARE. 106 | ``` -------------------------------------------------------------------------------- /packages/infinite-viewer/src/ScrollBar.ts: -------------------------------------------------------------------------------- 1 | import Gesto, { OnDrag, OnDragStart } from "gesto"; 2 | import { 3 | SCROLL_BAR_CLASS_NAME, SCROLL_THUMB_CLASS_NAME, 4 | HORIZONTAL_SCROLL_BAR_CLASS_NAME, VERTICAL_SCROLL_BAR_CLASS_NAME 5 | } from "./consts"; 6 | import { addClass, removeEvent, addEvent, throttle, getDocument, getWindow } from "@daybrush/utils"; 7 | import EventEmitter from "@scena/event-emitter"; 8 | import { abs } from "./utils"; 9 | 10 | export default class ScrollBar extends EventEmitter { 11 | public isAppend: boolean = false; 12 | public thumbElement!: HTMLElement; 13 | public barElement!: HTMLElement; 14 | protected gesto!: Gesto; 15 | protected size: number = 0; 16 | protected scrollSize: number = 0; 17 | protected isHorizontal = false; 18 | 19 | constructor( 20 | containerElement: HTMLElement, 21 | public type: "horizontal" | "vertical", 22 | container?: HTMLElement, 23 | ) { 24 | super(); 25 | const isHorizontal = type === "horizontal"; 26 | const doc = getDocument(containerElement); 27 | 28 | let thumbElement: HTMLElement; 29 | let barElement: HTMLElement = container; 30 | 31 | if (!container) { 32 | barElement = doc.createElement("div"); 33 | thumbElement = doc.createElement("div"); 34 | 35 | barElement.insertBefore(thumbElement, null); 36 | this.isAppend = true; 37 | } else { 38 | thumbElement = container.querySelector(`.${SCROLL_THUMB_CLASS_NAME}`); 39 | } 40 | addClass( 41 | barElement, 42 | isHorizontal ? HORIZONTAL_SCROLL_BAR_CLASS_NAME 43 | : VERTICAL_SCROLL_BAR_CLASS_NAME, 44 | ); 45 | addClass(barElement, SCROLL_BAR_CLASS_NAME); 46 | addClass(thumbElement, SCROLL_THUMB_CLASS_NAME); 47 | 48 | this.thumbElement = thumbElement; 49 | this.barElement = barElement; 50 | this.isHorizontal = isHorizontal; 51 | this.gesto = new Gesto(barElement, { 52 | container: getWindow(doc), 53 | }).on( 54 | "dragStart", 55 | e => this._onDragStart(e), 56 | ).on( 57 | "drag", 58 | e => this._onDrag(e), 59 | ); 60 | addEvent(this.barElement, "wheel", this._onWheel, { 61 | passive: false, 62 | }); 63 | } 64 | public scrollBy(delta: number, isAbsolute?: boolean) { 65 | const ratio = delta / this.size; 66 | 67 | this.trigger("scroll", { 68 | delta: isAbsolute ? delta : this.scrollSize * ratio, 69 | }); 70 | } 71 | public render( 72 | isDisplay: boolean, 73 | pos: number, 74 | size: number, 75 | scrollSize: number, 76 | ) { 77 | this.size = size; 78 | this.scrollSize = scrollSize; 79 | 80 | const opacity = isDisplay && (throttle(scrollSize - size, 0.001) > 0) ? 1 : 0; 81 | const [dirName1, sizeName] = this.isHorizontal ? ["X", "width"] : ["Y", "height"]; 82 | const sizeP = size / scrollSize * 100; 83 | const posP = Math.max(0, pos) / scrollSize * 100; 84 | 85 | this.thumbElement.style.cssText 86 | += `${sizeName}: ${sizeP}%;opacity: ${opacity};` 87 | + `transform: translate${dirName1}(${100 / sizeP * posP}%)`; 88 | } 89 | public destroy() { 90 | removeEvent(this.barElement, "wheel", this._onWheel); 91 | this.gesto.off(); 92 | this.off(); 93 | } 94 | protected _onDragStart = (e: OnDragStart) => { 95 | const isHorizontal = this.isHorizontal; 96 | const target = e.inputEvent.target; 97 | const datas = e.datas; 98 | const isThumb = this.thumbElement === target; 99 | 100 | if (!isThumb) { 101 | setTimeout(() => { 102 | requestAnimationFrame(() => { 103 | const thumbRect = this.thumbElement.getBoundingClientRect(); 104 | const pos1 = thumbRect[isHorizontal ? "left" : "top"]; 105 | const thumbSize = thumbRect[isHorizontal ? "width" : "height"]; 106 | const pos2 = pos1 + thumbSize; 107 | const clientPos = e[isHorizontal ? "clientX" : "clientY"]; 108 | 109 | if (pos1 <= clientPos && clientPos <= pos2) { 110 | return; 111 | } 112 | const size = this.size; 113 | const delta = size * size / this.scrollSize; 114 | 115 | this.scrollBy(pos1 < clientPos ? delta : -delta); 116 | }); 117 | }, 100); 118 | } 119 | datas.isThumb = isThumb; 120 | e.inputEvent.stopPropagation(); 121 | e.inputEvent.preventDefault(); 122 | } 123 | protected _onDrag = (e: OnDrag) => { 124 | if (!e.datas.isThumb) { 125 | return; 126 | } 127 | this.scrollBy(this.isHorizontal ? e.deltaX : e.deltaY); 128 | }; 129 | protected _onWheel = (e: WheelEvent) => { 130 | const delta = this.isHorizontal ? e.deltaX : e.deltaY; 131 | 132 | if (delta) { 133 | e.preventDefault(); 134 | } 135 | this.trigger("scroll", { 136 | delta, 137 | }); 138 | } 139 | } 140 | -------------------------------------------------------------------------------- /packages/ngx-infinite-viewer/projects/ngx-infinite-viewer/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

Angular Infinite Viewer

4 |

5 | npm version 6 | 7 | 8 | React 9 | Preact 10 | Angular 11 | Vue 14 | Svelte 17 | Lit 20 |

21 |

Angular Infinite Viewer is Document Viewer Component with infinite scrolling. 22 |

23 | 24 |

25 | Demo / 26 | API / 27 | Main Project 28 |

29 | 30 | ## ⚙️ Installation 31 | ### npm 32 | ```bash 33 | $ npm install ngx-infinite-viewer 34 | ``` 35 | 36 | ## 🚀 How to use 37 | ```js 38 | import { BrowserModule } from '@angular/platform-browser'; 39 | import { NgModule } from '@angular/core'; 40 | import { AppComponent } from './app.component'; 41 | import { NgInfiniteViewerComponent, NgInfiniteViewerModule } from "ngx-infinite-viewer"; 42 | 43 | @NgModule({ 44 | declarations: [ 45 | AppComponent, 46 | NgInfiniteViewerComponent, 47 | ], 48 | imports: [ 49 | BrowserModule, 50 | // NgInfiniteViewerModule, 51 | ], 52 | providers: [], 53 | bootstrap: [AppComponent] 54 | }) 55 | export class AppModule { } 56 | ``` 57 | ### Template 58 | 59 | ```html 60 | 69 |
AA
70 | 71 | ``` 72 | 73 | 74 | ## ⚙️ Developments 75 | ### `npm run start` 76 | 77 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 78 | 79 | 80 | ## ⭐️ Show Your Support 81 | Please give a ⭐️ if this project helped you! 82 | 83 | ## 👏 Contributing 84 | 85 | If you have any questions or requests or want to contribute to `infinite-viewer` or other packages, please write the [issue](https://github.com/daybrush/infinite-viewer/issues) or give me a Pull Request freely. 86 | 87 | ## 🐞 Bug Report 88 | 89 | If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/infinite-viewer/issues) on GitHub. 90 | 91 | 92 | ## 📝 License 93 | 94 | This project is [MIT](https://github.com/daybrush/infinite-viewer/blob/master/LICENSE) licensed. 95 | 96 | ``` 97 | MIT License 98 | 99 | Copyright (c) 2020 Daybrush 100 | 101 | Permission is hereby granted, free of charge, to any person obtaining a copy 102 | of this software and associated documentation files (the "Software"), to deal 103 | in the Software without restriction, including without limitation the rights 104 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 105 | copies of the Software, and to permit persons to whom the Software is 106 | furnished to do so, subject to the following conditions: 107 | 108 | The above copyright notice and this permission notice shall be included in all 109 | copies or substantial portions of the Software. 110 | 111 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 112 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 113 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 114 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 115 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 116 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 117 | SOFTWARE. 118 | ``` 119 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src/**/*"], 3 | "exclude": ["node_modules/*"], 4 | "compilerOptions": { 5 | /* Basic Options */ 6 | "target": "ESNEXT", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 7 | "module": "ESNEXT", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 8 | // "lib": [], /* Specify library files to be included in the compilation. */ 9 | // "allowJs": true, /* Allow javascript files to be compiled. */ 10 | // "checkJs": true, /* Report errors in .js files. */ 11 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 12 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 13 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 14 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 15 | // "outFile": "./", /* Concatenate and emit output to single file. */ 16 | // "outDir": "./", /* Redirect output structure to the directory. */ 17 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 18 | // "composite": true, /* Enable project compilation */ 19 | // "removeComments": false, /* Do not emit comments to output. */ 20 | // "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | 25 | /* Strict Type-Checking Options */ 26 | "strict": true, /* Enable all strict type-checking options. */ 27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 28 | // "strictNullChecks": true, /* Enable strict null checks. */ 29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 34 | 35 | /* Additional Checks */ 36 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 40 | 41 | /* Module Resolution Options */ 42 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 43 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 46 | // "typeRoots": [], /* List of folders to include type definitions from. */ 47 | "types": ["svelte"], /* Type declaration files to be included in compilation. */ 48 | "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 49 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 51 | 52 | /* Source Map Options */ 53 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 54 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 55 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 56 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 57 | 58 | /* Experimental Options */ 59 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 60 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /packages/react-infinite-viewer/src/serviceWorker.ts: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | type Config = { 24 | onSuccess?: (registration: ServiceWorkerRegistration) => void; 25 | onUpdate?: (registration: ServiceWorkerRegistration) => void; 26 | }; 27 | 28 | export function register(config?: Config) { 29 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 30 | // The URL constructor is available in all browsers that support SW. 31 | const publicUrl = new URL( 32 | (process as { env: { [key: string]: string } }).env.PUBLIC_URL, 33 | window.location.href 34 | ); 35 | if (publicUrl.origin !== window.location.origin) { 36 | // Our service worker won't work if PUBLIC_URL is on a different origin 37 | // from what our page is served on. This might happen if a CDN is used to 38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 39 | return; 40 | } 41 | 42 | window.addEventListener('load', () => { 43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 44 | 45 | if (isLocalhost) { 46 | // This is running on localhost. Let's check if a service worker still exists or not. 47 | checkValidServiceWorker(swUrl, config); 48 | 49 | // Add some additional logging to localhost, pointing developers to the 50 | // service worker/PWA documentation. 51 | navigator.serviceWorker.ready.then(() => { 52 | console.log( 53 | 'This web app is being served cache-first by a service ' + 54 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 55 | ); 56 | }); 57 | } else { 58 | // Is not localhost. Just register service worker 59 | registerValidSW(swUrl, config); 60 | } 61 | }); 62 | } 63 | } 64 | 65 | function registerValidSW(swUrl: string, config?: Config) { 66 | navigator.serviceWorker 67 | .register(swUrl) 68 | .then(registration => { 69 | registration.onupdatefound = () => { 70 | const installingWorker = registration.installing; 71 | if (installingWorker == null) { 72 | return; 73 | } 74 | installingWorker.onstatechange = () => { 75 | if (installingWorker.state === 'installed') { 76 | if (navigator.serviceWorker.controller) { 77 | // At this point, the updated precached content has been fetched, 78 | // but the previous service worker will still serve the older 79 | // content until all client tabs are closed. 80 | console.log( 81 | 'New content is available and will be used when all ' + 82 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 83 | ); 84 | 85 | // Execute callback 86 | if (config && config.onUpdate) { 87 | config.onUpdate(registration); 88 | } 89 | } else { 90 | // At this point, everything has been precached. 91 | // It's the perfect time to display a 92 | // "Content is cached for offline use." message. 93 | console.log('Content is cached for offline use.'); 94 | 95 | // Execute callback 96 | if (config && config.onSuccess) { 97 | config.onSuccess(registration); 98 | } 99 | } 100 | } 101 | }; 102 | }; 103 | }) 104 | .catch(error => { 105 | console.error('Error during service worker registration:', error); 106 | }); 107 | } 108 | 109 | function checkValidServiceWorker(swUrl: string, config?: Config) { 110 | // Check if the service worker can be found. If it can't reload the page. 111 | fetch(swUrl) 112 | .then(response => { 113 | // Ensure service worker exists, and that we really are getting a JS file. 114 | const contentType = response.headers.get('content-type'); 115 | if ( 116 | response.status === 404 || 117 | (contentType != null && contentType.indexOf('javascript') === -1) 118 | ) { 119 | // No service worker found. Probably a different app. Reload the page. 120 | navigator.serviceWorker.ready.then(registration => { 121 | registration.unregister().then(() => { 122 | window.location.reload(); 123 | }); 124 | }); 125 | } else { 126 | // Service worker found. Proceed as normal. 127 | registerValidSW(swUrl, config); 128 | } 129 | }) 130 | .catch(() => { 131 | console.log( 132 | 'No internet connection found. App is running in offline mode.' 133 | ); 134 | }); 135 | } 136 | 137 | export function unregister() { 138 | if ('serviceWorker' in navigator) { 139 | navigator.serviceWorker.ready.then(registration => { 140 | registration.unregister(); 141 | }); 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /packages/svelte-infinite-viewer/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

Svelte Infinite Viewer

4 |

5 | npm version 6 | 7 | 8 | React 9 | Preact 10 | Angular 11 | Vue 14 | Svelte 17 | Lit 20 |

21 |

Svelte Infinite Viewer is Document Viewer Component with infinite scrolling. 22 |

23 | 24 |

25 | Demo / 26 | API / 27 | Main Project 28 |

29 | 30 | 31 | * [Simple Demo](https://stackblitz.com/edit/vitejs-vite-p14cgg?file=src%2Flib%2FCounter.svelte,src%2FApp.svelte&terminal=dev) 32 | 33 | 34 | ## ⚙️ Installation 35 | ### npm 36 | ```bash 37 | $ npm install svelte-infinite-viewer 38 | ``` 39 | 40 | ## 🚀 How to use 41 | * The viewer's class name must be set globally and use `className` prop. 42 | 43 | ```html 44 | 47 |