├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── build ├── dist ├── index.css ├── index.js ├── index.min.css ├── index.min.js ├── index.pug ├── ldcv.effects.css └── ldcv.effects.min.css ├── package-lock.json ├── package.json ├── src ├── ldcv.effects.styl ├── ldcv.ls ├── ldcv.pug └── ldcv.styl └── web ├── src ├── ls │ ├── alert │ │ ├── icon.ls │ │ └── index.ls │ └── index.ls ├── pug │ ├── alert │ │ └── index.pug │ ├── index.pug │ └── tos.pug └── styl │ ├── alert │ └── index.styl │ └── index.styl └── static ├── alert └── index.html ├── assets └── img │ ├── a │ ├── error.svg │ ├── info.svg │ ├── question.svg │ ├── success.svg │ ├── warning.svg │ └── x │ │ └── error.svg │ └── s │ ├── error.svg │ ├── info.svg │ ├── question.svg │ ├── success.svg │ └── warning.svg ├── css ├── alert │ ├── index.css │ └── index.min.css ├── index.css └── index.min.css ├── favicon.ico ├── index.html └── js ├── alert ├── icon.js ├── icon.min.js ├── index.js └── index.min.js ├── index.js └── index.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | .*.swp 2 | .swp 3 | *.log 4 | secret.* 5 | node_modules 6 | web/.view 7 | web/static/assets/lib 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Logs 2 | 3 | ## v3.5.6 4 | 5 | - use `auto` instead of `scroll` in `.scroll` class to prevent scroll bar if scrolling is not necessary. 6 | 7 | 8 | ## v3.5.5 9 | 10 | - add `outer-gap` and `nested-gap` classes for more control about cover gapping 11 | 12 | 13 | ## v3.5.4 14 | 15 | - support DOM removal by `removeNode` option in `destroyer` API. 16 | 17 | 18 | ## v3.5.3 19 | 20 | - tweak style about gapping with `scroll` + `autogap` settings. 21 | 22 | 23 | ## v3.5.2 24 | 25 | - add `autogap` class for automatically prepare padding / gapping between window boundary 26 | 27 | 28 | ## v3.5.1 29 | 30 | - tweak fullscreen classes responsive settings 31 | 32 | 33 | ## v3.5.0 34 | 35 | - support conditional fullscreen class 36 | 37 | 38 | ## v3.4.0 39 | 40 | - support destroy function 41 | - remove escape listener once dialog is dismissed 42 | - clear inline cover click event listener variable once dismiss 43 | - fix bug: small gap in the left hand side due to :after pseudo class margin 44 | 45 | 46 | ## v3.3.1 47 | 48 | - fix bug: nested `data-ldcv-*` in child ldcover should not be propagated to parent ldcover. 49 | - upgrade modules to fix dependencies vulnerability 50 | 51 | 52 | ## v3.3.0 53 | 54 | - add `toggled.on` and `toggled.off` event for post toggle event 55 | 56 | 57 | ## v3.2.1 58 | 59 | - fix bug: when toggling off, z-index is updated too early, lead to unsmooth fading animaion sometimes. 60 | 61 | 62 | ## v3.2.0 63 | 64 | - add `data` parameter in `toggle` and `get` api for passing data between caller / callee. 65 | - add `data` event to pass data to callee 66 | 67 | 68 | ## v3.1.0 69 | 70 | - upgrade modules to fix dependencies vulnerability 71 | - add `inPlace` mode to decide if DOM should be re-added under body. 72 | 73 | 74 | ## v3.0.1 75 | 76 | - remove unnecessary `fs-extra` dependency 77 | 78 | 79 | ## v3.0.0 80 | 81 | - release with compact directory structure 82 | 83 | 84 | ## v2.1.2 85 | 86 | - add `style` field in `package.json` 87 | 88 | 89 | ## v2.1.1 90 | 91 | - use minimized dist file as main / browser default file 92 | - upgrade modules 93 | 94 | 95 | ## v2.1.0 96 | 97 | - support initializing DOM based on `template` tag for shadow DOM. 98 | - only insert DOM when cover is active. behavior controlled by `resident` option. 99 | - mangle + compress minimized js to optimize its size in advance. 100 | - lazy initializing until toggling if `root` is a template. 101 | - update document for undocumented features 102 | - member `root` is now a function for accessing `_r` (formal `root`) 103 | - support `inline` mode 104 | - modal displayed inline yet not affect layout 105 | - dismiss on clicking outside dialog 106 | 107 | 108 | ## v2.0.0 109 | 110 | - support `zmgr` directly in ldcover constructor 111 | - use zmgr fallback instead of zstack implementation to simplify code logic 112 | - remove legacy `ldCover` definition 113 | - update window object only if module is not available 114 | - rename `ldcv.*` to `index.*` 115 | - rename static method `set-zmgr` to `zmgr` 116 | - support multiple event syntax 117 | 118 | 119 | ## v1.3.3 120 | 121 | - add `cancel` api for canceling `get` call by promise rejection. 122 | - add `data-ldcv-cancel` directive corresponding to `cancel` api. 123 | 124 | 125 | ## v1.3.2 126 | 127 | - upgrade modules 128 | - add `ldcover` and deprecate `ldCover` 129 | 130 | 131 | ## v1.3.1 132 | 133 | - bug fix: move transition to `.running, .active` classes so there won't be a initial flash of dialog content. 134 | 135 | 136 | ## v1.3.0 137 | 138 | - add `setZmgr` for managing z-index globally. 139 | - update demo for testing `setZmgr`. 140 | 141 | 142 | ## v1.2.0 143 | 144 | - upgrade `template` and `livescript` 145 | - add `bootstrap.ldui` for development. 146 | - add `ldview` and `ldquery` for development. 147 | - tweak build script 148 | - refactor web/ 149 | - add `mini` style ldcover. 150 | 151 | 152 | ## v1.1.1 153 | 154 | - fix bug: escape should not close all modals, but only the topmost modal. 155 | - as a side effect we add an ldcv list ( `popup` ) in ldCover object to track popup order. 156 | 157 | 158 | ## v1.1.0 159 | 160 | - add lock function 161 | - fix bug: incorrect z-index calculation for nested cover 162 | - change scrolling behavior - default no scrolling 163 | - add demo site code 164 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019-2025 zbryikt 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 | # ldcover 2 | 3 | vanilla popup / dialog library. 4 | 5 | 6 | ## Usage 7 | 8 | install with npm: 9 | 10 | npm install ldcover 11 | 12 | include required files ( `index.js` and `index.css` ), and create a ldcover object: 13 | 14 | var ldcv = new ldcover({ ... }); 15 | 16 | 17 | ## Constructor Options 18 | 19 | - `root`: container. 20 | - you can use `template` tag as root for better performance during initialization. The first child in the template will be used as the real root for this ldcover. 21 | - `type`: additional class to add. default: ''. space seprated. 22 | - `transform-fix`: true/false. default: false. 23 | add a 'shown' class after ldcover is shown, which removes transform from .inner block. 24 | useful when content is blurred due to transform, but might lead to glitches when doing transition. use it carefully. 25 | - `delay`: milliseconds. default 300. should be aligned with transition duration. use to control 'shown' and 'running' classes. 26 | - `autoZ`: update root's z-index automatically. default true. 27 | - `baseZ`: the minimal z-index of root. default 3000. 28 | - with autoZ, ldcover keeps track of all cover' z-index and always use larger z-index for newly toggled covers. 29 | baseZ is then used as a base value for all autoZ covers. 30 | however, this may conflict with customized zmgr. 31 | - `zmgr`: set z-index manager for this cover. 32 | - `baseZ` will be used to call zmgr, which set a lower bound of `z-index`. 33 | set `baseZ` to 0 for zmgr to correct work with lower values. 34 | - `animation`: optional space separated class list. 35 | - will be added to .inner node when toggling on, and removed when toggling off. 36 | - handy for adding customized animation from libraries like transition.css or animate.css. 37 | - `escape`: should pressing escape key close the dialog. boolean, default true, optional. 38 | - `lock`: default false. if set to true, only API or data-ldcv-set could close this modal. 39 | - `resident`: default false. if set to true, DOM for this cover will always attached under document. otherwise false. 40 | - not resident node will be attached under `container` or document.body. 41 | - `inPlace`: default true. if set to false, root will be removed from original parent and re-added under body. 42 | - `container`: container for non-resident cover. by default parent of DOM or document.body 43 | - by default, non-resident cover is inserted to the location we find it. Set `container` to change this behavior. 44 | - when `container` is null, `root` is appended at the end of `document.body` when toggled. 45 | - otherwise, `root`is appended at the end of `container` when toggled. 46 | 47 | 48 | ## Object Methods 49 | 50 | - `toggle(state, data)`: toggle on/off ldcover. 51 | - `data`: optional parameter, which will be sent in `data` event. 52 | - program that manages the content of this cover can use this data to update its content. 53 | - `get(data)`: toggle on ldcover and return a promise, which will only be resolved when ldcover.set is called. 54 | - `data`: see `toggle` above. 55 | - `set(v, hide=true)`: set value, which resolve promises from get, and hide ldcover if hide = true. 56 | - use `data-ldcv-set` on elements to automatically set value when elements are clicked. 57 | - `cancel(err, hide=true)`: reject promise returned by `get` with given error `err`. 58 | - a default `Error` object with `{name: 'lderror', id: 999}` will be used if `err` is omitted. 59 | - ldcover is hidden if `hide` = true. true by default. 60 | - use `data-ldcv-cancel` on elements to automatically cancel when clicked. 61 | - `on(event, cb)`: listen to certain event. evnets: 62 | - `toggle.on`: when ldcover is toggled on. may fired before shown. 63 | - `toggle.off`: when ldcover is toggled off. may fired before hidden. 64 | - `toggled.on`: when ldcover is toggled on. fired after shown. 65 | - `toggled.off`: when ldcover is toggled off. fired after hidden. 66 | - `isOn()`: is this modal active ( opened ). return true or false 67 | - `lock()`: lock this cover. ( can't be dismissed by escaping ) 68 | - alternatively, you can lock cover by adding `data-lock="true"` attribute to cover root. 69 | - `root()`: get cover root node. 70 | - `zmgr(mgr)`: set z-index manager for this cover. return the zmgr used if `mgr` is omitted. 71 | - `baseZ` will be used to call zmgr, which set a lower bound of `z-index`. 72 | set `baseZ` to 0 for zmgr to correct work with lower values. 73 | - `append(node)`: insert `node` in the base node of this cover. 74 | - useful if this ldcover is created without root. 75 | - `destroy(opt)`: object destroyer. `opt` is an option object with following fields: 76 | - `removeNode`: should ldcover remove DOM of this cover. default false 77 | - by default, DOM of this cover will be inserted back in DOM after this ldcover object been destroyed. 78 | - to also wipe out the DOM element, set `removeNode` to true. 79 | 80 | 81 | ## Class Method 82 | 83 | - `zmgr(zmgr)`: set a shared z-index manager. useful to manager widget z-index globally. 84 | this manager should provide following methods: 85 | - `add(baseVal, size)`: return actual added value. 86 | - baseVal: hint value for the z-index we'd like to use 87 | - size: hint size about how large the object we added is 88 | - `remove(val)`: remove val ( returned by add ) from this manager. 89 | 90 | as described above, `baseZ` will be used to call zmgr, which set a lower bound of `z-index`. 91 | set `baseZ` to 0 in ldcover instance so zmgr can work correclty with lower values. 92 | 93 | 94 | ## Spec. and structure 95 | 96 | A simple ldcover popup are built with following html structure: 97 | 98 | * .ldcv - topmost, fullscreen container 99 | * .base - control the overall size and position for this box ( could be omit ) 100 | * .inner - dialog container. constraint size. transition animation goes here 101 | 102 | 103 | one can decorate ldcover widgets by adding classes over the outmost element. following classes are defined by default: 104 | 105 | * .ldcv.bare: 106 | - no covered bk. 107 | - custom position for .ldcv > .base 108 | - overflow: visible for .ldcv > .base > .inner (why?) 109 | * .ldcv.lg, .ldcv.md 110 | - different size of panel. instead of using this, you could also set size directly on .base element. 111 | * .ldcv.full - fullscreen modal. 112 | * .ldcv.full-sm, .ldcv.full-md, .ldcv.full-lg - conditional fullscreen modal. break point: 113 | - `sm`: < 576px 114 | - `md`: < 768px 115 | - `lg`: < 960px 116 | * .ldcv.light - light overlay bk 117 | * .ldcv.mini - non-blocking, float style dialog with following position available: 118 | - .ldcv.mini.left 119 | - .ldcv.mini.right 120 | - .ldcv.mini.top 121 | - .ldcv.mini.bottom 122 | * .ldcv.inline - inline cover. Won't affect local layout 123 | 124 | * centering 125 | - by default .base is centered with vertical-align + ::after pseudo class. instead you can choose different methods, described below: 126 | - .ldcv.margin-centered 127 | - center with margin: auto + left/right/top/bottom: 0 and position: absolute. need width/height to be provided. 128 | - .ldcv.transform-centered 129 | - with transform-center, .base is centered with left: 50%, top: 50% + transform: translate(-50%,-50%), which don't need width/height to be provided anymore. 130 | - NOTE: this might causes content to be blur, so use it carefully. 131 | 132 | * .ldcv.scroll: 133 | - add `scroll` class on the ldcv node when you expect the modal content to longer than a screen's height. It makes the modal scrollable by users. 134 | 135 | * .ldcv.autogap: 136 | - add `autogap` class on the ldcv node to automatically adjust cover padding and margin along with responsive scenario, with two additional classes: 137 | - `.outer-gap`: only apply margin style. Used alone without `autogap` 138 | - `.autogap.nested-gap`: apply padding style in nested div. Used along with `autogap` 139 | 140 | * alternative transition 141 | - you can use alternative transition by adding additional class in .ldcv, including following classes: 142 | - ldcv-scale 143 | - ldcv-zoom 144 | - ldcv-vortex 145 | - ldcv-slide-rtl 146 | - ldcv-slide-ltr 147 | - ldcv-slide-ttb 148 | - ldcv-slide-btt 149 | - ldcv-flip-h-left 150 | - ldcv-flip-h-right 151 | - ldcv-flip-v-top 152 | - ldcv-flip-v-bottom 153 | - ldcv-fade 154 | - example of setting a alternative transition: 155 | 156 | 157 |
...
158 | 159 | 160 | 161 | ## Action 162 | 163 | Simple popup could be configured with automatically set invocation to resolve promises waited by get. use `data-ldcv-set` attribute on elements to indicate what values to be passed into set: 164 | 165 |
166 | 167 | 168 |
169 | 170 | use get function to wait for the return value: 171 | 172 | ldcv.get!then -> if it == "1" => "OK" else "Cancel" 173 | 174 | 175 | ## Todo 176 | 177 | - implement all this nice transitional effect: 178 | - https://tympanus.net/Development/ModalWindowEffects/ 179 | - https://tympanus.net/Development/PageTransitions/ 180 | 181 | 182 | ## License 183 | 184 | MIT 185 | -------------------------------------------------------------------------------- /build: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | rm -rf dist 3 | mkdir -p dist 4 | echo "build src/ldcv.ls -> dist/index.js ..." 5 | ./node_modules/.bin/lsc -cp --no-header src/ldcv.ls > dist/index.js 6 | echo "build src/ldcv.styl -> dist/index.css ..." 7 | ./node_modules/.bin/stylus -p src/ldcv.styl > dist/index.css 8 | echo "build src/ldcv.effects.styl -> dist/ldcv.effects.css ..." 9 | ./node_modules/.bin/stylus -p src/ldcv.effects.styl > dist/ldcv.effects.css 10 | echo "minifying index.js ..." 11 | ./node_modules/.bin/uglifyjs dist/index.js -m -c > dist/index.min.js 12 | echo "minifying index.css ..." 13 | ./node_modules/.bin/uglifycss dist/index.css > dist/index.min.css 14 | echo "minifying ldcv.effects.css ..." 15 | ./node_modules/.bin/uglifycss dist/ldcv.effects.css > dist/ldcv.effects.min.css 16 | echo "Copy pug mixin to dist/ ..." 17 | cp src/ldcv.pug dist/index.pug 18 | echo "Copy dist/ to web/ ..." 19 | rm -rf web/static/assets/lib/ldcover/dev/ 20 | mkdir -p web/static/assets/lib/ldcover/dev/ 21 | cp -R dist/* web/static/assets/lib/ldcover/dev/ 22 | echo "done." 23 | 24 | -------------------------------------------------------------------------------- /dist/index.css: -------------------------------------------------------------------------------- 1 | .ldcv { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | z-index: -1; 6 | width: 100%; 7 | height: 100%; 8 | opacity: 0; 9 | text-align: center; 10 | perspective: 1024px; 11 | visibility: hidden; 12 | } 13 | .ldcv:before { 14 | content: " "; 15 | display: block; 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | width: 100%; 20 | height: 100%; 21 | background: rgba(0,0,0,0.5); 22 | } 23 | .ldcv:after { 24 | content: " "; 25 | display: inline-block; 26 | height: 100%; 27 | width: 0px; 28 | vertical-align: middle; 29 | /* 30 | `margin-right` seems to lead to a small gap in the left of the cover, 31 | but we don't know why we added this. remove it but keep this comment here. 32 | expected to be removed in near future. 33 | */ 34 | } 35 | .ldcv.running, 36 | .ldcv.active { 37 | z-index: 1; 38 | transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; 39 | } 40 | .ldcv.no-shadow:before, 41 | .ldcv.bare:before { 42 | display: none; 43 | } 44 | .ldcv.active { 45 | visibility: visible; 46 | opacity: 1; 47 | } 48 | .ldcv > .base > .inner { 49 | width: 100%; 50 | height: 100%; 51 | overflow: hidden; 52 | border-radius: 5px; 53 | box-shadow: 0 4px 8px rgba(0,0,0,0.3); 54 | background: #fff; 55 | padding: 0; 56 | transform: translateZ(0); 57 | transform-origin: 50% 50%; 58 | transition: all 0.2s ease-in-out; 59 | } 60 | .ldcv > .base > .inner > .foot { 61 | padding: 15px; 62 | margin-top: 15px; 63 | border-top: 1px solid #ddd; 64 | } 65 | .ldcv.shown > .base > .inner { 66 | transform: none !important; 67 | } 68 | .ldcv > .base { 69 | text-align: left; 70 | z-index: 5; 71 | max-width: 80%; 72 | max-height: 90%; 73 | display: inline-block; 74 | vertical-align: middle; 75 | } 76 | .ldcv.default-size > .base { 77 | width: 640px; 78 | height: 600px; 79 | } 80 | .ldcv.margin-centered > .base { 81 | position: absolute; 82 | top: 0; 83 | left: 0; 84 | bottom: 0; 85 | right: 0; 86 | margin: auto; 87 | transform: initial; 88 | perspective: 300px; 89 | } 90 | .ldcv.transform-centered > .base { 91 | left: 50%; 92 | top: 50%; 93 | transform: translate(-50%, -50%); 94 | } 95 | .ldcv.bare { 96 | position: absolute; 97 | width: auto; 98 | height: auto; 99 | } 100 | .ldcv.bare > .base { 101 | width: auto; 102 | height: auto; 103 | max-width: initial; 104 | max-height: initial; 105 | transform: initial; 106 | top: initial; 107 | left: initial; 108 | right: initial; 109 | bottom: initial; 110 | position: absolute; 111 | } 112 | .ldcv.bare > .base > .inner { 113 | overflow: visible; 114 | } 115 | .ldcv.scroll { 116 | background: rgba(0,0,0,0.5); 117 | overflow-y: auto; 118 | overflow-x: hidden; 119 | /* padding top/bottom make it look better in desktop view, 120 | but leave a strange hole in mobile view especially with `autogap`. 121 | thus we will cancel these styles if `autogap` is set. */ 122 | padding-top: 50px; 123 | padding-bottom: 50px; 124 | } 125 | .ldcv.scroll:before { 126 | display: none; 127 | } 128 | .ldcv.scroll > .base { 129 | max-height: initial; 130 | } 131 | /* if we want by default scrolling, we can add this class 132 | .ldcv.noscroll 133 | background: initial 134 | overflow: auto 135 | padding: auto 136 | &:before 137 | display: block 138 | & > .base 139 | max-height: 90% 140 | */ 141 | .ldcv.light:before { 142 | background: rgba(255,255,255,0.8); 143 | } 144 | .ldcv.scroll.light { 145 | background: rgba(255,255,255,0.8); 146 | } 147 | /* 148 | .ldcv > .base > .inner 149 | transform: scaleX(0.9) translateY(-40px) 150 | .ldcv.active > .base. > .inner 151 | transform: scaleX(1.0) translateY(0) 152 | */ 153 | /* 154 | .ldcv > .base > .inner 155 | transform: scaleX(0.9) rotateX(15deg) 156 | transition: all 0.3s ease-in-out 157 | .ldcv.active > .base > .inner 158 | transform: scaleX(1.0) rotateX(0deg) 159 | */ 160 | .ldcv.lg > .base { 161 | width: 960px; 162 | height: 700px; 163 | } 164 | .ldcv.md > .base { 165 | width: 720px; 166 | height: 500px; 167 | } 168 | .ldcv.full > .base { 169 | border: none; 170 | border-radius: 0; 171 | width: 100%; 172 | height: 100%; 173 | max-width: 100%; 174 | max-height: 100%; 175 | } 176 | .ldcv.full > .base > .inner { 177 | border-radius: 0; 178 | } 179 | .ldcv.mini, 180 | .ldcv.inline { 181 | width: auto; 182 | height: auto; 183 | left: auto; 184 | top: auto; 185 | right: auto; 186 | bottom: auto; 187 | } 188 | .ldcv.mini:before, 189 | .ldcv.inline:before, 190 | .ldcv.mini:after, 191 | .ldcv.inline:after { 192 | display: none; 193 | } 194 | .ldcv.mini > .base, 195 | .ldcv.inline > .base { 196 | max-width: initial; 197 | max-height: initial; 198 | } 199 | .ldcv.mini > .base > .inner, 200 | .ldcv.inline > .base > .inner { 201 | width: initial; 202 | height: initial; 203 | } 204 | .ldcv.mini.left { 205 | left: 1.25em; 206 | } 207 | .ldcv.mini.right { 208 | right: 1.25em; 209 | } 210 | .ldcv.mini.top { 211 | top: 1.25em; 212 | } 213 | .ldcv.mini.bottom { 214 | bottom: 1.25em; 215 | } 216 | .ldcv.inline { 217 | position: relative; 218 | } 219 | .ldcv.inline > .base { 220 | position: absolute; 221 | top: 0; 222 | left: 0; 223 | } 224 | .ldcv.autogap > .base > .inner { 225 | padding: 2em; 226 | } 227 | .ldcv.nested-gap > .base > .inner > div { 228 | padding: 1em; 229 | } 230 | .ldcv.nested-gap.autogap > .base > .inner { 231 | padding: 0; 232 | } 233 | @media (max-width: 767px) { 234 | .ldcv.autogap > .base, 235 | .ldcv.outer-gap > .base { 236 | /* leave 2px gap in both side. see `padding-top` below */ 237 | max-width: calc(100% - 4px); 238 | width: 100%; 239 | } 240 | .ldcv.autogap > .base > .inner { 241 | padding: 2em 0.75em; 242 | } 243 | .ldcv.nested-gap.autogap > .base > .inner { 244 | padding: 0; 245 | } 246 | .ldcv.autogap.scroll, 247 | .ldcv.outer-gap.scroll { 248 | /* with `autogap` in mobile view, we want a panel close to fullscreen. 249 | thus we remove padding from `scroll` here. 250 | `2px` is to align the gap in width, see `max-width` above. */ 251 | padding-top: 2px; 252 | padding-bottom: 2px; 253 | } 254 | } 255 | @media (max-width: 959px) { 256 | .ldcv.full-lg { 257 | padding: 0 !important; 258 | } 259 | .ldcv.full-lg > .base { 260 | min-width: 100%; 261 | height: 100% !important; 262 | } 263 | .ldcv.full-lg > .base > .inner { 264 | border-radius: 0; 265 | } 266 | .ldcv.full-lg.scroll > .base { 267 | overflow: scroll; 268 | } 269 | .ldcv.full-lg.scroll > .base > .inner { 270 | height: auto; 271 | } 272 | } 273 | @media (max-width: 575px) { 274 | .ldcv.full-sm { 275 | padding: 0 !important; 276 | } 277 | .ldcv.full-sm > .base { 278 | min-width: 100%; 279 | height: 100% !important; 280 | } 281 | .ldcv.full-sm > .base > .inner { 282 | border-radius: 0; 283 | } 284 | .ldcv.full-sm.scroll > .base { 285 | overflow: scroll; 286 | } 287 | .ldcv.full-sm.scroll > .base > .inner { 288 | height: auto; 289 | } 290 | } 291 | @media (max-width: 767px) { 292 | .ldcv.full-md { 293 | padding: 0 !important; 294 | } 295 | .ldcv.full-md > .base { 296 | min-width: 100%; 297 | height: 100% !important; 298 | } 299 | .ldcv.full-md > .base > .inner { 300 | border-radius: 0; 301 | } 302 | .ldcv.full-md.scroll > .base { 303 | overflow: scroll; 304 | } 305 | .ldcv.full-md.scroll > .base > .inner { 306 | height: auto; 307 | } 308 | } 309 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | var parent, ldcover; 3 | parent = function(r, s, e){ 4 | var n; 5 | e == null && (e = document); 6 | n = r; 7 | while (n && n !== e) { 8 | n = n.parentNode; 9 | } 10 | if (n !== e) { 11 | return null; 12 | } 13 | n = r; 14 | while (n && n !== e && n.matches && !n.matches(s)) { 15 | n = n.parentNode; 16 | } 17 | if (n === e && (!e.matches || !e.matches(s))) { 18 | return null; 19 | } 20 | return n; 21 | }; 22 | ldcover = function(opt){ 23 | var ret; 24 | opt == null && (opt = {}); 25 | this.evtHandler = {}; 26 | this.opt = import$({ 27 | delay: 300, 28 | autoZ: true, 29 | baseZ: 3000, 30 | escape: true, 31 | byDisplay: true 32 | }, opt); 33 | if (opt.zmgr) { 34 | this.zmgr(opt.zmgr); 35 | } 36 | this.promises = []; 37 | this._r = !opt.root 38 | ? (ret = document.createElement("div"), ret.innerHTML = "
", ret) 39 | : typeof opt.root === 'string' 40 | ? document.querySelector(opt.root) 41 | : opt.root; 42 | this.cls = typeof opt.type === 'string' 43 | ? opt.type.split(' ') 44 | : opt.type; 45 | this.resident = opt.resident != null ? opt.resident : false; 46 | this.inPlace = opt.inPlace != null ? opt.inPlace : true; 47 | this.container = typeof opt.container === 'string' 48 | ? document.querySelector(opt.container) 49 | : opt.container; 50 | if (!(this._r.content && this._r.content.nodeType === Element.DOCUMENT_FRAGMENT_NODE)) { 51 | this.init(); 52 | } 53 | return this; 54 | }; 55 | ldcover.prototype = import$(Object.create(Object.prototype), { 56 | root: function(){ 57 | if (!this.inited) { 58 | this.init(); 59 | } 60 | return this._r; 61 | }, 62 | init: function(){ 63 | var that, clicksrc, this$ = this; 64 | if (this.inited) { 65 | return; 66 | } 67 | this.inited = true; 68 | if (!this.inPlace) { 69 | this._r.parentNode.removeChild(this._r); 70 | document.body.appendChild(this._r); 71 | } 72 | if (!this.resident && this._r.parentNode) { 73 | this._c = document.createComment(" ldcover placeholder "); 74 | this._r.parentNode.insertBefore(this._c, this._r); 75 | this._r.parentNode.removeChild(this._r); 76 | } 77 | if (this._r.content && this._r.content.nodeType === Element.DOCUMENT_FRAGMENT_NODE) { 78 | this._r = this._r.content.cloneNode(true).childNodes[0]; 79 | this._r.parentNode.removeChild(this._r); 80 | } 81 | if (that = this._r.getAttribute('data-lock')) { 82 | if (that === 'true') { 83 | this.opt.lock = true; 84 | } 85 | } 86 | this.inner = this._r.querySelector('.inner'); 87 | this.base = this._r.querySelector('.base'); 88 | this._r.classList.add.apply(this._r.classList, ['ldcv'].concat(this.cls || [])); 89 | if (this.opt.byDisplay) { 90 | this._r.style.display = 'none'; 91 | } 92 | clicksrc = null; 93 | this._r.addEventListener('mousedown', this.el_md = function(e){ 94 | return clicksrc = e.target; 95 | }); 96 | return this._r.addEventListener('click', this.el_c = function(e){ 97 | var tgt, action; 98 | if (clicksrc === this$._r && !this$.opt.lock) { 99 | e.stopPropagation(); 100 | return this$.toggle(false); 101 | } 102 | if (parent(e.target, '*[data-ldcv-cancel]', this$._r)) { 103 | e.stopPropagation(); 104 | return this$.cancel(); 105 | } 106 | tgt = parent(e.target, '*[data-ldcv-set]', this$._r); 107 | if (tgt && (action = tgt.getAttribute("data-ldcv-set")) != null) { 108 | if (!parent(tgt, '.disabled', this$._r)) { 109 | e.stopPropagation(); 110 | return this$.set(action); 111 | } 112 | } 113 | }); 114 | }, 115 | zmgr: function(it){ 116 | if (it != null) { 117 | return this._zmgr = it; 118 | } else { 119 | return this._zmgr; 120 | } 121 | }, 122 | append: function(it){ 123 | var base; 124 | base = this._r.childNodes[0]; 125 | return (base && base.classList.contains('base') 126 | ? base 127 | : this._r).appendChild(it); 128 | }, 129 | get: function(p){ 130 | var this$ = this; 131 | return new Promise(function(res, rej){ 132 | this$.promises.push({ 133 | res: res, 134 | rej: rej 135 | }); 136 | return this$.toggle(true, p); 137 | }); 138 | }, 139 | cancel: function(err, hide){ 140 | hide == null && (hide = true); 141 | this.promises.splice(0).map(function(p){ 142 | var ref$; 143 | return p.rej(err || (ref$ = new Error(), ref$.name = 'lderror', ref$.id = 999, ref$)); 144 | }); 145 | if (hide) { 146 | return this.toggle(false); 147 | } 148 | }, 149 | set: function(v, hide){ 150 | hide == null && (hide = true); 151 | this.promises.splice(0).map(function(p){ 152 | return p.res(v); 153 | }); 154 | if (hide) { 155 | return this.toggle(false); 156 | } 157 | }, 158 | isOn: function(){ 159 | return this._r.classList.contains('active'); 160 | }, 161 | lock: function(){ 162 | return this.opt.lock = true; 163 | }, 164 | toggle: function(v, p){ 165 | var this$ = this; 166 | return new Promise(function(res, rej){ 167 | var isActive; 168 | if (!this$.inited) { 169 | this$.init(); 170 | } 171 | if (v && p != null) { 172 | this$.fire('data', p); 173 | } 174 | if (!(v != null) && this$._r.classList.contains('running')) { 175 | return res(); 176 | } 177 | if (v != null && this$._r.classList.contains('active') === !!v) { 178 | return res(); 179 | } 180 | isActive = v != null 181 | ? v 182 | : !this$._r.classList.contains('active'); 183 | if (isActive && !this$._r.parentNode) { 184 | if (!(this$.container != null) && this$._c && this$._c.parentNode) { 185 | this$._c.parentNode.insertBefore(this$._r, this$._c); 186 | } else { 187 | (this$.container || document.body).appendChild(this$._r); 188 | } 189 | } 190 | this$._r.classList.add('running'); 191 | if (this$.opt.byDisplay) { 192 | this$._r.style.display = 'block'; 193 | } 194 | if (this$._r.classList.contains('inline')) { 195 | if (isActive) { 196 | this$.el_h = function(e){ 197 | if (this$._r.contains(e.target)) {} else { 198 | return this$.toggle(false); 199 | } 200 | }; 201 | window.addEventListener('click', this$.el_h); 202 | } else if (this$.el_h) { 203 | window.removeEventListener('click', this$.el_h); 204 | this$.el_h = null; 205 | } 206 | } 207 | if (!isActive && this$.el_esc) { 208 | document.removeEventListener('keyup', this$.el_esc); 209 | this$.el_esc = null; 210 | } 211 | return setTimeout(function(){ 212 | var idx; 213 | this$._r.classList.toggle('active', isActive); 214 | if (!this$.opt.lock && this$.opt.escape && isActive && !this$.el_esc) { 215 | this$.el_esc = function(e){ 216 | var ref$; 217 | if (e.keyCode === 27) { 218 | if ((ref$ = ldcover.popups)[ref$.length - 1] === this$) { 219 | return this$.toggle(false); 220 | } 221 | } 222 | }; 223 | document.addEventListener('keyup', this$.el_esc); 224 | } 225 | if (this$.opt.animation && this$.inner) { 226 | this$.inner.classList[isActive ? 'add' : 'remove'].apply(this$.inner.classList, this$.opt.animation.split(' ')); 227 | } 228 | if (isActive) { 229 | ldcover.popups.push(this$); 230 | } else { 231 | idx = ldcover.popups.indexOf(this$); 232 | if (idx >= 0) { 233 | ldcover.popups.splice(idx, 1); 234 | } 235 | } 236 | if (this$.opt.autoZ) { 237 | if (isActive) { 238 | this$._r.style.zIndex = this$.z = (this$._zmgr || ldcover._zmgr).add(this$.opt.baseZ); 239 | } else { 240 | (this$._zmgr || ldcover._zmgr).remove(this$.z); 241 | delete this$.z; 242 | } 243 | } 244 | if (this$.opt.transformFix && !isActive) { 245 | this$._r.classList.remove('shown'); 246 | } 247 | setTimeout(function(){ 248 | this$._r.classList.remove('running'); 249 | if (this$.opt.transformFix && isActive) { 250 | this$._r.classList.add('shown'); 251 | } 252 | if (!isActive && this$.opt.byDisplay) { 253 | this$._r.style.display = 'none'; 254 | } 255 | if (!isActive && this$._r.parentNode && !this$.resident) { 256 | this$._r.parentNode.removeChild(this$._r); 257 | } 258 | if (!isActive && this$.opt.autoZ) { 259 | this$._r.style.zIndex = ""; 260 | } 261 | return this$.fire("toggled." + (isActive ? 'on' : 'off')); 262 | }, this$.opt.delay); 263 | if (this$.promises.length && !isActive) { 264 | this$.set(undefined, false); 265 | } 266 | this$.fire("toggle." + (isActive ? 'on' : 'off')); 267 | return res(); 268 | }, 50); 269 | }); 270 | }, 271 | on: function(n, cb){ 272 | var this$ = this; 273 | return (Array.isArray(n) 274 | ? n 275 | : [n]).map(function(n){ 276 | var ref$; 277 | return ((ref$ = this$.evtHandler)[n] || (ref$[n] = [])).push(cb); 278 | }); 279 | }, 280 | fire: function(n){ 281 | var v, res$, i$, to$, ref$, len$, cb, results$ = []; 282 | res$ = []; 283 | for (i$ = 1, to$ = arguments.length; i$ < to$; ++i$) { 284 | res$.push(arguments[i$]); 285 | } 286 | v = res$; 287 | for (i$ = 0, len$ = (ref$ = this.evtHandler[n] || []).length; i$ < len$; ++i$) { 288 | cb = ref$[i$]; 289 | results$.push(cb.apply(this, v)); 290 | } 291 | return results$; 292 | }, 293 | destroy: function(o){ 294 | var this$ = this; 295 | o == null && (o = {}); 296 | return this.toggle(false).then(function(){ 297 | if (this$._c) { 298 | if (!o.removeNode) { 299 | this$._c.parentNode.insertBefore(this$._r, this$._c); 300 | } 301 | this$._c.parentNode.removeChild(this$._c); 302 | } 303 | this$._r.removeEventListener('mousedown', this$.el_md); 304 | return this$._r.removeEventListener('click', this$.el_c); 305 | }); 306 | } 307 | }); 308 | import$(ldcover, { 309 | popups: [], 310 | _zmgr: { 311 | add: function(v){ 312 | var z, ref$; 313 | (this.s || (this.s = [])).push(z = Math.max(v || 0, ((ref$ = this.s)[ref$.length - 1] || 0) + 1)); 314 | return z; 315 | }, 316 | remove: function(v){ 317 | var i; 318 | if ((i = (this.s || (this.s = [])).indexOf(v)) < 0) {} else { 319 | return this.s.splice(i, 1); 320 | } 321 | } 322 | }, 323 | zmgr: function(it){ 324 | if (it != null) { 325 | return this._zmgr = it; 326 | } else { 327 | return this._zmgr; 328 | } 329 | } 330 | }); 331 | if (typeof module != 'undefined' && module !== null) { 332 | module.exports = ldcover; 333 | } else if (window) { 334 | window.ldcover = ldcover; 335 | } 336 | function import$(obj, src){ 337 | var own = {}.hasOwnProperty; 338 | for (var key in src) if (own.call(src, key)) obj[key] = src[key]; 339 | return obj; 340 | } 341 | }).call(this); 342 | -------------------------------------------------------------------------------- /dist/index.min.css: -------------------------------------------------------------------------------- 1 | .ldcv{position:fixed;top:0;left:0;z-index:-1;width:100%;height:100%;opacity:0;text-align:center;perspective:1024px;visibility:hidden}.ldcv:before{content:" ";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5)}.ldcv:after{content:" ";display:inline-block;height:100%;width:0;vertical-align:middle}.ldcv.running,.ldcv.active{z-index:1;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.ldcv.no-shadow:before,.ldcv.bare:before{display:none}.ldcv.active{visibility:visible;opacity:1}.ldcv>.base>.inner{width:100%;height:100%;overflow:hidden;border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,0.3);background:#fff;padding:0;transform:translateZ(0);transform-origin:50% 50%;transition:all .2s ease-in-out}.ldcv>.base>.inner>.foot{padding:15px;margin-top:15px;border-top:1px solid #ddd}.ldcv.shown>.base>.inner{transform:none !important}.ldcv>.base{text-align:left;z-index:5;max-width:80%;max-height:90%;display:inline-block;vertical-align:middle}.ldcv.default-size>.base{width:640px;height:600px}.ldcv.margin-centered>.base{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;transform:initial;perspective:300px}.ldcv.transform-centered>.base{left:50%;top:50%;transform:translate(-50%,-50%)}.ldcv.bare{position:absolute;width:auto;height:auto}.ldcv.bare>.base{width:auto;height:auto;max-width:initial;max-height:initial;transform:initial;top:initial;left:initial;right:initial;bottom:initial;position:absolute}.ldcv.bare>.base>.inner{overflow:visible}.ldcv.scroll{background:rgba(0,0,0,0.5);overflow-y:auto;overflow-x:hidden;padding-top:50px;padding-bottom:50px}.ldcv.scroll:before{display:none}.ldcv.scroll>.base{max-height:initial}.ldcv.light:before{background:rgba(255,255,255,0.8)}.ldcv.scroll.light{background:rgba(255,255,255,0.8)}.ldcv.lg>.base{width:960px;height:700px}.ldcv.md>.base{width:720px;height:500px}.ldcv.full>.base{border:0;border-radius:0;width:100%;height:100%;max-width:100%;max-height:100%}.ldcv.full>.base>.inner{border-radius:0}.ldcv.mini,.ldcv.inline{width:auto;height:auto;left:auto;top:auto;right:auto;bottom:auto}.ldcv.mini:before,.ldcv.inline:before,.ldcv.mini:after,.ldcv.inline:after{display:none}.ldcv.mini>.base,.ldcv.inline>.base{max-width:initial;max-height:initial}.ldcv.mini>.base>.inner,.ldcv.inline>.base>.inner{width:initial;height:initial}.ldcv.mini.left{left:1.25em}.ldcv.mini.right{right:1.25em}.ldcv.mini.top{top:1.25em}.ldcv.mini.bottom{bottom:1.25em}.ldcv.inline{position:relative}.ldcv.inline>.base{position:absolute;top:0;left:0}.ldcv.autogap>.base>.inner{padding:2em}.ldcv.nested-gap>.base>.inner>div{padding:1em}.ldcv.nested-gap.autogap>.base>.inner{padding:0}@media(max-width:767px){.ldcv.autogap>.base,.ldcv.outer-gap>.base{max-width:calc(100% - 4px);width:100%}.ldcv.autogap>.base>.inner{padding:2em .75em}.ldcv.nested-gap.autogap>.base>.inner{padding:0}.ldcv.autogap.scroll,.ldcv.outer-gap.scroll{padding-top:2px;padding-bottom:2px}}@media(max-width:959px){.ldcv.full-lg{padding:0 !important}.ldcv.full-lg>.base{min-width:100%;height:100% !important}.ldcv.full-lg>.base>.inner{border-radius:0}.ldcv.full-lg.scroll>.base{overflow:scroll}.ldcv.full-lg.scroll>.base>.inner{height:auto}}@media(max-width:575px){.ldcv.full-sm{padding:0 !important}.ldcv.full-sm>.base{min-width:100%;height:100% !important}.ldcv.full-sm>.base>.inner{border-radius:0}.ldcv.full-sm.scroll>.base{overflow:scroll}.ldcv.full-sm.scroll>.base>.inner{height:auto}}@media(max-width:767px){.ldcv.full-md{padding:0 !important}.ldcv.full-md>.base{min-width:100%;height:100% !important}.ldcv.full-md>.base>.inner{border-radius:0}.ldcv.full-md.scroll>.base{overflow:scroll}.ldcv.full-md.scroll>.base>.inner{height:auto}} 2 | -------------------------------------------------------------------------------- /dist/index.min.js: -------------------------------------------------------------------------------- 1 | !function(){var s,o;function n(t,e){var n,r={}.hasOwnProperty;for(n in e)r.call(e,n)&&(t[n]=e[n]);return t}s=function(t,e,n){var r;for(null==n&&(n=document),r=t;r&&r!==n;)r=r.parentNode;if(r!==n)return null;for(r=t;r&&r!==n&&r.matches&&!r.matches(e);)r=r.parentNode;return r!==n||n.matches&&n.matches(e)?r:null},(o=function(t){var e;return null==t&&(t={}),this.evtHandler={},this.opt=n({delay:300,autoZ:!0,baseZ:3e3,escape:!0,byDisplay:!0},t),t.zmgr&&this.zmgr(t.zmgr),this.promises=[],this._r=t.root?"string"==typeof t.root?document.querySelector(t.root):t.root:((e=document.createElement("div")).innerHTML='
',e),this.cls="string"==typeof t.type?t.type.split(" "):t.type,this.resident=null!=t.resident&&t.resident,this.inPlace=null==t.inPlace||t.inPlace,this.container="string"==typeof t.container?document.querySelector(t.container):t.container,this._r.content&&this._r.content.nodeType===Element.DOCUMENT_FRAGMENT_NODE||this.init(),this}).prototype=n(Object.create(Object.prototype),{root:function(){return this.inited||this.init(),this._r},init:function(){var t,r,i=this;if(!this.inited)return this.inited=!0,this.inPlace||(this._r.parentNode.removeChild(this._r),document.body.appendChild(this._r)),!this.resident&&this._r.parentNode&&(this._c=document.createComment(" ldcover placeholder "),this._r.parentNode.insertBefore(this._c,this._r),this._r.parentNode.removeChild(this._r)),this._r.content&&this._r.content.nodeType===Element.DOCUMENT_FRAGMENT_NODE&&(this._r=this._r.content.cloneNode(!0).childNodes[0],this._r.parentNode.removeChild(this._r)),(t=this._r.getAttribute("data-lock"))&&"true"===t&&(this.opt.lock=!0),this.inner=this._r.querySelector(".inner"),this.base=this._r.querySelector(".base"),this._r.classList.add.apply(this._r.classList,["ldcv"].concat(this.cls||[])),this.opt.byDisplay&&(this._r.style.display="none"),r=null,this._r.addEventListener("mousedown",this.el_md=function(t){return r=t.target}),this._r.addEventListener("click",this.el_c=function(t){var e,n;return r!==i._r||i.opt.lock?s(t.target,"*[data-ldcv-cancel]",i._r)?(t.stopPropagation(),i.cancel()):(e=s(t.target,"*[data-ldcv-set]",i._r))&&null!=(n=e.getAttribute("data-ldcv-set"))&&!s(e,".disabled",i._r)?(t.stopPropagation(),i.set(n)):void 0:(t.stopPropagation(),i.toggle(!1))})},zmgr:function(t){return null!=t?this._zmgr=t:this._zmgr},append:function(t){var e=this._r.childNodes[0];return(e&&e.classList.contains("base")?e:this._r).appendChild(t)},get:function(n){var r=this;return new Promise(function(t,e){return r.promises.push({res:t,rej:e}),r.toggle(!0,n)})},cancel:function(e,t){if(null==t&&(t=!0),this.promises.splice(0).map(function(t){return t.rej(e||((t=new Error).name="lderror",t.id=999,t))}),t)return this.toggle(!1)},set:function(e,t){if(null==t&&(t=!0),this.promises.splice(0).map(function(t){return t.res(e)}),t)return this.toggle(!1)},isOn:function(){return this._r.classList.contains("active")},lock:function(){return this.opt.lock=!0},toggle:function(r,i){var s=this;return new Promise(function(e,t){var n;return s.inited||s.init(),r&&null!=i&&s.fire("data",i),null==r&&s._r.classList.contains("running")||null!=r&&s._r.classList.contains("active")===!!r?e():((n=null!=r?r:!s._r.classList.contains("active"))&&!s._r.parentNode&&(null==s.container&&s._c&&s._c.parentNode?s._c.parentNode.insertBefore(s._r,s._c):(s.container||document.body).appendChild(s._r)),s._r.classList.add("running"),s.opt.byDisplay&&(s._r.style.display="block"),s._r.classList.contains("inline")&&(n?(s.el_h=function(t){if(!s._r.contains(t.target))return s.toggle(!1)},window.addEventListener("click",s.el_h)):s.el_h&&(window.removeEventListener("click",s.el_h),s.el_h=null)),!n&&s.el_esc&&(document.removeEventListener("keyup",s.el_esc),s.el_esc=null),setTimeout(function(){var t;return s._r.classList.toggle("active",n),!s.opt.lock&&s.opt.escape&&n&&!s.el_esc&&(s.el_esc=function(t){if(27===t.keyCode&&(t=o.popups)[t.length-1]===s)return s.toggle(!1)},document.addEventListener("keyup",s.el_esc)),s.opt.animation&&s.inner&&s.inner.classList[n?"add":"remove"].apply(s.inner.classList,s.opt.animation.split(" ")),n?o.popups.push(s):0<=(t=o.popups.indexOf(s))&&o.popups.splice(t,1),s.opt.autoZ&&(n?s._r.style.zIndex=s.z=(s._zmgr||o._zmgr).add(s.opt.baseZ):((s._zmgr||o._zmgr).remove(s.z),delete s.z)),s.opt.transformFix&&!n&&s._r.classList.remove("shown"),setTimeout(function(){return s._r.classList.remove("running"),s.opt.transformFix&&n&&s._r.classList.add("shown"),!n&&s.opt.byDisplay&&(s._r.style.display="none"),n||!s._r.parentNode||s.resident||s._r.parentNode.removeChild(s._r),!n&&s.opt.autoZ&&(s._r.style.zIndex=""),s.fire("toggled."+(n?"on":"off"))},s.opt.delay),s.promises.length&&!n&&s.set(void 0,!1),s.fire("toggle."+(n?"on":"off")),e()},50))})},on:function(t,n){var r=this;return(Array.isArray(t)?t:[t]).map(function(t){var e;return((e=r.evtHandler)[t]||(e[t]=[])).push(n)})},fire:function(t){for(var e,n,r,i,s=[],o=[],l=1,c=arguments.length;l .base > .inner { 2 | transform: scale(0.8); 3 | opacity: 0; 4 | } 5 | .ldcv.ldcv-scale.active > .base > .inner { 6 | transform: scale(1); 7 | opacity: 1; 8 | } 9 | .ldcv.ldcv-zoom > .base > .inner { 10 | transform: scale(2); 11 | opacity: 0; 12 | } 13 | .ldcv.ldcv-zoom.active > .base > .inner { 14 | transform: scale(1); 15 | opacity: 1; 16 | } 17 | .ldcv.ldcv-vortex > .base > .inner { 18 | transform: scale(0) rotate(540deg); 19 | transition-duration: 0.6s; 20 | opacity: 0; 21 | } 22 | .ldcv.ldcv-vortex.active > .base > .inner { 23 | transform: scale(1) rotate(0); 24 | opacity: 1; 25 | } 26 | .ldcv.ldcv-slide-rtl > .base > .inner { 27 | transform: translate(10%, 0); 28 | opacity: 0; 29 | } 30 | .ldcv.ldcv-slide-rtl.active > .base > .inner { 31 | transform: translate(0, 0); 32 | opacity: 1; 33 | } 34 | .ldcv.ldcv-slide-ltr > .base > .inner { 35 | transform: translate(-10%, 0); 36 | opacity: 0; 37 | } 38 | .ldcv.ldcv-slide-ltr.active > .base > .inner { 39 | transform: translate(0, 0); 40 | opacity: 1; 41 | } 42 | .ldcv.ldcv-slide-ttb > .base > .inner { 43 | transform: translate(0, -10%); 44 | opacity: 0; 45 | } 46 | .ldcv.ldcv-slide-ttb.active > .base > .inner { 47 | transform: translate(0, 0); 48 | opacity: 1; 49 | } 50 | .ldcv.ldcv-slide-btt > .base > .inner { 51 | transform: translate(0, 10%); 52 | opacity: 0; 53 | } 54 | .ldcv.ldcv-slide-btt.active > .base > .inner { 55 | transform: translate(0, 0); 56 | opacity: 1; 57 | } 58 | .ldcv.ldcv-flip-h-left > .base > .inner { 59 | transform: rotateY(60deg); 60 | opacity: 0; 61 | } 62 | .ldcv.ldcv-flip-h-left.active > .base > .inner { 63 | transform: rotateY(0); 64 | opacity: 1; 65 | } 66 | .ldcv.ldcv-flip-h-right > .base > .inner { 67 | transform: rotateY(-60deg); 68 | opacity: 0; 69 | } 70 | .ldcv.ldcv-flip-h-right.active > .base > .inner { 71 | transform: rotateY(0); 72 | opacity: 1; 73 | } 74 | .ldcv.ldcv-flip-v-top > .base > .inner { 75 | transform: rotateX(60deg); 76 | opacity: 0; 77 | } 78 | .ldcv.ldcv-flip-v-top.active > .base > .inner { 79 | transform: rotateX(0); 80 | opacity: 1; 81 | } 82 | .ldcv.ldcv-flip-v-bottom > .base > .inner { 83 | transform: rotateX(-60deg); 84 | opacity: 0; 85 | } 86 | .ldcv.ldcv-flip-v-bottom.active > .base > .inner { 87 | transform: rotateX(0); 88 | opacity: 1; 89 | } 90 | .ldcv.ldcv-fade > .base > .inner { 91 | transform: translate(0, 0); 92 | opacity: 0; 93 | } 94 | .ldcv.ldcv-fade.active > .base > .inner { 95 | transform: translate(0, 0); 96 | opacity: 1; 97 | } 98 | -------------------------------------------------------------------------------- /dist/ldcv.effects.min.css: -------------------------------------------------------------------------------- 1 | .ldcv.ldcv-scale>.base>.inner{transform:scale(0.8);opacity:0}.ldcv.ldcv-scale.active>.base>.inner{transform:scale(1);opacity:1}.ldcv.ldcv-zoom>.base>.inner{transform:scale(2);opacity:0}.ldcv.ldcv-zoom.active>.base>.inner{transform:scale(1);opacity:1}.ldcv.ldcv-vortex>.base>.inner{transform:scale(0) rotate(540deg);transition-duration:.6s;opacity:0}.ldcv.ldcv-vortex.active>.base>.inner{transform:scale(1) rotate(0);opacity:1}.ldcv.ldcv-slide-rtl>.base>.inner{transform:translate(10%,0);opacity:0}.ldcv.ldcv-slide-rtl.active>.base>.inner{transform:translate(0,0);opacity:1}.ldcv.ldcv-slide-ltr>.base>.inner{transform:translate(-10%,0);opacity:0}.ldcv.ldcv-slide-ltr.active>.base>.inner{transform:translate(0,0);opacity:1}.ldcv.ldcv-slide-ttb>.base>.inner{transform:translate(0,-10%);opacity:0}.ldcv.ldcv-slide-ttb.active>.base>.inner{transform:translate(0,0);opacity:1}.ldcv.ldcv-slide-btt>.base>.inner{transform:translate(0,10%);opacity:0}.ldcv.ldcv-slide-btt.active>.base>.inner{transform:translate(0,0);opacity:1}.ldcv.ldcv-flip-h-left>.base>.inner{transform:rotateY(60deg);opacity:0}.ldcv.ldcv-flip-h-left.active>.base>.inner{transform:rotateY(0);opacity:1}.ldcv.ldcv-flip-h-right>.base>.inner{transform:rotateY(-60deg);opacity:0}.ldcv.ldcv-flip-h-right.active>.base>.inner{transform:rotateY(0);opacity:1}.ldcv.ldcv-flip-v-top>.base>.inner{transform:rotateX(60deg);opacity:0}.ldcv.ldcv-flip-v-top.active>.base>.inner{transform:rotateX(0);opacity:1}.ldcv.ldcv-flip-v-bottom>.base>.inner{transform:rotateX(-60deg);opacity:0}.ldcv.ldcv-flip-v-bottom.active>.base>.inner{transform:rotateX(0);opacity:1}.ldcv.ldcv-fade>.base>.inner{transform:translate(0,0);opacity:0}.ldcv.ldcv-fade.active>.base>.inner{transform:translate(0,0);opacity:1} 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "zbryikt", 3 | "name": "ldcover", 4 | "license": "MIT", 5 | "description": "tiny popup / dialog library", 6 | "version": "3.5.6", 7 | "style": "dist/index.min.css", 8 | "browser": "dist/index.min.js", 9 | "main": "dist/index.min.js", 10 | "files": [ 11 | "dist/**/*" 12 | ], 13 | "homepage": "https://loading.io/lib/modal/", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/loadingio/ldcover" 17 | }, 18 | "engines": { 19 | "node": ">=10.14.1", 20 | "npm": ">=6.4.1" 21 | }, 22 | "scripts": { 23 | "start": "npx server -r web -o true" 24 | }, 25 | "devDependencies": { 26 | "@loadingio/bootstrap.ext": "^0.0.12", 27 | "@loadingio/debounce.js": "1.0.1", 28 | "@loadingio/ldquery": "^3.0.6", 29 | "@zbryikt/template": "^2.4.1", 30 | "bootstrap": "^4.6.1", 31 | "fedep": "^1.3.0", 32 | "ldloader": "^3.0.3", 33 | "ldview": "^1.5.1", 34 | "livescript": "^1.6.0", 35 | "stylus": "^0.55.0", 36 | "uglify-js": "^3.13.1", 37 | "uglifycss": "^0.0.29", 38 | "zmgr": "^2.2.3" 39 | }, 40 | "frontendDependencies": { 41 | "root": "web/static/assets/lib", 42 | "modules": [ 43 | "bootstrap", 44 | "@loadingio/bootstrap.ext", 45 | "@loadingio/ldquery", 46 | "@loadingio/debounce.js", 47 | "ldloader", 48 | "zmgr", 49 | "ldview" 50 | ] 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/ldcv.effects.styl: -------------------------------------------------------------------------------- 1 | .ldcv.ldcv-scale > .base > .inner 2 | transform: scale(0.8) 3 | opacity: 0 4 | .ldcv.ldcv-scale.active > .base > .inner 5 | transform: scale(1) 6 | opacity: 1 7 | 8 | .ldcv.ldcv-zoom > .base > .inner 9 | transform: scale(2) 10 | opacity: 0 11 | .ldcv.ldcv-zoom.active > .base > .inner 12 | transform: scale(1) 13 | opacity: 1 14 | 15 | .ldcv.ldcv-vortex > .base > .inner 16 | transform: scale(0) rotate(540deg) 17 | transition-duration: 0.6s 18 | opacity: 0 19 | .ldcv.ldcv-vortex.active > .base > .inner 20 | transform: scale(1) rotate(0) 21 | opacity: 1 22 | 23 | .ldcv.ldcv-slide-rtl > .base > .inner 24 | transform: translate(10%,0) 25 | opacity: 0 26 | .ldcv.ldcv-slide-rtl.active > .base > .inner 27 | transform: translate(0,0) 28 | opacity: 1 29 | 30 | .ldcv.ldcv-slide-ltr > .base > .inner 31 | transform: translate(-10%,0) 32 | opacity: 0 33 | .ldcv.ldcv-slide-ltr.active > .base > .inner 34 | transform: translate(0,0) 35 | opacity: 1 36 | 37 | .ldcv.ldcv-slide-ttb > .base > .inner 38 | transform: translate(0,-10%) 39 | opacity: 0 40 | .ldcv.ldcv-slide-ttb.active > .base > .inner 41 | transform: translate(0,0) 42 | opacity: 1 43 | 44 | .ldcv.ldcv-slide-btt > .base > .inner 45 | transform: translate(0,10%) 46 | opacity: 0 47 | .ldcv.ldcv-slide-btt.active > .base > .inner 48 | transform: translate(0,0) 49 | opacity: 1 50 | 51 | .ldcv.ldcv-flip-h-left > .base > .inner 52 | transform: rotateY(60deg) 53 | opacity: 0 54 | .ldcv.ldcv-flip-h-left.active > .base > .inner 55 | transform: rotateY(0) 56 | opacity: 1 57 | 58 | .ldcv.ldcv-flip-h-right > .base > .inner 59 | transform: rotateY(-60deg) 60 | opacity: 0 61 | .ldcv.ldcv-flip-h-right.active > .base > .inner 62 | transform: rotateY(0) 63 | opacity: 1 64 | 65 | .ldcv.ldcv-flip-v-top > .base > .inner 66 | transform: rotateX(60deg) 67 | opacity: 0 68 | .ldcv.ldcv-flip-v-top.active > .base > .inner 69 | transform: rotateX(0) 70 | opacity: 1 71 | 72 | .ldcv.ldcv-flip-v-bottom > .base > .inner 73 | transform: rotateX(-60deg) 74 | opacity: 0 75 | .ldcv.ldcv-flip-v-bottom.active > .base > .inner 76 | transform: rotateX(0) 77 | opacity: 1 78 | 79 | .ldcv.ldcv-fade > .base > .inner 80 | transform: translate(0,0) 81 | opacity: 0 82 | .ldcv.ldcv-fade.active > .base > .inner 83 | transform: translate(0,0) 84 | opacity: 1 85 | 86 | 87 | -------------------------------------------------------------------------------- /src/ldcv.ls: -------------------------------------------------------------------------------- 1 | parent = (r, s, e = document) -> 2 | n = r; while n and n != e => n = n.parentNode # must under e 3 | if n != e => return null 4 | n = r; while n and n != e and n.matches and !n.matches(s) => n = n.parentNode # must match s selector 5 | if n == e and (!e.matches or !e.matches(s)) => return null 6 | return n 7 | 8 | ldcover = (opt={}) -> 9 | @evt-handler = {} 10 | @opt = {delay: 300, auto-z: true, base-z: 3000, escape: true, by-display: true} <<< opt 11 | if opt.zmgr => @zmgr opt.zmgr 12 | @promises = [] 13 | @_r = if !opt.root => 14 | ret = document.createElement("div") 15 | ret.innerHTML = """
""" 16 | ret 17 | else if typeof(opt.root) == \string => document.querySelector(opt.root) else opt.root 18 | @cls = if typeof(opt.type) == \string => opt.type.split ' ' else opt.type 19 | @resident = if opt.resident? => opt.resident else false 20 | @in-place = if opt.in-place? => opt.in-place else true 21 | @container = if typeof(opt.container) == \string => document.querySelector(opt.container) else opt.container 22 | # for template type root, lazy init. 23 | if !(@_r.content and @_r.content.nodeType == Element.DOCUMENT_FRAGMENT_NODE) => @init! 24 | @ 25 | 26 | ldcover.prototype = Object.create(Object.prototype) <<< do 27 | root: -> 28 | if !@inited => @init! 29 | @_r 30 | init: -> 31 | if @inited => return 32 | @inited = true 33 | if !@in-place => 34 | @_r.parentNode.removeChild @_r 35 | document.body.appendChild @_r 36 | if !@resident and @_r.parentNode => 37 | @_c = document.createComment " ldcover placeholder " 38 | @_r.parentNode.insertBefore @_c, @_r 39 | @_r.parentNode.removeChild @_r 40 | if @_r.content and @_r.content.nodeType == Element.DOCUMENT_FRAGMENT_NODE => 41 | @_r = @_r.content.cloneNode(true).childNodes.0 42 | @_r.parentNode.removeChild @_r 43 | 44 | if @_r.getAttribute(\data-lock) => if that == \true => @opt.lock = true 45 | @inner = @_r.querySelector '.inner' 46 | @base = @_r.querySelector '.base' 47 | @_r.classList.add.apply @_r.classList, <[ldcv]> ++ (@cls or []) 48 | if @opt.by-display => @_r.style.display = \none 49 | # keep mousedown element here to track if the following click is inside the black area. 50 | # some modal might contain widgets for user to drag. user might drag outside the modal. 51 | # if user drag and release in the black area, it might trigger a click event - 52 | # but we don't want this event to be treated as a close signal. 53 | # so, if clicksrc is not @_r, we just don't close modal directly but do following check then. 54 | clicksrc = null 55 | @_r.addEventListener \mousedown, @el_md = (e) ~> clicksrc := e.target 56 | @_r.addEventListener \click, @el_c = (e) ~> 57 | if clicksrc == @_r and !@opt.lock => 58 | e.stopPropagation! 59 | return @toggle false 60 | if parent(e.target, '*[data-ldcv-cancel]', @_r) => 61 | e.stopPropagation! 62 | return @cancel! 63 | tgt = parent(e.target, '*[data-ldcv-set]', @_r) 64 | if tgt and (action = tgt.getAttribute("data-ldcv-set"))? => 65 | if !parent(tgt, '.disabled', @_r) => 66 | e.stopPropagation! 67 | @set action 68 | 69 | zmgr: -> if it? => @_zmgr = it else @_zmgr 70 | # append element into ldcv. should be used for ldcv created without providing root. 71 | append: -> 72 | base = @_r.childNodes.0 73 | (if base and base.classList.contains('base') => base else @_r).appendChild it 74 | get: (p) -> new Promise (res, rej) ~> 75 | @promises.push {res, rej} 76 | @toggle true, p 77 | cancel: (err, hide = true) -> 78 | @promises.splice 0 .map (p) -> p.rej(err or (new Error! <<< {name: \lderror, id: 999})) 79 | if hide => @toggle false 80 | # clear promises list and call res for each item 81 | set: (v, hide = true) -> 82 | @promises.splice 0 .map (p) -> p.res v 83 | if hide => @toggle false 84 | is-on: -> return @_r.classList.contains(\active) 85 | lock: -> @opt.lock = true 86 | toggle: (v, p) -> new Promise (res, rej) ~> 87 | if !@inited => @init! 88 | # p is for passing additional parameter to ldcv host 89 | if v and p? => @fire \data, p 90 | if !(v?) and @_r.classList.contains \running => return res! 91 | if v? and @_r.classList.contains(\active) == !!v => return res! 92 | is-active = if v? => v else !@_r.classList.contains(\active) 93 | if is-active and !@_r.parentNode => 94 | # insert into original place if no container defined. default behavior ( `container` not provided ) 95 | if !(@container?) and @_c and @_c.parentNode => @_c.parentNode.insertBefore @_r, @_c 96 | # insert into container - if container is explicitly set as `null`, use document.body 97 | else (@container or document.body).appendChild @_r 98 | @_r.classList.add \running 99 | if @opt.by-display => @_r.style.display = \block 100 | 101 | # for inline cover, click outside trigger dismissing. 102 | if @_r.classList.contains \inline => 103 | if is-active => 104 | @el_h = (e) ~> if @_r.contains e.target => return else @toggle false 105 | window.addEventListener \click, @el_h 106 | else if @el_h => 107 | window.removeEventListener \click, @el_h 108 | @el_h = null 109 | 110 | if !is-active and @el_esc => 111 | document.removeEventListener \keyup, @el_esc 112 | @el_esc = null 113 | 114 | # why setTimeout? 115 | # It seems even if element is not visible ( opacity = 0, visibility = hidden ), mouse moving over them might 116 | # still makes animation slow down. 117 | # set z-index to -1 seems to work but if ldcv is in another div with greater z-index, it then won't work. 118 | # 119 | # To maximize performance, we set `display` style to `none` for nonactive ldcv element, and set it to 120 | # `block` when we need to activate it. 121 | # 122 | # But when ldcv is visible by setting `display` to `block` and adding 'active' at the same time, 123 | # all visual styles ( such as opacity, transform etc ) will be inited by active class instead of 124 | # the non-active value. This makes entering transition not work. 125 | # 126 | # Thus, we first set `block` here, give it a break by `setTimeout`, then set `active` class immediately 127 | # 128 | # if we want to remove thie setTimeout, either we have to use css animation to force animation, or we just 129 | # setTimeout for adding active class only. 130 | # 131 | # Additionally, we should check if quickly toggle on / off will cause problem due to setTimeout. 132 | <~ setTimeout _, 50 133 | @_r.classList.toggle \active, is-active 134 | if !@opt.lock and @opt.escape and is-active and !@el_esc => 135 | @el_esc = (e) ~> if e.keyCode == 27 => 136 | if ldcover.popups[* - 1] == @ => @toggle false 137 | document.addEventListener \keyup, @el_esc 138 | if @opt.animation and @inner => 139 | @inner.classList[if is-active => \add else \remove].apply @inner.classList, @opt.animation.split(' ') 140 | if is-active => ldcover.popups.push @ 141 | else 142 | idx = ldcover.popups.indexOf(@) 143 | if idx >= 0 => ldcover.popups.splice idx, 1 144 | if @opt.auto-z => 145 | if is-active => 146 | @_r.style.zIndex = @z = (@_zmgr or ldcover._zmgr).add @opt.base-z 147 | else 148 | (@_zmgr or ldcover._zmgr).remove @z 149 | delete @z # must delete z to prevent some modal being toggled off twice. 150 | if @opt.transform-fix and !is-active => @_r.classList.remove \shown 151 | setTimeout (~> 152 | @_r.classList.remove \running 153 | if @opt.transform-fix and is-active => @_r.classList.add \shown 154 | if !is-active and @opt.by-display => @_r.style.display = \none 155 | if !is-active and @_r.parentNode and !@resident => @_r.parentNode.removeChild @_r 156 | # clear z-index until hidden so we can fade away smoothly 157 | # otherwise if there are relative element with some z-index 158 | # we will fall immediately behind them. 159 | if !is-active and @opt.auto-z => @_r.style.zIndex = "" 160 | @fire "toggled.#{if is-active => \on else \off}" 161 | ), @opt.delay 162 | if @promises.length and !is-active => @set undefined, false 163 | @fire "toggle.#{if is-active => \on else \off}" 164 | return res! 165 | on: (n, cb) -> (if Array.isArray(n) => n else [n]).map (n) ~> @evt-handler.[][n].push cb 166 | fire: (n, ...v) -> for cb in (@evt-handler[n] or []) => cb.apply @, v 167 | destroy: (o={}) -> 168 | <~ @toggle false .then _ 169 | if @_c => 170 | if !o.remove-node => @_c.parentNode.insertBefore @_r, @_c 171 | @_c.parentNode.removeChild @_c 172 | @_r.removeEventListener \mousedown, @el_md 173 | @_r.removeEventListener \click, @el_c 174 | 175 | ldcover <<< do 176 | popups: [] 177 | _zmgr: do 178 | add: (v) -> @[]s.push(z = Math.max(v or 0, (@s[* - 1] or 0) + 1)); return z 179 | remove: (v) -> if (i = @[]s.indexOf(v)) < 0 => return else @s.splice(i,1) 180 | zmgr: -> if it? => @_zmgr = it else @_zmgr 181 | 182 | if module? => module.exports = ldcover 183 | else if window => window.ldcover = ldcover 184 | -------------------------------------------------------------------------------- /src/ldcv.pug: -------------------------------------------------------------------------------- 1 | mixin ldcover 2 | .ldcv: .base: .inner 3 | block 4 | -------------------------------------------------------------------------------- /src/ldcv.styl: -------------------------------------------------------------------------------- 1 | order = 0 1 2 ldcv ldcv-bg ldcv-base ldcv-inner 2 | .ldcv 3 | position: fixed 4 | top: 0 5 | left: 0 6 | //- Even with visibility: hidden, nodes under ldcv are still covered by ldcv and thus not clickable 7 | //- if there are content inside ldcv. so, we use z-index too to control it's z order. 8 | z-index: -1 9 | width: 100% 10 | height: 100% 11 | opacity: 0 12 | text-align: center 13 | perspective: 1024px 14 | visibility: hidden 15 | &:before 16 | content: " " 17 | display: block 18 | position: absolute 19 | top: 0 20 | left: 0 21 | width: 100% 22 | height: 100% 23 | background: rgba(0,0,0,.5) 24 | //- this is for vertical aligning .base 25 | &:after 26 | content: " " 27 | display: inline-block 28 | height: 100% 29 | width: 0px 30 | vertical-align: middle 31 | /* 32 | `margin-right` seems to lead to a small gap in the left of the cover, 33 | but we don't know why we added this. remove it but keep this comment here. 34 | expected to be removed in near future. 35 | */ 36 | //margin-right: -0.25em 37 | 38 | //- z-index will be update by script. we ensure it will be greater than 0 here. 39 | .ldcv.running, .ldcv.active 40 | z-index: 1 41 | transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out 42 | 43 | .ldcv.no-shadow:before, .ldcv.bare:before 44 | display: none 45 | 46 | .ldcv.active 47 | visibility: visible 48 | opacity: 1 49 | 50 | .ldcv > .base > .inner 51 | width: 100% 52 | height: 100% 53 | overflow: hidden 54 | border-radius: 5px 55 | box-shadow: 0 4px 8px rgba(0,0,0,.3) 56 | background: #fff 57 | padding: 0 58 | transform: translateZ(0) 59 | transform-origin: 50% 50% 60 | transition: all 0.2s ease-in-out 61 | & > .foot 62 | padding: 15px 63 | margin-top: 15px 64 | border-top: 1px solid #ddd 65 | 66 | // transform might lead to blurry content; 67 | // we can force remove it since when shown there should be no transform over .inner. 68 | // to enable, pass transform-fix: true in config 69 | // this might lead to glitch during transition in chrome. be careful. 70 | .ldcv.shown > .base > .inner 71 | transform: none!important 72 | 73 | .ldcv > .base 74 | text-align: left 75 | z-index: index(order, 'ldcv-base') 76 | max-width: 80% 77 | max-height: 90% 78 | display: inline-block 79 | vertical-align: middle 80 | 81 | .ldcv.default-size > .base 82 | width: 640px 83 | height: 600px 84 | 85 | .ldcv.margin-centered > .base 86 | position: absolute 87 | top: 0 88 | left: 0 89 | bottom: 0 90 | right: 0 91 | margin: auto 92 | transform: initial 93 | perspective: 300px 94 | 95 | .ldcv.transform-centered > .base 96 | left: 50% 97 | top: 50% 98 | transform: translate(-50%,-50%) 99 | 100 | .ldcv.bare 101 | position: absolute 102 | width: auto 103 | height: auto 104 | 105 | .ldcv.bare > .base 106 | width: auto 107 | height: auto 108 | max-width: initial 109 | max-height: initial 110 | transform: initial 111 | top: initial 112 | left: initial 113 | right: initial 114 | bottom: initial 115 | position: absolute 116 | 117 | .ldcv.bare > .base > .inner 118 | overflow: visible 119 | 120 | .ldcv.scroll 121 | background: rgba(0,0,0,.5) 122 | overflow-y: auto 123 | overflow-x: hidden 124 | /* padding top/bottom make it look better in desktop view, 125 | but leave a strange hole in mobile view especially with `autogap`. 126 | thus we will cancel these styles if `autogap` is set. */ 127 | padding-top: 50px 128 | padding-bottom: 50px 129 | &:before 130 | display: none 131 | & > .base 132 | max-height: initial 133 | 134 | /* if we want by default scrolling, we can add this class 135 | .ldcv.noscroll 136 | background: initial 137 | overflow: auto 138 | padding: auto 139 | &:before 140 | display: block 141 | & > .base 142 | max-height: 90% 143 | */ 144 | 145 | .ldcv.light:before 146 | background: rgba(255,255,255,.8) 147 | .ldcv.scroll.light 148 | background: rgba(255,255,255,.8) 149 | 150 | 151 | // animation types 152 | // default 153 | /* 154 | .ldcv > .base > .inner 155 | transform: scaleX(0.9) translateY(-40px) 156 | .ldcv.active > .base. > .inner 157 | transform: scaleX(1.0) translateY(0) 158 | */ 159 | 160 | // flip 161 | /* 162 | .ldcv > .base > .inner 163 | transform: scaleX(0.9) rotateX(15deg) 164 | transition: all 0.3s ease-in-out 165 | .ldcv.active > .base > .inner 166 | transform: scaleX(1.0) rotateX(0deg) 167 | */ 168 | 169 | .ldcv.lg > .base 170 | width: 960px 171 | height: 700px 172 | 173 | .ldcv.md > .base 174 | width: 720px 175 | height: 500px 176 | 177 | .ldcv.full > .base 178 | border: none 179 | border-radius: 0 180 | width: 100% 181 | height: 100% 182 | max-width: 100% 183 | max-height: 100% 184 | & > .inner 185 | border-radius: 0 186 | 187 | .ldcv.mini, .ldcv.inline 188 | width: auto 189 | height: auto 190 | left: auto 191 | top: auto 192 | right: auto 193 | bottom: auto 194 | &:before, &:after 195 | display: none 196 | & > .base 197 | max-width: initial 198 | max-height: initial 199 | & > .inner 200 | width: initial 201 | height: initial 202 | 203 | .ldcv.mini.left 204 | left: 1.25em 205 | .ldcv.mini.right 206 | right: 1.25em 207 | .ldcv.mini.top 208 | top: 1.25em 209 | .ldcv.mini.bottom 210 | bottom: 1.25em 211 | 212 | .ldcv.inline 213 | position: relative 214 | & > .base 215 | position: absolute 216 | top: 0 217 | left: 0 218 | 219 | .ldcv.autogap > .base > .inner 220 | padding: 2em 221 | .ldcv.nested-gap > .base > .inner > div 222 | padding: 1em 223 | .ldcv.nested-gap.autogap > .base > .inner 224 | padding: 0 225 | 226 | @media (max-width: 767px) { 227 | .ldcv.autogap > .base, .ldcv.outer-gap > .base { 228 | /* leave 2px gap in both side. see `padding-top` below */ 229 | max-width: calc(100% - 4px) 230 | width: 100% 231 | } 232 | .ldcv.autogap > .base > .inner { padding: 2em .75em } 233 | .ldcv.nested-gap.autogap > .base > .inner { padding: 0 } 234 | .ldcv.autogap.scroll, .ldcv.outer-gap.scroll { 235 | /* with `autogap` in mobile view, we want a panel close to fullscreen. 236 | thus we remove padding from `scroll` here. 237 | `2px` is to align the gap in width, see `max-width` above. */ 238 | padding-top: 2px 239 | padding-bottom: 2px 240 | } 241 | } 242 | 243 | @media (max-width: 959px) 244 | .ldcv.full-lg 245 | padding: 0!important 246 | & > .base 247 | min-width: 100% 248 | height: 100%!important 249 | & > .inner 250 | border-radius: 0 251 | .ldcv.full-lg.scroll 252 | & > .base 253 | overflow: scroll 254 | & > .inner 255 | height: auto 256 | 257 | @media (max-width: 575px) 258 | .ldcv.full-sm 259 | padding: 0!important 260 | & > .base 261 | min-width: 100% 262 | height: 100%!important 263 | & > .inner 264 | border-radius: 0 265 | .ldcv.full-sm.scroll 266 | & > .base 267 | overflow: scroll 268 | & > .inner 269 | height: auto 270 | 271 | @media (max-width: 767px) 272 | .ldcv.full-md 273 | padding: 0!important 274 | & > .base 275 | min-width: 100% 276 | height: 100%!important 277 | & > .inner 278 | border-radius: 0 279 | .ldcv.full-md.scroll 280 | & > .base 281 | overflow: scroll 282 | & > .inner 283 | height: auto 284 | -------------------------------------------------------------------------------- /web/src/ls/alert/icon.ls: -------------------------------------------------------------------------------- 1 | icon = do 2 | svg: '''''' 3 | success: '''''' 4 | warning: ''' 5 | ''' 6 | info: '''''' 7 | question: '''''' 8 | error: '''''' 9 | bounce: """""" 10 | 11 | -------------------------------------------------------------------------------- /web/src/ls/alert/index.ls: -------------------------------------------------------------------------------- 1 | (-> 2 | fire = (e,n) -> if e[n] => e[n]! 3 | ldcv = new ldCover root: '.ldcv' 4 | window.ldAlert = ldAlert = (...args) -> 5 | if typeof(args.0) == \object => opt = args.0 6 | else opt = { title: args.0, desc: args.1, type: args.2 } 7 | evt = opt.event 8 | /* we should prepare ldcv and its root here. */ 9 | root = ldcv.root 10 | if opt.clone => 11 | root = root.cloneNode true 12 | document.body.appendChild root 13 | 14 | if !ldAlert.dom => 15 | ldAlert.dom = dom = {} 16 | Array.from(ldcv.root.querySelectorAll('[data-name]')) 17 | .map (d) -> dom[d.getAttribute(\data-name)] = d 18 | dom.root = root 19 | else dom = ldAlert.dom 20 | 21 | <[title desc foot yes no cancel]>.map -> if opt[it] => dom[it].innerHTML = opt[it] 22 | if opt.type => 23 | c = "#{icon.svg}#{icon[opt.type]}#{icon.bounce}#{Math.random!}" 24 | dom.icon.setAttribute \src, "data:image/svg+xml,#{encodeURIComponent(c)}" 25 | if opt.foot => dom.footroot.classList.remove \d-none 26 | if opt.toggle => for k,v of opt.toggle => dom[k].style.display = if v => \inline-block else \none 27 | if opt.style => for k,v of opt.style => dom[k].style <<< v 28 | if opt.timer => setTimeout (-> ldcv.set!), opt.timer 29 | fire evt, \beforeOpen 30 | ldcv.get!finally -> 31 | if opt.clone => document.body.removeChild root 32 | fire evt, \afterClose 33 | 34 | #ldAlert \failed,'your last action is not successful.',\success 35 | window.fire = -> 36 | ldAlert { 37 | title: \Failed 38 | desc: 'Your last action is not successful. more about your last action in the following link.' 39 | type: \error 40 | foot: 'Why did this action fail?' 41 | yes: \hello 42 | toggle: 43 | cancel: true 44 | closebtn: true 45 | style: 46 | root: background: "linear-gradient(45deg,rgba(0,0,0,.5),rgba(255,255,255,.5))" 47 | event: 48 | beforeOpen: -> console.log \beforeOpen, it 49 | afterClose: -> console.log \afterClose, it 50 | #timer: 1000 51 | } 52 | .then -> console.log "got value: ", it 53 | )! 54 | -------------------------------------------------------------------------------- /web/src/ls/index.ls: -------------------------------------------------------------------------------- 1 | 2 | zmgr = new zmgr! 3 | zmgr-float = zmgr.scope 'float' 4 | zmgr-modal = zmgr.scope 'modal' 5 | zmgr-splash = zmgr.scope 'splash' 6 | 7 | #zmgr-lower = new zmgr init: 100 8 | #zmgr = new zmgr init: 1000 9 | ldcover.zmgr zmgr-modal 10 | ldloader.zmgr zmgr-splash 11 | ldld = new ldloader className: "full ldld", auto-z: true, zmgr: zmgr-splash 12 | 13 | view = new ldview do 14 | root: document.body 15 | action: click: 16 | "show-editbox": -> ldcv.editbox.toggle true 17 | "show-tos": -> ldcv.tos.toggle true 18 | "show-hint": -> ldcv.hint.toggle true 19 | "show-template": -> ldcv.template.toggle true 20 | "get-value": -> 21 | ldcv.get-value.get! 22 | .then -> console.log \ok 23 | .catch -> console.error "exception: ", it 24 | agree: -> 25 | ldld.on! 26 | debounce 1000 27 | .then -> ldld.off! 28 | .then -> ldcv.confirm.get! 29 | .then -> ldcv.tos.toggle false 30 | 31 | 32 | ldcv = {} 33 | ldcv.editbox = new ldcover root: view.get('ldcv-editbox'), zmgr: zmgr-float, resident: true 34 | ldcv.template = new ldcover root: view.get('ldcv-template'), zmgr: zmgr-float, in-place: false, lock: true 35 | ldcv.timeout = new ldcover root: view.get('ldcv-timeout'), zmgr: zmgr-float, in-place: false 36 | ldcv.hint = new ldcover root: view.get('ldcv-hint'), zmgr: zmgr-float, in-place: false 37 | ldcv.confirm = new ldcover root: view.get('ldcv-confirm'), zmgr: zmgr-modal, in-place: false 38 | ldcv.tos = new ldcover root: view.get('ldcv-tos'), zmgr: zmgr-modal, in-place: false 39 | ldcv.get-value = new ldcover root: view.get('ldcv-get-value'), zmgr: zmgr-modal 40 | ldcv.mini = new ldcover root: view.get('ldcv-mini'), zmgr: zmgr-modal, escape: false 41 | ldcv.mini.toggle true, zmgr: zmgr-modal 42 | 43 | ldcv.timeout.destroy! 44 | .then -> ldcv.editbox.destroy! 45 | .then -> 46 | ldcv.timeout = new ldcover root: view.get('ldcv-timeout'), zmgr: zmgr-float, in-place: false 47 | ldcv.editbox = new ldcover root: view.get('ldcv-editbox'), zmgr: zmgr-float, resident: true 48 | .then -> 49 | setTimeout (-> ldcv.timeout.toggle! ), 1000 50 | -------------------------------------------------------------------------------- /web/src/pug/alert/index.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | include /../../static/assets/lib/bootstrap.ldui/main/index.pug 3 | html 4 | head 5 | base(href="..") 6 | +css("assets/lib/bootstrap/main/css/bootstrap.min.css") 7 | +css("assets/lib/bootstrap.ldui/main/bootstrap.ldui.min.css") 8 | +css("assets/lib/ldcover/dev/ldcv.min.css") 9 | +css("css/alert/index.css") 10 | body 11 | .m-4: .btn.btn-outline-dark(onclick="fire()") Fire 12 | .ldcv(data-name="root"): .base: .inner.card 13 | .closebtn.lg(style="display:none",data-name="closebtn",data-ldcv-set="") 14 | .card-body: .vertical-center: .text-center.w-100 15 | img(data-name="icon",src="assets/img/s/error.svg") 16 | .py-2 17 | h2.text-capitalize(data-name="title") Good Job! 18 | p(data-name="desc") you clicked the button. 19 | .py-2 20 | .btn.btn-lg.btn-primary.flex-grow-1.mr-2(data-name="yes",data-ldcv-set="yes") Yes 21 | .btn.btn-lg.btn-outline-dark.flex-grow-1.mr-2(style="display:none",data-name="no",data-ldcv-set="no") No 22 | .btn.btn-lg.btn-outline-dark.flex-grow-1(style="display:none",data-name="cancel",data-ldcv-set="") Cancel 23 | .d-none(data-name="footroot") 24 | hr 25 | p.my-0(data-name="foot") 26 | +script("assets/lib/ldview/main/ldview.min.js") 27 | +script("assets/lib/@loadingio/ldquery/main/ldq.min.js") 28 | +script("assets/lib/ldcover/dev/ldcv.min.js") 29 | +script("js/alert/icon.js") 30 | +script("js/alert/index.js") 31 | -------------------------------------------------------------------------------- /web/src/pug/index.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | include @/@loadingio/bootstrap.ext/index.pug 5 | +css([ 6 | {name: "bootstrap", version: "main", path: "dist/css/bootstrap.min.css"}, 7 | {name: "@loadingio/bootstrap.ext"}, 8 | {name: "ldloader",version: "main"}, 9 | {name: "ldcover", version: "dev"}, 10 | {url: "css/index.css"} 11 | ]) 12 | body 13 | .ldcv.mini.left.bottom.right(ld="ldcv-mini"): .base: .inner.d-flex.px-3.py-2.align-items-center.bg-info.text-light 14 | .flex-grow-1.mr-2 By continuing to browse, you agree to our use of cookies. 15 | a.btn.btn-sm.btn-outline-light.mr-2(href="http://info.cern.ch") Not Agree 16 | .btn.btn-sm.btn-light(data-ldcv-set="") I agree 17 | 18 | .ldcv(ld="ldcv-timeout"): .base: .inner.p-4: .p-4 19 | h1 Timeout Popup 20 | p this is a popup that will be triggered after you open this website. 21 | 22 | .ldcv(ld="ldcv-hint"): .base: .inner.p-4: .p-4 23 | h1 Just a Hint 24 | p this is a hint with normal priority, which has the same priority with the timeout popup. 25 | 26 | template(ld="ldcv-template"): .ldcv: .base: .inner.p-4: .p-4 27 | h1 from template 28 | p This modal is created based on a template tag as root. Since browser only parses but not renders tags inside template, this can effectively reduce DOM element count, thus improve performance. 29 | br 30 | .btn.btn-primary.btn-lg(data-ldcv-set="") OK, Got it 31 | 32 | .ldcv(ld="ldcv-confirm"): .base.rwd: .inner.w-100.h-100.position-relative.p-4(style="padding-bottom:5em") 33 | .text-center: h1 Confirmed. 34 | br 35 | p We have saved your confirmation. You won't see this again until next time we update our terms and conditions. 36 | hr 37 | .btn.btn-lg.btn-primary(data-ldcv-set="") Dismiss 38 | 39 | .ldcv(ld="ldcv-get-value"): .base.w-640.rwd: .inner.w-100.h-100 40 | .d-flex.justify-content-around 41 | .p-4 42 | h2 resolve 43 | div: :md resolving `get` call by `data-ldcv-set` or `set` api call. 44 | .btn.btn-block.btn-lg.btn-outline-secondary(data-ldcv-set="ok") OK 45 | .p-4 46 | h2 reject 47 | div: :md rejecting `get` call by `data-ldcv-cancel` or `cancel` api call 48 | .btn.btn-block.btn-lg.btn-outline-secondary(data-ldcv-cancel) Cancel 49 | .pb-4.px-4.text-muted You can check developer console for actual output. 50 | 51 | .ldcv(ld="ldcv-tos"): .base.h-100.w-640.rwd: .inner.w-100.h-100.position-relative(style="padding-bottom:5em") 52 | .p-4.h-100(style="overflow:scroll") 53 | include tos.pug 54 | .position-absolute.w-100.p-4.bg-white.border-top(style="bottom:0;box-shadow:0 -3px 6px rgba(0,0,0,.1)") 55 | .d-flex 56 | a.btn.btn-outline-primary.mr-2.flex-grow-1(href="http://info.cern.ch") I don't agree 57 | .btn.btn-primary.ml-2.flex-grow-1(ld="agree") I agree 58 | 59 | .w-100.h-100.d-flex.align-items-center.justify-content-center.flex-column 60 | .m-4 61 | .btn.btn-lg.btn-primary(ld="show-editbox") Show Edit Box 62 | .ldcv.inline(ld="ldcv-editbox"): .base: .inner.p-2 63 | textarea.form-control.mb-2(rows="5") 64 | .btn.btn-primary(data-ldcv-set="") OK 65 | 66 | .btn.btn-lg.btn-primary.m-4(ld="show-tos") Show Term of Use 67 | .btn.btn-lg.btn-primary.m-4(ld="get-value") Get Value 68 | .btn.btn-lg.btn-primary.m-4(ld="show-hint") Show Hint 69 | .btn.btn-lg.btn-primary.m-4(ld="show-template") Show Template 70 | +script([ 71 | {name: "ldview"}, 72 | {name: "ldloader"}, 73 | {name: "@loadingio/ldquery"}, 74 | {name: "@loadingio/debounce.js"}, 75 | {name: "ldcover", version: "dev"}, 76 | {name: "zmgr"}, 77 | "js/index.js" 78 | ]) 79 | -------------------------------------------------------------------------------- /web/src/pug/tos.pug: -------------------------------------------------------------------------------- 1 | //- module 2 | .typeset 3 | style(type="text/css"): :stylus 4 | h1 { font-size: 1.8em } 5 | h2 { font-size: 1.5em } 6 | h3 { font-size: 1.2em } 7 | h4 { font-size: 1.1em } 8 | .en.section_container.active(section-language="en") 9 | #md_en.agreement_md(data-target="out_en") 10 | h1 Terms and Conditions 11 | p Last updated: December 21, 2020 12 | p Please read these terms and conditions carefully before using Our Service. 13 | h1 Interpretation and Definitions 14 | h2 Interpretation 15 | p 16 | | The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural. 17 | h2 Definitions 18 | p For the purposes of these Terms and Conditions: 19 | ul 20 | li 21 | p 22 | strong Affiliate 23 | | means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority. 24 | li 25 | p 26 | strong Country 27 | | refers to: Taiwan 28 | li 29 | p 30 | strong Company 31 | | (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to sample. 32 | li 33 | p 34 | strong Device 35 | | means any device that can access the Service such as a computer, a cellphone or a digital tablet. 36 | li 37 | p 38 | strong Service 39 | | refers to the Website. 40 | li 41 | p 42 | strong Terms and Conditions 43 | | (also referred as "Terms") mean these Terms and Conditions that form the entire agreement between You and the Company regarding the use of the Service. This Terms and Conditions agreement has been created with the help of the 44 | a(href="https://www.termsfeed.com/terms-conditions-generator/" target="_blank") Terms and Conditions Generator 45 | | . 46 | li 47 | p 48 | strong Third-party Social Media Service 49 | | means any services or content (including data, information, products or services) provided by a third-party that may be displayed, included or made available by the Service. 50 | li 51 | p 52 | strong Website 53 | | refers to sample, accessible from 54 | a(href="https://loading.io/lib/modal" rel="external nofollow noopener" target="_blank") https://loading.io/lib/modal 55 | li 56 | p 57 | strong You 58 | | means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable. 59 | h1 Acknowledgment 60 | p 61 | | These are the Terms and Conditions governing the use of this Service and the agreement that operates between You and the Company. These Terms and Conditions set out the rights and obligations of all users regarding the use of the Service. 62 | p 63 | | Your access to and use of the Service is conditioned on Your acceptance of and compliance with these Terms and Conditions. These Terms and Conditions apply to all visitors, users and others who access or use the Service. 64 | p 65 | | By accessing or using the Service You agree to be bound by these Terms and Conditions. If You disagree with any part of these Terms and Conditions then You may not access the Service. 66 | p 67 | | You represent that you are over the age of 18. The Company does not permit those under 18 to use the Service. 68 | p 69 | | Your access to and use of the Service is also conditioned on Your acceptance of and compliance with the Privacy Policy of the Company. Our Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your personal information when You use the Application or the Website and tells You about Your privacy rights and how the law protects You. Please read Our Privacy Policy carefully before using Our Service. 70 | h1 Links to Other Websites 71 | p 72 | | Our Service may contain links to third-party web sites or services that are not owned or controlled by the Company. 73 | p 74 | | The Company has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that the Company shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with the use of or reliance on any such content, goods or services available on or through any such web sites or services. 75 | p 76 | | We strongly advise You to read the terms and conditions and privacy policies of any third-party web sites or services that You visit. 77 | h1 Termination 78 | p 79 | | We may terminate or suspend Your access immediately, without prior notice or liability, for any reason whatsoever, including without limitation if You breach these Terms and Conditions. 80 | p Upon termination, Your right to use the Service will cease immediately. 81 | h1 Limitation of Liability 82 | p 83 | | Notwithstanding any damages that You might incur, the entire liability of the Company and any of its suppliers under any provision of this Terms and Your exclusive remedy for all of the foregoing shall be limited to the amount actually paid by You through the Service or 100 USD if You haven't purchased anything through the Service. 84 | p 85 | | To the maximum extent permitted by applicable law, in no event shall the Company or its suppliers be liable for any special, incidental, indirect, or consequential damages whatsoever (including, but not limited to, damages for loss of profits, loss of data or other information, for business interruption, for personal injury, loss of privacy arising out of or in any way related to the use of or inability to use the Service, third-party software and/or third-party hardware used with the Service, or otherwise in connection with any provision of this Terms), even if the Company or any supplier has been advised of the possibility of such damages and even if the remedy fails of its essential purpose. 86 | p 87 | | Some states do not allow the exclusion of implied warranties or limitation of liability for incidental or consequential damages, which means that some of the above limitations may not apply. In these states, each party's liability will be limited to the greatest extent permitted by law. 88 | h1 "AS IS" and "AS AVAILABLE" Disclaimer 89 | p 90 | | The Service is provided to You "AS IS" and "AS AVAILABLE" and with all faults and defects without warranty of any kind. To the maximum extent permitted under applicable law, the Company, on its own behalf and on behalf of its Affiliates and its and their respective licensors and service providers, expressly disclaims all warranties, whether express, implied, statutory or otherwise, with respect to the Service, including all implied warranties of merchantability, fitness for a particular purpose, title and non-infringement, and warranties that may arise out of course of dealing, course of performance, usage or trade practice. Without limitation to the foregoing, the Company provides no warranty or undertaking, and makes no representation of any kind that the Service will meet Your requirements, achieve any intended results, be compatible or work with any other software, applications, systems or services, operate without interruption, meet any performance or reliability standards or be error free or that any errors or defects can or will be corrected. 91 | p 92 | | Without limiting the foregoing, neither the Company nor any of the company's provider makes any representation or warranty of any kind, express or implied: (i) as to the operation or availability of the Service, or the information, content, and materials or products included thereon; (ii) that the Service will be uninterrupted or error-free; (iii) as to the accuracy, reliability, or currency of any information or content provided through the Service; or (iv) that the Service, its servers, the content, or e-mails sent from or on behalf of the Company are free of viruses, scripts, trojan horses, worms, malware, timebombs or other harmful components. 93 | p 94 | | Some jurisdictions do not allow the exclusion of certain types of warranties or limitations on applicable statutory rights of a consumer, so some or all of the above exclusions and limitations may not apply to You. But in such a case the exclusions and limitations set forth in this section shall be applied to the greatest extent enforceable under applicable law. 95 | h1 Governing Law 96 | p 97 | | The laws of the Country, excluding its conflicts of law rules, shall govern this Terms and Your use of the Service. Your use of the Application may also be subject to other local, state, national, or international laws. 98 | h1 Disputes Resolution 99 | p 100 | | If You have any concern or dispute about the Service, You agree to first try to resolve the dispute informally by contacting the Company. 101 | h1 For European Union (EU) Users 102 | p 103 | | If You are a European Union consumer, you will benefit from any mandatory provisions of the law of the country in which you are resident in. 104 | h1 United States Legal Compliance 105 | p 106 | | You represent and warrant that (i) You are not located in a country that is subject to the United States government embargo, or that has been designated by the United States government as a "terrorist supporting" country, and (ii) You are not listed on any United States government list of prohibited or restricted parties. 107 | h1 Severability and Waiver 108 | h2 Severability 109 | p 110 | | If any provision of these Terms is held to be unenforceable or invalid, such provision will be changed and interpreted to accomplish the objectives of such provision to the greatest extent possible under applicable law and the remaining provisions will continue in full force and effect. 111 | h2 Waiver 112 | p 113 | | Except as provided herein, the failure to exercise a right or to require performance of an obligation under this Terms shall not effect a party's ability to exercise such right or require such performance at any time thereafter nor shall be the waiver of a breach constitute a waiver of any subsequent breach. 114 | h1 Translation Interpretation 115 | p 116 | | These Terms and Conditions may have been translated if We have made them available to You on our Service. 117 | | You agree that the original English text shall prevail in the case of a dispute. 118 | h1 Changes to These Terms and Conditions 119 | p 120 | | We reserve the right, at Our sole discretion, to modify or replace these Terms at any time. If a revision is material We will make reasonable efforts to provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change will be determined at Our sole discretion. 121 | p 122 | | By continuing to access or use Our Service after those revisions become effective, You agree to be bound by the revised terms. If You do not agree to the new terms, in whole or in part, please stop using the website and the Service. 123 | h1 Contact Us 124 | p If you have any questions about these Terms and Conditions, You can contact us: 125 | ul 126 | li 127 | | By visiting this page on our website: 128 | a(href="https://loading.io/lib/modal" rel="external nofollow noopener" target="_blank") https://loading.io/lib/modal 129 | #out_en.agreement_output 130 | -------------------------------------------------------------------------------- /web/src/styl/alert/index.styl: -------------------------------------------------------------------------------- 1 | .ldcv .base 2 | width: 400px 3 | .btn { min-width: 100px } 4 | img { width: 96px } 5 | -------------------------------------------------------------------------------- /web/src/styl/index.styl: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap'); 2 | 3 | html,body 4 | width: 100% 5 | height: 100% 6 | font-family: 'Rubik', sans-serif; 7 | 8 | -------------------------------------------------------------------------------- /web/static/alert/index.html: -------------------------------------------------------------------------------- 1 |
Fire

Good Job!

you clicked the button.

Yes

-------------------------------------------------------------------------------- /web/static/assets/img/a/error.svg: -------------------------------------------------------------------------------- 1 | 2 | 60 | -------------------------------------------------------------------------------- /web/static/assets/img/a/info.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /web/static/assets/img/a/question.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /web/static/assets/img/a/success.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /web/static/assets/img/a/warning.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /web/static/assets/img/a/x/error.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/static/assets/img/s/error.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/static/assets/img/s/info.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/static/assets/img/s/question.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/static/assets/img/s/success.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/static/assets/img/s/warning.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/static/css/alert/index.css: -------------------------------------------------------------------------------- 1 | .ldcv .base { 2 | width: 400px; 3 | } 4 | .ldcv .base .btn { 5 | min-width: 100px; 6 | } 7 | .ldcv .base img { 8 | width: 96px; 9 | } 10 | -------------------------------------------------------------------------------- /web/static/css/alert/index.min.css: -------------------------------------------------------------------------------- 1 | .ldcv .base{width:400px}.ldcv .base .btn{min-width:100px}.ldcv .base img{width:96px} -------------------------------------------------------------------------------- /web/static/css/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap"); 2 | html, 3 | body { 4 | width: 100%; 5 | height: 100%; 6 | font-family: 'Rubik', sans-serif; 7 | } 8 | -------------------------------------------------------------------------------- /web/static/css/index.min.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap");html,body{width:100%;height:100%;font-family:'Rubik',sans-serif} -------------------------------------------------------------------------------- /web/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loadingio/ldcover/bf6e699b21982939ea4cc9103ec62da24f361feb/web/static/favicon.ico -------------------------------------------------------------------------------- /web/static/index.html: -------------------------------------------------------------------------------- 1 |
By continuing to browse, you agree to our use of cookies.
Not Agree
I agree

Timeout Popup

this is a popup that will be triggered after you open this website.

Just a Hint

this is a hint with normal priority, which has the same priority with the timeout popup.

Confirmed.


We have saved your confirmation. You won't see this again until next time we update our terms and conditions.

Dismiss

resolve

resolving get call by data-ldcv-set or set api call.

2 |
OK

reject

rejecting get call by data-ldcv-cancel or cancel api call

3 |
Cancel
You can check developer console for actual output.

Terms and Conditions

Last updated: December 21, 2020

Please read these terms and conditions carefully before using Our Service.

Interpretation and Definitions

Interpretation

The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.

Definitions

For the purposes of these Terms and Conditions:

  • Affiliate means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.

  • Country refers to: Taiwan

  • Company (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to sample.

  • Device means any device that can access the Service such as a computer, a cellphone or a digital tablet.

  • Service refers to the Website.

  • Terms and Conditions (also referred as "Terms") mean these Terms and Conditions that form the entire agreement between You and the Company regarding the use of the Service. This Terms and Conditions agreement has been created with the help of the Terms and Conditions Generator.

  • Third-party Social Media Service means any services or content (including data, information, products or services) provided by a third-party that may be displayed, included or made available by the Service.

  • Website refers to sample, accessible from https://loading.io/lib/modal

  • You means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.

Acknowledgment

These are the Terms and Conditions governing the use of this Service and the agreement that operates between You and the Company. These Terms and Conditions set out the rights and obligations of all users regarding the use of the Service.

Your access to and use of the Service is conditioned on Your acceptance of and compliance with these Terms and Conditions. These Terms and Conditions apply to all visitors, users and others who access or use the Service.

By accessing or using the Service You agree to be bound by these Terms and Conditions. If You disagree with any part of these Terms and Conditions then You may not access the Service.

You represent that you are over the age of 18. The Company does not permit those under 18 to use the Service.

Your access to and use of the Service is also conditioned on Your acceptance of and compliance with the Privacy Policy of the Company. Our Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your personal information when You use the Application or the Website and tells You about Your privacy rights and how the law protects You. Please read Our Privacy Policy carefully before using Our Service.

Links to Other Websites

Our Service may contain links to third-party web sites or services that are not owned or controlled by the Company.

The Company has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that the Company shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with the use of or reliance on any such content, goods or services available on or through any such web sites or services.

We strongly advise You to read the terms and conditions and privacy policies of any third-party web sites or services that You visit.

Termination

We may terminate or suspend Your access immediately, without prior notice or liability, for any reason whatsoever, including without limitation if You breach these Terms and Conditions.

Upon termination, Your right to use the Service will cease immediately.

Limitation of Liability

Notwithstanding any damages that You might incur, the entire liability of the Company and any of its suppliers under any provision of this Terms and Your exclusive remedy for all of the foregoing shall be limited to the amount actually paid by You through the Service or 100 USD if You haven't purchased anything through the Service.

To the maximum extent permitted by applicable law, in no event shall the Company or its suppliers be liable for any special, incidental, indirect, or consequential damages whatsoever (including, but not limited to, damages for loss of profits, loss of data or other information, for business interruption, for personal injury, loss of privacy arising out of or in any way related to the use of or inability to use the Service, third-party software and/or third-party hardware used with the Service, or otherwise in connection with any provision of this Terms), even if the Company or any supplier has been advised of the possibility of such damages and even if the remedy fails of its essential purpose.

Some states do not allow the exclusion of implied warranties or limitation of liability for incidental or consequential damages, which means that some of the above limitations may not apply. In these states, each party's liability will be limited to the greatest extent permitted by law.

"AS IS" and "AS AVAILABLE" Disclaimer

The Service is provided to You "AS IS" and "AS AVAILABLE" and with all faults and defects without warranty of any kind. To the maximum extent permitted under applicable law, the Company, on its own behalf and on behalf of its Affiliates and its and their respective licensors and service providers, expressly disclaims all warranties, whether express, implied, statutory or otherwise, with respect to the Service, including all implied warranties of merchantability, fitness for a particular purpose, title and non-infringement, and warranties that may arise out of course of dealing, course of performance, usage or trade practice. Without limitation to the foregoing, the Company provides no warranty or undertaking, and makes no representation of any kind that the Service will meet Your requirements, achieve any intended results, be compatible or work with any other software, applications, systems or services, operate without interruption, meet any performance or reliability standards or be error free or that any errors or defects can or will be corrected.

Without limiting the foregoing, neither the Company nor any of the company's provider makes any representation or warranty of any kind, express or implied: (i) as to the operation or availability of the Service, or the information, content, and materials or products included thereon; (ii) that the Service will be uninterrupted or error-free; (iii) as to the accuracy, reliability, or currency of any information or content provided through the Service; or (iv) that the Service, its servers, the content, or e-mails sent from or on behalf of the Company are free of viruses, scripts, trojan horses, worms, malware, timebombs or other harmful components.

Some jurisdictions do not allow the exclusion of certain types of warranties or limitations on applicable statutory rights of a consumer, so some or all of the above exclusions and limitations may not apply to You. But in such a case the exclusions and limitations set forth in this section shall be applied to the greatest extent enforceable under applicable law.

Governing Law

The laws of the Country, excluding its conflicts of law rules, shall govern this Terms and Your use of the Service. Your use of the Application may also be subject to other local, state, national, or international laws.

Disputes Resolution

If You have any concern or dispute about the Service, You agree to first try to resolve the dispute informally by contacting the Company.

For European Union (EU) Users

If You are a European Union consumer, you will benefit from any mandatory provisions of the law of the country in which you are resident in.

United States Legal Compliance

You represent and warrant that (i) You are not located in a country that is subject to the United States government embargo, or that has been designated by the United States government as a "terrorist supporting" country, and (ii) You are not listed on any United States government list of prohibited or restricted parties.

Severability and Waiver

Severability

If any provision of these Terms is held to be unenforceable or invalid, such provision will be changed and interpreted to accomplish the objectives of such provision to the greatest extent possible under applicable law and the remaining provisions will continue in full force and effect.

Waiver

Except as provided herein, the failure to exercise a right or to require performance of an obligation under this Terms shall not effect a party's ability to exercise such right or require such performance at any time thereafter nor shall be the waiver of a breach constitute a waiver of any subsequent breach.

Translation Interpretation

These Terms and Conditions may have been translated if We have made them available to You on our Service. 4 | You agree that the original English text shall prevail in the case of a dispute.

Changes to These Terms and Conditions

We reserve the right, at Our sole discretion, to modify or replace these Terms at any time. If a revision is material We will make reasonable efforts to provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change will be determined at Our sole discretion.

By continuing to access or use Our Service after those revisions become effective, You agree to be bound by the revised terms. If You do not agree to the new terms, in whole or in part, please stop using the website and the Service.

Contact Us

If you have any questions about these Terms and Conditions, You can contact us:

I don't agree
I agree
Show Edit Box
OK
Show Term of Use
Get Value
Show Hint
Show Template
-------------------------------------------------------------------------------- /web/static/js/alert/icon.js: -------------------------------------------------------------------------------- 1 | // Generated by LiveScript 1.6.0 2 | var icon; 3 | icon = { 4 | svg: '', 5 | success: '', 6 | warning: '', 7 | info: '', 8 | question: '', 9 | error: '', 10 | bounce: "" 11 | }; -------------------------------------------------------------------------------- /web/static/js/alert/icon.min.js: -------------------------------------------------------------------------------- 1 | var icon;icon={svg:'',success:'',warning:'',info:'',question:'',error:'',bounce:""}; -------------------------------------------------------------------------------- /web/static/js/alert/index.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | var fire, ldcv, ldAlert; 3 | fire = function(e, n){ 4 | if (e[n]) { 5 | return e[n](); 6 | } 7 | }; 8 | ldcv = new ldCover({ 9 | root: '.ldcv' 10 | }); 11 | window.ldAlert = ldAlert = function(){ 12 | var args, res$, i$, to$, opt, evt, root, dom, c, k, ref$, v; 13 | res$ = []; 14 | for (i$ = 0, to$ = arguments.length; i$ < to$; ++i$) { 15 | res$.push(arguments[i$]); 16 | } 17 | args = res$; 18 | if (typeof args[0] === 'object') { 19 | opt = args[0]; 20 | } else { 21 | opt = { 22 | title: args[0], 23 | desc: args[1], 24 | type: args[2] 25 | }; 26 | } 27 | evt = opt.event; 28 | /* we should prepare ldcv and its root here. */ 29 | root = ldcv.root; 30 | if (opt.clone) { 31 | root = root.cloneNode(true); 32 | document.body.appendChild(root); 33 | } 34 | if (!ldAlert.dom) { 35 | ldAlert.dom = dom = {}; 36 | Array.from(ldcv.root.querySelectorAll('[data-name]')).map(function(d){ 37 | return dom[d.getAttribute('data-name')] = d; 38 | }); 39 | dom.root = root; 40 | } else { 41 | dom = ldAlert.dom; 42 | } 43 | ['title', 'desc', 'foot', 'yes', 'no', 'cancel'].map(function(it){ 44 | if (opt[it]) { 45 | return dom[it].innerHTML = opt[it]; 46 | } 47 | }); 48 | if (opt.type) { 49 | c = icon.svg + "" + icon[opt.type] + icon.bounce + "" + Math.random() + ""; 50 | dom.icon.setAttribute('src', "data:image/svg+xml," + encodeURIComponent(c)); 51 | } 52 | if (opt.foot) { 53 | dom.footroot.classList.remove('d-none'); 54 | } 55 | if (opt.toggle) { 56 | for (k in ref$ = opt.toggle) { 57 | v = ref$[k]; 58 | dom[k].style.display = v ? 'inline-block' : 'none'; 59 | } 60 | } 61 | if (opt.style) { 62 | for (k in ref$ = opt.style) { 63 | v = ref$[k]; 64 | import$(dom[k].style, v); 65 | } 66 | } 67 | if (opt.timer) { 68 | setTimeout(function(){ 69 | return ldcv.set(); 70 | }, opt.timer); 71 | } 72 | fire(evt, 'beforeOpen'); 73 | return ldcv.get()['finally'](function(){ 74 | if (opt.clone) { 75 | document.body.removeChild(root); 76 | } 77 | return fire(evt, 'afterClose'); 78 | }); 79 | }; 80 | return window.fire = function(){ 81 | return ldAlert({ 82 | title: 'Failed', 83 | desc: 'Your last action is not successful. more about your last action in the following link.', 84 | type: 'error', 85 | foot: 'Why did this action fail?', 86 | yes: 'hello', 87 | toggle: { 88 | cancel: true, 89 | closebtn: true 90 | }, 91 | style: { 92 | root: { 93 | background: "linear-gradient(45deg,rgba(0,0,0,.5),rgba(255,255,255,.5))" 94 | } 95 | }, 96 | event: { 97 | beforeOpen: function(it){ 98 | return console.log('beforeOpen', it); 99 | }, 100 | afterClose: function(it){ 101 | return console.log('afterClose', it); 102 | } 103 | } 104 | }).then(function(it){ 105 | return console.log("got value: ", it); 106 | }); 107 | }; 108 | })(); 109 | function import$(obj, src){ 110 | var own = {}.hasOwnProperty; 111 | for (var key in src) if (own.call(src, key)) obj[key] = src[key]; 112 | return obj; 113 | } -------------------------------------------------------------------------------- /web/static/js/alert/index.min.js: -------------------------------------------------------------------------------- 1 | function import$(e,o){var t={}.hasOwnProperty;for(var n in o)t.call(o,n)&&(e[n]=o[n]);return e}!function(){var e,o,t;e=function(e,o){if(e[o])return e[o]()},o=new ldCover({root:".ldcv"}),window.ldAlert=t=function(){var n,r,i,l,c,a,s,f,u,d,g,m;for(r=[],i=0,l=arguments.length;i"+Math.random()+"",f.icon.setAttribute("src","data:image/svg+xml,"+encodeURIComponent(u))),c.foot&&f.footroot.classList.remove("d-none"),c.toggle)for(d in g=c.toggle)m=g[d],f[d].style.display=m?"inline-block":"none";if(c.style)for(d in g=c.style)m=g[d],import$(f[d].style,m);return c.timer&&setTimeout(function(){return o.set()},c.timer),e(a,"beforeOpen"),o.get().finally(function(){return c.clone&&document.body.removeChild(s),e(a,"afterClose")})},window.fire=function(){return t({title:"Failed",desc:"Your last action is not successful. more about your last action in the following link.",type:"error",foot:'Why did this action fail?',yes:"hello",toggle:{cancel:!0,closebtn:!0},style:{root:{background:"linear-gradient(45deg,rgba(0,0,0,.5),rgba(255,255,255,.5))"}},event:{beforeOpen:function(e){return console.log("beforeOpen",e)},afterClose:function(e){return console.log("afterClose",e)}}}).then(function(e){return console.log("got value: ",e)})}}(); -------------------------------------------------------------------------------- /web/static/js/index.js: -------------------------------------------------------------------------------- 1 | var zmgr, zmgrFloat, zmgrModal, zmgrSplash, ldld, view, ldcv; 2 | zmgr = new zmgr(); 3 | zmgrFloat = zmgr.scope('float'); 4 | zmgrModal = zmgr.scope('modal'); 5 | zmgrSplash = zmgr.scope('splash'); 6 | ldcover.zmgr(zmgrModal); 7 | ldloader.zmgr(zmgrSplash); 8 | ldld = new ldloader({ 9 | className: "full ldld", 10 | autoZ: true, 11 | zmgr: zmgrSplash 12 | }); 13 | view = new ldview({ 14 | root: document.body, 15 | action: { 16 | click: { 17 | "show-editbox": function(){ 18 | return ldcv.editbox.toggle(true); 19 | }, 20 | "show-tos": function(){ 21 | return ldcv.tos.toggle(true); 22 | }, 23 | "show-hint": function(){ 24 | return ldcv.hint.toggle(true); 25 | }, 26 | "show-template": function(){ 27 | return ldcv.template.toggle(true); 28 | }, 29 | "get-value": function(){ 30 | return ldcv.getValue.get().then(function(){ 31 | return console.log('ok'); 32 | })['catch'](function(it){ 33 | return console.error("exception: ", it); 34 | }); 35 | }, 36 | agree: function(){ 37 | ldld.on(); 38 | return debounce(1000).then(function(){ 39 | return ldld.off(); 40 | }).then(function(){ 41 | return ldcv.confirm.get(); 42 | }).then(function(){ 43 | return ldcv.tos.toggle(false); 44 | }); 45 | } 46 | } 47 | } 48 | }); 49 | ldcv = {}; 50 | ldcv.editbox = new ldcover({ 51 | root: view.get('ldcv-editbox'), 52 | zmgr: zmgrFloat, 53 | resident: true 54 | }); 55 | ldcv.template = new ldcover({ 56 | root: view.get('ldcv-template'), 57 | zmgr: zmgrFloat, 58 | inPlace: false, 59 | lock: true 60 | }); 61 | ldcv.timeout = new ldcover({ 62 | root: view.get('ldcv-timeout'), 63 | zmgr: zmgrFloat, 64 | inPlace: false 65 | }); 66 | ldcv.hint = new ldcover({ 67 | root: view.get('ldcv-hint'), 68 | zmgr: zmgrFloat, 69 | inPlace: false 70 | }); 71 | ldcv.confirm = new ldcover({ 72 | root: view.get('ldcv-confirm'), 73 | zmgr: zmgrModal, 74 | inPlace: false 75 | }); 76 | ldcv.tos = new ldcover({ 77 | root: view.get('ldcv-tos'), 78 | zmgr: zmgrModal, 79 | inPlace: false 80 | }); 81 | ldcv.getValue = new ldcover({ 82 | root: view.get('ldcv-get-value'), 83 | zmgr: zmgrModal 84 | }); 85 | ldcv.mini = new ldcover({ 86 | root: view.get('ldcv-mini'), 87 | zmgr: zmgrModal, 88 | escape: false 89 | }); 90 | ldcv.mini.toggle(true, { 91 | zmgr: zmgrModal 92 | }); 93 | ldcv.timeout.destroy().then(function(){ 94 | return ldcv.editbox.destroy(); 95 | }).then(function(){ 96 | ldcv.timeout = new ldcover({ 97 | root: view.get('ldcv-timeout'), 98 | zmgr: zmgrFloat, 99 | inPlace: false 100 | }); 101 | return ldcv.editbox = new ldcover({ 102 | root: view.get('ldcv-editbox'), 103 | zmgr: zmgrFloat, 104 | resident: true 105 | }); 106 | }).then(function(){ 107 | return setTimeout(function(){ 108 | return ldcv.timeout.toggle(); 109 | }, 1000); 110 | }); -------------------------------------------------------------------------------- /web/static/js/index.min.js: -------------------------------------------------------------------------------- 1 | var ldld,view,ldcv,zmgr=new zmgr,zmgrFloat=zmgr.scope("float"),zmgrModal=zmgr.scope("modal"),zmgrSplash=zmgr.scope("splash");ldcover.zmgr(zmgrModal),ldloader.zmgr(zmgrSplash),ldld=new ldloader({className:"full ldld",autoZ:!0,zmgr:zmgrSplash}),view=new ldview({root:document.body,action:{click:{"show-editbox":function(){return ldcv.editbox.toggle(!0)},"show-tos":function(){return ldcv.tos.toggle(!0)},"show-hint":function(){return ldcv.hint.toggle(!0)},"show-template":function(){return ldcv.template.toggle(!0)},"get-value":function(){return ldcv.getValue.get().then(function(){return console.log("ok")}).catch(function(e){return console.error("exception: ",e)})},agree:function(){return ldld.on(),debounce(1e3).then(function(){return ldld.off()}).then(function(){return ldcv.confirm.get()}).then(function(){return ldcv.tos.toggle(!1)})}}}}),(ldcv={}).editbox=new ldcover({root:view.get("ldcv-editbox"),zmgr:zmgrFloat,resident:!0}),ldcv.template=new ldcover({root:view.get("ldcv-template"),zmgr:zmgrFloat,inPlace:!1,lock:!0}),ldcv.timeout=new ldcover({root:view.get("ldcv-timeout"),zmgr:zmgrFloat,inPlace:!1}),ldcv.hint=new ldcover({root:view.get("ldcv-hint"),zmgr:zmgrFloat,inPlace:!1}),ldcv.confirm=new ldcover({root:view.get("ldcv-confirm"),zmgr:zmgrModal,inPlace:!1}),ldcv.tos=new ldcover({root:view.get("ldcv-tos"),zmgr:zmgrModal,inPlace:!1}),ldcv.getValue=new ldcover({root:view.get("ldcv-get-value"),zmgr:zmgrModal}),ldcv.mini=new ldcover({root:view.get("ldcv-mini"),zmgr:zmgrModal,escape:!1}),ldcv.mini.toggle(!0,{zmgr:zmgrModal}),ldcv.timeout.destroy().then(function(){return ldcv.editbox.destroy()}).then(function(){return ldcv.timeout=new ldcover({root:view.get("ldcv-timeout"),zmgr:zmgrFloat,inPlace:!1}),ldcv.editbox=new ldcover({root:view.get("ldcv-editbox"),zmgr:zmgrFloat,resident:!0})}).then(function(){return setTimeout(function(){return ldcv.timeout.toggle()},1e3)}); --------------------------------------------------------------------------------