WIP EGroupware tutorial:

-Add popup tutorials player
-List tutorials in sidebox with their titles and thumbnails only
This commit is contained in:
Hadi Nategh 2015-10-05 16:01:39 +00:00
parent 86a1e4fbfa
commit a6837b6a40
4 changed files with 112 additions and 28 deletions

View File

@ -9,10 +9,10 @@
</columns> </columns>
<rows> <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> </row>
</rows> </rows>
</grid> </grid>

View File

@ -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;
}
}

View File

@ -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>

View File

@ -961,26 +961,18 @@ var AppJS = Class.extend(
/** /**
* Get json data for videos from the given url * 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 * @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) return new Promise (function(_resolve, _reject)
{ {
var resolve = _resolve; var resolve = _resolve;
var reject = _reject; 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); resolve(_data);
}, }).sendRequest();
fail: function (_err) {
reject(_err);
}
});
}); });
}, },
@ -993,7 +985,7 @@ var AppJS = Class.extend(
* { * {
* [app name]:{ * [app name]:{
* [language tag]:[ * [language tag]:[
* {src:"",title:"",top:""} * {src:"",thumbnail:"",title:"",top:""}
* ] * ]
* } * }
* } * }
@ -1005,12 +997,12 @@ var AppJS = Class.extend(
* { * {
* "mail":{ * "mail":{
* "en":[ * "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":[ * "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 etemplate = new etemplate2 (div, false);
var template = egw.webserverUrl+'/etemplate/templates/default/egw_tutorial.xet'; 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 lang = egw.preference('lang');
var content = {content:{list:[]}}; var content = {content:{list:[]}};
if (_data && _data[egw.app_name()]) if (_data && _data[egw.app_name()])
@ -1034,9 +1026,10 @@ var AppJS = Class.extend(
if (typeof _data[egw.app_name()][lang] !='undefined' if (typeof _data[egw.app_name()][lang] !='undefined'
&& _data[egw.app_name()][lang].length > 0) && _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]; content.content.list = _data[egw.app_name()][lang];
// Get the video with top property into the top of the list // Get the video with top property into the top of the list
@ -1056,13 +1049,19 @@ var AppJS = Class.extend(
} }
}, },
function(_err){ 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');
}, },
/** /**