mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-22 16:03:47 +01:00
* All Applications: Implement new features for showing all video tutorials accessible from app's sidebox
This commit is contained in:
Hadi Nategh
commit
d90e369322
@ -87,6 +87,12 @@ var et2_DOMWidget = et2_widget.extend(et2_IDOMNode,
|
||||
type: "string",
|
||||
default: '',
|
||||
description: 'data="mime:${row}[mime]" would generate data-mime="..." in DOM, eg. to use it in CSS on a parent'
|
||||
},
|
||||
background: {
|
||||
name: "Add background image",
|
||||
type: "string",
|
||||
default:'',
|
||||
description: "Sets background image, left, right and scale on DOM",
|
||||
}
|
||||
},
|
||||
|
||||
@ -423,7 +429,23 @@ var et2_DOMWidget = et2_widget.extend(et2_IDOMNode,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
set_background: function(_value)
|
||||
{
|
||||
var node = this.getDOMNode(this);
|
||||
var values = '';
|
||||
if (_value && node)
|
||||
{
|
||||
values = _value.split(',');
|
||||
jQuery(node).css({
|
||||
"background-image":'url("'+values[0]+'")',
|
||||
"background-position-x":values[1],
|
||||
"background-position-y":values[2],
|
||||
"background-scale":values[3]
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Set Actions on the widget
|
||||
*
|
||||
|
||||
@ -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]);
|
||||
},
|
||||
|
||||
|
||||
24
etemplate/templates/default/egw_tutorial.xet
Normal file
24
etemplate/templates/default/egw_tutorial.xet
Normal file
@ -0,0 +1,24 @@
|
||||
<?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" width="99%" height="200" overflow="auto">
|
||||
<columns>
|
||||
<column/>
|
||||
</columns>
|
||||
<rows>
|
||||
<row >
|
||||
<vbox onclick="$row_cont[onclick]" align="center" statustext="$row_cont[desc]">
|
||||
<hbox background="$row_cont[thumbnail]" height="130px" width="99%" class="egw_tutorial_thumb">
|
||||
<description value = "$row_cont[title]" class="egw_tutorial_title"/>
|
||||
<hbox id="play" class="egw_tutorial_playBtn">
|
||||
<hbox></hbox>
|
||||
</hbox>
|
||||
</hbox>
|
||||
</vbox>
|
||||
</row>
|
||||
</rows>
|
||||
</grid>
|
||||
</template>
|
||||
</overlay>
|
||||
@ -1943,4 +1943,5 @@ div.flash-click-to-play-dialog {
|
||||
.et2_ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
|
||||
/* These imports processed by framework */
|
||||
/*@import url("../../phpgwapi/templates/idots/css/traditional.css");*/
|
||||
/*@import url("../../phpgwapi/templates/default/def_tutorials.css");*/
|
||||
/*@import url("../egw_fw.css");*/
|
||||
|
||||
/**
|
||||
@ -111,4 +112,4 @@ div.navSeparator {
|
||||
#popupMainDiv {
|
||||
margin:0;
|
||||
border:none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -366,4 +366,28 @@ class hooks
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Static function to build egw tutorial sidebox menu
|
||||
*
|
||||
*/
|
||||
public static function egw_tutorial_menu()
|
||||
{
|
||||
$tutorials = json_decode(home_tutorial_ui::getJsonData(),true);
|
||||
$appname = $GLOBALS['egw_info']['flags']['currentapp'];
|
||||
if (!is_array($tutorials[$appname])) return false;
|
||||
if (!$GLOBALS['egw_info']['server']['egw_tutorial_disable'])
|
||||
{
|
||||
$file = Array (
|
||||
array(
|
||||
'text' => '<div id="egw_tutorial_'.$appname.'_sidebox" class="egwTutorial"/>',
|
||||
'no_lang' => true,
|
||||
'link' => false,
|
||||
'icon' => false,
|
||||
),
|
||||
'menuOpened' => true
|
||||
);
|
||||
display_sidebox($appname, lang('Video Tutorials'), $file);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -172,6 +172,35 @@ var fw_browser = Class.extend({
|
||||
// Remove escape timeout
|
||||
clearTimeout(self.ajaxLoaderDivTimeout);
|
||||
}
|
||||
|
||||
// Open tutorial popup with an introduction video about egroupware
|
||||
// the popup can be discarded for the next time show if user
|
||||
// select "Never" or can select "Later" and the introduction
|
||||
// dialog will show upon the next session refresh
|
||||
if (!egw.preference('egw_tutorial_noautoload', 'common')
|
||||
&& !parseInt(document.getElementById('egw_script_id').getAttribute('data-framework-reload')))
|
||||
{
|
||||
var buttons = [
|
||||
{text:"Show", id:"show", default:"true"},
|
||||
{text:"Later", id:"later"},
|
||||
{text:"Never", id:"never"}
|
||||
];
|
||||
et2_dialog.show_dialog(function (_button_id)
|
||||
{
|
||||
if (_button_id == "show" )
|
||||
{
|
||||
egw.open_link(egw.link('/index.php', 'menuaction=home.home_tutorial_ui.popup&tuid=introduction-'+egw.preference('lang')+'-0-a'),'_blank','960x580');
|
||||
}
|
||||
else if(_button_id == "never")
|
||||
{
|
||||
egw.set_preference('common', 'egw_tutorial_noautoload',true);
|
||||
}
|
||||
},
|
||||
egw.lang('We would like to introduce you to EGroupware by showing a short introduction video.'),
|
||||
egw.lang('Introduction'),
|
||||
{}, buttons, et2_dialog.QUESTION_MESSAGE, undefined, egw);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// Check whether the given url is a pseudo url which should be executed
|
||||
|
||||
@ -145,6 +145,9 @@ var AppJS = Class.extend(
|
||||
|
||||
// Highlights the favorite based on initial list state
|
||||
this.highlight_favorite();
|
||||
|
||||
// Initialize egw tutorial sidebox
|
||||
this.egwTutorial_init();
|
||||
},
|
||||
|
||||
/**
|
||||
@ -906,4 +909,104 @@ var AppJS = Class.extend(
|
||||
return this.et2._inst.uniqueId;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get json data for videos from the given url
|
||||
*
|
||||
* @return {Promise, object} return Promise, json object as resolved result and error message in case of failure
|
||||
*/
|
||||
egwTutorialGetData: function(){
|
||||
var self = this;
|
||||
return new Promise (function(_resolve, _reject)
|
||||
{
|
||||
var resolve = _resolve;
|
||||
var reject = _reject;
|
||||
self.egw.json('home.home_tutorial_ui.ajax_data', [self.egw.app_name()], function(_data){
|
||||
resolve(_data);
|
||||
}).sendRequest();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 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:"",thumbnail:"",title:"",desc:""}
|
||||
* ]
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* *Note: "desc" and "title" are optional attributes, which "desc" would appears as tooltip for the video.
|
||||
*
|
||||
* example:
|
||||
* {
|
||||
* "mail":{
|
||||
* "en":[
|
||||
* {src:"https://www.youtube.com/embed/mCDJndpjO40", thumbnail:"http://img.youtube.com/vi/mCDJndpjO40/0.jpg", "title":"PGP Encryption", "desc":""},
|
||||
* {src:"https://www.youtube.com/embed/mCDJndpjO", thumbnail:"http://img.youtube.com/vi/mCDJndpjO/0.jpg", "title":"Subscription", "desc":""},
|
||||
* ],
|
||||
* "de":[
|
||||
* {src:"https://www.youtube.com/embed/m40", thumbnail:"http://img.youtube.com/vi/m40/0.jpg", "title":"PGP Verschlüsselung", "desc":""},
|
||||
* {src:"https://www.youtube.com/embed/mpjO", thumbnail:"http://img.youtube.com/vi/mpjO/0.jpg", "title":"Ordner Abonnieren", "desc":""},
|
||||
* ]
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
egwTutorial_init: function()
|
||||
{
|
||||
//DOM container
|
||||
var div = document.getElementById('egw_tutorial_'+egw.app_name()+'_sidebox');
|
||||
if (!div) return;
|
||||
|
||||
// et2 object
|
||||
var etemplate = new etemplate2 (div, false);
|
||||
var template = egw.webserverUrl+'/etemplate/templates/default/egw_tutorial.xet';
|
||||
|
||||
this.egwTutorialGetData().then(function(_data){
|
||||
var lang = egw.preference('lang');
|
||||
var content = {content:{list:[]}};
|
||||
if (_data && _data[egw.app_name()])
|
||||
{
|
||||
if (!_data[egw.app_name()][lang]) 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].length;i++)
|
||||
{
|
||||
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];
|
||||
|
||||
if (template.indexOf('.xet') >0)
|
||||
{
|
||||
etemplate.load ('',template , content, function(){});
|
||||
}
|
||||
else
|
||||
{
|
||||
etemplate.load (template, '', content);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
function(_err){
|
||||
console.log(_err);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 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','960x580');
|
||||
},
|
||||
});
|
||||
|
||||
113
phpgwapi/templates/default/def_tutorials.less
Normal file
113
phpgwapi/templates/default/def_tutorials.less
Normal file
@ -0,0 +1,113 @@
|
||||
/**
|
||||
* EGroupware: CSS with less preprocessor
|
||||
*
|
||||
* Definitions for tutorials
|
||||
*
|
||||
* Please do NOT change css-files directly, instead change less-files and compile them!
|
||||
*
|
||||
* @link http://www.egroupware.org
|
||||
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
||||
* @author Hadi NAtegh <hn@stylite.de>
|
||||
* @package phpgwapi
|
||||
* @version $Id$
|
||||
*/
|
||||
|
||||
span.egw_tutorial_title {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
width: 95%;
|
||||
background-color: #D6DEF0;
|
||||
border: 1px solid #B3B3B3;
|
||||
padding-top: 4px;
|
||||
padding-left: 5px;
|
||||
padding-bottom: 5px;
|
||||
border-radius: 2px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn,
|
||||
.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn{
|
||||
background-color: #FF0000;
|
||||
opacity: 0.68;
|
||||
}
|
||||
.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn> div,
|
||||
.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn> div{
|
||||
border-left-color: white;
|
||||
}
|
||||
.egw_tutorial_thumb {
|
||||
background-repeat: no-repeat;
|
||||
background-position: -2px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn,
|
||||
#home-tutorial_play.egw_tutorial_playBtn{
|
||||
display:block;
|
||||
margin:10%;
|
||||
border: 2px solid rgba(0,0,0,0.7);
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn> div,
|
||||
#home-tutorial_play.egw_tutorial_playBtn>div{
|
||||
display:block;
|
||||
position:relative;
|
||||
top: 10px;
|
||||
left: 45%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-left: 10px solid rgba(0,0,0,0.8);
|
||||
}
|
||||
[id^="egw_tutorial_"][id$="sidebox_list"] {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
#home-tutorial_list {
|
||||
float:left;
|
||||
.egw_tutorial_thumb {
|
||||
display:block;
|
||||
}
|
||||
.th {
|
||||
.et2_label {
|
||||
font-size: 12px;
|
||||
padding-left: 7px;
|
||||
}
|
||||
#home-tutorial_apps {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
td:first-child {
|
||||
padding-top:4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#home-tutorial_src {
|
||||
border-left: 6px solid #E0E0E0;
|
||||
}
|
||||
.tutorial_popup {
|
||||
background-color:white;
|
||||
padding-top: 5px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.tutorial_videoList {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
display: inline-block !important;
|
||||
}
|
||||
div.tutorial_iframe_wrapper {
|
||||
position:absolute;
|
||||
left:211px;
|
||||
right:2px;
|
||||
height:90%;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user