WIP EGroupware tutorial:

-Add popup tutorials player
-List tutorials in sidebox with their titles and thumbnails only

etemplate/templates/default/egw_tutorial.xet

@@ -8,11 +8,11 @@
 				<column/>
 			</columns>
 			<rows>
-				<row>
+				<row >
-					<vbox>
+					<hbox onclick="$row_cont[onclick]">
-						<description value = "$row_cont[title]" onclick="$row_cont[onclick]"/>
+						<image src="$row_cont[thumbnail]" height="70px"/>
-						<iframe value="$row_cont[src]" width="99%" seamless="true" fullscreen="true"/>
+						<description value = "$row_cont[title]" class="et2_ellipsis"/>
-					</vbox>
+					</hbox>
 				</row>
 			</rows>
 		</grid>

home/inc/class.home_tutorial_ui.inc.php

@@ -0,0 +1,72 @@
+<?php
+/**
+ * EGroupware - Tutorial
+ *
+ * @link http://www.egroupware.org
+ * @package home
+ * @author Hadi Nategh [hn@stylite.de]
+ * @copyright (c) 2015 by Stylite AG <info-AT-stylite.de>
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @version $Id:$
+ */
+	
+class home_tutorial_ui {
+	
+	/**
+	 * Methods callable via menuaction
+	 *
+	 * @var array
+	 */
+	public $public_functions = array(
+		'popup' => true
+	);
+	
+	/**
+	 * Popup window to display youtube video
+	 * @param type $content
+	 */
+	function popup ($content)
+	{
+		//Allow youtube frame to pass the CSP check
+		egw_framework::csp_frame_src_attrs(array('www.youtube.com'));
+		
+		$tmpl = new etemplate_new('home.tutorial');
+		
+		// Get tutorial object id
+		$tuid_indx = explode('-',$_GET['tuid']);
+		
+		// read tutorials json file to fetch data
+		$tutorials = json_decode(self::getJsonData(), true);
+		
+		$content = $tutorials[$tuid_indx[0]][$tuid_indx[1]][$tuid_indx[2]];
+				
+		$tmpl->exec('home.home_tutorial_ui.popup', $content,array(),array(),array(),array(),2);
+	}
+	
+	/**
+	 * Ajax function to get videos links as json
+	 */
+	function ajax_data()
+	{
+		$response = egw_json_response::get();
+		$response->data(json_decode(self::getJsonData()));
+	}
+	
+	/**
+	 * Function to fetch data from tutorials.json file
+	 * @return string returns json string
+	 *
+	 * @TODO: implement tree level caching
+	 */
+	static function getJsonData()
+	{
+		if (!($json = egw_cache::getCache(egw_cache::TREE, 'home', 'egw_tutorial_json')))
+		{
+			$json = file_get_contents('http://www.egroupware.de/videos/tutorials.json');
+			// Cache the json object for one month
+			egw_cache::addCache(egw_cache::TREE, 'home', 'egw_tutorial_json', $json, 3600 * 720);
+		}
+		
+		return $json;
+	}
+}	

home/templates/default/tutorial.xet

@@ -0,0 +1,13 @@
+<?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="home.tutorial" template="" lang="" group="0" version="15.1">
+		<hbox height="87%">
+			<iframe id="src" height="100%" width="100%" seamless="true" fullscreen="true"/>
+		</hbox>
+		<hbox class="dialogFooterToolbar">
+			<button align="left" statustext="Close this window" label="Close" id="button[close]" onclick="window.close()" image="close" background_image="1"/>
+		</hbox>				
+	</template>
+</overlay>

phpgwapi/js/jsapi/app_base.js

@@ -961,26 +961,18 @@ var AppJS = Class.extend(
 	
 	/**
 	 * 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){
+	egwTutorialGetData: function(){
-		var url = _url;
+		var self = this;
 		return new Promise (function(_resolve, _reject)
 		{
 			var resolve = _resolve;
 			var reject = _reject;
-			jQuery.ajax({
+			self.egw.json('home.home_tutorial_ui.ajax_data', [self.egw.app_name()], function(_data){
-				method:'GET',
-				url: url,
-				success: function (_data) {
 					resolve(_data);
-				},
+			}).sendRequest();
-				fail: function (_err) {
-					reject(_err);
-				}
-			});
 		});
 	},
 	
@@ -993,7 +985,7 @@ var AppJS = Class.extend(
 	 *		{
 	 *			[app name]:{
 	 *				[language tag]:[
-	 *					{src:"",title:"",top:""}		
+	 *					{src:"",thumbnail:"",title:"",top:""}		
 	 *				]
 	 *			}
 	 *		}
@@ -1005,12 +997,12 @@ var AppJS = Class.extend(
 	 *		{
 	 *			"mail":{
 	 *				"en":[
-	 *					{src:"https://www.youtube.com/embed/mCDJndpjO40", "title":"PGP Encryption"},
+	 *					{src:"https://www.youtube.com/embed/mCDJndpjO40", thumbnail:"http://img.youtube.com/vi/mCDJndpjO40/1.jpg", "title":"PGP Encryption"},
-	 *					{src:"https://www.youtube.com/embed/mCDJndpjO", "title":"Subscription", top:true},
+	 *					{src:"https://www.youtube.com/embed/mCDJndpjO", thumbnail:"http://img.youtube.com/vi/mCDJndpjO/1.jpg", "title":"Subscription", top:true},
 	 *				],
 	 *				"de":[
-	 *					{src:"https://www.youtube.com/embed/m40", "title":"PGP Verschlüsselung"},
+	 *					{src:"https://www.youtube.com/embed/m40", thumbnail:"http://img.youtube.com/vi/m40/1.jpg", "title":"PGP Verschlüsselung"},
-	 *					{src:"https://www.youtube.com/embed/mpjO", "title":"Ordner Abonnieren", top:true},
+	 *					{src:"https://www.youtube.com/embed/mpjO", thumbnail:"http://img.youtube.com/vi/mpjO/1.jpg", "title":"Ordner Abonnieren", top:true},
 	 *				]
 	 *			}
 	 *		}
@@ -1025,7 +1017,7 @@ var AppJS = Class.extend(
 		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){
+		this.egwTutorialGetData().then(function(_data){
 			var lang = egw.preference('lang');
 			var content = {content:{list:[]}};
 			if (_data && _data[egw.app_name()])
@@ -1034,9 +1026,10 @@ var AppJS = Class.extend(
 				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++)
+					for (var i=0;i < _data[egw.app_name()][lang].length;i++)
 					{
-						_data[egw.app_name()][lang][i]['onclick'] = 'egw.open()';
+						var tuid = egw.app_name() + '-' +lang + '-' + i;
+						_data[egw.app_name()][lang][i]['onclick'] = 'app.'+egw.app_name()+'.egwTutorialPopup("'+tuid+'")';
 					}
 					content.content.list = _data[egw.app_name()][lang];
 					// Get the video with top property into the top of the list
@@ -1056,13 +1049,19 @@ var AppJS = Class.extend(
 			}	
 		},
 		function(_err){
-			consloe.log(_err);
+			console.log(_err);
 		});
 	},
 	
-	egwTutorialPopup: function ()
+	/**
+	 * Open popup to show given tutorial id
+	 * @param {string} _tuid tutorial object id
+	 *	- tuid: appname-lang-index
+	 */
+	egwTutorialPopup: function (_tuid)
 	{
-		
+		var url = egw.link('/index.php', 'menuaction=home.home_tutorial_ui.popup&tuid='+_tuid);
+		egw.open_link(url,'_blank','500x400');
 	},
 	
 	/**