mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-22 16:03:47 +01:00
WIP EGroupware tutorial:
- Implement a hook for application specific video tutorials - Allow iframe widget to cooperate with fullscreen video play mode
This commit is contained in:
Hadi Nategh
parent
397d5a6d36
commit
3bc2e1077c
@ -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]);
|
||||
},
|
||||
|
||||
|
||||
20
etemplate/templates/default/egw_tutorial.xet
Normal file
20
etemplate/templates/default/egw_tutorial.xet
Normal file
@ -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>
|
||||
@ -534,6 +534,8 @@ class mail_hooks
|
||||
display_sidebox($appname,lang('Admin'),$file);
|
||||
}
|
||||
hooks::pgp_encryption_menu('mail');
|
||||
|
||||
hooks::egw_tutorial_menu('mail');
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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();
|
||||
},
|
||||
|
||||
/**
|
||||
@ -955,6 +958,110 @@ 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;
|
||||
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
|
||||
*
|
||||
|
||||
Loading…
Reference in New Issue
Block a user