<script src="js/moment-with-locales.js"></script>
<script>
-/**
- * Scale an image up or down until it's larger than or equal to the viewport
- * and then center it.
- */
-var adjustBackground = function($img) {
- var viewportWidth = screen.width;
- var viewportHeight = screen.height;
- var viewportAspect = viewportWidth/viewportHeight;
- var imgWidth = $img.width();
- var imgHeight = $img.height();
- var imgAspect = imgWidth/imgHeight;
-
- /* First determine what is
- the limiting factor (ie. if the image is wider, then the height is
- is the limiting factor and needs to be adjustested */
+class LoginManager {
+ constructor() {
+ this.$ss_clock;
+ this.$vignette;
+ this.usr_opt = {
+ "splash-screen":{
+ "filter": false,
+ "clock": {
+ }
+ }
+ };
+
+ this.def_opt = {
+ "splash-screen": {
+ "fit": true,
+ "filter": true,
+ "vignette": true,
+ "clock": {
+ "format": "LT",
+ "css": {
+ "color": "white",
+ "text-align": "center",
+ "font-size": "60pt",
+ "font-family": "Noto Sans",
+ "margin-top": "calc(50vh - 90pt)",
+ "text-shadow": "rgba(0, 0, 0, 0.8) 0px 7px 10px",
+ }
+ }
+ }
+ };
+ this.eff_opt = {};
+ }
+
+ init() {
+ // initilize golbal values
+ this.$vignette = $("#vignette");
+ this.$ss_clock = $("#clock");
+
+ // adjust each background image
+ let $imgs = $('.splash-screen-img');
+ let self = this;
+ $imgs.each(function () {
+ self.adjustBackground($(this));
+ });
+
+ // copy the default options into the effective
+ $.extend(true, this.eff_opt, this.def_opt);
+ $.extend(true, this.eff_opt, this.usr_opt);
+ console.log(this);
+
+ let ss = this.eff_opt["splash-screen"];
+ if (typeof ss == "object") {
+ if (ss.filter == true)
+ $imgs.addClass("filter");
+ if (ss.vignette == true)
+ this.$vignette.show();
+ if (typeof ss.clock == "object")
+ this.initClock(this.$ss_clock, ss.clock);
+ }
+ }
+
+ initClock($clock, opts) {
+ if (typeof opts != "object") {
+ return -1;
+ }
+ $clock.show();
+
+ // apply css styles
+ $clock.css(opts.css);
+
+ // start clock
+ $clock.text(moment().format(opts.format || this.def_opt.clock.format));
+ setInterval(() => {
+ $clock.text(moment().format(opts.format || this.def_opt.clock.format));
+ }, 500);
+ console.log(opts);
+ }
+ /**
+ * Scale an image up or down until it's larger than or equal to the viewport
+ * and then center it.
+ */
+ adjustBackground ($img) {
+ var viewportWidth = screen.width;
+ var viewportHeight = screen.height;
+ var viewportAspect = viewportWidth/viewportHeight;
+ var imgWidth = $img.width();
+ var imgHeight = $img.height();
+ var imgAspect = imgWidth/imgHeight;
+
+ /* First determine what is
+ the limiting factor (ie. if the image is wider, then the height is
+ is the limiting factor and needs to be adjustested */
if (imgAspect < viewportAspect) {
/* The view port is wider compared to its height than
the image is compared to the image height meaning
$img.height(viewportHeight);
$img.width(viewportHeight*imgAspect);
}
- centerImage($img);
-}
-var centerImage = function($img) {
- var overlapWidth = $img.width() - screen.width;
- var overlapHeight = $img.height() - screen.height;
-
- console.log("overlapwidth: " + overlapWidth + " overlapHeight " + overlapHeight);
- // image overlaps viewport, move the image back
- // half the length of the overlap
- $img.css({
- position: "relative",
- right: overlapWidth/2,
- bottom: overlapHeight/2
- });
-
-}
+ this.centerImage($img);
+ }
+ centerImage ($img) {
+ var overlapWidth = $img.width() - screen.width;
+ var overlapHeight = $img.height() - screen.height;
+ console.log("overlapwidth: " + overlapWidth + " overlapHeight " + overlapHeight);
+ // image overlaps viewport, move the image back
+ // half the length of the overlap
+ $img.css({
+ position: "relative",
+ right: overlapWidth/2,
+ bottom: overlapHeight/2
+ });
-var usr_opt = {
- "splash-screen":{
- "filter": false,
- "clock": {
- }
- }
-};
-var def_opt = {
- "splash-screen": {
- "fit": true,
- "filter": true,
- "vignette": true,
- "clock": {
- "format": "LT",
- "css": {
- "color": "white",
- "text-align": "center",
- "font-size": "60pt",
- "font-family": "Noto Sans",
- "margin-top": "calc(50vh - 90pt)",
- "text-shadow": "rgba(0, 0, 0, 0.8) 0px 7px 10px",
- }
- }
}
-};
-var eff_opt = {};
-var $ss_clock;
-var $vignette;
+}
-var initClock = function($clock, opts) {
-
- if (typeof opts != "object") {
- return -1;
- }
- $clock.show();
- console.log("hi");
-
- // apply css styles
- $clock.css(opts.css);
-
- // start clock
- $clock.text(moment().format(opts.format || def_opt.clock.format));
- setInterval(() => {
- $clock.text(moment().format(opts.format || def_opt.clock.format));
- }, 500);
- console.log(opts);
-}
-var init = function() {
- // initilize golbal values
- $vignette = $("#vignette");
- $ss_clock = $("#clock");
-
- // adjust each background image
- let $imgs = $('.splash-screen-img');
- $imgs.each(function () {
- adjustBackground($(this));
- });
- // copy the default options into the effective
- $.extend(true, eff_opt, def_opt);
- $.extend(true, eff_opt, usr_opt);
- console.log(eff_opt);
-
- let ss = eff_opt["splash-screen"]
- if (typeof ss == "object") {
- if (ss.filter == true)
- $imgs.addClass("filter");
- if (ss.vignette == true)
- $vignette.show();
- if (typeof ss.clock == "object")
- initClock($ss_clock, ss.clock);
- }
+const greeter = new LoginManager();
-}
$(document).ready(function() {
- init();
+ greeter.init();
});
</script>
OSDN Git Service
