WIP EGroupware tutorial:

- Implement a hook for application specific video tutorials
- Allow iframe widget to cooperate with fullscreen video play mode

etemplate/js/et2_widget_iframe.js

@@ -45,7 +45,13 @@ var et2_iframe = et2_valueWidget.extend(
 			"default": "",
 			description: "Specifies name of frame, to be used as target for links",
 			type: "string"
-		}
+		},
+		fullscreen: {
+			name: "Fullscreen",
+			"default": false,
+			description: "Make the iframe compatible to be a fullscreen video player mode",
+			type: "boolean"
+		},
 	},
 
 	/**
@@ -64,6 +70,10 @@ var et2_iframe = et2_valueWidget.extend(
 		{
 			this.htmlNode.append('<span class="et2_label">'+this.options.label+'</span>');
 		}
+		if (this.options.fullscreen)
+		{
+			this.htmlNode.attr('allowfullscreen', true);
+		}
 		this.setDOMNode(this.htmlNode[0]);
 	},
 

etemplate/templates/default/egw_tutorial.xet

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE overlay PUBLIC "-//Stylite AG//eTemplate 2//EN" "http://www.egroupware.org/etemplate2.dtd">
+<!-- $Id$ -->
+<overlay>
+	<template id="etemplate.egw_tutorial" template="" lang="" group="0" version="15.1">
+		<grid id="list" class="egwGridView_grid" height="200" overflow="auto">
+			<columns>
+				<column/>
+			</columns>
+			<rows>
+				<row>
+					<vbox>
+						<description value = "$row_cont[title]" onclick="$row_cont[onclick]"/>
+						<iframe value="$row_cont[src]" width="99%" seamless="true" fullscreen="true"/>
+					</vbox>
+				</row>
+			</rows>
+		</grid>
+	</template>
+</overlay>

mail/inc/class.mail_hooks.inc.php

@@ -534,6 +534,8 @@ class mail_hooks
 			display_sidebox($appname,lang('Admin'),$file);
 		}
 		hooks::pgp_encryption_menu('mail');
+		
+		hooks::egw_tutorial_menu('mail');
 	}
 
 	/**

phpgwapi/inc/class.hooks.inc.php

@@ -379,4 +379,23 @@ class hooks
 		);
 		display_sidebox($appname, lang('PGP Encryption'), $file);
 	}
+	
+	/**
+	 * Static function to build egw tutorial sidebox menu
+	 *
+	 * @param type $appname application name
+	 */
+	public static function egw_tutorial_menu($appname)
+	{
+		$file = Array (
+			array(
+				'text'    => '<div id="egw_tutorial_'.$appname.'_sidebox"/>',
+				'no_lang' => true,
+				'link'    => false,
+				'icon'    => false,
+			),
+			'menuOpened'  => true
+		);
+		display_sidebox($appname, lang('EGroupware Tutorial'), $file);
+	}
 }

phpgwapi/js/jsapi/app_base.js

@@ -147,6 +147,9 @@ var AppJS = Class.extend(
 
 		// Highlights the favorite based on initial list state
 		this.highlight_favorite();
+		
+		// Initialize egw tutorial sidebox
+		this.egwTutorial_init();
 	},
 
 	/**
@@ -954,7 +957,111 @@ var AppJS = Class.extend(
 			}).sendRequest(true);
 		}
 	},
-
+	
+	/**
+	 * Get json data for videos from the given url
+	 * @param {string} _url url of tutorials json file
+	 * 
+	 * @return {Promise, object} return Promise, json object as resolved result and error message in case of failure
+	 */
+	egwTutorialGetData: function(_url){
+		var url = _url;
+		return new Promise (function(_resolve, _reject)
+		{
+			var resolve = _resolve;
+			var reject = _reject;
+			jQuery.ajax({
+				method:'GET',
+				url: url,
+				success: function (_data) {
+					resolve(_data);
+				},
+				fail: function (_err) {
+					reject(_err);
+				}
+			});
+		});
+	},
+	
+	/**
+	 * Create and Render etemplate2 for egroupware tutorial
+	 * sidebox option. The .xet file is stored in etemplate/templates/default/egw_tutorials
+	 * 
+	 * @description tutorials json object should have the following structure:
+	 *	object:
+	 *		{
+	 *			[app name]:{
+	 *				[language tag]:[
+	 *					{src:"",title:"",top:""}		
+	 *				]
+	 *			}
+	 *		}
+	 *	
+	 *	*Note: "top" and "title" are optional attributes, which "top" means that specific video should
+	 *		appears on top of the list.
+	 *	
+	 *	example:
+	 *		{
+	 *			"mail":{
+	 *				"en":[
+	 *					{src:"https://www.youtube.com/embed/mCDJndpjO40", "title":"PGP Encryption"},
+	 *					{src:"https://www.youtube.com/embed/mCDJndpjO", "title":"Subscription", top:true},
+	 *				],
+	 *				"de":[
+	 *					{src:"https://www.youtube.com/embed/m40", "title":"PGP Verschlüsselung"},
+	 *					{src:"https://www.youtube.com/embed/mpjO", "title":"Ordner Abonnieren", top:true},
+	 *				]
+	 *			}
+	 *		}
+	 */
+	egwTutorial_init: function()
+	{
+		//DOM container
+		var div = document.getElementById('egw_tutorial_'+egw.app_name()+'_sidebox');
+		// et2 object
+		var etemplate = new etemplate2 (div, false);
+		var template = egw.webserverUrl+'/etemplate/templates/default/egw_tutorial.xet';
+		
+		this.egwTutorialGetData(egw.webserverUrl+'/tutorials.json').then(function(_data){
+			var lang = egw.preference('lang');
+			var content = {content:{list:[]}};
+			if (_data && _data[egw.app_name()])
+			{
+				if (_data[egw.app_name()][lang] == 'undefined' || _data[egw.app_name()][lang].length == 0 ) lang = 'en';
+				if (typeof _data[egw.app_name()][lang] !='undefined' 
+					&& _data[egw.app_name()][lang].length > 0)
+				{
+					for (var i=0;i<=_data[egw.app_name()][lang];i++)
+					{
+						_data[egw.app_name()][lang][i]['onclick'] = 'egw.open()';
+					}
+					content.content.list = _data[egw.app_name()][lang];
+					// Get the video with top property into the top of the list
+					content.content.list.sort(function(a){
+						if (!a.top) return 1;
+					});
+					
+					if (template.indexOf('.xet') >0)
+					{
+						etemplate.load ('',template , content, function(){});
+					}
+					else
+					{
+						etemplate.load (template, '', content);
+					}
+				}
+			}	
+		},
+		function(_err){
+			consloe.log(_err);
+		});
+	},
+	
+	egwTutorialPopup: function ()
+	{
+		
+	},
+	
 	/**
 	 * Check if Mailvelope is available, open (or create) "egroupware" keyring and call callback with it
 	 *