Skip to content

Commit 96cca9b

Browse files
muhdfaizmuhdfaiz
committed
Feature to show loading overlay inside container. Options to adjust spinner position of X axis and Y axis. Feature to lock scroll when loading overlay active.
1 parent c4083a9 commit 96cca9b

13 files changed

+422
-146
lines changed

‎.DS_Store‎

10 KB
Binary file not shown.

‎CHANGELOG.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
This project adheres to Semantic Versioning.
6+
7+
## 1.1.0 - 2020-12-02
8+
9+
- Add option to adjust the spinner position for X axis and Y axis.
10+
- Add option to display loading overlay in the container instead of full page only.
11+
- Add option to lock screen when loading overlay has been shown.
12+
13+
## 1.0.5 - 2020-10-13
14+
15+
- Fixed coverall issue.
16+
17+
## 1.0.4 - 2020-10-08
18+
19+
- Fixed error when calling hide method during loading overlay not ective.
20+
21+
## 1.0.3 - 2020-04-03
22+
23+
- Fixed type main filename in package.json. Cause the user who install using NPM and YARN having an error when using it.
24+
25+
## 1.0.2 - 2020-01-08
26+
27+
- Fixed overlay and spinner position.
28+
29+
## 1.0.1 - 2020-11-12
30+
31+
- Use travis CI to run test and check coverage.
32+
- Update demo page and readme.
33+
34+
## 1.0.0 - 2019-11-10
35+
36+
- Initial release! 🎉

‎CONTRIBUTING.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Contributing
2+
3+
A big welcome and thank you for considering contributing to JS Loading Overlay open source projects!
4+
5+
Please read and understand the contribution guide before creating an issue or pull request.
6+
7+
## Etiquette
8+
9+
This project is open source, and as such, the maintainers give their free time to build and maintain the source code
10+
held within. They make the code freely available in the hope that it will be of use to other developers. It would be
11+
extremely unfair for them to suffer abuse or anger for their hard work.
12+
13+
Please be considerate towards maintainers when raising issues or presenting pull requests. Let's show the
14+
world that developers are civilized and selfless people.
15+
16+
It's the duty of the maintainer to ensure that all submissions to the project are of sufficient
17+
quality to benefit the project. Many developers have different skill sets, strengths, and weaknesses. Respect the maintainer's decision, and do not be upset or abusive if your submission is not used.
18+
19+
## Viability
20+
21+
When requesting or submitting new features, first consider whether it might be useful to others. Open
22+
source projects are used by many developers, who may have entirely different needs to your own. Think about
23+
whether or not your feature is likely to be used by other users of the project.
24+
25+
## Procedure
26+
27+
Before filing an issue:
28+
29+
- Attempt to replicate the problem, to ensure that it wasn't a coincidental incident.
30+
- Check to make sure your feature suggestion isn't already present within the project.
31+
- Check the pull requests tab to ensure that the bug doesn't have a fix in progress.
32+
- Check the pull requests tab to ensure that the feature isn't already in progress.
33+
34+
Before submitting a pull request:
35+
36+
- Check the codebase to ensure that your feature doesn't already exist.
37+
- Check the pull requests to ensure that another person hasn't already submitted the feature or fix.
38+
39+
## Requirements
40+
41+
- **Passed tests!** - Your patch won't be accepted if it the test failed. The existing tests must pass after your changes.
42+
43+
- **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
44+
45+
- **Consider our release cycle** - We try to follow [SemVer v2.0.0](https://semver.org/). Randomly breaking public APIs is not an option.
46+
47+
- **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
48+
49+
- **Send coherent history** - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](https://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting.
50+
51+
**Happy coding**!

‎demo/index.html‎

Lines changed: 97 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ <h4>List Of Spinner Icons</h4>
2323

2424
<div class="row mt-5">
2525
<div class="col-6 col-md-3 col-lg-2 mb-5">
26-
<div class="btn btn-primary" onclick="JsLoadingOverlay.show({'spinnerIcon': 'ball-8bits'});">
26+
<div id="test" class="btn btn-primary" onclick="JsLoadingOverlay.show({'spinnerIcon': 'ball-8bits', 'offsetX': '-30px', 'containerID': 'test', 'spinnerSize': '1x'});">
2727
ball-8bits
2828
</div>
2929
</div>
@@ -460,19 +460,113 @@ <h4>Custom Spinner Size</h4>
460460
</div>
461461
</div>
462462
</div>
463+
464+
<div class="row mt-4">
465+
<div class="col-12 text-center">
466+
<h4>Offset Spinner Position</h4>
467+
</div>
468+
</div>
469+
470+
<div class="row mt-4">
471+
<div class="col-6 col-md-3 col-lg-2 mb-5">
472+
<div class="btn btn-primary" onclick="JsLoadingOverlay.show({'spinnerIcon': 'cog', 'offsetX': '-10%'});">
473+
Offset X
474+
</div>
475+
</div>
476+
477+
<div class="col-6 col-md-3 col-lg-2 mb-5">
478+
<div class="btn btn-primary" onclick="JsLoadingOverlay.show({'spinnerIcon': 'cog', 'offsetY': '20%'});">
479+
Offset Y
480+
</div>
481+
</div>
482+
</div>
483+
484+
<div class="row mt-4">
485+
<div class="col-12 text-center">
486+
<h4>Show loading overlay within the container</h4>
487+
</div>
488+
</div>
489+
490+
<div class="row mt-3">
491+
<div class="col-4">
492+
<div id="table">
493+
<h4>Sample Table</h4>
494+
<table class="table">
495+
<tr>
496+
<th>Company</th>
497+
<th>Contact</th>
498+
<th>Country</th>
499+
</tr>
500+
<tr>
501+
<td>Company 1</td>
502+
<td>Muhammad</td>
503+
<td>Malaysia</td>
504+
</tr>
505+
<tr>
506+
<td>Company 2</td>
507+
<td>Faiz</td>
508+
<td>Thailand</td>
509+
</tr>
510+
<tr>
511+
<td>Company 3</td>
512+
<td>Halim</td>
513+
<td>Indonesia</td>
514+
</tr>
515+
</table>
516+
</div>
517+
518+
<div class="btn btn-primary" onclick="JsLoadingOverlay.show({'spinnerIcon': 'cog', 'offsetY': '-12%', 'containerID': 'table', 'spinnerSize': '2x'});">
519+
Inside the table
520+
</div>
521+
</div>
522+
523+
<div class="col-4">
524+
<div id="card" class="card" style="width: 18rem;">
525+
<div class="card-body">
526+
<h5 class="card-title">Card title</h5>
527+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
528+
<a class="btn btn-danger" style="color: white">Go somewhere</a>
529+
</div>
530+
</div>
531+
532+
<div class="mt-5 btn btn-primary" onclick="JsLoadingOverlay.show({'spinnerIcon': 'cog', 'offsetY': '-5%', 'containerID': 'card', 'spinnerSize': '1x', 'lockScroll': true});">
533+
Inside Card
534+
</div>
535+
</div>
536+
</div>
463537
</div>
464538
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
465539
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
466540
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
467-
<script src="../dist/js-loading-overlay.min.js"></script>
541+
<script src="../dist/js-loading-overlay.js"></script>
468542
<script>
469543
document.addEventListener('click',function(e){
544+
let defaultOptions = {
545+
'overlayBackgroundColor': '#666666',
546+
'overlayOpacity': 0.6,
547+
'spinnerIcon': 'ball-circus',
548+
'spinnerColor': '#000',
549+
'spinnerSize': '3x',
550+
'overlayIDName': 'overlay',
551+
'spinnerIDName': 'spinner',
552+
'offsetY': 0,
553+
'offsetX': 0,
554+
'lockScroll': false,
555+
'containerID': null,
556+
};
557+
558+
if (e.target.contains(document.getElementById('overlay'))) {
559+
JsLoadingOverlay.hide();
560+
JsLoadingOverlay.setOptions(defaultOptions);
561+
}
562+
470563
if(e.target && e.target.id == 'overlay'){
471564
JsLoadingOverlay.hide();
565+
JsLoadingOverlay.setOptions(defaultOptions);
472566
}
473567
if(e.target && e.target.id == 'spinner'){
474-
alert('asdsad');
475568
JsLoadingOverlay.hide();
569+
JsLoadingOverlay.setOptions(defaultOptions);
476570
}
477571
});
478572
</script>

‎dist/js-loading-overlay.js‎

Lines changed: 57 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)