├── .babelrc ├── .github └── workflows │ ├── nodejs.yml │ └── npmpublish.yml ├── .gitignore ├── LICENSE ├── README.md ├── jest.setup.js ├── package.json ├── public ├── global.css └── index.html ├── rollup.config.js ├── src ├── dev │ ├── App.svelte │ └── main.ts └── lib │ ├── Fullscreen.svelte │ └── Fullscreen.test.js ├── svelte.config.js ├── tsconfig.json └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]] 3 | } 4 | -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | name: Node.js CI 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | build_test: 7 | runs-on: ${{ matrix.os }} 8 | strategy: 9 | matrix: 10 | node-version: [12, 14] 11 | os: [ubuntu-latest, windows-latest, macOS-latest] 12 | steps: 13 | - uses: actions/checkout@v2 14 | - name: Use Node.js ${{ matrix.node-version }} 15 | uses: actions/setup-node@v1 16 | with: 17 | node-version: ${{ matrix.node-version }} 18 | - name: Install dependencies 19 | run: yarn install --frozen-lockfile 20 | - name: Tests and coverage 21 | run: yarn coverage 22 | - name: Build 23 | run: yarn build 24 | -------------------------------------------------------------------------------- /.github/workflows/npmpublish.yml: -------------------------------------------------------------------------------- 1 | name: Node.js Package 2 | 3 | on: 4 | release: 5 | types: [created] 6 | 7 | jobs: 8 | npm-publish: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | - uses: actions/setup-node@v1 13 | with: 14 | node-version: 12 15 | registry-url: https://registry.npmjs.org/ 16 | - name: Install dependencies 17 | run: yarn install --frozen-lockfile 18 | - name: Build 19 | run: yarn build 20 | - name: Npm publish 21 | run: npm publish --access public 22 | env: 23 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | build 4 | coverage -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 N.A.D.A. 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte FullScreen 2 | 3 | [![npm version](https://badge.fury.io/js/svelte-fullscreen.svg)](https://www.npmjs.com/package/svelte-fullscreen) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/svelte-fullscreen/blob/master/LICENSE) • [![Node.js CI](https://github.com/andrelmlins/svelte-fullscreen/actions/workflows/nodejs.yml/badge.svg)](https://github.com/andrelmlins/svelte-fullscreen/actions/workflows/nodejs.yml) • [![Netlify Status](https://api.netlify.com/api/v1/badges/30d7b769-4f7a-40db-9575-032fca47b888/deploy-status)](https://app.netlify.com/sites/svelte-fullscreen/deploys) • [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/andrelmlins/svelte-fullscreen.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/andrelmlins/svelte-fullscreen/context:javascript) 4 | 5 | Component that performs fullscreen in DOM Elements 6 | 7 | ## Installation 8 | 9 | ``` 10 | npm i svelte-fullscreen 11 | // OR 12 | yarn add svelte-fullscreen 13 | ``` 14 | 15 | Note: to use this library in sapper, install as devDependency. See the [link](https://github.com/sveltejs/sapper-template#using-external-components). 16 | 17 | ## Demo [Link](https://svelte-fullscreen.netlify.com/) 18 | 19 | Local demo: 20 | 21 | ``` 22 | git clone https://github.com/andrelmlins/svelte-fullscreen.git 23 | cd svelte-fullscreen 24 | yarn install && yarn start 25 | ``` 26 | 27 | ## Examples 28 | 29 | An example of how to use the library: 30 | 31 | ```svelte 32 | 35 | 36 | 43 | 44 | 45 |
46 | 47 | 48 |
49 | 50 | ``` 51 | 52 | ## Properties 53 | 54 | Raw component props (before transform): 55 | 56 | | Prop | Type | Description | 57 | | ------ | ---- | -------------- | 58 | | change | func | Call in change | 59 | | error | func | Call in error | 60 | 61 | ## Slot Properties 62 | 63 | Raw component props (before transform): 64 | 65 | | Prop | Type | Description | 66 | | --------- | ---- | -------------------------- | 67 | | onToggle | func | Call for fullscreen toggle | 68 | | onExit | func | Call for fullscreen exit | 69 | | onRequest | func | Call for fullscreen enter | 70 | 71 | ## Browsers Support 72 | 73 | You can see the list of supported browsers [here](https://caniuse.com/fullscreen) 74 | 75 | ![Browsers support](assets/browser-support.png) 76 | 77 | ## License 78 | 79 | Svelte FullScreen is open source software [licensed as MIT](https://github.com/andrelmlins/svelte-fullscreen/blob/master/LICENSE). 80 | -------------------------------------------------------------------------------- /jest.setup.js: -------------------------------------------------------------------------------- 1 | jest.mock("screenfull", () => ({ 2 | default: { on: jest.fn(), off: jest.fn() }, 3 | })); 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-fullscreen", 3 | "version": "2.0.0", 4 | "description": "Component that performs fullscreen in DOM Elements", 5 | "repository": "https://github.com/andrelmlins/svelte-fullscreen", 6 | "author": "André Lins (https://andrelmlins.github.io/)", 7 | "license": "MIT", 8 | "svelte": "dist/Fullscreen.svelte", 9 | "module": "dist/index.mjs", 10 | "main": "dist/index.js", 11 | "types": "dist/index.d.ts", 12 | "homepage": "https://svelte-fullscreen.netlify.com/", 13 | "files": [ 14 | "dist", 15 | "README.md" 16 | ], 17 | "dependencies": { 18 | "screenfull": "^5.1.0" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.15.0", 22 | "@babel/preset-env": "^7.15.0", 23 | "@rollup/plugin-typescript": "^8.2.5", 24 | "@testing-library/jest-dom": "^5.14.1", 25 | "@testing-library/svelte": "^3.0.3", 26 | "@tsconfig/svelte": "^2.0.1", 27 | "babel-jest": "^27.0.6", 28 | "jest": "^26.4.0", 29 | "rollup": "^2.26.8", 30 | "rollup-plugin-commonjs": "^10.1.0", 31 | "rollup-plugin-livereload": "^2.0.0", 32 | "rollup-plugin-node-resolve": "^5.2.0", 33 | "rollup-plugin-svelte": "^6.0.0", 34 | "rollup-plugin-terser": "^7.0.1", 35 | "sirv-cli": "^1.0.6", 36 | "svelte": "^3.42.4", 37 | "svelte-dts": "^0.3.5", 38 | "svelte-jester": "1.1.5", 39 | "svelte-preprocess": "^4.8.0", 40 | "svelte-transpile-typescript": "^0.1.2", 41 | "ts-jest": "^27.0.5", 42 | "tslib": "^2.3.1", 43 | "typescript": "4.3.5" 44 | }, 45 | "scripts": { 46 | "build": "rollup -c && svelte-transpile-typescript -i src/lib/Fullscreen.svelte -o dist/Fullscreen.svelte", 47 | "dev": "rollup -c -w", 48 | "start": "sirv public", 49 | "test": "jest src/lib", 50 | "coverage": "npm run test --coverage" 51 | }, 52 | "bugs": { 53 | "url": "https://github.com/andrelmlins/svelte-fullscreen/issues" 54 | }, 55 | "jest": { 56 | "setupFilesAfterEnv": [ 57 | "@testing-library/jest-dom/extend-expect", 58 | "/jest.setup.js" 59 | ], 60 | "transform": { 61 | "^.+\\.js$": "babel-jest", 62 | "^.+\\.svelte$": [ 63 | "svelte-jester", 64 | { 65 | "preprocess": true 66 | } 67 | ], 68 | "^.+\\.ts$": "ts-jest" 69 | }, 70 | "moduleFileExtensions": [ 71 | "js", 72 | "svelte" 73 | ] 74 | }, 75 | "keywords": [ 76 | "svelte", 77 | "fullscreen" 78 | ] 79 | } 80 | -------------------------------------------------------------------------------- /public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | #root { 4 | height: 100%; 5 | margin: 0; 6 | font-family: "Roboto", sans-serif; 7 | } 8 | body { 9 | background-color: #d0ceba; 10 | } 11 | 12 | /* Github corner */ 13 | .github-corner:hover .octo-arm { 14 | animation: octocat-wave 560ms ease-in-out; 15 | } 16 | @keyframes octocat-wave { 17 | 0%, 18 | 100% { 19 | transform: rotate(0); 20 | } 21 | 20%, 22 | 60% { 23 | transform: rotate(-25deg); 24 | } 25 | 40%, 26 | 80% { 27 | transform: rotate(10deg); 28 | } 29 | } 30 | @media (max-width: 500px) { 31 | .github-corner:hover .octo-arm { 32 | animation: none; 33 | } 34 | .github-corner .octo-arm { 35 | animation: octocat-wave 560ms ease-in-out; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte Fullscreen 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /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 | import typescript from "@rollup/plugin-typescript"; 7 | import autoPreprocess from "svelte-preprocess"; 8 | import svelteDts from "svelte-dts"; 9 | import pkg from "./package.json"; 10 | 11 | const production = !process.env.ROLLUP_WATCH; 12 | 13 | export default [ 14 | { 15 | input: "src/dev/main.ts", 16 | output: { 17 | sourcemap: true, 18 | format: "iife", 19 | name: "app", 20 | file: "public/build/bundle.js", 21 | }, 22 | plugins: [ 23 | svelte({ 24 | dev: !production, 25 | css: (css) => css.write("bundle.css"), 26 | preprocess: autoPreprocess(), 27 | }), 28 | typescript({ sourceMap: !production }), 29 | resolve({ 30 | browser: true, 31 | dedupe: (importee) => 32 | importee === "svelte" || importee.startsWith("svelte/"), 33 | }), 34 | commonjs(), 35 | !production && serve(), 36 | !production && livereload("public"), 37 | production && terser(), 38 | ], 39 | watch: { clearScreen: false }, 40 | }, 41 | { 42 | input: "src/lib/Fullscreen.svelte", 43 | output: { file: pkg.main, format: "umd", name: "Fullscreen" }, 44 | plugins: [ 45 | svelte({ preprocess: autoPreprocess() }), 46 | typescript({ sourceMap: !production }), 47 | resolve(), 48 | commonjs(), 49 | ], 50 | }, 51 | { 52 | input: "src/lib/Fullscreen.svelte", 53 | output: { file: pkg.module, format: "es" }, 54 | external: ["svelte/internal"], 55 | plugins: [ 56 | svelteDts({ output: pkg.types }), 57 | svelte({ preprocess: autoPreprocess() }), 58 | typescript({ sourceMap: !production }), 59 | commonjs(), 60 | ], 61 | }, 62 | ]; 63 | 64 | function serve() { 65 | let started = false; 66 | 67 | return { 68 | writeBundle() { 69 | if (!started) { 70 | started = true; 71 | 72 | require("child_process").spawn("npm", ["run", "start", "--", "--dev"], { 73 | stdio: ["ignore", "inherit", "inherit"], 74 | shell: true, 75 | }); 76 | } 77 | }, 78 | }; 79 | } 80 | -------------------------------------------------------------------------------- /src/dev/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

Svelte Fullscreen

7 |

Component that performs fullscreen in DOM Elements

8 |
9 |
10 |
11 | 12 |
13 | 14 | 15 |
16 | 17 |
18 |
19 | 20 |
onToggle()}> 21 |

Click Here

22 |
23 | 24 |
25 |
26 |
27 | 28 | 106 | -------------------------------------------------------------------------------- /src/dev/main.ts: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ target: document.body }); 4 | 5 | export default app; 6 | -------------------------------------------------------------------------------- /src/lib/Fullscreen.svelte: -------------------------------------------------------------------------------- 1 | 40 | 41 |
42 | 43 | -------------------------------------------------------------------------------- /src/lib/Fullscreen.test.js: -------------------------------------------------------------------------------- 1 | import { render } from "@testing-library/svelte"; 2 | import SvelteFullscreen from "./Fullscreen.svelte"; 3 | 4 | test("shows proper heading when rendered", () => { 5 | const { container } = render(SvelteFullscreen); 6 | 7 | expect(container.firstChild).not.toBe(null); 8 | }); 9 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | const sveltePreprocess = require("svelte-preprocess"); 2 | 3 | module.exports = { 4 | preprocess: sveltePreprocess(), 5 | }; 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "include": ["src/**/*"], 4 | "compilerOptions": { 5 | "module": "esNext", 6 | "target": "esnext", 7 | "moduleResolution": "node", 8 | "strict": true, 9 | "types": ["svelte"] 10 | }, 11 | "exclude": ["node_modules/*", "public/*"] 12 | } 13 | --------------------------------------------------------------------------------