From c74e172e241d09ca64b620749eafd963e8e02fbd Mon Sep 17 00:00:00 2001 From: poleumdev <64774219+poleumdev@users.noreply.github.com> Date: Fri, 12 Jun 2020 10:11:18 +0200 Subject: [PATCH 1/2] =?UTF-8?q?compatibilit=C3=A9=20Moodle=203.8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refonte des onglets et des zones collapses suite conflit avec Bootstrap --- block_tableau_bord.php | 38 +++++++++- js/tablist.min.js | 7 ++ notif.php | 2 - readme.txt | 2 - renderer.php | 161 +++++++++++++---------------------------- styles.css | 96 ++++++++++++++---------- version.php | 2 +- 7 files changed, 151 insertions(+), 157 deletions(-) create mode 100644 js/tablist.min.js diff --git a/block_tableau_bord.php b/block_tableau_bord.php index 4beec5e..8045dce 100644 --- a/block_tableau_bord.php +++ b/block_tableau_bord.php @@ -89,11 +89,45 @@ public function get_content() { } // Load script Ajax. $this->page->requires->js('/blocks/tableau_bord/js/scriptajax.js'); - $this->content->text .= $renderer->render_from_template('block_tableau_bord/lstcourse', array('std' => $std, 'wroot' => $CFG->wwwroot, 'userid' => $USER->id), null); } else { - $this->content->text .= $renderer->tableau_bord($sortedcourses, $overviews); + // List onglet. + $lstonglet = array(); + foreach ($sortedcourses as $course) { + $coursefullname = $course->fullname; + $pattern = "/\[(20[0-9]{2}-20[0-9]{2})\]/"; + if (preg_match($pattern, $coursefullname, $matches)) { + $lstonglet[$matches[1]] = $matches[1]; + } + } + $arronglet = array(); + if (count($lstonglet) > 0) { + rsort($lstonglet); + foreach ($lstonglet as $ongl) { + $arronglet[$ongl] = array(); + } + $horsonglet = array(); + foreach ($sortedcourses as $course) { + $coursefullname = $course->fullname; + $pattern = "/\[(20[0-9]{2}-20[0-9]{2})\]/"; + if (preg_match($pattern, $coursefullname, $matches)) { + $arronglet[$matches[1]][] = $course; + } else { + $horsonglet[] = $course; + } + } + $sortedcourses = array(); + foreach ($arronglet as $onglet) { + foreach ($onglet as $course) { + $sortedcourses[] = $course; + } + } + foreach ($horsonglet as $course) { + $sortedcourses[] = $course; + } + } + $this->content->text .= $renderer->tableau_bord($sortedcourses, $overviews, $lstonglet); $this->content->text .= $renderer->hidden_courses($totalcourses - count($sortedcourses)); } } diff --git a/js/tablist.min.js b/js/tablist.min.js new file mode 100644 index 0000000..f4d70e4 --- /dev/null +++ b/js/tablist.min.js @@ -0,0 +1,7 @@ +/** + * @accede-web/tablist - WAI-ARIA tablist plugin based on AcceDe Web accessibility guidelines + * @version v2.0.2 + * @link http://a11y.switch.paris/ + * @license ISC + **/ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Tablist=e()}(this,function(){"use strict";const t=["hide","show"];return class{constructor(t){if(!t||!t.nodeName)throw new Error("No DOM node provided. Abort.");this.el=t,this._tablist={},this._callbacks={},this._handleDisplay=this._handleDisplay.bind(this),this._handleFocus=this._handleFocus.bind(this),this._handleTab=this._handleTab.bind(this),this._handlePanelFocus=this._handlePanelFocus.bind(this),this._handlePanel=this._handlePanel.bind(this)}_firstActiveTab(){let t;for(let e=0;e=0&&(t.target.doubleFocus=!0)}_handleTab(t){switch(void 0===this._tablist.currentTabIndex&&this._handleFocus(t),t.keyCode){case 32:case 13:this._handleDisplay(t);break;case 35:t.preventDefault(),this._switchTab(this._tablist.tabs.length-1);break;case 36:t.preventDefault(),this._switchTab(this._firstActiveTab());break;case 37:case 38:t.preventDefault(),this._switchTab(this._tablist.currentTabIndex-1);break;case 39:case 40:t.preventDefault(),this._switchTab(this._tablist.currentTabIndex+1)}}_noop(){}_select(t){this._tablist.tabs.forEach((e,s)=>{const i=t===e;e.setAttribute("aria-selected",i),e.setAttribute("tabindex",i?0:-1),i&&this._toggleDisplay(s)})}_switchTab(t){if(this._tablist.tabs[t]&&this._tablist.tabs[t].disabled){const e=t>this._tablist.currentTabIndex?t+1:t-1;this._switchTab(e)}else this._tablist.currentTabIndex=t,this._tablist.currentTabIndex=this._tablist.tabsLength&&(this._tablist.currentTabIndex=this._firstActiveTab()),this._tablist.tabs[this._tablist.currentTabIndex].focus()}_toggleDisplay(t,e=!0){if(e&&t===this._tablist.openedIndex)return;const s=this._tablist.tabs[t],i=this._tablist.tabPanels[t];e&&void 0!==this._tablist.openedIndex&&this._toggleDisplay(this._tablist.openedIndex,!1),i.setAttribute("aria-hidden",!e),e?(this._tablist.openedIndex=t,void 0!==this._tablist.openedIndex&&this._trigger("show",[s,i])):void 0!==this._tablist.openedIndex&&this._trigger("hide",[s,i])}_trigger(t,e){this._callbacks[t]&&this._callbacks[t].forEach(t=>{t.apply(this,e)})}mount(){let t;this._tablist.tabs=[],this._tablist.tabPanels=[],Array.prototype.slice.call(this.el.querySelectorAll("[role=tab]")).forEach((e,s)=>{const i=e.getAttribute("aria-controls");let a,n=!1;if(i?a=document.getElementById(i):e.nextElementSibling&&e.nextElementSibling.getAttribute("aria-labelledby")===e.id&&(a=e.nextElementSibling),!a)throw new Error(`Could not find associated tabpanel for tab ${e.id}. Use [aria-controls="tabpanelId"] on the [role="tab"] element to link them together`);this._tablist.tabs.push(e),this._tablist.tabPanels.push(a),e.disabled=e.hasAttribute("disabled")||"true"===e.getAttribute("aria-disabled"),"true"!==e.getAttribute("data-open")||e.disabled||void 0===this._tablist.openedIndex&&(this._toggleDisplay(s,!0),n=!0),e.removeAttribute("data-open"),void 0!==t||e.disabled||(t=s),e.setAttribute("tabindex",-1),a.setAttribute("aria-hidden",!n),e.addEventListener("click",this._handleDisplay),e.addEventListener("focus",this._handleFocus),e.addEventListener("keydown",this._handleTab),a.addEventListener("focus",this._handlePanelFocus,!0),a.addEventListener("keydown",this._handlePanel)}),this._tablist.tabsLength=this._tablist.tabs.length,this._tablist.tabPanelsLength=this._tablist.tabPanels.length,void 0!==this._tablist.openedIndex?(this._tablist.tabs[this._tablist.openedIndex].setAttribute("tabindex",0),this._tablist.tabs[this._tablist.openedIndex].setAttribute("aria-selected","true")):(this._toggleDisplay(t,!0),this._tablist.tabs[t].setAttribute("tabindex",0),this._tablist.tabs[t].setAttribute("aria-selected","true"))}off(t,e){if(!this._callbacks[t])return;const s=this._callbacks[t].indexOf(e);s<0||this._callbacks[t].splice(s,1)}on(e,s){t.indexOf(e)<0||(this._callbacks[e]||(this._callbacks[e]=[]),this._callbacks[e].push(s))}get current(){return{tab:this._tablist.tabs[this._tablist.openedIndex],tabPanel:this._tablist.tabPanels[this._tablist.openedIndex]}}unmount(){this._tablist.tabs.forEach((t,e)=>{const s=this._tablist.tabPanels[e];t.removeEventListener("click",this._handleDisplay),t.removeEventListener("focus",this._handleFocus),t.removeEventListener("keydown",this._handleTab),t.removeAttribute("tabindex"),t.removeAttribute("aria-selected"),s.removeEventListener("focus",this._handlePanelFocus,!0),s.removeEventListener("keydown",this._handlePanel),s.setAttribute("aria-hidden","false")}),this._tablist={}}}}); diff --git a/notif.php b/notif.php index 3a6e49d..8eb3b7b 100644 --- a/notif.php +++ b/notif.php @@ -99,8 +99,6 @@ function creer_notif($courses, &$notification, $mod) { $strnolatesubmissions = get_string('nolatesubmissions', 'block_tableau_bord'); $strassignment = get_string('modulenameassign', 'block_tableau_bord'); - // We do all possible database work here *outside* of the loop to ensure this scales. - list($sqlassignmentids, $assignmentidparams) = $DB->get_in_or_equal($assignmentids); $unmarkedsubmissions = null; foreach ($assignments as $assignment) { diff --git a/readme.txt b/readme.txt index 76e16da..5633178 100644 --- a/readme.txt +++ b/readme.txt @@ -1,7 +1,5 @@ Moodle - block_tableau_bord -See doc : https://poleumdev.github.io/moodle-block_tableau_bord/ - Fonctionnement ============== diff --git a/renderer.php b/renderer.php index cf8ed82..2745cbb 100644 --- a/renderer.php +++ b/renderer.php @@ -41,11 +41,13 @@ class block_tableau_bord_renderer extends plugin_renderer_base { * * @param array $courses list of courses in sorted order * @param array $overviews list of course overviews + * @param array $arronglet list of tab * @return string html to be displayed in tableau_bord block */ - public function tableau_bord($courses, $overviews) { + public function tableau_bord($courses, $overviews, $arraydate) { global $CFG, $USER; $html = ' + '; @@ -53,70 +55,32 @@ public function tableau_bord($courses, $overviews) { $courseordernumber = 0; $maxcourses = count($courses); - $arraydate = array(); // Sera complété à chaque nouvelle année trouvée. - // On parcours les cours pour récupérer toutes les "années" différentes. - foreach ($courses as $key => $course) { - $coursefullname = $course->fullname; - $pattern = "/\[(20[0-9]{2}-20[0-9]{2})\]/"; - - if (preg_match($pattern, $coursefullname, $matches)) { - $arraydate[$matches[1]] = $matches[1]; // Si on trouve on l'ajoute au tab. - } - } // Ajouter une liste HTML avec les dates (pour la construction des onglets). if (!empty($arraydate)) { - arsort($arraydate); - $html .= '
'; - $html .= '
    '; - // Pour chaque "année" on ajoute une ligne, qui sera avec jQuery transformé en onglet. + $html .= '
    '; + $html .= '
      '; + $cpt = 1; foreach ($arraydate as $date) { - $html .= '
    • '.$date.'
      • '; - } - $html .= "
    "; - - // Code jQuery. - $html .= ''; + $html .= '
'; + $html .= '

'; } + $cpt = 1; + $reperedate = ""; foreach ($courses as $key => $course) { - /* add jjupin "Onglets annualisation" - * Pour chaque cours, ajouter une classe en fonction de l'année pour créer des onglets - * On parse chaque nom de cours pour récuperer l'année => [20xx-20xx] - */ $coursefullname = $course->fullname; - $courseclass = ""; // Sera complété si une date est trouvée. - $pattern = "/\[(20[0-9]{2}-20[0-9]{2})\]/"; - - if (preg_match($pattern, $coursefullname, $matches)) { - $courseclass = $matches[1]; - } else { - // Sinon on donne l'année en cours (la plus élevée = la 1e dans le tableau qui a été trié). - $courseclass = reset($arraydate); - } - // End add jjupin. - - // Coursebox -> le bloc d'un cours. - // Add jjupin 31/01/17 => ajouter une classe CSS si le cours est masqué (le griser). - if (empty($course->visible)) { - $courseclass .= ' course_not_visible '; - } - // End add jjupin 31/01/17. - - /* Defini les classes des cours en fonction de la valeur presente dans le cookie s'il existe. - * Sinon defini par defaut la classe coursebox qui correspond a un affichage des cours en liste*/ - if (!empty($_COOKIE['disposition'])) { - $html .= $this->output->box_start($_COOKIE['disposition']." ".$courseclass, "course-{$course->id}"); - } else { - $html .= $this->output->box_start('coursebox '.$courseclass, "course-{$course->id}"); + $debname = substr($coursefullname, 0, 9); + if ($coursefullname[0] == '[' && strcmp($reperedate, $debname) != 0) { + if (!empty($reperedate)) { + $html .= ''; + } + $reperedate = $debname; + $idpan = 'panneau-'.$cpt++; + $html .= '
'; + $html .= '
'; } $html .= '
'; @@ -217,6 +181,31 @@ public function tableau_bord($courses, $overviews) { $html .= '
'; $html .= $this->output->box_end(); // Fin du coursebox. } + if ($cpt > 1) { + $html .= '
'; + // Code js. + $html .= ''; + } return html_writer::tag('div', $html, array('class' => 'course_list', 'id' => 'test')); } @@ -272,64 +261,15 @@ public function hidden_courses($total) { * @return bool if true, return the HTML as a string, rather than printing it. */ protected function collapsible_region($contents, $classes, $id, $caption, $userpref = '', $default = false) { - $output = $this->collapsible_region_start($classes, $id, $caption, $userpref, $default); + $output = '
'.$caption.'
'; + $output .= ''; return $output; } /** - * Cretes html for welcome area + * Creates html for welcome area * * @param int $msgcount number of messages * @return string html string for welcome area. @@ -484,6 +424,7 @@ public function afficher_avt_prof($course) { $avancementdetaille .= $this->collapsible_region($histogramme, '', 'region_histo_'.$course->id, 'Avancement icon '. ''.get_string('seeprogressteacher', 'block_tableau_bord').'', '', true); + // Retourne les deux types d'avancement separement. return array($avancementglobal, $avancementdetaille); } diff --git a/styles.css b/styles.css index 9d5e1a5..e7be4d9 100644 --- a/styles.css +++ b/styles.css @@ -1,12 +1,6 @@ /* add jjupin Masquer bouton modifier ordre cours et tabs annulalisation */ -form#ordre_cours { - display:none; -} -span.nouveautetdb { - font-size: 18px; - color:#333; - margin-bottom:10px; -} +form#ordre_cours {display:none;} +span.nouveautetdb{font-size: 18px;color:#333;margin-bottom:10px;} .block_tableau_bord div#tabs { float:left; @@ -120,7 +114,7 @@ div.course_list div[id^=course]:hover{ .block_tableau_bord .bouton_aff{ float: right; text-align: center; - margin: 2px; + margin: 2px;* } .block_tableau_bord .coursebox .contenu_cours{ @@ -176,7 +170,7 @@ div.formulaire { float : right; } -input.modifier_ordre_cours, input[title="validerCours"] { +input.modifier_ordre_cours, input[title="validerCours"]{ margin: 2px 0 0 0 !important; background: #e5512b !important; color : #fff !important; @@ -207,6 +201,7 @@ div.block_tableau_bord div.header H2{ text-transform: none !important; } + .menu .welcome_area { padding : 0 0 10px 0!important; } @@ -239,6 +234,7 @@ div.block_tableau_bord div.header H2{ font-size: 27px ; line-height: normal; padding: 0 5px 4px 0; + //background : #eee; color : #0088CC; } .menu .welcome_title p:before{ @@ -327,7 +323,7 @@ img.iconhelp{ .block_tableau_bord .course_list { width: 100%; - float: left; + float : left; } /*Permet d'afficher les activites en dessous du titre du cours */ @@ -345,14 +341,8 @@ img.iconhelp{ .block_tableau_bord .activity_overview { padding: 2px; } -.block_tableau_bord .activity_overview img.iconlarge { - vertical-align: text-bottom; - margin-right: 6px; -} -.dir-rtl .block_tableau_bord .activity_overview img.iconlarge { - margin-left: 6px; - margin-right: 0; -} +.block_tableau_bord .activity_overview img.iconlarge { vertical-align: text-bottom; margin-right: 6px; } +.dir-rtl .block_tableau_bord .activity_overview img.iconlarge { margin-left: 6px; margin-right: 0;} .block_tableau_bord .singleselect { text-align: left; @@ -382,39 +372,65 @@ div.block_tableau_bord div div div.block_action{ } .click-notification{ /* déclencheur de l'affichage des notif*/ - cursor : pointer; +cursor : pointer; } .notification { - float: left; - min-width: 20px; - width: 20px; - padding:1px; - margin : 4px 0 0 -30px; - font-weight: 600; - font-size: 12px; - text-align: center; - background: #d72329; - border: 1px solid #FFF; - border-radius: 4px; -} -.notification a { - color: #fff !important; +float: left; +min-width: 20px; +width: 20px; +padding:1px; +margin : 4px 0 0 -30px; +font-weight: 600; +font-size: 12px; +text-align: center; +background: #d72329; +border: 1px solid #FFF; +border-radius: 4px; +} +.notification a{ +color: #fff !important; } /* Modification du custom.css de l'ead */ /* ----------------------------------- */ .block_course_overview .coursebox.cours-titre { - padding-left : 5px !important; - padding-top : 2px !important; - margin-bottom: 5px !important; +/* A la base pas de .block_course_overview .coursebox*/ +/*Changement*/ +padding-left : 5px !important; +padding-top : 2px !important; +margin-bottom: 5px !important; } @media only screen and (max-width : 980px) { canvas[id^=canvasHisto] { - width: 100% !important; - height: auto !important; - max-width: 300px !important; + width : 100% !important; + height : auto !important; + max-width : 300px !important; } } + +[role="tabpanel"][aria-hidden="true"] { + display: none; +} + +[role="tab"] { + opacity: 0.7; +} + +#LMtabs ul li { + display:inline-block; + float:left; + height:24px; + min-width:80px; + text-align:center; + line-height: 22px; + padding:0 8px 0 8px; + margin: 1px 3px 0px 5px; + border: 1px solid gray; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + background:#FFFFFF; + color:#8080FF; +} diff --git a/version.php b/version.php index b901764..af1dd05 100644 --- a/version.php +++ b/version.php @@ -24,6 +24,6 @@ defined('MOODLE_INTERNAL') || die(); -$plugin->version = 2020060812; // The current plugin version (Date: YYYYMMDDXX). +$plugin->version = 2020061209; // The current plugin version (Date: YYYYMMDDXX). $plugin->requires = 2013050100; // Requires this Moodle version. $plugin->component = 'block_tableau_bord'; From bac6e39a44f8fd21772399c5794c7b71522d1b96 Mon Sep 17 00:00:00 2001 From: poleumdev <64774219+poleumdev@users.noreply.github.com> Date: Fri, 12 Jun 2020 10:12:54 +0200 Subject: [PATCH 2/2] Update readme.txt --- readme.txt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/readme.txt b/readme.txt index 5633178..76e16da 100644 --- a/readme.txt +++ b/readme.txt @@ -1,5 +1,7 @@ Moodle - block_tableau_bord +See doc : https://poleumdev.github.io/moodle-block_tableau_bord/ + Fonctionnement ==============