fixed entrees menu : translation and order

sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js

@@ -27,9 +27,11 @@
     var _ctx = _canvas.getContext('2d');
     var _canvas_props = {
       // 'margin_top':90, // with red border on head
-      'margin_top':75, // without red border on head
+      // 'margin_top':75, // without red border on head
+      'margin_top':0,
       'margin_right':0,
-      'margin_bottom':65,
+      // 'margin_bottom':65,
+      'margin_bottom':0,
       'margin_left':0
     };
     var _physics = new Physics();
@@ -93,7 +95,7 @@
       onResizeCanvas();
     };
     function onResizeCanvas() {
-
+      // https://medium.com/wdstack/fixing-html5-2d-canvas-blur-8ebe27db07da
       _canvas.width = window.innerWidth*_dpi;
       _canvas.height = window.innerHeight*_dpi;
 

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -27,9 +27,11 @@
     var _ctx = _canvas.getContext('2d');
     var _canvas_props = {
       // 'margin_top':90, // with red border on head
-      'margin_top':75, // without red border on head
+      // 'margin_top':75, // without red border on head
+      'margin_top':0,
       'margin_right':0,
-      'margin_bottom':65,
+      // 'margin_bottom':65,
+      'margin_bottom':0,
       'margin_left':0
     };
     var _physics = new Physics();
@@ -93,7 +95,7 @@
       onResizeCanvas();
     };
     function onResizeCanvas() {
-
+      // https://medium.com/wdstack/fixing-html5-2d-canvas-blur-8ebe27db07da
       _canvas.width = window.innerWidth*_dpi;
       _canvas.height = window.innerHeight*_dpi;
 

sites/all/modules/figli/edlp_corpus/src/Plugin/Block/BlockEntrees.php

@@ -8,6 +8,7 @@ namespace Drupal\edlp_corpus\Plugin\Block;
 use Drupal\Core\Block\BlockBase;
 use Drupal\Core\Link;
 use Drupal\Core\Url;
+use Drupal\taxonomy\Entity\Term;
 use Drupal\workflow\Entity\WorkflowManager;
 
 /**
@@ -24,26 +25,40 @@ class BlockEntrees extends BlockBase {
    */
   public function build() {
 
+    $language = \Drupal::languageManager()->getCurrentLanguage()->getId();
+
     $query = \Drupal::entityQuery('taxonomy_term')
+      // ->sort('weight', 'DESC')
+      // ->sort('name', 'DESC')
       ->condition('vid', 'entrees');
 
     $tids = $query->execute();
-    $terms = entity_load_multiple('taxonomy_term', $tids);
-    // dsm($terms);
-    foreach ($terms as $term) {
-      // dpm($term->toArray());
-      $tid = $term->id();
-      $name = $term->getName();
+    // $terms = entity_load_multiple('taxonomy_term', $tids);
+    // $terms = \Drupal::entityManager()->getStorage('taxonomy_term')->loadMultiple($t‌​erms);
+    $terms = Term::loadMultiple($tids);
 
+    $ordered_terms = [];
+    foreach ($terms as $term) {
       // remove masqué
       $sid = WorkflowManager::getCurrentStateId($term, 'field_workflow');
       if($sid == 'generique_masque') continue;
+      // translate the term
+      $term = \Drupal::service('entity.repository')->getTranslationFromContext($term, $language);
+      $name = $term->getName();
+      $ordered_trans_terms[$name] = $term;
+    }
+
+    ksort($ordered_trans_terms);
+
+    // dsm($terms);
+    foreach ($ordered_trans_terms as $name => $term) {
+      $tid = $term->id();
 
       $entree = array(
         'tid'=>$tid
       );
 
-      // term name
+      // term link
       $url = Url::fromRoute('entity.taxonomy_term.canonical', ['taxonomy_term'=>$tid]);
       $url->setOptions(array(
         'attributes' => array(

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -728,8 +728,9 @@
     };
     AudioPlayer.prototype = {
       init(){
+        this.$container_parent = $('header[role="banner"] .region-header');
         // append ui to document
-        this.$container.appendTo('header[role="banner"] .region-header');
+        this.$container.appendTo(this.$container_parent);
         // record timeline width
         this.timeline_w = parseInt(this.$timeline.width());
         // init audio events
@@ -939,6 +940,7 @@
       },
       // global
       show(){
+        this.$container_parent.addClass('audio-player-visible');
         this.$container.addClass('visible');
       },
       showHidePreviousBtn(){
@@ -969,6 +971,7 @@
       },
       hide(){
         // console.log('AudioPlayer hide()');
+        this.$container_parent.removeClass('audio-player-visible');
         this.$container.removeClass('visible');
         // trigger highlighted node remove on corpus map
         try {

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1049,7 +1049,10 @@ header[role="banner"] {
   pointer-events: all; }
 
 #block-edlptheme-branding {
-  display: inline-block; }
+  display: inline-block;
+  opacity: 1;
+  -webkit-transition: opacity 0.7s ease-in-out;
+  transition: opacity 0.7s ease-in-out; }
   #block-edlptheme-branding h1 {
     margin: 0;
     display: inline-block; }
@@ -1059,12 +1062,13 @@ header[role="banner"] {
       height: 57.2px;
       margin-top: 0.15em;
       background-image: url(../img/logo.svg);
-      background-color: white;
       background-repeat: no-repeat;
       background-size: contain;
       white-space: nowrap;
       text-indent: 500px;
       overflow: hidden; }
+  .audio-player-visible #block-edlptheme-branding {
+    opacity: 0; }
 
 #block-mainnavigation {
   float: right;
@@ -1082,7 +1086,10 @@ header[role="banner"] {
         color: inherit;
         text-decoration: none;
         text-transform: uppercase;
-        margin-left: 1em; }
+        margin-left: 1em;
+        padding: 3px;
+        background-color: white;
+        border-radius: 3px; }
         #block-mainnavigation ul li a:before {
           content: "";
           display: inline-block;
@@ -1128,7 +1135,10 @@ header[role="banner"] {
         color: inherit;
         text-decoration: none;
         text-transform: capitalize;
-        margin-left: 0.8em; }
+        margin-left: 0.8em;
+        padding: 3px;
+        background-color: white;
+        border-radius: 3px; }
         .block-language ul li a:before {
           content: "";
           display: inline-block;
@@ -1385,8 +1395,7 @@ main[role="main"] span.close-col-btn {
   position: absolute;
   top: 0;
   left: 0;
-  padding-left: 1.2em;
-  background-color: white;
+  padding-left: 0.7em;
   height: 100%;
   min-width: 300px;
   z-index: 20;
@@ -1403,7 +1412,10 @@ main[role="main"] span.close-col-btn {
     vertical-align: middle;
     padding: 0;
     max-height: 100%;
-    white-space: normal; }
+    white-space: normal;
+    padding: 3px;
+    background-color: white;
+    border-radius: 3px; }
   #audio-player .btns > * {
     display: inline-block;
     vertical-align: middle;
@@ -1429,27 +1441,29 @@ main[role="main"] span.close-col-btn {
     background-image: url(../img/audio-player-previous.svg); }
   #audio-player .btns .next {
     background-image: url(../img/audio-player-next.svg); }
-  #audio-player .time-line-container .time-line {
-    position: relative;
-    width: 70px;
-    height: 1px;
-    background-color: #000;
-    overflow: visible;
-    -webkit-transform: rotateZ(-46deg);
-    transform: rotateZ(-46deg); }
-    #audio-player .time-line-container .time-line .loader {
-      width: 0;
-      height: 100%;
-      background-color: red;
-      top: 0;
-      left: 0; }
-    #audio-player .time-line-container .time-line .cursor {
-      height: 10px;
-      width: 0;
-      border-left: 2px solid red;
-      position: absolute;
-      left: 0;
-      top: -5px; }
+  #audio-player .time-line-container {
+    background: transparent; }
+    #audio-player .time-line-container .time-line {
+      position: relative;
+      width: 70px;
+      height: 1px;
+      background-color: #000;
+      overflow: visible;
+      -webkit-transform: rotateZ(-46deg);
+      transform: rotateZ(-46deg); }
+      #audio-player .time-line-container .time-line .loader {
+        width: 0;
+        height: 100%;
+        background-color: red;
+        top: 0;
+        left: 0; }
+      #audio-player .time-line-container .time-line .cursor {
+        height: 10px;
+        width: 0;
+        border-left: 2px solid red;
+        position: absolute;
+        left: 0;
+        top: -5px; }
   #audio-player .time > * {
     width: 70px;
     text-align: right; }
@@ -2284,7 +2298,10 @@ footer {
         footer #block-footer ul li:first-of-type {
           margin-left: 1em; }
         footer #block-footer ul li a {
-          font-size: 0.756em; }
+          font-size: 0.756em;
+          padding: 3px;
+          background-color: white;
+          border-radius: 3px; }
           footer #block-footer ul li a:before {
             content: "";
             display: inline-block;
@@ -2331,18 +2348,22 @@ footer {
           white-space: nowrap; }
         footer nav#block-productions.block-menu ul li:first-of-type {
           margin-left: 1em; }
-        footer nav#block-productions.block-menu ul li a:before {
-          content: "";
-          display: inline-block;
-          width: 7px;
-          height: 7px;
-          border: 1px solid black;
-          margin-right: 0.5em; }
-        footer nav#block-productions.block-menu ul li a:hover:before, footer nav#block-productions.block-menu ul li a.is-active:before {
-          background-color: black; }
-        footer nav#block-productions.block-menu ul li a.ajax-loading:before {
-          -webkit-animation: rotation 2s infinite linear;
-          animation: rotation 2s infinite linear; }
+        footer nav#block-productions.block-menu ul li a {
+          padding: 3px;
+          background-color: white;
+          border-radius: 3px; }
+          footer nav#block-productions.block-menu ul li a:before {
+            content: "";
+            display: inline-block;
+            width: 7px;
+            height: 7px;
+            border: 1px solid black;
+            margin-right: 0.5em; }
+          footer nav#block-productions.block-menu ul li a:hover:before, footer nav#block-productions.block-menu ul li a.is-active:before {
+            background-color: black; }
+          footer nav#block-productions.block-menu ul li a.ajax-loading:before {
+            -webkit-animation: rotation 2s infinite linear;
+            animation: rotation 2s infinite linear; }
 
 @keyframes rotation {
   from {
@@ -2364,7 +2385,9 @@ footer {
         height: 200px; }
         footer nav#block-productions.block-menu ul li a {
           pointer-events: all;
-          background-color: #fff;
+          padding: 3px;
+          background-color: white;
+          border-radius: 3px;
           padding-right: 0.4em; }
           footer nav#block-productions.block-menu ul li a:before {
             content: "";
@@ -2425,7 +2448,9 @@ footer {
           width: 1.5em; }
         footer .block-block-edlp-entrees div.item-list ul li a.term-link, footer .block-block-edlp-entrees div.item-list ul li a.articles-link {
           pointer-events: all;
-          background-color: rgba(255, 255, 255, 0.6);
+          padding: 3px;
+          background-color: white;
+          border-radius: 3px;
           padding-right: 0.4em;
           color: black;
           -webkit-transition: color 0.3s ease-in-out;
@@ -2571,6 +2596,8 @@ footer {
     pointer-events: all;
     margin-left: 0.5em; }
     footer .block.random-player a {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
       display: block;
       width: 20px;
       height: 20px;
@@ -2593,6 +2620,8 @@ footer {
     pointer-events: all;
     margin-left: 0.5em; }
     footer #block-studiolinkblock a {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
       display: block;
       width: 20px;
       height: 20px;
@@ -2617,6 +2646,8 @@ footer {
     width: 20px;
     height: 20px; }
     footer #block-userlogin h2 {
+      -webkit-box-sizing: content-box;
+      box-sizing: content-box;
       position: relative;
       width: 20px;
       height: 20px;
@@ -2669,6 +2700,8 @@ footer {
     margin-left: 0.5em;
     margin-left: 0.2em; }
     footer #block-edlpsearchlinkblock a {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
       display: block;
       width: 20px;
       height: 20px;

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -728,8 +728,9 @@
     };
     AudioPlayer.prototype = {
       init(){
+        this.$container_parent = $('header[role="banner"] .region-header');
         // append ui to document
-        this.$container.appendTo('header[role="banner"] .region-header');
+        this.$container.appendTo(this.$container_parent);
         // record timeline width
         this.timeline_w = parseInt(this.$timeline.width());
         // init audio events
@@ -939,6 +940,7 @@
       },
       // global
       show(){
+        this.$container_parent.addClass('audio-player-visible');
         this.$container.addClass('visible');
       },
       showHidePreviousBtn(){
@@ -969,6 +971,7 @@
       },
       hide(){
         // console.log('AudioPlayer hide()');
+        this.$container_parent.removeClass('audio-player-visible');
         this.$container.removeClass('visible');
         // trigger highlighted node remove on corpus map
         try {

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -54,7 +54,11 @@
   }
 }
 
-
+@mixin btn {
+  padding: 3px;
+  background-color: white;
+  border-radius: 3px;
+}
 // .layout-container{
 //   pointer-events: none;
 // }
@@ -79,7 +83,7 @@ header[role="banner"]{
       width:$w; height:$w * 0.22;
       margin-top: 0.15em;
       background-image: url(../img/logo.svg);
-      background-color: white;
+      // background-color: white;
       background-repeat:no-repeat;
       background-size: contain;
       white-space: nowrap;
@@ -87,6 +91,12 @@ header[role="banner"]{
       overflow: hidden;
     }
   }
+  opacity: 1;
+  transition: opacity 0.7s ease-in-out;
+
+  .audio-player-visible &{
+    opacity: 0;
+  }
 }
 
 #block-mainnavigation{
@@ -104,6 +114,7 @@ header[role="banner"]{
         text-decoration: none;
         text-transform: uppercase;
         margin-left: 1em;
+        @include btn;
         &:before{
           content: "";
           display:inline-block;
@@ -141,6 +152,7 @@ header[role="banner"]{
         text-decoration: none;
         text-transform: capitalize;
         margin-left: 0.8em;
+        @include btn;
         &:before{
           content: "";
           display:inline-block;
@@ -497,8 +509,8 @@ main[role="main"]{
 #audio-player{
   position: absolute;
   top:0; left:0;
-  padding-left:1.2em;
-  background-color: white;
+  padding-left:0.7em;
+  // background-color: white;
   height:100%; min-width:300px;
   z-index: 20;
   opacity: 0;
@@ -518,11 +530,14 @@ main[role="main"]{
     max-height: 100%;
     // outline: 1px solid green;
     white-space: normal;
+    @include btn;
   }
   .btns{
     @include audio_controls;
   }
   .time-line-container{
+    // height:50%;
+    background:transparent;
     .time-line{
       position: relative;
       width:70px; height:1px;
@@ -1408,6 +1423,7 @@ footer{
         }
         a{
           font-size: 0.756em;
+          @include btn;
           &:before{
             content: "";
             display:inline-block;
@@ -1442,6 +1458,7 @@ footer{
           margin-left: 1em;
         }
         a{
+          @include btn;
           &:before{
             content: "";
             display:inline-block;
@@ -1511,7 +1528,7 @@ footer{
         a{
           // outline: 1px solid blue;
           pointer-events: all;
-          background-color: #fff;
+          @include btn;
           padding-right: 0.4em;
           &:before{
             content: "";
@@ -1563,7 +1580,8 @@ footer{
             // outline: 1px solid blue;
             pointer-events: all;
             // background-color: #fff;
-            background-color: rgba(255,255,255, 0.6);
+            // background-color: rgba(255,255,255, 0.6);
+            @include btn;
             padding-right: 0.4em;
             color:black;
             transition: color 0.3s ease-in-out;
@@ -1739,7 +1757,9 @@ footer{
   @mixin iconlinkblock($bgimgurl) {
     pointer-events: all;
     margin-left: 0.5em;
+    // @include btn;
     a{
+      box-sizing: border-box;
       $wh:$icons_w;
       display: block;
       width:$wh; height:$wh;
@@ -1772,12 +1792,14 @@ footer{
     margin-bottom: 1em;
     pointer-events: all;
     margin-left: 0.2em;
-    // outline: 1px solid blue;
     $wh:$icons_w;
     position: relative;
+    // box-sizing: border-box;
     width:$wh; height: $wh;
-    // background-color: blue;
     h2{
+      box-sizing: content-box;
+      // @include btn;
+      // padding:0;
       position: relative;
       width:$wh; height:$wh;
       background-image: url(../img/studio.svg);