diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..df43ed4 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,11 @@ +; This file is for unifying the coding style for different editors and IDEs. +; More information at http://editorconfig.org + +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1760e75 --- /dev/null +++ b/.gitignore @@ -0,0 +1,36 @@ +# CSS and JS maps +*.js.map +*.css.map + +# npm +node_modules + +# OS generated files +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db + +# Tool specific files +# vim +*~ +*.swp +*.swo +# sublime text & textmate +*.sublime-* +*.stTheme.cache +*.tmlanguage.cache +*.tmPreferences.cache +# Eclipse +.settings/* +# JetBrains, aka PHPStorm, IntelliJ IDEA +.idea/* +# NetBeans +nbproject/* +# Visual Studio Code +.vscode +# Sass preprocessor +.sass-cache/ diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..22f54a1 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,13 @@ +{ + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "semi": true, + "singleQuote": true, + "jsxSingleQuote": true, + "quoteProps": "consistent", + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "arrowParens": "always" +} diff --git a/Demo/Demo.css b/Demo/Demo.css deleted file mode 100644 index 1b0ec29..0000000 --- a/Demo/Demo.css +++ /dev/null @@ -1,724 +0,0 @@ - -/* Global */ - -html { - height: 100%; - min-height: 100%; -} - -body { - position: relative; - min-height: 100%; - font-family: 'Helvetica Neue', 'Segoe UI', Arial, sans-serif; - font-size: 17px; - line-height: 1.4; - color: #202428; - background: #fff; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -main { - padding: 20px 0; -} - -.container { - position: relative; - width: calc(100% - 60px); - max-width: 1000px; - margin: auto; -} - -h2 { - font-size: 22px; - font-weight: normal; -} - -@media (max-width: 768px) { - - .container { - width: calc(100% - 30px); - } - -} - -/* Target elements */ - -.targets-wrapper { - margin: 0 -5px; - padding: 10px 0 20px; -} - -.targets-wrapper:after, -.targets-wrapper:before { - content: " "; - display: table; -} - -.targets-wrapper:after { - clear: both; -} - -.target, -.target-click, -.target-notice { - cursor: default; - font-size: 13px; - line-height: 52px; - height: 52px; - border-radius: 2px; - border: 1px solid #e2e2e2; - text-align: center; - background: #fafafa; - position: relative; - text-transform: uppercase; - float: left; - width: calc(25% - 10px); - margin: 5px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.target-click, -.target-notice { - cursor: pointer; -} - -.target.active, -.target-click.active, -.target-notice.active { - color: #07d; -} - -.demo-img { - float: left; - width: calc(25% - 10px); - margin: 5px; -} - -.demo-img > img { - border: 4px solid #eee; - border-radius: 2px; - width: 100%; - height: auto; - filter: grayscale(100%); - transition: filter .2s, border-color .2s; -} - -.demo-img:hover > img { - filter: none; - border-color: #ddd; -} - -@media (max-width: 768px) { - - .target, - .target-click, - .target-notice { - width: calc(50% - 10px); - } - - .demo-img > img { - border-width: 2px; - } - -} - -/* jBox styles */ - -.ajax-sending { - color: #07d; -} - -.ajax-complete { - color: #6c0; -} - -.ajax-success tt { - color: #666; - display: block; - padding-top: 10px; - font-size: 13px; -} - -.ajax-error { - color: #d00; -} - -/* Header */ - -header { - height: 50px; - line-height: 50px; - font-size: 17px; - background: #262c33; - color: #99a3ad; - box-shadow: 0 0 4px rgba(0, 0, 0, .6); -} - -header a { - margin-right: 20px; - color: #99a3ad; - text-decoration: none; -} - -header a:last-child, -header a:nth-child(3) { - margin-right: 0; -} - -header a.active, -header a:hover { - color: #fff; - text-decoration: none; -} - -#stephan { - display: block; - position: absolute; - top: 50%; - right: 0; - width: 40px; - height: 40px; - margin-top: -20px; - border-radius: 3px; - background: no-repeat -3px -2px url(https://stephanwagner.me/img/stephan.jpg); - background-size: 50px; - box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); -} - -#stephan > span { - font-size: 0; - line-height: 0; - white-space: nowrap; - position: absolute; - top: 50%; - right: 50%; - pointer-events: none; - transition: font-size .2s, margin .2s, opacity .2s, line-height .2s; - opacity: 0; -} - -#stephan:hover > span { - opacity: 1; - font-size: 17px; - margin-right: 40px; -} - -@media (max-width: 500px) { - - #stephan > span { - display: none; - } - -} - -/* Common */ - -.truncate { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -.noselect { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.clearfix:after, -.clearfix:before { - content: " "; - display: table; -} - -.clearfix:after { - clear: both; -} - -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS and IE text size adjust after device orientation change, - * without disabling user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Improve readability of focused elements when they are also in an - * active/hover state. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address inconsistent styling of `abbr[title]`. - * 1. Correct styling in Firefox 39 and Opera 12. - * 2. Correct missing styling in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Address inconsistent styling of b and strong. - * 1. Correct duplicate application of `bolder` in Safari 6.0.2. - * 2. Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+. - */ - -b, -strong { - font-weight: inherit; /* 1 */ -} - -b, -strong { - font-weight: bolder; /* 2 */ -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background-color: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address inconsistent styling of `hr`. - * 1. Correct `box-sizing` set to `border-box` in Firefox. - * 2. Correct `overflow` set to `hidden` in IE 8/9/10/11 and Edge 12. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * 1. Correct inheritance and scaling of font-size for preformatted text. - * 2. Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct font properties not being inherited. - * 2. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - font: inherit; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Restore focus style in Firefox 4+ (unset by a rule above) - */ - -button:-moz-focusring, -input:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * Address `appearance` set to `searchfield` in Safari and Chrome. - */ - -input[type="search"] { - -webkit-appearance: textfield; -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Restore font weight (unset by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Reset */ - -html, body, -ul, ol, li, -h1, h2, h3, h4, h5, h6, -form, table, tr, td, -div, p, img, pre, iframe { - margin: 0; - padding: 0; - border: 0; -} - -input, textarea, button, select { - margin: 0; -} - -textarea, img { - display: block; -} - -html, body { - min-width: 100%; - min-height: 100%; -} - -header, nav, footer, section, img { - display: block; -} - -ul, ol { - list-style: none; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} -td { - vertical-align: top; -} - -h1, h2, h3, h4, h5, h6 { - font-weight: normal; -} - -* { - outline: none; - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-text-size-adjust: none; -} - -input::-moz-focus-inner, -button::-moz-focus-inner { - border: 0; -} diff --git a/Demo/Demo.html b/Demo/Demo.html deleted file mode 100644 index 878a735..0000000 --- a/Demo/Demo.html +++ /dev/null @@ -1,91 +0,0 @@ - - - -jBox Demos - - - - - - - - - - - - - - - - - - - -
- -
- -
- -

Tooltip

- -
-
Hover me
-
Hover me
-
Hover me
-
Hover me
-
Hover me
-
Hover me
-
Click me
-
Click me
-
- -

Modal

- -
- - - -
Click me
-
- -

Notice

- -
-
Click me
-
Click me
-
Click me
-
Click me
-
- -

Image

- -
- - - - - -
- -

Playground

- -
-
Click me
-
- -
- - - - - - - - - - \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..51cda56 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Stephan Wagner + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index f7776ec..87f4ca8 100755 --- a/README.md +++ b/README.md @@ -6,6 +6,30 @@ Demo: https://stephanwagner.me/jBox Docs: https://stephanwagner.me/jBox/documentation +--- + +## Install + +### ES6 + +```bash +npm install --save jbox +``` + +```javascript +import jBox from 'jbox'; +import 'jbox/dist/jBox.all.css'; +``` + +### CDN + +```html + + + +``` + +--- ## Tooltips @@ -24,6 +48,8 @@ Now elements with `class="tooltip"` will open tooltips: Hover me! ``` +--- + ## Modal windows You can set up modal windows the same way as tooltips. @@ -38,10 +64,12 @@ new jBox('Modal', { content: 'Hello there!' }); ``` + ```html
Click me to open a modal window!
``` +--- ## Confirm windows @@ -54,11 +82,14 @@ new jBox('Confirm', { cancelButton: 'Nope' }); ``` + ```html
Click me!
Click me! ``` +--- + ## Notices A notice will open automatically and destroy itself after some time: @@ -69,6 +100,8 @@ new jBox('Notice', { }); ``` +--- + ## Images To create image windows you only need following few lines: @@ -76,10 +109,15 @@ To create image windows you only need following few lines: ```javascript new jBox('Image'); ``` + ```html - + + + ``` +--- + ## Learn more These few examples are very basic. diff --git a/Source/jBox.js b/Source/jBox.js deleted file mode 100644 index f5222f9..0000000 --- a/Source/jBox.js +++ /dev/null @@ -1,1798 +0,0 @@ -/** - * jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. - * - * Author: Stephan Wagner (https://stephanwagner.me) - * - * License: MIT (https://opensource.org/licenses/MIT) - * - * Requires: jQuery 3.1.1 (https://code.jquery.com/jquery-3.1.1.min.js) - * - * Documentation: https://stephanwagner.me/jBox/documentation - * - * Demos: https://stephanwagner.me/jBox/demos - */ - -function jBox(type, options) { - - - // Options (https://stephanwagner.me/jBox/options) - - this.options = { - - // jBox ID - id: null, // Choose a unique id, otherwise jBox will set one for you (jBox1, jBox2, ...) - - // Dimensions - width: 'auto', // The width of the content area, e.g. 'auto', 200, '80%' - height: 'auto', // The height of the content area - minWidth: null, // Minimal width - minHeight: null, // Minimal height - maxWidth: null, // Maximal width - maxHeight: null, // Maximal height - - // Responsive dimensions - responsiveWidth: true, // Adjusts the width to fit the viewport - responsiveHeight: true, // Adjusts the height to fit the viewport - responsiveMinWidth: 100, // Don't adjust width below this value (in pixel) - responsiveMinHeight: 100, // Don't adjust height below this value (in pixel) - - // Attach - attach: null, // A jQuery selector to elements that will open and close your jBox, e.g. '.tooltip' - trigger: 'click', // The event to open or close your jBox, use 'click', 'touchclick' or 'mouseenter' - preventDefault: false, // Prevent the default event when opening jBox, e.g. don't follow the href in a link - - // Content - content: null, // You can use HTML or a jQuery element, e.g. jQuery('#jBox-content'). The elements will be appended to the content element and then made visible, so hide them with style="display: none" beforehand - getContent: null, // Get the content from an attribute when jBox opens, e.g. getContent: 'data-content'. Use 'html' to get the attached elements HTML as content - title: null, // Adds a title to your jBox - getTitle: null, // Get the title from an attribute when jBox opens, e.g. getTitle: 'data-title' - footer: null, // Adds a footer to your jBox - isolateScroll: true, // Isolates scrolling to the content container - - // AJAX - ajax: { // Setting an URL will make an AJAX request when jBox opens. Optional you can add any jQuery AJAX option (http://api.jquery.com/jquery.ajax/) - url: null, // The URL to send the AJAX request to - data: '', // Data to send with your AJAX request, e.g. {id: 82, limit: 10} - reload: false, // Resend the AJAX request when jBox opens. Use true to send the AJAX request only once for every attached element or 'strict' to resend every time jBox opens - getURL: 'data-url', // The attribute in the source element where the AJAX request will look for the URL, e.g. data-url="https://ajaxresponse.com" - getData: 'data-ajax', // The attribute in the source element where the AJAX request will look for the data, e.g. data-ajax="id=82&limit=10" - setContent: true, // Automatically set the response as new content when the AJAX request is finished - spinner: true, // Hides the current content and adds a spinner while loading. You can pass HTML content to add your own spinner, e.g. spinner: '
' - spinnerDelay: 300, // Milliseconds to wait until spinner appears - spinnerReposition: true // Repositions jBox when the spinner is added or removed - }, - - // Position - target: null, // The jQuery selector to the target element where jBox will be opened. If no element is found, jBox will use the attached element as target - position: { - x: 'center', // Horizontal position, use a number, 'left', 'right' or 'center' - y: 'center' // Vertical position, use a number, 'top', 'bottom' or 'center' - }, - outside: null, // Use 'x', 'y', or 'xy' to move your jBox outside of the target element - offset: 0, // Offset to final position, you can set different values for x and y with an object, e.g. {x: 20, y: 10} - attributes: { // Note that attributes can only be 'left' or 'right' when using numbers for position, e.g. {x: 300, y: 20} - x: 'left', // Horizontal position, use 'left' or 'right' - y: 'top' // Vertical position, use 'top' or 'bottom' - }, - fixed: false, // Your jBox will stay on position when scrolling - adjustPosition: true, // Adjusts your jBoxes position if there is not enough space, use 'flip', 'move' or true for both. This option overrides the reposition options - adjustTracker: false, // By default jBox adjusts its position when it opens or when the window size changes, set to true to also adjust when scrolling - adjustDistance: 5, // The minimal distance to the viewport edge while adjusting. Use an object to set different values, e.g. {top: 50, right: 5, bottom: 20, left: 5} - reposition: true, // Calculates new position when the window-size changes - repositionOnOpen: true, // Calculates new position each time jBox opens (rather than only when it opens the first time) - repositionOnContent: true, // Calculates new position when the content changes with .setContent() or .setTitle() - - // Pointer - pointer: false, // Your pointer will always point towards the target element, so the option outside needs to be 'x' or 'y'. By default the pointer is centered, set a position to move it to any side. You can also add an offset, e.g. 'left:30' or 'center:-20' - pointTo: 'target', // Setting something else than 'target' will add a pointer even if there is no target element set or found. Use 'top', 'right', 'bottom' or 'left' - - // Animations - fade: 180, // Fade duration in ms, set to 0 or false to disable - animation: null, // Animation when opening or closing, use 'pulse', 'zoomIn', 'zoomOut', 'move', 'slide', 'flip', 'tada' (CSS inspired from Daniel Edens Animate.css: http://daneden.me/animate) - - // Appearance - theme: 'Default', // Set a jBox theme class - addClass: null, // Adds classes to the wrapper - overlay: false, // Adds an overlay to hide page content when jBox opens (adjust color and opacity with CSS) - zIndex: 10000, // Use a high z-index - - // Delays - delayOpen: 0, // Delay opening in ms. Note that the delay will be ignored if your jBox didn't finish closing - delayClose: 0, // Delay closing in ms. Nnote that there is always a closing delay of at least 10ms to ensure jBox won't be closed when opening right away - - // Closing - closeOnEsc: false, // Close jBox when pressing [esc] key - closeOnClick: false, // Close jBox with mouseclick. Use true (click anywhere), 'box' (click on jBox itself), 'overlay' (click on the overlay), 'body' (click anywhere but jBox) - closeOnMouseleave: false, // Close jBox when the mouse leaves the jBox area or the area of the attached element - closeButton: false, // Adds a close button to your jBox. Use 'title', 'box', 'overlay' or true (true will add the button to the overlay, title or the jBox itself, in that order if any of those elements can be found) - - // Other options - appendTo: jQuery('body'), // The element your jBox will be appended to. Any other element than jQuery('body') is only useful for fixed positions or when position values are numbers - createOnInit: false, // Creates jBox and makes it available in DOM when it's being initialized, otherwise it will be created when it opens for the first time - blockScroll: false, // Blocks scrolling when jBox is open - draggable: false, // Make your jBox draggable (use 'true', 'title' or provide an element as handle) (inspired from Chris Coyiers CSS-Tricks http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/) - dragOver: true, // When you have multiple draggable jBoxes, the one you select will always move over the other ones - autoClose: false, // Time in ms when jBox will close automatically after it was opened - - // Audio // You can use the integrated audio function whenever you'd like to play an audio file, e.g. onInit: function () { this.audio('url_to_audio_file_without_file_extension', 75); } - preloadAudio: true, // Preloads the audio files set in option audio. You can also preload other audio files, e.g. ['src_to_file.mp3', 'src_to_file.ogg'] - audio: null, // The URL to an audio file to play when jBox opens. Set the URL without file extension, jBox will look for an .mp3 and .ogg file. To play audio when jBox closes, use an object, e.g. {open: 'src_to_audio1', close: 'src_to_audio2'} - volume: 100, // The volume in percent. To have different volumes for opening and closeing, use an object, e.g. {open: 75, close: 100} - - // Events // Note that you can use 'this' in all event functions, it refers to your jBox object (e.g. onInit: function () { this.open(); }) - onInit: null, // Fired when jBox is initialized - onAttach: null, // Fired when jBox attached itself to elements, the attached element will be passed as a parameter, e.g. onAttach: function (element) { element.css({color: 'red'}); } - onPosition: null, // Fired when jBox is positioned - onCreated: null, // Fired when jBox is created and availible in DOM - onOpen: null, // Fired when jBox opens - onClose: null, // Fired when jBox closes - onCloseComplete: null // Fired when jBox is completely closed (when fading is finished) - }; - - - // Default plugin options - - this._pluginOptions = { - - // Default options for tooltips - 'Tooltip': { - getContent: 'title', - trigger: 'mouseenter', - position: { - x: 'center', - y: 'top' - }, - outside: 'y', - pointer: true - }, - - // Default options for mouse tooltips - 'Mouse': { - responsiveWidth: false, - responsiveHeight: false, - adjustPosition: 'flip', - target: 'mouse', - trigger: 'mouseenter', - position: { - x: 'right', - y: 'bottom' - }, - outside: 'xy', - offset: 5 - }, - - // Default options for modal windows - 'Modal': { - target: jQuery(window), - fixed: true, - blockScroll: true, - closeOnEsc: true, - closeOnClick: 'overlay', - closeButton: true, - overlay: true, - animation: 'zoomIn' - }, - }; - - - // Merge options - - this.options = jQuery.extend(true, this.options, this._pluginOptions[type] ? this._pluginOptions[type] : jBox._pluginOptions[type], options); - - - // Set the jBox type - - jQuery.type(type) == 'string' && (this.type = type); - - - // Local function to fire events - - this._fireEvent = function (event, pass) - { - this.options['_' + event] && (this.options['_' + event].bind(this))(pass); - this.options[event] && (this.options[event].bind(this))(pass); - }; - - - // Get a unique jBox ID - - this.options.id === null && (this.options.id = 'jBox' + jBox._getUniqueID()); - this.id = this.options.id; - - - // Correct impossible options - - ((this.options.position.x == 'center' && this.options.outside == 'x') || (this.options.position.y == 'center' && this.options.outside == 'y')) && (this.options.outside = null); - this.options.pointTo == 'target' && (!this.options.outside || this.options.outside == 'xy') && (this.options.pointer = false); - - - // Correct multiple choice options - - jQuery.type(this.options.offset) != 'object' ? (this.options.offset = {x: this.options.offset, y: this.options.offset}) : (this.options.offset = jQuery.extend({x: 0, y: 0}, this.options.offset)); - jQuery.type(this.options.adjustDistance) != 'object' ? (this.options.adjustDistance = {top: this.options.adjustDistance, right: this.options.adjustDistance, bottom: this.options.adjustDistance, left: this.options.adjustDistance}) : (this.options.adjustDistance = jQuery.extend({top: 5, left: 5, right: 5, bottom: 5}, this.options.adjustDistance)); - - - // Save default outside position - - this.outside = this.options.outside && this.options.outside != 'xy' ? this.options.position[this.options.outside] : false; - - - // Save where the jBox is aligned to - - this.align = this.outside ? this.outside : (this.options.position.y != 'center' && jQuery.type(this.options.position.y) != 'number' ? this.options.position.x : (this.options.position.x != 'center' && jQuery.type(this.options.position.x) != 'number' ? this.options.position.y : this.options.attributes.x)); - - - // Internal positioning functions - - this._getOpp = function (opp) { return {left: 'right', right: 'left', top: 'bottom', bottom: 'top', x: 'y', y: 'x'}[opp]; }; - this._getXY = function (xy) { return {left: 'x', right: 'x', top: 'y', bottom: 'y', center: 'x'}[xy]; }; - this._getTL = function (tl) { return {left: 'left', right: 'left', top: 'top', bottom: 'top', center: 'left', x: 'left', y: 'top'}[tl]; }; - - - // Get a dimension value in integer pixel dependent on appended element - - this._getInt = function (value, dimension) { - if (value == 'auto') return 'auto'; - if (value && jQuery.type(value) == 'string' && value.slice(-1) == '%') { - return jQuery(window)[dimension == 'height' ? 'innerHeight' : 'innerWidth']() * parseInt(value.replace('%', '')) / 100; - } - return value; - }; - - - // Create an svg element - - this._createSVG = function (type, options) - { - var svg = document.createElementNS('http://www.w3.org/2000/svg', type); - jQuery.each(options, function (index, item) { - svg.setAttribute(item[0], (item[1] || '')); - }); - return svg; - }; - - - // Isolate scrolling in a container - - this._isolateScroll = function (el) - { - // Abort if element not found - if (!el || !el.length) return; - - el.on('DOMMouseScroll.jBoxIsolateScroll mousewheel.jBoxIsolateScroll', function (ev) { - var delta = ev.wheelDelta || (ev.originalEvent && ev.originalEvent.wheelDelta) || -ev.detail; - var overflowBottom = this.scrollTop + el.outerHeight() - this.scrollHeight >= 0; - var overflowTop = this.scrollTop <= 0; - ((delta < 0 && overflowBottom) || (delta > 0 && overflowTop)) && ev.preventDefault(); - }); - }; - - - // Set the title width to content width - - this._setTitleWidth = function () - { - // Abort if there is no title or width of content is auto - if (!this.titleContainer || (this.content[0].style.width == 'auto' && !this.content[0].style.maxWidth)) return null; - - // Expose wrapper to get actual width - if (this.wrapper.css('display') == 'none') { - this.wrapper.css('display', 'block'); - var contentWidth = this.content.outerWidth(); - this.wrapper.css('display', 'none'); - } else { - var contentWidth = this.content.outerWidth(); - } - - // Set max-width only - this.titleContainer.css({maxWidth: (Math.max(contentWidth, parseInt(this.content[0].style.maxWidth)) || null)}); - } - - - // Make jBox draggable - - this._draggable = function () - { - // Abort if jBox is not draggable - if (!this.options.draggable) return false; - - // Get the handle where jBox will be dragged with - var handle = this.options.draggable == 'title' ? this.titleContainer : (this.options.draggable instanceof jQuery ? this.options.draggable : (jQuery.type(this.options.draggable) == 'string' ? jQuery(this.options.draggable) : this.wrapper)); - - // Abort if no handle or if draggable was set already - if (!handle || !(handle instanceof jQuery) || !handle.length || handle.data('jBox-draggable')) return false; - - // Add mouse events - handle.addClass('jBox-draggable').data('jBox-draggable', true).on('mousedown', function (ev) - { - if (ev.button == 2 || jQuery(ev.target).hasClass('jBox-noDrag') || jQuery(ev.target).parents('.jBox-noDrag').length) return; - - // Adjust z-index when dragging jBox over another draggable jBox - if (this.options.dragOver && this.wrapper.css('zIndex') <= jBox.zIndexMax) { - jBox.zIndexMax += 1; - this.wrapper.css('zIndex', jBox.zIndexMax); - } - - var drg_h = this.wrapper.outerHeight(); - var drg_w = this.wrapper.outerWidth(); - var pos_y = this.wrapper.offset().top + drg_h - ev.pageY; - var pos_x = this.wrapper.offset().left + drg_w - ev.pageX; - - jQuery(document).on('mousemove.jBox-draggable-' + this.id, function (ev) { - this.wrapper.offset({ - top: ev.pageY + pos_y - drg_h, - left: ev.pageX + pos_x - drg_w - }); - }.bind(this)); - ev.preventDefault(); - - }.bind(this)).on('mouseup', function () { jQuery(document).off('mousemove.jBox-draggable-' + this.id); }.bind(this)); - - // Get highest z-index - jBox.zIndexMax = !jBox.zIndexMax ? this.options.zIndex : Math.max(jBox.zIndexMax, this.options.zIndex); - - - - return this; - }; - - // Create jBox - - this._create = function () - { - // Abort if jBox was created already - if (this.wrapper) return; - - // Create wrapper - this.wrapper = jQuery('
', { - id: this.id, - 'class': 'jBox-wrapper' + (this.type ? ' jBox-' + this.type : '') + (this.options.theme ? ' jBox-' + this.options.theme : '') + (this.options.addClass ? ' ' + this.options.addClass : '') - }).css({ - position: (this.options.fixed ? 'fixed' : 'absolute'), - display: 'none', - opacity: 0, - zIndex: this.options.zIndex - - // Save the jBox instance in the wrapper, so you can get access to your jBox when you only have the element - }).data('jBox', this); - - // Add mouseleave event, only close jBox when the new target is not the source element - this.options.closeOnMouseleave && this.wrapper.on('mouseleave', function (ev) { - !this.source || !(ev.relatedTarget == this.source[0] || jQuery.inArray(this.source[0], jQuery(ev.relatedTarget).parents('*')) !== -1) && this.close(); - }.bind(this)); - - // Add closeOnClick: 'box' events - (this.options.closeOnClick == 'box') && this.wrapper.on('touchend click', function () { this.close({ignoreDelay: true}); }.bind(this)); - - // Create container - this.container = jQuery('
').appendTo(this.wrapper); - - // Create content - this.content = jQuery('
').appendTo(this.container); - - // Create footer - this.options.footer && (this.footer = jQuery('