mirror/moodle-auth_outage
1
0
Fork 0
mirror of https://github.com/catalyst/moodle-auth_outage.git synced 2026-05-16 21:41:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Issue #29 - UI improvements such as warning bar styling and texts.

Browse Source
This commit is contained in:
Daniel Thee Roperto
2016-09-14 10:21:23 +10:00
parent 92681c7ec4
commit aa378633f9
5 changed files with 90 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
views/warningbar.css
View File

@@ -1,35 +1,39 @@
/*
This file is used as default value for the 'auth_outage_css' settings.
If you need to make chances here, remember to update your settings inside Moodle.
If you need to make changes here, remember to update your settings inside Moodle.
*/
.auth_outage_warningbar {
background-color: white;
#auth_outage_warningbar_box {
background-color: red;
box-sizing: content-box;
color: white;
height: 90px;
left: 0;
padding: 0;
position: fixed;
text-align: center;
top: 0;
transition: height 10s linear;
width: 100%;
z-index: 9999;
}
.auth_outage_warningbar_box {
background-color: #ffcccc;
border-bottom: 2px dashed #a00000;
border-top: 2px dashed #a00000;
color: #a00000;
#auth_outage_warningbar_box.imminent {
background: purple;
}
.auth_outage_warningbar_center {
position: relative;
top: 50%;
margin-top: -45px;
}
.auth_outage_warningbar_box_countdown {
#auth_outage_warningbar_countdown {
font-size: 200%;
font-weight: bold;
margin: 10px 0;
}
.auth_outage_warningbar_box_message {
margin-bottom: 5px;
.auth_outage_warningbar_box_message A {
color: white;
}
.navbar.navbar-fixed-top {

50
views/warningbar.js Normal file
View File

@@ -0,0 +1,50 @@
var auth_outage_countdown = {
timer: null,
clienttime: Date.now(),
siteadmin: false,
init: function (countdown, siteadmin) {
this.countdown = countdown;
this.siteadmin = siteadmin;
this.divtext = document.getElementById('auth_outage_warningbar_countdown');
this.divblock = document.getElementById('auth_outage_warningbar_box');
this.text = this.divtext.innerHTML;
var $this = this;
this.timer = setInterval(function () {
$this.tick();
}, 1000);
this.tick();
},
tick: function () {
var elapsed = Math.round((Date.now() - this.clienttime) / 1000);
var missing = this.countdown - elapsed;
if (!this.siteadmin && (missing == 10)) {
this.divblock.className += ' imminent';
this.divblock.style.height = window.innerHeight + 'px';
}
if (missing <= 0) {
missing = 0;
clearInterval(this.timer);
if (!this.siteadmin) {
location = '/auth/outage/info.php';
}
}
this.divtext.innerHTML = this.text.replace('{{countdown}}', this.seconds2hms(missing));
},
seconds2hms: function (seconds) {
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
seconds %= 60;
minutes %= 60;
// Cross-browser simple solution for padding zeroes.
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
return hours + ':' + minutes + ':' + seconds;
}
};
// auth_outage_countdown is used outside this js file.
/* jshint unused:false */

90
views/warningbar.php
View File

@@ -27,84 +27,30 @@ if (!defined('MOODLE_INTERNAL')) {
die('Direct access to this script is forbidden.'); // It must be included from a Moodle page.
}
// If debugging include directly from file, otherwise use plugin settings.
echo html_writer::tag('style',
debugging() ? file_get_contents($CFG->dirroot . '/auth/outage/views/warningbar.css') : get_config('auth_outage', 'css')
);
echo html_writer::tag('style', get_config('auth_outage', 'css'));
?>
<div class="auth_outage_warningbar">
<div class="auth_outage_warningbar_box">
<div class="auth_outage_warningbar_box_countdown"
id="auth_outage_warningbar_countdown"><?php echo $countdown; ?></div>
<div id="auth_outage_warningbar_box">
<div class="auth_outage_warningbar_center">
<div id="auth_outage_warningbar_countdown"><?php echo $countdown; ?></div>
<div class="auth_outage_warningbar_box_message">
<?php echo $outage->get_title(); ?>
<small>
[<?php echo html_writer::link(
new moodle_url('/auth/outage/info.php', ['id' => $outage->id]),
get_string('readmore', 'auth_outage'),
['target' => 'outage']
); ?>]
</small>
<?php echo html_writer::link(
new moodle_url('/auth/outage/info.php', ['id' => $outage->id]),
$outage->get_title(),
['target' => 'outage']
); ?>
</div>
</div>
</div>
<script>
// Internet Explorer 8 fix.
if (!Date.now) {
Date.now = function () {
return new Date().getTime();
}
}
// Define outage object.
var auth_outage_countdown = {
timer: null
, countdown: <?php echo($outage->starttime - $time); ?>
, clienttime: Date.now()
, init: function () {
this.span = document.getElementById('auth_outage_warningbar_countdown');
this.text = this.span.innerHTML;
var $this = this;
this.timer = setInterval(function () {
$this.tick();
}, 1000);
this.tick();
}
, tick: function () {
var elapsed = Math.round((Date.now() - this.clienttime) / 1000);
var missing = this.countdown - elapsed;
if (missing <= 0) {
clearInterval(this.timer);
missing = 0;
<?php
if (!is_siteadmin()) {
echo 'location.href = "' . (new \moodle_url('/auth/outage/info.php')) . '";';
}
?>
}
else {
this.span.innerHTML = this.text.replace('{{countdown}}', this.seconds2hms(missing));
}
}
, seconds2hms: function (seconds) {
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
seconds %= 60;
minutes %= 60;
// Cross-browser simple solution for padding zeroes.
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
return hours + ':' + minutes + ':' + seconds;
}
};
auth_outage_countdown.init();
</script>
<?php if (!$outage->is_ongoing($time)): ?>
<script>
<?php require($CFG->dirroot . '/auth/outage/views/warningbar.js'); ?>
auth_outage_countdown.init(
<?php echo ($outage->starttime - $time); ?>,
<?php echo (is_siteadmin() ? 'true' : 'false'); ?>
);
</script>
<?php endif; ?>
<div class="auth_outage_warningbar_spacer">&nbsp;</div>