├── .yarnrc ├── packages ├── imready │ ├── mocha.opts │ ├── .eslintignore │ ├── test │ │ ├── manual │ │ │ ├── videos │ │ │ │ └── pano.mp4 │ │ │ └── index.html │ │ └── unit │ │ │ ├── initialization.spec.ts │ │ │ ├── element.spec.ts │ │ │ └── utils.ts │ ├── tsconfig.declaration.json │ ├── src │ │ ├── index.umd.ts │ │ ├── index.ts │ │ ├── ImReady.ts │ │ ├── consts.ts │ │ ├── loaders │ │ │ ├── ImageLoader.ts │ │ │ ├── VideoLoader.ts │ │ │ ├── ElementLoader.ts │ │ │ └── Loader.ts │ │ ├── AutoSizer.ts │ │ ├── utils.ts │ │ └── reactive.ts │ ├── .travis.yml │ ├── tsconfig.json │ ├── tsconfig.test.json │ ├── .npmignore │ ├── rollup.config.js │ ├── .eslintrc │ ├── CHANGELOG.md │ ├── karma.conf.js │ └── package.json ├── ngx-imready │ ├── src │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.module.ts │ │ │ ├── app.component.ts │ │ │ ├── app.component.spec.ts │ │ │ └── app.component.html │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── styles.css │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── test.ts │ │ └── polyfills.ts │ ├── .npmrc │ ├── projects │ │ └── ngx-imready │ │ │ ├── package.json │ │ │ ├── src │ │ │ ├── public-api.ts │ │ │ ├── lib │ │ │ │ ├── types.ts │ │ │ │ ├── ngx-imready-register.directive.ts │ │ │ │ ├── ngx-imready.module.ts │ │ │ │ └── ngx-imready.directive.ts │ │ │ └── test.ts │ │ │ ├── ng-package.json │ │ │ ├── tsconfig.lib.prod.json │ │ │ ├── tsconfig.spec.json │ │ │ ├── tsconfig.lib.json │ │ │ ├── karma.conf.js │ │ │ └── CHANGELOG.md │ ├── e2e │ │ ├── src │ │ │ ├── app.po.ts │ │ │ └── app.e2e-spec.ts │ │ ├── tsconfig.json │ │ └── protractor.conf.js │ ├── .editorconfig │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── .gitignore │ ├── tsconfig.json │ ├── package.json │ ├── karma.conf.js │ └── angular.json ├── react-imready │ ├── mocha.opts │ ├── src │ │ ├── react-app-env.d.ts │ │ ├── index.tsx │ │ ├── react-imready │ │ │ ├── index.tsx │ │ │ ├── types.ts │ │ │ ├── usePreReady.tsx │ │ │ ├── useReady.tsx │ │ │ ├── useReadyElement.tsx │ │ │ ├── usePreReadyElement.tsx │ │ │ └── useImReady.tsx │ │ └── demo │ │ │ ├── index.css │ │ │ ├── PrintInfo.tsx │ │ │ └── App.tsx │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── index.html │ ├── tsconfig.build.json │ ├── test │ │ └── unit │ │ │ ├── TestHelper.ts │ │ │ └── ImReady.spec.tsx │ ├── .gitignore │ ├── tsconfig.declaration.json │ ├── rollup.config.js │ ├── tsconfig.test.json │ ├── tsconfig.json │ ├── package.json │ ├── karma.conf.js │ └── CHANGELOG.md ├── vue-imready │ ├── .browserslistrc │ ├── babel.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.ts │ │ ├── shims-vue.d.ts │ │ ├── vue-imready │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── useReady.ts │ │ │ ├── usePreReady.ts │ │ │ ├── useReadyElement.ts │ │ │ ├── usePreReadyElement.ts │ │ │ └── useImReady.ts │ │ └── App.vue │ ├── tsconfig.build.json │ ├── .gitignore │ ├── tsconfig.declaration.json │ ├── .eslintrc.js │ ├── rollup.config.js │ ├── tsconfig.json │ ├── package.json │ └── CHANGELOG.md ├── vue2-imready │ ├── .browserslistrc │ ├── .npmignore │ ├── demo │ │ ├── shims-vue.d.ts │ │ ├── index.ts │ │ └── App.vue │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── .storybook │ │ ├── manager.js │ │ ├── main.js │ │ └── preview.jsx │ ├── .editorconfig │ ├── src │ │ ├── index.ts │ │ ├── types.ts │ │ ├── useReady.ts │ │ ├── usePreReady.ts │ │ ├── useReadyElement.ts │ │ ├── usePreReadyElement.ts │ │ └── useImReady.ts │ ├── tsconfig.declaration.json │ ├── rollup.config.js │ ├── tsconfig.json │ ├── package.json │ └── CHANGELOG.md └── svelte-imready │ ├── .gitignore │ ├── public │ ├── favicon.png │ ├── index.html │ └── global.css │ ├── src │ ├── main.js │ ├── svelte-imready │ │ ├── index.ts │ │ ├── useReady.ts │ │ ├── usePreReady.ts │ │ ├── useReadyElement.ts │ │ ├── usePreReadyElement.ts │ │ ├── useImReady.ts │ │ └── types.ts │ └── App.svelte │ ├── global.d.ts │ ├── tsconfig.declaration.json │ ├── tsconfig.json │ ├── rollup.build.config.js │ ├── package.json │ ├── rollup.config.js │ └── CHANGELOG.md ├── demo ├── images │ └── logo.png └── prism.css ├── .github ├── PULL_REQUEST_TEMPLATE.md ├── ISSUE_TEMPLATE.md ├── workflows │ └── run-unit.yml └── stale.yml ├── .editorconfig ├── lerna.json ├── config ├── commit.template └── validate-commit-msg.js ├── LICENSE ├── CHANGELOG.md ├── package.json ├── jsdoc.json ├── NOTICE └── .gitignore /.yarnrc: -------------------------------------------------------------------------------- 1 | workspaces-experimental true 2 | -------------------------------------------------------------------------------- /packages/imready/mocha.opts: -------------------------------------------------------------------------------- 1 | --timeout 10000 -------------------------------------------------------------------------------- /packages/ngx-imready/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/ngx-imready/.npmrc: -------------------------------------------------------------------------------- 1 | omit=optional 2 | -------------------------------------------------------------------------------- /packages/ngx-imready/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/react-imready/mocha.opts: -------------------------------------------------------------------------------- 1 | --timeout 10000 2 | -------------------------------------------------------------------------------- /packages/vue-imready/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /packages/imready/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | packages/ 4 | *.js 5 | -------------------------------------------------------------------------------- /packages/vue2-imready/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /packages/vue2-imready/.npmignore: -------------------------------------------------------------------------------- 1 | .storybook 2 | stories/ 3 | vue3/ 4 | public/ 5 | -------------------------------------------------------------------------------- /packages/react-imready/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/svelte-imready/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /demo/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-imready/HEAD/demo/images/logo.png -------------------------------------------------------------------------------- /packages/ngx-imready/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /packages/ngx-imready/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /packages/react-imready/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /packages/ngx-imready/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-imready/HEAD/packages/ngx-imready/src/favicon.ico -------------------------------------------------------------------------------- /packages/vue-imready/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/vue-imready/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-imready/HEAD/packages/vue-imready/public/favicon.ico -------------------------------------------------------------------------------- /packages/react-imready/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-imready/HEAD/packages/react-imready/public/favicon.ico -------------------------------------------------------------------------------- /packages/react-imready/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-imready/HEAD/packages/react-imready/public/logo192.png -------------------------------------------------------------------------------- /packages/react-imready/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-imready/HEAD/packages/react-imready/public/logo512.png -------------------------------------------------------------------------------- /packages/svelte-imready/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-imready/HEAD/packages/svelte-imready/public/favicon.png -------------------------------------------------------------------------------- /packages/vue-imready/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-imready/HEAD/packages/vue-imready/src/assets/logo.png -------------------------------------------------------------------------------- /packages/vue-imready/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/vue2-imready/demo/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /packages/vue2-imready/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-imready/HEAD/packages/vue2-imready/public/favicon.ico -------------------------------------------------------------------------------- /packages/imready/test/manual/videos/pano.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naver/egjs-imready/HEAD/packages/imready/test/manual/videos/pano.mp4 -------------------------------------------------------------------------------- /packages/vue-imready/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "jsx": "react" 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-imready/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "jsx": "react" 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /packages/vue2-imready/.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/addons"; 2 | 3 | addons.setConfig({ 4 | panelPosition: "right", 5 | }); 6 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Issue 2 | 3 | 4 | ## Details 5 | 6 | -------------------------------------------------------------------------------- /packages/ngx-imready/projects/ngx-imready/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@egjs/ngx-imready", 3 | "version": "1.1.3", 4 | "dependencies": { 5 | "@egjs/imready": "~1.4.2" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/vue-imready/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { DefineComponent } from 'vue' 3 | const component: DefineComponent<{}, {}, any> 4 | export default component 5 | } 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | 4 | ## Steps to check or reproduce 5 | 6 | -------------------------------------------------------------------------------- /packages/vue2-imready/.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | end_of_line = lf 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | max_line_length = 100 8 | -------------------------------------------------------------------------------- /packages/svelte-imready/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; 11 | -------------------------------------------------------------------------------- /packages/svelte-imready/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "!!raw-loader!*" { 2 | const content: string; 3 | export default content; 4 | } 5 | declare module "*.svelte" { 6 | const content: any; 7 | export default content; 8 | } 9 | -------------------------------------------------------------------------------- /packages/ngx-imready/projects/ngx-imready/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ngx-imready 3 | */ 4 | 5 | export * from './lib/ngx-imready.directive'; 6 | export * from './lib/ngx-imready-register.directive'; 7 | export * from './lib/ngx-imready.module'; 8 | -------------------------------------------------------------------------------- /packages/vue2-imready/demo/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueCompositionAPI from '@vue/composition-api'; 3 | import App from './App.vue'; 4 | 5 | Vue.use(VueCompositionAPI); 6 | 7 | new Vue({ 8 | render: (h: any) => h(App), 9 | }).$mount('#app'); 10 | -------------------------------------------------------------------------------- /packages/react-imready/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './demo/App'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); 11 | -------------------------------------------------------------------------------- /packages/ngx-imready/projects/ngx-imready/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-imready", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | }, 7 | "allowedNonPeerDependencies": ["@egjs/imready"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/react-imready/test/unit/TestHelper.ts: -------------------------------------------------------------------------------- 1 | export async function wait(time: number = 0) { 2 | return new Promise(resolve => { 3 | setTimeout(resolve, time); 4 | }); 5 | } 6 | export function getValue(id: string) { 7 | return document.querySelector(`#${id}`)!.innerHTML; 8 | } 9 | -------------------------------------------------------------------------------- /packages/vue2-imready/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @namespace Vue2ImReady 3 | */ 4 | export * from "./useImReady"; 5 | export * from "./usePreReadyElement"; 6 | export * from "./useReadyElement"; 7 | export * from "./usePreReady"; 8 | export * from "./useReady"; 9 | export * from "./types"; 10 | -------------------------------------------------------------------------------- /packages/imready/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "removeComments": true, 5 | "declaration": true, 6 | "emitDeclarationOnly": true, 7 | "declarationDir": "declaration", 8 | "strictNullChecks": false, 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/vue-imready/src/vue-imready/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @namespace VueImReady 3 | */ 4 | export * from "./useImReady"; 5 | export * from "./usePreReadyElement"; 6 | export * from "./useReadyElement"; 7 | export * from "./usePreReady"; 8 | export * from "./useReady"; 9 | export * from "./types"; 10 | -------------------------------------------------------------------------------- /packages/imready/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | /* 2 | egjs-imready 3 | Copyright (c) 2020-present NAVER Corp. 4 | MIT license 5 | */ 6 | import ImReady, * as modules from "./index"; 7 | 8 | for (const name in modules) { 9 | (ImReady as any)[name] = (modules as any)[name]; 10 | } 11 | 12 | export default ImReady; 13 | -------------------------------------------------------------------------------- /packages/react-imready/src/react-imready/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @namespace ReactImReady 3 | */ 4 | export * from "./useImReady"; 5 | export * from "./usePreReadyElement"; 6 | export * from "./useReadyElement"; 7 | export * from "./usePreReady"; 8 | export * from "./useReady"; 9 | export * from "./types"; 10 | -------------------------------------------------------------------------------- /packages/svelte-imready/src/svelte-imready/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @namespace SvelteImReady 3 | */ 4 | export * from "./useImReady"; 5 | export * from "./usePreReadyElement"; 6 | export * from "./useReadyElement"; 7 | export * from "./usePreReady"; 8 | export * from "./useReady"; 9 | export * from "./types"; 10 | -------------------------------------------------------------------------------- /packages/ngx-imready/projects/ngx-imready/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 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | insert_final_newline = true 6 | trim_trailing_whitespace = true 7 | 8 | [*.ts] 9 | charset = utf-8 10 | end_of_line = lf 11 | indent_style = space 12 | indent_size = 2 13 | max_line_length = 80 14 | 15 | [{*.json,.travis.yml}] 16 | indent_style = space 17 | indent_size = 2 18 | -------------------------------------------------------------------------------- /packages/ngx-imready/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | async navigateTo(): Promise { 5 | return browser.get(browser.baseUrl); 6 | } 7 | 8 | async getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/imready/.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "12" 4 | dist: trusty 5 | sudo: false 6 | install: 7 | - npm install 8 | addons: 9 | chrome: stable 10 | cache: 11 | directories: 12 | - "node_modules" 13 | before_script: 14 | - npm run lint 15 | script: 16 | - npm run coverage 17 | after_success: 18 | - npm run coveralls 19 | -------------------------------------------------------------------------------- /packages/ngx-imready/e2e/tsconfig.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/e2e", 6 | "module": "commonjs", 7 | "target": "es2018", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/vue-imready/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/vue2-imready/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "removeComments": true, 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/imready/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./outjs/", 4 | "sourceMap": true, 5 | "module": "es2015", 6 | "target": "es5", 7 | "strictNullChecks": true, 8 | "moduleResolution": "node", 9 | "lib": [ 10 | "es2015", 11 | "dom" 12 | ], 13 | }, 14 | "include": [ 15 | "./src/**/*.ts" 16 | ] 17 | } -------------------------------------------------------------------------------- /packages/ngx-imready/.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-imready/projects/ngx-imready/src/lib/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * egjs-grid 3 | * Copyright (c) 2021-present NAVER Corp. 4 | * MIT license 5 | */ 6 | import { EventEmitter } from "@angular/core"; 7 | import { ImReadyEvents } from "@egjs/imready"; 8 | 9 | export type NgxImReadyEvents = { 10 | [key in keyof ImReadyEvents]: EventEmitter 11 | }; 12 | -------------------------------------------------------------------------------- /packages/ngx-imready/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NgxImready 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/ngx-imready/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/ngx-imready/projects/ngx-imready/src/lib/ngx-imready-register.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef } from "@angular/core"; 2 | 3 | @Directive({ 4 | selector: '[NgxImReadyRegister]', 5 | }) 6 | export class NgxImReadyRegisterDirective { 7 | constructor(private elRef: ElementRef) { 8 | } 9 | public getElement() { 10 | return this.elRef.nativeElement; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/imready/tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "noImplicitAny": false, 6 | "strictNullChecks": false, 7 | "types": [ 8 | "karma-chai", 9 | "mocha", 10 | ] 11 | }, 12 | "include": [ 13 | "./src/**/*.ts", 14 | "./test/**/*.ts" 15 | ], 16 | "exclude": [ 17 | "./node_modules/**/*.ts" 18 | ] 19 | } -------------------------------------------------------------------------------- /packages/svelte-imready/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "allowJs": false, 5 | "noEmit": false, 6 | "isolatedModules": false, 7 | "removeComments": true, 8 | "declaration": true, 9 | "emitDeclarationOnly": true, 10 | "declarationDir": "declaration" 11 | }, 12 | "include": ["src/svelte-imready/**/*.ts"], 13 | "exclude": ["node_modules"], 14 | } 15 | -------------------------------------------------------------------------------- /packages/ngx-imready/projects/ngx-imready/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-imready/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-imready/.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-imready/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/vue-imready/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "allowJs": false, 5 | "noEmit": false, 6 | "isolatedModules": false, 7 | "removeComments": true, 8 | "declaration": true, 9 | "emitDeclarationOnly": true, 10 | "declarationDir": "declaration" 11 | }, 12 | "include": [ 13 | "./src/vue-imready/**/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-imready/src/demo/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/react-imready/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "allowJs": false, 5 | "noEmit": false, 6 | "isolatedModules": false, 7 | "removeComments": true, 8 | "declaration": true, 9 | "emitDeclarationOnly": true, 10 | "declarationDir": "declaration" 11 | }, 12 | "include": [ 13 | "./src/react-imready/**/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/imready/.npmignore: -------------------------------------------------------------------------------- 1 | #configs 2 | config 3 | bower.json 4 | 5 | #tests 6 | test 7 | karma.conf.js 8 | 9 | #build tools 10 | webpack.*.js 11 | .travis.yml 12 | .codeclimate.yml 13 | 14 | #linters 15 | .eslintrc* 16 | 17 | #docs 18 | doc 19 | demo 20 | jsdoc.json 21 | README.md 22 | 23 | #editor settings 24 | .idea 25 | .editorconfig 26 | _site 27 | coverage/ 28 | node_modules/ 29 | .github 30 | .babelrc 31 | mocha.opts 32 | demo/ 33 | 34 | #packages 35 | packages 36 | -------------------------------------------------------------------------------- /packages/vue-imready/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/vue3-essential', 8 | 'eslint:recommended', 9 | '@vue/typescript/recommended' 10 | ], 11 | parserOptions: { 12 | ecmaVersion: 2020 13 | }, 14 | rules: { 15 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 16 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-imready/src/demo/PrintInfo.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { ImReadyValue } from "../react-imready"; 3 | 4 | export function PrintInfo(props: Partial) { 5 | const printProps = {...props}; 6 | 7 | delete printProps.register; 8 | return
9 | {Object.keys(printProps).map(name => ( 10 |

{name}: {(printProps as any)[name].toString()}

11 | ))} 12 |
; 13 | } 14 | -------------------------------------------------------------------------------- /packages/svelte-imready/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /packages/ngx-imready/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 | import { NgxImreadyModule } from '../../projects/ngx-imready/src/public-api'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent, 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | NgxImreadyModule, 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent], 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /packages/react-imready/rollup.config.js: -------------------------------------------------------------------------------- 1 | 2 | // imready.js 3 | // imready.min.js 4 | // imready.pkgd.js 5 | // imready.pkgd.min.js 6 | // imready.esm.js 7 | 8 | 9 | const buildHelper = require("@egjs/build-helper"); 10 | 11 | export default buildHelper([ 12 | { 13 | input: "./src/react-imready/index.tsx", 14 | output: "./dist/imready.cjs.js", 15 | format: "cjs", 16 | exports: "named", 17 | }, 18 | { 19 | input: "./src/react-imready/index.tsx", 20 | output: "./dist/imready.esm.js", 21 | format: "esm", 22 | exports: "named", 23 | }, 24 | ]); 25 | 26 | -------------------------------------------------------------------------------- /packages/imready/src/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | egjs-imready 3 | Copyright (c) 2020-present NAVER Corp. 4 | MIT license 5 | */ 6 | import ImReady from "./ImReady"; 7 | import Manager from "./ImReadyManager"; 8 | import Loader from "./loaders/Loader"; 9 | import ImageLoader from "./loaders/ImageLoader"; 10 | import VideoLoader from "./loaders/VideoLoader"; 11 | 12 | export default ImReady; 13 | export { 14 | Manager, 15 | VideoLoader, 16 | ImageLoader, 17 | Loader, 18 | }; 19 | export { 20 | EVENTS, 21 | PROPS, 22 | } from "./consts"; 23 | export * from "./types"; 24 | export * from "./reactive"; 25 | -------------------------------------------------------------------------------- /packages/ngx-imready/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 | // First, initialize the Angular testing environment. 11 | getTestBed().initTestEnvironment( 12 | BrowserDynamicTestingModule, 13 | platformBrowserDynamicTesting(), { 14 | teardown: { destroyAfterEach: false } 15 | } 16 | ); 17 | -------------------------------------------------------------------------------- /packages/vue2-imready/.storybook/main.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | webpackFinal: (config) => { 5 | config.resolve.alias["@egjs/infinitegrid"] = path.resolve(__dirname, '../../../dist/infinitegrid.esm.js'); 6 | return config; 7 | }, 8 | "stories": [ 9 | "../stories/**/*.stories.mdx", 10 | "../stories/**/*.stories.@(js|jsx|ts|tsx)" 11 | ], 12 | "addons": [ 13 | "@storybook/addon-docs/register", 14 | "@storybook/addon-controls", 15 | "@storybook/addon-viewport/register", 16 | "storybook-addon-preview/register", 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/imready/src/ImReady.ts: -------------------------------------------------------------------------------- 1 | /* 2 | egjs-imready 3 | Copyright (c) 2020-present NAVER Corp. 4 | MIT license 5 | */ 6 | import ImReadyManager from "./ImReadyManager"; 7 | import ImageLoader from "./loaders/ImageLoader"; 8 | import VideoLoader from "./loaders/VideoLoader"; 9 | import { ImReadyOptions } from "./types"; 10 | 11 | class ImReady extends ImReadyManager { 12 | constructor(options: Partial = {}) { 13 | super({ 14 | loaders: { 15 | img: ImageLoader, 16 | video: VideoLoader, 17 | }, 18 | ...options, 19 | }); 20 | } 21 | } 22 | 23 | export default ImReady; 24 | -------------------------------------------------------------------------------- /packages/ngx-imready/projects/ngx-imready/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 | // First, initialize the Angular testing environment. 12 | getTestBed().initTestEnvironment( 13 | BrowserDynamicTestingModule, 14 | platformBrowserDynamicTesting(), { 15 | teardown: { destroyAfterEach: false } 16 | } 17 | ); 18 | -------------------------------------------------------------------------------- /packages/react-imready/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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /packages/vue-imready/rollup.config.js: -------------------------------------------------------------------------------- 1 | const commonjs = require("rollup-plugin-commonjs"); 2 | const buildHelper = require("@egjs/build-helper"); 3 | 4 | export default buildHelper([ 5 | { 6 | input: "./src/vue-imready/index.ts", 7 | output: "./dist/imready.cjs.js", 8 | format: "cjs", 9 | exports: "named", 10 | external: { 11 | "vue": "vue", 12 | "@egjs/imready": "@egjs/imready", 13 | } 14 | }, 15 | { 16 | input: "./src/vue-imready/index.ts", 17 | output: "./dist/imready.esm.js", 18 | format: "esm", 19 | exports: "named", 20 | external: { 21 | "vue": "vue", 22 | "@egjs/imready": "@egjs/imready", 23 | } 24 | }, 25 | ]); 26 | 27 | -------------------------------------------------------------------------------- /packages/ngx-imready/projects/ngx-imready/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 | "lib": [ 11 | "dom", 12 | "es2018" 13 | ] 14 | }, 15 | "angularCompilerOptions": { 16 | "skipTemplateCodegen": true, 17 | "strictMetadataEmit": true, 18 | "enableResourceInlining": true 19 | }, 20 | "exclude": [ 21 | "src/test.ts", 22 | "**/*.spec.ts" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /packages/vue2-imready/rollup.config.js: -------------------------------------------------------------------------------- 1 | const buildHelper = require("@egjs/build-helper"); 2 | 3 | const defaultOptions = { 4 | sourcemap: true, 5 | input: "./src/index.ts", 6 | exports: "named", 7 | commonjs: true, 8 | external: { 9 | "vue": "vue", 10 | "@vue/composition-api": "@vue/composition-api", 11 | "@egjs/imready": "@egjs/imready", 12 | } 13 | }; 14 | export default buildHelper([ 15 | { 16 | ...defaultOptions, 17 | format: "es", 18 | output: "./dist/imready.esm.js", 19 | }, 20 | { 21 | ...defaultOptions, 22 | format: "cjs", 23 | output: "./dist/imready.cjs.js", 24 | }, 25 | ]); 26 | -------------------------------------------------------------------------------- /packages/ngx-imready/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-imready'; 10 | public isReady = false; 11 | public totalCount = 0; 12 | public readyCount = 0; 13 | public errorCount = 0; 14 | onReadyElement(e) { 15 | this.readyCount = e.readyCount; 16 | this.totalCount = e.totalCount; 17 | } 18 | onError(e) { 19 | this.errorCount = e.errorCount; 20 | } 21 | onReady(e) { 22 | console.log(e); 23 | this.isReady = e.isReady; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-imready/src/react-imready/types.ts: -------------------------------------------------------------------------------- 1 | import { Ref, RefCallback } from "react"; 2 | import { ImReadyReactiveProps, ImReadyHooksValue } from "@egjs/imready"; 3 | 4 | /** 5 | * @typedef 6 | * @memberof ReactImReady 7 | * @extends eg.ImReady.ImReadyHooksValue 8 | * @property - Ref function that can register the element to be checked 체크할 엘리먼트를 등록할 수 있는 ref 함수 9 | */ 10 | export interface ImReadyValue extends ImReadyHooksValue { 11 | register(ref?: Ref): RefCallback; 12 | } 13 | /** 14 | * @typedef 15 | * @memberof ReactImReady 16 | * @extends eg.ImReady.ImReadyReactiveProps 17 | */ 18 | export interface ImReadyProps extends ImReadyReactiveProps { 19 | } 20 | -------------------------------------------------------------------------------- /packages/vue2-imready/.storybook/preview.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { themes } from "@storybook/theming"; 3 | import { 4 | INITIAL_VIEWPORTS, 5 | // or MINIMAL_VIEWPORTS, 6 | } from "@storybook/addon-viewport"; 7 | 8 | // or global addParameters 9 | export const parameters = { 10 | controls: { 11 | passArgsFirst: true, 12 | expanded: true, 13 | hideNoControlsWarning: true, 14 | }, 15 | viewport: { 16 | viewports: { 17 | ...INITIAL_VIEWPORTS, 18 | }, 19 | }, 20 | darkMode: { 21 | // Override the default light theme 22 | light: { ...themes.normal }, 23 | // Override the default dark theme 24 | dark: { ...themes.dark }, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /packages/vue-imready/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/vue2-imready/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /.github/workflows/run-unit.yml: -------------------------------------------------------------------------------- 1 | name: Run tests 2 | on: [push, pull_request] 3 | jobs: 4 | unit: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - uses: actions/checkout@v2 8 | - uses: actions/setup-node@v2.1.5 9 | with: 10 | node-version: 16.16.0 11 | - name: install 12 | run: yarn 13 | working-directory: ./packages/imready 14 | - name: test 15 | run: npm run coverage 16 | working-directory: ./packages/imready 17 | - name: Coveralls GitHub Action 18 | uses: coverallsapp/github-action@v1.1.2 19 | with: 20 | path-to-lcov: ./packages/imready/coverage/lcov.info 21 | github-token: ${{ secrets.GITHUB_TOKEN }} 22 | -------------------------------------------------------------------------------- /packages/vue2-imready/src/types.ts: -------------------------------------------------------------------------------- 1 | import { ImReadyReactiveProps, ImReadyHooksValue } from '@egjs/imready'; 2 | import { Ref } from '@vue/composition-api'; 3 | 4 | /** 5 | * @typedef 6 | * @memberof Vue2ImReady 7 | * @extends eg.ImReady.ImReadyHooksValue 8 | * @property - Ref function that can register the element to be checked 체크할 엘리먼트를 등록할 수 있는 ref 함수 9 | */ 10 | export interface ImReadyValue extends ImReadyHooksValue { 11 | register(ref?: Ref): Ref; 12 | } 13 | /** 14 | * @typedef 15 | * @memberof Vue2ImReady 16 | * @extends eg.ImReady.ImReadyReactiveProps 17 | */ 18 | export interface ImReadyProps extends ImReadyReactiveProps { 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-imready/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 | "allowUnreachableCode": true, 18 | "allowUnusedLabels": true 19 | }, 20 | "include": [ 21 | "./src/**/*.ts", 22 | "./src/**/*.tsx", 23 | "./test/**/*.ts", 24 | "./test/**/*.tsx" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /packages/vue-imready/src/vue-imready/types.ts: -------------------------------------------------------------------------------- 1 | import { ImReadyReactiveProps, ImReadyHooksValue, ImReadyOptions } from '@egjs/imready'; 2 | import { Ref } from 'vue'; 3 | 4 | /** 5 | * @typedef 6 | * @memberof VueImReady 7 | * @extends eg.ImReadyHooksValue 8 | * @property - Ref function that can register the element to be checked 체크할 엘리먼트를 등록할 수 있는 ref 함수 9 | */ 10 | export interface ImReadyValue extends ImReadyHooksValue { 11 | register(ref?: Ref | ((el: T | null) => any)): (el: T | null) => any; 12 | } 13 | 14 | /** 15 | * @typedef 16 | * @memberof VueImReady 17 | * @extends eg.ImReady.ImReadyReactiveProps 18 | */ 19 | export interface ImReadyProps extends ImReadyReactiveProps { 20 | } 21 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmClient": "yarn", 3 | "useWorkspaces": true, 4 | "packages": [ 5 | "packages/*", 6 | "packages/ngx-imready/projects/ngx-imready" 7 | ], 8 | "version": "independent", 9 | "lernaHelperOptions": { 10 | "deployFileMap": [ 11 | { 12 | "basePath": "packages/imready/dist", 13 | "dists": [ 14 | "demo/release/latest/dist" 15 | ] 16 | }, 17 | { 18 | "basePath": "doc", 19 | "dists": [ 20 | "demo/release/{{version}}/dist", 21 | "demo/release/latest/doc" 22 | ] 23 | } 24 | ], 25 | "beforeReleaseScripts": [ 26 | "npm run packages:build", 27 | "npm run docs:build", 28 | "npm run demo:deploy" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/ngx-imready/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` 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/svelte-imready/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./outjs/", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "experimentalDecorators": true 22 | }, 23 | "include": [ 24 | "./src/**/*.ts" 25 | ], 26 | "exclude": ["node_modules", "__sapper__/*", "public/*"] 27 | } 28 | -------------------------------------------------------------------------------- /packages/react-imready/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "sourceMap": true, 10 | "allowJs": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "allowSyntheticDefaultImports": true, 14 | "strict": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "noFallthroughCasesInSwitch": true, 17 | "module": "esnext", 18 | "strictFunctionTypes": false, 19 | "moduleResolution": "node", 20 | "downlevelIteration": true, 21 | "resolveJsonModule": true, 22 | "isolatedModules": true, 23 | "noEmit": true, 24 | "jsx": "react-jsx" 25 | }, 26 | "include": [ 27 | "src" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /packages/imready/src/consts.ts: -------------------------------------------------------------------------------- 1 | /* 2 | egjs-imready 3 | Copyright (c) 2020-present NAVER Corp. 4 | MIT license 5 | */ 6 | const isWindow = typeof window !== "undefined"; 7 | const ua = isWindow ? window.navigator.userAgent : ""; 8 | export const SUPPORT_COMPUTEDSTYLE = isWindow ? !!("getComputedStyle" in window) : false; 9 | export const IS_IE = /MSIE|Trident|Windows Phone|Edge/.test(ua); 10 | export const SUPPORT_ADDEVENTLISTENER = isWindow ? !!("addEventListener" in document) : false; 11 | export const WIDTH = "width"; 12 | export const HEIGHT = "height"; 13 | 14 | export const PROPS = [ 15 | "prefix", 16 | "loaders", 17 | ] as const; 18 | 19 | export const EVENTS = [ 20 | "preReadyElement", 21 | "readyElement", 22 | "error", 23 | "preReady", 24 | "ready", 25 | ] as const; 26 | -------------------------------------------------------------------------------- /packages/ngx-imready/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { browser, logging } from 'protractor'; 2 | import { AppPage } from './app.po'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', async () => { 12 | await page.navigateTo(); 13 | expect(await page.getTitleText()).toEqual('ngx-imready app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /packages/svelte-imready/rollup.build.config.js: -------------------------------------------------------------------------------- 1 | import buildHelper from "@egjs/build-helper"; 2 | import svelte from "rollup-plugin-svelte"; 3 | import sveltePreprocess from "svelte-preprocess"; 4 | 5 | const defaultOptions = { 6 | tsconfig: "", 7 | commonjs: true, 8 | external: { 9 | svelte: "svelte", 10 | }, 11 | plugins: [ 12 | svelte({ 13 | preprocess: sveltePreprocess(), 14 | }), 15 | ], 16 | }; 17 | 18 | export default buildHelper([ 19 | { 20 | ...defaultOptions, 21 | input: "./src/svelte-imready/index.ts", 22 | output: "dist/imready.cjs.js", 23 | format: "cjs", 24 | exports: "named", 25 | }, 26 | { 27 | ...defaultOptions, 28 | input: "./src/svelte-imready/index.ts", 29 | output: "dist/imready.esm.js", 30 | format: "es", 31 | exports: "named", 32 | }, 33 | ]); 34 | -------------------------------------------------------------------------------- /packages/imready/test/unit/initialization.spec.ts: -------------------------------------------------------------------------------- 1 | import { spy } from "sinon"; 2 | import ImReady from "../../src"; 3 | import { cleanup, waitEvent } from "./utils"; 4 | 5 | describe("Initialization", () => { 6 | // let el: HTMLElement; 7 | let im: ImReady; 8 | 9 | beforeEach(() => { 10 | im = new ImReady(); 11 | // el = sandbox(""); 12 | }); 13 | afterEach(() => { 14 | im.destroy(); 15 | cleanup(); 16 | }); 17 | 18 | it("should check no item", async () => { 19 | // Given 20 | const readySpy = spy(); 21 | im.on("ready", readySpy); 22 | 23 | // When 24 | im.check([]); 25 | 26 | 27 | await waitEvent(im, "ready"); 28 | 29 | // Then 30 | expect(readySpy.calledOnce).to.be.true; 31 | expect(readySpy.args[0][0].totalCount).to.be.equals(0); 32 | expect(im.getTotalCount()).to.be.equals(0); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /packages/vue-imready/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "skipLibCheck": 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/imready/rollup.config.js: -------------------------------------------------------------------------------- 1 | 2 | // imready.js 3 | // imready.min.js 4 | // imready.pkgd.js 5 | // imready.pkgd.min.js 6 | // imready.esm.js 7 | 8 | 9 | const buildHelper = require("@egjs/build-helper"); 10 | const name = "eg.ImReady"; 11 | 12 | export default buildHelper([ 13 | { 14 | name, 15 | input: "./src/index.umd.ts", 16 | output: "./dist/imready.js", 17 | format: "umd", 18 | resolve: true, 19 | }, 20 | { 21 | name, 22 | input: "./src/index.umd.ts", 23 | output: "./dist/imready.min.js", 24 | format: "umd", 25 | uglify: true, 26 | resolve: true, 27 | }, 28 | { 29 | input: "./src/index.umd.ts", 30 | output: "./dist/imready.cjs.js", 31 | format: "cjs", 32 | exports: "default", 33 | }, 34 | { 35 | input: "./src/index.ts", 36 | output: "./dist/imready.esm.js", 37 | format: "esm", 38 | exports: "named", 39 | }, 40 | ]); 41 | 42 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 30 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 7 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - wontstale 8 | # Label to use when marking an issue as stale 9 | staleLabel: stale 10 | # Comment to post when marking an issue as stale. Set to `false` to disable 11 | markComment: > 12 | This issue has been automatically marked as stale because it has not had 13 | recent activity. It will be closed if no further activity occurs. Thank you 14 | for your contributions. 15 | # Comment to post when closing a stale issue. Set to `false` to disable 16 | closeComment: > 17 | This issue has been marked as stale and closed. Please reopen if you think there's more things to discuss. Thank you for your contributions. 18 | -------------------------------------------------------------------------------- /packages/ngx-imready/.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 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.angular/cache 36 | /.sass-cache 37 | /connect.lock 38 | /coverage 39 | /libpeerconnection.log 40 | npm-debug.log 41 | yarn-error.log 42 | testem.log 43 | /typings 44 | 45 | # System Files 46 | .DS_Store 47 | Thumbs.db 48 | -------------------------------------------------------------------------------- /packages/imready/src/loaders/ImageLoader.ts: -------------------------------------------------------------------------------- 1 | /* 2 | egjs-imready 3 | Copyright (c) 2020-present NAVER Corp. 4 | MIT license 5 | */ 6 | import { IS_IE } from "../consts"; 7 | import Loader from "./Loader"; 8 | 9 | export default class ImageLoader extends Loader { 10 | public static EVENTS = ["load", "error"]; 11 | public checkElement() { 12 | const element = this.element; 13 | const src = element.getAttribute("src"); 14 | 15 | if (element.complete) { 16 | if (src) { 17 | // complete 18 | if (!element.naturalWidth) { 19 | this.onAlreadyError(element); 20 | } 21 | return false; 22 | } else { 23 | // Using an external lazy loading module 24 | this.onAlreadyPreReady(); 25 | } 26 | } 27 | this.addEvents(); 28 | IS_IE && element.setAttribute("src", src!); 29 | return true; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/ngx-imready/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 | "sourceMap": true, 8 | "declaration": false, 9 | "downlevelIteration": true, 10 | "experimentalDecorators": true, 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "paths": { 14 | "ngx-imready": [ 15 | "dist/ngx-imready/ngx-imready", 16 | "dist/ngx-imready", 17 | "dist/ngx-imready/ngx-imready", 18 | "dist/ngx-imready" 19 | ] 20 | }, 21 | "target": "ES2022", 22 | "module": "es2020", 23 | "lib": [ 24 | "es2018", 25 | "dom" 26 | ], 27 | "useDefineForClassFields": false 28 | }, 29 | "angularCompilerOptions": { 30 | "enableI18nLegacyMessageIdFormat": false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/imready/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "plugins": [ 5 | "@typescript-eslint" 6 | ], 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:@typescript-eslint/eslint-recommended", 10 | "plugin:@typescript-eslint/recommended" 11 | ], 12 | "rules": { 13 | "@typescript-eslint/explicit-module-boundary-types": "off", 14 | "@typescript-eslint/no-explicit-any": "off", 15 | "@typescript-eslint/no-non-null-assertion": "off", 16 | "@typescript-eslint/no-empty-interface": "off", 17 | "@typescript-eslint/ban-types": "off", 18 | "no-empty-interface": "off", 19 | "quotes":"error", 20 | "comma-dangle": [ 21 | "error", 22 | "always-multiline" 23 | ], 24 | "semi": [ 25 | "error", 26 | "always" 27 | ] 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/vue2-imready/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "downlevelIteration": true, 13 | "sourceMap": true, 14 | "baseUrl": ".", 15 | "types": [ 16 | "webpack-env" 17 | ], 18 | "paths": { 19 | "@/*": [ 20 | "src/*" 21 | ] 22 | }, 23 | "lib": [ 24 | "esnext", 25 | "dom", 26 | "dom.iterable", 27 | "scripthost" 28 | ] 29 | }, 30 | "include": [ 31 | "src/**/*.ts", 32 | "src/**/*.tsx", 33 | "src/**/*.vue", 34 | "tests/**/*.ts", 35 | "tests/**/*.tsx", 36 | "stories/**/*.ts", 37 | "stories/**/*.tsx", 38 | "stories/**/*.vue" 39 | ], 40 | "exclude": [ 41 | "node_modules" 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /packages/imready/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [1.4.1](https://github.com/naver/egjs-imready/compare/@egjs/imready@1.4.0...@egjs/imready@1.4.1) (2023-02-24) 7 | 8 | 9 | ### :mega: Other 10 | 11 | * add missing readme to ImReady ([97120ff](https://github.com/naver/egjs-imready/commit/97120ff8fe64b7132242d28a1b02730ddd8a0306)) 12 | 13 | 14 | 15 | ## 1.4.0 (2023-02-24) 16 | 17 | 18 | ### :house: Code Refactoring 19 | 20 | * apply CFCs (#35) ([50ec76f](https://github.com/naver/egjs-imready/commit/50ec76f2660a4884c34f5f0823e95c0c87d30df8)) 21 | * apply lerna (#33) ([987c2dd](https://github.com/naver/egjs-imready/commit/987c2dde0ed729e4695d640a35c11371c68570e1)) 22 | 23 | 24 | ### :mega: Other 25 | 26 | * update packages versions ([9f0dc6b](https://github.com/naver/egjs-imready/commit/9f0dc6b6954f7c0f2cbdffd5dde627c8332fa2b6)) 27 | -------------------------------------------------------------------------------- /packages/svelte-imready/src/svelte-imready/useReady.ts: -------------------------------------------------------------------------------- 1 | import { ImReadyReactiveProps } from "@egjs/imready"; 2 | import { SvelteImReadyResult, useImReady } from "./useImReady"; 3 | 4 | /** 5 | * Svelte hook to check if the images or videos are loaded. (only `useReady` and `useError` are true) Since this is deprecated, use useImReady instead. 6 | * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 react hook.(`useReady`와 `useError`만 true) deprecated 되었으므로 useImReady를 이용해주세요. 7 | * @deprecated 8 | * @memberof SvelteImReady 9 | * @param - Svelte ImReady's props Svelte ImReady의 props. 10 | * @example 11 | * ```js 12 | * import { useReady } from "@egjs/react-imready"; 13 | * 14 | * const { 15 | * register, 16 | * isReady, 17 | * hasError, 18 | * } = useReady({ 19 | * selector: "img", 20 | * }); 21 | * // <div use:register></div> 22 | * ``` 23 | */ 24 | export function useReady( 25 | props: Partial = {} 26 | ): SvelteImReadyResult { 27 | return useImReady(props); 28 | } 29 | -------------------------------------------------------------------------------- /packages/react-imready/src/react-imready/usePreReady.tsx: -------------------------------------------------------------------------------- 1 | import { ImReadyReactiveProps } from "@egjs/imready"; 2 | import { ReactImReadyResult, useImReady } from "./useImReady"; 3 | 4 | /** 5 | * React hook to check if the images or videos are loaded. Since this is deprecated, use useImReady instead. 6 | * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 react hook. deprecated 되었으므로 useImReady를 이용해주세요. 7 | * @deprecated 8 | * @memberof ReactImReady 9 | * @param - React ImReady's props React ImReady의 props. 10 | * @example 11 | * ```js 12 | * import { usePreReady } from "@egjs/react-imready"; 13 | * 14 | * function App() { 15 | * const { 16 | * register, 17 | * isPreReady, 18 | * hasError, 19 | * } = usePreReady({ 20 | * selector: "img", 21 | * }); 22 | * // <div ref={register()}></div> 23 | * } 24 | * ``` 25 | */ 26 | export function usePreReady( 27 | props: Partial = {} 28 | ): ReactImReadyResult { 29 | return useImReady(props); 30 | } 31 | -------------------------------------------------------------------------------- /packages/svelte-imready/src/svelte-imready/usePreReady.ts: -------------------------------------------------------------------------------- 1 | import { ImReadyReactiveProps } from "@egjs/imready"; 2 | import { SvelteImReadyResult, useImReady } from "./useImReady"; 3 | 4 | /** 5 | * Svelte hook to check if the images or videos are loaded. (only usePreReady and useError are true) Since this is deprecated, use useImReady instead. 6 | * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 svelte hook.(usePreReady와 useError만 true) deprecated 되었으므로 useImReady를 이용해주세요. 7 | * @deprecated 8 | * @memberof SvelteImReady 9 | * @param - Svelte ImReady's props Svelte ImReady의 props. 10 | * @example 11 | * ```js 12 | * import { usePreReady } from "@egjs/svelte-imready"; 13 | * 14 | * const { 15 | * register, 16 | * isPreReady, 17 | * hasError, 18 | * } = usePreReady({ 19 | * selector: "img", 20 | * }); 21 | * // <div use:register></div> 22 | * ``` 23 | */ 24 | export function usePreReady( 25 | props: Partial = {} 26 | ): SvelteImReadyResult { 27 | return useImReady(props); 28 | } 29 | -------------------------------------------------------------------------------- /packages/vue-imready/src/vue-imready/useReady.ts: -------------------------------------------------------------------------------- 1 | import { ImReadyReactiveProps } from "@egjs/imready"; 2 | import { useImReady, VueImReadyResult } from "./useImReady"; 3 | 4 | /** 5 | * Vue hook to check if the images or videos are loaded. (only `useReady` and `useError` are true) Since this is deprecated, use useImReady instead. 6 | * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 vue hook.(`useReady`와 `useError`만 true) deprecated 되었으므로 useImReady를 이용해주세요. 7 | * @deprecated 8 | * @memberof VueImReady 9 | * @param - Vue ImReady's props Vue ImReady의 props. 10 | * @example 11 | * ```js 12 | * import { useReady } from "@egjs/vue-imready"; 13 | * 14 | * setup() { 15 | * const im = useReady({ 16 | * selector: "img", 17 | * }); 18 | * 19 | * return { 20 | * im, 21 | * } 22 | * } 23 | * // {{im.isReady}} 24 | * // <div v-bind:ref="im.register()"></div> 25 | * ``` 26 | */ 27 | export function useReady( 28 | props: Partial = {} 29 | ): VueImReadyResult { 30 | return useImReady(props); 31 | } 32 | -------------------------------------------------------------------------------- /packages/vue-imready/src/vue-imready/usePreReady.ts: -------------------------------------------------------------------------------- 1 | import { ImReadyReactiveProps } from "@egjs/imready"; 2 | import { useImReady, VueImReadyResult } from "./useImReady"; 3 | 4 | /** 5 | * Vue hook to check if the images or videos are loaded. (only usePreReady and useError are true) Since this is deprecated, use useImReady instead. 6 | * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 Vue hook.(usePreReady와 useError만 true) deprecated 되었으므로 useImReady를 이용해주세요. 7 | * @deprecated 8 | * @memberof VueImReady 9 | * @param - Vue ImReady's props Vue ImReady의 props. 10 | * @example 11 | * ```js 12 | * import { usePreReady } from "@egjs/vue-imready"; 13 | * 14 | * setup() { 15 | * const im = usePreReady({ 16 | * selector: "img", 17 | * }); 18 | * 19 | * return { 20 | * im, 21 | * } 22 | * } 23 | * // {{im.isPreReady}} 24 | * // <div v-bind:ref="im.register()"></div> 25 | * ``` 26 | */ 27 | export function usePreReady( 28 | props: Partial = {} 29 | ): VueImReadyResult { 30 | return useImReady(props); 31 | } 32 | -------------------------------------------------------------------------------- /packages/vue2-imready/src/useReady.ts: -------------------------------------------------------------------------------- 1 | import { ImReadyReactiveProps } from "@egjs/imready"; 2 | import { useImReady, VueImReadyResult } from "./useImReady"; 3 | 4 | /** 5 | * Vue hook to check if the images or videos are loaded. (only `useReady` and `useError` are true) Since this is deprecated, use useImReady instead. 6 | * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 vue hook.(`useReady`와 `useError`만 true) deprecated 되었으므로 useImReady를 이용해주세요. 7 | * @deprecated 8 | * @memberof Vue2ImReady 9 | * @param - Vue ImReady's props Vue ImReady의 props. 10 | * @example 11 | * ```js 12 | * import { useReady } from "@egjs/vue2-imready"; 13 | * 14 | * setup() { 15 | * const im = useReady({ 16 | * selector: "img", 17 | * }); 18 | * 19 | * return { 20 | * im, 21 | * container: im.register(), 22 | * } 23 | * } 24 | * // {{im.isReady}} 25 | * // <div v-bind:ref="container"></div> 26 | * ``` 27 | */ 28 | export function useReady(props: Partial = {}): VueImReadyResult { 29 | return useImReady(props); 30 | } 31 | -------------------------------------------------------------------------------- /packages/imready/src/loaders/VideoLoader.ts: -------------------------------------------------------------------------------- 1 | /* 2 | egjs-imready 3 | Copyright (c) 2020-present NAVER Corp. 4 | MIT license 5 | */ 6 | import Loader from "./Loader"; 7 | 8 | export default class VideoLoader extends Loader { 9 | public static EVENTS = ["loadedmetadata", "error"]; 10 | public checkElement() { 11 | const element = this.element; 12 | // HAVE_NOTHING: 0, no information whether or not the audio/video is ready 13 | // HAVE_METADATA: 1, HAVE_METADATA - metadata for the audio/video is ready 14 | // HAVE_CURRENT_DATA: 2, data for the current playback position is available, but not enough data to play next frame/millisecond 15 | // HAVE_FUTURE_DATA: 3, data for the current and at least the next frame is available 16 | // HAVE_ENOUGH_DATA: 4, enough data available to start playing 17 | if (element.readyState >= 1) { 18 | return false; 19 | } 20 | if (element.error) { 21 | this.onAlreadyError(element); 22 | return false; 23 | } 24 | this.addEvents(); 25 | return true; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/vue2-imready/src/usePreReady.ts: -------------------------------------------------------------------------------- 1 | import { ImReadyReactiveProps } from "@egjs/imready"; 2 | import { useImReady, VueImReadyResult } from "./useImReady"; 3 | 4 | /** 5 | * Vue hook to check if the images or videos are loaded. (only usePreReady and useError are true) Since this is deprecated, use useImReady instead. 6 | * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 Vue hook. (usePreReady와 useError만 true) deprecated 되었으므로 useImReady를 이용해주세요. 7 | * @deprecated 8 | * @memberof Vue2ImReady 9 | * @param - Vue ImReady's props Vue ImReady의 props. 10 | * @example 11 | * ```js 12 | * import { usePreReady } from "@egjs/vue2-imready"; 13 | * 14 | * setup() { 15 | * const im = usePreReady({ 16 | * selector: "img", 17 | * }); 18 | * 19 | * return { 20 | * im, 21 | * container: im.register(), 22 | * } 23 | * } 24 | * // {{im.isPreReady}} 25 | * // <div v-bind:ref="container"></div> 26 | * ``` 27 | */ 28 | export function usePreReady(props: Partial = {}): VueImReadyResult { 29 | return useImReady(props); 30 | } 31 | -------------------------------------------------------------------------------- /config/commit.template: -------------------------------------------------------------------------------- 1 | ========== Commit Format ========== 2 | (): 3 | 4 | (optional) 5 | 6 |