├── .gitignore ├── ss-01.gif ├── ss-02.gif ├── ss-03.gif ├── .stylelintrc ├── test ├── grid.png ├── spec │ ├── .eslintrc.json │ ├── style │ │ ├── page-c1.html │ │ └── page.html │ ├── sel_contain.html │ ├── bars │ │ ├── page.html │ │ ├── page-c1.html │ │ └── style.css │ ├── position │ │ ├── style.css │ │ ├── page-c1.html │ │ ├── page-c2.html │ │ └── page.html │ ├── keys.html │ ├── sync.html │ ├── common │ │ ├── page-c1.html │ │ └── page.html │ ├── select.html │ ├── focus.html │ ├── scroll.html │ ├── blockingDisabled.html │ ├── keys.js │ ├── style.js │ ├── size.html │ ├── bars.js │ ├── options.js │ ├── constructor.js │ ├── event-flow.js │ ├── event.js │ └── scroll.js ├── scroll │ ├── style.css │ ├── index-c1.html │ └── index.html ├── index-limit.html ├── index.html ├── grid.svg ├── utils.js ├── focus │ └── index.html └── httpd.js ├── .eslintrc.json ├── .eslintignore ├── src ├── .eslintrc.json ├── face.html └── default.scss ├── bower.json ├── LICENSE ├── package.json ├── webpack.config.js ├── README.md ├── plain-overlay-limit.min.js └── plain-overlay-limit-sync.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | node_modules 3 | -------------------------------------------------------------------------------- /ss-01.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anseki/plain-overlay/HEAD/ss-01.gif -------------------------------------------------------------------------------- /ss-02.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anseki/plain-overlay/HEAD/ss-02.gif -------------------------------------------------------------------------------- /ss-03.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anseki/plain-overlay/HEAD/ss-03.gif -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../_common/files/stylelintrc.json" 3 | } 4 | -------------------------------------------------------------------------------- /test/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anseki/plain-overlay/HEAD/test/grid.png -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": "../../_common/files/eslintrc.json" 4 | } 5 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | *.min.js 2 | *.esm.js 3 | test/plain-overlay-limit-sync.js 4 | test/plain-overlay-limit.js 5 | test/plain-overlay-sync.js 6 | test/plain-overlay.js 7 | -------------------------------------------------------------------------------- /src/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": {"browser": true, "es6": true}, 3 | "parserOptions": {"sourceType": "module"}, 4 | "rules": { 5 | "no-underscore-dangle": [2, {"allow": ["_id"]}] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /test/spec/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": {"browser": true, "jasmine": true}, 3 | "globals": {"loadPage": false}, 4 | "rules": { 5 | "no-var": "off", 6 | "prefer-arrow-callback": "off", 7 | "object-shorthand": "off", 8 | "no-underscore-dangle": [2, {"allow": ["_id"]}] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /test/spec/style/page-c1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 | 13 |
1
14 |
2
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /test/spec/sel_contain.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

ABCDEFGHIJ

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /test/spec/style/page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
1
10 |
2
11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /test/spec/bars/page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
x
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
barbeforeafter
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /test/scroll/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-size: 18px; 3 | background-color: rgba(0, 128, 0, 0.4); 4 | } 5 | 6 | #div1 { 7 | margin: 10px; 8 | padding: 5px; 9 | border: 2px solid #ccc; 10 | height: 200px; 11 | overflow: auto; 12 | } 13 | 14 | iframe { 15 | display: block; 16 | width: 90%; 17 | margin: 10px; 18 | border: 2px solid #bf4949; 19 | height: 200px; 20 | } 21 | 22 | .face { 23 | box-sizing: border-box; 24 | width: 100%; 25 | height: 100%; 26 | border: 1px solid red; 27 | } 28 | 29 | input { 30 | width: 150px; 31 | } 32 | 33 | textarea { 34 | width: 150px; 35 | height: 3em; 36 | } 37 | -------------------------------------------------------------------------------- /test/spec/bars/page-c1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 |
18 | 19 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /test/spec/position/style.css: -------------------------------------------------------------------------------- 1 | 2 | .target { 3 | box-sizing: border-box; 4 | width: 200px; 5 | height: 150px; 6 | background-color: rgb(193, 241, 197); 7 | border-color: darkmagenta; 8 | border-style: solid; 9 | border-width: 0; 10 | } 11 | 12 | .target p { 13 | background-color: rgb(185, 223, 255); 14 | font-size: 14px; 15 | } 16 | 17 | .target .check-z-index { 18 | position: relative; 19 | display: inline-block; 20 | width: 5em; 21 | height: 1em; 22 | } 23 | 24 | .target .check-z-index > span { 25 | position: absolute; 26 | left: 1em; 27 | top: 0; 28 | font-weight: bold; 29 | color: rgb(185, 223, 255); 30 | z-index: 99; 31 | } 32 | 33 | .stage { 34 | width: 600px; 35 | } 36 | 37 | .head { 38 | font-family: monospace; 39 | font-size: 1.2em; 40 | font-weight: bold; 41 | } 42 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "plain-overlay", 3 | "version": "1.4.17", 4 | "description": "The simple library for customizable overlay which covers a page, elements or iframe-windows.", 5 | "keywords": [ 6 | "overlay", 7 | "busy", 8 | "loading", 9 | "form", 10 | "input", 11 | "progress", 12 | "ui", 13 | "simple", 14 | "customizable", 15 | "iframe", 16 | "window" 17 | ], 18 | "main": "plain-overlay.min.js", 19 | "homepage": "https://anseki.github.io/plain-overlay/", 20 | "repository": { 21 | "type": "git", 22 | "url": "git://github.com/anseki/plain-overlay.git" 23 | }, 24 | "moduleType": [], 25 | "ignore": [ 26 | "**/.*", 27 | "node_modules", 28 | "bower_components", 29 | "test", 30 | "tests" 31 | ], 32 | "license": "MIT", 33 | "authors": [ 34 | "anseki " 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /test/spec/position/page-c1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 20 | 21 | 22 | 23 |
24 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

25 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

26 |
27 | 28 |
29 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

30 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /test/spec/position/page-c2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 21 | 22 | 23 | 24 |
25 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

26 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

27 |
28 | 29 |
30 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

31 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 anseki 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. -------------------------------------------------------------------------------- /test/spec/bars/style.css: -------------------------------------------------------------------------------- 1 | 2 | th { 3 | background-color: #ddd; 4 | } 5 | 6 | td > iframe { 7 | display: block; 8 | width: 80px; 9 | height: 80px; 10 | border: 1px solid #ccc; 11 | box-sizing: border-box; 12 | } 13 | 14 | .spacer { 15 | box-sizing: border-box; 16 | width: 20px; 17 | height: 20px; 18 | border: 2px solid red; 19 | } 20 | 21 | .width .spacer { 22 | width: 120px; 23 | } 24 | 25 | .height .spacer { 26 | height: 120px; 27 | } 28 | 29 | .bar-left { 30 | direction: rtl; /* Make `writing-mode: rl-tb` in Trident and Edge */ 31 | } 32 | 33 | .bar-top { 34 | writing-mode: vertical-lr; /* For other than Trident and Edge */ 35 | direction: rtl; /* For other than Trident and Edge */ 36 | /* stylelint-disable-next-line property-no-vendor-prefix */ 37 | -ms-writing-mode: bt-lr; /* Override `writing-mode` and `direction` in Trident and Edge */ 38 | } 39 | 40 | .bar-left.bar-top { 41 | writing-mode: vertical-rl; /* For other than Trident and Edge */ 42 | direction: rtl; /* For other than Trident and Edge */ 43 | /* stylelint-disable-next-line property-no-vendor-prefix */ 44 | -ms-writing-mode: bt-rl; /* Override `writing-mode` and `direction` in Trident and Edge */ 45 | } 46 | -------------------------------------------------------------------------------- /test/spec/keys.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 14 | 15 |
16 | 21 |

text

22 | 27 | 32 | 37 |
38 | 39 |
40 | 45 |
46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /test/index-limit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Jasmine Spec Runner 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Jasmine Spec Runner 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /test/spec/sync.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 22 | 23 | 24 | 25 |

(#elm-plain)

26 |

(#elm-plain2)

27 | 28 |

(#elm-ov-v)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

29 | 30 |

(#elm-ov-a)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

31 | 32 |

(#elm-ov-h)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /test/spec/common/page-c1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 20 | 21 | 22 |

(page-c1.html)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

23 | 24 |

(#elm-plain)

25 | 26 |

(#elm-ov-v)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

27 | 28 |

(#elm-ov-a)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

29 | 30 |

(#elm-ov-h)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /test/spec/common/page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 31 | 32 | 33 | 34 |

(#elm-plain)

35 |

(#elm-plain2)

36 | 37 |

(#elm-ov-v)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

38 | 39 |

(#elm-ov-a)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

40 | 41 |

(#elm-ov-h)Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /test/spec/select.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |

ABC

47 | 48 |
49 |

DEF

50 |
51 | 52 |

GHI

53 | 54 |

JKL

55 |

MNO

56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /test/spec/focus.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 18 | 19 | 20 | 21 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

22 | 23 | 24 |
25 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

26 | 27 |
28 | 29 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

30 | 31 |
32 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

33 | 34 |
35 | 36 |
37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

38 | 39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /test/spec/scroll.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 24 | 25 | 26 | 27 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

28 | 29 |
30 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

31 |
32 |
33 | 34 |
35 | 36 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

37 | 38 | 39 |
40 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

41 |
42 |
43 | 44 |
45 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

46 |
47 |
48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /test/spec/blockingDisabled.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 18 | 19 | 20 | 21 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
22 | 23 |

L0rem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

24 | 25 |
26 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
27 | 28 |

L1rem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

29 |
30 | 31 |
32 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
33 | 34 |

L2rem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

35 |
36 | 37 |
38 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
39 | 40 |

L3rem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "plain-overlay", 3 | "version": "1.4.17", 4 | "title": "PlainOverlay", 5 | "description": "The simple library for customizable overlay which covers a page, elements or iframe-windows.", 6 | "keywords": [ 7 | "overlay", 8 | "busy", 9 | "loading", 10 | "form", 11 | "input", 12 | "progress", 13 | "ui", 14 | "simple", 15 | "customizable", 16 | "iframe", 17 | "window" 18 | ], 19 | "main": "plain-overlay.min.js", 20 | "module": "plain-overlay.esm.js", 21 | "jsnext:main": "plain-overlay.esm.js", 22 | "files": [ 23 | "plain-overlay?(-limit)?(-sync)?(-debug).@(min.js|esm.js)", 24 | "bower.json" 25 | ], 26 | "devDependencies": { 27 | "@babel/core": "^7.14.3", 28 | "@babel/preset-env": "^7.14.2", 29 | "anim-event": "^1.0.17", 30 | "autoprefixer": "^10.2.6", 31 | "babel-core": "^7.0.0-bridge.0", 32 | "babel-loader": "^7.1.5", 33 | "cross-env": "^7.0.3", 34 | "cssprefix": "^2.0.17", 35 | "fibers": "^5.0.0", 36 | "htmlclean": "^3.0.8", 37 | "htmlclean-loader": "^1.0.12", 38 | "jasmine-core": "^3.7.1", 39 | "log4js": "^6.4.0", 40 | "m-class-list": "^1.1.10", 41 | "node-static-alias": "^1.1.2", 42 | "post-compile-webpack-plugin": "^0.1.2", 43 | "postcss": "^8.3.0", 44 | "postcss-loader": "^4.3.0", 45 | "pre-proc": "^1.0.2", 46 | "pre-proc-loader": "^3.0.3", 47 | "sass": "^1.34.0", 48 | "sass-loader": "^10.2.0", 49 | "skeleton-loader": "^2.0.0", 50 | "stats-filelist": "^1.0.1", 51 | "test-page-loader": "^1.0.8", 52 | "timed-transition": "^1.5.4", 53 | "webpack": "^4.46.0", 54 | "webpack-cli": "^3.3.12" 55 | }, 56 | "scripts": { 57 | "build": "cross-env NODE_ENV=production webpack --verbose", 58 | "dev": "webpack --verbose", 59 | "build-limit": "cross-env EDITION=limit NODE_ENV=production webpack --verbose", 60 | "dev-limit": "cross-env EDITION=limit webpack --verbose", 61 | "build-sync": "cross-env SYNC=yes NODE_ENV=production webpack --verbose", 62 | "dev-sync": "cross-env SYNC=yes webpack --verbose", 63 | "build-limit-sync": "cross-env EDITION=limit SYNC=yes NODE_ENV=production webpack --verbose", 64 | "dev-limit-sync": "cross-env EDITION=limit SYNC=yes webpack --verbose", 65 | "test": "node ./test/httpd" 66 | }, 67 | "homepage": "https://anseki.github.io/plain-overlay/", 68 | "repository": { 69 | "type": "git", 70 | "url": "git://github.com/anseki/plain-overlay.git" 71 | }, 72 | "bugs": "https://github.com/anseki/plain-overlay/issues", 73 | "license": "MIT", 74 | "author": { 75 | "name": "anseki", 76 | "url": "https://github.com/anseki" 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /test/grid.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/face.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 58 | 59 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
78 |
79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |
89 |
90 | 91 |
92 |
93 | 94 | 95 | 96 | 97 | 98 |
99 |
100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /src/default.scss: -------------------------------------------------------------------------------- 1 | @import "common"; 2 | 3 | $media: ""; 4 | %anim-init#{$media} { @include anim-init; } 5 | 6 | $app-id: plainoverlay; 7 | $app-doc: #{$app-id}-doc; 8 | $app-show: #{$app-id}-show; 9 | $app-hide: #{$app-id}-hide; 10 | $app-force: #{$app-id}-force; 11 | $app-body: #{$app-id}-body; 12 | 13 | $app-face: #{$app-id}-builtin-face; 14 | 15 | // $duration: 2500ms; // COPY: plain-overlay.js 16 | $duration: 200ms; // COPY: plain-overlay.js 17 | $overlay-bg: rgba(136, 136, 136, 0.6); 18 | $target-margin: 200px; 19 | 20 | // $face-01-duration: 3s; 21 | $face-01-duration: 1s; 22 | 23 | .#{$app-id} { 24 | position: absolute; 25 | left: 0; 26 | top: 0; 27 | overflow: hidden; 28 | 29 | background-color: $overlay-bg; 30 | cursor: wait; 31 | z-index: 9000; 32 | 33 | @extend %anim-init#{$media}; 34 | transition-property: opacity; 35 | transition-duration: $duration; 36 | transition-timing-function: linear; 37 | opacity: 0; 38 | 39 | &.#{$app-show} { 40 | opacity: 1; 41 | } 42 | 43 | &.#{$app-force} { 44 | transition-property: none; // Disable animation 45 | } 46 | 47 | &.#{$app-hide} { 48 | display: none; 49 | } 50 | 51 | &.#{$app-doc} { 52 | position: fixed; 53 | left: -$target-margin; 54 | top: -$target-margin; 55 | overflow: visible; 56 | padding: $target-margin; // For mobile browsers 57 | width: 100vw; // Webkit 538.1- bug, child element size by `vw` is ignored. 58 | height: 100vh; // Webkit 538.1- bug above, add this by way of precaution but height may have no problem. 59 | } 60 | } 61 | 62 | .#{$app-body} { 63 | width: 100%; 64 | height: 100%; 65 | 66 | .#{$app-id}.#{$app-doc} & { 67 | width: 100vw; 68 | height: 100vh; 69 | } 70 | 71 | display: flex; 72 | justify-content: center; 73 | align-items: center; 74 | } 75 | 76 | /* [FACE] */ 77 | 78 | .#{$app-face} { 79 | width: 90%; 80 | height: 90%; 81 | max-width: 320px; 82 | max-height: 320px; 83 | } 84 | 85 | ##{$app-face}-defs { 86 | width: 0; 87 | height: 0; 88 | position: fixed; // `absolute` might make scrollbars in RTL mode 89 | left: -100px; 90 | top: -100px; 91 | } 92 | 93 | ##{$app-face}_01 { 94 | 95 | circle, 96 | path { 97 | fill: none; 98 | stroke-width: 40px; 99 | } 100 | 101 | circle { 102 | stroke: #fff; 103 | opacity: 0.25; 104 | } 105 | 106 | path { 107 | stroke-linecap: round; 108 | /* Gecko bug, `url()` in outer stylesheet of the `svg` doesn't work. */ 109 | // stroke: url("##{$app-face}_01-grad"); 110 | } 111 | } 112 | 113 | .#{$app-id}:not(.#{$app-hide}) .#{$app-face}_01 { 114 | @extend %anim-init#{$media}; 115 | animation-name: #{$app-face}_01-spin; 116 | animation-duration: $face-01-duration; 117 | animation-timing-function: linear; 118 | animation-iteration-count: infinite; 119 | } 120 | 121 | @keyframes #{$app-face}_01-spin { 122 | from { transform: rotate(0deg); } 123 | to { transform: rotate(360deg); } 124 | } 125 | 126 | /* [/FACE] */ 127 | -------------------------------------------------------------------------------- /test/spec/keys.js: -------------------------------------------------------------------------------- 1 | describe('disableAccKeys()', function() { 2 | 'use strict'; 3 | 4 | var window, document, 5 | PlainOverlay, pageDone; 6 | 7 | function matchArray(array1, array2) { 8 | return array1.length === array2.length && 9 | array1.every(function(value1, i) { return value1 === array2[i]; }); 10 | } 11 | 12 | beforeEach(function(beforeDone) { 13 | loadPage('spec/keys.html', function(pageWindow, pageDocument, pageBody, done) { 14 | window = pageWindow; 15 | document = pageDocument; 16 | PlainOverlay = window.PlainOverlay; 17 | pageDone = done; 18 | 19 | beforeDone(); 20 | }); 21 | }); 22 | 23 | it('Check Edition (to be LIMIT: ' + !!self.top.LIMIT + ')', function(done) { 24 | expect(!!window.PlainOverlay.limit).toBe(!!self.top.LIMIT); 25 | 26 | pageDone(); 27 | done(); 28 | }); 29 | 30 | it('parses target and its tree', function(done) { 31 | var elements = Array.prototype.slice.call(document.querySelectorAll('#target, #target *')), 32 | target = document.getElementById('target'), 33 | html = target.innerHTML, 34 | overlay = new PlainOverlay(target); 35 | 36 | overlay.show(); 37 | expect(matchArray(window.targetElements, elements)).toBe(true); 38 | expect(target.innerHTML).not.toBe(html); 39 | expect(target.innerHTML).toMatch(/tabindex="-1"/); 40 | expect(target.innerHTML).not.toMatch(/accesskey="x"/); 41 | 42 | overlay.hide(true); 43 | expect(target.innerHTML).toBe(html); 44 | expect(target.innerHTML).not.toMatch(/tabindex="-1"/); 45 | expect(target.innerHTML).toMatch(/accesskey="x"/); 46 | 47 | window.setTitle('disableAccKeys() #target'); 48 | pageDone(); 49 | done(); 50 | }); 51 | 52 | it('parses tree in body except overlay', function(done) { 53 | var elements = Array.prototype.slice.call(document.querySelectorAll('html, body, body *')), 54 | target = document.body, 55 | html = target.innerHTML, 56 | overlay = new PlainOverlay(), 57 | saveElement1, saveElement2; 58 | 59 | overlay.show(); 60 | expect(matchArray(window.targetElements, elements)).toBe(true); 61 | saveElement1 = target.removeChild(PlainOverlay.insProps[overlay._id].elmOverlay); 62 | if (!self.top.LIMIT) { 63 | saveElement2 = target.removeChild(document.getElementById('plainoverlay-builtin-face-defs')); 64 | } 65 | expect(target.innerHTML).not.toBe(html); 66 | expect(target.innerHTML).toMatch(/tabindex="-1"/); 67 | expect(target.innerHTML).not.toMatch(/accesskey="x"/); 68 | target.appendChild(saveElement1); 69 | if (!self.top.LIMIT) { 70 | target.appendChild(saveElement2); 71 | } 72 | 73 | overlay.hide(true); 74 | saveElement1 = target.removeChild(PlainOverlay.insProps[overlay._id].elmOverlay); 75 | if (!self.top.LIMIT) { 76 | saveElement2 = target.removeChild(document.getElementById('plainoverlay-builtin-face-defs')); 77 | } 78 | expect(target.innerHTML).toBe(html); 79 | expect(target.innerHTML).not.toMatch(/tabindex="-1"/); 80 | expect(target.innerHTML).toMatch(/accesskey="x"/); 81 | 82 | window.setTitle('disableAccKeys() body'); 83 | pageDone(); 84 | done(); 85 | }); 86 | 87 | }); 88 | -------------------------------------------------------------------------------- /test/spec/style.js: -------------------------------------------------------------------------------- 1 | describe('style', function() { 2 | 'use strict'; 3 | 4 | var window, document, frmWindow, frmDocument, 5 | PlainOverlay, insProps, pageDone, 6 | overlay1, overlay2, frmOverlay1, frmOverlay2; 7 | 8 | beforeAll(function(beforeDone) { 9 | loadPage('spec/style/page.html', function(pageWindow, pageDocument, pageBody, done) { 10 | window = pageWindow; 11 | document = pageDocument; 12 | frmWindow = document.getElementById('iframe1').contentWindow; 13 | frmDocument = frmWindow.document; 14 | PlainOverlay = window.PlainOverlay; 15 | insProps = PlainOverlay.insProps; 16 | pageDone = done; 17 | 18 | beforeDone(); 19 | }, 'style'); 20 | }); 21 | 22 | afterAll(function() { 23 | pageDone(); 24 | }); 25 | 26 | it('Check Edition (to be LIMIT: ' + !!self.top.LIMIT + ')', function() { 27 | expect(!!window.PlainOverlay.limit).toBe(!!self.top.LIMIT); 28 | }); 29 | 30 | it('adds single element', function(done) { 31 | expect(document.getElementsByTagName('style').length).toBe(0); 32 | overlay1 = new PlainOverlay(document.getElementById('elm-1')); // 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 |
126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /test/focus/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 14 | 15 |
16 | target1 17 | 22 |

text

23 | 28 | 33 | 38 |
39 | 40 | target2 This accepts `focus` 41 | 42 |
43 | 48 |
49 | 50 | 51 | 52 | 53 | 54 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /test/httpd.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node, es6 */ 2 | 3 | 'use strict'; 4 | 5 | const 6 | nodeStaticAlias = require('node-static-alias'), 7 | log4js = require('log4js'), 8 | http = require('http'), 9 | pathUtil = require('path'), 10 | fs = require('fs'), 11 | filelist = require('stats-filelist'), 12 | 13 | DOC_ROOT = __dirname, 14 | PORT = 8080, 15 | 16 | MODULE_PACKAGES = [ 17 | 'jasmine-core', 18 | 'test-page-loader', 19 | 'cssprefix', 20 | 'm-class-list' 21 | ], 22 | 23 | EXT_DIR = pathUtil.resolve(__dirname, '../../test-ext'), 24 | 25 | logger = (() => { 26 | log4js.configure({ // Super simple format 27 | appenders: {out: {type: 'stdout', layout: {type: 'pattern', pattern: '%[[%r]%] %m'}}}, 28 | categories: {default: {appenders: ['out'], level: 'info'}} 29 | }); 30 | return log4js.getLogger('node-static-alias'); 31 | })(), 32 | 33 | staticAlias = new nodeStaticAlias.Server(DOC_ROOT, { 34 | cache: false, 35 | headers: {'Cache-Control': 'no-cache, must-revalidate'}, 36 | alias: 37 | MODULE_PACKAGES.map(packageName => 38 | ({ // node_modules 39 | match: new RegExp(`^/${packageName}/.+`), 40 | serve: `${require.resolve(packageName).replace( 41 | // Include `packageName` for nested `node_modules` 42 | new RegExp(`^(.*[/\\\\]node_modules)[/\\\\]${packageName}[/\\\\].*$`), '$1')}<% reqPath %>`, 43 | allowOutside: true 44 | }) 45 | ).concat([ 46 | // limited-function script 47 | { 48 | match: /^\/plain-overlay\.js$/, 49 | serve: params => 50 | (/\bLIMIT=true\b/.test(params.cookie) 51 | ? params.absPath.replace(/\.js$/, '-limit.js') : params.absPath) 52 | }, 53 | 54 | // test-ext 55 | { 56 | match: /^\/ext\/.+/, 57 | serve: params => params.reqPath.replace(/^\/ext/, EXT_DIR), 58 | allowOutside: true 59 | }, 60 | // test-ext index 61 | { 62 | match: /^\/ext\/?$/, 63 | serve: () => { 64 | const indexPath = pathUtil.join(EXT_DIR, '.index.html'); 65 | fs.writeFileSync(indexPath, 66 | ``); 75 | return indexPath; 76 | }, 77 | allowOutside: true 78 | }, 79 | 80 | // for face.html 81 | { 82 | match: '/face.html', 83 | serve: '../src/face.html', 84 | allowOutside: true 85 | }, 86 | { 87 | match: '/default.css', 88 | serve: '../src/default.css', 89 | allowOutside: true 90 | }, 91 | { 92 | match: '/test/grid.png', 93 | serve: './grid.png', 94 | allowOutside: true 95 | } 96 | ]), 97 | logger 98 | }); 99 | 100 | http.createServer((request, response) => { 101 | request.addListener('end', () => { 102 | staticAlias.serve(request, response, error => { 103 | if (error) { 104 | response.writeHead(error.status, error.headers); 105 | logger.error('(%s) %s', request.url, response.statusCode); 106 | if (error.status === 404) { 107 | response.end('Not Found'); 108 | } 109 | } else { 110 | logger.info('(%s) %s', request.url, response.statusCode); 111 | } 112 | }); 113 | }).resume(); 114 | }).listen(PORT); 115 | 116 | console.log(`START: http://localhost:${PORT}/\nROOT: ${DOC_ROOT}`); 117 | console.log('(^C to stop)'); 118 | -------------------------------------------------------------------------------- /test/spec/bars.js: -------------------------------------------------------------------------------- 1 | describe('disableDocBars()', function() { 2 | 'use strict'; 3 | 4 | var window, document, 5 | PlainOverlay, insProps, pageDone, 6 | IS_TRIDENT, IS_GECKO, IS_EDGE, 7 | table, barSize, 8 | 9 | BAR_CASES = { // class 10 | 'none:none': [], 11 | 'right:none': ['height'], 12 | 'left:none': ['height', 'bar-left'], 13 | 'none:bottom': ['width'], 14 | 'right:bottom': ['height', 'width'], 15 | 'left:bottom': ['height', 'bar-left', 'width'], 16 | 'none:top': ['width', 'bar-top'], 17 | 'right:top': ['height', 'width', 'bar-top'], 18 | 'left:top': ['height', 'bar-left', 'width', 'bar-top'] 19 | }, 20 | BODY_MARGIN = 10, 21 | DIR_KEYS = [ 22 | {l: 'right', u: 'Right'}, 23 | {l: 'left', u: 'Left'}, 24 | {l: 'bottom', u: 'Bottom'}, 25 | {l: 'top', u: 'Top'} 26 | ]; 27 | 28 | function addTarget(label, classes, cb) { 29 | var tr = table.appendChild(document.createElement('tr')), 30 | iframe, iframeBefore; 31 | tr.appendChild(document.createElement('td')).textContent = label; 32 | 33 | iframeBefore = tr.appendChild(document.createElement('td')).appendChild(document.createElement('iframe')); 34 | iframe = tr.appendChild(document.createElement('td')).appendChild(document.createElement('iframe')); 35 | 36 | iframe.addEventListener('load', function() { 37 | if (IS_TRIDENT) { iframe.contentDocument.documentElement.classList.add('is-trident'); } 38 | if (IS_EDGE) { iframe.contentDocument.documentElement.classList.add('is-edge'); } 39 | cb(iframe); 40 | }); 41 | iframeBefore.addEventListener('load', function() { 42 | if (IS_TRIDENT) { iframeBefore.contentDocument.documentElement.classList.add('is-trident'); } 43 | if (IS_EDGE) { iframeBefore.contentDocument.documentElement.classList.add('is-edge'); } 44 | }); 45 | iframe.src = iframeBefore.src = 'page-c1.html' + (classes.length ? '?' + classes.join('&') : ''); 46 | } 47 | 48 | function addTest(caseKey, addMargin, iframeMargin) { 49 | var barCase = BAR_CASES[caseKey], 50 | label = caseKey + (addMargin ? ' +margin' : ''); 51 | it(label, function(done) { 52 | addTarget(label, addMargin ? barCase.concat('margin') : barCase, function(iframe) { 53 | var overlay = PlainOverlay.show(iframe), 54 | iframeBody = iframe.contentDocument.body, 55 | iframeMarginLen = {}, 56 | styleIFrame = window.getComputedStyle(iframeBody, ''); 57 | 58 | // To get it after `beforeAll`. 59 | if (typeof iframeMargin === 'function') { iframeMargin = iframeMargin(); } 60 | DIR_KEYS.forEach(function(dirKey) { 61 | iframeMarginLen[dirKey.l] = (iframeMargin[dirKey.l] ? barSize : 0) + (addMargin ? BODY_MARGIN : 0); 62 | }); 63 | 64 | // Check elements 65 | expect(insProps[overlay._id].elmTargetBody).toBe(iframeBody); 66 | 67 | expect(parseFloat(styleIFrame['margin' + DIR_KEYS[0].u])).toBe(iframeMarginLen[DIR_KEYS[0].l]); 68 | expect(parseFloat(styleIFrame['margin' + DIR_KEYS[1].u])).toBe(iframeMarginLen[DIR_KEYS[1].l]); 69 | expect(parseFloat(styleIFrame['margin' + DIR_KEYS[2].u])).toBe(iframeMarginLen[DIR_KEYS[2].l]); 70 | expect(parseFloat(styleIFrame['margin' + DIR_KEYS[3].u])).toBe(iframeMarginLen[DIR_KEYS[3].l]); 71 | 72 | done(); 73 | }); 74 | }); 75 | } 76 | 77 | beforeAll(function(beforeDone) { 78 | loadPage('spec/bars/page.html', function(pageWindow, pageDocument, pageBody, done) { 79 | window = pageWindow; 80 | document = pageDocument; 81 | PlainOverlay = window.PlainOverlay; 82 | insProps = PlainOverlay.insProps; 83 | IS_TRIDENT = PlainOverlay.IS_TRIDENT; 84 | IS_GECKO = PlainOverlay.IS_GECKO; 85 | IS_EDGE = PlainOverlay.IS_EDGE; 86 | table = document.getElementById('targets'); 87 | 88 | if (IS_TRIDENT) { pageDocument.documentElement.classList.add('is-trident'); } 89 | if (IS_EDGE) { pageDocument.documentElement.classList.add('is-edge'); } 90 | 91 | var elmSize = document.getElementById('get-size'); 92 | barSize = -elmSize.clientWidth; 93 | elmSize.style.overflow = 'hidden'; 94 | barSize += elmSize.clientWidth; 95 | pageBody.removeChild(elmSize); 96 | pageDone = done; 97 | 98 | beforeDone(); 99 | }, 'disableDocBars()'); 100 | }); 101 | 102 | afterAll(function() { 103 | pageDone(); 104 | }); 105 | 106 | it('Check Edition (to be LIMIT: ' + !!self.top.LIMIT + ')', function() { 107 | expect(!!window.PlainOverlay.limit).toBe(!!self.top.LIMIT); 108 | }); 109 | 110 | [false, true].forEach(function(addMargin) { 111 | var normal = {right: true, bottom: true}; 112 | addTest('none:none', addMargin, {}); 113 | addTest('right:none', addMargin, {right: true}); 114 | addTest('left:none', addMargin, 115 | function() { return IS_TRIDENT || IS_EDGE ? {left: true} : {right: true}; }); 116 | addTest('none:bottom', addMargin, {bottom: true}); 117 | addTest('right:bottom', addMargin, normal); 118 | addTest('left:bottom', addMargin, 119 | function() { return IS_TRIDENT || IS_EDGE ? {left: true, bottom: true} : normal; }); 120 | addTest('none:top', addMargin, 121 | function() { 122 | return IS_TRIDENT || IS_EDGE ? {top: true} : 123 | IS_GECKO ? {} : {bottom: true}; // Gecko bug, it does not make bottom-bar. 124 | }); 125 | addTest('right:top', addMargin, 126 | function() { 127 | return IS_TRIDENT || IS_EDGE ? {right: true, top: true} : 128 | IS_GECKO ? {right: true} : normal; // Gecko bug, it does not make bottom-bar. 129 | }); 130 | addTest('left:top', addMargin, 131 | function() { 132 | return IS_TRIDENT || IS_EDGE ? {left: true, top: true} : 133 | IS_GECKO ? {right: true} : normal; // Gecko bug, it does not make bottom-bar. 134 | }); 135 | }); 136 | 137 | }); 138 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node, es6 */ 2 | 3 | 'use strict'; 4 | 5 | const 6 | BASE_NAME = 'plain-overlay', 7 | OBJECT_NAME = 'PlainOverlay', 8 | LIMIT_TAGS = ['FACE'], 9 | BUILD_MODE = process.env.NODE_ENV === 'production', 10 | LIMIT = process.env.EDITION === 'limit', 11 | SYNC = process.env.SYNC === 'yes', // Enable "sync-mode support" 12 | BUILD_BASE_NAME = `${BASE_NAME}${LIMIT ? '-limit' : ''}${SYNC ? '-sync' : ''}`, 13 | PREPROC_REMOVE_TAGS = 14 | (BUILD_MODE ? ['DEBUG'] : []).concat(LIMIT ? LIMIT_TAGS : [], SYNC ? 'DISABLE-SYNC' : []), 15 | 16 | webpack = require('webpack'), 17 | preProc = require('pre-proc'), 18 | pathUtil = require('path'), 19 | fs = require('fs'), 20 | PKG = require('./package'), 21 | 22 | SRC_DIR_PATH = pathUtil.resolve(__dirname, 'src'), 23 | BUILD_DIR_PATH = BUILD_MODE ? __dirname : pathUtil.resolve(__dirname, 'test'), 24 | ESM_DIR_PATH = __dirname, 25 | ENTRY_PATH = pathUtil.join(SRC_DIR_PATH, `${BASE_NAME}.js`), 26 | 27 | STATIC_ESM_FILES = [], // [{fileName, content}] 28 | STATIC_ESM_CONTENTS = [], // [{path, re, content}] 29 | PostCompile = require('post-compile-webpack-plugin'); 30 | 31 | function writeFile(filePath, content, messageClass) { 32 | const HL = '='.repeat(48); 33 | fs.writeFileSync(filePath, 34 | `/* ${HL}\n DON'T MANUALLY EDIT THIS FILE\n${HL} */\n\n${content}`); 35 | console.log(`Output (${messageClass}): ${filePath}`); 36 | } 37 | 38 | module.exports = { 39 | // optimization: {minimize: false}, 40 | mode: BUILD_MODE ? 'production' : 'development', 41 | entry: ENTRY_PATH, 42 | output: { 43 | path: BUILD_DIR_PATH, 44 | filename: `${BUILD_BASE_NAME}${BUILD_MODE ? '.min' : ''}.js`, 45 | library: OBJECT_NAME, 46 | libraryTarget: 'var', 47 | libraryExport: 'default' 48 | }, 49 | module: { 50 | rules: [ 51 | { 52 | resource: {and: [SRC_DIR_PATH, /\.js$/]}, 53 | use: [ 54 | // ================================ Static ESM 55 | { 56 | loader: 'skeleton-loader', 57 | options: { 58 | procedure(content) { 59 | if (this.resourcePath === ENTRY_PATH) { 60 | STATIC_ESM_FILES.push( 61 | {fileName: `${BUILD_BASE_NAME}${BUILD_MODE ? '' : '-debug'}.esm.js`, content}); 62 | } 63 | return content; 64 | } 65 | } 66 | }, 67 | // ================================ Babel 68 | { 69 | loader: 'babel-loader', 70 | options: {presets: [['@babel/preset-env', {targets: 'defaults', modules: false}]]} 71 | }, 72 | // ================================ Preprocess 73 | PREPROC_REMOVE_TAGS.length ? { 74 | loader: 'skeleton-loader', 75 | options: { 76 | procedure(content) { 77 | content = preProc.removeTag(PREPROC_REMOVE_TAGS, content); 78 | if (BUILD_MODE && this.resourcePath === ENTRY_PATH) { 79 | writeFile(pathUtil.join(SRC_DIR_PATH, `${BUILD_BASE_NAME}.proc.js`), content, 'PROC'); 80 | } 81 | return content; 82 | } 83 | } 84 | } : null 85 | ].filter(loader => !!loader) 86 | }, 87 | { 88 | resource: {and: [SRC_DIR_PATH, /\.scss$/]}, 89 | use: [ 90 | // ================================ Static ESM 91 | { 92 | loader: 'skeleton-loader', 93 | options: { 94 | procedure(content) { 95 | if (!this._module.rawRequest) { throw new Error('Can\'t get `rawRequest`'); } 96 | STATIC_ESM_CONTENTS.push({path: this._module.rawRequest, content}); 97 | return content; 98 | }, 99 | toCode: true 100 | } 101 | }, 102 | // ================================ Autoprefixer 103 | { 104 | loader: 'postcss-loader', 105 | options: {postcssOptions: {plugins: [['autoprefixer']]}} 106 | }, 107 | // ================================ SASS 108 | { 109 | loader: 'sass-loader', 110 | options: { 111 | implementation: require('sass'), 112 | sassOptions: { 113 | fiber: require('fibers'), 114 | includePaths: [pathUtil.resolve(__dirname, '../../_common/files')], 115 | outputStyle: 'compressed' 116 | } 117 | } 118 | }, 119 | // ================================ Preprocess 120 | PREPROC_REMOVE_TAGS.length ? { 121 | loader: 'pre-proc-loader', 122 | options: {removeTag: {tag: PREPROC_REMOVE_TAGS}} 123 | } : null 124 | ].filter(loader => !!loader) 125 | }, 126 | { 127 | test: pathUtil.resolve(SRC_DIR_PATH, 'face.html'), 128 | use: [ 129 | // ================================ Static ESM 130 | { 131 | loader: 'skeleton-loader', 132 | options: { 133 | procedure(content) { 134 | if (!this._module.rawRequest) { throw new Error('Can\'t get `rawRequest`'); } 135 | STATIC_ESM_CONTENTS.push({path: this._module.rawRequest, content}); 136 | return content; 137 | }, 138 | toCode: true 139 | } 140 | }, 141 | // ================================ Minify 142 | 'htmlclean-loader', 143 | // ================================ Preprocess 144 | { 145 | loader: 'pre-proc-loader', 146 | options: {pickTag: {}} // `tag` is specified in source code `import` 147 | } 148 | ] 149 | } 150 | ] 151 | }, 152 | devtool: BUILD_MODE ? false : 'source-map', 153 | plugins: [ 154 | BUILD_MODE ? new webpack.BannerPlugin( 155 | `${PKG.title || PKG.name} v${PKG.version} (c) ${PKG.author.name} ${PKG.homepage}`) : null, 156 | 157 | // Static ESM 158 | new PostCompile(() => { 159 | // Fix STATIC_ESM_CONTENTS 160 | STATIC_ESM_CONTENTS.forEach(content => { 161 | // Member Import is not supported 162 | content.re = new RegExp(`\\bimport\\s+(\\w+)\\s+from\\s+(?:'|")${ 163 | content.path.replace(/[\x00-\x7f]/g, // eslint-disable-line no-control-regex 164 | s => `\\x${('00' + s.charCodeAt().toString(16)).substr(-2)}`)}(?:'|")`, 'g'); 165 | content.content = JSON.stringify(content.content); 166 | }); 167 | 168 | STATIC_ESM_FILES.forEach(file => { 169 | STATIC_ESM_CONTENTS.forEach(content => { 170 | file.content = file.content.replace(content.re, 171 | (s, varName) => `/* Static ESM */ /* ${s} */ var ${varName} = ${content.content}`); 172 | }); 173 | // Save ESM file 174 | writeFile(pathUtil.join(ESM_DIR_PATH, file.fileName), file.content, 'ESM'); 175 | }); 176 | }) 177 | ].filter(plugin => !!plugin) 178 | }; 179 | -------------------------------------------------------------------------------- /test/scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 | 20 |
21 | 22 |
23 |

Lorem ipsum link dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

24 | 25 |
26 |
27 |
28 | 35 |
36 | 37 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

38 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

39 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

40 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

41 |
42 | 43 |

Lorem ipsum link dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

44 | 45 | 46 | 47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

48 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

49 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

50 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

51 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

52 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

53 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

54 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

55 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

56 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

57 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

58 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

59 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

60 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

61 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

62 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

63 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

64 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

65 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

66 | 67 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /test/spec/options.js: -------------------------------------------------------------------------------- 1 | describe('options', function() { 2 | 'use strict'; 3 | 4 | var window, document, PlainOverlay, pageDone; 5 | 6 | beforeAll(function(beforeDone) { 7 | loadPage('spec/common/page.html', function(pageWindow, pageDocument, pageBody, done) { 8 | window = pageWindow; 9 | document = pageDocument; 10 | PlainOverlay = window.PlainOverlay; 11 | pageDone = done; 12 | 13 | beforeDone(); 14 | }); 15 | }); 16 | 17 | afterAll(function() { 18 | pageDone(); 19 | }); 20 | 21 | it('Check Edition (to be LIMIT: ' + !!self.top.LIMIT + ')', function() { 22 | expect(!!window.PlainOverlay.limit).toBe(!!self.top.LIMIT); 23 | }); 24 | 25 | it('face', function(done) { 26 | var overlay = new PlainOverlay(document.getElementById('elm-plain')); 27 | 28 | // default 29 | expect(typeof overlay.face).toBe('undefined'); 30 | 31 | // Update - element 32 | var face = document.getElementById('elm-plain2'); 33 | overlay.face = face; 34 | expect(overlay.face).toBe(face); 35 | 36 | // Update - false 37 | overlay.face = false; 38 | expect(overlay.face).toBe(false); 39 | 40 | // Update - default 41 | overlay.face = null; 42 | expect(typeof overlay.face).toBe('undefined'); 43 | 44 | // Invalid -> ignored 45 | overlay.face = face; 46 | expect(overlay.face).toBe(face); 47 | overlay.face = 5; 48 | expect(overlay.face).toBe(face); 49 | 50 | // Another option -> ignored face 51 | overlay.face = face; 52 | expect(overlay.face).toBe(face); 53 | overlay.duration = 5; 54 | expect(overlay.face).toBe(face); 55 | 56 | done(); 57 | }); 58 | 59 | it('duration', function(done) { 60 | var overlay = new PlainOverlay(document.getElementById('elm-plain')); 61 | 62 | // default 63 | expect(overlay.duration).toBe(200); 64 | 65 | // Update 66 | overlay.duration = 300; 67 | expect(overlay.duration).toBe(300); 68 | 69 | // Update - default 70 | overlay.duration = 200; 71 | expect(overlay.duration).toBe(200); 72 | 73 | // Invalid -> ignored 74 | overlay.duration = 400; 75 | expect(overlay.duration).toBe(400); 76 | overlay.duration = false; 77 | expect(overlay.duration).toBe(400); 78 | 79 | // Another option -> ignored duration 80 | overlay.duration = 400; 81 | expect(overlay.duration).toBe(400); 82 | overlay.blur = 5; 83 | expect(overlay.duration).toBe(400); 84 | 85 | done(); 86 | }); 87 | 88 | it('blur', function(done) { 89 | var overlay = new PlainOverlay(document.getElementById('elm-plain')); 90 | 91 | // default 92 | expect(overlay.blur).toBe(false); 93 | 94 | // Update 95 | overlay.blur = 2; 96 | expect(overlay.blur).toBe(2); 97 | 98 | // Update - default 99 | overlay.blur = false; 100 | expect(overlay.blur).toBe(false); 101 | 102 | // Invalid -> ignored 103 | overlay.blur = 3; 104 | expect(overlay.blur).toBe(3); 105 | overlay.blur = 'x'; 106 | expect(overlay.blur).toBe(3); 107 | 108 | // Another option -> ignored blur 109 | overlay.blur = 3; 110 | expect(overlay.blur).toBe(3); 111 | overlay.duration = 5; 112 | expect(overlay.blur).toBe(3); 113 | 114 | done(); 115 | }); 116 | 117 | it('onShow', function(done) { 118 | var overlay = new PlainOverlay(document.getElementById('elm-plain')); 119 | 120 | function fnc() {} 121 | 122 | // default 123 | expect(typeof overlay.onShow).toBe('undefined'); 124 | 125 | // Update 126 | overlay.onShow = fnc; 127 | expect(overlay.onShow).toBe(fnc); 128 | 129 | // Update - default 130 | overlay.onShow = null; 131 | expect(typeof overlay.onShow).toBe('undefined'); 132 | 133 | // Invalid -> ignored 134 | overlay.onShow = fnc; 135 | expect(overlay.onShow).toBe(fnc); 136 | overlay.onShow = 5; 137 | expect(overlay.onShow).toBe(fnc); 138 | 139 | // Another option -> ignored onShow 140 | overlay.onShow = fnc; 141 | expect(overlay.onShow).toBe(fnc); 142 | overlay.duration = 5; 143 | expect(overlay.onShow).toBe(fnc); 144 | 145 | done(); 146 | }); 147 | 148 | it('onHide', function(done) { 149 | var overlay = new PlainOverlay(document.getElementById('elm-plain')); 150 | 151 | function fnc() {} 152 | 153 | // default 154 | expect(typeof overlay.onHide).toBe('undefined'); 155 | 156 | // Update 157 | overlay.onHide = fnc; 158 | expect(overlay.onHide).toBe(fnc); 159 | 160 | // Update - default 161 | overlay.onHide = null; 162 | expect(typeof overlay.onHide).toBe('undefined'); 163 | 164 | // Invalid -> ignored 165 | overlay.onHide = fnc; 166 | expect(overlay.onHide).toBe(fnc); 167 | overlay.onHide = 5; 168 | expect(overlay.onHide).toBe(fnc); 169 | 170 | // Another option -> ignored onHide 171 | overlay.onHide = fnc; 172 | expect(overlay.onHide).toBe(fnc); 173 | overlay.duration = 5; 174 | expect(overlay.onHide).toBe(fnc); 175 | 176 | done(); 177 | }); 178 | 179 | it('onBeforeShow', function(done) { 180 | var overlay = new PlainOverlay(document.getElementById('elm-plain')); 181 | 182 | function fnc() {} 183 | 184 | // default 185 | expect(typeof overlay.onBeforeShow).toBe('undefined'); 186 | 187 | // Update 188 | overlay.onBeforeShow = fnc; 189 | expect(overlay.onBeforeShow).toBe(fnc); 190 | 191 | // Update - default 192 | overlay.onBeforeShow = null; 193 | expect(typeof overlay.onBeforeShow).toBe('undefined'); 194 | 195 | // Invalid -> ignored 196 | overlay.onBeforeShow = fnc; 197 | expect(overlay.onBeforeShow).toBe(fnc); 198 | overlay.onBeforeShow = 5; 199 | expect(overlay.onBeforeShow).toBe(fnc); 200 | 201 | // Another option -> ignored onBeforeShow 202 | overlay.onBeforeShow = fnc; 203 | expect(overlay.onBeforeShow).toBe(fnc); 204 | overlay.duration = 5; 205 | expect(overlay.onBeforeShow).toBe(fnc); 206 | 207 | done(); 208 | }); 209 | 210 | it('onBeforeHide', function(done) { 211 | var overlay = new PlainOverlay(document.getElementById('elm-plain')); 212 | 213 | function fnc() {} 214 | 215 | // default 216 | expect(typeof overlay.onBeforeHide).toBe('undefined'); 217 | 218 | // Update 219 | overlay.onBeforeHide = fnc; 220 | expect(overlay.onBeforeHide).toBe(fnc); 221 | 222 | // Update - default 223 | overlay.onBeforeHide = null; 224 | expect(typeof overlay.onBeforeHide).toBe('undefined'); 225 | 226 | // Invalid -> ignored 227 | overlay.onBeforeHide = fnc; 228 | expect(overlay.onBeforeHide).toBe(fnc); 229 | overlay.onBeforeHide = 5; 230 | expect(overlay.onBeforeHide).toBe(fnc); 231 | 232 | // Another option -> ignored onBeforeHide 233 | overlay.onBeforeHide = fnc; 234 | expect(overlay.onBeforeHide).toBe(fnc); 235 | overlay.duration = 5; 236 | expect(overlay.onBeforeHide).toBe(fnc); 237 | 238 | done(); 239 | }); 240 | 241 | it('onPosition', function(done) { 242 | var overlay = new PlainOverlay(document.getElementById('elm-plain')); 243 | 244 | function fnc() {} 245 | 246 | // default 247 | expect(typeof overlay.onPosition).toBe('undefined'); 248 | 249 | // Update 250 | overlay.onPosition = fnc; 251 | expect(overlay.onPosition).toBe(fnc); 252 | 253 | // Update - default 254 | overlay.onPosition = null; 255 | expect(typeof overlay.onPosition).toBe('undefined'); 256 | 257 | // Invalid -> ignored 258 | overlay.onPosition = fnc; 259 | expect(overlay.onPosition).toBe(fnc); 260 | overlay.onPosition = 5; 261 | expect(overlay.onPosition).toBe(fnc); 262 | 263 | // Another option -> ignored onPosition 264 | overlay.onPosition = fnc; 265 | expect(overlay.onPosition).toBe(fnc); 266 | overlay.duration = 5; 267 | expect(overlay.onPosition).toBe(fnc); 268 | 269 | done(); 270 | }); 271 | 272 | }); 273 | -------------------------------------------------------------------------------- /test/spec/position/page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 |
14 |

body{position:static}

15 | 16 | 17 | 18 |
19 | 20 |
21 |

body{position:relative}

22 | 23 | 24 | 25 |
26 | 27 |
28 |

position:static

29 | 30 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

31 | 32 |
33 | 34 |
35 |

position:absolute

36 | 37 |
38 |
39 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

40 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

41 |
42 |
43 | 44 |
45 | 46 |
47 |

border:3px

48 | 49 |
50 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

51 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

52 |
53 | 54 |
55 | 56 |
57 |

border:1px 2px 4px 8px

58 | 59 |
60 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

61 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

62 |
63 | 64 |
65 | 66 |
67 |

radius:16px

68 | 69 |
70 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

71 |
72 | 73 |
74 | 75 |
76 |

radius:16px, border:10px

77 | 78 |
79 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

80 |
81 | 82 |
83 | 84 |
85 |

top-left-radius:60px 40px, border:20px

86 | 87 |
88 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

89 |
90 | 91 |
92 | 93 |
94 |

top-right-radius:60px 40px, border:20px

95 | 96 |
97 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

98 |
99 | 100 |
101 | 102 |
103 |

bottom-right-radius:60px 40px, border:20px

104 | 105 |
106 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

107 |
108 | 109 |
110 | 111 |
112 |

bottom-left-radius:60px 40px, border:20px

113 | 114 |
115 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

116 |
117 | 118 |
119 | 120 |
121 | 122 |
123 |

radius:60px/40px, border-left:20px, border-top:20px

124 | 125 |
126 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

127 |
128 | 129 |
130 | 131 |
132 |

radius:60px/40px, border-left:20px, border-top:40px

133 | 134 |
135 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

136 |
137 | 138 |
139 | 140 |
141 |

radius:60px/40px, border-left:20px, border-top:45px

142 | 143 |
144 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

145 |
146 | 147 |
148 | 149 |
150 |

radius:60px/40px, border-left:60px, border-top:20px

151 | 152 |
153 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

154 |
155 | 156 |
157 | 158 |
159 |

radius:60px/40px, border-left:60px, border-top:40px

160 | 161 |
162 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

163 |
164 | 165 |
166 | 167 |
168 |

radius:60px/40px, border-left:60px, border-top:45px

169 | 170 |
171 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

172 |
173 | 174 |
175 | 176 |
177 |

radius:60px/40px, border-left:65px, border-top:20px

178 | 179 |
180 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

181 |
182 | 183 |
184 | 185 |
186 |

radius:60px/40px, border-left:65px, border-top:40px

187 | 188 |
189 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

190 |
191 | 192 |
193 | 194 |
195 |

radius:60px/40px, border-left:65px, border-top:45px

196 | 197 |
198 |

Lorem check ipsum dolor sit amet, consectetur adipiscing elit

199 |
200 | 201 |
202 | 203 | 204 | 205 | -------------------------------------------------------------------------------- /test/spec/constructor.js: -------------------------------------------------------------------------------- 1 | describe('constructor', function() { 2 | 'use strict'; 3 | 4 | var window, document, body, docElement, element, frmWindow, frmDocument, frmBody, frmDocElement, frmElement, 5 | PlainOverlay, insProps, pageDone; 6 | 7 | beforeAll(function(beforeDone) { 8 | loadPage('spec/common/page.html', function(pageWindow, pageDocument, pageBody, done) { 9 | window = pageWindow; 10 | document = pageDocument; 11 | body = pageBody; 12 | docElement = document.documentElement; 13 | element = document.getElementById('elm-plain'); 14 | frmWindow = document.getElementById('iframe1').contentWindow; 15 | frmDocument = frmWindow.document; 16 | frmBody = frmDocument.body; 17 | frmDocElement = frmDocument.documentElement; 18 | frmElement = frmDocument.getElementById('elm-plain'); 19 | PlainOverlay = window.PlainOverlay; 20 | insProps = PlainOverlay.insProps; 21 | pageDone = done; 22 | 23 | beforeDone(); 24 | }); 25 | }); 26 | 27 | afterAll(function() { 28 | pageDone(); 29 | }); 30 | 31 | it('Check Edition (to be LIMIT: ' + !!self.top.LIMIT + ')', function() { 32 | expect(!!window.PlainOverlay.limit).toBe(!!self.top.LIMIT); 33 | }); 34 | 35 | it('(element, {})', function() { 36 | var overlay = new PlainOverlay(element, {}), 37 | props = insProps[overlay._id]; 38 | 39 | expect(props.elmTarget).toBe(element); 40 | expect(props.window).toBe(window); 41 | expect(props.document).toBe(document); 42 | }); 43 | 44 | it('(null, {})', function() { 45 | var overlay = new PlainOverlay(null, {}), 46 | props = insProps[overlay._id]; 47 | 48 | expect(props.elmTarget).toBe(docElement); 49 | expect(props.window).toBe(window); 50 | expect(props.document).toBe(document); 51 | }); 52 | 53 | it('(window, {})', function() { 54 | var overlay = new PlainOverlay(window, {}), 55 | props = insProps[overlay._id]; 56 | 57 | expect(props.elmTarget).toBe(docElement); 58 | expect(props.window).toBe(window); 59 | expect(props.document).toBe(document); 60 | }); 61 | 62 | it('(document, {})', function() { 63 | var overlay = new PlainOverlay(document, {}), 64 | props = insProps[overlay._id]; 65 | 66 | expect(props.elmTarget).toBe(docElement); 67 | expect(props.window).toBe(window); 68 | expect(props.document).toBe(document); 69 | }); 70 | 71 | it('(html, {})', function() { 72 | var overlay = new PlainOverlay(docElement, {}), 73 | props = insProps[overlay._id]; 74 | 75 | expect(props.elmTarget).toBe(docElement); 76 | expect(props.window).toBe(window); 77 | expect(props.document).toBe(document); 78 | }); 79 | 80 | it('(body, {})', function() { 81 | var overlay = new PlainOverlay(body, {}), 82 | props = insProps[overlay._id]; 83 | 84 | expect(props.elmTarget).toBe(docElement); 85 | expect(props.window).toBe(window); 86 | expect(props.document).toBe(document); 87 | }); 88 | 89 | it('(svg, {})', function() { 90 | var svg = body.appendChild(document.createElement('svg')), 91 | overlay = new PlainOverlay(svg, {}), 92 | props = insProps[overlay._id]; 93 | 94 | expect(props.elmTarget).toBe(svg); 95 | expect(props.window).toBe(window); 96 | expect(props.document).toBe(document); 97 | }); 98 | 99 | it('(iframe, {})', function() { 100 | var overlay = new PlainOverlay(document.getElementById('iframe1'), {}), 101 | props = insProps[overlay._id]; 102 | 103 | expect(props.elmTarget).toBe(frmDocElement); 104 | expect(props.window).toBe(frmWindow); 105 | expect(props.document).toBe(frmDocument); 106 | }); 107 | 108 | it('(1, {})', function() { 109 | expect(function() { 110 | var overlay = new PlainOverlay(1, {}); 111 | console.log(overlay); // dummy 112 | }).toThrowError('This target is not accepted.'); 113 | }); 114 | 115 | // ============================ 116 | 117 | it('(null, 1)', function() { 118 | expect(function() { 119 | var overlay = new PlainOverlay(null, 1); 120 | console.log(overlay); // dummy 121 | }).toThrowError('Invalid options.'); 122 | }); 123 | 124 | it('(fragment, {})', function() { 125 | var fragment = document.createDocumentFragment(); 126 | expect(fragment.nodeType).toBe(Node.DOCUMENT_FRAGMENT_NODE); 127 | 128 | expect(function() { 129 | var overlay = new PlainOverlay(fragment, {}); 130 | console.log(overlay); // dummy 131 | }).toThrowError('This element is not accepted.'); 132 | }); 133 | 134 | // ============================ 135 | 136 | it('(elementInFrame, {})', function() { 137 | var overlay = new PlainOverlay(frmElement, {}), 138 | props = insProps[overlay._id]; 139 | 140 | expect(props.elmTarget).toBe(frmElement); 141 | expect(props.window).toBe(frmWindow); 142 | expect(props.document).toBe(frmDocument); 143 | }); 144 | 145 | it('(frameWindow, {})', function() { 146 | var overlay = new PlainOverlay(frmWindow, {}), 147 | props = insProps[overlay._id]; 148 | 149 | expect(props.elmTarget).toBe(frmDocElement); 150 | expect(props.window).toBe(frmWindow); 151 | expect(props.document).toBe(frmDocument); 152 | }); 153 | 154 | it('(frameDocument, {})', function() { 155 | var overlay = new PlainOverlay(frmDocument, {}), 156 | props = insProps[overlay._id]; 157 | 158 | expect(props.elmTarget).toBe(frmDocElement); 159 | expect(props.window).toBe(frmWindow); 160 | expect(props.document).toBe(frmDocument); 161 | }); 162 | 163 | it('(frameHtml, {})', function() { 164 | var overlay = new PlainOverlay(frmDocElement, {}), 165 | props = insProps[overlay._id]; 166 | 167 | expect(props.elmTarget).toBe(frmDocElement); 168 | expect(props.window).toBe(frmWindow); 169 | expect(props.document).toBe(frmDocument); 170 | }); 171 | 172 | it('(frameBody, {})', function() { 173 | var overlay = new PlainOverlay(frmBody, {}), 174 | props = insProps[overlay._id]; 175 | 176 | expect(props.elmTarget).toBe(frmDocElement); 177 | expect(props.window).toBe(frmWindow); 178 | expect(props.document).toBe(frmDocument); 179 | }); 180 | 181 | // ============================ 182 | 183 | it('()', function() { 184 | var overlay = new PlainOverlay(), 185 | props = insProps[overlay._id]; 186 | 187 | expect(props.elmTarget).toBe(docElement); 188 | expect(props.window).toBe(window); 189 | expect(props.document).toBe(document); 190 | }); 191 | 192 | // single argument 193 | 194 | it('(element)', function() { 195 | var overlay = new PlainOverlay(element), 196 | props = insProps[overlay._id]; 197 | 198 | expect(props.elmTarget).toBe(element); 199 | expect(props.window).toBe(window); 200 | expect(props.document).toBe(document); 201 | }); 202 | 203 | it('(null)', function() { 204 | var overlay = new PlainOverlay(null), 205 | props = insProps[overlay._id]; 206 | 207 | expect(props.elmTarget).toBe(docElement); 208 | expect(props.window).toBe(window); 209 | expect(props.document).toBe(document); 210 | }); 211 | 212 | it('(window)', function() { 213 | var overlay = new PlainOverlay(window), 214 | props = insProps[overlay._id]; 215 | 216 | expect(props.elmTarget).toBe(docElement); 217 | expect(props.window).toBe(window); 218 | expect(props.document).toBe(document); 219 | }); 220 | 221 | it('(document)', function() { 222 | var overlay = new PlainOverlay(document), 223 | props = insProps[overlay._id]; 224 | 225 | expect(props.elmTarget).toBe(docElement); 226 | expect(props.window).toBe(window); 227 | expect(props.document).toBe(document); 228 | }); 229 | 230 | it('(html)', function() { 231 | var overlay = new PlainOverlay(docElement), 232 | props = insProps[overlay._id]; 233 | 234 | expect(props.elmTarget).toBe(docElement); 235 | expect(props.window).toBe(window); 236 | expect(props.document).toBe(document); 237 | }); 238 | 239 | it('(body)', function() { 240 | var overlay = new PlainOverlay(body), 241 | props = insProps[overlay._id]; 242 | 243 | expect(props.elmTarget).toBe(docElement); 244 | expect(props.window).toBe(window); 245 | expect(props.document).toBe(document); 246 | }); 247 | 248 | it('(iframe)', function() { 249 | var overlay = new PlainOverlay(document.getElementById('iframe1')), 250 | props = insProps[overlay._id]; 251 | 252 | expect(props.elmTarget).toBe(frmDocElement); 253 | expect(props.window).toBe(frmWindow); 254 | expect(props.document).toBe(frmDocument); 255 | }); 256 | 257 | it('(1)', function() { 258 | expect(function() { 259 | var overlay = new PlainOverlay(1); 260 | console.log(overlay); // dummy 261 | }).toThrowError('Invalid argument.'); 262 | }); 263 | 264 | // ============================ 265 | 266 | it('({})', function() { 267 | var overlay = new PlainOverlay({}), 268 | props = insProps[overlay._id]; 269 | 270 | expect(props.elmTarget).toBe(docElement); 271 | expect(props.window).toBe(window); 272 | expect(props.document).toBe(document); 273 | }); 274 | 275 | it('(fragment)', function() { 276 | var fragment = document.createDocumentFragment(); 277 | expect(fragment.nodeType).toBe(Node.DOCUMENT_FRAGMENT_NODE); 278 | 279 | expect(function() { 280 | var overlay = new PlainOverlay(fragment); 281 | console.log(overlay); // dummy 282 | }).toThrowError('This element is not accepted.'); 283 | }); 284 | 285 | // ============================ 286 | 287 | it('(elementInFrame)', function() { 288 | var overlay = new PlainOverlay(frmElement), 289 | props = insProps[overlay._id]; 290 | 291 | expect(props.elmTarget).toBe(frmElement); 292 | expect(props.window).toBe(frmWindow); 293 | expect(props.document).toBe(frmDocument); 294 | }); 295 | 296 | it('(frameWindow)', function() { 297 | var overlay = new PlainOverlay(frmWindow), 298 | props = insProps[overlay._id]; 299 | 300 | expect(props.elmTarget).toBe(frmDocElement); 301 | expect(props.window).toBe(frmWindow); 302 | expect(props.document).toBe(frmDocument); 303 | }); 304 | 305 | it('(frameDocument)', function() { 306 | var overlay = new PlainOverlay(frmDocument), 307 | props = insProps[overlay._id]; 308 | 309 | expect(props.elmTarget).toBe(frmDocElement); 310 | expect(props.window).toBe(frmWindow); 311 | expect(props.document).toBe(frmDocument); 312 | }); 313 | 314 | it('(frameHtml)', function() { 315 | var overlay = new PlainOverlay(frmDocElement), 316 | props = insProps[overlay._id]; 317 | 318 | expect(props.elmTarget).toBe(frmDocElement); 319 | expect(props.window).toBe(frmWindow); 320 | expect(props.document).toBe(frmDocument); 321 | }); 322 | 323 | it('(frameBody)', function() { 324 | var overlay = new PlainOverlay(frmBody), 325 | props = insProps[overlay._id]; 326 | 327 | expect(props.elmTarget).toBe(frmDocElement); 328 | expect(props.window).toBe(frmWindow); 329 | expect(props.document).toBe(frmDocument); 330 | }); 331 | 332 | }); 333 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PlainOverlay 2 | 3 | [![npm](https://img.shields.io/npm/v/plain-overlay.svg)](https://www.npmjs.com/package/plain-overlay) [![GitHub issues](https://img.shields.io/github/issues/anseki/plain-overlay.svg)](https://github.com/anseki/plain-overlay/issues) [![dependencies](https://img.shields.io/badge/dependencies-No%20dependency-brightgreen.svg)](package.json) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) 4 | 5 | The simple library for customizable overlay which covers all or part of a web page. 6 | 7 | **Document and Examples https://anseki.github.io/plain-overlay/** 8 | 9 | [![ss-01](ss-01.gif)](https://anseki.github.io/plain-overlay/) 10 | [![ss-02](ss-02.gif)](https://anseki.github.io/plain-overlay/) 11 | [![ss-03](ss-03.gif)](https://anseki.github.io/plain-overlay/) 12 | 13 | **Features:** 14 | 15 | - Cover all or part of a web page with an overlay. 16 | - Block scrolling anything under the overlay by a mouse or keys. 17 | - Block focusing anything under the overlay by a mouse or Tab key or access-keys. 18 | - Show something like a loading-animation on the overlay. 19 | - No dependency. 20 | - Single file. 21 | - Modern browsers are supported. (If you want to support legacy browsers such as IE 9-, see [jQuery-plainOverlay](https://anseki.github.io/jquery-plainoverlay/).) 22 | 23 | One of the following can be specified as the target that is covered: 24 | 25 | - A current window 26 | - An element that has a bounding-box 27 | - Another window (i.e. child window such as `