├── .editorconfig ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── assets └── audio │ ├── LICENCE.txt │ ├── beep1.mp3 │ ├── beep1.ogg │ ├── beep2.mp3 │ ├── beep2.ogg │ ├── beep3.mp3 │ ├── beep3.ogg │ ├── bling1.mp3 │ ├── bling1.ogg │ ├── bling2.mp3 │ ├── bling2.ogg │ ├── bling3.mp3 │ ├── bling3.ogg │ ├── bling4.mp3 │ ├── bling4.ogg │ ├── bling5.mp3 │ ├── bling5.ogg │ ├── blop.mp3 │ ├── blop.ogg │ ├── boop1.mp3 │ ├── boop1.ogg │ ├── boop2.mp3 │ ├── boop2.ogg │ ├── boop3.mp3 │ └── boop3.ogg ├── demo ├── es6 │ ├── css │ │ ├── demo.css │ │ └── normalize.css │ ├── index.html │ ├── index.js │ ├── package-lock.json │ └── package.json └── html │ ├── css │ ├── demo.css │ ├── normalize.css │ ├── playground-avatars.css │ ├── playground-inception.css │ └── playground-login.css │ ├── index.html │ └── js │ ├── demo.js │ ├── playground-avatars.js │ ├── playground-inception.js │ └── playground-login.js ├── dist ├── jBox.all.css ├── jBox.all.js ├── jBox.all.min.css ├── jBox.all.min.js ├── jBox.css ├── jBox.js ├── jBox.min.css ├── jBox.min.js ├── plugins │ ├── jBox.Confirm.css │ ├── jBox.Confirm.js │ ├── jBox.Confirm.min.css │ ├── jBox.Confirm.min.js │ ├── jBox.Image.css │ ├── jBox.Image.js │ ├── jBox.Image.min.css │ ├── jBox.Image.min.js │ ├── jBox.Notice.css │ ├── jBox.Notice.js │ ├── jBox.Notice.min.css │ └── jBox.Notice.min.js └── themes │ ├── jBox.NoticeFancy.css │ ├── jBox.NoticeFancy.min.css │ ├── jBox.TooltipBorder.css │ ├── jBox.TooltipBorder.min.css │ ├── jBox.TooltipBorderThick.css │ ├── jBox.TooltipBorderThick.min.css │ ├── jBox.TooltipDark.css │ ├── jBox.TooltipDark.min.css │ ├── jBox.TooltipError.css │ ├── jBox.TooltipError.min.css │ ├── jBox.TooltipSmall.css │ ├── jBox.TooltipSmall.min.css │ ├── jBox.TooltipSmallGray.css │ └── jBox.TooltipSmallGray.min.css ├── documentation.html ├── gulpfile.js ├── package-lock.json ├── package.json ├── src ├── js │ ├── jBox.d.ts │ ├── jBox.js │ ├── plugins │ │ ├── jBox.Confirm.js │ │ ├── jBox.Image.js │ │ └── jBox.Notice.js │ └── umd.js └── scss │ ├── jBox.scss │ ├── plugins │ ├── jBox.Confirm.scss │ ├── jBox.Image.scss │ └── jBox.Notice.scss │ └── themes │ ├── jBox.NoticeFancy.scss │ ├── jBox.TooltipBorder.scss │ ├── jBox.TooltipBorderThick.scss │ ├── jBox.TooltipDark.scss │ ├── jBox.TooltipError.scss │ ├── jBox.TooltipSmall.scss │ └── jBox.TooltipSmallGray.scss └── test └── assets.test.js /.editorconfig: -------------------------------------------------------------------------------- 1 | ; This file is for unifying the coding style for different editors and IDEs. 2 | ; More information at http://editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # CSS and JS maps 2 | *.js.map 3 | *.css.map 4 | 5 | # npm 6 | node_modules 7 | 8 | # OS generated files 9 | .DS_Store 10 | .DS_Store? 11 | ._* 12 | .Spotlight-V100 13 | .Trashes 14 | ehthumbs.db 15 | Thumbs.db 16 | 17 | # Tool specific files 18 | # vim 19 | *~ 20 | *.swp 21 | *.swo 22 | # sublime text & textmate 23 | *.sublime-* 24 | *.stTheme.cache 25 | *.tmlanguage.cache 26 | *.tmPreferences.cache 27 | # Eclipse 28 | .settings/* 29 | # JetBrains, aka PHPStorm, IntelliJ IDEA 30 | .idea/* 31 | # NetBeans 32 | nbproject/* 33 | # Visual Studio Code 34 | .vscode 35 | # Sass preprocessor 36 | .sass-cache/ 37 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "jsxSingleQuote": true, 8 | "quoteProps": "consistent", 9 | "trailingComma": "none", 10 | "bracketSpacing": true, 11 | "jsxBracketSameLine": false, 12 | "arrowParens": "always" 13 | } 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Stephan Wagner 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 | # jBox 2 | 3 | jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. 4 | 5 | Demo: https://stephanwagner.me/jBox 6 | 7 | Docs: https://stephanwagner.me/jBox/documentation 8 | 9 | --- 10 | 11 | ## Install 12 | 13 | ### ES6 14 | 15 | ```bash 16 | npm install --save jbox 17 | ``` 18 | 19 | ```javascript 20 | import jBox from 'jbox'; 21 | import 'jbox/dist/jBox.all.css'; 22 | ``` 23 | 24 | ### CDN 25 | 26 | ```html 27 | 28 | 29 | 30 | ``` 31 | 32 | --- 33 | 34 | ## Tooltips 35 | 36 | Create a new instance of jBox Tooltip and attach it to elements: 37 | 38 | ```javascript 39 | new jBox('Tooltip', { 40 | attach: '.tooltip' 41 | }); 42 | ``` 43 | 44 | Now elements with `class="tooltip"` will open tooltips: 45 | 46 | ```html 47 | Hover me! 48 | Hover me! 49 | ``` 50 | 51 | --- 52 | 53 | ## Modal windows 54 | 55 | You can set up modal windows the same way as tooltips. 56 | But most of times you'd want more variety, like a title or HTML content: 57 | 58 | ```javascript 59 | new jBox('Modal', { 60 | width: 300, 61 | height: 200, 62 | attach: '#myModal', 63 | title: 'My Modal Window', 64 | content: 'Hello there!' 65 | }); 66 | ``` 67 | 68 | ```html 69 |
Click me to open a modal window!
70 | ``` 71 | 72 | --- 73 | 74 | ## Confirm windows 75 | 76 | Confirm windows are modal windows which requires the user to confirm a click action on an element. 77 | Give an element the attribute data-confirm to attach it: 78 | 79 | ```javascript 80 | new jBox('Confirm', { 81 | confirmButton: 'Do it!', 82 | cancelButton: 'Nope' 83 | }); 84 | ``` 85 | 86 | ```html 87 |
Click me!
88 | Click me! 89 | ``` 90 | 91 | --- 92 | 93 | ## Notices 94 | 95 | A notice will open automatically and destroy itself after some time: 96 | 97 | ```javascript 98 | new jBox('Notice', { 99 | content: 'Hurray! A notice!' 100 | }); 101 | ``` 102 | 103 | --- 104 | 105 | ## Images 106 | 107 | To create image windows you only need following few lines: 108 | 109 | ```javascript 110 | new jBox('Image'); 111 | ``` 112 | 113 | ```html 114 | 115 | 116 | 117 | ``` 118 | 119 | --- 120 | 121 | ## Learn more 122 | 123 | These few examples are very basic. 124 | The jBox library is quite powerful and offers a vast variety of options to customize appearance and behavior. 125 | Learn more in the documentation: https://stephanwagner.me/jBox/documentation 126 | -------------------------------------------------------------------------------- /assets/audio/LICENCE.txt: -------------------------------------------------------------------------------- 1 | blop.mp3 sound file recorded by Mark DiAngelo 2 | Downloaded from http://soundbible.com/2067-Blop.html 3 | 4 | All other files created by rjsken (http://www.fiverr.com/rjsken) 5 | All files are royalty free (http://en.wikipedia.org/wiki/Royalty-free) -------------------------------------------------------------------------------- /assets/audio/beep1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/beep1.mp3 -------------------------------------------------------------------------------- /assets/audio/beep1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/beep1.ogg -------------------------------------------------------------------------------- /assets/audio/beep2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/beep2.mp3 -------------------------------------------------------------------------------- /assets/audio/beep2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/beep2.ogg -------------------------------------------------------------------------------- /assets/audio/beep3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/beep3.mp3 -------------------------------------------------------------------------------- /assets/audio/beep3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/beep3.ogg -------------------------------------------------------------------------------- /assets/audio/bling1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/bling1.mp3 -------------------------------------------------------------------------------- /assets/audio/bling1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/bling1.ogg -------------------------------------------------------------------------------- /assets/audio/bling2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/bling2.mp3 -------------------------------------------------------------------------------- /assets/audio/bling2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/bling2.ogg -------------------------------------------------------------------------------- /assets/audio/bling3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/bling3.mp3 -------------------------------------------------------------------------------- /assets/audio/bling3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/bling3.ogg -------------------------------------------------------------------------------- /assets/audio/bling4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/bling4.mp3 -------------------------------------------------------------------------------- /assets/audio/bling4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/bling4.ogg -------------------------------------------------------------------------------- /assets/audio/bling5.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/bling5.mp3 -------------------------------------------------------------------------------- /assets/audio/bling5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/bling5.ogg -------------------------------------------------------------------------------- /assets/audio/blop.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/blop.mp3 -------------------------------------------------------------------------------- /assets/audio/blop.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/blop.ogg -------------------------------------------------------------------------------- /assets/audio/boop1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/boop1.mp3 -------------------------------------------------------------------------------- /assets/audio/boop1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/boop1.ogg -------------------------------------------------------------------------------- /assets/audio/boop2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/boop2.mp3 -------------------------------------------------------------------------------- /assets/audio/boop2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/boop2.ogg -------------------------------------------------------------------------------- /assets/audio/boop3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/boop3.mp3 -------------------------------------------------------------------------------- /assets/audio/boop3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StephanWagner/jBox/f64e462da0fd9551f4a45c707411293ca905a220/assets/audio/boop3.ogg -------------------------------------------------------------------------------- /demo/es6/css/demo.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | position: relative; 9 | font-family: Roboto, sans-serif; 10 | font-size: 17px; 11 | line-height: 1.4; 12 | color: #222; 13 | background: #fff; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | -webkit-text-size-adjust: none; 17 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 18 | } 19 | 20 | * { 21 | outline: none; 22 | box-sizing: border-box; 23 | } 24 | 25 | p { 26 | margin: 0 0 15px; 27 | } 28 | 29 | p:last-child { 30 | margin-bottom: 0; 31 | } 32 | 33 | h2 { 34 | margin: 0; 35 | font-size: 22px; 36 | font-weight: normal; 37 | } 38 | 39 | main { 40 | padding: 20px 0; 41 | } 42 | 43 | .container { 44 | position: relative; 45 | width: calc(100% - 60px); 46 | max-width: 1000px; 47 | margin: auto; 48 | } 49 | 50 | @media (max-width: 768px) { 51 | .container { 52 | width: calc(100% - 30px); 53 | } 54 | } 55 | 56 | /* Target elements */ 57 | 58 | .targets-wrapper { 59 | margin: 0 -5px; 60 | padding: 10px 0 20px; 61 | display: flex; 62 | flex-wrap: wrap; 63 | } 64 | 65 | .target, 66 | .target-click, 67 | .target-notice { 68 | cursor: default; 69 | font-size: 14px; 70 | line-height: 50px; 71 | height: 52px; 72 | border-radius: 4px; 73 | overflow: hidden; 74 | border: 2px solid #e2e2e2; 75 | background: #fafafa; 76 | text-align: center; 77 | font-weight: 500; 78 | position: relative; 79 | text-transform: uppercase; 80 | width: calc(25% - 10px); 81 | margin: 5px; 82 | transition: border-color .2s, background-color .2s; 83 | -webkit-user-select: none; 84 | -moz-user-select: none; 85 | -ms-user-select: none; 86 | user-select: none; 87 | } 88 | 89 | .target:hover, 90 | .target-click:hover, 91 | .target-notice:hover { 92 | border-color: #bbb; 93 | background-color: #eee; 94 | } 95 | 96 | .target-click, 97 | .target-notice { 98 | cursor: pointer; 99 | } 100 | 101 | .target.active, 102 | .target-click.active, 103 | .target-notice.active { 104 | color: #49d; 105 | } 106 | 107 | @media (max-width: 768px) { 108 | 109 | .target, 110 | .target-click, 111 | .target-notice { 112 | width: calc(50% - 10px); 113 | } 114 | } 115 | 116 | .demo-img { 117 | width: calc(25% - 10px); 118 | margin: 5px; 119 | } 120 | 121 | @media (max-width: 500px) { 122 | .demo-img { 123 | width: calc(50% - 10px); 124 | } 125 | } 126 | 127 | .demo-img>img { 128 | border: 4px solid #e2e2e2; 129 | border-radius: 4px; 130 | width: 100%; 131 | height: auto; 132 | filter: grayscale(100%); 133 | transition: filter .2s, border-color .2s; 134 | } 135 | 136 | .demo-img:hover>img { 137 | filter: none; 138 | border-color: #bbb; 139 | } 140 | 141 | @media (max-width: 768px) { 142 | .demo-img>img { 143 | border-width: 2px; 144 | } 145 | } 146 | 147 | /* Header */ 148 | 149 | header { 150 | height: 50px; 151 | line-height: 50px; 152 | font-size: 17px; 153 | background: #000; 154 | color: #aaa; 155 | box-shadow: 0 0 3px rgba(0, 0, 0, .6); 156 | } 157 | 158 | header a { 159 | margin-right: 20px; 160 | color: #aaa; 161 | text-decoration: none; 162 | transition: color .2s; 163 | } 164 | 165 | header a:last-child, 166 | header a:nth-child(2) { 167 | margin-right: 0; 168 | } 169 | 170 | header a.active, 171 | header a:hover { 172 | color: #fff; 173 | text-decoration: none; 174 | } 175 | 176 | #stephan { 177 | display: block; 178 | position: absolute; 179 | top: 50%; 180 | right: 0; 181 | width: 40px; 182 | height: 40px; 183 | transform: translateY(-50%); 184 | border-radius: 3px; 185 | background: no-repeat center center url(https://stephanwagner.me/img/stephan.jpg); 186 | background-size: 100%; 187 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); 188 | } 189 | 190 | #stephan>span { 191 | font-size: 0; 192 | line-height: 0; 193 | white-space: nowrap; 194 | position: absolute; 195 | top: 50%; 196 | right: 50%; 197 | pointer-events: none; 198 | transition: font-size .2s, margin .2s, opacity .2s, line-height .2s; 199 | opacity: 0; 200 | } 201 | 202 | #stephan:hover>span { 203 | opacity: 1; 204 | font-size: 17px; 205 | margin-right: 40px; 206 | } 207 | 208 | @media (max-width: 500px) { 209 | #stephan>span { 210 | display: none; 211 | } 212 | } 213 | 214 | /* jBox styles */ 215 | 216 | .ajax-sending { 217 | color: #49d; 218 | } 219 | 220 | .ajax-complete { 221 | color: #390; 222 | } 223 | 224 | .ajax-success tt { 225 | color: #666; 226 | display: block; 227 | padding-top: 10px; 228 | font-size: 14px; 229 | } 230 | 231 | .ajax-error { 232 | color: #d00; 233 | } 234 | -------------------------------------------------------------------------------- /demo/es6/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /demo/es6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jBox ES6 demos 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 23 |
24 | 25 |
26 | 27 |

Tooltip

28 | 29 |
30 |
Hover me
31 |
Hover me
32 |
Hover me
33 |
Hover me
34 |
Hover me
35 |
Hover me
36 |
Click me
37 |
Click me
38 |
39 | 40 |

Modal

41 | 42 |
43 | 44 | 45 | 46 |
Click me
47 |
48 | 49 |

Notice

50 | 51 |
52 |
Click me
53 |
Click me
54 |
Click me
55 |
Click me
56 |
57 | 58 |

Image

59 | 60 |
61 | 62 | 63 | 64 | 65 | 66 |
67 | 68 |
69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /demo/es6/index.js: -------------------------------------------------------------------------------- 1 | import jQuery from 'jquery'; 2 | import jBox from 'jbox'; 3 | import 'jbox/dist/jBox.all.css'; 4 | 5 | // Tooltip 6 | 7 | new jBox('Tooltip', { 8 | attach: '#Tooltip-1', 9 | content: 'This is a basic jBox tooltip' 10 | }); 11 | 12 | new jBox('Tooltip', { 13 | attach: '#Tooltip-2', 14 | theme: 'TooltipBorderThick', 15 | width: 200, 16 | position: { 17 | x: 'left', 18 | y: 'center' 19 | }, 20 | outside: 'x', 21 | pointer: 'top:15', 22 | content: 'You have many options to position and animate your jBoxes', 23 | animation: 'move' 24 | }); 25 | 26 | new jBox('Tooltip', { 27 | attach: '#Tooltip-3', 28 | theme: 'TooltipDark', 29 | animation: 'zoomOut', 30 | content: 'Use themes to change appearance' 31 | }); 32 | 33 | new jBox('Tooltip', { 34 | attach: '#Tooltip-4', 35 | width: 300, 36 | pointer: 'right:80', 37 | animation: 'move', 38 | delayOpen: 1000, 39 | delayClose: 2000, 40 | content: 'This tooltip waits 1 second to open and closes after 2 seconds', 41 | onOpen: function () { 42 | this.source.removeClass('active').html('Hover me'); 43 | }, 44 | onClose: function () { 45 | this.source.removeClass('active').html('Hover me'); 46 | } 47 | }); 48 | 49 | new jBox('Mouse', { 50 | attach: '#Tooltip-5', 51 | position: { 52 | x: 'right', 53 | y: 'bottom' 54 | }, 55 | content: 'I will follow you!' 56 | }); 57 | 58 | new jBox('Tooltip', { 59 | attach: '#Tooltip-6', 60 | width: 280, 61 | closeOnMouseleave: true, 62 | animation: 'zoomIn', 63 | content: "I won't close when you move your mouse over me" 64 | }); 65 | 66 | new jBox('Tooltip', { 67 | attach: '#Tooltip-7', 68 | target: '#Tooltip-1', 69 | theme: 'TooltipBorder', 70 | trigger: 'click', 71 | adjustTracker: true, 72 | closeOnClick: 'body', 73 | closeButton: 'box', 74 | animation: 'move', 75 | position: { 76 | x: 'left', 77 | y: 'top' 78 | }, 79 | outside: 'y', 80 | pointer: 'left:20', 81 | offset: { 82 | x: 25 83 | }, 84 | content: 85 | 'You can position your tooltips at any element.
Scroll up and down to see this tooltip flip position!', 86 | onOpen: function () { 87 | this.source.addClass('active').html('Now scroll'); 88 | }, 89 | onClose: function () { 90 | this.source.removeClass('active').html('Click me'); 91 | } 92 | }); 93 | 94 | new jBox('Tooltip', { 95 | attach: '#Tooltip-8', 96 | theme: 'TooltipBorder', 97 | trigger: 'click', 98 | width: 200, 99 | height: jQuery(window).height() - 160, 100 | adjustTracker: true, 101 | closeOnClick: 'body', 102 | closeOnEsc: true, 103 | animation: 'move', 104 | position: { 105 | x: 'right', 106 | y: 'center' 107 | }, 108 | outside: 'x', 109 | content: 110 | 'Scroll up and down or resize your browser, I will adjust my position!

Press [ESC] or click anywhere to close.', 111 | onOpen: function () { 112 | this.source.addClass('active').html('Now scroll'); 113 | }, 114 | onClose: function () { 115 | this.source.removeClass('active').html('Click me'); 116 | } 117 | }); 118 | 119 | // Modal 120 | 121 | new jBox('Modal', { 122 | attach: '#Modal-1', 123 | height: 200, 124 | title: "I'm a basic jBox modal window", 125 | content: 126 | '
Try to scroll ...it\'s blocked.
Press [ESC] or click anywhere to close.
' 127 | }); 128 | 129 | new jBox('Modal', { 130 | attach: '#Modal-2', 131 | width: 350, 132 | height: 200, 133 | blockScroll: false, 134 | animation: 'zoomIn', 135 | draggable: 'title', 136 | closeButton: true, 137 | content: 'You can move this modal window', 138 | title: 'Click here to drag me around', 139 | overlay: false, 140 | reposition: false, 141 | repositionOnOpen: false 142 | }); 143 | 144 | new jBox('Modal', { 145 | attach: '#Modal-3', 146 | width: 450, 147 | height: 250, 148 | closeButton: 'title', 149 | animation: false, 150 | title: 'AJAX request', 151 | ajax: { 152 | url: 'https://reqres.in/api/users?delay=2', 153 | data: { 154 | id: '1982', 155 | name: 'Stephan Wagner' 156 | }, 157 | method: 'post', 158 | reload: 'strict', 159 | setContent: false, 160 | beforeSend: function () { 161 | this.setContent(''); 162 | this.setTitle('
Sending AJAX request...
'); 163 | }, 164 | complete: function () { 165 | this.setTitle('
AJAX request complete
'); 166 | }, 167 | success: function (response) { 168 | this.setContent( 169 | '
Response:' + 170 | JSON.stringify(response) + 171 | '
' 172 | ); 173 | }, 174 | error: function () { 175 | this.setContent( 176 | '
Oops, something went wrong
' 177 | ); 178 | } 179 | } 180 | }); 181 | 182 | // Confirm 183 | 184 | new jBox('Confirm', { 185 | content: 'Do you really want to do this?', 186 | cancelButton: 'Nope', 187 | confirmButton: 'Sure do!' 188 | }); 189 | 190 | // Notice 191 | 192 | jQuery('#Notice-1').on('click', function () { 193 | new jBox('Notice', { 194 | content: "Hello, I'm a notice", 195 | color: 'black' 196 | }); 197 | }); 198 | 199 | jQuery('#Notice-2').on('click', function () { 200 | new jBox('Notice', { 201 | animation: 'flip', 202 | color: getColor(), 203 | content: 'Oooh! They also come in colors', 204 | delayOnHover: true, 205 | showCountdown: true 206 | }); 207 | }); 208 | 209 | jQuery('#Notice-3').on('click', function () { 210 | new jBox('Notice', { 211 | theme: 'NoticeFancy', 212 | attributes: { 213 | x: 'left', 214 | y: 'bottom' 215 | }, 216 | color: getColor(), 217 | content: "Hello, I'm down here", 218 | audio: 'https://cdn.jsdelivr.net/gh/StephanWagner/jBox@latest/assets/audio/bling2', 219 | volume: 80, 220 | animation: { 221 | open: 'slide:bottom', 222 | close: 'slide:left' 223 | } 224 | }); 225 | }); 226 | 227 | jQuery('#Notice-4').on('click', function () { 228 | new jBox('Notice', { 229 | attributes: { 230 | x: 'right', 231 | y: 'bottom' 232 | }, 233 | stack: false, 234 | animation: { 235 | open: 'tada', 236 | close: 'zoomIn' 237 | }, 238 | color: getColor(), 239 | title: "Tadaaa! I'm single", 240 | content: "Open another notice, I won't stack" 241 | }); 242 | }); 243 | 244 | // Image 245 | 246 | new jBox('Image', { 247 | imageCounter: true, 248 | imageCounterSeparator: ' of ' 249 | }); 250 | 251 | // Additional JS for demo purposes 252 | 253 | jQuery('#Tooltip-4').on('mouseenter mouseleave', function () { 254 | jQuery('#Tooltip-4').addClass('active').html('Wait...'); 255 | }); 256 | 257 | jQuery('.target-notice') 258 | .on('click', function () { 259 | jQuery(this).addClass('active').html('Click me again'); 260 | }) 261 | .on('mouseleave', function () { 262 | jQuery(this).removeClass('active').html('Click me'); 263 | }); 264 | 265 | var colors = ['red', 'green', 'blue', 'yellow']; 266 | var index = 0; 267 | var getColor = function () { 268 | if (index >= colors.length) { 269 | index = 0; 270 | } 271 | return colors[index++]; 272 | }; 273 | -------------------------------------------------------------------------------- /demo/es6/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jbox-es6-demo", 3 | "description": "", 4 | "version": "0.0.1", 5 | "author": "Stephan Wagner (https://stephanwagner.me)", 6 | "license": "ISC", 7 | "main": "index.js", 8 | "dependencies": { 9 | "jbox": "*" 10 | }, 11 | "devDependencies": { 12 | "snowpack": "^3.3.5" 13 | }, 14 | "scripts": { 15 | "start": "snowpack dev" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /demo/html/css/demo.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | position: relative; 9 | font-family: Roboto, sans-serif; 10 | font-size: 17px; 11 | line-height: 1.4; 12 | color: #222; 13 | background: #fff; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | -webkit-text-size-adjust: none; 17 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 18 | } 19 | 20 | * { 21 | outline: none; 22 | box-sizing: border-box; 23 | } 24 | 25 | p { 26 | margin: 0 0 15px; 27 | } 28 | 29 | p:last-child { 30 | margin-bottom: 0; 31 | } 32 | 33 | h2 { 34 | margin: 0; 35 | font-size: 22px; 36 | font-weight: normal; 37 | } 38 | 39 | main { 40 | padding: 20px 0; 41 | } 42 | 43 | .container { 44 | position: relative; 45 | width: calc(100% - 60px); 46 | max-width: 1000px; 47 | margin: auto; 48 | } 49 | 50 | @media (max-width: 768px) { 51 | .container { 52 | width: calc(100% - 30px); 53 | } 54 | } 55 | 56 | /* Target elements */ 57 | 58 | .targets-wrapper { 59 | margin: 0 -5px; 60 | padding: 10px 0 20px; 61 | display: flex; 62 | flex-wrap: wrap; 63 | } 64 | 65 | .target, 66 | .target-click, 67 | .target-notice { 68 | cursor: default; 69 | font-size: 14px; 70 | line-height: 50px; 71 | height: 52px; 72 | border-radius: 4px; 73 | overflow: hidden; 74 | border: 2px solid #e2e2e2; 75 | background: #fafafa; 76 | text-align: center; 77 | font-weight: 500; 78 | position: relative; 79 | text-transform: uppercase; 80 | width: calc(25% - 10px); 81 | margin: 5px; 82 | transition: border-color .2s, background-color .2s; 83 | -webkit-user-select: none; 84 | -moz-user-select: none; 85 | -ms-user-select: none; 86 | user-select: none; 87 | } 88 | 89 | .target:hover, 90 | .target-click:hover, 91 | .target-notice:hover { 92 | border-color: #bbb; 93 | background-color: #eee; 94 | } 95 | 96 | .target-click, 97 | .target-notice { 98 | cursor: pointer; 99 | } 100 | 101 | .target.active, 102 | .target-click.active, 103 | .target-notice.active { 104 | color: #49d; 105 | } 106 | 107 | @media (max-width: 768px) { 108 | 109 | .target, 110 | .target-click, 111 | .target-notice { 112 | width: calc(50% - 10px); 113 | } 114 | } 115 | 116 | .demo-img { 117 | width: calc(25% - 10px); 118 | margin: 5px; 119 | } 120 | 121 | @media (max-width: 500px) { 122 | .demo-img { 123 | width: calc(50% - 10px); 124 | } 125 | } 126 | 127 | .demo-img>img { 128 | border: 4px solid #e2e2e2; 129 | border-radius: 4px; 130 | width: 100%; 131 | height: auto; 132 | filter: grayscale(100%); 133 | transition: filter .2s, border-color .2s; 134 | } 135 | 136 | .demo-img:hover>img { 137 | filter: none; 138 | border-color: #bbb; 139 | } 140 | 141 | @media (max-width: 768px) { 142 | .demo-img>img { 143 | border-width: 2px; 144 | } 145 | } 146 | 147 | /* Header */ 148 | 149 | header { 150 | height: 50px; 151 | line-height: 50px; 152 | font-size: 17px; 153 | background: #000; 154 | color: #aaa; 155 | box-shadow: 0 0 3px rgba(0, 0, 0, .6); 156 | } 157 | 158 | header a { 159 | margin-right: 20px; 160 | color: #aaa; 161 | text-decoration: none; 162 | transition: color .2s; 163 | } 164 | 165 | header a:last-child, 166 | header a:nth-child(2) { 167 | margin-right: 0; 168 | } 169 | 170 | header a.active, 171 | header a:hover { 172 | color: #fff; 173 | text-decoration: none; 174 | } 175 | 176 | #stephan { 177 | display: block; 178 | position: absolute; 179 | top: 50%; 180 | right: 0; 181 | width: 40px; 182 | height: 40px; 183 | transform: translateY(-50%); 184 | border-radius: 3px; 185 | background: no-repeat center center url(https://stephanwagner.me/img/stephan.jpg); 186 | background-size: 100%; 187 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); 188 | } 189 | 190 | #stephan>span { 191 | font-size: 0; 192 | line-height: 0; 193 | white-space: nowrap; 194 | position: absolute; 195 | top: 50%; 196 | right: 50%; 197 | pointer-events: none; 198 | transition: font-size .2s, margin .2s, opacity .2s, line-height .2s; 199 | opacity: 0; 200 | } 201 | 202 | #stephan:hover>span { 203 | opacity: 1; 204 | font-size: 17px; 205 | margin-right: 40px; 206 | } 207 | 208 | @media (max-width: 500px) { 209 | #stephan>span { 210 | display: none; 211 | } 212 | } 213 | 214 | /* jBox styles */ 215 | 216 | .ajax-sending { 217 | color: #49d; 218 | } 219 | 220 | .ajax-complete { 221 | color: #390; 222 | } 223 | 224 | .ajax-success tt { 225 | color: #666; 226 | display: block; 227 | padding-top: 10px; 228 | font-size: 14px; 229 | } 230 | 231 | .ajax-error { 232 | color: #d00; 233 | } 234 | -------------------------------------------------------------------------------- /demo/html/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /demo/html/css/playground-avatars.css: -------------------------------------------------------------------------------- 1 | .AvatarsModal .jBox-footer { 2 | display: flex; 3 | } 4 | 5 | .AvatarsModal .jBox-footer button { 6 | width: 50%; 7 | flex-shrink: 0; 8 | height: 50px; 9 | border: 0; 10 | padding: 0; 11 | display: block; 12 | float: left; 13 | background: center center no-repeat; 14 | transition: background-color .2s; 15 | } 16 | 17 | .AvatarsModal .jBox-footer button:active { 18 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); 19 | } 20 | 21 | #AvatarsComplete.AvatarsModal .jBox-footer button { 22 | width: 100%; 23 | float: none; 24 | } 25 | 26 | .AvatarsModal .jBox-footer .button-cross { 27 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTUwNy4zLDQxMS4zQzUwNy4zLDQxMS4zLDUwNy4zLDQxMS4zLDUwNy4zLDQxMS4zTDM1MiwyNTZsMTU1LjMtMTU1LjNjMCwwLDAsMCwwLDBDNTA5LDk5LDUxMC4yLDk3LDUxMSw5NQpjMi4xLTUuNywwLjktMTIuMy0zLjctMTYuOUw0MzQsNC43QzQyOS40LDAuMSw0MjIuNy0xLjEsNDE3LDFjLTIuMSwwLjgtNCwyLTUuNywzLjdjMCwwLDAsMCwwLDBMMjU2LDE2MEwxMDAuNyw0LjdjMCwwLDAsMCwwLDAKQzk5LDMsOTcsMS44LDk1LDFjLTUuNy0yLjEtMTIuMy0wLjktMTYuOSwzLjdMNC43LDc4QzAuMSw4Mi42LTEuMSw4OS4zLDEsOTVjMC44LDIuMSwyLDQsMy43LDUuN2MwLDAsMCwwLDAsMEwxNjAsMjU2TDQuNyw0MTEuMwpjMCwwLDAsMCwwLDBDMyw0MTMsMS44LDQxNSwxLDQxN2MtMi4xLDUuNy0wLjksMTIuMywzLjcsMTYuOWw3My40LDczLjRjNC42LDQuNiwxMS4yLDUuOCwxNi45LDMuN2MyLjEtMC44LDQtMiw1LjctMy43YzAsMCwwLDAsMCwwCkwyNTYsMzUybDE1NS4zLDE1NS4zYzAsMCwwLDAsMCwwYzEuNywxLjcsMy42LDIuOSw1LjcsMy43YzUuNywyLjEsMTIuMywwLjksMTYuOS0zLjdsNzMuNC03My40YzQuNi00LjYsNS44LTExLjIsMy43LTE2LjkKQzUxMC4yLDQxNSw1MDksNDEzLDUwNy4zLDQxMS4zTDUwNy4zLDQxMS4zeiIvPgo8L3N2Zz4K); 28 | background-color: #e33; 29 | background-size: 24px auto; 30 | border-radius: 0 0 0 4px; 31 | } 32 | 33 | .AvatarsModal .jBox-footer .button-cross:hover { 34 | background-color: #f33; 35 | } 36 | 37 | .AvatarsModal .jBox-footer .button-cross:active { 38 | background-color: #e33; 39 | } 40 | 41 | .AvatarsModal .jBox-footer .button-heart { 42 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggMzg0Ij4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTIyNCwzODRjLTQsMC04LTEuNS0xMS00LjVMNTcsMjI5Yy0yLTEuOC01Ny01Mi01Ny0xMTJDMCw0My44LDQ0LjgsMCwxMTkuNSwwYzQzLjgsMCw4NC44LDM0LjUsMTA0LjUsNTQKYzE5LjgtMTkuNSw2MC44LTU0LDEwNC41LTU0QzQwMy4yLDAsNDQ4LDQzLjgsNDQ4LDExN2MwLDYwLTU1LDExMC4yLTU3LjIsMTEyLjVMMjM1LDM3OS41QzIzMiwzODIuNSwyMjgsMzg0LDIyNCwzODR6Ii8+Cjwvc3ZnPg==); 43 | background-color: #7d0; 44 | background-size: 30px auto; 45 | border-radius: 0 0 4px 0; 46 | } 47 | 48 | .AvatarsModal .jBox-footer .button-heart:hover { 49 | background-color: #8e0; 50 | } 51 | 52 | .AvatarsModal .jBox-footer .button-heart:active { 53 | background-color: #7d0; 54 | } 55 | 56 | .AvatarsModal .jBox-footer .button-close { 57 | background-color: #ddd; 58 | border-radius: 0 0 4px 4px; 59 | } 60 | 61 | .AvatarsModal .jBox-footer .button-close:hover { 62 | background-color: #eee; 63 | } 64 | 65 | .AvatarsModal .jBox-footer .button-close:active { 66 | background-color: #ddd; 67 | } 68 | 69 | .AvatarsModal .jBox-content { 70 | padding: 0; 71 | background: center -10px no-repeat; 72 | } 73 | 74 | #AvatarsComplete.AvatarsModal .jBox-content { 75 | font-style: italic; 76 | text-align: center; 77 | color: #999; 78 | } 79 | 80 | #AvatarsComplete.AvatarsModal .jBox-content>div { 81 | position: absolute; 82 | top: calc(50% - 23px); 83 | left: 25px; 84 | right: 25px; 85 | } 86 | 87 | .AvatarsModal .jBox-title { 88 | font-size: 26px; 89 | color: #000; 90 | font-weight: 300; 91 | text-align: center; 92 | padding: 0; 93 | line-height: 60px; 94 | } 95 | 96 | .AvatarsModal .jBox-footer { 97 | border-top: 0; 98 | background: none; 99 | padding: 0; 100 | } 101 | 102 | .AvatarsTooltip .jBox-content { 103 | color: #fff; 104 | text-align: center; 105 | } 106 | 107 | .AvatarsTooltip .jBox-container, 108 | .AvatarsTooltip .jBox-pointer:after { 109 | background: #000; 110 | box-shadow: none; 111 | } 112 | 113 | .AvatarsTooltipLike .jBox-container, 114 | .AvatarsTooltipLike .jBox-pointer:after { 115 | border-color: #7d0; 116 | } 117 | 118 | .AvatarsTooltipDislike .jBox-container, 119 | .AvatarsTooltipDislike .jBox-pointer:after { 120 | border-color: #e33; 121 | } 122 | 123 | .AvatarsCollection { 124 | width: 50%; 125 | position: fixed; 126 | bottom: 5px; 127 | z-index: 11000; 128 | } 129 | 130 | .AvatarsCollection#DislikedAvatars { 131 | left: 4px; 132 | } 133 | 134 | .AvatarsCollection#LikedAvatars { 135 | right: 4px; 136 | } 137 | 138 | .AvatarsCollection>div { 139 | width: 47px; 140 | height: 45px; 141 | padding: 0 1px; 142 | } 143 | 144 | .AvatarsCollection#DislikedAvatars>div { 145 | float: left; 146 | } 147 | 148 | .AvatarsCollection#LikedAvatars>div { 149 | float: right; 150 | } 151 | 152 | .AvatarsCollection>div>div { 153 | position: relative; 154 | overflow: hidden; 155 | width: 45px; 156 | height: 45px; 157 | border: 2px solid; 158 | border-radius: 50%; 159 | background: #000; 160 | } 161 | 162 | .AvatarsCollection#DislikedAvatars>div>div { 163 | border-color: #e33; 164 | } 165 | 166 | .AvatarsCollection#LikedAvatars>div>div { 167 | border-color: #7d0; 168 | } 169 | 170 | .AvatarsCollection>div>div>img { 171 | position: absolute; 172 | top: 50%; 173 | left: 50%; 174 | width: 60px; 175 | height: 60px; 176 | margin-top: -27px; 177 | margin-left: -30px; 178 | } 179 | -------------------------------------------------------------------------------- /demo/html/css/playground-inception.css: -------------------------------------------------------------------------------- 1 | .inception-overlay { 2 | background-color: rgba(0, 0, 0, .35); 3 | } 4 | 5 | .inception-modal button { 6 | cursor: pointer; 7 | border: 0; 8 | margin: 0; 9 | display: block; 10 | width: 100%; 11 | color: #fff; 12 | background: #000; 13 | height: 40px; 14 | text-align: center; 15 | border-radius: 4px; 16 | } 17 | -------------------------------------------------------------------------------- /demo/html/css/playground-login.css: -------------------------------------------------------------------------------- 1 | /* Restyle jBoxes */ 2 | 3 | #jBoxLogin .jBox-content { 4 | padding: 0; 5 | } 6 | 7 | #jBoxLogin .jBox-title { 8 | text-align: center; 9 | line-height: 1.6; 10 | padding: 15px 0; 11 | font-size: 20px; 12 | } 13 | 14 | .jBox-TooltipSmall.LoginTooltipSmall .jBox-content, 15 | .jBox-TooltipError.LoginTooltipError .jBox-content { 16 | font-size: 13px; 17 | padding: 5px 10px; 18 | line-height: 18px; 19 | } 20 | 21 | .jBox-TooltipSmall.LoginTooltipSmall .jBox-container, 22 | .jBox-TooltipError.LoginTooltipError .jBox-container { 23 | border-radius: 2px; 24 | font-weight: bold; 25 | color: #fff; 26 | } 27 | 28 | .jBox-TooltipSmall.LoginTooltipError .jBox-container { 29 | background: #d00; 30 | } 31 | 32 | .jBox-TooltipSmall.LoginTooltipSmall .jBox-container { 33 | background: #246bb3; 34 | } 35 | 36 | .jBox-TooltipSmall.LoginTooltipSmall .jBox-pointer:after { 37 | background: #246bb3; 38 | } 39 | 40 | /* Content */ 41 | 42 | .login-container { 43 | display: none; 44 | } 45 | 46 | .login-container.active { 47 | display: block; 48 | } 49 | 50 | .login-body { 51 | padding: 0 25px; 52 | } 53 | 54 | .login-container button { 55 | margin: 25px 0 0; 56 | } 57 | 58 | .login-textfield-wrapper { 59 | position: relative; 60 | } 61 | 62 | .login-remember { 63 | margin: 25px 0 0; 64 | height: 20px; 65 | } 66 | 67 | #LoginWrapper.request-running .login-footer a, 68 | #LoginWrapper.request-running .login-footer span { 69 | cursor: default !important; 70 | text-decoration: none !important; 71 | } 72 | 73 | /* Form elements */ 74 | 75 | .login-textfield { 76 | width: 100%; 77 | border: 0; 78 | border-bottom: 2px solid #ddd; 79 | padding: 6px 2px; 80 | font-size: 18px; 81 | margin-top: 25px; 82 | transition: border-color .2s; 83 | } 84 | 85 | .login-textfield:hover { 86 | border-bottom-color: #ccc; 87 | } 88 | 89 | .login-textfield:focus { 90 | border-bottom-color: #246bb3; 91 | } 92 | 93 | .login-textfield.textfield-error { 94 | border-bottom-color: #d00; 95 | } 96 | 97 | .login-checkbox { 98 | float: left; 99 | position: relative; 100 | cursor: pointer; 101 | width: 20px; 102 | height: 20px; 103 | border-radius: 3px; 104 | background: #eee; 105 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); 106 | transition: background-color .2s; 107 | } 108 | 109 | .login-checkbox.login-checkbox-active { 110 | box-shadow: none; 111 | background: #7d0; 112 | } 113 | 114 | .login-checkbox-check { 115 | opacity: 0; 116 | background: no-repeat center center; 117 | background-size: 14px; 118 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MjQuNTMgMzE1LjczIj4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQ2NS4wNywxNTMuNmExMC4zMSwxMC4zMSwwLDAsMCwwLTE0LjkzTDQyOC44LDEwMi40YTEwLjMxLDEwLjMxLDAsMCwwLTE0LjkzLDBMMjAwLjUzLDMxNS43Myw5OC4xMywyMTMuMzNhMTAuMzEsMTAuMzEsMCwwLDAtMTQuOTMsMEw0Ni45MywyNDkuNmExMC4zMSwxMC4zMSwwLDAsMCwwLDE0LjkzbDE0Ny4yLDE0Ny4yYTEwLjMxLDEwLjMxLDAsMCwwLDE0LjkzLDBsMjU2LTI1OC4xM1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00My43MyAtOTkuMikiLz4KPC9zdmc+); 119 | width: 20px; 120 | height: 20px; 121 | position: absolute; 122 | top: 50%; 123 | left: 50%; 124 | margin-top: -10px; 125 | margin-left: -10px; 126 | transition: opacity .2s; 127 | } 128 | 129 | .login-checkbox.login-checkbox-active .login-checkbox-check { 130 | opacity: 1; 131 | } 132 | 133 | .login-checkbox-label { 134 | float: left; 135 | cursor: pointer; 136 | width: calc(100% - 20px); 137 | line-height: 20px; 138 | font-size: 17px; 139 | padding: 0 0 0 12px; 140 | -webkit-user-select: none; 141 | -moz-user-select: none; 142 | -ms-user-select: none; 143 | user-select: none; 144 | } 145 | 146 | .login-button { 147 | width: 100%; 148 | border: 0; 149 | color: #fff; 150 | background: #246bb3; 151 | border-radius: 4px; 152 | height: 40px; 153 | line-height: 40px; 154 | font-size: 20px; 155 | padding: 0; 156 | transition: background-color .2s; 157 | } 158 | 159 | .login-button:hover { 160 | background: #3878c1; 161 | } 162 | 163 | .login-button:active { 164 | background: #246bb3; 165 | } 166 | 167 | .login-button[disabled] { 168 | cursor: default !important; 169 | color: #ccc !important; 170 | background: #eee !important; 171 | } 172 | 173 | .loading-bar, 174 | .login-button[disabled].loading-bar { 175 | background-image: linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, rgba(255, 255, 255, .0) 25%, rgba(255, 255, 255, .0) 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, rgba(255, 255, 255, .0) 75%, rgba(255, 255, 255, .0)) !important; 176 | background-size: 32px 32px !important; 177 | background-repeat: repeat !important; 178 | transition: background-position 60000s linear !important; 179 | background-position: 4000000px !important; 180 | } 181 | 182 | /* Footer */ 183 | 184 | .login-footer { 185 | background: #fafafa; 186 | border-top: 1px solid #eee; 187 | border-radius: 0 0 4px 4px; 188 | font-size: 17px; 189 | line-height: 1.6; 190 | padding: 15px 0 15px 25px; 191 | position: absolute; 192 | bottom: 0; 193 | left: 0; 194 | right: 0; 195 | } 196 | 197 | .login-footer span { 198 | cursor: pointer; 199 | color: #297acc; 200 | } 201 | 202 | .login-footer span:hover { 203 | text-decoration: underline; 204 | } 205 | -------------------------------------------------------------------------------- /demo/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jBox HTML demos 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 27 |
28 | 29 |
30 | 31 |

Tooltip

32 | 33 |
34 |
Hover me
35 |
Hover me
36 |
Hover me
37 |
Hover me
38 |
Hover me
39 |
Hover me
40 |
Click me
41 |
Click me
42 |
43 | 44 |

Modal

45 | 46 |
47 | 48 | 49 | 50 |
Click me
51 |
52 | 53 |

Notice

54 | 55 |
56 |
Click me
57 |
Click me
58 |
Click me
59 |
Click me
60 |
61 | 62 |

Image

63 | 64 |
65 | 66 | 67 | 68 | 69 | 70 |
71 | 72 |

Playground

73 | 74 |
75 |
Inception
76 |
Avatars
77 |
Login
78 |
79 | 80 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /demo/html/js/demo.js: -------------------------------------------------------------------------------- 1 | jQuery(function () { 2 | // Tooltip 3 | 4 | new jBox('Tooltip', { 5 | attach: '#Tooltip-1', 6 | content: 'This is a basic jBox tooltip' 7 | }); 8 | 9 | new jBox('Tooltip', { 10 | attach: '#Tooltip-2', 11 | theme: 'TooltipBorderThick', 12 | width: 200, 13 | position: { 14 | x: 'left', 15 | y: 'center' 16 | }, 17 | outside: 'x', 18 | pointer: 'top:15', 19 | content: 'You have many options to position and animate your jBoxes', 20 | animation: 'move' 21 | }); 22 | 23 | new jBox('Tooltip', { 24 | attach: '#Tooltip-3', 25 | theme: 'TooltipDark', 26 | animation: 'zoomOut', 27 | content: 'Use themes to change appearance' 28 | }); 29 | 30 | new jBox('Tooltip', { 31 | attach: '#Tooltip-4', 32 | width: 300, 33 | pointer: 'right:80', 34 | animation: 'move', 35 | delayOpen: 1000, 36 | delayClose: 2000, 37 | content: 'This tooltip waits 1 second to open and closes after 2 seconds', 38 | onOpen: function () { 39 | this.source.removeClass('active').html('Hover me'); 40 | }, 41 | onClose: function () { 42 | this.source.removeClass('active').html('Hover me'); 43 | } 44 | }); 45 | 46 | new jBox('Mouse', { 47 | attach: '#Tooltip-5', 48 | position: { 49 | x: 'right', 50 | y: 'bottom' 51 | }, 52 | content: 'I will follow you!' 53 | }); 54 | 55 | new jBox('Tooltip', { 56 | attach: '#Tooltip-6', 57 | width: 280, 58 | closeOnMouseleave: true, 59 | animation: 'zoomIn', 60 | content: "I won't close when you move your mouse over me" 61 | }); 62 | 63 | new jBox('Tooltip', { 64 | attach: '#Tooltip-7', 65 | target: '#Tooltip-1', 66 | theme: 'TooltipBorder', 67 | trigger: 'click', 68 | adjustTracker: true, 69 | closeOnClick: 'body', 70 | closeButton: 'box', 71 | animation: 'move', 72 | position: { 73 | x: 'left', 74 | y: 'top' 75 | }, 76 | outside: 'y', 77 | pointer: 'left:20', 78 | offset: { 79 | x: 25 80 | }, 81 | content: 82 | 'You can position your tooltips at any element.
Scroll up and down to see this tooltip flip position!', 83 | onOpen: function () { 84 | this.source.addClass('active').html('Now scroll'); 85 | }, 86 | onClose: function () { 87 | this.source.removeClass('active').html('Click me'); 88 | } 89 | }); 90 | 91 | new jBox('Tooltip', { 92 | attach: '#Tooltip-8', 93 | theme: 'TooltipBorder', 94 | trigger: 'click', 95 | width: 200, 96 | height: jQuery(window).height() - 160, 97 | adjustTracker: true, 98 | closeOnClick: 'body', 99 | closeOnEsc: true, 100 | animation: 'move', 101 | position: { 102 | x: 'right', 103 | y: 'center' 104 | }, 105 | outside: 'x', 106 | content: 107 | 'Scroll up and down or resize your browser, I will adjust my position!

Press [ESC] or click anywhere to close.', 108 | onOpen: function () { 109 | this.source.addClass('active').html('Now scroll'); 110 | }, 111 | onClose: function () { 112 | this.source.removeClass('active').html('Click me'); 113 | } 114 | }); 115 | 116 | // Modal 117 | 118 | new jBox('Modal', { 119 | attach: '#Modal-1', 120 | height: 200, 121 | title: "I'm a basic jBox modal window", 122 | content: 123 | '
Try to scroll ...it\'s blocked.
Press [ESC] or click anywhere to close.
' 124 | }); 125 | 126 | new jBox('Modal', { 127 | attach: '#Modal-2', 128 | width: 350, 129 | height: 200, 130 | blockScroll: false, 131 | animation: 'zoomIn', 132 | draggable: 'title', 133 | closeButton: true, 134 | content: 'You can move this modal window', 135 | title: 'Click here to drag me around', 136 | overlay: false, 137 | reposition: false, 138 | repositionOnOpen: false 139 | }); 140 | 141 | new jBox('Modal', { 142 | attach: '#Modal-3', 143 | width: 450, 144 | height: 250, 145 | closeButton: 'title', 146 | animation: false, 147 | title: 'AJAX request', 148 | ajax: { 149 | url: 'https://reqres.in/api/users?delay=2', 150 | data: { 151 | id: '1982', 152 | name: 'Stephan Wagner' 153 | }, 154 | method: 'post', 155 | reload: 'strict', 156 | setContent: false, 157 | beforeSend: function () { 158 | this.setContent(''); 159 | this.setTitle( 160 | '
Sending AJAX request...
' 161 | ); 162 | }, 163 | complete: function () { 164 | this.setTitle('
AJAX request complete
'); 165 | }, 166 | success: function (response) { 167 | this.setContent( 168 | '
Response:' + 169 | JSON.stringify(response) + 170 | '
' 171 | ); 172 | }, 173 | error: function () { 174 | this.setContent( 175 | '
Oops, something went wrong
' 176 | ); 177 | } 178 | } 179 | }); 180 | 181 | // Confirm 182 | 183 | new jBox('Confirm', { 184 | content: 'Do you really want to do this?', 185 | cancelButton: 'Nope', 186 | confirmButton: 'Sure do!' 187 | }); 188 | 189 | // Notice 190 | 191 | jQuery('#Notice-1').on('click', function () { 192 | new jBox('Notice', { 193 | content: "Hello, I'm a notice", 194 | color: 'black' 195 | }); 196 | }); 197 | 198 | jQuery('#Notice-2').on('click', function () { 199 | new jBox('Notice', { 200 | animation: 'flip', 201 | color: getColor(), 202 | content: 'Oooh! They also come in colors', 203 | delayOnHover: true, 204 | showCountdown: true 205 | }); 206 | }); 207 | 208 | jQuery('#Notice-3').on('click', function () { 209 | new jBox('Notice', { 210 | theme: 'NoticeFancy', 211 | attributes: { 212 | x: 'left', 213 | y: 'bottom' 214 | }, 215 | color: getColor(), 216 | content: "Hello, I'm down here", 217 | audio: '../../assets/audio/bling2', 218 | volume: 80, 219 | animation: { 220 | open: 'slide:bottom', 221 | close: 'slide:left' 222 | } 223 | }); 224 | }); 225 | 226 | jQuery('#Notice-4').on('click', function () { 227 | new jBox('Notice', { 228 | attributes: { 229 | x: 'right', 230 | y: 'bottom' 231 | }, 232 | stack: false, 233 | animation: { 234 | open: 'tada', 235 | close: 'zoomIn' 236 | }, 237 | color: getColor(), 238 | title: "Tadaaa! I'm single", 239 | content: "Open another notice, I won't stack" 240 | }); 241 | }); 242 | 243 | // Image 244 | 245 | new jBox('Image', { 246 | imageCounter: true, 247 | imageCounterSeparator: ' of ' 248 | }); 249 | 250 | // Additional JS for demo purposes 251 | 252 | jQuery('#Tooltip-4').on('mouseenter mouseleave', function () { 253 | jQuery('#Tooltip-4').addClass('active').html('Wait...'); 254 | }); 255 | 256 | jQuery('.target-notice') 257 | .on('click', function () { 258 | jQuery(this).addClass('active').html('Click me again'); 259 | }) 260 | .on('mouseleave', function () { 261 | jQuery(this).removeClass('active').html('Click me'); 262 | }); 263 | 264 | var colors = ['red', 'green', 'blue', 'yellow']; 265 | var index = 0; 266 | var getColor = function () { 267 | if (index >= colors.length) { 268 | index = 0; 269 | } 270 | return colors[index++]; 271 | }; 272 | }); 273 | -------------------------------------------------------------------------------- /demo/html/js/playground-avatars.js: -------------------------------------------------------------------------------- 1 | // Playground Demo: Avatars 2 | 3 | // All data we are using for this demo we will store in the variable DemoAvatars 4 | 5 | var DemoAvatars = { 6 | Avatars: ['Stephan', 'Susan', 'Jack', 'Elizabeth', 'Fungus', 'Donald', 'Gary', 'Trixi', 'Samuel', 'Maria'], 7 | Modals: {} 8 | }; 9 | 10 | // All the magic happens in the function generateAvatarJBox 11 | 12 | function generateAvatarJBox(initial) { 13 | // We only need to initialize the tooltips for the avatar collection once 14 | // We can later refer to this jBox instance with DemoAvatars.AvatarsTooltip 15 | 16 | !DemoAvatars.AvatarsTooltip && (DemoAvatars.AvatarsTooltip = new jBox('Tooltip', { 17 | theme: 'TooltipBorder', // We are using the border theme... 18 | addClass: 'AvatarsTooltip', // ...and add a class so we can adjust the theme with CSS 19 | attach: '[data-avatar-tooltip]', // We attach the tooltip to the elements with the attribute data-avatar-tooltip... 20 | getContent: 'data-avatar-tooltip', // ... and also get the content from the same attribute 21 | zIndex: 12000, // These tooltips have the highest z-index 22 | animation: 'move', 23 | 24 | // Adding the liked or disliked class depending on the container the avatar is in 25 | onOpen: function () { 26 | this.wrapper.removeClass('AvatarsTooltipLike AvatarsTooltipDislike').addClass('AvatarsTooltip' + (this.source.parent().attr('id') == 'LikedAvatars' ? 'Like' : 'Dislike')); 27 | } 28 | })); 29 | 30 | // When we are creating the initial jBox, reset global variables 31 | 32 | if (initial) { 33 | DemoAvatars.clicked = false; 34 | DemoAvatars.current = -1; 35 | } 36 | 37 | // Increase current avatar index 38 | 39 | DemoAvatars.current++; 40 | 41 | // When we looped through all the avatars, show a jBox Modal with a hint that there are no more avatars nearby 42 | 43 | if (DemoAvatars.current >= DemoAvatars.Avatars.length) { 44 | 45 | DemoAvatars.Modals.AvatarsComplete = new jBox('Modal', { 46 | 47 | // We use similar options to our Avatar modal so they look similar 48 | id: 'AvatarsComplete', 49 | addClass: 'AvatarsModal', 50 | width: 300, 51 | height: 250, 52 | animation: 'zoomIn', 53 | overlay: false, 54 | blockScroll: false, 55 | closeButton: false, 56 | closeOnEsc: false, 57 | adjustDistance: { 58 | top: 40, 59 | right: 5, 60 | bottom: 55, 61 | left: 5 62 | }, 63 | footer: '', 64 | title: 'Whoops', 65 | content: '
There are currently no more avatars near you
', 66 | zIndex: 10000, 67 | 68 | // Once this jBox is created, we tel the close button to close the initial avatar modal 69 | onCreated: function () { 70 | this.footer.find('button').on('click', function () { 71 | DemoAvatars.Modals.AvatarsInitial.close(); 72 | }); 73 | } 74 | }).open(); 75 | 76 | // Nothing more to do, abort here 77 | return null; 78 | } 79 | 80 | // We are creating a new jBox Modal with the avatars each time this function gets called 81 | 82 | var jBoxAvatar = new jBox('Modal', { 83 | addClass: 'AvatarsModal', 84 | width: 300, 85 | height: 250, 86 | animation: 'zoomIn', 87 | zIndex: 10000, 88 | 89 | // Adjusting the distance to the viewport so we have space for the avatar collection at the bottom and the close button of the modal at the top 90 | adjustDistance: { 91 | top: 40, 92 | right: 5, 93 | bottom: 55, 94 | left: 5 95 | }, 96 | 97 | // We are setting these options differently for the initial and the following jBoxes 98 | id: initial ? 'AvatarsInitial' : 'AvatarsModal' + DemoAvatars.current, 99 | overlay: initial ? true : false, // Only one overlay is needed 100 | blockScroll: initial ? true : false, // The initial jBox will block scrolling, no need for the others to o the same 101 | closeButton: initial ? 'overlay' : false, // The initial jBox will have the close button in the overlay, the others won't need one 102 | closeOnEsc: initial ? true : false, // Only the initial jBox can be closed with [ESC] button 103 | 104 | // Placing the buttons in the footer area 105 | footer: '', 106 | 107 | // Open this jBox when it is being initialized 108 | onInit: function () { 109 | this.open(); 110 | 111 | // Here we store the index we used for this jBox 112 | this.AvatarIndex = DemoAvatars.current; 113 | }, 114 | 115 | // When the jBox is created, add the click events to the buttons 116 | onCreated: function () { 117 | 118 | // Create the containers for the liked or disliked avatars 119 | if (initial) { 120 | $('
').appendTo($('body')); 121 | $('
').appendTo($('body')); 122 | } 123 | 124 | $.each(this.footer.find('button'), function (index, el) { 125 | 126 | // Adding the click events for the buttons in the footer 127 | $(el).on('click', function () { 128 | 129 | // Storing a global var that the user clicked on a button 130 | DemoAvatars.clicked = true; 131 | 132 | // When a user clicks a button close the tooltips 133 | DemoAvatars.AvatarsTooltipLike && DemoAvatars.AvatarsTooltipLike.close(); 134 | DemoAvatars.AvatarsTooltipDislike && DemoAvatars.AvatarsTooltipDislike.close(); 135 | 136 | // When we click a button, the jBox disappears, let's tell this jBox that we removed it 137 | this.AvatarRemoved = true; 138 | 139 | // Did we like or dislike the avatar? 140 | var liked = $(el).hasClass('button-heart'); 141 | 142 | // Slide the jBox to the left or right depending on which button the user clicked 143 | this.animate('slide' + (liked ? 'Right' : 'Left'), { 144 | 145 | // Once the jBox is removed, hide it and show the avatar in the collection 146 | complete: function () { 147 | this.wrapper.css('display', 'none'); 148 | 149 | // Which container to use 150 | var collectionContainer = liked ? $('#LikedAvatars') : $('#DislikedAvatars'); 151 | 152 | // If there if not enough space for the avatars to show in one line remove the first one 153 | if (collectionContainer.find('div[data-avatar-tooltip]').length && ((collectionContainer.find('div[data-avatar-tooltip]').length + 1) * $(collectionContainer.find('div[data-avatar-tooltip]')[0]).outerWidth(true) > collectionContainer.outerWidth())) { 154 | $(collectionContainer.find('div[data-avatar-tooltip]')[0]).remove(); 155 | } 156 | 157 | // Add the avatar to the collection 158 | this.animate('popIn', { 159 | element: $('
').append($('
').html('')).appendTo(collectionContainer) 160 | }); 161 | 162 | // Attach the avatar tooltip 163 | DemoAvatars.AvatarsTooltip && DemoAvatars.AvatarsTooltip.attach(); 164 | 165 | }.bind(this) 166 | }); 167 | 168 | // Open another Avatar jBox 169 | generateAvatarJBox(); 170 | 171 | }.bind(this)); 172 | }.bind(this)); 173 | }, 174 | 175 | // When we open the jBox, set the new content and show the tooltips if it's the initial jBox 176 | onOpen: function () { 177 | 178 | // Set title and content depending on current index 179 | this.setTitle(DemoAvatars.Avatars[DemoAvatars.current]); 180 | this.content.css({ 181 | backgroundImage: 'url(https://stephanwagner.me/img/jBox/avatar/' + DemoAvatars.Avatars[DemoAvatars.current] + '.svg)' 182 | }); 183 | 184 | // If it's the initial jBox, show the tooltips after a short delay 185 | initial && setTimeout(function () { 186 | 187 | // We are creating the two tooltips in a loop as they are very similar 188 | $.each(['Dislike', 'Like'], function (index, item) { 189 | 190 | // We store the tooltips in the global var so we can refer to them later 191 | DemoAvatars['AvatarsTooltip' + item] = new jBox('Tooltip', { 192 | theme: 'TooltipBorder', 193 | addClass: 'AvatarsTooltip AvatarsTooltip' + item, 194 | minWidth: 110, 195 | content: item, 196 | position: { 197 | y: 'bottom' 198 | }, 199 | offset: { 200 | y: 5 201 | }, 202 | target: '#AvatarsInitial .jBox-footer .button-' + (item == 'Like' ? 'heart' : 'cross'), 203 | animation: 'move', 204 | zIndex: 11000, 205 | 206 | // Abort opening the tooltips when we clicked on a like or dislike button already 207 | onOpen: function () { 208 | DemoAvatars.clicked && this.close(); 209 | } 210 | }).open(); 211 | 212 | }); 213 | 214 | }, 500); 215 | } 216 | }); 217 | 218 | // If it's the initial jBox add onClose events 219 | initial && (jBoxAvatar.options.onClose = function () { 220 | // Loop through all avatar jBoxes and close them if they are not removed yet 221 | $.each(DemoAvatars.Modals, function (index, jBox) { 222 | jBox.id != 'AvatarsInitial' && !jBox.AvatarRemoved && jBox.close(); 223 | }.bind(this)); 224 | 225 | // Remove the collection containers with a sliding animation 226 | $.each(['Liked', 'Disliked'], function (index, item) { 227 | this.animate('slide' + (item == 'Liked' ? 'Right' : 'Left'), { 228 | element: $('#' + item + 'Avatars'), 229 | complete: function () { 230 | $('#' + item + 'Avatars').remove(); 231 | } 232 | }); 233 | }.bind(this)); 234 | 235 | // Close the tooltips 236 | DemoAvatars.AvatarsTooltipLike && DemoAvatars.AvatarsTooltipLike.close(); 237 | DemoAvatars.AvatarsTooltipDislike && DemoAvatars.AvatarsTooltipDislike.close(); 238 | }); 239 | 240 | // If it's the initial jBox add onCloseComplete events 241 | initial && (jBoxAvatar.options.onCloseComplete = function () { 242 | // Loop through all modal jBoxes and remove them from DOM 243 | $.each(DemoAvatars.Modals, function (index, jBox) { 244 | jBox.destroy(); 245 | delete DemoAvatars.Modals[jBox.id]; 246 | }); 247 | 248 | // Remove the tooltips from DOM 249 | DemoAvatars.AvatarsTooltipLike && DemoAvatars.AvatarsTooltipLike.destroy(); 250 | DemoAvatars.AvatarsTooltipDislike && DemoAvatars.AvatarsTooltipDislike.destroy(); 251 | }); 252 | 253 | // Store the jBox in the modal collection 254 | DemoAvatars.Modals[jBoxAvatar.id] = jBoxAvatar; 255 | } 256 | 257 | // On domready, add the click event to the button 258 | 259 | $(function () { 260 | 261 | $('#DemoAvatars').on('click', function () { 262 | generateAvatarJBox(true); 263 | }); 264 | 265 | }); 266 | -------------------------------------------------------------------------------- /demo/html/js/playground-inception.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | $('#DemoInception').on('click', function () { 4 | openInceptionModal(); 5 | }); 6 | 7 | }); 8 | 9 | var inceptionLevel = 1; 10 | var offsetLevel = 0; 11 | 12 | function openInceptionModal() { 13 | if (offsetLevel > 5) { 14 | offsetLevel = 0; 15 | } 16 | 17 | new jBox('Modal', { 18 | width: 360, 19 | addClass: 'inception-modal', 20 | overlayClass: 'inception-overlay', 21 | zIndex: 'auto', 22 | draggable: 'title', 23 | closeOnClick: false, 24 | closeButton: 'title', 25 | title: 'Inception level ' + inceptionLevel++, 26 | offset: { 27 | x: offsetLevel * 15, 28 | y: offsetLevel * 15 29 | }, 30 | content: ( 31 | '

You can open new modal windows within this modal window.

' + 32 | '

' 33 | ), 34 | onCreated: function () { 35 | // Add tooltip 36 | this.tooltip = new jBox('Tooltip', { 37 | theme: 'TooltipBorder', 38 | attach: '[data-inception-tooltip]', 39 | getContent: 'data-inception-tooltip', 40 | zIndex: 'auto', 41 | delayOpen: 600 42 | }); 43 | 44 | // Add button event 45 | this.content.find('.inception-modal-button').on('click', function () { 46 | openInceptionModal(); 47 | }); 48 | }, 49 | // Remove modal from DOM when it's closed 50 | onCloseComplete: function () { 51 | this.destroy(); 52 | this.tooltip && this.tooltip.destroy(); 53 | } 54 | }).open(); 55 | 56 | offsetLevel++; 57 | } 58 | -------------------------------------------------------------------------------- /demo/html/js/playground-login.js: -------------------------------------------------------------------------------- 1 | // Playground Demo: Login 2 | 3 | // We are setting up a global variable where we can adjust html and texts 4 | 5 | var jBoxLogin = { 6 | jBox: null, 7 | 8 | // The html of each of the content containers 9 | 10 | html: { 11 | login: '', 12 | register: '' 13 | }, 14 | 15 | // Corresponding titles for content elements 16 | 17 | title: { 18 | login: 'Login', 19 | register: 'Create new account' 20 | }, 21 | 22 | // These tooltips will show when a textelemet gets focus 23 | 24 | textfieldTooltips: { 25 | loginUsername: 'For this demo the username is "username"', 26 | loginPassword: 'For this demo the password is "password"', 27 | registerUsername: 'Choose a unique username', 28 | registerEmail: 'Your email address', 29 | registerPassword: 'Be tricky, use numbers and special characters' 30 | } 31 | }; 32 | 33 | $(function () { 34 | 35 | if (!$('#DemoLogin').length) { 36 | return; 37 | } 38 | 39 | // On domready create the login modal 40 | 41 | jBoxLogin.jBox = new jBox('Modal', { 42 | 43 | // Unique id for CSS access 44 | id: 'jBoxLogin', 45 | 46 | // Dimensions 47 | width: 320, 48 | height: 350, 49 | 50 | // Attach to elements 51 | attach: '#DemoLogin', 52 | 53 | // Create the content with the html provided in global var 54 | content: '
' + jBoxLogin.html.login + jBoxLogin.html.register + '
', 55 | 56 | // Adjust header when scroll is blocked 57 | blockScrollAdjust: ['header'], 58 | 59 | // When the jBox is being initialized add internal functions 60 | onInit: function () { 61 | 62 | // Internal function to show content 63 | this.showContent = function (id, force) { 64 | 65 | // Abort if an ajax call is loading 66 | if (!force && $('#LoginWrapper').hasClass('request-running')) return null; 67 | 68 | // Set the title depending on id 69 | this.setTitle(jBoxLogin.title[id]); 70 | 71 | // Show content depending on id 72 | $('.login-container.active').removeClass('active'); 73 | $('#LoginContainer-' + id).addClass('active'); 74 | 75 | // Remove error tooltips 76 | $.each(jBoxLogin.textfieldTooltips, function (id, tt) { 77 | $('#' + id).data('jBoxTextfieldError') && $('#' + id).data('jBoxTextfieldError').close(); 78 | }); 79 | 80 | }; 81 | 82 | // Initially show content for login 83 | this.showContent('login', true); 84 | 85 | // Add focus and blur events to textfields 86 | $.each(jBoxLogin.textfieldTooltips, function (id, tt) { 87 | 88 | // Focus an textelement 89 | $('#' + id).on('focus', function () { 90 | 91 | // When there is an error tooltip close it 92 | $(this).data('jBoxTextfieldError') && $(this).data('jBoxTextfieldError').close(); 93 | 94 | // Remove the error state from the textfield 95 | $(this).removeClass('textfield-error'); 96 | 97 | // Store the tooltip jBox in the elements data 98 | if (!$(this).data('jBoxTextfieldTooltip')) { 99 | $(this).data('jBoxTextfieldTooltip', new jBox('Tooltip', { 100 | width: 310, 101 | theme: 'TooltipSmall', 102 | addClass: 'LoginTooltipSmall', 103 | target: $(this), 104 | position: { 105 | x: 'left', 106 | y: 'top' 107 | }, 108 | outside: 'y', 109 | offset: { 110 | y: 6, 111 | x: 8 112 | }, 113 | pointer: 'left:17', 114 | content: tt, 115 | animation: 'move' 116 | })); 117 | } 118 | 119 | $(this).data('jBoxTextfieldTooltip').open(); 120 | 121 | // Loose focus of textelement 122 | }).on('blur', function () { 123 | $(this).data('jBoxTextfieldTooltip').close(); 124 | }); 125 | }); 126 | 127 | // Internal function to show errors 128 | this.showError = function (element, message) { 129 | 130 | if (!element.data('errorTooltip')) { 131 | element.data('errorTooltip', new jBox('Tooltip', { 132 | width: 310, 133 | theme: 'TooltipError', 134 | addClass: 'LoginTooltipError', 135 | target: element, 136 | position: { 137 | x: 'left', 138 | y: 'top' 139 | }, 140 | outside: 'y', 141 | offset: { 142 | y: 6 143 | }, 144 | pointer: 'left:9', 145 | content: message, 146 | animation: 'move' 147 | })); 148 | } 149 | 150 | element.data('errorTooltip').open(); 151 | }; 152 | 153 | // Internal function to change checkbox state 154 | this.toggleCheckbox = function () { 155 | // Abort if an ajax call is loading 156 | if ($('#LoginWrapper').hasClass('request-running')) return null; 157 | 158 | $('.login-checkbox').toggleClass('login-checkbox-active'); 159 | }; 160 | 161 | // Add checkbox events to checkbox and label 162 | $('.login-checkbox, .login-checkbox-label').on('click', function () { 163 | this.toggleCheckbox(); 164 | }.bind(this)); 165 | 166 | // Parse an ajax repsonse 167 | this.parseResponse = function (response) { 168 | try { 169 | response = JSON.parse(response.responseText || response); 170 | } catch (e) {} 171 | return response; 172 | }; 173 | 174 | // Show a global error 175 | this.globalError = function () { 176 | new jBox('Notice', { 177 | color: 'red', 178 | content: 'Oops, something went wrong.', 179 | attributes: { 180 | x: 'right', 181 | y: 'bottom' 182 | } 183 | }); 184 | }; 185 | 186 | // Internal function to disable or enable the form while request is running 187 | this.startRequest = function () { 188 | this.toggleRequest(); 189 | }.bind(this); 190 | 191 | this.completeRequest = function () { 192 | this.toggleRequest(true); 193 | }.bind(this); 194 | 195 | this.toggleRequest = function (enable) { 196 | $('#LoginWrapper')[enable ? 'removeClass' : 'addClass']('request-running'); 197 | $('#LoginWrapper button')[enable ? 'removeClass' : 'addClass']('loading-bar'); 198 | $('#LoginWrapper input, #LoginWrapper button').attr('disabled', enable ? false : 'disabled'); 199 | }.bind(this); 200 | 201 | // Bind ajax login function to login button 202 | $('#LoginContainer-login button').on('click', function () { 203 | $.ajax({ 204 | url: 'https://stephanwagner.me/PlaygroundLogin/login', 205 | data: { 206 | username: $('#loginUsername').val(), 207 | password: $('#loginPassword').val(), 208 | remember: $('.login-checkbox').hasClass('login-checkbox-active') ? 1 : 0 209 | }, 210 | method: 'get', 211 | beforeSend: function () { 212 | this.startRequest(); 213 | }.bind(this), 214 | 215 | // Ajax call successfull 216 | success: function (response) { 217 | this.completeRequest(); 218 | response = this.parseResponse(response); 219 | 220 | // Login successfull 221 | if (response.success) { 222 | this.close(); 223 | new jBox('Notice', { 224 | color: 'green', 225 | content: 'You are now logged in', 226 | attributes: { 227 | x: 'right', 228 | y: 'bottom' 229 | } 230 | }); 231 | // Login failed 232 | } else { 233 | // Shake submit button 234 | this.animate('shake', { 235 | element: $('#LoginContainer-login button') 236 | }); 237 | 238 | if (response.errors) { 239 | // Show error on textfields, for login no error tooltips neccessary, username or password is wrong 240 | $('#loginUsername, #loginPassword').addClass('textfield-error'); 241 | } else { 242 | // Backend error 243 | this.globalError(); 244 | } 245 | } 246 | }.bind(this), 247 | 248 | // Ajax call failed 249 | error: function () { 250 | this.completeRequest(); 251 | this.animate('shake', { 252 | element: $('#LoginContainer-login button') 253 | }); 254 | this.globalError(); 255 | }.bind(this) 256 | }); 257 | 258 | }.bind(this)); 259 | 260 | // Bind ajax register function to register button 261 | $('#LoginContainer-register button').on('click', function () { 262 | $.ajax({ 263 | url: 'https://stephanwagner.me/PlaygroundLogin/register', 264 | data: { 265 | username: $('#registerUsername').val(), 266 | email: $('#registerEmail').val(), 267 | password: $('#registerPassword').val() 268 | }, 269 | method: 'get', 270 | beforeSend: function () { 271 | this.startRequest(); 272 | }.bind(this), 273 | 274 | success: function (response) { 275 | this.completeRequest(); 276 | response = this.parseResponse(response); 277 | 278 | // Registration successfull 279 | if (response.success) { 280 | this.close(); 281 | new jBox('Notice', { 282 | color: 'green', 283 | content: 'Your account was created', 284 | attributes: { 285 | x: 'right', 286 | y: 'bottom' 287 | } 288 | }); 289 | 290 | // Registration failed 291 | } else { 292 | // Shake submit button 293 | this.animate('shake', { 294 | element: $('#LoginContainer-register button') 295 | }); 296 | 297 | if (response.errors) { 298 | // Loop through errors and open tooltips 299 | $.each(response.errors, function (id, error) { 300 | var id_selector = 'register' + (id).substr(0, 1).toUpperCase() + (id).substr(1); 301 | $('#' + id_selector).addClass('textfield-error'); 302 | 303 | if (!$('#' + id_selector).data('jBoxTextfieldError')) { 304 | $('#' + id_selector).data('jBoxTextfieldError', new jBox('Tooltip', { 305 | width: 310, 306 | theme: 'TooltipError', 307 | addClass: 'LoginTooltipError', 308 | target: $('#' + id_selector), 309 | position: { 310 | x: 'left', 311 | y: 'top' 312 | }, 313 | outside: 'y', 314 | offset: { 315 | y: 6, 316 | x: 8 317 | }, 318 | pointer: 'left:17', 319 | //content: error, 320 | animation: 'move' 321 | })); 322 | } 323 | $('#' + id_selector).data('jBoxTextfieldError').setContent(error).open(); 324 | }); 325 | 326 | // Backend error 327 | } else { 328 | this.globalError(); 329 | } 330 | } 331 | }.bind(this), 332 | 333 | // Ajax call failed 334 | error: function () { 335 | this.completeRequest(); 336 | this.animate('shake', { 337 | element: $('#RegisterContainer-login button') 338 | }); 339 | this.globalError(); 340 | }.bind(this) 341 | }); 342 | }.bind(this)); 343 | }, 344 | onOpen: function () { 345 | // Go back to login when we open the modal 346 | this.showContent('login', true); 347 | }, 348 | onClose: function () { 349 | // Remove error tooltips 350 | $.each(jBoxLogin.textfieldTooltips, function (id, tt) { 351 | $('#' + id).data('jBoxTextfieldError') && $('#' + id).data('jBoxTextfieldError').close(); 352 | }); 353 | } 354 | }); 355 | }); 356 | -------------------------------------------------------------------------------- /dist/jBox.css: -------------------------------------------------------------------------------- 1 | .jBox-wrapper { 2 | text-align: left; 3 | box-sizing: border-box; 4 | } 5 | 6 | .jBox-title, 7 | .jBox-content, 8 | .jBox-container { 9 | position: relative; 10 | word-break: break-word; 11 | box-sizing: border-box; 12 | } 13 | 14 | .jBox-container { 15 | background: #fff; 16 | } 17 | 18 | .jBox-content { 19 | padding: 8px 12px; 20 | overflow-x: hidden; 21 | overflow-y: auto; 22 | transition: opacity .2s; 23 | } 24 | 25 | .jBox-footer { 26 | box-sizing: border-box; 27 | } 28 | 29 | .jBox-Tooltip .jBox-container, 30 | .jBox-Mouse .jBox-container { 31 | border-radius: 4px; 32 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); 33 | } 34 | 35 | .jBox-Tooltip .jBox-title, 36 | .jBox-Mouse .jBox-title { 37 | padding: 8px 10px 0; 38 | font-weight: bold; 39 | } 40 | 41 | .jBox-Tooltip.jBox-hasTitle .jBox-content, 42 | .jBox-Mouse.jBox-hasTitle .jBox-content { 43 | padding-top: 5px; 44 | } 45 | 46 | .jBox-Mouse { 47 | pointer-events: none; 48 | } 49 | 50 | .jBox-pointer { 51 | position: absolute; 52 | overflow: hidden; 53 | box-sizing: border-box; 54 | } 55 | 56 | .jBox-pointer:after { 57 | content: ''; 58 | width: 20px; 59 | height: 20px; 60 | position: absolute; 61 | background: #fff; 62 | transform: rotate(45deg); 63 | box-sizing: border-box; 64 | } 65 | 66 | .jBox-pointer-top { 67 | top: 0; 68 | } 69 | 70 | .jBox-pointer-top:after { 71 | left: 5px; 72 | top: 6px; 73 | box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.15); 74 | } 75 | 76 | .jBox-pointer-right { 77 | right: 0; 78 | } 79 | 80 | .jBox-pointer-right:after { 81 | top: 5px; 82 | right: 6px; 83 | box-shadow: 1px -1px 2px rgba(0, 0, 0, 0.15); 84 | } 85 | 86 | .jBox-pointer-left { 87 | left: 0; 88 | } 89 | 90 | .jBox-pointer-left:after { 91 | top: 5px; 92 | left: 6px; 93 | box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.15); 94 | } 95 | 96 | .jBox-pointer-bottom { 97 | bottom: 0; 98 | } 99 | 100 | .jBox-pointer-bottom:after { 101 | left: 5px; 102 | bottom: 6px; 103 | box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); 104 | } 105 | 106 | .jBox-pointer-top, .jBox-pointer-bottom { 107 | width: 30px; 108 | height: 12px; 109 | } 110 | 111 | .jBox-pointer-left, .jBox-pointer-right { 112 | width: 12px; 113 | height: 30px; 114 | } 115 | 116 | .jBox-Modal .jBox-container { 117 | border-radius: 4px; 118 | } 119 | 120 | .jBox-Modal .jBox-container, .jBox-Modal.jBox-closeButton-box:before { 121 | box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4), 0 0 5px rgba(0, 0, 0, 0.4); 122 | } 123 | 124 | .jBox-Modal .jBox-content { 125 | padding: 15px 20px; 126 | } 127 | 128 | .jBox-Modal .jBox-title { 129 | border-radius: 4px 4px 0 0; 130 | padding: 15px 20px; 131 | background: #fafafa; 132 | border-bottom: 1px solid #eee; 133 | } 134 | 135 | .jBox-Modal.jBox-closeButton-title .jBox-title { 136 | padding-right: 65px; 137 | } 138 | 139 | .jBox-Modal .jBox-footer { 140 | border-radius: 0 0 4px 4px; 141 | } 142 | 143 | .jBox-closeButton { 144 | z-index: 1; 145 | cursor: pointer; 146 | position: absolute; 147 | box-sizing: border-box; 148 | } 149 | 150 | .jBox-closeButton svg { 151 | position: absolute; 152 | top: 50%; 153 | right: 50%; 154 | } 155 | 156 | .jBox-closeButton path { 157 | fill: #aaa; 158 | transition: fill .2s; 159 | } 160 | 161 | .jBox-closeButton:hover path { 162 | fill: #888; 163 | } 164 | 165 | .jBox-overlay .jBox-closeButton { 166 | top: 0; 167 | right: 0; 168 | width: 40px; 169 | height: 40px; 170 | } 171 | 172 | .jBox-overlay .jBox-closeButton svg { 173 | width: 20px; 174 | height: 20px; 175 | margin-top: -10px; 176 | margin-right: -10px; 177 | } 178 | 179 | .jBox-overlay .jBox-closeButton path { 180 | fill: #ddd; 181 | } 182 | 183 | .jBox-overlay .jBox-closeButton:hover path { 184 | fill: #fff; 185 | } 186 | 187 | .jBox-closeButton-title .jBox-closeButton { 188 | top: 0; 189 | right: 0; 190 | bottom: 0; 191 | width: 50px; 192 | } 193 | 194 | .jBox-closeButton-title svg { 195 | width: 12px; 196 | height: 12px; 197 | margin-top: -6px; 198 | margin-right: -6px; 199 | } 200 | 201 | .jBox-closeButton-box { 202 | box-sizing: border-box; 203 | } 204 | 205 | .jBox-closeButton-box .jBox-closeButton { 206 | top: -8px; 207 | right: -10px; 208 | width: 24px; 209 | height: 24px; 210 | background: #fff; 211 | border-radius: 50%; 212 | } 213 | 214 | .jBox-closeButton-box .jBox-closeButton svg { 215 | width: 10px; 216 | height: 10px; 217 | margin-top: -5px; 218 | margin-right: -5px; 219 | } 220 | 221 | .jBox-closeButton-box:before { 222 | content: ''; 223 | position: absolute; 224 | top: -8px; 225 | right: -10px; 226 | width: 24px; 227 | height: 24px; 228 | border-radius: 50%; 229 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 230 | } 231 | 232 | .jBox-closeButton-box.jBox-pointerPosition-top:before { 233 | top: 5px; 234 | } 235 | 236 | .jBox-closeButton-box.jBox-pointerPosition-right:before { 237 | right: 2px; 238 | } 239 | 240 | .jBox-Modal.jBox-hasTitle.jBox-closeButton-box .jBox-closeButton { 241 | background: #fafafa; 242 | } 243 | 244 | .jBox-overlay { 245 | position: fixed; 246 | top: 0; 247 | left: 0; 248 | width: 100%; 249 | height: 100%; 250 | background-color: rgba(0, 0, 0, 0.82); 251 | } 252 | 253 | .jBox-footer { 254 | background: #fafafa; 255 | border-top: 1px solid #eee; 256 | padding: 8px 10px; 257 | border-radius: 0 0 3px 3px; 258 | } 259 | 260 | body[class^="jBox-blockScroll-"], 261 | body[class*=" jBox-blockScroll-"] { 262 | overflow: hidden; 263 | } 264 | 265 | .jBox-draggable { 266 | cursor: move; 267 | } 268 | 269 | @keyframes jBoxLoading { 270 | to { 271 | transform: rotate(360deg); 272 | } 273 | } 274 | 275 | .jBox-loading .jBox-content { 276 | opacity: .2; 277 | } 278 | 279 | .jBox-loading-spinner .jBox-content { 280 | min-height: 38px !important; 281 | min-width: 38px !important; 282 | opacity: 0; 283 | } 284 | 285 | .jBox-spinner { 286 | box-sizing: border-box; 287 | position: absolute; 288 | top: 50%; 289 | left: 50%; 290 | width: 24px; 291 | height: 24px; 292 | margin-top: -12px; 293 | margin-left: -12px; 294 | } 295 | 296 | .jBox-spinner:before { 297 | display: block; 298 | box-sizing: border-box; 299 | content: ''; 300 | width: 24px; 301 | height: 24px; 302 | border-radius: 50%; 303 | border: 2px solid rgba(0, 0, 0, 0.2); 304 | border-top-color: rgba(0, 0, 0, 0.8); 305 | animation: jBoxLoading .6s linear infinite; 306 | } 307 | 308 | .jBox-countdown { 309 | border-radius: 4px 4px 0 0; 310 | z-index: 0; 311 | background: #000; 312 | opacity: .2; 313 | position: absolute; 314 | top: 0; 315 | left: 0; 316 | right: 0; 317 | height: 3px; 318 | overflow: hidden; 319 | } 320 | 321 | .jBox-countdown-inner { 322 | top: 0; 323 | right: 0; 324 | width: 100%; 325 | height: 3px; 326 | position: absolute; 327 | background: #fff; 328 | } 329 | 330 | [class^="jBox-animated-"], 331 | [class*=" jBox-animated-"] { 332 | animation-fill-mode: both; 333 | } 334 | 335 | @keyframes jBox-tada { 336 | 0% { 337 | transform: scale(1); 338 | } 339 | 10%, 340 | 20% { 341 | transform: scale(0.8) rotate(-4deg); 342 | } 343 | 30%, 344 | 50%, 345 | 70%, 346 | 90% { 347 | transform: scale(1.2) rotate(4deg); 348 | } 349 | 40%, 350 | 60%, 351 | 80% { 352 | transform: scale(1.2) rotate(-4deg); 353 | } 354 | 100% { 355 | transform: scale(1) rotate(0); 356 | } 357 | } 358 | 359 | .jBox-animated-tada { 360 | animation: jBox-tada 1s; 361 | } 362 | 363 | @keyframes jBox-tadaSmall { 364 | 0% { 365 | transform: scale(1); 366 | } 367 | 10%, 368 | 20% { 369 | transform: scale(0.9) rotate(-2deg); 370 | } 371 | 30%, 372 | 50%, 373 | 70%, 374 | 90% { 375 | transform: scale(1.1) rotate(2deg); 376 | } 377 | 40%, 378 | 60%, 379 | 80% { 380 | transform: scale(1.1) rotate(-2deg); 381 | } 382 | 100% { 383 | transform: scale(1) rotate(0); 384 | } 385 | } 386 | 387 | .jBox-animated-tadaSmall { 388 | animation: jBox-tadaSmall 1s; 389 | } 390 | 391 | @keyframes jBox-flash { 392 | 0%, 393 | 50%, 394 | 100% { 395 | opacity: 1; 396 | } 397 | 25%, 398 | 75% { 399 | opacity: 0; 400 | } 401 | } 402 | 403 | .jBox-animated-flash { 404 | animation: jBox-flash .5s; 405 | } 406 | 407 | @keyframes jBox-shake { 408 | 0%, 409 | 100% { 410 | transform: translateX(0); 411 | } 412 | 20%, 413 | 60% { 414 | transform: translateX(-6px); 415 | } 416 | 40%, 417 | 80% { 418 | transform: translateX(6px); 419 | } 420 | } 421 | 422 | .jBox-animated-shake { 423 | animation: jBox-shake .4s; 424 | } 425 | 426 | @keyframes jBox-pulseUp { 427 | 0% { 428 | transform: scale(1); 429 | } 430 | 50% { 431 | transform: scale(1.15); 432 | } 433 | 100% { 434 | transform: scale(1); 435 | } 436 | } 437 | 438 | .jBox-animated-pulseUp { 439 | animation: jBox-pulseUp .25s; 440 | } 441 | 442 | @keyframes jBox-pulseDown { 443 | 0% { 444 | transform: scale(1); 445 | } 446 | 50% { 447 | transform: scale(0.85); 448 | } 449 | 100% { 450 | transform: scale(1); 451 | } 452 | } 453 | 454 | .jBox-animated-pulseDown { 455 | animation: jBox-pulseDown .25s; 456 | } 457 | 458 | @keyframes jBox-popIn { 459 | 0% { 460 | transform: scale(0); 461 | } 462 | 50% { 463 | transform: scale(1.1); 464 | } 465 | 100% { 466 | transform: scale(1); 467 | } 468 | } 469 | 470 | .jBox-animated-popIn { 471 | animation: jBox-popIn .25s; 472 | } 473 | 474 | @keyframes jBox-popOut { 475 | 0% { 476 | transform: scale(1); 477 | } 478 | 50% { 479 | transform: scale(1.1); 480 | } 481 | 100% { 482 | transform: scale(0); 483 | } 484 | } 485 | 486 | .jBox-animated-popOut { 487 | animation: jBox-popOut .25s; 488 | } 489 | 490 | @keyframes jBox-fadeIn { 491 | 0% { 492 | opacity: 0; 493 | } 494 | 100% { 495 | opacity: 1; 496 | } 497 | } 498 | 499 | .jBox-animated-fadeIn { 500 | animation: jBox-fadeIn .2s; 501 | } 502 | 503 | @keyframes jBox-fadeOut { 504 | 0% { 505 | opacity: 1; 506 | } 507 | 100% { 508 | opacity: 0; 509 | } 510 | } 511 | 512 | .jBox-animated-fadeOut { 513 | animation: jBox-fadeOut .2s; 514 | } 515 | 516 | @keyframes jBox-slideUp { 517 | 0% { 518 | transform: translateY(0); 519 | } 520 | 100% { 521 | transform: translateY(-300px); 522 | opacity: 0; 523 | } 524 | } 525 | 526 | .jBox-animated-slideUp { 527 | animation: jBox-slideUp .4s; 528 | } 529 | 530 | @keyframes jBox-slideRight { 531 | 0% { 532 | transform: translateX(0); 533 | } 534 | 100% { 535 | transform: translateX(300px); 536 | opacity: 0; 537 | } 538 | } 539 | 540 | .jBox-animated-slideRight { 541 | animation: jBox-slideRight .4s; 542 | } 543 | 544 | @keyframes jBox-slideDown { 545 | 0% { 546 | transform: translateY(0); 547 | } 548 | 100% { 549 | transform: translateY(300px); 550 | opacity: 0; 551 | } 552 | } 553 | 554 | .jBox-animated-slideDown { 555 | animation: jBox-slideDown .4s; 556 | } 557 | 558 | @keyframes jBox-slideLeft { 559 | 0% { 560 | transform: translateX(0); 561 | } 562 | 100% { 563 | transform: translateX(-300px); 564 | opacity: 0; 565 | } 566 | } 567 | 568 | .jBox-animated-slideLeft { 569 | animation: jBox-slideLeft .4s; 570 | } 571 | 572 | /*# sourceMappingURL=jBox.css.map */ 573 | -------------------------------------------------------------------------------- /dist/jBox.min.css: -------------------------------------------------------------------------------- 1 | .jBox-wrapper{text-align:left;box-sizing:border-box}.jBox-container,.jBox-content,.jBox-title{position:relative;word-break:break-word;box-sizing:border-box}.jBox-container{background:#fff}.jBox-content{padding:8px 12px;overflow-x:hidden;overflow-y:auto;transition:opacity .2s}.jBox-footer{box-sizing:border-box}.jBox-Mouse .jBox-container,.jBox-Tooltip .jBox-container{border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.25)}.jBox-Mouse .jBox-title,.jBox-Tooltip .jBox-title{padding:8px 10px 0;font-weight:700}.jBox-Mouse.jBox-hasTitle .jBox-content,.jBox-Tooltip.jBox-hasTitle .jBox-content{padding-top:5px}.jBox-Mouse{pointer-events:none}.jBox-pointer{position:absolute;overflow:hidden;box-sizing:border-box}.jBox-pointer:after{content:'';width:20px;height:20px;position:absolute;background:#fff;transform:rotate(45deg);box-sizing:border-box}.jBox-pointer-top{top:0}.jBox-pointer-top:after{left:5px;top:6px;box-shadow:-1px -1px 2px rgba(0,0,0,.15)}.jBox-pointer-right{right:0}.jBox-pointer-right:after{top:5px;right:6px;box-shadow:1px -1px 2px rgba(0,0,0,.15)}.jBox-pointer-left{left:0}.jBox-pointer-left:after{top:5px;left:6px;box-shadow:-1px 1px 2px rgba(0,0,0,.15)}.jBox-pointer-bottom{bottom:0}.jBox-pointer-bottom:after{left:5px;bottom:6px;box-shadow:1px 1px 2px rgba(0,0,0,.15)}.jBox-pointer-bottom,.jBox-pointer-top{width:30px;height:12px}.jBox-pointer-left,.jBox-pointer-right{width:12px;height:30px}.jBox-Modal .jBox-container{border-radius:4px}.jBox-Modal .jBox-container,.jBox-Modal.jBox-closeButton-box:before{box-shadow:0 3px 15px rgba(0,0,0,.4),0 0 5px rgba(0,0,0,.4)}.jBox-Modal .jBox-content{padding:15px 20px}.jBox-Modal .jBox-title{border-radius:4px 4px 0 0;padding:15px 20px;background:#fafafa;border-bottom:1px solid #eee}.jBox-Modal.jBox-closeButton-title .jBox-title{padding-right:65px}.jBox-Modal .jBox-footer{border-radius:0 0 4px 4px}.jBox-closeButton{z-index:1;cursor:pointer;position:absolute;box-sizing:border-box}.jBox-closeButton svg{position:absolute;top:50%;right:50%}.jBox-closeButton path{fill:#aaa;transition:fill .2s}.jBox-closeButton:hover path{fill:#888}.jBox-overlay .jBox-closeButton{top:0;right:0;width:40px;height:40px}.jBox-overlay .jBox-closeButton svg{width:20px;height:20px;margin-top:-10px;margin-right:-10px}.jBox-overlay .jBox-closeButton path{fill:#ddd}.jBox-overlay .jBox-closeButton:hover path{fill:#fff}.jBox-closeButton-title .jBox-closeButton{top:0;right:0;bottom:0;width:50px}.jBox-closeButton-title svg{width:12px;height:12px;margin-top:-6px;margin-right:-6px}.jBox-closeButton-box{box-sizing:border-box}.jBox-closeButton-box .jBox-closeButton{top:-8px;right:-10px;width:24px;height:24px;background:#fff;border-radius:50%}.jBox-closeButton-box .jBox-closeButton svg{width:10px;height:10px;margin-top:-5px;margin-right:-5px}.jBox-closeButton-box:before{content:'';position:absolute;top:-8px;right:-10px;width:24px;height:24px;border-radius:50%;box-shadow:0 0 5px rgba(0,0,0,.3)}.jBox-closeButton-box.jBox-pointerPosition-top:before{top:5px}.jBox-closeButton-box.jBox-pointerPosition-right:before{right:2px}.jBox-Modal.jBox-hasTitle.jBox-closeButton-box .jBox-closeButton{background:#fafafa}.jBox-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.82)}.jBox-footer{background:#fafafa;border-top:1px solid #eee;padding:8px 10px;border-radius:0 0 3px 3px}body[class*=" jBox-blockScroll-"],body[class^=jBox-blockScroll-]{overflow:hidden}.jBox-draggable{cursor:move}@keyframes jBoxLoading{to{transform:rotate(360deg)}}.jBox-loading .jBox-content{opacity:.2}.jBox-loading-spinner .jBox-content{min-height:38px!important;min-width:38px!important;opacity:0}.jBox-spinner{box-sizing:border-box;position:absolute;top:50%;left:50%;width:24px;height:24px;margin-top:-12px;margin-left:-12px}.jBox-spinner:before{display:block;box-sizing:border-box;content:'';width:24px;height:24px;border-radius:50%;border:2px solid rgba(0,0,0,.2);border-top-color:rgba(0,0,0,.8);animation:jBoxLoading .6s linear infinite}.jBox-countdown{border-radius:4px 4px 0 0;z-index:0;background:#000;opacity:.2;position:absolute;top:0;left:0;right:0;height:3px;overflow:hidden}.jBox-countdown-inner{top:0;right:0;width:100%;height:3px;position:absolute;background:#fff}[class*=" jBox-animated-"],[class^=jBox-animated-]{animation-fill-mode:both}@keyframes jBox-tada{0%{transform:scale(1)}10%,20%{transform:scale(.8) rotate(-4deg)}30%,50%,70%,90%{transform:scale(1.2) rotate(4deg)}40%,60%,80%{transform:scale(1.2) rotate(-4deg)}100%{transform:scale(1) rotate(0)}}.jBox-animated-tada{animation:jBox-tada 1s}@keyframes jBox-tadaSmall{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-2deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(2deg)}40%,60%,80%{transform:scale(1.1) rotate(-2deg)}100%{transform:scale(1) rotate(0)}}.jBox-animated-tadaSmall{animation:jBox-tadaSmall 1s}@keyframes jBox-flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.jBox-animated-flash{animation:jBox-flash .5s}@keyframes jBox-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}.jBox-animated-shake{animation:jBox-shake .4s}@keyframes jBox-pulseUp{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}.jBox-animated-pulseUp{animation:jBox-pulseUp .25s}@keyframes jBox-pulseDown{0%{transform:scale(1)}50%{transform:scale(.85)}100%{transform:scale(1)}}.jBox-animated-pulseDown{animation:jBox-pulseDown .25s}@keyframes jBox-popIn{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}.jBox-animated-popIn{animation:jBox-popIn .25s}@keyframes jBox-popOut{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(0)}}.jBox-animated-popOut{animation:jBox-popOut .25s}@keyframes jBox-fadeIn{0%{opacity:0}100%{opacity:1}}.jBox-animated-fadeIn{animation:jBox-fadeIn .2s}@keyframes jBox-fadeOut{0%{opacity:1}100%{opacity:0}}.jBox-animated-fadeOut{animation:jBox-fadeOut .2s}@keyframes jBox-slideUp{0%{transform:translateY(0)}100%{transform:translateY(-300px);opacity:0}}.jBox-animated-slideUp{animation:jBox-slideUp .4s}@keyframes jBox-slideRight{0%{transform:translateX(0)}100%{transform:translateX(300px);opacity:0}}.jBox-animated-slideRight{animation:jBox-slideRight .4s}@keyframes jBox-slideDown{0%{transform:translateY(0)}100%{transform:translateY(300px);opacity:0}}.jBox-animated-slideDown{animation:jBox-slideDown .4s}@keyframes jBox-slideLeft{0%{transform:translateX(0)}100%{transform:translateX(-300px);opacity:0}}.jBox-animated-slideLeft{animation:jBox-slideLeft .4s} -------------------------------------------------------------------------------- /dist/plugins/jBox.Confirm.css: -------------------------------------------------------------------------------- 1 | .jBox-Confirm .jBox-content { 2 | text-align: center; 3 | padding: 46px 35px; 4 | } 5 | 6 | @media (max-width: 500px) { 7 | .jBox-Confirm .jBox-content { 8 | padding: 32px 20px; 9 | } 10 | } 11 | 12 | .jBox-Confirm-footer { 13 | height: 46px; 14 | } 15 | 16 | .jBox-Confirm-button { 17 | display: block; 18 | float: left; 19 | cursor: pointer; 20 | text-align: center; 21 | width: 50%; 22 | line-height: 46px; 23 | height: 46px; 24 | overflow: hidden; 25 | padding: 0 10px; 26 | transition: color .2s, background-color .2s; 27 | box-sizing: border-box; 28 | } 29 | 30 | .jBox-Confirm-button-cancel { 31 | border-bottom-left-radius: 4px; 32 | background: #ddd; 33 | color: #666; 34 | } 35 | 36 | .jBox-Confirm-button-cancel:hover, .jBox-Confirm-button-cancel:active { 37 | background: #ccc; 38 | } 39 | 40 | .jBox-Confirm-button-cancel:active { 41 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); 42 | } 43 | 44 | .jBox-Confirm-button-submit { 45 | border-bottom-right-radius: 4px; 46 | background: #7d0; 47 | color: #fff; 48 | } 49 | 50 | .jBox-Confirm-button-submit:hover, .jBox-Confirm-button-submit:active { 51 | background: #6c0; 52 | } 53 | 54 | .jBox-Confirm-button-submit:active { 55 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); 56 | } 57 | 58 | /*# sourceMappingURL=jBox.Confirm.css.map */ 59 | -------------------------------------------------------------------------------- /dist/plugins/jBox.Confirm.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jBox Confirm plugin: Add a confirm dialog to links, buttons, etc. 3 | * 4 | * Author: Stephan Wagner (https://stephanwagner.me) 5 | * 6 | * License: MIT (https://opensource.org/licenses/MIT) 7 | * 8 | * Requires: jBox (https://cdn.jsdelivr.net/gh/StephanWagner/jBox@latest/dist/jBox.min.js) 9 | */ 10 | 11 | function jBoxConfirmWrapper(jBox, jQuery) { 12 | 13 | new jBox.plugin('Confirm', { 14 | 15 | 16 | // Options (https://stephanwagner.me/jBox/options#options-confirm) 17 | 18 | confirmButton: 'Submit', // Text for the submit button 19 | cancelButton: 'Cancel', // Text for the cancel button 20 | confirm: null, // Function to execute when clicking the submit button. By default jBox will use the onclick or href attribute in that order if found 21 | cancel: null, // Function to execute when clicking the cancel button 22 | closeOnConfirm: true, // Close jBox when the user clicks the confirm button 23 | target: window, 24 | fixed: true, 25 | attach: '[data-confirm]', 26 | getContent: 'data-confirm', 27 | content: 'Do you really want to do this?', 28 | minWidth: 360, 29 | maxWidth: 500, 30 | blockScroll: true, 31 | closeOnEsc: true, 32 | closeOnClick: false, 33 | closeButton: false, 34 | overlay: true, 35 | animation: 'zoomIn', 36 | preventDefault: true, 37 | 38 | 39 | // Triggered when jBox is attached to the element 40 | 41 | _onAttach: function (el) 42 | { 43 | // Extract the href or the onclick event if no submit event is passed 44 | if (!this.options.confirm) { 45 | var submit = el.attr('onclick') ? el.attr('onclick') : ( 46 | el.attr('href') ? ( 47 | el.attr('target') ? 'window.open("' + el.attr('href') + '", "' + el.attr('target') + '");' : 'window.location.href = "' + el.attr('href') + '";' 48 | ) : ''); 49 | el.prop('onclick', null).data('jBox-Confirm-submit', submit); 50 | } 51 | }, 52 | 53 | 54 | // Triggered when jBox was created 55 | 56 | _onCreated: function () 57 | { 58 | // Add modal class to mimic jBox modal 59 | this.wrapper.addClass('jBox-Modal'); 60 | 61 | // Add a footer to the jBox container 62 | this.footer = jQuery('
'); 63 | 64 | jQuery('
') 65 | .html(this.options.cancelButton) 66 | .on('click tap', function () { 67 | this.options.cancel && this.options.cancel(this.source); 68 | this.close(); 69 | }.bind(this)) 70 | .appendTo(this.footer); 71 | 72 | this.submitButton = jQuery('
') 73 | .html(this.options.confirmButton) 74 | .appendTo(this.footer); 75 | 76 | this.footer.appendTo(this.container); 77 | }, 78 | 79 | 80 | // Triggered when jBox is opened 81 | 82 | _onOpen: function () 83 | { 84 | // Set the new action for the submit button 85 | this.submitButton 86 | .off('click.jBox-Confirm' + this.id + ' tap.jBox-Confirm' + this.id) 87 | .on('click.jBox-Confirm' + this.id + ' tap.jBox-Confirm' + this.id, function () { 88 | this.options.confirm ? this.options.confirm(this.source) : eval(this.source.data('jBox-Confirm-submit')); 89 | this.options.closeOnConfirm && this.close(); 90 | }.bind(this)); 91 | } 92 | 93 | }); 94 | 95 | }; 96 | 97 | //# sourceMappingURL=jBox.Confirm.js.map 98 | -------------------------------------------------------------------------------- /dist/plugins/jBox.Confirm.min.css: -------------------------------------------------------------------------------- 1 | .jBox-Confirm .jBox-content{text-align:center;padding:46px 35px}@media (max-width:500px){.jBox-Confirm .jBox-content{padding:32px 20px}}.jBox-Confirm-footer{height:46px}.jBox-Confirm-button{display:block;float:left;cursor:pointer;text-align:center;width:50%;line-height:46px;height:46px;overflow:hidden;padding:0 10px;transition:color .2s,background-color .2s;box-sizing:border-box}.jBox-Confirm-button-cancel{border-bottom-left-radius:4px;background:#ddd;color:#666}.jBox-Confirm-button-cancel:active,.jBox-Confirm-button-cancel:hover{background:#ccc}.jBox-Confirm-button-cancel:active{box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}.jBox-Confirm-button-submit{border-bottom-right-radius:4px;background:#7d0;color:#fff}.jBox-Confirm-button-submit:active,.jBox-Confirm-button-submit:hover{background:#6c0}.jBox-Confirm-button-submit:active{box-shadow:inset 0 1px 3px rgba(0,0,0,.2)} -------------------------------------------------------------------------------- /dist/plugins/jBox.Confirm.min.js: -------------------------------------------------------------------------------- 1 | function jBoxConfirmWrapper(jBox,jQuery){new jBox.plugin("Confirm",{confirmButton:"Submit",cancelButton:"Cancel",confirm:null,cancel:null,closeOnConfirm:!0,target:window,fixed:!0,attach:"[data-confirm]",getContent:"data-confirm",content:"Do you really want to do this?",minWidth:360,maxWidth:500,blockScroll:!0,closeOnEsc:!0,closeOnClick:!1,closeButton:!1,overlay:!0,animation:"zoomIn",preventDefault:!0,_onAttach:function(o){var t;this.options.confirm||(t=o.attr("onclick")?o.attr("onclick"):o.attr("href")?o.attr("target")?'window.open("'+o.attr("href")+'", "'+o.attr("target")+'");':'window.location.href = "'+o.attr("href")+'";':"",o.prop("onclick",null).data("jBox-Confirm-submit",t))},_onCreated:function(){this.wrapper.addClass("jBox-Modal"),this.footer=jQuery('
'),jQuery('
').html(this.options.cancelButton).on("click tap",function(){this.options.cancel&&this.options.cancel(this.source),this.close()}.bind(this)).appendTo(this.footer),this.submitButton=jQuery('
').html(this.options.confirmButton).appendTo(this.footer),this.footer.appendTo(this.container)},_onOpen:function(){this.submitButton.off("click.jBox-Confirm"+this.id+" tap.jBox-Confirm"+this.id).on("click.jBox-Confirm"+this.id+" tap.jBox-Confirm"+this.id,function(){this.options.confirm?this.options.confirm(this.source):eval(this.source.data("jBox-Confirm-submit")),this.options.closeOnConfirm&&this.close()}.bind(this))}})} -------------------------------------------------------------------------------- /dist/plugins/jBox.Image.css: -------------------------------------------------------------------------------- 1 | .jBox-Image .jBox-container { 2 | background-color: transparent; 3 | } 4 | 5 | .jBox-Image .jBox-content { 6 | padding: 0; 7 | width: 100%; 8 | height: 100%; 9 | } 10 | 11 | .jBox-image-container { 12 | background: center center no-repeat; 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | opacity: 0; 17 | } 18 | 19 | .jBox-image-label-wrapper { 20 | position: absolute; 21 | top: 100%; 22 | left: 0; 23 | right: 0; 24 | height: 40px; 25 | z-index: 100; 26 | display: flex; 27 | } 28 | 29 | .jBox-image-label-container { 30 | position: relative; 31 | flex: 1; 32 | } 33 | 34 | .jBox-image-label { 35 | box-sizing: border-box; 36 | position: absolute; 37 | left: 0; 38 | bottom: 0; 39 | width: 100%; 40 | text-align: center; 41 | color: #fff; 42 | padding: 8px 12px; 43 | font-size: 15px; 44 | line-height: 24px; 45 | transition: opacity .36s; 46 | opacity: 0; 47 | z-index: 0; 48 | pointer-events: none; 49 | } 50 | 51 | .jBox-image-label.expanded { 52 | background: #000; 53 | } 54 | 55 | .jBox-image-label:not(.expanded) { 56 | text-overflow: ellipsis; 57 | white-space: nowrap; 58 | overflow: hidden; 59 | } 60 | 61 | .jBox-image-label.active { 62 | opacity: 1; 63 | pointer-events: all; 64 | } 65 | 66 | @media (max-width: 600px) { 67 | .jBox-image-label { 68 | font-size: 13px; 69 | } 70 | } 71 | 72 | .jBox-image-pointer-next, 73 | .jBox-image-pointer-prev { 74 | flex-shrink: 0; 75 | width: 40px; 76 | height: 40px; 77 | cursor: pointer; 78 | opacity: .8; 79 | transition: opacity .2s; 80 | background: no-repeat center center url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ijc0LjcgMjI0IDE4LjcgMzIiPg0KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTkzLDIyNy40TDgwLjQsMjQwTDkzLDI1Mi42YzAuNCwwLjQsMC40LDEuMSwwLDEuNWwtMS42LDEuNmMtMC40LDAuNC0xLDAuNS0xLjUsMEw3NSwyNDAuN2MtMC40LTAuNC0wLjUtMSwwLTEuNWwxNC45LTE0LjljMC40LTAuNCwxLTAuNCwxLjUsMGwxLjYsMS42QzkzLjUsMjI2LjQsOTMuNCwyMjcsOTMsMjI3LjR6Ii8+DQo8L3N2Zz4=); 81 | background-size: 11px auto; 82 | user-select: none; 83 | z-index: 1; 84 | } 85 | 86 | .jBox-image-pointer-next:hover, 87 | .jBox-image-pointer-prev:hover { 88 | opacity: 1; 89 | } 90 | 91 | .jBox-image-pointer-next { 92 | transform: scaleX(-1); 93 | } 94 | 95 | .jBox-image-counter-container { 96 | flex-shrink: 0; 97 | white-space: nowrap; 98 | height: 40px; 99 | line-height: 40px; 100 | font-size: 13px; 101 | color: #fff; 102 | text-align: right; 103 | display: none; 104 | } 105 | 106 | .jBox-image-has-counter .jBox-image-counter-container { 107 | display: block; 108 | } 109 | 110 | .jBox-overlay.jBox-overlay-Image { 111 | background: #000; 112 | } 113 | 114 | .jBox-image-not-found { 115 | background: #000; 116 | } 117 | 118 | .jBox-image-not-found:before { 119 | content: ''; 120 | box-sizing: border-box; 121 | display: block; 122 | width: 80px; 123 | height: 80px; 124 | margin-top: -40px; 125 | margin-left: -40px; 126 | position: absolute; 127 | top: 50%; 128 | left: 50%; 129 | border: 5px solid #222; 130 | border-radius: 50%; 131 | } 132 | 133 | .jBox-image-not-found:after { 134 | content: ''; 135 | display: block; 136 | box-sizing: content-box; 137 | z-index: auto; 138 | width: 6px; 139 | height: 74px; 140 | margin-top: -37px; 141 | margin-left: -3px; 142 | position: absolute; 143 | top: 50%; 144 | left: 50%; 145 | background: #222; 146 | transform: rotateZ(45deg); 147 | transform-origin: 50% 50% 0; 148 | } 149 | 150 | .jBox-image-download-button-wrapper { 151 | position: absolute; 152 | top: -40px; 153 | right: 35px; 154 | height: 40px; 155 | display: flex; 156 | cursor: pointer; 157 | opacity: .8; 158 | transition: opacity .2s; 159 | } 160 | 161 | .jBox-image-download-button-wrapper:hover { 162 | opacity: 1; 163 | } 164 | 165 | .jBox-image-download-button-icon { 166 | width: 40px; 167 | height: 40px; 168 | background: center center no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDE2IDI1NnYtMTkyaC0xOTJ2MTkyaC0xNjBsMjU2IDI1NiAyNTYtMjU2aC0xNjB6TTAgNTc2aDY0MHY2NGgtNjQwdi02NHoiPjwvcGF0aD48L3N2Zz4=); 169 | background-size: 60%; 170 | } 171 | 172 | .jBox-image-download-button-text { 173 | white-space: nowrap; 174 | line-height: 40px; 175 | padding: 0 10px 0 0; 176 | color: #fff; 177 | font-size: 14px; 178 | } 179 | 180 | @keyframes jBoxImageLoading { 181 | to { 182 | transform: rotate(360deg); 183 | } 184 | } 185 | 186 | .jBox-image-loading:before { 187 | content: ''; 188 | position: absolute; 189 | top: 50%; 190 | left: 50%; 191 | width: 32px; 192 | height: 32px; 193 | margin-top: -16px; 194 | margin-left: -16px; 195 | border: 4px solid #333; 196 | border-bottom-color: #666; 197 | animation: jBoxImageLoading 1.2s linear infinite; 198 | border-radius: 50%; 199 | } 200 | 201 | /*# sourceMappingURL=jBox.Image.css.map */ 202 | -------------------------------------------------------------------------------- /dist/plugins/jBox.Image.min.css: -------------------------------------------------------------------------------- 1 | .jBox-Image .jBox-container{background-color:transparent}.jBox-Image .jBox-content{padding:0;width:100%;height:100%}.jBox-image-container{background:center center no-repeat;position:absolute;width:100%;height:100%;opacity:0}.jBox-image-label-wrapper{position:absolute;top:100%;left:0;right:0;height:40px;z-index:100;display:flex}.jBox-image-label-container{position:relative;flex:1}.jBox-image-label{box-sizing:border-box;position:absolute;left:0;bottom:0;width:100%;text-align:center;color:#fff;padding:8px 12px;font-size:15px;line-height:24px;transition:opacity .36s;opacity:0;z-index:0;pointer-events:none}.jBox-image-label.expanded{background:#000}.jBox-image-label:not(.expanded){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.jBox-image-label.active{opacity:1;pointer-events:all}@media (max-width:600px){.jBox-image-label{font-size:13px}}.jBox-image-pointer-next,.jBox-image-pointer-prev{flex-shrink:0;width:40px;height:40px;cursor:pointer;opacity:.8;transition:opacity .2s;background:no-repeat center center url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ijc0LjcgMjI0IDE4LjcgMzIiPg0KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTkzLDIyNy40TDgwLjQsMjQwTDkzLDI1Mi42YzAuNCwwLjQsMC40LDEuMSwwLDEuNWwtMS42LDEuNmMtMC40LDAuNC0xLDAuNS0xLjUsMEw3NSwyNDAuN2MtMC40LTAuNC0wLjUtMSwwLTEuNWwxNC45LTE0LjljMC40LTAuNCwxLTAuNCwxLjUsMGwxLjYsMS42QzkzLjUsMjI2LjQsOTMuNCwyMjcsOTMsMjI3LjR6Ii8+DQo8L3N2Zz4=);background-size:11px auto;user-select:none;z-index:1}.jBox-image-pointer-next:hover,.jBox-image-pointer-prev:hover{opacity:1}.jBox-image-pointer-next{transform:scaleX(-1)}.jBox-image-counter-container{flex-shrink:0;white-space:nowrap;height:40px;line-height:40px;font-size:13px;color:#fff;text-align:right;display:none}.jBox-image-has-counter .jBox-image-counter-container{display:block}.jBox-overlay.jBox-overlay-Image{background:#000}.jBox-image-not-found{background:#000}.jBox-image-not-found:before{content:'';box-sizing:border-box;display:block;width:80px;height:80px;margin-top:-40px;margin-left:-40px;position:absolute;top:50%;left:50%;border:5px solid #222;border-radius:50%}.jBox-image-not-found:after{content:'';display:block;box-sizing:content-box;z-index:auto;width:6px;height:74px;margin-top:-37px;margin-left:-3px;position:absolute;top:50%;left:50%;background:#222;transform:rotateZ(45deg);transform-origin:50% 50% 0}.jBox-image-download-button-wrapper{position:absolute;top:-40px;right:35px;height:40px;display:flex;cursor:pointer;opacity:.8;transition:opacity .2s}.jBox-image-download-button-wrapper:hover{opacity:1}.jBox-image-download-button-icon{width:40px;height:40px;background:center center no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDE2IDI1NnYtMTkyaC0xOTJ2MTkyaC0xNjBsMjU2IDI1NiAyNTYtMjU2aC0xNjB6TTAgNTc2aDY0MHY2NGgtNjQwdi02NHoiPjwvcGF0aD48L3N2Zz4=);background-size:60%}.jBox-image-download-button-text{white-space:nowrap;line-height:40px;padding:0 10px 0 0;color:#fff;font-size:14px}@keyframes jBoxImageLoading{to{transform:rotate(360deg)}}.jBox-image-loading:before{content:'';position:absolute;top:50%;left:50%;width:32px;height:32px;margin-top:-16px;margin-left:-16px;border:4px solid #333;border-bottom-color:#666;animation:jBoxImageLoading 1.2s linear infinite;border-radius:50%} -------------------------------------------------------------------------------- /dist/plugins/jBox.Image.min.js: -------------------------------------------------------------------------------- 1 | function jBoxImageWrapper(t,s){new t.plugin("Image",{src:"href",gallery:"data-jbox-image",imageLabel:"title",imageFade:360,imageSize:"contain",imageCounter:!1,imageCounterSeparator:"/",downloadButton:!1,downloadButtonText:null,downloadButtonUrl:null,mobileImageAttr:null,mobileImageBreakpoint:null,preloadFirstImage:!1,target:window,attach:"[data-jbox-image]",fixed:!0,blockScroll:!0,closeOnEsc:!0,closeOnClick:"button",closeButton:!0,overlay:!0,animation:"zoomIn",preventDefault:!0,width:"100%",height:"100%",adjustDistance:{top:40,right:0,bottom:40,left:0},_onInit:function(){this.images=this.currentImage={},this.imageZIndex=1,this.initImage=function(t){var e,i;(t=s(t)).data("jBox-image-gallery")||(e=t.attr(this.options.src),this.options.mobileImageAttr&&this.options.mobileImageBreakpoint&&t.attr(this.options.mobileImageAttr)&&s(window).width()<=this.options.mobileImageBreakpoint&&(e=t.attr(this.options.mobileImageAttr)),i=t.attr(this.options.gallery)||"default",this.images[i]||(this.images[i]=[]),this.images[i].push({src:e,label:t.attr(this.options.imageLabel)||"",downloadUrl:this.options.downloadButtonUrl&&t.attr(this.options.downloadButtonUrl)?t.attr(this.options.downloadButtonUrl):null}),"title"==this.options.imageLabel&&t.removeAttr("title"),t.data("jBox-image-gallery",i),t.data("jBox-image-id",this.images[i].length-1))}.bind(this),this.attachedElements&&this.attachedElements.length&&s.each(this.attachedElements,function(t,e){this.initImage(e)}.bind(this));var n=function(t,e,i,a){if(!s("#jBox-image-"+t+"-"+e).length){var o=s("
",{id:"jBox-image-"+t+"-"+e,class:"jBox-image-container"+(i?" jBox-image-"+t+"-current":"")}).css({backgroundSize:this.options.imageSize,opacity:a?1:0,zIndex:i?this.imageZIndex++:0}).appendTo(this.content);return this.swipeDetector(o).on("swipeLeft.sd swipeRight.sd",function(t){"swipeLeft"===t.type?this.showImage("next"):"swipeRight"===t.type&&this.showImage("prev")}.bind(this)),s("
",{id:"jBox-image-label-"+t+"-"+e,class:"jBox-image-label"+(i?" active":"")}).html(this.images[t][e].label).on("click tap",function(){s(this).toggleClass("expanded")}).appendTo(this.imageLabelContainer),i&&o.animate({opacity:1},a?0:this.options.imageFade),o}}.bind(this);this.downloadImage=function(t){var e=document.createElement("a");e.href=t,e.setAttribute("download",t.substring(t.lastIndexOf("/")+1)),document.body.appendChild(e),e.click()};var o=function(e,i,t,a){var o=n(e,i,t,a);o.addClass("jBox-image-loading"),s('').each(function(){var t=new Image;t.onload=function(){o.removeClass("jBox-image-loading"),o.css({backgroundImage:'url("'+this.images[e][i].src+'")'})}.bind(this),t.onerror=function(){o.removeClass("jBox-image-loading"),o.addClass("jBox-image-not-found")}.bind(this),t.src=this.images[e][i].src}.bind(this))}.bind(this);this.showImage=function(t){var e,i,a;if("open"!=t)e=this.currentImage.gallery,a=(a=this.currentImage.id+(+("prev"==t)?-1:1))>this.images[e].length-1?0:a<0?this.images[e].length-1:a;else{if(this.source)e=this.source.data("jBox-image-gallery"),a=this.source.data("jBox-image-id");else{if(!this.attachedElements||!this.attachedElements.length)return;e=s(this.attachedElements[0]).data("jBox-image-gallery"),a=s(this.attachedElements[0]).data("jBox-image-id")}this.images&&this.images[e]&&s(".jBox-image-pointer-prev, .jBox-image-pointer-next").css({display:1this.images[e].length-1?0:a<0?this.images[e].length-1:a,s("#jBox-image-"+e+"-"+a).length||o(e,a,!1,!1))},this.options.preloadFirstImage&&s(window).on("load",function(){this.showImage("open")}.bind(this))},_onAttach:function(t){this.initImage&&this.initImage(t)},_onCreated:function(){this.imageLabelWrapper=s('
').appendTo(this.wrapper),this.imagePrevButton=s('
').on("click tap",function(){this.showImage("prev")}.bind(this)),this.imageNextButton=s('
').on("click tap",function(){this.showImage("next")}.bind(this)),this.imageLabelContainer=s('
'),this.imageLabelWrapper.append(this.imagePrevButton).append(this.imageLabelContainer).append(this.imageNextButton),this.options.downloadButton&&(this.downloadButton=s("
",{class:"jBox-image-download-button-wrapper"}).appendTo(this.wrapper).append(this.options.downloadButtonText?s("
",{class:"jBox-image-download-button-text"}).html(this.options.downloadButtonText):null).append(s("
",{class:"jBox-image-download-button-icon"})).on("click tap",function(){var t;t=this.images[this.currentImage.gallery][this.currentImage.id].downloadUrl||this.wrapper.find(".jBox-image-"+this.currentImage.gallery+"-current")[0].style.backgroundImage.slice(4,-1).replace(/["']/g,""),this.downloadImage(t)}.bind(this))),this.options.imageCounter&&(this.imageCounter=s("
",{class:"jBox-image-counter-container"}).insertAfter(this.imageLabelContainer),this.imageCounter.append(s("",{class:"jBox-image-counter-current"})).append(s("").html(this.options.imageCounterSeparator)).append(s("",{class:"jBox-image-counter-all"})))},_onOpen:function(){s(document).on("keyup.jBox-Image-"+this.id,function(t){37==t.keyCode&&this.showImage("prev"),39==t.keyCode&&this.showImage("next")}.bind(this)),this.showImage("open")},_onClose:function(){s(document).off("keyup.jBox-Image-"+this.id)},_onCloseComplete:function(){this.wrapper.find(".jBox-image-container").css("opacity",0)}})} -------------------------------------------------------------------------------- /dist/plugins/jBox.Notice.css: -------------------------------------------------------------------------------- 1 | .jBox-Notice { 2 | transition: margin .2s; 3 | } 4 | 5 | .jBox-Notice .jBox-container { 6 | border-radius: 4px; 7 | box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.25), inset -1px -1px 0 0 rgba(0, 0, 0, 0.1); 8 | } 9 | 10 | .jBox-Notice .jBox-content { 11 | border-radius: 4px; 12 | padding: 12px 20px; 13 | } 14 | 15 | @media (max-width: 768px) { 16 | .jBox-Notice .jBox-content { 17 | padding: 10px 15px; 18 | } 19 | } 20 | 21 | @media (max-width: 500px) { 22 | .jBox-Notice .jBox-content { 23 | padding: 8px 10px; 24 | } 25 | } 26 | 27 | .jBox-Notice.jBox-hasTitle .jBox-content { 28 | padding-top: 5px; 29 | } 30 | 31 | @media (max-width: 500px) { 32 | .jBox-Notice.jBox-hasTitle .jBox-content { 33 | padding-top: 0; 34 | } 35 | } 36 | 37 | .jBox-Notice.jBox-hasTitle .jBox-title { 38 | padding: 12px 20px 0; 39 | font-weight: bold; 40 | } 41 | 42 | @media (max-width: 768px) { 43 | .jBox-Notice.jBox-hasTitle .jBox-title { 44 | padding: 10px 15px 0; 45 | } 46 | } 47 | 48 | @media (max-width: 500px) { 49 | .jBox-Notice.jBox-hasTitle .jBox-title { 50 | padding: 8px 10px 0; 51 | } 52 | } 53 | 54 | .jBox-Notice.jBox-closeButton-title .jBox-title { 55 | padding-right: 55px; 56 | } 57 | 58 | .jBox-Notice.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton { 59 | width: 40px; 60 | } 61 | 62 | .jBox-Notice.jBox-Notice-black .jBox-container { 63 | color: #fff; 64 | background: #000; 65 | } 66 | 67 | .jBox-Notice.jBox-Notice-black.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path, 68 | .jBox-Notice.jBox-Notice-black.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path { 69 | fill: #fff; 70 | } 71 | 72 | .jBox-Notice.jBox-Notice-gray .jBox-container { 73 | color: #222; 74 | background: #f6f6f6; 75 | } 76 | 77 | .jBox-Notice.jBox-Notice-gray.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path, 78 | .jBox-Notice.jBox-Notice-gray.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path { 79 | fill: #222; 80 | } 81 | 82 | .jBox-Notice.jBox-Notice-red .jBox-container { 83 | color: #fff; 84 | background: #d00; 85 | } 86 | 87 | .jBox-Notice.jBox-Notice-red.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path, 88 | .jBox-Notice.jBox-Notice-red.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path { 89 | fill: #fff; 90 | } 91 | 92 | .jBox-Notice.jBox-Notice-green .jBox-container { 93 | color: #fff; 94 | background: #5d0; 95 | } 96 | 97 | .jBox-Notice.jBox-Notice-green.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path, 98 | .jBox-Notice.jBox-Notice-green.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path { 99 | fill: #fff; 100 | } 101 | 102 | .jBox-Notice.jBox-Notice-blue .jBox-container { 103 | color: #fff; 104 | background: #49d; 105 | } 106 | 107 | .jBox-Notice.jBox-Notice-blue.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path, 108 | .jBox-Notice.jBox-Notice-blue.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path { 109 | fill: #fff; 110 | } 111 | 112 | .jBox-Notice.jBox-Notice-yellow .jBox-container { 113 | color: #000; 114 | background: #fd0; 115 | } 116 | 117 | .jBox-Notice.jBox-Notice-yellow.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path, 118 | .jBox-Notice.jBox-Notice-yellow.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path { 119 | fill: #fff; 120 | } 121 | 122 | /*# sourceMappingURL=jBox.Notice.css.map */ 123 | -------------------------------------------------------------------------------- /dist/plugins/jBox.Notice.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jBox Notice plugin: Opens a popup notice 3 | * 4 | * Author: Stephan Wagner (https://stephanwagner.me) 5 | * 6 | * License: MIT (https://opensource.org/licenses/MIT) 7 | * 8 | * Requires: jBox (https://cdn.jsdelivr.net/gh/StephanWagner/jBox@latest/dist/jBox.min.js) 9 | */ 10 | 11 | function jBoxNoticeWrapper(jBox, jQuery) { 12 | 13 | new jBox.plugin('Notice', { 14 | 15 | 16 | // Options (https://stephanwagner.me/jBox/options#options-notice) 17 | 18 | color: null, // Add a color to your notices, use 'gray' (default), 'black', 'red', 'green', 'blue' or 'yellow' 19 | stack: true, // Set to false to disable notice-stacking 20 | stackSpacing: 10, // Spacing between notices when they stack 21 | autoClose: 6000, // Time in ms after which the notice will disappear 22 | attributes: { // Defines where the notice will pop up 23 | x: 'right', // 'left' or 'right' 24 | y: 'top' // 'top' or 'bottom' 25 | }, 26 | position: { // Defines the distance to the viewport boundary 27 | x: 15, 28 | y: 15 29 | }, 30 | responsivePositions: { // Responsive positions 31 | 500: { // The key defines the maximum width of the viewport, the values will replace the default position options 32 | x: 5, // Start with the lowest viewport 33 | y: 5 34 | }, 35 | 768: { 36 | x: 10, 37 | y: 10 38 | } 39 | }, 40 | target: window, 41 | fixed: true, 42 | animation: 'zoomIn', 43 | closeOnClick: 'box', 44 | zIndex: 12000, 45 | 46 | 47 | // Triggered when notice is initialized 48 | 49 | _onInit: function () 50 | { 51 | // Cache position values 52 | this.defaultNoticePosition = jQuery.extend({}, this.options.position); 53 | 54 | // Type Notice has its own adjust position function 55 | this._adjustNoticePositon = function () { 56 | var win = jQuery(window); 57 | var windowDimensions = { 58 | x: win.width(), 59 | y: win.height() 60 | }; 61 | 62 | // Reset default position 63 | this.options.position = jQuery.extend({}, this.defaultNoticePosition); 64 | 65 | // Adjust depending on viewport 66 | jQuery.each(this.options.responsivePositions, function (viewport, position) { 67 | if (windowDimensions.x <= viewport) { 68 | this.options.position = position; 69 | return false; 70 | } 71 | }.bind(this)); 72 | 73 | // Set new padding options 74 | this.options.adjustDistance = { 75 | top: this.options.position.y, 76 | right: this.options.position.x, 77 | bottom: this.options.position.y, 78 | left: this.options.position.x 79 | }; 80 | }; 81 | 82 | // If jBox grabs an element as content, crab a clone instead 83 | this.options.content instanceof jQuery && (this.options.content = this.options.content.clone().attr('id', '')); 84 | 85 | // Adjust paddings when window resizes 86 | jQuery(window).on('resize.responsivejBoxNotice-' + this.id, function (ev) { if (this.isOpen) { this._adjustNoticePositon(); } }.bind(this)); 87 | 88 | this.open(); 89 | }, 90 | 91 | 92 | // Triggered when notice was created 93 | 94 | _onCreated: function () 95 | { 96 | // Add color class 97 | this.wrapper.addClass('jBox-Notice-color jBox-Notice-' + (this.options.color || 'gray')); 98 | 99 | // Store position in jBox wrapper 100 | this.wrapper.data('jBox-Notice-position', this.options.attributes.x + '-' + this.options.attributes.y); 101 | }, 102 | 103 | 104 | // Triggered when notice opens 105 | 106 | _onOpen: function () 107 | { 108 | // Bail if we're stacking 109 | if (this.options.stack) { 110 | return; 111 | } 112 | 113 | // Adjust position when opening 114 | this._adjustNoticePositon(); 115 | 116 | // Loop through notices at same window corner destroy them 117 | jQuery.each(jQuery('.jBox-Notice'), function (index, el) 118 | { 119 | el = jQuery(el); 120 | 121 | // Abort if the element is this notice or when it's not at the same position 122 | if (el.attr('id') == this.id || el.data('jBox-Notice-position') != this.options.attributes.x + '-' + this.options.attributes.y) { 123 | return; 124 | } 125 | 126 | // Remove notice when we don't wont to stack them 127 | if (!this.options.stack) { 128 | el.data('jBox').close({ignoreDelay: true}); 129 | return; 130 | } 131 | }.bind(this)); 132 | }, 133 | 134 | // Triggered when resizing window etc. 135 | 136 | _onPosition: function () 137 | { 138 | var stacks = {}; 139 | jQuery.each(jQuery('.jBox-Notice'), function (index, el) 140 | { 141 | el = jQuery(el); 142 | var pos = el.data('jBox-Notice-position'); 143 | if (!stacks[pos]) { 144 | stacks[pos] = []; 145 | } 146 | stacks[pos].push(el); 147 | }); 148 | for (var pos in stacks) { 149 | var position = pos.split('-'); 150 | var direction = position[1]; 151 | stacks[pos].reverse(); 152 | var margin = 0; 153 | for (var i in stacks[pos]) { 154 | var el = jQuery(stacks[pos][i]); 155 | el.css('margin-' + direction, margin); 156 | margin += el.outerHeight() + this.options.stackSpacing; 157 | } 158 | } 159 | }, 160 | 161 | // Remove notice from DOM and reposition other notices when closing finishes 162 | 163 | _onCloseComplete: function () 164 | { 165 | this.destroy(); 166 | this.options._onPosition.bind(this).call(); 167 | } 168 | 169 | }); 170 | 171 | }; 172 | 173 | //# sourceMappingURL=jBox.Notice.js.map 174 | -------------------------------------------------------------------------------- /dist/plugins/jBox.Notice.min.css: -------------------------------------------------------------------------------- 1 | .jBox-Notice{transition:margin .2s}.jBox-Notice .jBox-container{border-radius:4px;box-shadow:inset 1px 1px 0 0 rgba(255,255,255,.25),inset -1px -1px 0 0 rgba(0,0,0,.1)}.jBox-Notice .jBox-content{border-radius:4px;padding:12px 20px}@media (max-width:768px){.jBox-Notice .jBox-content{padding:10px 15px}}@media (max-width:500px){.jBox-Notice .jBox-content{padding:8px 10px}}.jBox-Notice.jBox-hasTitle .jBox-content{padding-top:5px}@media (max-width:500px){.jBox-Notice.jBox-hasTitle .jBox-content{padding-top:0}}.jBox-Notice.jBox-hasTitle .jBox-title{padding:12px 20px 0;font-weight:700}@media (max-width:768px){.jBox-Notice.jBox-hasTitle .jBox-title{padding:10px 15px 0}}@media (max-width:500px){.jBox-Notice.jBox-hasTitle .jBox-title{padding:8px 10px 0}}.jBox-Notice.jBox-closeButton-title .jBox-title{padding-right:55px}.jBox-Notice.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton{width:40px}.jBox-Notice.jBox-Notice-black .jBox-container{color:#fff;background:#000}.jBox-Notice.jBox-Notice-black.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path,.jBox-Notice.jBox-Notice-black.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path{fill:#fff}.jBox-Notice.jBox-Notice-gray .jBox-container{color:#222;background:#f6f6f6}.jBox-Notice.jBox-Notice-gray.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path,.jBox-Notice.jBox-Notice-gray.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path{fill:#222}.jBox-Notice.jBox-Notice-red .jBox-container{color:#fff;background:#d00}.jBox-Notice.jBox-Notice-red.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path,.jBox-Notice.jBox-Notice-red.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path{fill:#fff}.jBox-Notice.jBox-Notice-green .jBox-container{color:#fff;background:#5d0}.jBox-Notice.jBox-Notice-green.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path,.jBox-Notice.jBox-Notice-green.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path{fill:#fff}.jBox-Notice.jBox-Notice-blue .jBox-container{color:#fff;background:#49d}.jBox-Notice.jBox-Notice-blue.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path,.jBox-Notice.jBox-Notice-blue.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path{fill:#fff}.jBox-Notice.jBox-Notice-yellow .jBox-container{color:#000;background:#fd0}.jBox-Notice.jBox-Notice-yellow.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path,.jBox-Notice.jBox-Notice-yellow.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path{fill:#fff} -------------------------------------------------------------------------------- /dist/plugins/jBox.Notice.min.js: -------------------------------------------------------------------------------- 1 | function jBoxNoticeWrapper(t,a){new t.plugin("Notice",{color:null,stack:!0,stackSpacing:10,autoClose:6e3,attributes:{x:"right",y:"top"},position:{x:15,y:15},responsivePositions:{500:{x:5,y:5},768:{x:10,y:10}},target:window,fixed:!0,animation:"zoomIn",closeOnClick:"box",zIndex:12e3,_onInit:function(){this.defaultNoticePosition=a.extend({},this.options.position),this._adjustNoticePositon=function(){var t=a(window),o=t.width();t.height();this.options.position=a.extend({},this.defaultNoticePosition),a.each(this.options.responsivePositions,function(t,i){if(o<=t)return this.options.position=i,!1}.bind(this)),this.options.adjustDistance={top:this.options.position.y,right:this.options.position.x,bottom:this.options.position.y,left:this.options.position.x}},this.options.content instanceof a&&(this.options.content=this.options.content.clone().attr("id","")),a(window).on("resize.responsivejBoxNotice-"+this.id,function(t){this.isOpen&&this._adjustNoticePositon()}.bind(this)),this.open()},_onCreated:function(){this.wrapper.addClass("jBox-Notice-color jBox-Notice-"+(this.options.color||"gray")),this.wrapper.data("jBox-Notice-position",this.options.attributes.x+"-"+this.options.attributes.y)},_onOpen:function(){this.options.stack||(this._adjustNoticePositon(),a.each(a(".jBox-Notice"),function(t,i){(i=a(i)).attr("id")!=this.id&&i.data("jBox-Notice-position")==this.options.attributes.x+"-"+this.options.attributes.y&&(this.options.stack||i.data("jBox").close({ignoreDelay:!0}))}.bind(this)))},_onPosition:function(){var t,s={};for(t in a.each(a(".jBox-Notice"),function(t,i){var o=(i=a(i)).data("jBox-Notice-position");s[o]||(s[o]=[]),s[o].push(i)}),s){var i=t.split("-")[1];s[t].reverse();var o,n=0;for(o in s[t]){var e=a(s[t][o]);e.css("margin-"+i,n),n+=e.outerHeight()+this.options.stackSpacing}}},_onCloseComplete:function(){this.destroy(),this.options._onPosition.bind(this).call()}})} -------------------------------------------------------------------------------- /dist/themes/jBox.NoticeFancy.css: -------------------------------------------------------------------------------- 1 | .jBox-NoticeFancy .jBox-content, 2 | .jBox-NoticeFancy .jBox-title { 3 | padding-left: 25px; 4 | } 5 | 6 | .jBox-NoticeFancy.jBox-Notice-color .jBox-container { 7 | color: #fff; 8 | background: #000; 9 | } 10 | 11 | .jBox-NoticeFancy.jBox-Notice-color .jBox-container:after { 12 | content: ''; 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | bottom: 0; 17 | width: 8px; 18 | border-radius: 4px 0 0 4px; 19 | background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); 20 | background-size: 14px 14px; 21 | } 22 | 23 | .jBox-NoticeFancy.jBox-Notice-black .jBox-container:after, 24 | .jBox-NoticeFancy.jBox-Notice-gray .jBox-container:after { 25 | background-color: #888; 26 | } 27 | 28 | .jBox-NoticeFancy.jBox-Notice-red .jBox-container:after { 29 | background-color: #e00; 30 | } 31 | 32 | .jBox-NoticeFancy.jBox-Notice-green .jBox-container:after { 33 | background-color: #6c0; 34 | } 35 | 36 | .jBox-NoticeFancy.jBox-Notice-blue .jBox-container:after { 37 | background-color: #49d; 38 | } 39 | 40 | .jBox-NoticeFancy.jBox-Notice-yellow .jBox-container:after { 41 | background-color: #fb0; 42 | } 43 | 44 | .jBox-NoticeFancy .jBox-countdown { 45 | left: 8px; 46 | border-radius: 0 4px 0 0; 47 | } 48 | 49 | /*# sourceMappingURL=jBox.NoticeFancy.css.map */ 50 | -------------------------------------------------------------------------------- /dist/themes/jBox.NoticeFancy.min.css: -------------------------------------------------------------------------------- 1 | .jBox-NoticeFancy .jBox-content,.jBox-NoticeFancy .jBox-title{padding-left:25px}.jBox-NoticeFancy.jBox-Notice-color .jBox-container{color:#fff;background:#000}.jBox-NoticeFancy.jBox-Notice-color .jBox-container:after{content:'';position:absolute;top:0;left:0;bottom:0;width:8px;border-radius:4px 0 0 4px;background-image:linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);background-size:14px 14px}.jBox-NoticeFancy.jBox-Notice-black .jBox-container:after,.jBox-NoticeFancy.jBox-Notice-gray .jBox-container:after{background-color:#888}.jBox-NoticeFancy.jBox-Notice-red .jBox-container:after{background-color:#e00}.jBox-NoticeFancy.jBox-Notice-green .jBox-container:after{background-color:#6c0}.jBox-NoticeFancy.jBox-Notice-blue .jBox-container:after{background-color:#49d}.jBox-NoticeFancy.jBox-Notice-yellow .jBox-container:after{background-color:#fb0}.jBox-NoticeFancy .jBox-countdown{left:8px;border-radius:0 4px 0 0} -------------------------------------------------------------------------------- /dist/themes/jBox.TooltipBorder.css: -------------------------------------------------------------------------------- 1 | .jBox-TooltipBorder .jBox-container, 2 | .jBox-TooltipBorder .jBox-pointer:after { 3 | border: 2px solid #49d; 4 | } 5 | 6 | .jBox-TooltipBorder .jBox-pointer:after { 7 | width: 22px; 8 | height: 22px; 9 | } 10 | 11 | .jBox-TooltipBorder .jBox-pointer-top, 12 | .jBox-TooltipBorder .jBox-pointer-bottom { 13 | width: 34px; 14 | height: 13px; 15 | } 16 | 17 | .jBox-TooltipBorder .jBox-pointer-top:after, 18 | .jBox-TooltipBorder .jBox-pointer-bottom:after { 19 | left: 6px; 20 | } 21 | 22 | .jBox-TooltipBorder .jBox-pointer-left, 23 | .jBox-TooltipBorder .jBox-pointer-right { 24 | width: 13px; 25 | height: 34px; 26 | } 27 | 28 | .jBox-TooltipBorder .jBox-pointer-left:after, 29 | .jBox-TooltipBorder .jBox-pointer-right:after { 30 | top: 6px; 31 | } 32 | 33 | .jBox-TooltipBorder.jBox-closeButton-box:before { 34 | width: 28px; 35 | height: 28px; 36 | background: #49d; 37 | } 38 | 39 | /*# sourceMappingURL=jBox.TooltipBorder.css.map */ 40 | -------------------------------------------------------------------------------- /dist/themes/jBox.TooltipBorder.min.css: -------------------------------------------------------------------------------- 1 | .jBox-TooltipBorder .jBox-container,.jBox-TooltipBorder .jBox-pointer:after{border:2px solid #49d}.jBox-TooltipBorder .jBox-pointer:after{width:22px;height:22px}.jBox-TooltipBorder .jBox-pointer-bottom,.jBox-TooltipBorder .jBox-pointer-top{width:34px;height:13px}.jBox-TooltipBorder .jBox-pointer-bottom:after,.jBox-TooltipBorder .jBox-pointer-top:after{left:6px}.jBox-TooltipBorder .jBox-pointer-left,.jBox-TooltipBorder .jBox-pointer-right{width:13px;height:34px}.jBox-TooltipBorder .jBox-pointer-left:after,.jBox-TooltipBorder .jBox-pointer-right:after{top:6px}.jBox-TooltipBorder.jBox-closeButton-box:before{width:28px;height:28px;background:#49d} -------------------------------------------------------------------------------- /dist/themes/jBox.TooltipBorderThick.css: -------------------------------------------------------------------------------- 1 | .jBox-TooltipBorderThick .jBox-container { 2 | box-shadow: none; 3 | border-radius: 8px; 4 | border: 4px solid #ccc; 5 | } 6 | 7 | .jBox-TooltipBorderThick .jBox-pointer:after { 8 | box-shadow: none; 9 | border: 4px solid #ccc; 10 | width: 24px; 11 | height: 24px; 12 | } 13 | 14 | .jBox-TooltipBorderThick .jBox-pointer-top, 15 | .jBox-TooltipBorderThick .jBox-pointer-bottom { 16 | width: 38px; 17 | height: 13px; 18 | } 19 | 20 | .jBox-TooltipBorderThick .jBox-pointer-left, 21 | .jBox-TooltipBorderThick .jBox-pointer-right { 22 | width: 13px; 23 | height: 38px; 24 | } 25 | 26 | .jBox-TooltipBorderThick.jBox-closeButton-box:before { 27 | width: 32px; 28 | height: 32px; 29 | background: #ccc; 30 | } 31 | 32 | /*# sourceMappingURL=jBox.TooltipBorderThick.css.map */ 33 | -------------------------------------------------------------------------------- /dist/themes/jBox.TooltipBorderThick.min.css: -------------------------------------------------------------------------------- 1 | .jBox-TooltipBorderThick .jBox-container{box-shadow:none;border-radius:8px;border:4px solid #ccc}.jBox-TooltipBorderThick .jBox-pointer:after{box-shadow:none;border:4px solid #ccc;width:24px;height:24px}.jBox-TooltipBorderThick .jBox-pointer-bottom,.jBox-TooltipBorderThick .jBox-pointer-top{width:38px;height:13px}.jBox-TooltipBorderThick .jBox-pointer-left,.jBox-TooltipBorderThick .jBox-pointer-right{width:13px;height:38px}.jBox-TooltipBorderThick.jBox-closeButton-box:before{width:32px;height:32px;background:#ccc} -------------------------------------------------------------------------------- /dist/themes/jBox.TooltipDark.css: -------------------------------------------------------------------------------- 1 | .jBox-TooltipDark .jBox-container { 2 | border-radius: 4px; 3 | background: #000; 4 | color: #fff; 5 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); 6 | } 7 | 8 | .jBox-TooltipDark .jBox-pointer:after { 9 | background: #000; 10 | } 11 | 12 | .jBox-TooltipDark .jBox-closeButton { 13 | background: #000; 14 | } 15 | 16 | .jBox-TooltipDark.jBox-closeButton-box:before { 17 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); 18 | } 19 | 20 | .jBox-TooltipDark.jBox-closeButton-box .jBox-closeButton path { 21 | fill: #ddd; 22 | } 23 | 24 | .jBox-TooltipDark.jBox-closeButton-box .jBox-closeButton:hover path { 25 | fill: #fff; 26 | } 27 | 28 | .jBox-TooltipDark.jBox-closeButton-box .jBox-closeButton:active path { 29 | fill: #bbb; 30 | } 31 | 32 | /*# sourceMappingURL=jBox.TooltipDark.css.map */ 33 | -------------------------------------------------------------------------------- /dist/themes/jBox.TooltipDark.min.css: -------------------------------------------------------------------------------- 1 | .jBox-TooltipDark .jBox-container{border-radius:4px;background:#000;color:#fff;box-shadow:0 0 6px rgba(0,0,0,.4)}.jBox-TooltipDark .jBox-pointer:after{background:#000}.jBox-TooltipDark .jBox-closeButton{background:#000}.jBox-TooltipDark.jBox-closeButton-box:before{box-shadow:0 0 6px rgba(0,0,0,.4)}.jBox-TooltipDark.jBox-closeButton-box .jBox-closeButton path{fill:#ddd}.jBox-TooltipDark.jBox-closeButton-box .jBox-closeButton:hover path{fill:#fff}.jBox-TooltipDark.jBox-closeButton-box .jBox-closeButton:active path{fill:#bbb} -------------------------------------------------------------------------------- /dist/themes/jBox.TooltipError.css: -------------------------------------------------------------------------------- 1 | .jBox-TooltipError { 2 | pointer-events: none; 3 | } 4 | 5 | .jBox-TooltipError .jBox-container { 6 | border-radius: 2px; 7 | background: #d00; 8 | color: #fff; 9 | font-weight: bold; 10 | font-size: 13px; 11 | } 12 | 13 | .jBox-TooltipError .jBox-content { 14 | padding: 0 10px; 15 | line-height: 28px; 16 | } 17 | 18 | .jBox-TooltipError .jBox-pointer:after { 19 | background: #d00; 20 | width: 20px; 21 | height: 20px; 22 | } 23 | 24 | .jBox-TooltipError .jBox-pointer-top, .jBox-TooltipError .jBox-pointer-bottom { 25 | width: 22px; 26 | height: 8px; 27 | } 28 | 29 | .jBox-TooltipError .jBox-pointer-right, .jBox-TooltipError .jBox-pointer-left { 30 | width: 8px; 31 | height: 22px; 32 | } 33 | 34 | .jBox-TooltipError .jBox-pointer-top:after { 35 | left: 1px; 36 | top: 6px; 37 | } 38 | 39 | .jBox-TooltipError .jBox-pointer-right:after { 40 | top: 1px; 41 | right: 6px; 42 | } 43 | 44 | .jBox-TooltipError .jBox-pointer-bottom:after { 45 | left: 1px; 46 | bottom: 6px; 47 | } 48 | 49 | .jBox-TooltipError .jBox-pointer-left:after { 50 | top: 1px; 51 | left: 6px; 52 | } 53 | 54 | /*# sourceMappingURL=jBox.TooltipError.css.map */ 55 | -------------------------------------------------------------------------------- /dist/themes/jBox.TooltipError.min.css: -------------------------------------------------------------------------------- 1 | .jBox-TooltipError{pointer-events:none}.jBox-TooltipError .jBox-container{border-radius:2px;background:#d00;color:#fff;font-weight:700;font-size:13px}.jBox-TooltipError .jBox-content{padding:0 10px;line-height:28px}.jBox-TooltipError .jBox-pointer:after{background:#d00;width:20px;height:20px}.jBox-TooltipError .jBox-pointer-bottom,.jBox-TooltipError .jBox-pointer-top{width:22px;height:8px}.jBox-TooltipError .jBox-pointer-left,.jBox-TooltipError .jBox-pointer-right{width:8px;height:22px}.jBox-TooltipError .jBox-pointer-top:after{left:1px;top:6px}.jBox-TooltipError .jBox-pointer-right:after{top:1px;right:6px}.jBox-TooltipError .jBox-pointer-bottom:after{left:1px;bottom:6px}.jBox-TooltipError .jBox-pointer-left:after{top:1px;left:6px} -------------------------------------------------------------------------------- /dist/themes/jBox.TooltipSmall.css: -------------------------------------------------------------------------------- 1 | .jBox-TooltipSmall { 2 | pointer-events: none; 3 | } 4 | 5 | .jBox-TooltipSmall .jBox-container { 6 | border-radius: 2px; 7 | } 8 | 9 | .jBox-TooltipSmall .jBox-content { 10 | padding: 0 10px; 11 | line-height: 28px; 12 | } 13 | 14 | .jBox-TooltipSmall .jBox-pointer:after { 15 | width: 20px; 16 | height: 20px; 17 | } 18 | 19 | .jBox-TooltipSmall .jBox-pointer-top, .jBox-TooltipSmall .jBox-pointer-bottom { 20 | width: 22px; 21 | height: 8px; 22 | } 23 | 24 | .jBox-TooltipSmall .jBox-pointer-right, .jBox-TooltipSmall .jBox-pointer-left { 25 | width: 8px; 26 | height: 22px; 27 | } 28 | 29 | .jBox-TooltipSmall .jBox-pointer-top:after { 30 | left: 1px; 31 | top: 6px; 32 | } 33 | 34 | .jBox-TooltipSmall .jBox-pointer-right:after { 35 | top: 1px; 36 | right: 6px; 37 | } 38 | 39 | .jBox-TooltipSmall .jBox-pointer-bottom:after { 40 | left: 1px; 41 | bottom: 6px; 42 | } 43 | 44 | .jBox-TooltipSmall .jBox-pointer-left:after { 45 | top: 1px; 46 | left: 6px; 47 | } 48 | 49 | /*# sourceMappingURL=jBox.TooltipSmall.css.map */ 50 | -------------------------------------------------------------------------------- /dist/themes/jBox.TooltipSmall.min.css: -------------------------------------------------------------------------------- 1 | .jBox-TooltipSmall{pointer-events:none}.jBox-TooltipSmall .jBox-container{border-radius:2px}.jBox-TooltipSmall .jBox-content{padding:0 10px;line-height:28px}.jBox-TooltipSmall .jBox-pointer:after{width:20px;height:20px}.jBox-TooltipSmall .jBox-pointer-bottom,.jBox-TooltipSmall .jBox-pointer-top{width:22px;height:8px}.jBox-TooltipSmall .jBox-pointer-left,.jBox-TooltipSmall .jBox-pointer-right{width:8px;height:22px}.jBox-TooltipSmall .jBox-pointer-top:after{left:1px;top:6px}.jBox-TooltipSmall .jBox-pointer-right:after{top:1px;right:6px}.jBox-TooltipSmall .jBox-pointer-bottom:after{left:1px;bottom:6px}.jBox-TooltipSmall .jBox-pointer-left:after{top:1px;left:6px} -------------------------------------------------------------------------------- /dist/themes/jBox.TooltipSmallGray.css: -------------------------------------------------------------------------------- 1 | .jBox-TooltipSmallGray { 2 | pointer-events: none; 3 | } 4 | 5 | .jBox-TooltipSmallGray .jBox-container { 6 | font-size: 13px; 7 | line-height: 24px; 8 | border-radius: 12px; 9 | background-image: linear-gradient(to bottom, #fafafa, #f2f2f2); 10 | } 11 | 12 | .jBox-TooltipSmallGray .jBox-content { 13 | padding: 0 10px; 14 | } 15 | 16 | .jBox-TooltipSmallGray .jBox-pointer:after { 17 | width: 20px; 18 | height: 20px; 19 | } 20 | 21 | .jBox-TooltipSmallGray .jBox-pointer-top, .jBox-TooltipSmallGray .jBox-pointer-bottom { 22 | width: 22px; 23 | height: 8px; 24 | } 25 | 26 | .jBox-TooltipSmallGray .jBox-pointer-left, .jBox-TooltipSmallGray .jBox-pointer-right { 27 | width: 8px; 28 | height: 22px; 29 | } 30 | 31 | .jBox-TooltipSmallGray .jBox-pointer-top:after { 32 | background: #fafafa; 33 | left: 1px; 34 | top: 6px; 35 | } 36 | 37 | .jBox-TooltipSmallGray .jBox-pointer-right:after { 38 | top: 1px; 39 | right: 6px; 40 | } 41 | 42 | .jBox-TooltipSmallGray .jBox-pointer-bottom:after { 43 | background: #f2f2f2; 44 | left: 1px; 45 | bottom: 6px; 46 | } 47 | 48 | .jBox-TooltipSmallGray .jBox-pointer-left:after { 49 | top: 1px; 50 | left: 6px; 51 | } 52 | 53 | /*# sourceMappingURL=jBox.TooltipSmallGray.css.map */ 54 | -------------------------------------------------------------------------------- /dist/themes/jBox.TooltipSmallGray.min.css: -------------------------------------------------------------------------------- 1 | .jBox-TooltipSmallGray{pointer-events:none}.jBox-TooltipSmallGray .jBox-container{font-size:13px;line-height:24px;border-radius:12px;background-image:linear-gradient(to bottom,#fafafa,#f2f2f2)}.jBox-TooltipSmallGray .jBox-content{padding:0 10px}.jBox-TooltipSmallGray .jBox-pointer:after{width:20px;height:20px}.jBox-TooltipSmallGray .jBox-pointer-bottom,.jBox-TooltipSmallGray .jBox-pointer-top{width:22px;height:8px}.jBox-TooltipSmallGray .jBox-pointer-left,.jBox-TooltipSmallGray .jBox-pointer-right{width:8px;height:22px}.jBox-TooltipSmallGray .jBox-pointer-top:after{background:#fafafa;left:1px;top:6px}.jBox-TooltipSmallGray .jBox-pointer-right:after{top:1px;right:6px}.jBox-TooltipSmallGray .jBox-pointer-bottom:after{background:#f2f2f2;left:1px;bottom:6px}.jBox-TooltipSmallGray .jBox-pointer-left:after{top:1px;left:6px} -------------------------------------------------------------------------------- /documentation.html: -------------------------------------------------------------------------------- 1 | 2 | jBox documentation 3 | 4 | 5 | 6 | 7 | 8 | 9 | Redirecting to https://stephanwagner.me/jBox/documentation -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var sass = require('gulp-sass')(require('sass')); 3 | var cleanCSS = require('gulp-clean-css'); 4 | var concat = require('gulp-concat'); 5 | var rename = require('gulp-rename'); 6 | var uglify = require('gulp-uglify'); 7 | var sourcemaps = require('gulp-sourcemaps'); 8 | 9 | // Plugins 10 | var plugins = [ 11 | 'Confirm', 12 | 'Image', 13 | 'Notice' 14 | ]; 15 | 16 | // Themes 17 | var themes = [ 18 | 'NoticeFancy', 19 | 'TooltipBorder', 20 | 'TooltipBorderThick', 21 | 'TooltipDark', 22 | 'TooltipError', 23 | 'TooltipSmall', 24 | 'TooltipSmallGray' 25 | ]; 26 | 27 | // CSS 28 | var styles = [{ 29 | name: 'jBox', 30 | src: ['./src/scss/jBox.scss'], 31 | dest: './dist/' 32 | }, { 33 | name: 'jBox.all', 34 | src: [ 35 | './src/scss/jBox.scss', 36 | './src/scss/plugins/*.scss', 37 | './src/scss/themes/*.scss' 38 | ], 39 | dest: './dist/' 40 | }]; 41 | 42 | for (let plugin of plugins) { 43 | styles.push({ 44 | name: 'jBox.' + plugin, 45 | src: ['./src/scss/plugins/jBox.' + plugin + '.scss'], 46 | dest: './dist/plugins/' 47 | }); 48 | } 49 | 50 | for (let theme of themes) { 51 | styles.push({ 52 | name: 'jBox.' + theme, 53 | src: ['./src/scss/themes/jBox.' + theme + '.scss'], 54 | dest: './dist/themes/' 55 | }); 56 | } 57 | 58 | // JavaScript 59 | var scripts = [{ 60 | name: 'jBox', 61 | src: [ 62 | './src/js/jBox.js', 63 | './src/js/umd.js' 64 | ], 65 | dest: './dist/' 66 | }, { 67 | name: 'jBox.all', 68 | src: [ 69 | './src/js/jBox.js', 70 | './src/js/plugins/*.js', 71 | './src/js/umd.js' 72 | ], 73 | dest: './dist/' 74 | }]; 75 | 76 | for (let plugin of plugins) { 77 | scripts.push({ 78 | name: 'jBox.' + plugin, 79 | src: ['./src/js/plugins/jBox.' + plugin + '.js'], 80 | dest: './dist/plugins/' 81 | }); 82 | } 83 | 84 | // Config tasks 85 | let defaultTasks = []; 86 | let buildTasks = []; 87 | let watchTasks = []; 88 | 89 | // Config CSS tasks 90 | for (const item of styles) { 91 | 92 | // Concat CSS 93 | const cssConcat = function () { 94 | return gulp 95 | .src(item.src) 96 | .pipe(sourcemaps.init()) 97 | .pipe(sass({ 98 | outputStyle: 'expanded' 99 | }).on('error', sass.logError)) 100 | .pipe(concat(item.name + '.css')) 101 | .pipe(sourcemaps.write('./')) 102 | .pipe(gulp.dest(item.dest)); 103 | }; 104 | 105 | // Store as a task 106 | gulp.task('cssConcat-' + item.name, cssConcat); 107 | 108 | // Add to default tasks 109 | defaultTasks.push('cssConcat-' + item.name); 110 | 111 | // Add to watch tasks 112 | watchTasks.push({ 113 | src: item.src, 114 | task: cssConcat 115 | }); 116 | 117 | // Build CSS 118 | const cssBuild = function () { 119 | return gulp 120 | .src(item.dest + item.name + '.css') 121 | .pipe(rename(item.name + '.min.css')) 122 | .pipe(cleanCSS()) 123 | .pipe(gulp.dest(item.dest)); 124 | }; 125 | 126 | // Store as a task 127 | gulp.task('cssBuild-' + item.name, cssBuild); 128 | 129 | // Add to build tasks 130 | buildTasks.push('cssBuild-' + item.name); 131 | } 132 | 133 | // Config JavaScript tasks 134 | for (let item of scripts) { 135 | 136 | // Concat JavaScript 137 | const jsConcat = function () { 138 | return gulp 139 | .src(item.src) 140 | .pipe(sourcemaps.init()) 141 | .pipe(concat(item.name + '.js')) 142 | .pipe(sourcemaps.write('./')) 143 | .pipe(gulp.dest(item.dest)); 144 | }; 145 | 146 | // Store as a task 147 | gulp.task('jsConcat-' + item.name, jsConcat); 148 | 149 | // Add to default tasks 150 | defaultTasks.push('jsConcat-' + item.name); 151 | 152 | // Add to watch tasks 153 | watchTasks.push({ 154 | src: item.src, 155 | task: jsConcat 156 | }); 157 | 158 | // Build JavaScript 159 | const jsBuild = function () { 160 | return gulp 161 | .src(item.dest + item.name + '.js') 162 | .pipe(rename(item.name + '.min.js')) 163 | .pipe(uglify()) 164 | .pipe(gulp.dest(item.dest)); 165 | }; 166 | 167 | // Store as a task 168 | gulp.task('jsBuild-' + item.name, jsBuild); 169 | 170 | // Add to build tasks 171 | buildTasks.push('jsBuild-' + item.name); 172 | } 173 | 174 | // Watch tasks 175 | function watch() { 176 | for (const watchTask of watchTasks) { 177 | gulp.watch(watchTask.src, watchTask.task); 178 | } 179 | } 180 | 181 | exports.default = gulp.series(defaultTasks); 182 | exports.watch = gulp.series(defaultTasks, watch); 183 | exports.build = gulp.series(defaultTasks, buildTasks); 184 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jbox", 3 | "version": "1.3.3", 4 | "description": "jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.", 5 | "keywords": [ 6 | "jquery-plugin", 7 | "ecosystem:jquery", 8 | "tooltip", 9 | "modal", 10 | "window", 11 | "dialog", 12 | "confirm", 13 | "popup", 14 | "notice", 15 | "alert", 16 | "ui", 17 | "images", 18 | "lightbox" 19 | ], 20 | "homepage": "https://stephanwagner.me/jBox", 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/StephanWagner/jBox.git" 24 | }, 25 | "bugs": { 26 | "url": "https://github.com/StephanWagner/jBox/issues", 27 | "email": "stephanwagner.me@gmail.com" 28 | }, 29 | "author": "Stephan Wagner (https://stephanwagner.me)", 30 | "license": "MIT", 31 | "main": "dist/jBox.all.min.js", 32 | "types": "src/js/jBox.d.ts", 33 | "dependencies": { 34 | "jquery": "^3.6.0" 35 | }, 36 | "devDependencies": { 37 | "gulp": "^5.0.0", 38 | "gulp-clean-css": "^4.3.0", 39 | "gulp-concat": "^2.6.1", 40 | "gulp-rename": "^2.0.0", 41 | "gulp-sass": "^5.1.0", 42 | "gulp-sourcemaps": "^3.0.0", 43 | "gulp-uglify": "^3.0.2", 44 | "jest": "^27.0.4", 45 | "sass": "^1.49.9" 46 | }, 47 | "scripts": { 48 | "watch": "gulp watch", 49 | "build": "gulp build", 50 | "test": "jest" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/js/plugins/jBox.Confirm.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jBox Confirm plugin: Add a confirm dialog to links, buttons, etc. 3 | * 4 | * Author: Stephan Wagner (https://stephanwagner.me) 5 | * 6 | * License: MIT (https://opensource.org/licenses/MIT) 7 | * 8 | * Requires: jBox (https://cdn.jsdelivr.net/gh/StephanWagner/jBox@latest/dist/jBox.min.js) 9 | */ 10 | 11 | function jBoxConfirmWrapper(jBox, jQuery) { 12 | 13 | new jBox.plugin('Confirm', { 14 | 15 | 16 | // Options (https://stephanwagner.me/jBox/options#options-confirm) 17 | 18 | confirmButton: 'Submit', // Text for the submit button 19 | cancelButton: 'Cancel', // Text for the cancel button 20 | confirm: null, // Function to execute when clicking the submit button. By default jBox will use the onclick or href attribute in that order if found 21 | cancel: null, // Function to execute when clicking the cancel button 22 | closeOnConfirm: true, // Close jBox when the user clicks the confirm button 23 | target: window, 24 | fixed: true, 25 | attach: '[data-confirm]', 26 | getContent: 'data-confirm', 27 | content: 'Do you really want to do this?', 28 | minWidth: 360, 29 | maxWidth: 500, 30 | blockScroll: true, 31 | closeOnEsc: true, 32 | closeOnClick: false, 33 | closeButton: false, 34 | overlay: true, 35 | animation: 'zoomIn', 36 | preventDefault: true, 37 | 38 | 39 | // Triggered when jBox is attached to the element 40 | 41 | _onAttach: function (el) 42 | { 43 | // Extract the href or the onclick event if no submit event is passed 44 | if (!this.options.confirm) { 45 | var submit = el.attr('onclick') ? el.attr('onclick') : ( 46 | el.attr('href') ? ( 47 | el.attr('target') ? 'window.open("' + el.attr('href') + '", "' + el.attr('target') + '");' : 'window.location.href = "' + el.attr('href') + '";' 48 | ) : ''); 49 | el.prop('onclick', null).data('jBox-Confirm-submit', submit); 50 | } 51 | }, 52 | 53 | 54 | // Triggered when jBox was created 55 | 56 | _onCreated: function () 57 | { 58 | // Add modal class to mimic jBox modal 59 | this.wrapper.addClass('jBox-Modal'); 60 | 61 | // Add a footer to the jBox container 62 | this.footer = jQuery('
'); 63 | 64 | jQuery('
') 65 | .html(this.options.cancelButton) 66 | .on('click tap', function () { 67 | this.options.cancel && this.options.cancel(this.source); 68 | this.close(); 69 | }.bind(this)) 70 | .appendTo(this.footer); 71 | 72 | this.submitButton = jQuery('
') 73 | .html(this.options.confirmButton) 74 | .appendTo(this.footer); 75 | 76 | this.footer.appendTo(this.container); 77 | }, 78 | 79 | 80 | // Triggered when jBox is opened 81 | 82 | _onOpen: function () 83 | { 84 | // Set the new action for the submit button 85 | this.submitButton 86 | .off('click.jBox-Confirm' + this.id + ' tap.jBox-Confirm' + this.id) 87 | .on('click.jBox-Confirm' + this.id + ' tap.jBox-Confirm' + this.id, function () { 88 | this.options.confirm ? this.options.confirm(this.source) : eval(this.source.data('jBox-Confirm-submit')); 89 | this.options.closeOnConfirm && this.close(); 90 | }.bind(this)); 91 | } 92 | 93 | }); 94 | 95 | }; 96 | -------------------------------------------------------------------------------- /src/js/plugins/jBox.Image.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jBox Image plugin: Adds a lightbox to your images 3 | * 4 | * Author: Stephan Wagner (https://stephanwagner.me) 5 | * 6 | * License: MIT (https://opensource.org/licenses/MIT) 7 | * 8 | * Requires: jBox (https://cdn.jsdelivr.net/gh/StephanWagner/jBox@latest/dist/jBox.min.js) 9 | */ 10 | 11 | function jBoxImageWrapper(jBox, jQuery) { 12 | 13 | new jBox.plugin('Image', { 14 | 15 | 16 | // Options (https://stephanwagner.me/jBox/options#options-image) 17 | 18 | src: 'href', // The attribute where jBox gets the image source from, e.g. href="/path_to_image/image.jpg" 19 | gallery: 'data-jbox-image', // The attribute to set the galleries, e.g. data-jbox-image="gallery1" 20 | imageLabel: 'title', // The attribute where jBox gets the image label from, e.g. title="My label" 21 | imageFade: 360, // The fade duration for images in ms 22 | imageSize: 'contain', // How to display the images. Use CSS background-position values, e.g. 'cover', 'contain', 'auto', 'initial', '50% 50%' 23 | imageCounter: false, // Set to true to add an image counter, e.g. 4/20 24 | imageCounterSeparator: '/', // HTML to separate the current image number from all image numbers, e.g. '/' or ' of ' 25 | downloadButton: false, // Adds a download button 26 | downloadButtonText: null, // Text for the download button 27 | downloadButtonUrl: null, // The attribute at the source element where to find the image to download, e.g. data-download="/path_to_image/image.jpg". If none provided, the currently active image will be downloaded 28 | mobileImageAttr: null, // The attribute to look for an mobile version of the image 29 | mobileImageBreakpoint: null, // The upper breakpoint to load the mobile image 30 | preloadFirstImage: false, // Preload the first image when page is loaded 31 | target: window, 32 | attach: '[data-jbox-image]', 33 | fixed: true, 34 | blockScroll: true, 35 | closeOnEsc: true, 36 | closeOnClick: 'button', 37 | closeButton: true, 38 | overlay: true, 39 | animation: 'zoomIn', 40 | preventDefault: true, 41 | width: '100%', 42 | height: '100%', 43 | adjustDistance: { 44 | top: 40, 45 | right: 0, 46 | bottom: 40, 47 | left: 0 48 | }, 49 | 50 | 51 | // Triggered when jBox is initialized 52 | 53 | _onInit: function () 54 | { 55 | // Initial images and z-index 56 | this.images = this.currentImage = {}; 57 | this.imageZIndex = 1; 58 | 59 | this.initImage = function (item) { 60 | item = jQuery(item); 61 | 62 | // Abort if the item was added to a gallery already 63 | if (item.data('jBox-image-gallery')) { 64 | return; 65 | } 66 | 67 | // Get the image src 68 | var src = item.attr(this.options.src); 69 | 70 | // Update responsive image src 71 | if (this.options.mobileImageAttr && this.options.mobileImageBreakpoint && item.attr(this.options.mobileImageAttr)) { 72 | if (jQuery(window).width() <= this.options.mobileImageBreakpoint) { 73 | src = item.attr(this.options.mobileImageAttr); 74 | } 75 | } 76 | 77 | // Add item to a gallery 78 | var gallery = item.attr(this.options.gallery) || 'default'; 79 | !this.images[gallery] && (this.images[gallery] = []); 80 | this.images[gallery].push({ 81 | src: src, 82 | label: (item.attr(this.options.imageLabel) || ''), 83 | downloadUrl: this.options.downloadButtonUrl && item.attr(this.options.downloadButtonUrl) ? item.attr(this.options.downloadButtonUrl) : null 84 | }); 85 | 86 | // Remove the title attribute so it won't show the browsers tooltip 87 | this.options.imageLabel == 'title' && item.removeAttr('title'); 88 | 89 | // Store data in source element for easy access 90 | item.data('jBox-image-gallery', gallery); 91 | item.data('jBox-image-id', (this.images[gallery].length - 1)); 92 | }.bind(this); 93 | 94 | // Loop through images, sort and save in global variable 95 | this.attachedElements && this.attachedElements.length && jQuery.each(this.attachedElements, function (index, item) { 96 | this.initImage(item); 97 | }.bind(this)); 98 | 99 | // Helper to inject the image into content area 100 | var appendImage = function (gallery, id, show, instant) { 101 | // Abort if image was appended already 102 | if (jQuery('#jBox-image-' + gallery + '-' + id).length) { 103 | return; 104 | } 105 | 106 | // Create image container 107 | var image = jQuery('
', { 108 | id: 'jBox-image-' + gallery + '-' + id, 109 | 'class': 'jBox-image-container' + (show ? ' jBox-image-' + gallery + '-current' : '') 110 | }).css({ 111 | backgroundSize: this.options.imageSize, 112 | opacity: (instant ? 1 : 0), 113 | zIndex: (show ? this.imageZIndex++ : 0) 114 | }).appendTo(this.content); 115 | 116 | // Add swipe events 117 | this.swipeDetector(image) 118 | .on("swipeLeft.sd swipeRight.sd", function (event) { 119 | if (event.type === "swipeLeft") { 120 | this.showImage('next'); 121 | } else if (event.type === "swipeRight") { 122 | this.showImage('prev'); 123 | } 124 | }.bind(this)); 125 | 126 | // Create labels 127 | jQuery('
', { 128 | id: 'jBox-image-label-' + gallery + '-' + id, 129 | 'class': 'jBox-image-label' + (show ? ' active' : '') 130 | }) 131 | .html(this.images[gallery][id].label) 132 | .on('click tap', function () { 133 | jQuery(this).toggleClass('expanded'); 134 | }) 135 | .appendTo(this.imageLabelContainer); 136 | 137 | // Show image 138 | show && image.animate({opacity: 1}, instant ? 0 : this.options.imageFade); 139 | 140 | return image; 141 | }.bind(this); 142 | 143 | // Function to download an image 144 | this.downloadImage = function (imageUrl) { 145 | var link = document.createElement('a'); 146 | link.href = imageUrl; 147 | link.setAttribute('download', imageUrl.substring(imageUrl.lastIndexOf('/')+1)); 148 | document.body.appendChild(link); 149 | link.click(); 150 | }; 151 | 152 | // Helper to show new image label 153 | var showLabel = function (gallery, id) { 154 | jQuery('.jBox-image-label.active').removeClass('active expanded'); 155 | jQuery('#jBox-image-label-' + gallery + '-' + id).addClass('active'); 156 | }; 157 | 158 | // Helper to load image 159 | var loadImage = function (gallery, id, show, instant) { 160 | var imageContainer = appendImage(gallery, id, show, instant); 161 | imageContainer.addClass('jBox-image-loading'); 162 | 163 | jQuery('').each(function () { 164 | var tmpImg = new Image(); 165 | tmpImg.onload = function () { 166 | imageContainer.removeClass('jBox-image-loading'); 167 | imageContainer.css({backgroundImage: 'url("' + this.images[gallery][id].src + '")'}); 168 | }.bind(this); 169 | 170 | tmpImg.onerror = function () { 171 | imageContainer.removeClass('jBox-image-loading'); 172 | imageContainer.addClass('jBox-image-not-found'); 173 | }.bind(this); 174 | 175 | tmpImg.src = this.images[gallery][id].src; 176 | }.bind(this)); 177 | }.bind(this); 178 | 179 | // Show images when they are loaded or load them if not 180 | this.showImage = function (img) { 181 | // Get the gallery and the image id from the next or the previous image 182 | var gallery; 183 | var id; 184 | 185 | if (img != 'open') { 186 | gallery = this.currentImage.gallery; 187 | id = this.currentImage.id + (1 * (img == 'prev') ? -1 : 1); 188 | id = id > (this.images[gallery].length - 1) ? 0 : (id < 0 ? (this.images[gallery].length - 1) : id); 189 | 190 | // Or get image data from source element 191 | } else { 192 | // Get gallery and image id from source element 193 | if (this.source) { 194 | gallery = this.source.data('jBox-image-gallery'); 195 | id = this.source.data('jBox-image-id'); 196 | 197 | // Get gallery and image id attached elements 198 | } else if (this.attachedElements && this.attachedElements.length) { 199 | gallery = jQuery(this.attachedElements[0]).data('jBox-image-gallery'); 200 | id = jQuery(this.attachedElements[0]).data('jBox-image-id'); 201 | } else { 202 | return; 203 | } 204 | 205 | // Remove or show the next and prev buttons 206 | if (this.images && this.images[gallery]) { 207 | jQuery('.jBox-image-pointer-prev, .jBox-image-pointer-next').css({display: (this.images[gallery].length > 1 ? 'block' : 'none')}); 208 | } 209 | } 210 | 211 | // If there is a current image already shown, hide it 212 | if (jQuery('.jBox-image-' + gallery + '-current').length) { 213 | jQuery('.jBox-image-' + gallery + '-current').removeClass('jBox-image-' + gallery + '-current').animate({opacity: 0}, (img == 'open') ? 0 : this.options.imageFade); 214 | } 215 | 216 | // Set new current image 217 | this.currentImage = {gallery: gallery, id: id}; 218 | 219 | // Show image if it already exists 220 | if (jQuery('#jBox-image-' + gallery + '-' + id).length) { 221 | jQuery('#jBox-image-' + gallery + '-' + id).addClass('jBox-image-' + gallery + '-current').css({zIndex: this.imageZIndex++, opacity: 0}).animate({opacity: 1}, (img == 'open') ? 0 : this.options.imageFade); 222 | 223 | // Load image 224 | } else { 225 | loadImage(gallery, id, true, (img === 'open')); 226 | } 227 | 228 | // Show label 229 | showLabel(gallery, id); 230 | 231 | // Update the image counter numbers 232 | if (this.imageCounter) { 233 | if (this.images[gallery] && this.images[gallery].length > 1) { 234 | this.wrapper.addClass('jBox-image-has-counter'); 235 | this.imageCounter.find('.jBox-image-counter-all').html(this.images[gallery].length); 236 | this.imageCounter.find('.jBox-image-counter-current').html(id + 1); 237 | } else { 238 | this.wrapper.removeClass('jBox-image-has-counter'); 239 | } 240 | } 241 | 242 | // Preload next image 243 | if (this.images[gallery] && this.images[gallery].length - 1) { 244 | var next_id = id + 1; 245 | next_id = next_id > (this.images[gallery].length - 1) ? 0 : (next_id < 0 ? (this.images[gallery].length - 1) : next_id); 246 | 247 | if (!jQuery('#jBox-image-' + gallery + '-' + next_id).length) { 248 | loadImage(gallery, next_id, false, false); 249 | } 250 | } 251 | }; 252 | 253 | // Preload image 254 | if (this.options.preloadFirstImage) { 255 | jQuery(window).on('load', function() { 256 | this.showImage('open'); 257 | }.bind(this)); 258 | } 259 | }, 260 | 261 | 262 | // Triggered when jBox attaches a new element 263 | 264 | _onAttach: function (item) { 265 | this.initImage && this.initImage(item); 266 | }, 267 | 268 | 269 | // Triggered when jBox was created 270 | 271 | _onCreated: function () 272 | { 273 | // Create image label and navigation buttons 274 | this.imageLabelWrapper = jQuery('
').appendTo(this.wrapper); 275 | 276 | this.imagePrevButton = jQuery('
') 277 | .on('click tap', function () { 278 | this.showImage('prev'); 279 | }.bind(this)); 280 | 281 | this.imageNextButton = jQuery('
') 282 | .on('click tap', function () { 283 | this.showImage('next'); 284 | }.bind(this)); 285 | 286 | this.imageLabelContainer = jQuery('
'); 287 | 288 | this.imageLabelWrapper 289 | .append(this.imagePrevButton) 290 | .append(this.imageLabelContainer) 291 | .append(this.imageNextButton); 292 | 293 | // Append the download button 294 | if (this.options.downloadButton) { 295 | this.downloadButton = jQuery('
', {'class': 'jBox-image-download-button-wrapper'}) 296 | .appendTo(this.wrapper) 297 | .append( 298 | this.options.downloadButtonText ? jQuery('
', {'class': 'jBox-image-download-button-text'}).html(this.options.downloadButtonText) : null 299 | ) 300 | .append( 301 | jQuery('
', {'class': 'jBox-image-download-button-icon'}) 302 | ).on('click tap', function () { 303 | if (this.images[this.currentImage.gallery][this.currentImage.id].downloadUrl) { 304 | var currentImageUrl = this.images[this.currentImage.gallery][this.currentImage.id].downloadUrl; 305 | } else { 306 | var currentImage = this.wrapper.find('.jBox-image-' + this.currentImage.gallery + '-current'); 307 | var currentImageStyle = currentImage[0].style.backgroundImage; 308 | var currentImageUrl = currentImageStyle.slice(4, -1).replace(/["']/g, ''); 309 | } 310 | this.downloadImage(currentImageUrl); 311 | }.bind(this)); 312 | } 313 | 314 | // Creating the image counter containers 315 | if (this.options.imageCounter) { 316 | this.imageCounter = jQuery('
', {'class': 'jBox-image-counter-container'}).insertAfter(this.imageLabelContainer); 317 | this.imageCounter.append(jQuery('', {'class': 'jBox-image-counter-current'})).append(jQuery('').html(this.options.imageCounterSeparator)).append(jQuery('', {'class': 'jBox-image-counter-all'})); 318 | } 319 | }, 320 | 321 | 322 | // Triggered when jBox opens 323 | 324 | _onOpen: function () 325 | { 326 | // Add key events 327 | jQuery(document).on('keyup.jBox-Image-' + this.id, function (ev) { 328 | (ev.keyCode == 37) && this.showImage('prev'); 329 | (ev.keyCode == 39) && this.showImage('next'); 330 | }.bind(this)); 331 | 332 | // Load the image from the attached element 333 | this.showImage('open'); 334 | }, 335 | 336 | 337 | // Triggered when jBox closes 338 | 339 | _onClose: function () 340 | { 341 | // Remove key events 342 | jQuery(document).off('keyup.jBox-Image-' + this.id); 343 | }, 344 | 345 | 346 | // Triggered when jBox finished closing 347 | 348 | _onCloseComplete: function () 349 | { 350 | // Hide all image containers 351 | this.wrapper.find('.jBox-image-container').css('opacity', 0); 352 | } 353 | 354 | }); 355 | 356 | }; 357 | -------------------------------------------------------------------------------- /src/js/plugins/jBox.Notice.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jBox Notice plugin: Opens a popup notice 3 | * 4 | * Author: Stephan Wagner (https://stephanwagner.me) 5 | * 6 | * License: MIT (https://opensource.org/licenses/MIT) 7 | * 8 | * Requires: jBox (https://cdn.jsdelivr.net/gh/StephanWagner/jBox@latest/dist/jBox.min.js) 9 | */ 10 | 11 | function jBoxNoticeWrapper(jBox, jQuery) { 12 | 13 | new jBox.plugin('Notice', { 14 | 15 | 16 | // Options (https://stephanwagner.me/jBox/options#options-notice) 17 | 18 | color: null, // Add a color to your notices, use 'gray' (default), 'black', 'red', 'green', 'blue' or 'yellow' 19 | stack: true, // Set to false to disable notice-stacking 20 | stackSpacing: 10, // Spacing between notices when they stack 21 | autoClose: 6000, // Time in ms after which the notice will disappear 22 | attributes: { // Defines where the notice will pop up 23 | x: 'right', // 'left' or 'right' 24 | y: 'top' // 'top' or 'bottom' 25 | }, 26 | position: { // Defines the distance to the viewport boundary 27 | x: 15, 28 | y: 15 29 | }, 30 | responsivePositions: { // Responsive positions 31 | 500: { // The key defines the maximum width of the viewport, the values will replace the default position options 32 | x: 5, // Start with the lowest viewport 33 | y: 5 34 | }, 35 | 768: { 36 | x: 10, 37 | y: 10 38 | } 39 | }, 40 | target: window, 41 | fixed: true, 42 | animation: 'zoomIn', 43 | closeOnClick: 'box', 44 | zIndex: 12000, 45 | 46 | 47 | // Triggered when notice is initialized 48 | 49 | _onInit: function () 50 | { 51 | // Cache position values 52 | this.defaultNoticePosition = jQuery.extend({}, this.options.position); 53 | 54 | // Type Notice has its own adjust position function 55 | this._adjustNoticePositon = function () { 56 | var win = jQuery(window); 57 | var windowDimensions = { 58 | x: win.width(), 59 | y: win.height() 60 | }; 61 | 62 | // Reset default position 63 | this.options.position = jQuery.extend({}, this.defaultNoticePosition); 64 | 65 | // Adjust depending on viewport 66 | jQuery.each(this.options.responsivePositions, function (viewport, position) { 67 | if (windowDimensions.x <= viewport) { 68 | this.options.position = position; 69 | return false; 70 | } 71 | }.bind(this)); 72 | 73 | // Set new padding options 74 | this.options.adjustDistance = { 75 | top: this.options.position.y, 76 | right: this.options.position.x, 77 | bottom: this.options.position.y, 78 | left: this.options.position.x 79 | }; 80 | }; 81 | 82 | // If jBox grabs an element as content, crab a clone instead 83 | this.options.content instanceof jQuery && (this.options.content = this.options.content.clone().attr('id', '')); 84 | 85 | // Adjust paddings when window resizes 86 | jQuery(window).on('resize.responsivejBoxNotice-' + this.id, function (ev) { if (this.isOpen) { this._adjustNoticePositon(); } }.bind(this)); 87 | 88 | this.open(); 89 | }, 90 | 91 | 92 | // Triggered when notice was created 93 | 94 | _onCreated: function () 95 | { 96 | // Add color class 97 | this.wrapper.addClass('jBox-Notice-color jBox-Notice-' + (this.options.color || 'gray')); 98 | 99 | // Store position in jBox wrapper 100 | this.wrapper.data('jBox-Notice-position', this.options.attributes.x + '-' + this.options.attributes.y); 101 | }, 102 | 103 | 104 | // Triggered when notice opens 105 | 106 | _onOpen: function () 107 | { 108 | // Bail if we're stacking 109 | if (this.options.stack) { 110 | return; 111 | } 112 | 113 | // Adjust position when opening 114 | this._adjustNoticePositon(); 115 | 116 | // Loop through notices at same window corner destroy them 117 | jQuery.each(jQuery('.jBox-Notice'), function (index, el) 118 | { 119 | el = jQuery(el); 120 | 121 | // Abort if the element is this notice or when it's not at the same position 122 | if (el.attr('id') == this.id || el.data('jBox-Notice-position') != this.options.attributes.x + '-' + this.options.attributes.y) { 123 | return; 124 | } 125 | 126 | // Remove notice when we don't wont to stack them 127 | if (!this.options.stack) { 128 | el.data('jBox').close({ignoreDelay: true}); 129 | return; 130 | } 131 | }.bind(this)); 132 | }, 133 | 134 | // Triggered when resizing window etc. 135 | 136 | _onPosition: function () 137 | { 138 | var stacks = {}; 139 | jQuery.each(jQuery('.jBox-Notice'), function (index, el) 140 | { 141 | el = jQuery(el); 142 | var pos = el.data('jBox-Notice-position'); 143 | if (!stacks[pos]) { 144 | stacks[pos] = []; 145 | } 146 | stacks[pos].push(el); 147 | }); 148 | for (var pos in stacks) { 149 | var position = pos.split('-'); 150 | var direction = position[1]; 151 | stacks[pos].reverse(); 152 | var margin = 0; 153 | for (var i in stacks[pos]) { 154 | var el = jQuery(stacks[pos][i]); 155 | el.css('margin-' + direction, margin); 156 | margin += el.outerHeight() + this.options.stackSpacing; 157 | } 158 | } 159 | }, 160 | 161 | // Remove notice from DOM and reposition other notices when closing finishes 162 | 163 | _onCloseComplete: function () 164 | { 165 | this.destroy(); 166 | this.options._onPosition.bind(this).call(); 167 | } 168 | 169 | }); 170 | 171 | }; 172 | -------------------------------------------------------------------------------- /src/js/umd.js: -------------------------------------------------------------------------------- 1 | (function (root, factory) { 2 | if (typeof define === 'function' && define.amd) { 3 | define(['jquery'], function (jQuery) { 4 | return (root.jBox = factory(jQuery)); 5 | }); 6 | } else if (typeof module === 'object' && module.exports) { 7 | module.exports = (root.jBox = factory(require('jquery'))); 8 | } else { 9 | root.jBox = factory(root.jQuery); 10 | } 11 | }(this, function (jQuery) { 12 | var jBox = jBoxWrapper(jQuery); 13 | try { typeof jBoxConfirmWrapper !== 'undefined' && jBoxConfirmWrapper && jBoxConfirmWrapper(jBox, jQuery); } catch(e) { console.error(e); } 14 | try { typeof jBoxImageWrapper !== 'undefined' && jBoxImageWrapper && jBoxImageWrapper(jBox, jQuery); } catch(e) { console.error(e); } 15 | try { typeof jBoxNoticeWrapper !== 'undefined' && jBoxNoticeWrapper && jBoxNoticeWrapper(jBox, jQuery); } catch(e) { console.error(e); } 16 | return jBox; 17 | })); 18 | -------------------------------------------------------------------------------- /src/scss/jBox.scss: -------------------------------------------------------------------------------- 1 | // Global 2 | 3 | .jBox-wrapper { 4 | text-align: left; 5 | box-sizing: border-box; 6 | } 7 | 8 | .jBox-title, 9 | .jBox-content, 10 | .jBox-container { 11 | position: relative; 12 | word-break: break-word; 13 | box-sizing: border-box; 14 | } 15 | 16 | .jBox-container { 17 | background: #fff; 18 | } 19 | 20 | .jBox-content { 21 | padding: 8px 12px; 22 | overflow-x: hidden; 23 | overflow-y: auto; 24 | transition: opacity .2s; 25 | } 26 | 27 | .jBox-footer { 28 | box-sizing: border-box; 29 | } 30 | 31 | // jBox Tooltip 32 | 33 | .jBox-Tooltip, 34 | .jBox-Mouse { 35 | .jBox-container { 36 | border-radius: 4px; 37 | box-shadow: 0 0 3px rgba(0, 0, 0, .25); 38 | } 39 | 40 | .jBox-title { 41 | padding: 8px 10px 0; 42 | font-weight: bold; 43 | } 44 | 45 | &.jBox-hasTitle .jBox-content { 46 | padding-top: 5px; 47 | } 48 | } 49 | 50 | .jBox-Mouse { 51 | pointer-events: none; 52 | } 53 | 54 | // Pointer 55 | 56 | .jBox-pointer { 57 | position: absolute; 58 | overflow: hidden; 59 | box-sizing: border-box; 60 | 61 | &:after { 62 | content: ''; 63 | width: 20px; 64 | height: 20px; 65 | position: absolute; 66 | background: #fff; 67 | transform: rotate(45deg); 68 | box-sizing: border-box; 69 | } 70 | 71 | &-top { 72 | top: 0; 73 | 74 | &:after { 75 | left: 5px; 76 | top: 6px; 77 | box-shadow: -1px -1px 2px rgba(0, 0, 0, .15); 78 | } 79 | } 80 | 81 | &-right { 82 | right: 0; 83 | 84 | &:after { 85 | top: 5px; 86 | right: 6px; 87 | box-shadow: 1px -1px 2px rgba(0, 0, 0, .15); 88 | } 89 | } 90 | 91 | &-left { 92 | left: 0; 93 | 94 | &:after { 95 | top: 5px; 96 | left: 6px; 97 | box-shadow: -1px 1px 2px rgba(0, 0, 0, .15); 98 | } 99 | } 100 | 101 | &-bottom { 102 | bottom: 0; 103 | 104 | &:after { 105 | left: 5px; 106 | bottom: 6px; 107 | box-shadow: 1px 1px 2px rgba(0, 0, 0, .15); 108 | } 109 | } 110 | 111 | &-top, 112 | &-bottom { 113 | width: 30px; 114 | height: 12px; 115 | } 116 | 117 | &-left, 118 | &-right { 119 | width: 12px; 120 | height: 30px; 121 | } 122 | } 123 | 124 | // jBox Modal 125 | 126 | .jBox-Modal { 127 | .jBox-container { 128 | border-radius: 4px; 129 | } 130 | 131 | .jBox-container, 132 | &.jBox-closeButton-box:before { 133 | box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4); 134 | } 135 | 136 | .jBox-content { 137 | padding: 15px 20px; 138 | } 139 | 140 | .jBox-title { 141 | border-radius: 4px 4px 0 0; 142 | padding: 15px 20px; 143 | background: #fafafa; 144 | border-bottom: 1px solid #eee; 145 | } 146 | 147 | &.jBox-closeButton-title { 148 | .jBox-title { 149 | padding-right: 65px; 150 | } 151 | } 152 | 153 | .jBox-footer { 154 | border-radius: 0 0 4px 4px; 155 | } 156 | } 157 | 158 | // Close button 159 | 160 | .jBox-closeButton { 161 | z-index: 1; 162 | cursor: pointer; 163 | position: absolute; 164 | box-sizing: border-box; 165 | 166 | svg { 167 | position: absolute; 168 | top: 50%; 169 | right: 50%; 170 | } 171 | 172 | path { 173 | fill: #aaa; 174 | transition: fill .2s; 175 | } 176 | 177 | &:hover { 178 | path { 179 | fill: #888; 180 | } 181 | } 182 | } 183 | 184 | // Close button in overlay 185 | 186 | .jBox-overlay { 187 | .jBox-closeButton { 188 | top: 0; 189 | right: 0; 190 | width: 40px; 191 | height: 40px; 192 | 193 | svg { 194 | width: 20px; 195 | height: 20px; 196 | margin-top: -10px; 197 | margin-right: -10px; 198 | } 199 | 200 | path { 201 | fill: #ddd; 202 | } 203 | 204 | &:hover path { 205 | fill: #fff; 206 | } 207 | } 208 | 209 | } 210 | 211 | // Close button in title 212 | 213 | .jBox-closeButton-title { 214 | .jBox-closeButton { 215 | top: 0; 216 | right: 0; 217 | bottom: 0; 218 | width: 50px; 219 | } 220 | 221 | svg { 222 | width: 12px; 223 | height: 12px; 224 | margin-top: -6px; 225 | margin-right: -6px; 226 | } 227 | } 228 | 229 | // Close button in box 230 | 231 | .jBox-closeButton-box { 232 | box-sizing: border-box; 233 | 234 | .jBox-closeButton { 235 | top: -8px; 236 | right: -10px; 237 | width: 24px; 238 | height: 24px; 239 | background: #fff; 240 | border-radius: 50%; 241 | 242 | svg { 243 | width: 10px; 244 | height: 10px; 245 | margin-top: -5px; 246 | margin-right: -5px; 247 | } 248 | } 249 | 250 | &:before { 251 | content: ''; 252 | position: absolute; 253 | top: -8px; 254 | right: -10px; 255 | width: 24px; 256 | height: 24px; 257 | border-radius: 50%; 258 | box-shadow: 0 0 5px rgba(0, 0, 0, .3); 259 | } 260 | 261 | &.jBox-pointerPosition-top:before { 262 | top: 5px; 263 | } 264 | 265 | &.jBox-pointerPosition-right:before { 266 | right: 2px; 267 | } 268 | } 269 | 270 | 271 | .jBox-Modal.jBox-hasTitle.jBox-closeButton-box .jBox-closeButton { 272 | background: #fafafa; 273 | } 274 | 275 | // Overlay 276 | 277 | .jBox-overlay { 278 | position: fixed; 279 | top: 0; 280 | left: 0; 281 | width: 100%; 282 | height: 100%; 283 | background-color: rgba(0, 0, 0, .82); 284 | } 285 | 286 | // Footer 287 | 288 | .jBox-footer { 289 | background: #fafafa; 290 | border-top: 1px solid #eee; 291 | padding: 8px 10px; 292 | border-radius: 0 0 3px 3px; 293 | } 294 | 295 | // Block scrolling 296 | 297 | body[class^="jBox-blockScroll-"], 298 | body[class*=" jBox-blockScroll-"] { 299 | overflow: hidden; 300 | } 301 | 302 | // Draggable 303 | 304 | .jBox-draggable { 305 | cursor: move; 306 | } 307 | 308 | // Spinner 309 | 310 | @keyframes jBoxLoading { 311 | to { 312 | transform: rotate(360deg); 313 | } 314 | } 315 | 316 | .jBox-loading .jBox-content { 317 | opacity: .2; 318 | } 319 | 320 | .jBox-loading-spinner .jBox-content { 321 | min-height: 38px !important; 322 | min-width: 38px !important; 323 | opacity: 0; 324 | } 325 | 326 | .jBox-spinner { 327 | box-sizing: border-box; 328 | position: absolute; 329 | top: 50%; 330 | left: 50%; 331 | width: 24px; 332 | height: 24px; 333 | margin-top: -12px; 334 | margin-left: -12px; 335 | 336 | &:before { 337 | display: block; 338 | box-sizing: border-box; 339 | content: ''; 340 | width: 24px; 341 | height: 24px; 342 | border-radius: 50%; 343 | border: 2px solid rgba(0, 0, 0, .2); 344 | border-top-color: rgba(0, 0, 0, .8); 345 | animation: jBoxLoading .6s linear infinite; 346 | } 347 | } 348 | 349 | // Countdown 350 | 351 | .jBox-countdown { 352 | border-radius: 4px 4px 0 0; 353 | z-index: 0; 354 | background: #000; 355 | opacity: .2; 356 | position: absolute; 357 | top: 0; 358 | left: 0; 359 | right: 0; 360 | height: 3px; 361 | overflow: hidden; 362 | 363 | &-inner { 364 | top: 0; 365 | right: 0; 366 | width: 100%; 367 | height: 3px; 368 | position: absolute; 369 | background: #fff; 370 | } 371 | } 372 | 373 | // Animations 374 | 375 | [class^="jBox-animated-"], 376 | [class*=" jBox-animated-"] { 377 | animation-fill-mode: both; 378 | } 379 | 380 | // Animation tada 381 | 382 | @keyframes jBox-tada { 383 | 0% { 384 | transform: scale(1); 385 | } 386 | 387 | 10%, 388 | 20% { 389 | transform: scale(0.8) rotate(-4deg); 390 | } 391 | 392 | 30%, 393 | 50%, 394 | 70%, 395 | 90% { 396 | transform: scale(1.2) rotate(4deg); 397 | } 398 | 399 | 40%, 400 | 60%, 401 | 80% { 402 | transform: scale(1.2) rotate(-4deg); 403 | } 404 | 405 | 100% { 406 | transform: scale(1) rotate(0); 407 | } 408 | } 409 | 410 | .jBox-animated-tada { 411 | animation: jBox-tada 1s; 412 | } 413 | 414 | // Animation tadaSmall 415 | 416 | @keyframes jBox-tadaSmall { 417 | 0% { 418 | transform: scale(1); 419 | } 420 | 421 | 10%, 422 | 20% { 423 | transform: scale(0.9) rotate(-2deg); 424 | } 425 | 426 | 30%, 427 | 50%, 428 | 70%, 429 | 90% { 430 | transform: scale(1.1) rotate(2deg); 431 | } 432 | 433 | 40%, 434 | 60%, 435 | 80% { 436 | transform: scale(1.1) rotate(-2deg); 437 | } 438 | 439 | 100% { 440 | transform: scale(1) rotate(0); 441 | } 442 | } 443 | 444 | .jBox-animated-tadaSmall { 445 | animation: jBox-tadaSmall 1s; 446 | } 447 | 448 | // Animation flash 449 | 450 | @keyframes jBox-flash { 451 | 452 | 0%, 453 | 50%, 454 | 100% { 455 | opacity: 1; 456 | } 457 | 458 | 25%, 459 | 75% { 460 | opacity: 0; 461 | } 462 | } 463 | 464 | .jBox-animated-flash { 465 | animation: jBox-flash .5s; 466 | } 467 | 468 | // Animation shake 469 | 470 | @keyframes jBox-shake { 471 | 472 | 0%, 473 | 100% { 474 | transform: translateX(0); 475 | } 476 | 477 | 20%, 478 | 60% { 479 | transform: translateX(-6px); 480 | } 481 | 482 | 40%, 483 | 80% { 484 | transform: translateX(6px); 485 | } 486 | } 487 | 488 | .jBox-animated-shake { 489 | animation: jBox-shake .4s; 490 | } 491 | 492 | // Animation pulseUp 493 | 494 | @keyframes jBox-pulseUp { 495 | 0% { 496 | transform: scale(1); 497 | } 498 | 499 | 50% { 500 | transform: scale(1.15); 501 | } 502 | 503 | 100% { 504 | transform: scale(1); 505 | } 506 | } 507 | 508 | .jBox-animated-pulseUp { 509 | animation: jBox-pulseUp .25s; 510 | } 511 | 512 | // Animation pulseDown 513 | 514 | @keyframes jBox-pulseDown { 515 | 0% { 516 | transform: scale(1); 517 | } 518 | 519 | 50% { 520 | transform: scale(0.85); 521 | } 522 | 523 | 100% { 524 | transform: scale(1); 525 | } 526 | } 527 | 528 | .jBox-animated-pulseDown { 529 | animation: jBox-pulseDown .25s; 530 | } 531 | 532 | // Animation popIn 533 | 534 | @keyframes jBox-popIn { 535 | 0% { 536 | transform: scale(0); 537 | } 538 | 539 | 50% { 540 | transform: scale(1.1); 541 | } 542 | 543 | 100% { 544 | transform: scale(1); 545 | } 546 | } 547 | 548 | .jBox-animated-popIn { 549 | animation: jBox-popIn .25s; 550 | } 551 | 552 | // Animation popOut 553 | 554 | @keyframes jBox-popOut { 555 | 0% { 556 | transform: scale(1); 557 | } 558 | 559 | 50% { 560 | transform: scale(1.1); 561 | } 562 | 563 | 100% { 564 | transform: scale(0); 565 | } 566 | } 567 | 568 | .jBox-animated-popOut { 569 | animation: jBox-popOut .25s; 570 | } 571 | 572 | // Animation fadeIn 573 | 574 | @keyframes jBox-fadeIn { 575 | 0% { 576 | opacity: 0; 577 | } 578 | 579 | 100% { 580 | opacity: 1; 581 | } 582 | } 583 | 584 | .jBox-animated-fadeIn { 585 | animation: jBox-fadeIn .2s; 586 | } 587 | 588 | // Animation fadeOut 589 | 590 | @keyframes jBox-fadeOut { 591 | 0% { 592 | opacity: 1; 593 | } 594 | 595 | 100% { 596 | opacity: 0; 597 | } 598 | } 599 | 600 | .jBox-animated-fadeOut { 601 | animation: jBox-fadeOut .2s; 602 | } 603 | 604 | // Animation slideUp 605 | 606 | @keyframes jBox-slideUp { 607 | 0% { 608 | transform: translateY(0); 609 | } 610 | 611 | 100% { 612 | transform: translateY(-300px); 613 | opacity: 0; 614 | } 615 | } 616 | 617 | .jBox-animated-slideUp { 618 | animation: jBox-slideUp .4s; 619 | } 620 | 621 | // Animation slideRight 622 | 623 | @keyframes jBox-slideRight { 624 | 0% { 625 | transform: translateX(0); 626 | } 627 | 628 | 100% { 629 | transform: translateX(300px); 630 | opacity: 0; 631 | } 632 | } 633 | 634 | .jBox-animated-slideRight { 635 | animation: jBox-slideRight .4s; 636 | } 637 | 638 | // Animation slideDown 639 | 640 | @keyframes jBox-slideDown { 641 | 0% { 642 | transform: translateY(0); 643 | } 644 | 645 | 100% { 646 | transform: translateY(300px); 647 | opacity: 0; 648 | } 649 | } 650 | 651 | .jBox-animated-slideDown { 652 | animation: jBox-slideDown .4s; 653 | } 654 | 655 | // Animation slideLeft 656 | 657 | @keyframes jBox-slideLeft { 658 | 0% { 659 | transform: translateX(0); 660 | } 661 | 662 | 100% { 663 | transform: translateX(-300px); 664 | opacity: 0; 665 | } 666 | } 667 | 668 | .jBox-animated-slideLeft { 669 | animation: jBox-slideLeft .4s; 670 | } 671 | -------------------------------------------------------------------------------- /src/scss/plugins/jBox.Confirm.scss: -------------------------------------------------------------------------------- 1 | // jBox plugin: Confirm 2 | 3 | .jBox-Confirm { 4 | .jBox-content { 5 | text-align: center; 6 | padding: 46px 35px; 7 | 8 | @media (max-width: 500px) { 9 | padding: 32px 20px; 10 | } 11 | } 12 | } 13 | 14 | .jBox-Confirm-footer { 15 | height: 46px; 16 | } 17 | 18 | .jBox-Confirm-button { 19 | display: block; 20 | float: left; 21 | cursor: pointer; 22 | text-align: center; 23 | width: 50%; 24 | line-height: 46px; 25 | height: 46px; 26 | overflow: hidden; 27 | padding: 0 10px; 28 | transition: color .2s, background-color .2s; 29 | box-sizing: border-box; 30 | 31 | &-cancel { 32 | border-bottom-left-radius: 4px; 33 | background: #ddd; 34 | color: #666; 35 | 36 | &:hover, 37 | &:active { 38 | background: #ccc; 39 | } 40 | 41 | &:active { 42 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); 43 | } 44 | } 45 | 46 | &-submit { 47 | border-bottom-right-radius: 4px; 48 | background: #7d0; 49 | color: #fff; 50 | 51 | &:hover, 52 | &:active { 53 | background: #6c0; 54 | } 55 | 56 | &:active { 57 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/scss/plugins/jBox.Image.scss: -------------------------------------------------------------------------------- 1 | // jBox plugin: Image 2 | 3 | .jBox-Image { 4 | .jBox-container { 5 | background-color: transparent; 6 | } 7 | 8 | .jBox-content { 9 | padding: 0; 10 | width: 100%; 11 | height: 100%; 12 | } 13 | } 14 | 15 | .jBox-image-container { 16 | background: center center no-repeat; 17 | position: absolute; 18 | width: 100%; 19 | height: 100%; 20 | opacity: 0; 21 | } 22 | 23 | .jBox-image-label-wrapper { 24 | position: absolute; 25 | top: 100%; 26 | left: 0; 27 | right: 0; 28 | height: 40px; 29 | z-index: 100; 30 | display: flex; 31 | } 32 | 33 | .jBox-image-label-container { 34 | position: relative; 35 | flex: 1; 36 | } 37 | 38 | .jBox-image-label { 39 | box-sizing: border-box; 40 | position: absolute; 41 | left: 0; 42 | bottom: 0; 43 | width: 100%; 44 | text-align: center; 45 | color: #fff; 46 | padding: 8px 12px; 47 | font-size: 15px; 48 | line-height: 24px; 49 | transition: opacity .36s; 50 | opacity: 0; 51 | z-index: 0; 52 | pointer-events: none; 53 | 54 | &.expanded { 55 | background: #000; 56 | } 57 | 58 | &:not(.expanded) { 59 | text-overflow: ellipsis; 60 | white-space: nowrap; 61 | overflow: hidden; 62 | } 63 | 64 | &.active { 65 | opacity: 1; 66 | pointer-events: all; 67 | } 68 | 69 | @media (max-width: 600px) { 70 | font-size: 13px; 71 | } 72 | } 73 | 74 | .jBox-image-pointer-next, 75 | .jBox-image-pointer-prev { 76 | flex-shrink: 0; 77 | width: 40px; 78 | height: 40px; 79 | cursor: pointer; 80 | opacity: .8; 81 | transition: opacity .2s; 82 | background: no-repeat center center url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ijc0LjcgMjI0IDE4LjcgMzIiPg0KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTkzLDIyNy40TDgwLjQsMjQwTDkzLDI1Mi42YzAuNCwwLjQsMC40LDEuMSwwLDEuNWwtMS42LDEuNmMtMC40LDAuNC0xLDAuNS0xLjUsMEw3NSwyNDAuN2MtMC40LTAuNC0wLjUtMSwwLTEuNWwxNC45LTE0LjljMC40LTAuNCwxLTAuNCwxLjUsMGwxLjYsMS42QzkzLjUsMjI2LjQsOTMuNCwyMjcsOTMsMjI3LjR6Ii8+DQo8L3N2Zz4=); 83 | background-size: 11px auto; 84 | user-select: none; 85 | z-index: 1; 86 | 87 | &:hover { 88 | opacity: 1; 89 | } 90 | } 91 | 92 | .jBox-image-pointer-next { 93 | transform: scaleX(-1); 94 | } 95 | 96 | .jBox-image-counter-container { 97 | flex-shrink: 0; 98 | white-space: nowrap; 99 | height: 40px; 100 | line-height: 40px; 101 | font-size: 13px; 102 | color: #fff; 103 | text-align: right; 104 | display: none; 105 | } 106 | 107 | .jBox-image-has-counter .jBox-image-counter-container { 108 | display: block; 109 | } 110 | 111 | .jBox-overlay.jBox-overlay-Image { 112 | background: #000; 113 | } 114 | 115 | .jBox-image-not-found { 116 | background: #000; 117 | 118 | &:before { 119 | content: ''; 120 | box-sizing: border-box; 121 | display: block; 122 | width: 80px; 123 | height: 80px; 124 | margin-top: -40px; 125 | margin-left: -40px; 126 | position: absolute; 127 | top: 50%; 128 | left: 50%; 129 | border: 5px solid #222; 130 | border-radius: 50%; 131 | } 132 | 133 | &:after { 134 | content: ''; 135 | display: block; 136 | box-sizing: content-box; 137 | z-index: auto; 138 | width: 6px; 139 | height: 74px; 140 | margin-top: -37px; 141 | margin-left: -3px; 142 | position: absolute; 143 | top: 50%; 144 | left: 50%; 145 | background: #222; 146 | transform: rotateZ(45deg); 147 | transform-origin: 50% 50% 0; 148 | } 149 | } 150 | 151 | // Download button 152 | 153 | .jBox-image-download-button-wrapper { 154 | position: absolute; 155 | top: -40px; 156 | right: 35px; 157 | height: 40px; 158 | display: flex; 159 | cursor: pointer; 160 | opacity: .8; 161 | transition: opacity .2s; 162 | 163 | &:hover { 164 | opacity: 1; 165 | } 166 | } 167 | 168 | .jBox-image-download-button-icon { 169 | width: 40px; 170 | height: 40px; 171 | background: center center no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDE2IDI1NnYtMTkyaC0xOTJ2MTkyaC0xNjBsMjU2IDI1NiAyNTYtMjU2aC0xNjB6TTAgNTc2aDY0MHY2NGgtNjQwdi02NHoiPjwvcGF0aD48L3N2Zz4=); 172 | background-size: 60%; 173 | } 174 | 175 | .jBox-image-download-button-text { 176 | white-space: nowrap; 177 | line-height: 40px; 178 | padding: 0 10px 0 0; 179 | color: #fff; 180 | font-size: 14px; 181 | } 182 | 183 | // Image spinner 184 | 185 | @keyframes jBoxImageLoading { 186 | to { 187 | transform: rotate(360deg); 188 | } 189 | } 190 | 191 | .jBox-image-loading:before { 192 | content: ''; 193 | position: absolute; 194 | top: 50%; 195 | left: 50%; 196 | width: 32px; 197 | height: 32px; 198 | margin-top: -16px; 199 | margin-left: -16px; 200 | border: 4px solid #333; 201 | border-bottom-color: #666; 202 | animation: jBoxImageLoading 1.2s linear infinite; 203 | border-radius: 50%; 204 | } 205 | -------------------------------------------------------------------------------- /src/scss/plugins/jBox.Notice.scss: -------------------------------------------------------------------------------- 1 | // jBox plugin: Notice 2 | 3 | .jBox-Notice { 4 | transition: margin .2s; 5 | 6 | .jBox-container { 7 | border-radius: 4px; 8 | box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, .25), inset -1px -1px 0 0 rgba(0, 0, 0, .1); 9 | } 10 | 11 | .jBox-content { 12 | border-radius: 4px; 13 | padding: 12px 20px; 14 | 15 | @media (max-width: 768px) { 16 | padding: 10px 15px; 17 | } 18 | 19 | @media (max-width: 500px) { 20 | padding: 8px 10px; 21 | } 22 | } 23 | 24 | &.jBox-hasTitle { 25 | .jBox-content { 26 | padding-top: 5px; 27 | 28 | @media (max-width: 500px) { 29 | padding-top: 0; 30 | } 31 | } 32 | 33 | .jBox-title { 34 | padding: 12px 20px 0; 35 | font-weight: bold; 36 | 37 | @media (max-width: 768px) { 38 | padding: 10px 15px 0; 39 | } 40 | 41 | @media (max-width: 500px) { 42 | padding: 8px 10px 0; 43 | } 44 | } 45 | } 46 | 47 | &.jBox-closeButton-title { 48 | .jBox-title { 49 | padding-right: 55px; 50 | } 51 | 52 | &.jBox-hasTitle { 53 | .jBox-closeButton { 54 | width: 40px; 55 | } 56 | } 57 | } 58 | 59 | &.jBox-Notice-black { 60 | .jBox-container { 61 | color: #fff; 62 | background: #000; 63 | } 64 | 65 | &.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton { 66 | 67 | path, 68 | &:hover path { 69 | fill: #fff; 70 | } 71 | } 72 | } 73 | 74 | &.jBox-Notice-gray { 75 | .jBox-container { 76 | color: #222; 77 | background: #f6f6f6; 78 | } 79 | 80 | &.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton { 81 | 82 | path, 83 | &:hover path { 84 | fill: #222; 85 | } 86 | } 87 | } 88 | 89 | &.jBox-Notice-red { 90 | .jBox-container { 91 | color: #fff; 92 | background: #d00; 93 | } 94 | 95 | &.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton { 96 | 97 | path, 98 | &:hover path { 99 | fill: #fff; 100 | } 101 | } 102 | } 103 | 104 | &.jBox-Notice-green { 105 | .jBox-container { 106 | color: #fff; 107 | background: #5d0; 108 | } 109 | 110 | &.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton { 111 | 112 | path, 113 | &:hover path { 114 | fill: #fff; 115 | } 116 | } 117 | } 118 | 119 | &.jBox-Notice-blue { 120 | .jBox-container { 121 | color: #fff; 122 | background: #49d; 123 | } 124 | 125 | &.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton { 126 | 127 | path, 128 | &:hover path { 129 | fill: #fff; 130 | } 131 | } 132 | } 133 | 134 | &.jBox-Notice-yellow { 135 | .jBox-container { 136 | color: #000; 137 | background: #fd0; 138 | } 139 | 140 | &.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton { 141 | 142 | path, 143 | &:hover path { 144 | fill: #fff; 145 | } 146 | } 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /src/scss/themes/jBox.NoticeFancy.scss: -------------------------------------------------------------------------------- 1 | // jBox theme: NoticeFancy 2 | 3 | .jBox-NoticeFancy { 4 | 5 | .jBox-content, 6 | .jBox-title { 7 | padding-left: 25px; 8 | } 9 | 10 | &.jBox-Notice-color .jBox-container { 11 | color: #fff; 12 | background: #000; 13 | 14 | &:after { 15 | content: ''; 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | bottom: 0; 20 | width: 8px; 21 | border-radius: 4px 0 0 4px; 22 | background-image: linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent); 23 | background-size: 14px 14px; 24 | } 25 | } 26 | 27 | &.jBox-Notice-black .jBox-container:after, 28 | &.jBox-Notice-gray .jBox-container:after { 29 | background-color: #888; 30 | } 31 | 32 | &.jBox-Notice-red .jBox-container:after { 33 | background-color: #e00; 34 | } 35 | 36 | &.jBox-Notice-green .jBox-container:after { 37 | background-color: #6c0; 38 | } 39 | 40 | &.jBox-Notice-blue .jBox-container:after { 41 | background-color: #49d; 42 | } 43 | 44 | &.jBox-Notice-yellow .jBox-container:after { 45 | background-color: #fb0; 46 | } 47 | 48 | .jBox-countdown { 49 | left: 8px; 50 | border-radius: 0 4px 0 0; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/scss/themes/jBox.TooltipBorder.scss: -------------------------------------------------------------------------------- 1 | // jBox theme: TooltipBorder 2 | 3 | .jBox-TooltipBorder { 4 | .jBox-container, 5 | .jBox-pointer:after { 6 | border: 2px solid #49d; 7 | } 8 | 9 | .jBox-pointer:after { 10 | width: 22px; 11 | height: 22px; 12 | } 13 | 14 | .jBox-pointer-top, 15 | .jBox-pointer-bottom { 16 | width: 34px; 17 | height: 13px; 18 | 19 | &:after { 20 | left: 6px; 21 | } 22 | } 23 | 24 | .jBox-pointer-left, 25 | .jBox-pointer-right { 26 | width: 13px; 27 | height: 34px; 28 | 29 | &:after { 30 | top: 6px; 31 | } 32 | } 33 | 34 | &.jBox-closeButton-box:before { 35 | width: 28px; 36 | height: 28px; 37 | background: #49d; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/scss/themes/jBox.TooltipBorderThick.scss: -------------------------------------------------------------------------------- 1 | // jBox theme: TooltipBorderThick 2 | 3 | .jBox-TooltipBorderThick { 4 | .jBox-container { 5 | box-shadow: none; 6 | border-radius: 8px; 7 | border: 4px solid #ccc; 8 | } 9 | 10 | .jBox-pointer:after { 11 | box-shadow: none; 12 | border: 4px solid #ccc; 13 | width: 24px; 14 | height: 24px; 15 | } 16 | 17 | .jBox-pointer-top, 18 | .jBox-pointer-bottom { 19 | width: 38px; 20 | height: 13px; 21 | } 22 | 23 | .jBox-pointer-left, 24 | .jBox-pointer-right { 25 | width: 13px; 26 | height: 38px; 27 | } 28 | 29 | &.jBox-closeButton-box:before { 30 | width: 32px; 31 | height: 32px; 32 | background: #ccc; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/scss/themes/jBox.TooltipDark.scss: -------------------------------------------------------------------------------- 1 | // jBox theme: TooltipDark 2 | 3 | .jBox-TooltipDark { 4 | .jBox-container { 5 | border-radius: 4px; 6 | background: #000; 7 | color: #fff; 8 | box-shadow: 0 0 6px rgba(0, 0, 0, .4); 9 | } 10 | 11 | .jBox-pointer:after { 12 | background: #000; 13 | } 14 | 15 | .jBox-closeButton { 16 | background: #000; 17 | } 18 | 19 | &.jBox-closeButton-box { 20 | &:before { 21 | box-shadow: 0 0 6px rgba(0, 0, 0, .4); 22 | } 23 | 24 | .jBox-closeButton { 25 | path { 26 | fill: #ddd; 27 | } 28 | 29 | &:hover path { 30 | fill: #fff; 31 | } 32 | 33 | &:active path { 34 | fill: #bbb; 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/scss/themes/jBox.TooltipError.scss: -------------------------------------------------------------------------------- 1 | // jBox theme: TooltipError 2 | 3 | .jBox-TooltipError { 4 | pointer-events: none; 5 | 6 | .jBox-container { 7 | border-radius: 2px; 8 | background: #d00; 9 | color: #fff; 10 | font-weight: bold; 11 | font-size: 13px; 12 | } 13 | 14 | .jBox-content { 15 | padding: 0 10px; 16 | line-height: 28px; 17 | } 18 | 19 | .jBox-pointer { 20 | &:after { 21 | background: #d00; 22 | width: 20px; 23 | height: 20px; 24 | } 25 | 26 | &-top, 27 | &-bottom { 28 | width: 22px; 29 | height: 8px; 30 | } 31 | 32 | &-right, 33 | &-left { 34 | width: 8px; 35 | height: 22px; 36 | } 37 | 38 | &-top:after { 39 | left: 1px; 40 | top: 6px; 41 | } 42 | 43 | &-right:after { 44 | top: 1px; 45 | right: 6px; 46 | } 47 | 48 | &-bottom:after { 49 | left: 1px; 50 | bottom: 6px; 51 | } 52 | 53 | &-left:after { 54 | top: 1px; 55 | left: 6px; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/scss/themes/jBox.TooltipSmall.scss: -------------------------------------------------------------------------------- 1 | // Box theme: TooltipSmall 2 | 3 | .jBox-TooltipSmall { 4 | pointer-events: none; 5 | 6 | .jBox-container { 7 | border-radius: 2px; 8 | } 9 | 10 | .jBox-content { 11 | padding: 0 10px; 12 | line-height: 28px; 13 | } 14 | 15 | .jBox-pointer { 16 | &:after { 17 | width: 20px; 18 | height: 20px; 19 | } 20 | 21 | &-top, 22 | &-bottom { 23 | width: 22px; 24 | height: 8px; 25 | } 26 | 27 | &-right, 28 | &-left { 29 | width: 8px; 30 | height: 22px; 31 | } 32 | 33 | &-top:after { 34 | left: 1px; 35 | top: 6px; 36 | } 37 | 38 | &-right:after { 39 | top: 1px; 40 | right: 6px; 41 | } 42 | 43 | &-bottom:after { 44 | left: 1px; 45 | bottom: 6px; 46 | } 47 | 48 | &-left:after { 49 | top: 1px; 50 | left: 6px; 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/scss/themes/jBox.TooltipSmallGray.scss: -------------------------------------------------------------------------------- 1 | // jBox theme: TooltipSmallGray 2 | 3 | .jBox-TooltipSmallGray { 4 | pointer-events: none; 5 | 6 | .jBox-container { 7 | font-size: 13px; 8 | line-height: 24px; 9 | border-radius: 12px; 10 | background-image: linear-gradient(to bottom, #fafafa, #f2f2f2); 11 | } 12 | 13 | .jBox-content { 14 | padding: 0 10px; 15 | } 16 | 17 | .jBox-pointer { 18 | &:after { 19 | width: 20px; 20 | height: 20px; 21 | } 22 | 23 | &-top, 24 | &-bottom { 25 | width: 22px; 26 | height: 8px; 27 | } 28 | 29 | &-left, 30 | &-right { 31 | width: 8px; 32 | height: 22px; 33 | } 34 | 35 | &-top:after { 36 | background: #fafafa; 37 | left: 1px; 38 | top: 6px; 39 | } 40 | 41 | &-right:after { 42 | top: 1px; 43 | right: 6px; 44 | } 45 | 46 | &-bottom:after { 47 | background: #f2f2f2; 48 | left: 1px; 49 | bottom: 6px; 50 | } 51 | 52 | &-left:after { 53 | top: 1px; 54 | left: 6px; 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /test/assets.test.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | // Check if asset exists 4 | function checkForAsset(path) { 5 | var pathFound = true; 6 | try { 7 | fs.accessSync(path); 8 | } catch (e) { 9 | pathFound = false; 10 | } 11 | return pathFound; 12 | } 13 | 14 | // Plugins 15 | var plugins = [ 16 | 'Confirm', 17 | 'Image', 18 | 'Notice' 19 | ]; 20 | 21 | // Themes 22 | var themes = [ 23 | 'NoticeFancy', 24 | 'TooltipBorder', 25 | 'TooltipBorderThick', 26 | 'TooltipDark', 27 | 'TooltipError', 28 | 'TooltipSmall', 29 | 'TooltipSmallGray' 30 | ]; 31 | 32 | // Check for default files 33 | for (let filename of ['jBox', 'jBox.all']) { 34 | for (let extension of ['.js', '.min.js', '.css', '.min.css']) { 35 | test('Asset ' + filename + extension + ' exists', () => { 36 | expect(checkForAsset('./dist/' + filename + extension)).toBe(true); 37 | }); 38 | } 39 | } 40 | 41 | // Check for plugin files 42 | for (let plugin of plugins) { 43 | for (let extension of ['.js', '.min.js', '.css', '.min.css']) { 44 | let filename = 'jBox.' + plugin; 45 | test('Plugin ' + plugin + ': Asset ' + filename + extension + ' exists', () => { 46 | expect(checkForAsset('./dist/plugins/' + filename + extension)).toBe(true); 47 | }); 48 | } 49 | } 50 | 51 | // Check for theme files 52 | for (let theme of themes) { 53 | for (let extension of ['.css', '.min.css']) { 54 | let filename = 'jBox.' + theme; 55 | test('Theme ' + theme + ': Asset ' + filename + extension + ' exists', () => { 56 | expect(checkForAsset('./dist/themes/' + filename + extension)).toBe(true); 57 | }); 58 | } 59 | } --------------------------------------------------------------------------------