fixed entrees menu : translation and order

This commit is contained in:
2018-04-18 17:40:08 +02:00
parent 613ea5fc02
commit 6e56bf1799
7 changed files with 146 additions and 66 deletions
@@ -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;
@@ -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;
@@ -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($terms);
$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(
@@ -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 {
@@ -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;
@@ -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 {
@@ -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);