├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .prettierignore
├── .travis.yml
├── LICENSE
├── README.md
├── demo
    ├── demo.css
    └── index.html
├── dist
    ├── jquery.loading.js
    └── jquery.loading.min.js
├── package.json
├── src
    ├── loading.css
    └── loading.js
├── test
    └── jquery.loading.test.js
├── webpack.config.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["eslint:recommended"],
 3 |   "env": {
 4 |     "browser": true,
 5 |     "es6": true,
 6 |     "jest": true,
 7 |     "node": true
 8 |   },
 9 |   "parserOptions": {
10 |     "sourceType": "module"
11 |   },
12 |   "rules": {}
13 | }
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | dist/


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | cache: yarn
 3 | node_js:
 4 |   - "lts/*"
 5 |   - "node"
 6 | script:
 7 |   - yarn build
 8 |   - yarn eslint
 9 |   - yarn test
10 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (c) Carlos Bonetti, http://carlosbonetti.github.io
 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
13 | all 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
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # jquery-loading
 2 | 
 3 | [![Build Status](https://travis-ci.org/CarlosBonetti/jquery-loading.svg)](https://travis-ci.org/CarlosBonetti/jquery-loading)
 4 | ![NPM downloads per month](https://img.shields.io/npm/dm/jquery-easy-loading.svg)
 5 | 
 6 | Add and manipulate loading states of any element on the page.
 7 | 
 8 | [Docs and Demos](http://carlosbonetti.github.io/jquery-loading/).
 9 | 
10 | ## Getting started
11 | 
12 | Install it, using [npm](https://www.npmjs.com/):
13 | 
14 | ```sh
15 | $ npm install --save jquery-easy-loading
16 | ```
17 | 
18 | Include it:
19 | 
20 | ```html
21 | <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
22 | <script src="jquery.loading.js"></script>
23 | ```
24 | 
25 | Use it:
26 | 
27 | ```javascript
28 | $("#some-element").loading();
29 | ```
30 | 
31 | Visit [the website](http://carlosbonetti.github.io/jquery-loading/) for full list of options, methods and customization.
32 | 
33 | ## Contributing to this project
34 | 
35 | Install dependencies once:
36 | 
37 | ```
38 | $ yarn install
39 | ```
40 | 
41 | Then build the project (generates `dist/` files):
42 | 
43 | ```
44 | $ yarn build
45 | ```
46 | 
47 | Run all tests with:
48 | 
49 | ```
50 | $ yarn test
51 | ```
52 | 


--------------------------------------------------------------------------------
/demo/demo.css:
--------------------------------------------------------------------------------
  1 | .loading-div {
  2 |   height: 180px;
  3 |   padding: 15px 25px;
  4 |   color: #eee;
  5 | }
  6 | 
  7 | .example {
  8 |   height: 270px;
  9 | }
 10 | 
 11 | footer {
 12 |   padding-bottom: 30px;
 13 | }
 14 | 
 15 | #custom-overlay {
 16 |   background-color: #000;
 17 |   opacity: 0.7;
 18 | }
 19 | 
 20 | /* http://projects.lukehaas.me/css-loaders/ by @lukehaas */
 21 | .loading-spinner {
 22 |   font-size: 12px;
 23 |   margin: 25% auto;
 24 |   width: 1em;
 25 |   height: 1em;
 26 |   border-radius: 50%;
 27 |   position: relative;
 28 |   text-indent: -9999em;
 29 |   -webkit-animation: load4 1.3s infinite linear;
 30 |   animation: load4 1.3s infinite linear;
 31 | }
 32 | @-webkit-keyframes load4 {
 33 |   0%,
 34 |   100% {
 35 |     box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff,
 36 |       3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff,
 37 |       0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff,
 38 |       -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
 39 |   }
 40 |   12.5% {
 41 |     box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff,
 42 |       3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff,
 43 |       -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff,
 44 |       -2em -2em 0 -0.5em #ffffff;
 45 |   }
 46 |   25% {
 47 |     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff,
 48 |       3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff,
 49 |       -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff,
 50 |       -2em -2em 0 -0.5em #ffffff;
 51 |   }
 52 |   37.5% {
 53 |     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
 54 |       3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff,
 55 |       -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff,
 56 |       -2em -2em 0 -0.5em #ffffff;
 57 |   }
 58 |   50% {
 59 |     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
 60 |       3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff,
 61 |       -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff,
 62 |       -2em -2em 0 -0.5em #ffffff;
 63 |   }
 64 |   62.5% {
 65 |     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
 66 |       3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff,
 67 |       -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff,
 68 |       -2em -2em 0 -0.5em #ffffff;
 69 |   }
 70 |   75% {
 71 |     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
 72 |       3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff,
 73 |       0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff,
 74 |       -2em -2em 0 0em #ffffff;
 75 |   }
 76 |   87.5% {
 77 |     box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff,
 78 |       3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff,
 79 |       0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff,
 80 |       -2em -2em 0 0.2em #ffffff;
 81 |   }
 82 | }
 83 | @keyframes load4 {
 84 |   0%,
 85 |   100% {
 86 |     box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff,
 87 |       3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff,
 88 |       0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff,
 89 |       -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
 90 |   }
 91 |   12.5% {
 92 |     box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff,
 93 |       3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff,
 94 |       -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff,
 95 |       -2em -2em 0 -0.5em #ffffff;
 96 |   }
 97 |   25% {
 98 |     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff,
 99 |       3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff,
100 |       -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff,
101 |       -2em -2em 0 -0.5em #ffffff;
102 |   }
103 |   37.5% {
104 |     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
105 |       3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff,
106 |       -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff,
107 |       -2em -2em 0 -0.5em #ffffff;
108 |   }
109 |   50% {
110 |     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
111 |       3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff,
112 |       -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff,
113 |       -2em -2em 0 -0.5em #ffffff;
114 |   }
115 |   62.5% {
116 |     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
117 |       3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff,
118 |       -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff,
119 |       -2em -2em 0 -0.5em #ffffff;
120 |   }
121 |   75% {
122 |     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
123 |       3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff,
124 |       0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff,
125 |       -2em -2em 0 0em #ffffff;
126 |   }
127 |   87.5% {
128 |     box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff,
129 |       3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff,
130 |       0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff,
131 |       -2em -2em 0 0.2em #ffffff;
132 |   }
133 | }
134 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head lang="en">
  4 |     <meta charset="utf-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 |     <title>jquery-loading Demo</title>
  8 | 
  9 |     <link
 10 |       href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
 11 |       rel="stylesheet"
 12 |     />
 13 |     <link
 14 |       href="http://yandex.st/highlightjs/8.0/styles/default.min.css"
 15 |       rel="stylesheet"
 16 |     />
 17 |     <!-- <link href="../src/loading.css" rel="stylesheet" /> -->
 18 |     <link href="demo.css" rel="stylesheet" />
 19 | 
 20 |     <!--[if lt IE 9]>
 21 |       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 22 |       <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 23 |     <![endif]-->
 24 | 
 25 |     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 26 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.4.2/randomColor.min.js"></script>
 27 |     <script src="../dist/jquery.loading.js"></script>
 28 |   </head>
 29 | 
 30 |   <body>
 31 |     <div class="container">
 32 |       <div class="example col-lg-4 col-sm-6">
 33 |         <h3>Basic usage</h3>
 34 | 
 35 |         <div id="loading-always" class="loading-div">
 36 |           This div is always loading
 37 |         </div>
 38 | 
 39 |         <script>
 40 |           $("#loading-always").loading();
 41 |         </script>
 42 |       </div>
 43 | 
 44 |       <div class="example col-lg-4 col-sm-6">
 45 |         <h3>Starting</h3>
 46 | 
 47 |         <div id="loading-start" class="loading-div">
 48 |           This div will start loading if you click it
 49 |         </div>
 50 | 
 51 |         <script>
 52 |           $("#loading-start").click(function() {
 53 |             $(this).loading("start");
 54 |           });
 55 |         </script>
 56 |       </div>
 57 | 
 58 |       <div class="example col-lg-4 col-sm-6">
 59 |         <h3>Stopping</h3>
 60 | 
 61 |         <div id="loading-stop" class="loading-div">
 62 |           This div will stop loading if you click it
 63 |         </div>
 64 | 
 65 |         <script>
 66 |           $("#loading-stop").loading({
 67 |             stoppable: true
 68 |           });
 69 |         </script>
 70 |       </div>
 71 | 
 72 |       <div class="example col-lg-4 col-sm-6">
 73 |         <h3>Toggling</h3>
 74 | 
 75 |         <div id="loading-toggle" class="loading-div">
 76 |           This div is toggling the loading state
 77 |         </div>
 78 | 
 79 |         <script>
 80 |           setInterval(function() {
 81 |             $("#loading-toggle").loading("toggle");
 82 |           }, 2000);
 83 |         </script>
 84 |       </div>
 85 | 
 86 |       <div class="example col-lg-4 col-sm-6">
 87 |         <h3>Custom animation</h3>
 88 | 
 89 |         <div id="loading-custom-animation" class="loading-div loading-blink">
 90 |           This div has a custom start / stop animation
 91 |         </div>
 92 | 
 93 |         <script>
 94 |           $("#loading-custom-animation").loading({
 95 |             onStart: function(loading) {
 96 |               loading.overlay.slideDown(400);
 97 |             },
 98 |             onStop: function(loading) {
 99 |               loading.overlay.slideUp(400);
100 |             }
101 |           });
102 |         </script>
103 |       </div>
104 | 
105 |       <div class="example col-lg-4 col-sm-6">
106 |         <h3>Themes</h3>
107 | 
108 |         <div id="loading-dark-theme" class="loading-div">
109 |           This div has a different theme (dark)
110 |         </div>
111 | 
112 |         <script>
113 |           $("#loading-dark-theme").loading({
114 |             theme: "dark"
115 |           });
116 |         </script>
117 |       </div>
118 | 
119 |       <div class="example col-lg-4 col-sm-6">
120 |         <h3>Custom message</h3>
121 | 
122 |         <div id="loading-custom-message" class="loading-div">
123 |           This div has a custom loading method
124 |         </div>
125 | 
126 |         <script>
127 |           $("#loading-custom-message").loading({
128 |             message: "Working..."
129 |           });
130 |         </script>
131 |       </div>
132 | 
133 |       <div class="example col-lg-4 col-sm-6">
134 |         <h3>Controls with events handling</h3>
135 | 
136 |         <button id="loading-control-btn" class="btn btn-primary btn-block">
137 |           Click me to start loading
138 |         </button>
139 | 
140 |         <div id="loading-control" class="loading-div">
141 |           This div is button controled, using the events `loading.start` and
142 |           `loading.stop` to change the state (text) of the button
143 |         </div>
144 | 
145 |         <script>
146 |           $("#loading-control-btn").click(function() {
147 |             $("#loading-control").loading("toggle");
148 |           });
149 | 
150 |           $("#loading-control")
151 |             .on("loading.start", function() {
152 |               $("#loading-control-btn").html("Click me to stop loading");
153 |             })
154 |             .on("loading.stop", function() {
155 |               $("#loading-control-btn").html("Click me to start loading");
156 |             });
157 |         </script>
158 |       </div>
159 | 
160 |       <div class="example col-lg-4 col-sm-6">
161 |         <h3>Body loading</h3>
162 | 
163 |         <div>
164 |           <button id="loading-body-btn" class="btn btn-primary btn-block">
165 |             Click me to add a loading state to the page's body
166 |           </button>
167 | 
168 |           <button id="loading-body2-btn" class="btn btn-primary btn-block">
169 |             Second body loading, different configs
170 |           </button>
171 |         </div>
172 | 
173 |         <script>
174 |           $("#loading-body-btn").click(function() {
175 |             $("body").loading({
176 |               stoppable: true
177 |             });
178 |           });
179 | 
180 |           $("#loading-body2-btn").click(function() {
181 |             $("body").loading({
182 |               stoppable: true,
183 |               message: "Body loading, another message...",
184 |               theme: "dark"
185 |             });
186 |           });
187 |         </script>
188 |       </div>
189 | 
190 |       <div class="example col-lg-4 col-sm-6">
191 |         <h3>:loading selector</h3>
192 | 
193 |         <div>
194 |           <button id="stop-all" class="btn btn-primary btn-block">
195 |             Stop all currently open
196 |           </button>
197 |         </div>
198 | 
199 |         <script>
200 |           $("#stop-all").click(function() {
201 |             $(":loading").loading("stop");
202 |           });
203 |         </script>
204 |       </div>
205 | 
206 |       <div class="example col-lg-4 col-sm-6">
207 |         <h3><code>start</code> option</h3>
208 | 
209 |         <div id="loading-lazy-start" class="loading-div">
210 |           This div is not started on initialization
211 |         </div>
212 | 
213 |         <button id="loading-lazy-start-btn" class="btn btn-primary btn-block">
214 |           But it will if you click here
215 |         </button>
216 | 
217 |         <script>
218 |           $("#loading-lazy-start").loading({
219 |             theme: "dark",
220 |             message: "Lazy start",
221 |             start: false
222 |           });
223 | 
224 |           $("#loading-lazy-start-btn").click(function() {
225 |             $("#loading-lazy-start").loading("start");
226 |           });
227 |         </script>
228 |       </div>
229 | 
230 |       <div id="custom-overlay">
231 |         <div class="loading-spinner">
232 |           Loading (custom)...
233 |         </div>
234 |       </div>
235 | 
236 |       <div class="example col-lg-4 col-sm-6">
237 |         <h3>Custom overlay</h3>
238 | 
239 |         <div id="loading-custom-overlay" class="loading-div loading-blink">
240 |           This div has a custom overlay element
241 |         </div>
242 | 
243 |         <script>
244 |           $("#loading-custom-overlay").loading({
245 |             overlay: $("#custom-overlay")
246 |           });
247 |         </script>
248 |       </div>
249 |     </div>
250 | 
251 |     <footer class="container text-right">
252 |       <a href="#">Top &uarr;</a>
253 |     </footer>
254 | 
255 |     <script>
256 |       $(".loading-div").each(function() {
257 |         $(this).css(
258 |           "background-color",
259 |           randomColor({
260 |             luminosity: "dark"
261 |           })
262 |         );
263 |       });
264 | 
265 |       setInterval(function() {
266 |         $(".loading-blink").loading("toggle");
267 |       }, 2000);
268 |     </script>
269 |   </body>
270 | </html>
271 | 


--------------------------------------------------------------------------------
/dist/jquery.loading.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory(require("jquery"));
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define(["jquery"], factory);
  6 | 	else {
  7 | 		var a = typeof exports === 'object' ? factory(require("jquery")) : factory(root["jQuery"]);
  8 | 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
  9 | 	}
 10 | })(window, function(__WEBPACK_EXTERNAL_MODULE_jquery__) {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | /******/
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | /******/
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId]) {
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | /******/ 		}
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			i: moduleId,
 25 | /******/ 			l: false,
 26 | /******/ 			exports: {}
 27 | /******/ 		};
 28 | /******/
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | /******/
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.l = true;
 34 | /******/
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | /******/
 39 | /******/
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | /******/
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | /******/
 46 | /******/ 	// define getter function for harmony exports
 47 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 48 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 49 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 50 | /******/ 		}
 51 | /******/ 	};
 52 | /******/
 53 | /******/ 	// define __esModule on exports
 54 | /******/ 	__webpack_require__.r = function(exports) {
 55 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 56 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 57 | /******/ 		}
 58 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 59 | /******/ 	};
 60 | /******/
 61 | /******/ 	// create a fake namespace object
 62 | /******/ 	// mode & 1: value is a module id, require it
 63 | /******/ 	// mode & 2: merge all properties of value into the ns
 64 | /******/ 	// mode & 4: return value when already ns object
 65 | /******/ 	// mode & 8|1: behave like require
 66 | /******/ 	__webpack_require__.t = function(value, mode) {
 67 | /******/ 		if(mode & 1) value = __webpack_require__(value);
 68 | /******/ 		if(mode & 8) return value;
 69 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 70 | /******/ 		var ns = Object.create(null);
 71 | /******/ 		__webpack_require__.r(ns);
 72 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 73 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 74 | /******/ 		return ns;
 75 | /******/ 	};
 76 | /******/
 77 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 78 | /******/ 	__webpack_require__.n = function(module) {
 79 | /******/ 		var getter = module && module.__esModule ?
 80 | /******/ 			function getDefault() { return module['default']; } :
 81 | /******/ 			function getModuleExports() { return module; };
 82 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 83 | /******/ 		return getter;
 84 | /******/ 	};
 85 | /******/
 86 | /******/ 	// Object.prototype.hasOwnProperty.call
 87 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 88 | /******/
 89 | /******/ 	// __webpack_public_path__
 90 | /******/ 	__webpack_require__.p = "";
 91 | /******/
 92 | /******/
 93 | /******/ 	// Load entry module and return exports
 94 | /******/ 	return __webpack_require__(__webpack_require__.s = "./src/loading.js");
 95 | /******/ })
 96 | /************************************************************************/
 97 | /******/ ({
 98 | 
 99 | /***/ "./node_modules/css-loader/dist/cjs.js!./src/loading.css":
100 | /*!***************************************************************!*\
101 |   !*** ./node_modules/css-loader/dist/cjs.js!./src/loading.css ***!
102 |   \***************************************************************/
103 | /*! no static exports found */
104 | /***/ (function(module, exports, __webpack_require__) {
105 | 
106 | eval("exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\")(false);\n// Module\nexports.push([module.i, \"/* Default jquery-loading styles */\\r\\n\\r\\n.loading-overlay {\\r\\n  display: table;\\r\\n  opacity: 0.7;\\r\\n}\\r\\n\\r\\n.loading-overlay-content {\\r\\n  text-transform: uppercase;\\r\\n  letter-spacing: 0.4em;\\r\\n  font-size: 1.15em;\\r\\n  font-weight: bold;\\r\\n  text-align: center;\\r\\n  display: table-cell;\\r\\n  vertical-align: middle;\\r\\n}\\r\\n\\r\\n.loading-overlay.loading-theme-light {\\r\\n  background-color: #fff;\\r\\n  color: #000;\\r\\n}\\r\\n\\r\\n.loading-overlay.loading-theme-dark {\\r\\n  background-color: #000;\\r\\n  color: #fff;\\r\\n}\\r\\n\", \"\"]);\n\n\n//# sourceURL=webpack:///./src/loading.css?./node_modules/css-loader/dist/cjs.js");
107 | 
108 | /***/ }),
109 | 
110 | /***/ "./node_modules/css-loader/dist/runtime/api.js":
111 | /*!*****************************************************!*\
112 |   !*** ./node_modules/css-loader/dist/runtime/api.js ***!
113 |   \*****************************************************/
114 | /*! no static exports found */
115 | /***/ (function(module, exports, __webpack_require__) {
116 | 
117 | "use strict";
118 | eval("\n\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\n// eslint-disable-next-line func-names\nmodule.exports = function (useSourceMap) {\n  var list = []; // return the list of modules as css string\n\n  list.toString = function toString() {\n    return this.map(function (item) {\n      var content = cssWithMappingToString(item, useSourceMap);\n\n      if (item[2]) {\n        return \"@media \".concat(item[2], \"{\").concat(content, \"}\");\n      }\n\n      return content;\n    }).join('');\n  }; // import a list of modules into the list\n  // eslint-disable-next-line func-names\n\n\n  list.i = function (modules, mediaQuery) {\n    if (typeof modules === 'string') {\n      // eslint-disable-next-line no-param-reassign\n      modules = [[null, modules, '']];\n    }\n\n    var alreadyImportedModules = {};\n\n    for (var i = 0; i < this.length; i++) {\n      // eslint-disable-next-line prefer-destructuring\n      var id = this[i][0];\n\n      if (id != null) {\n        alreadyImportedModules[id] = true;\n      }\n    }\n\n    for (var _i = 0; _i < modules.length; _i++) {\n      var item = modules[_i]; // skip already imported module\n      // this implementation is not 100% perfect for weird media query combinations\n      // when a module is imported multiple times with different media queries.\n      // I hope this will never occur (Hey this way we have smaller bundles)\n\n      if (item[0] == null || !alreadyImportedModules[item[0]]) {\n        if (mediaQuery && !item[2]) {\n          item[2] = mediaQuery;\n        } else if (mediaQuery) {\n          item[2] = \"(\".concat(item[2], \") and (\").concat(mediaQuery, \")\");\n        }\n\n        list.push(item);\n      }\n    }\n  };\n\n  return list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n  var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring\n\n  var cssMapping = item[3];\n\n  if (!cssMapping) {\n    return content;\n  }\n\n  if (useSourceMap && typeof btoa === 'function') {\n    var sourceMapping = toComment(cssMapping);\n    var sourceURLs = cssMapping.sources.map(function (source) {\n      return \"/*# sourceURL=\".concat(cssMapping.sourceRoot).concat(source, \" */\");\n    });\n    return [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n  }\n\n  return [content].join('\\n');\n} // Adapted from convert-source-map (MIT)\n\n\nfunction toComment(sourceMap) {\n  // eslint-disable-next-line no-undef\n  var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n  var data = \"sourceMappingURL=data:application/json;charset=utf-8;base64,\".concat(base64);\n  return \"/*# \".concat(data, \" */\");\n}\n\n//# sourceURL=webpack:///./node_modules/css-loader/dist/runtime/api.js?");
119 | 
120 | /***/ }),
121 | 
122 | /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":
123 | /*!****************************************************************************!*\
124 |   !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
125 |   \****************************************************************************/
126 | /*! no static exports found */
127 | /***/ (function(module, exports, __webpack_require__) {
128 | 
129 | "use strict";
130 | eval("\n\nvar stylesInDom = {};\n\nvar isOldIE = function isOldIE() {\n  var memo;\n  return function memorize() {\n    if (typeof memo === 'undefined') {\n      // Test for IE <= 9 as proposed by Browserhacks\n      // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\n      // Tests for existence of standard globals is to allow style-loader\n      // to operate correctly into non-standard environments\n      // @see https://github.com/webpack-contrib/style-loader/issues/177\n      memo = Boolean(window && document && document.all && !window.atob);\n    }\n\n    return memo;\n  };\n}();\n\nvar getTarget = function getTarget() {\n  var memo = {};\n  return function memorize(target) {\n    if (typeof memo[target] === 'undefined') {\n      var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\n      if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n        try {\n          // This will throw an exception if access to iframe is blocked\n          // due to cross-origin restrictions\n          styleTarget = styleTarget.contentDocument.head;\n        } catch (e) {\n          // istanbul ignore next\n          styleTarget = null;\n        }\n      }\n\n      memo[target] = styleTarget;\n    }\n\n    return memo[target];\n  };\n}();\n\nfunction listToStyles(list, options) {\n  var styles = [];\n  var newStyles = {};\n\n  for (var i = 0; i < list.length; i++) {\n    var item = list[i];\n    var id = options.base ? item[0] + options.base : item[0];\n    var css = item[1];\n    var media = item[2];\n    var sourceMap = item[3];\n    var part = {\n      css: css,\n      media: media,\n      sourceMap: sourceMap\n    };\n\n    if (!newStyles[id]) {\n      styles.push(newStyles[id] = {\n        id: id,\n        parts: [part]\n      });\n    } else {\n      newStyles[id].parts.push(part);\n    }\n  }\n\n  return styles;\n}\n\nfunction addStylesToDom(styles, options) {\n  for (var i = 0; i < styles.length; i++) {\n    var item = styles[i];\n    var domStyle = stylesInDom[item.id];\n    var j = 0;\n\n    if (domStyle) {\n      domStyle.refs++;\n\n      for (; j < domStyle.parts.length; j++) {\n        domStyle.parts[j](item.parts[j]);\n      }\n\n      for (; j < item.parts.length; j++) {\n        domStyle.parts.push(addStyle(item.parts[j], options));\n      }\n    } else {\n      var parts = [];\n\n      for (; j < item.parts.length; j++) {\n        parts.push(addStyle(item.parts[j], options));\n      }\n\n      stylesInDom[item.id] = {\n        id: item.id,\n        refs: 1,\n        parts: parts\n      };\n    }\n  }\n}\n\nfunction insertStyleElement(options) {\n  var style = document.createElement('style');\n\n  if (typeof options.attributes.nonce === 'undefined') {\n    var nonce =  true ? __webpack_require__.nc : undefined;\n\n    if (nonce) {\n      options.attributes.nonce = nonce;\n    }\n  }\n\n  Object.keys(options.attributes).forEach(function (key) {\n    style.setAttribute(key, options.attributes[key]);\n  });\n\n  if (typeof options.insert === 'function') {\n    options.insert(style);\n  } else {\n    var target = getTarget(options.insert || 'head');\n\n    if (!target) {\n      throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n    }\n\n    target.appendChild(style);\n  }\n\n  return style;\n}\n\nfunction removeStyleElement(style) {\n  // istanbul ignore if\n  if (style.parentNode === null) {\n    return false;\n  }\n\n  style.parentNode.removeChild(style);\n}\n/* istanbul ignore next  */\n\n\nvar replaceText = function replaceText() {\n  var textStore = [];\n  return function replace(index, replacement) {\n    textStore[index] = replacement;\n    return textStore.filter(Boolean).join('\\n');\n  };\n}();\n\nfunction applyToSingletonTag(style, index, remove, obj) {\n  var css = remove ? '' : obj.css; // For old IE\n\n  /* istanbul ignore if  */\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = replaceText(index, css);\n  } else {\n    var cssNode = document.createTextNode(css);\n    var childNodes = style.childNodes;\n\n    if (childNodes[index]) {\n      style.removeChild(childNodes[index]);\n    }\n\n    if (childNodes.length) {\n      style.insertBefore(cssNode, childNodes[index]);\n    } else {\n      style.appendChild(cssNode);\n    }\n  }\n}\n\nfunction applyToTag(style, options, obj) {\n  var css = obj.css;\n  var media = obj.media;\n  var sourceMap = obj.sourceMap;\n\n  if (media) {\n    style.setAttribute('media', media);\n  }\n\n  if (sourceMap && btoa) {\n    css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n  } // For old IE\n\n  /* istanbul ignore if  */\n\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    while (style.firstChild) {\n      style.removeChild(style.firstChild);\n    }\n\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nvar singleton = null;\nvar singletonCounter = 0;\n\nfunction addStyle(obj, options) {\n  var style;\n  var update;\n  var remove;\n\n  if (options.singleton) {\n    var styleIndex = singletonCounter++;\n    style = singleton || (singleton = insertStyleElement(options));\n    update = applyToSingletonTag.bind(null, style, styleIndex, false);\n    remove = applyToSingletonTag.bind(null, style, styleIndex, true);\n  } else {\n    style = insertStyleElement(options);\n    update = applyToTag.bind(null, style, options);\n\n    remove = function remove() {\n      removeStyleElement(style);\n    };\n  }\n\n  update(obj);\n  return function updateStyle(newObj) {\n    if (newObj) {\n      if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {\n        return;\n      }\n\n      update(obj = newObj);\n    } else {\n      remove();\n    }\n  };\n}\n\nmodule.exports = function (list, options) {\n  options = options || {};\n  options.attributes = typeof options.attributes === 'object' ? options.attributes : {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n  // tags it will allow on a page\n\n  if (!options.singleton && typeof options.singleton !== 'boolean') {\n    options.singleton = isOldIE();\n  }\n\n  var styles = listToStyles(list, options);\n  addStylesToDom(styles, options);\n  return function update(newList) {\n    var mayRemove = [];\n\n    for (var i = 0; i < styles.length; i++) {\n      var item = styles[i];\n      var domStyle = stylesInDom[item.id];\n\n      if (domStyle) {\n        domStyle.refs--;\n        mayRemove.push(domStyle);\n      }\n    }\n\n    if (newList) {\n      var newStyles = listToStyles(newList, options);\n      addStylesToDom(newStyles, options);\n    }\n\n    for (var _i = 0; _i < mayRemove.length; _i++) {\n      var _domStyle = mayRemove[_i];\n\n      if (_domStyle.refs === 0) {\n        for (var j = 0; j < _domStyle.parts.length; j++) {\n          _domStyle.parts[j]();\n        }\n\n        delete stylesInDom[_domStyle.id];\n      }\n    }\n  };\n};\n\n//# sourceURL=webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?");
131 | 
132 | /***/ }),
133 | 
134 | /***/ "./src/loading.css":
135 | /*!*************************!*\
136 |   !*** ./src/loading.css ***!
137 |   \*************************/
138 | /*! no static exports found */
139 | /***/ (function(module, exports, __webpack_require__) {
140 | 
141 | eval("var content = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js!./loading.css */ \"./node_modules/css-loader/dist/cjs.js!./src/loading.css\");\n\nif (typeof content === 'string') {\n  content = [[module.i, content, '']];\n}\n\nvar options = {}\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = __webpack_require__(/*! ../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\")(content, options);\n\nif (content.locals) {\n  module.exports = content.locals;\n}\n\n\n//# sourceURL=webpack:///./src/loading.css?");
142 | 
143 | /***/ }),
144 | 
145 | /***/ "./src/loading.js":
146 | /*!************************!*\
147 |   !*** ./src/loading.js ***!
148 |   \************************/
149 | /*! no exports provided */
150 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
151 | 
152 | "use strict";
153 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ \"jquery\");\n/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _loading_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./loading.css */ \"./src/loading.css\");\n/* harmony import */ var _loading_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_loading_css__WEBPACK_IMPORTED_MODULE_1__);\n\r\n\r\n\r\nconst Loading = function(element, options) {\r\n  this.element = element;\r\n  this.settings = jquery__WEBPACK_IMPORTED_MODULE_0___default.a.extend({}, Loading.defaults, options);\r\n  this.settings.fullPage = this.element.is(\"body\");\r\n\r\n  this.init();\r\n\r\n  if (this.settings.start) {\r\n    this.start();\r\n  }\r\n};\r\n\r\nLoading.defaults = {\r\n  /**\r\n   * jQuery element to be used as overlay\r\n   * If not defined, a default overlay will be created\r\n   */\r\n  overlay: undefined,\r\n\r\n  /**\r\n   * z-index to be used by the default overlay\r\n   * If not defined, a z-index will be calculated based on the\r\n   * target's z-index\r\n   * Has no effect if a custom overlay is defined\r\n   */\r\n  zIndex: undefined,\r\n\r\n  /**\r\n   * Message to be rendered on the overlay content\r\n   * Has no effect if a custom overlay is defined\r\n   */\r\n  message: \"Loading...\",\r\n\r\n  /**\r\n   * Theme to be applied on the loading element\r\n   *\r\n   * Some default themes are implemented on `jquery.loading.css`, but you can\r\n   *  define your own. Just add a `.loading-theme-my_awesome_theme` selector\r\n   *  somewhere with your custom styles and change this option\r\n   *  to 'my_awesome_theme'. The class is applied to the parent overlay div\r\n   *\r\n   * Has no effect if a custom overlay is defined\r\n   */\r\n  theme: \"light\",\r\n\r\n  /**\r\n   * Class(es) to be applied to the overlay element when the loading state is started\r\n   */\r\n  shownClass: \"loading-shown\",\r\n\r\n  /**\r\n   * Class(es) to be applied to the overlay element when the loading state is stopped\r\n   */\r\n  hiddenClass: \"loading-hidden\",\r\n\r\n  /**\r\n   * Set to true to stop the loading state if the overlay is clicked\r\n   * This options does NOT override the onClick event\r\n   */\r\n  stoppable: false,\r\n\r\n  /**\r\n   * Set to false to not start the loading state when initialized\r\n   */\r\n  start: true,\r\n\r\n  /**\r\n   * Function to be executed when the loading state is started\r\n   * Receives the loading object as parameter\r\n   *\r\n   * The function is attached to the `loading.start` event\r\n   */\r\n  onStart: function(loading) {\r\n    loading.overlay.fadeIn(150);\r\n  },\r\n\r\n  /**\r\n   * Function to be executed when the loading state is stopped\r\n   * Receives the loading object as parameter\r\n   *\r\n   * The function is attached to the `loading.stop` event\r\n   */\r\n  onStop: function(loading) {\r\n    loading.overlay.fadeOut(150);\r\n  },\r\n\r\n  /**\r\n   * Function to be executed when the overlay is clicked\r\n   * Receives the loading object as parameter\r\n   *\r\n   * The function is attached to the `loading.click` event\r\n   */\r\n  onClick: function() {}\r\n};\r\n\r\n/**\r\n * Extend the Loading plugin default settings with the user options\r\n * Use it as `$.Loading.setDefaults({ ... })`\r\n *\r\n * @param {Object} options Custom options to override the plugin defaults\r\n */\r\nLoading.setDefaults = function(options) {\r\n  Loading.defaults = jquery__WEBPACK_IMPORTED_MODULE_0___default.a.extend({}, Loading.defaults, options);\r\n};\r\n\r\njquery__WEBPACK_IMPORTED_MODULE_0___default.a.extend(Loading.prototype, {\r\n  /**\r\n   * Initializes the overlay and attach handlers to the appropriate events\r\n   */\r\n  init: function() {\r\n    this.isActive = false;\r\n    this.overlay = this.settings.overlay || this.createOverlay();\r\n    this.resize();\r\n    this.attachMethodsToExternalEvents();\r\n    this.attachOptionsHandlers();\r\n  },\r\n\r\n  /**\r\n   * Return a new default overlay\r\n   *\r\n   * @return {jQuery} A new overlay already appended to the page's body\r\n   */\r\n  createOverlay: function() {\r\n    var overlay = jquery__WEBPACK_IMPORTED_MODULE_0___default()(\r\n      '<div class=\"loading-overlay loading-theme-' +\r\n        this.settings.theme +\r\n        '\"><div class=\"loading-overlay-content\">' +\r\n        this.settings.message +\r\n        \"</div></div>\"\r\n    )\r\n      .addClass(this.settings.hiddenClass)\r\n      .hide()\r\n      .appendTo(\"body\");\r\n\r\n    var elementID = this.element.attr(\"id\");\r\n    if (elementID) {\r\n      overlay.attr(\"id\", elementID + \"_loading-overlay\");\r\n    }\r\n\r\n    return overlay;\r\n  },\r\n\r\n  /**\r\n   * Attach some internal methods to external events\r\n   * e.g. overlay click, window resize etc\r\n   */\r\n  attachMethodsToExternalEvents: function() {\r\n    var self = this;\r\n\r\n    // Add `shownClass` and remove `hiddenClass` from overlay when loading state\r\n    // is activated\r\n    self.element.on(\"loading.start\", function() {\r\n      self.overlay\r\n        .removeClass(self.settings.hiddenClass)\r\n        .addClass(self.settings.shownClass);\r\n    });\r\n\r\n    // Add `hiddenClass` and remove `shownClass` from overlay when loading state\r\n    // is stopped\r\n    self.element.on(\"loading.stop\", function() {\r\n      self.overlay\r\n        .removeClass(self.settings.shownClass)\r\n        .addClass(self.settings.hiddenClass);\r\n    });\r\n\r\n    // Attach the 'stop loading on click' behaviour if the `stoppable` option is set\r\n    if (self.settings.stoppable) {\r\n      self.overlay.on(\"click\", function() {\r\n        self.stop();\r\n      });\r\n    }\r\n\r\n    // Trigger the `loading.click` event if the overlay is clicked\r\n    self.overlay.on(\"click\", function() {\r\n      self.element.trigger(\"loading.click\", self);\r\n    });\r\n\r\n    // Bind the `resize` method to `window.resize`\r\n    jquery__WEBPACK_IMPORTED_MODULE_0___default()(window).on(\"resize\", function() {\r\n      self.resize();\r\n    });\r\n\r\n    // Bind the `resize` method to `document.ready` to guarantee right\r\n    // positioning and dimensions after the page is loaded\r\n    jquery__WEBPACK_IMPORTED_MODULE_0___default()(function() {\r\n      self.resize();\r\n    });\r\n  },\r\n\r\n  /**\r\n   * Attach the handlers defined on `options` for the respective events\r\n   */\r\n  attachOptionsHandlers: function() {\r\n    var self = this;\r\n\r\n    self.element.on(\"loading.start\", function(event, loading) {\r\n      self.settings.onStart(loading);\r\n    });\r\n\r\n    self.element.on(\"loading.stop\", function(event, loading) {\r\n      self.settings.onStop(loading);\r\n    });\r\n\r\n    self.element.on(\"loading.click\", function(event, loading) {\r\n      self.settings.onClick(loading);\r\n    });\r\n  },\r\n\r\n  /**\r\n   * Calculate the z-index for the default overlay element\r\n   * Return the z-index passed as setting to the plugin or calculate it\r\n   * based on the target's z-index\r\n   */\r\n  calcZIndex: function() {\r\n    if (this.settings.zIndex !== undefined) {\r\n      return this.settings.zIndex;\r\n    } else {\r\n      return (\r\n        (parseInt(this.element.css(\"z-index\")) || 0) +\r\n        1 +\r\n        this.settings.fullPage\r\n      );\r\n    }\r\n  },\r\n\r\n  /**\r\n   * Reposition the overlay on the top of the target element\r\n   * This method needs to be called if the target element changes position\r\n   *  or dimension\r\n   */\r\n  resize: function() {\r\n    var self = this;\r\n\r\n    var element = self.element,\r\n      totalWidth = element.outerWidth(),\r\n      totalHeight = element.outerHeight();\r\n\r\n    if (this.settings.fullPage) {\r\n      totalHeight = \"100%\";\r\n      totalWidth = \"100%\";\r\n    }\r\n\r\n    this.overlay.css({\r\n      position: self.settings.fullPage ? \"fixed\" : \"absolute\",\r\n      zIndex: self.calcZIndex(),\r\n      top: element.offset().top,\r\n      left: element.offset().left,\r\n      width: totalWidth,\r\n      height: totalHeight\r\n    });\r\n  },\r\n\r\n  /**\r\n   * Trigger the `loading.start` event and turn on the loading state\r\n   */\r\n  start: function() {\r\n    this.isActive = true;\r\n    this.resize();\r\n    this.element.trigger(\"loading.start\", this);\r\n  },\r\n\r\n  /**\r\n   * Trigger the `loading.stop` event and turn off the loading state\r\n   */\r\n  stop: function() {\r\n    this.isActive = false;\r\n    this.element.trigger(\"loading.stop\", this);\r\n  },\r\n\r\n  /**\r\n   * Check whether the loading state is active or not\r\n   *\r\n   * @return {Boolean}\r\n   */\r\n  active: function() {\r\n    return this.isActive;\r\n  },\r\n\r\n  /**\r\n   * Toggle the state of the loading overlay\r\n   */\r\n  toggle: function() {\r\n    if (this.active()) {\r\n      this.stop();\r\n    } else {\r\n      this.start();\r\n    }\r\n  },\r\n\r\n  /**\r\n   * Destroy plugin instance.\r\n   */\r\n  destroy: function() {\r\n    this.overlay.remove();\r\n  }\r\n});\r\n\r\n/**\r\n * Name of the data attribute where the plugin object will be stored\r\n */\r\nvar dataAttr = \"jquery-loading\";\r\n\r\n/**\r\n * Initializes the plugin and return a chainable jQuery object\r\n *\r\n * @param {Object} [options] Initialization options. Extends `Loading.defaults`\r\n * @return {jQuery}\r\n */\r\njquery__WEBPACK_IMPORTED_MODULE_0___default.a.fn.loading = function(options) {\r\n  return this.each(function() {\r\n    // (Try to) retrieve an existing plugin object associated with element\r\n    var loading = jquery__WEBPACK_IMPORTED_MODULE_0___default.a.data(this, dataAttr);\r\n\r\n    if (!loading) {\r\n      // First call. Initialize and save plugin object\r\n      if (\r\n        options === undefined ||\r\n        typeof options === \"object\" ||\r\n        options === \"start\" ||\r\n        options === \"toggle\"\r\n      ) {\r\n        // Initialize it just if argument is undefined, a config object\r\n        // or a direct call to 'start' or 'toggle' methods\r\n        jquery__WEBPACK_IMPORTED_MODULE_0___default.a.data(this, dataAttr, new Loading(jquery__WEBPACK_IMPORTED_MODULE_0___default()(this), options));\r\n      }\r\n    } else {\r\n      // Already initialized\r\n      if (options === undefined) {\r\n        // $(...).loading() call. Call the 'start' by default\r\n        loading.start();\r\n      } else if (typeof options === \"string\") {\r\n        // $(...).loading('method') call. Execute 'method'\r\n        loading[options].apply(loading);\r\n      } else {\r\n        // $(...).loading({...}) call. New configurations. Reinitialize\r\n        // plugin object with new config options and start the plugin\r\n        // Also, destroy the old overlay instance\r\n        loading.destroy();\r\n        jquery__WEBPACK_IMPORTED_MODULE_0___default.a.data(this, dataAttr, new Loading(jquery__WEBPACK_IMPORTED_MODULE_0___default()(this), options));\r\n      }\r\n    }\r\n  });\r\n};\r\n\r\n/**\r\n * Return the loading object associated to the element or initialize it\r\n * This method is interesting if you need the plugin object to access the\r\n * internal API\r\n * Example: `$('#some-element').Loading().toggle()`\r\n *\r\n * @param {Object} [options] Initialization options. If new options are given\r\n * to a previously initialized object, the old ones are overriden and the\r\n * plugin restarted\r\n * @return {Loading}\r\n */\r\njquery__WEBPACK_IMPORTED_MODULE_0___default.a.fn.Loading = function(options) {\r\n  var loading = jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).data(dataAttr);\r\n\r\n  if (!loading || options !== undefined) {\r\n    jquery__WEBPACK_IMPORTED_MODULE_0___default()(this).data(dataAttr, (loading = new Loading(jquery__WEBPACK_IMPORTED_MODULE_0___default()(this), options)));\r\n  }\r\n\r\n  return loading;\r\n};\r\n\r\n/**\r\n * Create the `:loading` jQuery selector\r\n * Return all the jQuery elements with the loading state active\r\n *\r\n * Using the `:not(:loading)` will return all jQuery elements that are not\r\n *  loading, even the ones with the plugin not attached.\r\n *\r\n * Examples of usage:\r\n *  `$(':loading')` to get all the elements with the loading state active\r\n *  `$('#my-element').is(':loading')` to check if the element is loading\r\n */\r\njquery__WEBPACK_IMPORTED_MODULE_0___default.a.expr[\":\"].loading = function(element) {\r\n  var loadingObj = jquery__WEBPACK_IMPORTED_MODULE_0___default.a.data(element, dataAttr);\r\n\r\n  if (!loadingObj) {\r\n    return false;\r\n  }\r\n\r\n  return loadingObj.active();\r\n};\r\n\r\njquery__WEBPACK_IMPORTED_MODULE_0___default.a.Loading = Loading;\r\n\n\n//# sourceURL=webpack:///./src/loading.js?");
154 | 
155 | /***/ }),
156 | 
157 | /***/ "jquery":
158 | /*!******************************************************************************************!*\
159 |   !*** external {"root":"jQuery","commonjs":"jquery","commonjs2":"jquery","amd":"jquery"} ***!
160 |   \******************************************************************************************/
161 | /*! no static exports found */
162 | /***/ (function(module, exports) {
163 | 
164 | eval("module.exports = __WEBPACK_EXTERNAL_MODULE_jquery__;\n\n//# sourceURL=webpack:///external_%7B%22root%22:%22jQuery%22,%22commonjs%22:%22jquery%22,%22commonjs2%22:%22jquery%22,%22amd%22:%22jquery%22%7D?");
165 | 
166 | /***/ })
167 | 
168 | /******/ });
169 | });


--------------------------------------------------------------------------------
/dist/jquery.loading.min.js:
--------------------------------------------------------------------------------
1 | !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("jquery"));else if("function"==typeof define&&define.amd)define(["jquery"],e);else{var n="object"==typeof exports?e(require("jquery")):e(t.jQuery);for(var i in n)("object"==typeof exports?exports:t)[i]=n[i]}}(window,function(t){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(e,n){e.exports=t},function(t,e,n){"use strict";n.r(e);var i=n(0),o=n.n(i);n(2);const r=function(t,e){this.element=t,this.settings=o.a.extend({},r.defaults,e),this.settings.fullPage=this.element.is("body"),this.init(),this.settings.start&&this.start()};r.defaults={overlay:void 0,zIndex:void 0,message:"Loading...",theme:"light",shownClass:"loading-shown",hiddenClass:"loading-hidden",stoppable:!1,start:!0,onStart:function(t){t.overlay.fadeIn(150)},onStop:function(t){t.overlay.fadeOut(150)},onClick:function(){}},r.setDefaults=function(t){r.defaults=o.a.extend({},r.defaults,t)},o.a.extend(r.prototype,{init:function(){this.isActive=!1,this.overlay=this.settings.overlay||this.createOverlay(),this.resize(),this.attachMethodsToExternalEvents(),this.attachOptionsHandlers()},createOverlay:function(){var t=o()('<div class="loading-overlay loading-theme-'+this.settings.theme+'"><div class="loading-overlay-content">'+this.settings.message+"</div></div>").addClass(this.settings.hiddenClass).hide().appendTo("body"),e=this.element.attr("id");return e&&t.attr("id",e+"_loading-overlay"),t},attachMethodsToExternalEvents:function(){var t=this;t.element.on("loading.start",function(){t.overlay.removeClass(t.settings.hiddenClass).addClass(t.settings.shownClass)}),t.element.on("loading.stop",function(){t.overlay.removeClass(t.settings.shownClass).addClass(t.settings.hiddenClass)}),t.settings.stoppable&&t.overlay.on("click",function(){t.stop()}),t.overlay.on("click",function(){t.element.trigger("loading.click",t)}),o()(window).on("resize",function(){t.resize()}),o()(function(){t.resize()})},attachOptionsHandlers:function(){var t=this;t.element.on("loading.start",function(e,n){t.settings.onStart(n)}),t.element.on("loading.stop",function(e,n){t.settings.onStop(n)}),t.element.on("loading.click",function(e,n){t.settings.onClick(n)})},calcZIndex:function(){return void 0!==this.settings.zIndex?this.settings.zIndex:(parseInt(this.element.css("z-index"))||0)+1+this.settings.fullPage},resize:function(){var t=this.element,e=t.outerWidth(),n=t.outerHeight();this.settings.fullPage&&(n="100%",e="100%"),this.overlay.css({position:this.settings.fullPage?"fixed":"absolute",zIndex:this.calcZIndex(),top:t.offset().top,left:t.offset().left,width:e,height:n})},start:function(){this.isActive=!0,this.resize(),this.element.trigger("loading.start",this)},stop:function(){this.isActive=!1,this.element.trigger("loading.stop",this)},active:function(){return this.isActive},toggle:function(){this.active()?this.stop():this.start()},destroy:function(){this.overlay.remove()}});var s="jquery-loading";o.a.fn.loading=function(t){return this.each(function(){var e=o.a.data(this,s);e?void 0===t?e.start():"string"==typeof t?e[t].apply(e):(e.destroy(),o.a.data(this,s,new r(o()(this),t))):void 0!==t&&"object"!=typeof t&&"start"!==t&&"toggle"!==t||o.a.data(this,s,new r(o()(this),t))})},o.a.fn.Loading=function(t){var e=o()(this).data(s);return e&&void 0===t||o()(this).data(s,e=new r(o()(this),t)),e},o.a.expr[":"].loading=function(t){var e=o.a.data(t,s);return!!e&&e.active()},o.a.Loading=r},function(t,e,n){var i=n(3);"string"==typeof i&&(i=[[t.i,i,""]]);var o={insert:"head",singleton:!1};n(5)(i,o);i.locals&&(t.exports=i.locals)},function(t,e,n){(t.exports=n(4)(!1)).push([t.i,"/* Default jquery-loading styles */\r\n\r\n.loading-overlay {\r\n  display: table;\r\n  opacity: 0.7;\r\n}\r\n\r\n.loading-overlay-content {\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.4em;\r\n  font-size: 1.15em;\r\n  font-weight: bold;\r\n  text-align: center;\r\n  display: table-cell;\r\n  vertical-align: middle;\r\n}\r\n\r\n.loading-overlay.loading-theme-light {\r\n  background-color: #fff;\r\n  color: #000;\r\n}\r\n\r\n.loading-overlay.loading-theme-dark {\r\n  background-color: #000;\r\n  color: #fff;\r\n}\r\n",""])},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var o=(s=i,a=btoa(unescape(encodeURIComponent(JSON.stringify(s)))),l="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(a),"/*# ".concat(l," */")),r=i.sources.map(function(t){return"/*# sourceURL=".concat(i.sourceRoot).concat(t," */")});return[n].concat(r).concat([o]).join("\n")}var s,a,l;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2],"{").concat(n,"}"):n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var i={},o=0;o<this.length;o++){var r=this[o][0];null!=r&&(i[r]=!0)}for(var s=0;s<t.length;s++){var a=t[s];null!=a[0]&&i[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="(".concat(a[2],") and (").concat(n,")")),e.push(a))}},e}},function(t,e,n){"use strict";var i,o={},r=function(){return void 0===i&&(i=Boolean(window&&document&&document.all&&!window.atob)),i},s=function(){var t={};return function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}t[e]=n}return t[e]}}();function a(t,e){for(var n=[],i={},o=0;o<t.length;o++){var r=t[o],s=e.base?r[0]+e.base:r[0],a={css:r[1],media:r[2],sourceMap:r[3]};i[s]?i[s].parts.push(a):n.push(i[s]={id:s,parts:[a]})}return n}function l(t,e){for(var n=0;n<t.length;n++){var i=t[n],r=o[i.id],s=0;if(r){for(r.refs++;s<r.parts.length;s++)r.parts[s](i.parts[s]);for(;s<i.parts.length;s++)r.parts.push(v(i.parts[s],e))}else{for(var a=[];s<i.parts.length;s++)a.push(v(i.parts[s],e));o[i.id]={id:i.id,refs:1,parts:a}}}}function c(t){var e=document.createElement("style");if(void 0===t.attributes.nonce){var i=n.nc;i&&(t.attributes.nonce=i)}if(Object.keys(t.attributes).forEach(function(n){e.setAttribute(n,t.attributes[n])}),"function"==typeof t.insert)t.insert(e);else{var o=s(t.insert||"head");if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(e)}return e}var u,d=(u=[],function(t,e){return u[t]=e,u.filter(Boolean).join("\n")});function f(t,e,n,i){var o=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=d(e,o);else{var r=document.createTextNode(o),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(r,s[e]):t.appendChild(r)}}var h=null,p=0;function v(t,e){var n,i,o;if(e.singleton){var r=p++;n=h||(h=c(e)),i=f.bind(null,n,r,!1),o=f.bind(null,n,r,!0)}else n=c(e),i=function(t,e,n){var i=n.css,o=n.media,r=n.sourceMap;if(o&&t.setAttribute("media",o),r&&btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}.bind(null,n,e),o=function(){!function(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t)}(n)};return i(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;i(t=e)}else o()}}t.exports=function(t,e){(e=e||{}).attributes="object"==typeof e.attributes?e.attributes:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=r());var n=a(t,e);return l(n,e),function(t){for(var i=[],r=0;r<n.length;r++){var s=n[r],c=o[s.id];c&&(c.refs--,i.push(c))}t&&l(a(t,e),e);for(var u=0;u<i.length;u++){var d=i[u];if(0===d.refs){for(var f=0;f<d.parts.length;f++)d.parts[f]();delete o[d.id]}}}}}])});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery-easy-loading",
 3 |   "version": "2.0.0-rc.2",
 4 |   "description": "Easily add and manipulate loading states of any element on the page",
 5 |   "keywords": [
 6 |     "jquery",
 7 |     "jquery-plugin",
 8 |     "ecosystem:jquery",
 9 |     "overlay",
10 |     "loading",
11 |     "loader",
12 |     "ajax"
13 |   ],
14 |   "author": "Carlos Bonetti <carlosbonetti.mail@gmail.com>",
15 |   "license": "MIT",
16 |   "url": "http://github.com/CarlosBonetti/jquery-loading",
17 |   "repository": "http://github.com/CarlosBonetti/jquery-loading",
18 |   "homepage": "http://carlosbonetti.github.io/jquery-loading/",
19 |   "main": "./dist/jquery.loading.js",
20 |   "husky": {
21 |     "hooks": {
22 |       "pre-commit": "pretty-quick --staged"
23 |     }
24 |   },
25 |   "scripts": {
26 |     "start": "webpack --watch",
27 |     "build": "webpack && cross-env NODE_ENV=production webpack -p",
28 |     "test": "jest",
29 |     "preversion": "npm run build && git add dist/",
30 |     "eslint": "eslint src/**/*.js test/**/*.js"
31 |   },
32 |   "peerDependencies": {
33 |     "jquery": ">=1.7"
34 |   },
35 |   "devDependencies": {
36 |     "cross-env": "5.2.0",
37 |     "css-loader": "3.2.0",
38 |     "eslint": "6.1.0",
39 |     "husky": "3.0.3",
40 |     "jest": "24.8.0",
41 |     "jquery": "1.11.1",
42 |     "prettier": "1.18.2",
43 |     "pretty-quick": "1.11.1",
44 |     "style-loader": "1.0.0",
45 |     "webpack": "4.39.1",
46 |     "webpack-cli": "3.3.6"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/loading.css:
--------------------------------------------------------------------------------
 1 | /* Default jquery-loading styles */
 2 | 
 3 | .loading-overlay {
 4 |   display: table;
 5 |   opacity: 0.7;
 6 | }
 7 | 
 8 | .loading-overlay-content {
 9 |   text-transform: uppercase;
10 |   letter-spacing: 0.4em;
11 |   font-size: 1.15em;
12 |   font-weight: bold;
13 |   text-align: center;
14 |   display: table-cell;
15 |   vertical-align: middle;
16 | }
17 | 
18 | .loading-overlay.loading-theme-light {
19 |   background-color: #fff;
20 |   color: #000;
21 | }
22 | 
23 | .loading-overlay.loading-theme-dark {
24 |   background-color: #000;
25 |   color: #fff;
26 | }
27 | 


--------------------------------------------------------------------------------
/src/loading.js:
--------------------------------------------------------------------------------
  1 | import $ from "jquery";
  2 | import "./loading.css";
  3 | 
  4 | const Loading = function(element, options) {
  5 |   this.element = element;
  6 |   this.settings = $.extend({}, Loading.defaults, options);
  7 |   this.settings.fullPage = this.element.is("body");
  8 | 
  9 |   this.init();
 10 | 
 11 |   if (this.settings.start) {
 12 |     this.start();
 13 |   }
 14 | };
 15 | 
 16 | Loading.defaults = {
 17 |   /**
 18 |    * jQuery element to be used as overlay
 19 |    * If not defined, a default overlay will be created
 20 |    */
 21 |   overlay: undefined,
 22 | 
 23 |   /**
 24 |    * z-index to be used by the default overlay
 25 |    * If not defined, a z-index will be calculated based on the
 26 |    * target's z-index
 27 |    * Has no effect if a custom overlay is defined
 28 |    */
 29 |   zIndex: undefined,
 30 | 
 31 |   /**
 32 |    * Message to be rendered on the overlay content
 33 |    * Has no effect if a custom overlay is defined
 34 |    */
 35 |   message: "Loading...",
 36 | 
 37 |   /**
 38 |    * Theme to be applied on the loading element
 39 |    *
 40 |    * Some default themes are implemented on `jquery.loading.css`, but you can
 41 |    *  define your own. Just add a `.loading-theme-my_awesome_theme` selector
 42 |    *  somewhere with your custom styles and change this option
 43 |    *  to 'my_awesome_theme'. The class is applied to the parent overlay div
 44 |    *
 45 |    * Has no effect if a custom overlay is defined
 46 |    */
 47 |   theme: "light",
 48 | 
 49 |   /**
 50 |    * Class(es) to be applied to the overlay element when the loading state is started
 51 |    */
 52 |   shownClass: "loading-shown",
 53 | 
 54 |   /**
 55 |    * Class(es) to be applied to the overlay element when the loading state is stopped
 56 |    */
 57 |   hiddenClass: "loading-hidden",
 58 | 
 59 |   /**
 60 |    * Set to true to stop the loading state if the overlay is clicked
 61 |    * This options does NOT override the onClick event
 62 |    */
 63 |   stoppable: false,
 64 | 
 65 |   /**
 66 |    * Set to false to not start the loading state when initialized
 67 |    */
 68 |   start: true,
 69 | 
 70 |   /**
 71 |    * Function to be executed when the loading state is started
 72 |    * Receives the loading object as parameter
 73 |    *
 74 |    * The function is attached to the `loading.start` event
 75 |    */
 76 |   onStart: function(loading) {
 77 |     loading.overlay.fadeIn(150);
 78 |   },
 79 | 
 80 |   /**
 81 |    * Function to be executed when the loading state is stopped
 82 |    * Receives the loading object as parameter
 83 |    *
 84 |    * The function is attached to the `loading.stop` event
 85 |    */
 86 |   onStop: function(loading) {
 87 |     loading.overlay.fadeOut(150);
 88 |   },
 89 | 
 90 |   /**
 91 |    * Function to be executed when the overlay is clicked
 92 |    * Receives the loading object as parameter
 93 |    *
 94 |    * The function is attached to the `loading.click` event
 95 |    */
 96 |   onClick: function() {}
 97 | };
 98 | 
 99 | /**
100 |  * Extend the Loading plugin default settings with the user options
101 |  * Use it as `$.Loading.setDefaults({ ... })`
102 |  *
103 |  * @param {Object} options Custom options to override the plugin defaults
104 |  */
105 | Loading.setDefaults = function(options) {
106 |   Loading.defaults = $.extend({}, Loading.defaults, options);
107 | };
108 | 
109 | $.extend(Loading.prototype, {
110 |   /**
111 |    * Initializes the overlay and attach handlers to the appropriate events
112 |    */
113 |   init: function() {
114 |     this.isActive = false;
115 |     this.overlay = this.settings.overlay || this.createOverlay();
116 |     this.resize();
117 |     this.attachMethodsToExternalEvents();
118 |     this.attachOptionsHandlers();
119 |   },
120 | 
121 |   /**
122 |    * Return a new default overlay
123 |    *
124 |    * @return {jQuery} A new overlay already appended to the page's body
125 |    */
126 |   createOverlay: function() {
127 |     var overlay = $(
128 |       '<div class="loading-overlay loading-theme-' +
129 |         this.settings.theme +
130 |         '"><div class="loading-overlay-content">' +
131 |         this.settings.message +
132 |         "</div></div>"
133 |     )
134 |       .addClass(this.settings.hiddenClass)
135 |       .hide()
136 |       .appendTo("body");
137 | 
138 |     var elementID = this.element.attr("id");
139 |     if (elementID) {
140 |       overlay.attr("id", elementID + "_loading-overlay");
141 |     }
142 | 
143 |     return overlay;
144 |   },
145 | 
146 |   /**
147 |    * Attach some internal methods to external events
148 |    * e.g. overlay click, window resize etc
149 |    */
150 |   attachMethodsToExternalEvents: function() {
151 |     var self = this;
152 | 
153 |     // Add `shownClass` and remove `hiddenClass` from overlay when loading state
154 |     // is activated
155 |     self.element.on("loading.start", function() {
156 |       self.overlay
157 |         .removeClass(self.settings.hiddenClass)
158 |         .addClass(self.settings.shownClass);
159 |     });
160 | 
161 |     // Add `hiddenClass` and remove `shownClass` from overlay when loading state
162 |     // is stopped
163 |     self.element.on("loading.stop", function() {
164 |       self.overlay
165 |         .removeClass(self.settings.shownClass)
166 |         .addClass(self.settings.hiddenClass);
167 |     });
168 | 
169 |     // Attach the 'stop loading on click' behaviour if the `stoppable` option is set
170 |     if (self.settings.stoppable) {
171 |       self.overlay.on("click", function() {
172 |         self.stop();
173 |       });
174 |     }
175 | 
176 |     // Trigger the `loading.click` event if the overlay is clicked
177 |     self.overlay.on("click", function() {
178 |       self.element.trigger("loading.click", self);
179 |     });
180 | 
181 |     // Bind the `resize` method to `window.resize`
182 |     $(window).on("resize", function() {
183 |       self.resize();
184 |     });
185 | 
186 |     // Bind the `resize` method to `document.ready` to guarantee right
187 |     // positioning and dimensions after the page is loaded
188 |     $(function() {
189 |       self.resize();
190 |     });
191 |   },
192 | 
193 |   /**
194 |    * Attach the handlers defined on `options` for the respective events
195 |    */
196 |   attachOptionsHandlers: function() {
197 |     var self = this;
198 | 
199 |     self.element.on("loading.start", function(event, loading) {
200 |       self.settings.onStart(loading);
201 |     });
202 | 
203 |     self.element.on("loading.stop", function(event, loading) {
204 |       self.settings.onStop(loading);
205 |     });
206 | 
207 |     self.element.on("loading.click", function(event, loading) {
208 |       self.settings.onClick(loading);
209 |     });
210 |   },
211 | 
212 |   /**
213 |    * Calculate the z-index for the default overlay element
214 |    * Return the z-index passed as setting to the plugin or calculate it
215 |    * based on the target's z-index
216 |    */
217 |   calcZIndex: function() {
218 |     if (this.settings.zIndex !== undefined) {
219 |       return this.settings.zIndex;
220 |     } else {
221 |       return (
222 |         (parseInt(this.element.css("z-index")) || 0) +
223 |         1 +
224 |         this.settings.fullPage
225 |       );
226 |     }
227 |   },
228 | 
229 |   /**
230 |    * Reposition the overlay on the top of the target element
231 |    * This method needs to be called if the target element changes position
232 |    *  or dimension
233 |    */
234 |   resize: function() {
235 |     var self = this;
236 | 
237 |     var element = self.element,
238 |       totalWidth = element.outerWidth(),
239 |       totalHeight = element.outerHeight();
240 | 
241 |     if (this.settings.fullPage) {
242 |       totalHeight = "100%";
243 |       totalWidth = "100%";
244 |     }
245 | 
246 |     this.overlay.css({
247 |       position: self.settings.fullPage ? "fixed" : "absolute",
248 |       zIndex: self.calcZIndex(),
249 |       top: element.offset().top,
250 |       left: element.offset().left,
251 |       width: totalWidth,
252 |       height: totalHeight
253 |     });
254 |   },
255 | 
256 |   /**
257 |    * Trigger the `loading.start` event and turn on the loading state
258 |    */
259 |   start: function() {
260 |     this.isActive = true;
261 |     this.resize();
262 |     this.element.trigger("loading.start", this);
263 |   },
264 | 
265 |   /**
266 |    * Trigger the `loading.stop` event and turn off the loading state
267 |    */
268 |   stop: function() {
269 |     this.isActive = false;
270 |     this.element.trigger("loading.stop", this);
271 |   },
272 | 
273 |   /**
274 |    * Check whether the loading state is active or not
275 |    *
276 |    * @return {Boolean}
277 |    */
278 |   active: function() {
279 |     return this.isActive;
280 |   },
281 | 
282 |   /**
283 |    * Toggle the state of the loading overlay
284 |    */
285 |   toggle: function() {
286 |     if (this.active()) {
287 |       this.stop();
288 |     } else {
289 |       this.start();
290 |     }
291 |   },
292 | 
293 |   /**
294 |    * Destroy plugin instance.
295 |    */
296 |   destroy: function() {
297 |     this.overlay.remove();
298 |   }
299 | });
300 | 
301 | /**
302 |  * Name of the data attribute where the plugin object will be stored
303 |  */
304 | var dataAttr = "jquery-loading";
305 | 
306 | /**
307 |  * Initializes the plugin and return a chainable jQuery object
308 |  *
309 |  * @param {Object} [options] Initialization options. Extends `Loading.defaults`
310 |  * @return {jQuery}
311 |  */
312 | $.fn.loading = function(options) {
313 |   return this.each(function() {
314 |     // (Try to) retrieve an existing plugin object associated with element
315 |     var loading = $.data(this, dataAttr);
316 | 
317 |     if (!loading) {
318 |       // First call. Initialize and save plugin object
319 |       if (
320 |         options === undefined ||
321 |         typeof options === "object" ||
322 |         options === "start" ||
323 |         options === "toggle"
324 |       ) {
325 |         // Initialize it just if argument is undefined, a config object
326 |         // or a direct call to 'start' or 'toggle' methods
327 |         $.data(this, dataAttr, new Loading($(this), options));
328 |       }
329 |     } else {
330 |       // Already initialized
331 |       if (options === undefined) {
332 |         // $(...).loading() call. Call the 'start' by default
333 |         loading.start();
334 |       } else if (typeof options === "string") {
335 |         // $(...).loading('method') call. Execute 'method'
336 |         loading[options].apply(loading);
337 |       } else {
338 |         // $(...).loading({...}) call. New configurations. Reinitialize
339 |         // plugin object with new config options and start the plugin
340 |         // Also, destroy the old overlay instance
341 |         loading.destroy();
342 |         $.data(this, dataAttr, new Loading($(this), options));
343 |       }
344 |     }
345 |   });
346 | };
347 | 
348 | /**
349 |  * Return the loading object associated to the element or initialize it
350 |  * This method is interesting if you need the plugin object to access the
351 |  * internal API
352 |  * Example: `$('#some-element').Loading().toggle()`
353 |  *
354 |  * @param {Object} [options] Initialization options. If new options are given
355 |  * to a previously initialized object, the old ones are overriden and the
356 |  * plugin restarted
357 |  * @return {Loading}
358 |  */
359 | $.fn.Loading = function(options) {
360 |   var loading = $(this).data(dataAttr);
361 | 
362 |   if (!loading || options !== undefined) {
363 |     $(this).data(dataAttr, (loading = new Loading($(this), options)));
364 |   }
365 | 
366 |   return loading;
367 | };
368 | 
369 | /**
370 |  * Create the `:loading` jQuery selector
371 |  * Return all the jQuery elements with the loading state active
372 |  *
373 |  * Using the `:not(:loading)` will return all jQuery elements that are not
374 |  *  loading, even the ones with the plugin not attached.
375 |  *
376 |  * Examples of usage:
377 |  *  `$(':loading')` to get all the elements with the loading state active
378 |  *  `$('#my-element').is(':loading')` to check if the element is loading
379 |  */
380 | $.expr[":"].loading = function(element) {
381 |   var loadingObj = $.data(element, dataAttr);
382 | 
383 |   if (!loadingObj) {
384 |     return false;
385 |   }
386 | 
387 |   return loadingObj.active();
388 | };
389 | 
390 | $.Loading = Loading;
391 | 


--------------------------------------------------------------------------------
/test/jquery.loading.test.js:
--------------------------------------------------------------------------------
  1 | const $ = require("jquery");
  2 | require("../dist/jquery.loading");
  3 | 
  4 | // Translate assert functions to jest assertions
  5 | // Remove this after migrate to jest assertions
  6 | const assert = {
  7 |   ok: function(expr) {
  8 |     expect(expr).toBeTruthy();
  9 |   },
 10 |   equal: function(obj1, obj2) {
 11 |     expect(obj1).toEqual(obj2);
 12 |   },
 13 |   notEqual: function(obj1, obj2) {
 14 |     expect(obj1).not.toEqual(obj2);
 15 |   }
 16 | };
 17 | 
 18 | describe("jquery-loading", function() {
 19 |   var div, div2;
 20 | 
 21 |   beforeEach(function() {
 22 |     div = $('<div id="test-div">Test div</div>');
 23 |     div2 = $('<div style="z-index: 100">Test div #2</div>');
 24 |   });
 25 | 
 26 |   afterEach(function() {
 27 |     div.loading("destroy");
 28 |     div2.loading("destroy");
 29 |   });
 30 | 
 31 |   test("if loading jquery function is chainable", function() {
 32 |     assert.ok(div.loading() instanceof $, "loading is chainable");
 33 |   });
 34 | 
 35 |   test("if loading object is accessible by Loading jquery method", function() {
 36 |     div.loading();
 37 |     assert.ok(
 38 |       div.Loading() instanceof $.Loading,
 39 |       "Started elements have a valid Loading object"
 40 |     );
 41 |     assert.equal(
 42 |       div.Loading().element.attr("id"),
 43 |       "test-div",
 44 |       "Loading object has reference to the right element"
 45 |     );
 46 |   });
 47 | 
 48 |   test("Loading jquery method as plugin initializer", function() {
 49 |     var obj = div.Loading();
 50 |     assert.ok(
 51 |       obj instanceof $.Loading,
 52 |       "Plugin is initialized by first Loading call"
 53 |     );
 54 |     assert.equal(
 55 |       div.Loading(),
 56 |       obj,
 57 |       "Second call to Loading return previously created Loading object"
 58 |     );
 59 | 
 60 |     assert.equal(obj.active(), true);
 61 |     div.loading("stop");
 62 |     assert.equal(
 63 |       obj.active(),
 64 |       false,
 65 |       "loading() function has access to same object created by Loading()"
 66 |     );
 67 |   });
 68 | 
 69 |   test("if subsequent calls of Loading with new config options reinitialize the plugin object", function() {
 70 |     // Using $.fn.Loading
 71 |     var obj1 = div.Loading({
 72 |       message: "First call"
 73 |     });
 74 | 
 75 |     var obj2 = div.Loading({
 76 |       message: "Second call"
 77 |     });
 78 |     assert.notEqual(obj1, obj2, "Underlying plugin object should change");
 79 |     assert.equal(
 80 |       obj2.settings.message,
 81 |       "Second call",
 82 |       "New config options should be considered"
 83 |     );
 84 |   });
 85 | 
 86 |   test("if subsequent calls of loading with new config options reinitialize the plugin object", function() {
 87 |     // Using $.fn.loading
 88 |     div.loading({
 89 |       message: "First call"
 90 |     });
 91 |     var obj1 = div.data("jquery-loading");
 92 | 
 93 |     div.loading({
 94 |       message: "Second call"
 95 |     });
 96 |     var obj2 = div.data("jquery-loading");
 97 | 
 98 |     assert.notEqual(obj1, obj2, "Underlying plugin object should change");
 99 |     assert.equal(
100 |       obj2.settings.message,
101 |       "Second call",
102 |       "New config options should be considered"
103 |     );
104 |   });
105 | 
106 |   test("events and triggers", function() {
107 |     var mustBeTrueStart = false;
108 |     div.on("loading.start", function(event, loading) {
109 |       mustBeTrueStart = true;
110 |       assert.ok(
111 |         loading instanceof $.Loading,
112 |         "Loading object is send as parameter to loading.start handler"
113 |       );
114 |     });
115 |     div.loading();
116 |     assert.ok(
117 |       mustBeTrueStart,
118 |       "start method trigger the loading.start handlers"
119 |     );
120 | 
121 |     var mustBeTrueStop = false;
122 |     div.on("loading.stop", function(event, loading) {
123 |       mustBeTrueStop = true;
124 |       assert.ok(
125 |         loading instanceof $.Loading,
126 |         "Loading object is send as parameter to loading.stop handler"
127 |       );
128 |     });
129 |     div.loading("stop");
130 |     assert.ok(mustBeTrueStop, "stop method trigger the loading.stop handlers");
131 | 
132 |     var mustBeTrueClick = false;
133 |     div.on("loading.click", function(event, loading) {
134 |       mustBeTrueClick = true;
135 |       assert.ok(
136 |         loading instanceof $.Loading,
137 |         "Loading object is send as parameter to loading.click handler"
138 |       );
139 |     });
140 |     div.Loading().overlay.trigger("click");
141 |     assert.ok(
142 |       mustBeTrueClick,
143 |       "click method trigger the loading.click handlers"
144 |     );
145 |   });
146 | 
147 |   test("active flag", function() {
148 |     div.loading();
149 |     div.off("loading.start").off("loading.stop");
150 | 
151 |     assert.equal(
152 |       div.Loading().active(),
153 |       true,
154 |       "Active state is turned on on initialization"
155 |     );
156 | 
157 |     div.loading("stop");
158 |     assert.equal(
159 |       div.Loading().active(),
160 |       false,
161 |       "Active state is turned off if stopped, even with events disabled"
162 |     );
163 | 
164 |     div.loading("start");
165 |     assert.equal(
166 |       div.Loading().active(),
167 |       true,
168 |       "Active state is turned on if started, even with events disabled"
169 |     );
170 |   });
171 | 
172 |   test(":loading selector", function() {
173 |     assert.equal(
174 |       div.is(":loading"),
175 |       false,
176 |       "Not loading elements return false to selector"
177 |     );
178 | 
179 |     div.loading();
180 |     assert.equal(
181 |       div.is(":loading"),
182 |       true,
183 |       "Loading elements return true to selector"
184 |     );
185 | 
186 |     div.loading("stop");
187 |     assert.equal(
188 |       div.is(":loading"),
189 |       false,
190 |       "Stopped elements return false to selector"
191 |     );
192 |   });
193 | 
194 |   test("start option", function() {
195 |     div.loading({
196 |       start: false
197 |     });
198 | 
199 |     assert.equal(
200 |       div.Loading().active(),
201 |       false,
202 |       "Loading object is not started if `start` options is set to false"
203 |     );
204 |   });
205 | 
206 |   test("if shownClass is applied to overlay elements", function() {
207 |     var shownClass = $.Loading.defaults.shownClass;
208 |     var obj = div.Loading();
209 | 
210 |     assert.ok(
211 |       !obj.createOverlay().hasClass(shownClass),
212 |       "`shownClass` is not applied to the default overlay when it is created"
213 |     );
214 | 
215 |     assert.ok(
216 |       obj.overlay.hasClass($.Loading.defaults.shownClass),
217 |       "`shownClass` is applied to overlay at initialization"
218 |     );
219 | 
220 |     div.loading("stop");
221 |     assert.ok(
222 |       !obj.overlay.hasClass($.Loading.defaults.shownClass),
223 |       "`shownClass` is removed from overlay when loading state is stopped"
224 |     );
225 | 
226 |     div.loading("start");
227 |     assert.ok(
228 |       obj.overlay.hasClass($.Loading.defaults.shownClass),
229 |       "`shownClass` is applied to overlay when loading state is started again"
230 |     );
231 |   });
232 | 
233 |   test("if hiddenClass is applied to overlay elements", function() {
234 |     var hiddenClass = $.Loading.defaults.hiddenClass;
235 |     var obj = div.Loading();
236 | 
237 |     assert.ok(
238 |       obj.createOverlay().hasClass(hiddenClass),
239 |       "`hiddenClass` is applied to the default overlay when it is created"
240 |     );
241 | 
242 |     assert.ok(
243 |       !obj.overlay.hasClass(hiddenClass),
244 |       "`hiddenClass` is applied to overlay at initialization"
245 |     );
246 | 
247 |     div.loading("stop");
248 |     assert.ok(
249 |       obj.overlay.hasClass(hiddenClass),
250 |       "`hiddenClass` is applied to overlay when loading state is stopped"
251 |     );
252 | 
253 |     div.loading("start");
254 |     assert.ok(
255 |       !obj.overlay.hasClass(hiddenClass),
256 |       "`hiddenClass` is removed from overlay when loading state is started again"
257 |     );
258 |   });
259 | 
260 |   test("if overlay detects z-index of the target element", function() {
261 |     var load = div.Loading();
262 |     assert.equal(
263 |       load.overlay.css("z-index"),
264 |       "1",
265 |       "Overlay z-index set to 1 if target has no index defined"
266 |     );
267 | 
268 |     var bodyLoad = $("body").Loading();
269 |     assert.equal(
270 |       bodyLoad.overlay.css("z-index"),
271 |       "2",
272 |       "Body overlay z-index set to 2 if body has no index defined"
273 |     );
274 | 
275 |     var load2 = div2.Loading();
276 |     assert.equal(
277 |       load2.overlay.css("z-index"),
278 |       "101",
279 |       "Overlay z-index set to target z-index + 1"
280 |     );
281 | 
282 |     div2.css("z-index", 50);
283 |     load2.resize();
284 |     assert.equal(
285 |       load2.overlay.css("z-index"),
286 |       "51",
287 |       "Overlay z-index changed if target element changed"
288 |     );
289 |   });
290 | 
291 |   test("if zIndex option is used by the default plugin's overlay", function() {
292 |     var obj = div.Loading({
293 |       zIndex: 42
294 |     });
295 |     assert.equal(
296 |       obj.overlay.css("z-index"),
297 |       "42",
298 |       "Overlay z-index should be the one passed as plugin setting"
299 |     );
300 | 
301 |     obj = div2.Loading({
302 |       zIndex: 1e5
303 |     });
304 |     assert.equal(
305 |       obj.overlay.css("z-index"),
306 |       "100000",
307 |       "Overlay z-index should be the one passed as plugin setting"
308 |     );
309 |   });
310 | 
311 |   test("first call with different argument types and values", function() {
312 |     var div3 = $("<span></span>");
313 |     var div4 = $("<div></div>");
314 |     var div5 = $("<p></p>");
315 |     var div6 = $("<div></div>");
316 | 
317 |     assert.ok(div.loading().data("jquery-loading"));
318 |     assert.ok(div2.loading({}).data("jquery-loading"));
319 |     assert.ok(div3.loading("start").data("jquery-loading"));
320 |     assert.ok(div4.loading("toggle").data("jquery-loading"));
321 | 
322 |     assert.ok(!div5.loading("stop").data("jquery-loading"));
323 |     assert.ok(!div6.loading("test").data("jquery-loading"));
324 |   });
325 | 
326 |   test("destroy method should remove overlay from DOM", function() {
327 |     div.loading();
328 |     div.loading("stop");
329 |     assert.equal(
330 |       div.Loading().overlay.parents("body").length,
331 |       1,
332 |       "Overlay should be kept attached to body when loading just stopped"
333 |     );
334 | 
335 |     div.loading("destroy");
336 |     assert.equal(
337 |       div.Loading().overlay.parents("body").length,
338 |       0,
339 |       "Overlay should be removed from body when loading destroyed"
340 |     );
341 |   });
342 | 
343 |   test("when new settings are passed to element already initialized", function() {
344 |     div.loading();
345 |     var overlay1 = div.Loading().overlay;
346 | 
347 |     div.loading({ message: "Second message" });
348 |     assert.equal(
349 |       overlay1.parents("body").length,
350 |       0,
351 |       "Old overlay should be destroyed"
352 |     );
353 |     assert.equal(
354 |       div.Loading().overlay.text(),
355 |       "Second message",
356 |       "New config should be used"
357 |     );
358 |   });
359 | });
360 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | 
 3 | module.exports = {
 4 |   entry: "./src/loading.js",
 5 |   mode: "development",
 6 |   output: {
 7 |     filename:
 8 |       process.env.NODE_ENV === "production"
 9 |         ? "jquery.loading.min.js"
10 |         : "jquery.loading.js",
11 |     path: path.resolve(__dirname, "dist"),
12 |     libraryTarget: "umd"
13 |   },
14 |   externals: {
15 |     jquery: {
16 |       root: "jQuery",
17 |       commonjs: "jquery",
18 |       commonjs2: "jquery",
19 |       amd: "jquery"
20 |     }
21 |   },
22 |   module: {
23 |     rules: [
24 |       {
25 |         test: /\.css$/i,
26 |         use: ["style-loader", "css-loader"]
27 |       }
28 |     ]
29 |   }
30 | };
31 | 


--------------------------------------------------------------------------------