From 04a8cd4f604d39140532da84320b4ec6bea15075 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Wed, 14 Oct 2015 14:17:09 +0000 Subject: [PATCH] WIP EGroupware Tutorial: - Implement video navigation on popup - Implement introduction video with user confirmation dialog based on session - New layout for tutorials list both in sidebar and popup - Separate tutorials styles to be able to set different styles base on templates --- etemplate/templates/default/egw_tutorial.xet | 7 +- etemplate/templates/default/etemplate2.css | 53 ---------- home/inc/class.home_tutorial_ui.inc.php | 97 ++++++++++--------- home/js/app.js | 33 +------ home/templates/default/tutorial.xet | 39 +++++--- phpgwapi/inc/class.hooks.inc.php | 2 +- phpgwapi/js/framework/fw_browser.js | 27 +++++- phpgwapi/js/jsapi/app_base.js | 8 +- phpgwapi/templates/default/def_tutorials.less | 92 ++++++++++++++++++ pixelegg/css/mobile.css | 40 ++++++-- pixelegg/css/pixelegg.css | 38 +++++++- pixelegg/less/layout_definitions.less | 1 + pixelegg/less/layout_raster_sidebar.less | 1 + pixelegg/less/layout_tutorials.less | 31 ++++++ 14 files changed, 304 insertions(+), 165 deletions(-) create mode 100644 phpgwapi/templates/default/def_tutorials.less create mode 100644 pixelegg/less/layout_tutorials.less diff --git a/etemplate/templates/default/egw_tutorial.xet b/etemplate/templates/default/egw_tutorial.xet index 0db815b911..5a655a9a5b 100644 --- a/etemplate/templates/default/egw_tutorial.xet +++ b/etemplate/templates/default/egw_tutorial.xet @@ -3,14 +3,14 @@ diff --git a/etemplate/templates/default/etemplate2.css b/etemplate/templates/default/etemplate2.css index 16979dc79d..b38ba1e0fb 100644 --- a/etemplate/templates/default/etemplate2.css +++ b/etemplate/templates/default/etemplate2.css @@ -1978,56 +1978,3 @@ div.flash-click-to-play-dialog { overflow: hidden; } -/*egw tutorial styles - start*/ -span.egw_tutorial_title { - color: #FFFFFF; - font-weight: bold; - text-align: left; - width: 99%; - background-color: #434343; - border: 1px solid #B3B3B3; - padding-top: 4px; - padding-left: 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: #434343; -} -.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:20%; - 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); -} -/*egw tutorial styles - end*/ \ No newline at end of file diff --git a/home/inc/class.home_tutorial_ui.inc.php b/home/inc/class.home_tutorial_ui.inc.php index fb16226a87..f9a0eef854 100644 --- a/home/inc/class.home_tutorial_ui.inc.php +++ b/home/inc/class.home_tutorial_ui.inc.php @@ -31,62 +31,67 @@ class home_tutorial_ui { 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']); if (!is_array($content)) { - // read tutorials json file to fetch data - $tutorials = json_decode(self::getJsonData(), true); - $apps = array('introduction' => lang('Introduction')); - foreach ($tutorials as $app => $val) - { - // show only apps user has access to them - if (in_array($app, array_keys($GLOBALS['egw_info']['user']['apps']))) $apps [$app] = $app; - } - $sel_options = array( - 'apps' => $apps, + // Get tutorial object id + $tuid_indx = explode('-',$_GET['tuid']); + $appName = $tuid_indx[0]; + $lang = $tuid_indx[1]; + $id = $tuid_indx[2]; + } + else // set the first video of selected app + { + $appName = $content['list']['apps']; + $lang = $GLOBALS['egw_info']['user']['preferences']['common']['lang']; + $id ="0"; + } + // read tutorials json file to fetch data + $tutorials = json_decode(self::getJsonData(), true); + $apps = array('introduction' => lang('Introduction')); + foreach ($tutorials as $app => $val) + { + // show only apps user has access to them + if (in_array($app, array_keys($GLOBALS['egw_info']['user']['apps']))) $apps [$app] = $app; + } + $sel_options = array( + 'apps' => $apps, + ); + // Check if the user has right to see the app's tutorial + if (in_array($appName, array_keys($GLOBALS['egw_info']['user']['apps'])) || $appName === "introduction") + { + // fallback to english video + $tutorial = $tutorials[$appName][$lang][$id]? $tutorials[$appName][$lang][$id]: + $tutorials[$appName]['en'][$id]; + + $list = array( + 'apps' => $appName, + '0' => '' ); - // Check if the user has right to see the app's tutorial - if (in_array($tuid_indx[0], array_keys($GLOBALS['egw_info']['user']['apps'])) || $tuid_indx[0] === "introduction") + foreach ($tutorials[$appName][$lang] as $v) { - // fallback to english video - $tutorial = $tutorials[$tuid_indx[0]][$tuid_indx[1]][$tuid_indx[2]]? $tutorials[$tuid_indx[0]][$tuid_indx[1]][$tuid_indx[2]]: - $tutorials[$tuid_indx[0]]['en'][$tuid_indx[2]]; - - $content = array ( - 'src' => $tutorial['src'], - 'title' => $tutorial['title'] - ); - } - else - { - $content = array(); - egw_framework::message(lang('You do not have permission to see this tutorial!')); - } - // If its the autoloading tutorial - if ($tuid_indx[3] === 'a') - { - $content ['discardbox'] = true; + $v ['onclick'] = 'app.home.tutorial_videoOnClick("'.$v['src'].'")'; + array_push($list, $v); } + $content = array ( + 'src' => $tutorial['src'], + 'title' => $tutorial['title'], + 'list' => $list + ); + } + else + { + $content = array(); + egw_framework::message(lang('You do not have permission to see this tutorial!')); + } + // If its the autoloading tutorial + if ($tuid_indx[3] === 'a') + { + $content ['discardbox'] = true; } $tmpl->exec('home.home_tutorial_ui.popup', $content,$sel_options,array(),array(),array(),2); } - /** - * Ajax function to retrive selected app's tutorials based on prefered user lang - * - * @param type $_app application name - */ - function ajax_getAppsTutorials($_app) - { - $tutorials = json_decode(self::getJsonData(), true); - $lang = $GLOBALS['egw_info']['user']['preferences']['common']['lang']; - $response = egw_json_response::get(); - $response->data($tutorials[$_app][$lang]?$tutorials[$_app][$lang]:$tutorials[$_app]['en']); - } - /** * Ajax function to get videos links as json */ diff --git a/home/js/app.js b/home/js/app.js index ef11669748..8b011634e4 100644 --- a/home/js/app.js +++ b/home/js/app.js @@ -748,43 +748,18 @@ app.classes.home = AppJS.extend( nm.resize(); }, - /** - * Function to set apps and tutorials selectboxes values - * - * @param {type} egw - * @param {type} widget apps selectbox widget - */ - tutorial_appChange: function (egw, widget) { - var tutorials = etemplate2.getByApplication('home')[0].widgetContainer.getWidgetById('tutorials'); - var sel_options = {}; - if (widget) - { - this.egw.json('home.home_tutorial_ui.ajax_getAppsTutorials', [widget.get_value()], function(_data){ - if(_data && tutorials) - { - for (var i=0;i<_data.length;i++) - { - sel_options[i] = {label:_data[i].title, value:_data[i].src}; - } - tutorials.set_select_options(sel_options); - } - }).sendRequest(); - } - }, - /** * Function to set video iframe base on selected tutorial from - * tutorials selectbox + * tutorials box * - * @param {type} egw - * @param {type} widget tutorials selectbox + * @param {type} url */ - tutorial_tutorialsChange: function (egw, widget) + tutorial_videoOnClick: function (_url) { var frame = etemplate2.getByApplication('home')[0].widgetContainer.getWidgetById('src'); if (frame) { - frame.set_value(widget.get_value()); + frame.set_value(_url); } }, diff --git a/home/templates/default/tutorial.xet b/home/templates/default/tutorial.xet index 9c3217ff9c..1e284467ce 100644 --- a/home/templates/default/tutorial.xet +++ b/home/templates/default/tutorial.xet @@ -3,22 +3,35 @@