OO-1165 Implement login screen background image carrousel effect, demo on openolat theme

ddff6afd · kscherer · 8d9a9917 · ddff6afd · ddff6afd · ddff6afd
Commit ddff6afd authored 10 years ago by kscherer
--- a/pom.xml
+++ b/pom.xml
@@ -185,6 +185,7 @@
 												<include>${basedir}/target/jquery/jquery/openolat/jquery.oolog.min.js</include>
 												<include>${basedir}/target/jquery/jquery/openolat/jquery.translator.min.js</include>
 												<include>${basedir}/target/jquery/jquery/openolat/jquery.navbar.min.js</include>
+												<include>${basedir}/target/jquery/jquery/openolat/jquery.bgcarrousel.min.js</include>
 												<include>${basedir}/src/main/webapp/static/js/tinymce4/tinymce/jquery.tinymce.min.js</include>
 												<include>${basedir}/target/jquery/functions.min.js</include>
 												<include>${basedir}/target/jquery/jquery/openolat/jquery.ellipsis.min.js</include>

--- a/src/main/java/org/olat/core/commons/fullWebApp/_content/fullwebapplayout.html
+++ b/src/main/java/org/olat/core/commons/fullWebApp/_content/fullwebapplayout.html
@@ -66,6 +66,7 @@ function o_start(){
 	<script type="text/javascript" src='$r.staticLink("js/jquery/openolat/jquery.oolog.js")'></script>
 	<script type="text/javascript" src='$r.staticLink("js/jquery/openolat/jquery.translator.js")'></script>
 	<script type="text/javascript" src='$r.staticLink("js/jquery/openolat/jquery.navbar.js")'></script>
+	<script type="text/javascript" src='$r.staticLink("js/jquery/openolat/jquery.bgcarrousel.js")'></script>
 	<script type="text/javascript" src='$r.staticLink("js/tinymce4/tinymce/jquery.tinymce.min.js")'></script>
 	<script type="text/javascript" src='$r.staticLink("js/functions.js")'></script>
 	<script type="text/javascript" src='$r.staticLink("js/jquery/openolat/jquery.ellipsis.js")'></script>
@@ -146,6 +147,7 @@ $r.renderHeaderIncludes()
 </head>
 <body onload="o_start();" id="o_body" class="#foreach($cssClass in $bodyCssClasses)$cssClass #end o_lang_$r.getLanguageCode()">
+<div id="o_bg"></div>
 ## if in debug mode, it is a invisible component which is only visible by wrapping debug information around all other
 ## components.
 <!-- START guiDebug -->

--- a/src/main/webapp/static/js/jquery/openolat/jquery.bgcarrousel.js
+++ b/src/main/webapp/static/js/jquery/openolat/jquery.bgcarrousel.js
+/*
+ * ========================================================
+ *  <a href="http://www.openolat.org">
+ *  OpenOLAT - Online Learning and Training</a><br>
+ *  <p>
+ *  Licensed under the Apache License, Version 2.0 (the "License"); <br>
+ *  you may not use this file except in compliance with the License.<br>
+ *  You may obtain a copy of the License at the
+ *  <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache homepage</a>
+ *  <p>
+ *  Unless required by applicable law or agreed to in writing,<br>
+ *  software distributed under the License is distributed on an "AS IS" BASIS, <br>
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. <br>
+ *  See the License for the specific language governing permissions and <br>
+ *  limitations under the License.
+ *  <p>
+ *  Initial code contributed and copyrighted by<br>
+ *  26.08.2014 by frentix GmbH, http://www.frentix.com
+ *  <p>
+ *  This plugin can be used to apply a background image carrousel effect on
+ *  a DOM element. The plugin will replace the images in the provided list one
+ *  after another. 
+ *  This plugin should be used from within a theme.js in your custom theme if
+ *  required.
+ *  
+ *  @author gnaegi, www.frentix.com
+ *  @date August 2014
+ * ========================================================
+ */
+function ($) {
+	'use strict';
+	$.fn.ooBgCarrousel = function() {
+		return new BgCarrousel();
+	}
+	var BgCarrousel = function() {
+		// nothing to do
+	}
+	BgCarrousel.prototype.initCarrousel = function(params) {
+    	this.settings = $.extend({
+    		query: null,			// mandatory 
+    		images: [], 			// mandatory
+    		durationshow: 5000,
+    		durationout: 500,
+    		durationin: 500,
+    		easeout : 'ease',
+    		easein : 'ease'
+        }, params );
+		this.pos = null;
+    	if (this.settings.query == null || this.settings.images.length == 0) return;    	
+    	// start rotation process
+    	this.rotate();
+	}
+	BgCarrousel.prototype.rotate = function() {
+		setTimeout($.proxy(this._hideCurrent, this), this.settings.durationshow);
+	}
+	BgCarrousel.prototype._hideCurrent = function() {
+		var bgElement = $(this.settings.query);
+		if (bgElement && bgElement.size() > 0) {
+			this.newImg = "";
+			this.oldImg = "";
+			if (this.pos == null) {
+				// initial value
+				this.pos = 1;
+				this.oldImg = this.settings.images[0];
+			} else {
+				this.oldImg = this.settings.images[this.pos];
+				this.pos++;
+				if (this.settings.images.length == this.pos) {
+					// restart with first one
+					this.pos = 0;
+				}					
+			}
+			this.newImg = this.settings.images[this.pos];
+			bgElement.transition({
+					opacity:0, 
+					duration: this.settings.durationout, 
+					easing: this.settings.easeout
+				}, $.proxy(this._showNext, this)
+			);
+		}
+	}	
+	BgCarrousel.prototype._showNext = function() {
+		var el = $(this.settings.query);
+		var css = el.css('background-image');
+		if (css.indexOf(this.oldImg) == -1) {
+			// abort, don't know what to do, show image again and exit
+			el.transition({ opacity:1, duration: 0 });	
+			return;
+		}
+		var newCss = css.replace(this.oldImg, this.newImg);
+		el.css('background-image', newCss);
+		el.transition({
+				opacity:1, 
+				duration: this.settings.durationin, 
+				easing: this.settings.easein
+			}, $.proxy(this.rotate,this)
+		);	
+	}
+}(jQuery);
--- a/src/main/webapp/static/js/js.plugins.min.js
+++ b/src/main/webapp/static/js/js.plugins.min.js
--- a/src/main/webapp/static/themes/light/modules/_dmz.scss
+++ b/src/main/webapp/static/themes/light/modules/_dmz.scss
 body.o_dmz {
-	/* background gradient depending on login box positioning */
+	background: transparent;
-	$o-login-bg-gradient-to : right;	
+	#o_bg {
-	@if $o-login-form-align == left {
+		position: absolute;
-		$o-login-bg-gradient-to : left;
+		top: 0;
-	}
+		left: 0;
-	@else if $o-login-form-align == center {
+		width: 100%;
-		$o-login-bg-gradient-to : top;
+		height: 100%;
+		/* background gradient depending on login box positioning */
+		$o-login-bg-gradient-to : right;	
+		@if $o-login-form-align == left {
+			$o-login-bg-gradient-to : left;
+		}
+		@else if $o-login-form-align == center {
+			$o-login-bg-gradient-to : top;
+		}
+		background: linear-gradient(to $o-login-bg-gradient-to, rgba(255,255,255,.2) 0.2%,rgba(255,255,255,0.80) 60%,rgba(255,255,255,1) 100%), url('#{$o-login-form-bg-img}');
+		background-size: cover, cover;
 	}
-	background: linear-gradient(to $o-login-bg-gradient-to, rgba(255,255,255,.2) 0.2%,rgba(255,255,255,0.80) 60%,rgba(255,255,255,1) 100%), url('#{$o-login-form-bg-img}');
-	background-size: cover, cover;
 	#o_main_wrapper, #o_main_wrapper #o_main_container {
 		background: transparent;
@@ -141,7 +150,10 @@ body.o_dmz {
 @media (max-width: $screen-xs-max) { 
 	body.o_dmz {
-		background: none;
+		#o_bg {
+			background: none;
+			display: none;
+		}
 		.o_login {
 			padding: 0;
 			.o_login_intro {

--- a/src/main/webapp/static/themes/light/theme.css
+++ b/src/main/webapp/static/themes/light/theme.css
--- a/src/main/webapp/static/themes/openolat/_openolat_config.scss
+++ b/src/main/webapp/static/themes/openolat/_openolat_config.scss
 /* OpenOLAT colors */
 $brand-primary : #3b678a;
+/* Login screen background image copyrights: 
+learn-bg.jpg 
+CC by Thomas Leuthard https://www.flickr.com/photos/thomasleuthard/8587724648/
+classroom-bg.jpg
+CC by Alex https://www.flickr.com/photos/eflon/8917394523/
+christian-bg.jpg
+florian-bg.jpg
+holger-bg.jpg
+oo-bg.jpg
+CC by frentix GmbH http://www.frentix.com 
+*/
+$o-login-form-bg-img			: "images/learn-bg.jpg";  	
--- a/src/main/webapp/static/themes/openolat/images/christian-bg.jpg
+++ b/src/main/webapp/static/themes/openolat/images/christian-bg.jpg
--- a/src/main/webapp/static/themes/openolat/images/classroom-bg.jpg
+++ b/src/main/webapp/static/themes/openolat/images/classroom-bg.jpg
--- a/src/main/webapp/static/themes/openolat/images/florian-bg.jpg
+++ b/src/main/webapp/static/themes/openolat/images/florian-bg.jpg
--- a/src/main/webapp/static/themes/openolat/images/holger-bg.jpg
+++ b/src/main/webapp/static/themes/openolat/images/holger-bg.jpg
--- a/src/main/webapp/static/themes/openolat/images/learn-bg.jpg
+++ b/src/main/webapp/static/themes/openolat/images/learn-bg.jpg
--- a/src/main/webapp/static/themes/openolat/images/oo-bg.jpg
+++ b/src/main/webapp/static/themes/openolat/images/oo-bg.jpg
--- a/src/main/webapp/static/themes/openolat/theme.css
+++ b/src/main/webapp/static/themes/openolat/theme.css
--- a/src/main/webapp/static/themes/openolat/theme.js
+++ b/src/main/webapp/static/themes/openolat/theme.js
@@ -35,10 +35,24 @@
 			$(document).on("oo.dom.replacement.after", OPOL.themejs.addClientLinks);
 		}
+		ThemeJS.prototype.initDmzCarrousel = function() {
+			this.dmzCarrousel = jQuery().ooBgCarrousel();
+			this.dmzCarrousel.initCarrousel({
+				query: "#o_body #o_bg", 
+				images: ['learn-bg.jpg', 'christian-bg.jpg', 'classroom-bg.jpg', 'holger-bg.jpg', 'oo-bg.jpg', 'florian-bg.jpg' ], 
+				durationshow: 5000,
+				durationout: 500,
+				durationin: 500,
+				easeout : 'ease',
+				easein : 'ease'
+			});
+		}
 		//Execute when loading of page has been finished
 		$(document).ready(function() {
 			OPOL.themejs = new ThemeJS();
 			OPOL.themejs.execThemeJS();			
+			OPOL.themejs.initDmzCarrousel();
 		});
 })(jQuery);