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>
<rows>
<row >
<vbox>
<description value = "$row_cont[title]" onclick="$row_cont[onclick]"/>
<iframe value="$row_cont[src]" width="99%" seamless="true" fullscreen="true"/>
</vbox>
<hbox onclick="$row_cont[onclick]">
<image src="$row_cont[thumbnail]" height="70px"/>
<description value = "$row_cont[title]" class="et2_ellipsis"/>
</hbox>
</row>
</rows>
</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
* @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;
egwTutorialGetData: function(){
var self = this;
return new Promise (function(_resolve, _reject)
{
var resolve = _resolve;
var reject = _reject;
jQuery.ajax({
method:'GET',
url: url,
success: function (_data) {
self.egw.json('home.home_tutorial_ui.ajax_data', [self.egw.app_name()], function(_data){
resolve(_data);
},
fail: function (_err) {
reject(_err);
}
});
}).sendRequest();
});
},
@ -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/mCDJndpjO", "title":"Subscription", top:true},
* {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", 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/mpjO", "title":"Ordner Abonnieren", top:true},
* {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", 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');
},
/**