Skip to content

Commit 924edd5

Browse files
ioigoumenikosev
ioigoume
authored and
nikosev
committed
Add comanage loader. Make loader pick configurable.
1 parent f971b76 commit 924edd5

11 files changed

Lines changed: 169 additions & 29 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ This version is compatible with [SimpleSAMLphp v1.18](https://simplesamlphp.org/
1616
- Add exception template for attrauthcomanage module
1717
- Add template for Email Confirmation
1818
- Add configurable theme wrapper for simple html views
19+
- Add comanage loader
20+
- Add support to configure loader
1921

2022
### Fixed
2123

‎config-example/module_themevanilla.php‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,10 @@
7979
],
8080
],
8181
'views' => [
82-
// 'aup' => 'https://example.com/test.html',
82+
// 'aup' => 'https://example.com/aup.html', // Terms and Conditions URL. The key MUST BE `aup`
83+
// 'privacy' => 'https://example.com/privacy.html', // Privacy URL. The key MUST BE `privacy`
8384
],
85+
'loader' => 'loader', // Loading Spinner to use. Two options are available. `loader` or `cmg_loader`
8486
'enable_cookies_banner' => false,
8587
'ribbon_text' => '',
8688
];

‎themes/ssp/consent/consentform.php‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<?php
22

3-
$this->includeAtTemplateBase('includes/loader.php');
3+
// Get Configuration and set the loader
4+
$themeConfig = SimpleSAML\Configuration::getConfig('module_themevanilla.php');
5+
$loader = $themeConfig->getValue('loader');
6+
if (!empty($loader)) {
7+
$this->includeAtTemplateBase('includes/' . $loader . '.php');
8+
}
49

510
/**
611
* Template form for giving consent.

‎themes/ssp/default/includes/cmg_loader.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div id="cmg-loader" class="loader-container">
2+
<div class="redirect-box">
3+
<div class="lds-spinner">
4+
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
5+
</div>
6+
<span id="cmg-loader-comment" class="comment" style="display: none;">Please wait...</span>
7+
</div>
8+
</div>

‎themes/ssp/default/includes/loader.php‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
<div id="loader">
2-
<div class="sk-circle">
3-
<div class="sk-circle1 sk-child"></div>
4-
<div class="sk-circle2 sk-child"></div>
5-
<div class="sk-circle3 sk-child"></div>
6-
<div class="sk-circle4 sk-child"></div>
7-
<div class="sk-circle5 sk-child"></div>
8-
<div class="sk-circle6 sk-child"></div>
9-
<div class="sk-circle7 sk-child"></div>
10-
<div class="sk-circle8 sk-child"></div>
11-
<div class="sk-circle9 sk-child"></div>
12-
<div class="sk-circle10 sk-child"></div>
13-
<div class="sk-circle11 sk-child"></div>
14-
<div class="sk-circle12 sk-child"></div>
15-
</div>
1+
<div id="def-loader" class="loader-container">
2+
<div class="sk-circle">
3+
<div class="sk-circle1 sk-child"></div>
4+
<div class="sk-circle2 sk-child"></div>
5+
<div class="sk-circle3 sk-child"></div>
6+
<div class="sk-circle4 sk-child"></div>
7+
<div class="sk-circle5 sk-child"></div>
8+
<div class="sk-circle6 sk-child"></div>
9+
<div class="sk-circle7 sk-child"></div>
10+
<div class="sk-circle8 sk-child"></div>
11+
<div class="sk-circle9 sk-child"></div>
12+
<div class="sk-circle10 sk-child"></div>
13+
<div class="sk-circle11 sk-child"></div>
14+
<div class="sk-circle12 sk-child"></div>
15+
</div>
1616
</div>

‎themes/ssp/discopower/disco.tpl.php‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<?php
22

3-
$this->includeAtTemplateBase('includes/loader.php');
3+
// Get Configuration and set the loader
4+
$themeConfig = SimpleSAML\Configuration::getConfig('module_themevanilla.php');
5+
$loader = $themeConfig->getValue('loader');
6+
if (!empty($loader)) {
7+
$this->includeAtTemplateBase('includes/' . $loader . '.php');
8+
}
49

510
use Webmozart\Assert\Assert;
611

‎www/resources/js/theme.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,12 @@ $(document).ready(function() {
3535

3636
resizeAll();
3737
// loader for discopower view
38-
$('#loader').delay(300).fadeOut('slow', function() {
38+
$('.loader-container').delay(300).fadeOut('slow', function() {
3939
$('#favourite-modal').modal('show');
4040
});
41+
$("#yesbutton").on("click", function(){
42+
$(".loader-container").show();
43+
});
4144

4245
// hide modal smoothly
4346
$('.js-close-custom').click(function() {

‎www/resources/sass/_cmg_loader.scss‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
// Loader from https://loading.io/css/
2+
3+
// .loader-container {
4+
// position: fixed;
5+
// width: 100%;
6+
// height: 100%;
7+
// background: $white;
8+
// z-index: 10;
9+
// display: flex;
10+
// align-items: center;
11+
// justify-content: center;
12+
// }
13+
.redirect-box {
14+
margin: auto;
15+
height: auto;
16+
display: flex;
17+
flex-direction: column;
18+
}
19+
.comment {
20+
padding: 1rem;
21+
}
22+
.lds-spinner {
23+
display: inline-block;
24+
position: relative;
25+
margin: auto;
26+
width: 80px;
27+
height: 100px;
28+
}
29+
.lds-spinner div {
30+
transform-origin: 40px 50px; /*Second parameter is the inner radius*/
31+
animation: lds-spinner 1.2s linear infinite;
32+
}
33+
.lds-spinner div:after {
34+
content: " ";
35+
display: block;
36+
position: absolute;
37+
top: 3px;
38+
left: 37px;
39+
width: 7px;
40+
height: 30px;
41+
border-radius: 10%;
42+
background: #9FC6E2;
43+
}
44+
.lds-spinner div:nth-child(1) {
45+
transform: rotate(0deg);
46+
animation-delay: -1.1s;
47+
}
48+
.lds-spinner div:nth-child(2) {
49+
transform: rotate(30deg);
50+
animation-delay: -1s;
51+
}
52+
.lds-spinner div:nth-child(3) {
53+
transform: rotate(60deg);
54+
animation-delay: -0.9s;
55+
}
56+
.lds-spinner div:nth-child(4) {
57+
transform: rotate(90deg);
58+
animation-delay: -0.8s;
59+
}
60+
.lds-spinner div:nth-child(5) {
61+
transform: rotate(120deg);
62+
animation-delay: -0.7s;
63+
}
64+
.lds-spinner div:nth-child(6) {
65+
transform: rotate(150deg);
66+
animation-delay: -0.6s;
67+
}
68+
.lds-spinner div:nth-child(7) {
69+
transform: rotate(180deg);
70+
animation-delay: -0.5s;
71+
}
72+
.lds-spinner div:nth-child(8) {
73+
transform: rotate(210deg);
74+
animation-delay: -0.4s;
75+
}
76+
.lds-spinner div:nth-child(9) {
77+
transform: rotate(240deg);
78+
animation-delay: -0.3s;
79+
}
80+
.lds-spinner div:nth-child(10) {
81+
transform: rotate(270deg);
82+
animation-delay: -0.2s;
83+
}
84+
.lds-spinner div:nth-child(11) {
85+
transform: rotate(300deg);
86+
animation-delay: -0.1s;
87+
}
88+
.lds-spinner div:nth-child(12) {
89+
transform: rotate(330deg);
90+
animation-delay: 0s;
91+
}
92+
@keyframes lds-spinner {
93+
0% {
94+
opacity: 1;
95+
}
96+
100% {
97+
opacity: 0;
98+
}
99+
}

‎www/resources/sass/_extra.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,21 @@ body {
2929
flex-direction: column;
3030
}
3131

32+
.loader-container {
33+
position: fixed;
34+
width: 100%;
35+
height: 100%;
36+
background: $white;
37+
z-index: 10;
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
top: 0;
42+
bottom: 0;
43+
left: 0;
44+
right: 0;
45+
}
46+
3247
.ssp-container {
3348
flex: 1;
3449
margin-top: 12px;

‎www/resources/sass/_loader.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
// Loader from http://tobiasahlin.com/spinkit/
22

3-
#loader {
4-
position: absolute;
5-
width: 100%;
6-
height: 100%;
7-
background: $white;
8-
z-index: 10;
9-
display: flex;
10-
align-items: center;
11-
justify-content: center;
12-
}
3+
// #loader {
4+
// position: absolute;
5+
// width: 100%;
6+
// height: 100%;
7+
// background: $white;
8+
// z-index: 10;
9+
// display: flex;
10+
// align-items: center;
11+
// justify-content: center;
12+
// }
1313

1414
.sk-circle {
1515
margin: 100px auto;

0 commit comments

Comments
 (0)