├── .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 |
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 |
Click me
44 |
Click me
45 |
Click me
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 |
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 |
Click me
48 |
Click me
49 |
Click me
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: 'Close ',
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 | 'Open new modal window
'
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 | }
--------------------------------------------------------------------------------