ajax loading of edlp studio from custom block link ok
also refactored page layout for better display of footer
This commit is contained in:
Bachir Soussi Chiadmi
@@ -48,6 +48,7 @@
|
||||
});
|
||||
$link.replaceWith(data.new_link);
|
||||
initAjax();
|
||||
// TODO: reload Studio chutier_ui's documents list
|
||||
};
|
||||
|
||||
function onErrorActionToChutier(jqxhr, textStatus, error, $link){
|
||||
|
||||
@@ -43,20 +43,22 @@ function edlp_studio_theme($existing, $type, $theme, $path) {
|
||||
'edlp_chutier_ui' => array(
|
||||
'file' => 'includes/edlp_chutier_ui.inc',
|
||||
'variables' => array(
|
||||
'documents' => array(),
|
||||
'title' => t('Chutier'),
|
||||
'document_nodes' => array(),
|
||||
),
|
||||
),
|
||||
'edlp_composition_ui' => array(
|
||||
'file' => 'includes/edlp_composition_ui.inc',
|
||||
'variables' => array(
|
||||
'title' => t('Compositon'),
|
||||
'compositions' => array(),
|
||||
),
|
||||
),
|
||||
'edlp_studio_ui' => array(
|
||||
'file' => 'includes/edlp_studio_ui.inc',
|
||||
'variables' => array(
|
||||
'chutier' => null,
|
||||
'compositions' => null,
|
||||
'chutier_ui' => null,
|
||||
'composition_ui' => null,
|
||||
),
|
||||
),
|
||||
);
|
||||
@@ -127,6 +129,7 @@ function edlp_studio_node_view(array &$build, \Drupal\Core\Entity\EntityInterfac
|
||||
$url = Chutier::getActionsUrl($entity->id(), $user->id());
|
||||
$build['chutier_actions'] = array(
|
||||
'#type' => 'link',
|
||||
'#title' => 'Chutier',
|
||||
'#url' => $url,
|
||||
'#options'=>array(
|
||||
'attributes' => array(
|
||||
|
||||
@@ -22,3 +22,11 @@ edlp_studio.studio_ui:
|
||||
_title: 'Studio User Interface'
|
||||
requirements:
|
||||
_permission: 'use chutier'
|
||||
|
||||
edlp_studio.studio_ui_ajax:
|
||||
path: '/edlp/studio-ui/ajax'
|
||||
defaults:
|
||||
_controller: '\Drupal\edlp_studio\Controller\StudioUIController::StudioUIJson'
|
||||
_title: 'Studio User Interface'
|
||||
requirements:
|
||||
_permission: 'use chutier'
|
||||
|
||||
@@ -1,12 +1,57 @@
|
||||
<?php
|
||||
|
||||
// use Drupal\Core\Url;
|
||||
use \Drupal\Core\Url;
|
||||
use Drupal\Component\Utility\Unicode;
|
||||
|
||||
function template_preprocess_edlp_chutier_ui(&$vars){
|
||||
// dpm($vars);
|
||||
/*
|
||||
@see https://www.drupal8.ovh/index.php/en/tutoriels/339/render-a-node-or-an-entity
|
||||
*/
|
||||
// $view_builder = \Drupal::entityTypeManager()->getViewBuilder($vars['entity_type']);
|
||||
// $vars['content'] = $view_builder->view($vars['entity'], $vars['view_mode']);
|
||||
// $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
|
||||
|
||||
$vars['documents'] = array (
|
||||
'#theme' => 'item_list',
|
||||
'#items' => [],
|
||||
);
|
||||
foreach($vars['document_nodes'] as $node){
|
||||
// get the url
|
||||
$url = Url::fromRoute('entity.node.canonical', ['node' => $node->id()], ['absolute' => TRUE]);
|
||||
// get the audio file url
|
||||
$field_son_values = $node->get('field_son')->getValue();
|
||||
$son_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : "";
|
||||
$son_file = \Drupal\file\Entity\File::load($son_fid);
|
||||
$son_url = null;
|
||||
if($son_file){
|
||||
$son_uri = $son_file->getFileUri();
|
||||
$son_url = file_create_url($son_uri);
|
||||
}
|
||||
// get the title
|
||||
$title = $node->getTitle();
|
||||
if(!$title) continue;
|
||||
$trunc_title = Unicode::truncate($title, 30, true, true);
|
||||
// classes
|
||||
$classes = array('audio-link', 'ajax-link');
|
||||
// get the entries
|
||||
$entrees = '';
|
||||
foreach ($node->get('field_entrees')->getValue() as $key => $term) {
|
||||
$entrees .= '<span class="entree" tid="'.$term['target_id'].'"></span>';
|
||||
}
|
||||
// build the link
|
||||
$vars['documents']['#items'][] = array(
|
||||
'#prefix' => '<div class="entrees">'.$entrees.'</div>',
|
||||
'#title' => $trunc_title,
|
||||
'#type' => 'link',
|
||||
'#url' => $url,
|
||||
'#options'=>array(
|
||||
'attributes' => array(
|
||||
'data-drupal-link-system-path' => $url->getInternalPath(),
|
||||
'audio_url' => $son_url,
|
||||
'nid' => $node->id(),
|
||||
// 'tid' => $entrees[mt_rand(0, count($entrees) - 1)],
|
||||
// 'entries_size' => count($entrees),
|
||||
'class' => $classes,
|
||||
'title'=>$title,
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<?php
|
||||
|
||||
// use Drupal\Core\Url;
|
||||
|
||||
function template_preprocess_edlp_compositions_ui(&$vars){
|
||||
function template_preprocess_edlp_composition_ui(&$vars){
|
||||
// dpm($vars);
|
||||
/*
|
||||
@see https://www.drupal8.ovh/index.php/en/tutoriels/339/render-a-node-or-an-entity
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<?php
|
||||
|
||||
// use Drupal\Core\Url;
|
||||
|
||||
function template_preprocess_edlp_studio_ui(&$vars){
|
||||
// dpm($vars);
|
||||
/*
|
||||
|
||||
@@ -6,6 +6,7 @@ use Drupal\Core\Controller\ControllerBase;
|
||||
use Symfony\Component\DependencyInjection\ContainerInterface;
|
||||
use Drupal\Core\Session\AccountInterface;
|
||||
use Drupal\User\UserDataInterface;
|
||||
use Symfony\Component\HttpFoundation\JsonResponse;
|
||||
|
||||
use Drupal\edlp_studio\Entity\Chutier;
|
||||
|
||||
@@ -38,36 +39,69 @@ class StudioUIController extends ControllerBase {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Studioui.
|
||||
* Studio-ui.
|
||||
*
|
||||
* @return string
|
||||
* Return Hello string.
|
||||
* @return array
|
||||
* Return renderable array.
|
||||
*/
|
||||
public function StudioUI() {
|
||||
return $this->buildUI();
|
||||
}
|
||||
|
||||
/**
|
||||
* Studio-ui.
|
||||
*
|
||||
* @return array
|
||||
* Return renderable array.
|
||||
*/
|
||||
public function StudioUIJson() {
|
||||
$renderable = $this->buildUI();
|
||||
$rendered = render($renderable);
|
||||
|
||||
// JSON
|
||||
$response = new JsonResponse();
|
||||
$response->setData([
|
||||
'rendered'=> $rendered,
|
||||
]);
|
||||
return $response;
|
||||
|
||||
}
|
||||
|
||||
public function buildUI(){
|
||||
// get current user
|
||||
// done by DependencyInjection of AccountInterface
|
||||
dpm($this->user->id());
|
||||
// dpm($this->user->id());
|
||||
|
||||
// get his docs in chutier
|
||||
$docs = Chutier::getUserChutiersContents($this->user->id());
|
||||
dpm($docs);
|
||||
$documents_nids = Chutier::getUserChutiersContents($this->user->id());
|
||||
// dpm($documents_nids);
|
||||
|
||||
// TODO: add chutier theme, preprocess, twig template to studio module
|
||||
// TODO: build content renderable array
|
||||
$documents = entity_load_multiple('node', $documents_nids);
|
||||
|
||||
// build content renderable array
|
||||
$chutier_ui = array(
|
||||
"#theme"=>'edlp_chutier_ui',
|
||||
'#title' => t('Chutier'),
|
||||
"#document_nodes" => $documents,
|
||||
);
|
||||
|
||||
// TODO: get compositions
|
||||
// TODO: add compositions theme, preprocess, twig template to studio module
|
||||
// TODO: build content renderable array
|
||||
$composition_ui = array(
|
||||
"#theme"=>'edlp_compostion_ui',
|
||||
"#title" => t('Composition'),
|
||||
"#compositions" => array('#markup'=>'TODO : compositions UI'),
|
||||
);
|
||||
|
||||
// TODO: add studio theme, preprocess, twig template to studio module
|
||||
// TODO: build global studio renderable array
|
||||
|
||||
return [
|
||||
'#type' => 'markup',
|
||||
'#markup' => $this->t('Implement method: StudioUI')
|
||||
'#theme' => 'edlp_studio_ui',
|
||||
'#chutier_ui' => $chutier_ui,
|
||||
'#composition_ui' => $composition_ui,
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
<?php
|
||||
|
||||
namespace Drupal\edlp_studio\Plugin\Block;
|
||||
|
||||
use Drupal\Core\Session\AccountProxy;
|
||||
use Drupal\Core\Session\AccountProxyInterface;
|
||||
use Drupal\Core\Block\BlockBase;
|
||||
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
|
||||
use Symfony\Component\DependencyInjection\ContainerInterface;
|
||||
use Drupal\Core\Url;
|
||||
|
||||
/**
|
||||
* Provides a 'StudioLinkBlock' block.
|
||||
*
|
||||
* @Block(
|
||||
* id = "edlp_studio_link_block",
|
||||
* admin_label = @Translation("Studio link block"),
|
||||
* )
|
||||
*/
|
||||
class StudioLinkBlock extends BlockBase implements ContainerFactoryPluginInterface{
|
||||
|
||||
protected $user;
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
|
||||
// Instantiates this form class.
|
||||
return new static(
|
||||
$configuration,
|
||||
$plugin_id,
|
||||
$plugin_definition,
|
||||
$container->get('current_user')
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array $configuration
|
||||
* @param string $plugin_id
|
||||
* @param mixed $plugin_definition
|
||||
* @param \Drupal\Core\Session\AccountProxyInterface $account
|
||||
*/
|
||||
public function __construct(array $configuration, $plugin_id, $plugin_definition, AccountProxyInterface $account) {
|
||||
parent::__construct($configuration, $plugin_id, $plugin_definition);
|
||||
$this->user = $account;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function build() {
|
||||
$build = [];
|
||||
if($this->user->id()){
|
||||
$url = Url::fromRoute('edlp_studio.studio_ui', [], ['absolute' => TRUE]);
|
||||
$build['edlp_studio_link_block'] = array(
|
||||
'#title' => "Studio",
|
||||
'#type' => 'link',
|
||||
'#url' => $url,
|
||||
'#options'=>array(
|
||||
'attributes' => array(
|
||||
'data-drupal-link-system-path' => $url->getInternalPath(),
|
||||
'class' => array('ajax-link'),
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
}
|
||||
return $build;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="chutier_ui">
|
||||
<h2>{{ title }}</h2>
|
||||
<section class="documents">
|
||||
{{ documents }}
|
||||
</section>
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="composition_ui">
|
||||
<h2>{{ title }}</h2>
|
||||
<section class="composition">
|
||||
{{ compostions }}
|
||||
</section>
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
<div id="studio-ui">
|
||||
{{ chutier_ui }}
|
||||
{{ composition_ui }}
|
||||
</div>
|
||||
@@ -28,7 +28,7 @@ edlp_vars = {
|
||||
var _$body = $('body');
|
||||
var _is_front = _$body.is('.path-frontpage');
|
||||
var _$corpus_canvas;
|
||||
var _$content_container = $('.layout-container>main>.layout-content');
|
||||
var _$content_container = $('main[role="main"]>.layout-content');
|
||||
var _$ajaxLinks;
|
||||
|
||||
function init(){
|
||||
@@ -117,6 +117,7 @@ edlp_vars = {
|
||||
// TODO: previous and next btns
|
||||
},
|
||||
openDocument(node){
|
||||
console.log('AudioPlayer openDocument', node);
|
||||
this.setSRC(node.audio_url);
|
||||
this.loadNode(node.nid);
|
||||
},
|
||||
@@ -129,13 +130,13 @@ edlp_vars = {
|
||||
},
|
||||
onNodeLoaded(data){
|
||||
console.log('AudioPlayer node loaded', data);
|
||||
this.$cartel.html(data.rendered);
|
||||
this.$cartel.removeClass('loading');
|
||||
this.$cartel.html(data.rendered).removeClass('loading');
|
||||
_$body.trigger({'type':'new-audio-cartel-loaded'});
|
||||
initAjaxLinks();
|
||||
},
|
||||
onNodeLoadFail(jqxhr, textStatus, error){
|
||||
console.warn('AudioPlayer node load failed', jqxhr.responseText);
|
||||
this.$cartel.removeClass('loading').html('');
|
||||
},
|
||||
// audio functions
|
||||
setSRC(url){
|
||||
|
||||
+130
-30
@@ -1095,16 +1095,16 @@ body, html {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
div.layout-container {
|
||||
header[role="banner"] {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.5em 1em;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 1; }
|
||||
padding: 0.5em 1em; }
|
||||
header[role="banner"] > .wrapper {
|
||||
border-bottom: 1px solid red;
|
||||
height: 70px; }
|
||||
|
||||
main[role="main"] {
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -1119,26 +1119,26 @@ main[role="main"] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; }
|
||||
main[role="main"] .layout-content > * {
|
||||
pointer-events: auto; }
|
||||
main[role="main"] .layout-content > .messages {
|
||||
max-height: 500px;
|
||||
overflow: auto; }
|
||||
main[role="main"] .layout-content > * {
|
||||
pointer-events: auto; }
|
||||
|
||||
footer[role="contentinfo"] {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%; }
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
padding: 0.5em 1em; }
|
||||
|
||||
.os-scroll {
|
||||
height: 100%; }
|
||||
|
||||
.layout-container {
|
||||
pointer-events: none; }
|
||||
|
||||
header[role="banner"] {
|
||||
position: relative;
|
||||
padding: 0 0 0.5em 0;
|
||||
border-bottom: 1px solid red;
|
||||
pointer-events: all;
|
||||
height: 70px; }
|
||||
pointer-events: all; }
|
||||
|
||||
#block-edlptheme-branding {
|
||||
display: inline-block; }
|
||||
@@ -1496,6 +1496,81 @@ body.ajax-loading main[role="main"]:before {
|
||||
.chutier-icon:hover .popup {
|
||||
display: block; }
|
||||
|
||||
.row .col .studio-ui-wrapper {
|
||||
height: 100%; }
|
||||
|
||||
#studio-ui {
|
||||
height: 100%; }
|
||||
#studio-ui .chutier_ui {
|
||||
height: 50%;
|
||||
border-bottom: 1px solid red; }
|
||||
#studio-ui .chutier_ui > h2 {
|
||||
margin: 0.5em 0;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase; }
|
||||
#studio-ui .chutier_ui .documents ul, #studio-ui .chutier_ui .documents li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.2; }
|
||||
#studio-ui .chutier_ui .documents li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 49%;
|
||||
margin-bottom: 0.5em; }
|
||||
#studio-ui .chutier_ui .documents li .entrees {
|
||||
line-height: 0;
|
||||
display: inline-block; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: black;
|
||||
margin-right: 3px; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='134'] {
|
||||
background-color: #2b8f2f; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='121'] {
|
||||
background-color: #3a33b6; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='125'] {
|
||||
background-color: #2c9f57; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='119'] {
|
||||
background-color: #c48978; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='132'] {
|
||||
background-color: #5270bb; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='122'] {
|
||||
background-color: #fb54d3; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='129'] {
|
||||
background-color: #e07483; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='120'] {
|
||||
background-color: #655845; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='130'] {
|
||||
background-color: #7e0868; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='118'] {
|
||||
background-color: #0e7121; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='127'] {
|
||||
background-color: #dabd42; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='133'] {
|
||||
background-color: #0399bb; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='128'] {
|
||||
background-color: #399a1c; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='124'] {
|
||||
background-color: #708540; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='116'] {
|
||||
background-color: #191bff; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='117'] {
|
||||
background-color: #279d84; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='131'] {
|
||||
background-color: #5219ab; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='126'] {
|
||||
background-color: #d49cb6; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='123'] {
|
||||
background-color: #497715; }
|
||||
#studio-ui .chutier_ui .documents li a {
|
||||
text-transform: capitalize;
|
||||
font-size: 1em; }
|
||||
#studio-ui .composition_ui {
|
||||
height: 50%; }
|
||||
|
||||
body.path-agenda main .col > .wrapper {
|
||||
height: 100%; }
|
||||
|
||||
@@ -1558,19 +1633,27 @@ body.path-productions .layout-content .row {
|
||||
padding: 0 1em; }
|
||||
|
||||
footer {
|
||||
pointer-events: none;
|
||||
display: table;
|
||||
padding: 0 0 0.5em 0; }
|
||||
footer > .region {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
pointer-events: none; }
|
||||
footer > .wrapper {
|
||||
white-space: nowrap; }
|
||||
footer .region-footer-left {
|
||||
text-align: left; }
|
||||
footer .region-footer-center {
|
||||
text-align: center; }
|
||||
footer .region-footer-right {
|
||||
text-align: right;
|
||||
min-width: 30px; }
|
||||
footer > .wrapper > .region {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
white-space: normal; }
|
||||
footer > .wrapper > .region > * {
|
||||
display: inline-block;
|
||||
vertical-align: bottom; }
|
||||
footer > .wrapper .region-footer-left {
|
||||
width: 12%;
|
||||
text-align: left; }
|
||||
footer > .wrapper .region-footer-center {
|
||||
width: 72%;
|
||||
overflow: hidden;
|
||||
text-align: center; }
|
||||
footer > .wrapper .region-footer-right {
|
||||
width: 12%;
|
||||
text-align: right; }
|
||||
footer nav.block-menu {
|
||||
display: inline-block; }
|
||||
footer nav.block-menu ul {
|
||||
@@ -1595,6 +1678,8 @@ footer {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.756em;
|
||||
white-space: nowrap; }
|
||||
footer nav.block-menu ul li:first-of-type {
|
||||
margin-left: 1em; }
|
||||
footer .block-language {
|
||||
display: inline-block;
|
||||
position: relative; }
|
||||
@@ -1628,6 +1713,7 @@ footer {
|
||||
body:not(.path-productions) footer #block-productions {
|
||||
display: none; }
|
||||
footer #block-productions ul {
|
||||
margin-left: -3em;
|
||||
white-space: nowrap; }
|
||||
footer #block-productions ul li a {
|
||||
pointer-events: all;
|
||||
@@ -1659,6 +1745,7 @@ footer {
|
||||
body.path-productions footer .block-block-edlp-entrees {
|
||||
display: none; }
|
||||
footer .block-block-edlp-entrees ul {
|
||||
margin: 0;
|
||||
white-space: nowrap; }
|
||||
footer .block-block-edlp-entrees ul li {
|
||||
display: inline-block;
|
||||
@@ -1813,6 +1900,17 @@ footer {
|
||||
footer .block-block-edlp-entrees ul li.opened .entree-content {
|
||||
width: 350px;
|
||||
opacity: 1; }
|
||||
footer #block-studiolinkblock {
|
||||
pointer-events: all; }
|
||||
footer #block-studiolinkblock a {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(../img/studio.svg);
|
||||
background-size: contain;
|
||||
text-indent: 40px;
|
||||
margin: 0;
|
||||
overflow: hidden; }
|
||||
footer #block-userlogin {
|
||||
pointer-events: all;
|
||||
position: relative;
|
||||
@@ -1837,6 +1935,8 @@ footer {
|
||||
padding: 0.5em;
|
||||
padding-bottom: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border-top: 1px solid red;
|
||||
border-bottom: 1px solid red;
|
||||
overflow: hidden;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
var _$body = $('body');
|
||||
var _is_front = _$body.is('.path-frontpage');
|
||||
var _$corpus_canvas;
|
||||
var _$content_container = $('.layout-container>main>.layout-content');
|
||||
var _$content_container = $('main[role="main"]>.layout-content');
|
||||
var _$ajaxLinks;
|
||||
|
||||
function init(){
|
||||
@@ -94,6 +94,7 @@
|
||||
// TODO: previous and next btns
|
||||
},
|
||||
openDocument(node){
|
||||
console.log('AudioPlayer openDocument', node);
|
||||
this.setSRC(node.audio_url);
|
||||
this.loadNode(node.nid);
|
||||
},
|
||||
@@ -106,13 +107,13 @@
|
||||
},
|
||||
onNodeLoaded(data){
|
||||
console.log('AudioPlayer node loaded', data);
|
||||
this.$cartel.html(data.rendered);
|
||||
this.$cartel.removeClass('loading');
|
||||
this.$cartel.html(data.rendered).removeClass('loading');
|
||||
_$body.trigger({'type':'new-audio-cartel-loaded'});
|
||||
initAjaxLinks();
|
||||
},
|
||||
onNodeLoadFail(jqxhr, textStatus, error){
|
||||
console.warn('AudioPlayer node load failed', jqxhr.responseText);
|
||||
this.$cartel.removeClass('loading').html('');
|
||||
},
|
||||
// audio functions
|
||||
setSRC(url){
|
||||
|
||||
@@ -49,9 +49,9 @@
|
||||
}
|
||||
|
||||
|
||||
.layout-container{
|
||||
pointer-events: none;
|
||||
}
|
||||
// .layout-container{
|
||||
// pointer-events: none;
|
||||
// }
|
||||
|
||||
|
||||
// _ _
|
||||
@@ -59,12 +59,8 @@
|
||||
// | ' \/ -_) _` / _` / -_) '_|
|
||||
// |_||_\___\__,_\__,_\___|_|
|
||||
header[role="banner"]{
|
||||
position: relative;
|
||||
padding:0 0 0.5em 0;
|
||||
border-bottom: 1px solid red;
|
||||
pointer-events: all;
|
||||
// TODO: what header height to fit well with player ??
|
||||
height:70px;
|
||||
}
|
||||
|
||||
#block-edlptheme-branding{
|
||||
@@ -430,6 +426,47 @@ main[role="main"]{
|
||||
}
|
||||
}
|
||||
|
||||
.row .col .studio-ui-wrapper{
|
||||
height: 100%;
|
||||
}
|
||||
#studio-ui{
|
||||
height:100%;
|
||||
.chutier_ui{
|
||||
height: 50%;
|
||||
border-bottom: 1px solid red;
|
||||
&>h2{
|
||||
margin:0.5em 0;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.documents{
|
||||
ul,li{
|
||||
margin:0; padding:0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
li{
|
||||
display: inline-block; vertical-align: top;
|
||||
width:49%; margin-bottom: 0.5em;
|
||||
.entrees{
|
||||
line-height: 0;
|
||||
display:inline-block;
|
||||
span{
|
||||
@include entrie-micro-square;
|
||||
}
|
||||
}
|
||||
a{
|
||||
text-transform: capitalize;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.composition_ui{
|
||||
height:50%;
|
||||
}
|
||||
}
|
||||
|
||||
// _ _ _ _ _
|
||||
// /_\ (_)__ ___ __ | \| |___ __| |___
|
||||
@@ -561,22 +598,45 @@ body.path-productions{
|
||||
}
|
||||
|
||||
footer{
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
// outline: 1px dotted blue;
|
||||
// text-align: center;
|
||||
display: table;
|
||||
padding: 0 0 0.5em 0;
|
||||
|
||||
>.region{
|
||||
display: table-cell;
|
||||
>.wrapper{
|
||||
white-space: nowrap;
|
||||
// pointer-events: none;
|
||||
// outline: 1px dotted purple;
|
||||
// position: relative;
|
||||
|
||||
>.region{
|
||||
// display: table-cell;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
white-space:normal;
|
||||
|
||||
// pointer-events: none;
|
||||
// outline: 1px dotted purple;
|
||||
// position: relative;
|
||||
>*{
|
||||
display: inline-block; vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
.region-footer-left{
|
||||
// float:left;
|
||||
width:12%;
|
||||
// min-width:50px;
|
||||
text-align: left;
|
||||
}
|
||||
.region-footer-center{
|
||||
// float: none;
|
||||
width: 72%;
|
||||
overflow:hidden;
|
||||
text-align: center;
|
||||
}
|
||||
.region-footer-right{
|
||||
// float:right;
|
||||
width:12%;
|
||||
// min-width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.region-footer-left{text-align: left;}
|
||||
.region-footer-center{text-align: center;}
|
||||
.region-footer-right{text-align: right;min-width: 30px;}
|
||||
|
||||
nav.block-menu{
|
||||
display: inline-block;
|
||||
@@ -586,6 +646,9 @@ footer{
|
||||
li{
|
||||
pointer-events: all;
|
||||
@include oblique-list;
|
||||
&:first-of-type{
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -630,6 +693,7 @@ footer{
|
||||
body:not(.path-productions) & {display:none}
|
||||
|
||||
ul{
|
||||
margin-left: -3em;
|
||||
white-space: nowrap;
|
||||
li{
|
||||
a{
|
||||
@@ -663,6 +727,7 @@ footer{
|
||||
display: inline-block;
|
||||
// vertical-align: top;
|
||||
ul{
|
||||
margin:0;
|
||||
white-space: nowrap;
|
||||
li{
|
||||
@include oblique-list;
|
||||
@@ -834,10 +899,28 @@ footer{
|
||||
}
|
||||
}
|
||||
|
||||
$icons_w:20px;
|
||||
#block-studiolinkblock{
|
||||
pointer-events: all;
|
||||
a{
|
||||
$wh:$icons_w;
|
||||
display: block;
|
||||
width:$wh; height:$wh;
|
||||
background-image: url(../img/studio.svg);
|
||||
background-size: contain;
|
||||
text-indent: $wh*2;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
// #block-fancylogin{
|
||||
// pointer-events: all;
|
||||
//
|
||||
// }
|
||||
#block-userlogin{
|
||||
pointer-events: all;
|
||||
// outline: 1px solid blue;
|
||||
$wh:20px;
|
||||
$wh:$icons_w;
|
||||
position: relative;
|
||||
width:$wh; height: $wh;
|
||||
// background-color: blue;
|
||||
@@ -860,6 +943,8 @@ footer{
|
||||
padding:0.5em;
|
||||
padding-bottom: 20px;
|
||||
background-color: $transparent-bg;
|
||||
border-top: 1px solid red;
|
||||
border-bottom: 1px solid red;
|
||||
overflow: hidden;
|
||||
box-sizing:border-box;
|
||||
height: 0px;
|
||||
|
||||
@@ -10,22 +10,30 @@ body, html{
|
||||
// background-color: rgb(219, 219, 219);
|
||||
}
|
||||
|
||||
div.layout-container{
|
||||
position: relative;
|
||||
width:100%; height:100%;
|
||||
padding:0.5em 1em;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
}
|
||||
// div.layout-container{
|
||||
// position: relative;
|
||||
// width:100%; height:100%;
|
||||
// padding:0.5em 1em;
|
||||
// box-sizing: border-box;
|
||||
// z-index: 1;
|
||||
// }
|
||||
|
||||
header[role="banner"]{
|
||||
// outline: 1px solid blue;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
padding:0.5em 1em;
|
||||
>.wrapper{
|
||||
border-bottom: 1px solid red;
|
||||
// TODO: what header height to fit well with player ??
|
||||
height:70px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
main[role="main"]{
|
||||
// outline:1px solid green;
|
||||
// display: none;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left:0; top:0;
|
||||
@@ -36,17 +44,24 @@ main[role="main"]{
|
||||
.layout-content{
|
||||
width: 100%; height:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
.layout-content>*{
|
||||
pointer-events: auto;
|
||||
&>.messages{
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
&>*{
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer[role="contentinfo"]{
|
||||
// outline: 1px solid pink;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
box-sizing: content-box;
|
||||
width:100%;
|
||||
padding:0.5em 1em;
|
||||
}
|
||||
|
||||
canvas#corpus-map{
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<div class="row">
|
||||
<div class="col small-col-12 med-col-6 large-col-6">
|
||||
<div class="wrapper studio-ui-wrapper">
|
||||
<div id="studio-ui">
|
||||
{{ chutier_ui }}
|
||||
{{ composition_ui }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,10 +42,12 @@
|
||||
* @see html.html.twig
|
||||
*/
|
||||
#}
|
||||
<div class="layout-container">
|
||||
{# <div class="layout-container"> #}
|
||||
|
||||
<header role="banner">
|
||||
{{ page.header }}
|
||||
<div class="wrapper">
|
||||
{{ page.header }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main role="main">
|
||||
@@ -56,10 +58,12 @@
|
||||
|
||||
{% if page.footer_left or page.footer_center or page.footer_right %}
|
||||
<footer role="contentinfo">
|
||||
<div class="wrapper">
|
||||
{{ page.footer_left }}
|
||||
{{ page.footer_center }}
|
||||
{{ page.footer_right }}
|
||||
</div>
|
||||
</footer>
|
||||
{% endif %}
|
||||
|
||||
</div>{# /.layout-container #}
|
||||
{#</div> /.layout-container #}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
uuid: a6822428-a78b-46c3-bf0f-ee0d28ac94a0
|
||||
langcode: fr
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- edlp_studio
|
||||
theme:
|
||||
- edlptheme
|
||||
id: studiolinkblock
|
||||
theme: edlptheme
|
||||
region: footer_right
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: edlp_studio_link_block
|
||||
settings:
|
||||
id: edlp_studio_link_block
|
||||
label: 'Studio link block'
|
||||
provider: edlp_studio
|
||||
label_display: '0'
|
||||
visibility: { }
|
||||
@@ -0,0 +1,52 @@
|
||||
uuid: 0a0a3fc0-62be-4561-af3c-d8babe3a2dc2
|
||||
langcode: fr
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- core.entity_view_mode.node.chutier
|
||||
- field.field.node.enregistrement.body
|
||||
- field.field.node.enregistrement.field_collectionneurs
|
||||
- field.field.node.enregistrement.field_description
|
||||
- field.field.node.enregistrement.field_entrees
|
||||
- field.field.node.enregistrement.field_genres
|
||||
- field.field.node.enregistrement.field_langues
|
||||
- field.field.node.enregistrement.field_locuteurs
|
||||
- field.field.node.enregistrement.field_son
|
||||
- field.field.node.enregistrement.field_transcript_trad
|
||||
- field.field.node.enregistrement.field_transcript_vo
|
||||
- field.field.node.enregistrement.field_workflow
|
||||
- node.type.enregistrement
|
||||
module:
|
||||
- user
|
||||
id: node.enregistrement.chutier
|
||||
targetEntityType: node
|
||||
bundle: enregistrement
|
||||
mode: chutier
|
||||
content:
|
||||
content_moderation_control:
|
||||
weight: -20
|
||||
region: content
|
||||
settings: { }
|
||||
third_party_settings: { }
|
||||
field_entrees:
|
||||
type: entity_reference_label
|
||||
weight: 0
|
||||
region: content
|
||||
label: hidden
|
||||
settings:
|
||||
link: false
|
||||
third_party_settings: { }
|
||||
hidden:
|
||||
body: true
|
||||
chutier_actions: true
|
||||
field_collectionneurs: true
|
||||
field_description: true
|
||||
field_genres: true
|
||||
field_langues: true
|
||||
field_locuteurs: true
|
||||
field_son: true
|
||||
field_transcript_trad: true
|
||||
field_transcript_vo: true
|
||||
field_workflow: true
|
||||
langcode: true
|
||||
links: true
|
||||
@@ -129,4 +129,5 @@ content:
|
||||
settings: { }
|
||||
third_party_settings: { }
|
||||
hidden:
|
||||
chutier_actions: true
|
||||
langcode: true
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
uuid: 5cb0787b-89fe-49dd-a755-ef9ec2bcde4d
|
||||
langcode: fr
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- node
|
||||
id: node.chutier
|
||||
label: 'Chutier (Document)'
|
||||
targetEntityType: node
|
||||
cache: true
|
||||
Reference in New Issue
Block a user