search is ok! (remains to sync search and corpus map

This commit is contained in:
Bachir Soussi Chiadmi
2018-03-19 15:07:19 +01:00
parent 973483a6eb
commit a7f736f919
29 changed files with 656 additions and 147 deletions
@@ -4,7 +4,7 @@
var _$body = $('body');
var _is_front = _$body.is('.path-frontpage');
var _$corpus_canvas;
var _$content_container = $('main[role="main"]>.layout-content');
var _$row = $('main[role="main"]>.layout-content>.row');
var _$ajaxLinks;
var _audio_player;
var _randomPlayer;
@@ -41,6 +41,9 @@
.on('on-studio-chutier-updated', function(e){
initAjaxLinks();
})
.on('search-results-loaded',function(e){
initAjaxLinks();
})
.on('open_entree', function(e){
// e.tid available
closeAllModals();
@@ -410,7 +413,9 @@
_$body.removeClass('ajax-loading');
// replace all content with newly loaded
_$content_container.html(data.rendered);
// TODO: build a system to replace or append contents (like studio + search)
_$row.html(data.rendered);
// add body class for currently loaded content
var body_classes = [
@@ -448,7 +453,7 @@
_$body.trigger({'type':'new-content-ajax-loaded'});
// TODO: call behaviours
Drupal.attachBehaviors(_$content_container);
Drupal.attachBehaviors(_$row[0]);
};
@@ -553,7 +558,7 @@
// |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
function initProductions(){
console.log('theme : initProductions');
var $grid = $('.row', _$content_container).masonry({
var $grid = $('.row', _$row).masonry({
itemSelector:'.col',
columnWidth:'.col-2'
});
@@ -562,7 +567,7 @@
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
// var $grid = $('.row', _$content_container).imagesLoaded( function() {
// var $grid = $('.row', _$row).imagesLoaded( function() {
// // init Masonry after all images have loaded
// $grid.masonry({
// itemSelector:'.col',
@@ -591,7 +596,7 @@
function closeAllModals(){
console.log('theme : closeAllModals');
// TODO: animate the remove
_$content_container.html('');
_$row.html('');
_$ajaxLinks.removeClass('is-active');
};
@@ -1086,6 +1086,11 @@ a:focus {
.col-11-offset-1:last-child {
padding-right: 0; }
.col.float-right {
float: right;
padding-right: 0;
padding-left: 1em; }
body, html {
position: relative;
width: 100%;
@@ -1108,6 +1113,18 @@ header[role="banner"] {
height: 100%;
position: relative; }
aside.messages {
border: none;
z-index: 99;
position: absolute;
left: 5%;
top: 100px;
width: 80%;
max-height: 600px;
background-color: rgba(255, 255, 255, 0.8);
padding: 0;
overflow-y: auto; }
main[role="main"] {
z-index: 1;
position: absolute;
@@ -1124,9 +1141,6 @@ main[role="main"] {
width: 100%;
height: 100%;
overflow: hidden; }
main[role="main"] .layout-content > .messages {
max-height: 500px;
overflow: auto; }
main[role="main"] .layout-content > * {
pointer-events: auto; }
@@ -1671,6 +1685,57 @@ body.ajax-loading main[role="main"]:before {
padding-left: 1em;
border-left: 1px solid #aaa; }
.col[theme="edlp_search_results"] article .entrees span {
display: inline-block;
width: 8px;
height: 8px;
background-color: black;
margin-right: 3px; }
.col[theme="edlp_search_results"] article .entrees span[tid='134'] {
background-color: var(--e-col-134); }
.col[theme="edlp_search_results"] article .entrees span[tid='121'] {
background-color: var(--e-col-121); }
.col[theme="edlp_search_results"] article .entrees span[tid='125'] {
background-color: var(--e-col-125); }
.col[theme="edlp_search_results"] article .entrees span[tid='119'] {
background-color: var(--e-col-119); }
.col[theme="edlp_search_results"] article .entrees span[tid='132'] {
background-color: var(--e-col-132); }
.col[theme="edlp_search_results"] article .entrees span[tid='122'] {
background-color: var(--e-col-122); }
.col[theme="edlp_search_results"] article .entrees span[tid='129'] {
background-color: var(--e-col-129); }
.col[theme="edlp_search_results"] article .entrees span[tid='120'] {
background-color: var(--e-col-120); }
.col[theme="edlp_search_results"] article .entrees span[tid='130'] {
background-color: var(--e-col-130); }
.col[theme="edlp_search_results"] article .entrees span[tid='118'] {
background-color: var(--e-col-118); }
.col[theme="edlp_search_results"] article .entrees span[tid='127'] {
background-color: var(--e-col-127); }
.col[theme="edlp_search_results"] article .entrees span[tid='133'] {
background-color: var(--e-col-133); }
.col[theme="edlp_search_results"] article .entrees span[tid='128'] {
background-color: var(--e-col-128); }
.col[theme="edlp_search_results"] article .entrees span[tid='124'] {
background-color: var(--e-col-124); }
.col[theme="edlp_search_results"] article .entrees span[tid='116'] {
background-color: var(--e-col-116); }
.col[theme="edlp_search_results"] article .entrees span[tid='117'] {
background-color: var(--e-col-117); }
.col[theme="edlp_search_results"] article .entrees span[tid='131'] {
background-color: var(--e-col-131); }
.col[theme="edlp_search_results"] article .entrees span[tid='126'] {
background-color: var(--e-col-126); }
.col[theme="edlp_search_results"] article .entrees span[tid='123'] {
background-color: var(--e-col-123); }
.col[theme="edlp_search_results"] article h2.node-title {
margin: 0 0 0.3em 0;
font-size: 1em;
font-weight: 500;
text-transform: none; }
body.path-agenda main .col > .wrapper {
height: 100%; }
@@ -4,7 +4,7 @@
var _$body = $('body');
var _is_front = _$body.is('.path-frontpage');
var _$corpus_canvas;
var _$content_container = $('main[role="main"]>.layout-content');
var _$row = $('main[role="main"]>.layout-content>.row');
var _$ajaxLinks;
var _audio_player;
var _randomPlayer;
@@ -41,6 +41,9 @@
.on('on-studio-chutier-updated', function(e){
initAjaxLinks();
})
.on('search-results-loaded',function(e){
initAjaxLinks();
})
.on('open_entree', function(e){
// e.tid available
closeAllModals();
@@ -410,7 +413,9 @@
_$body.removeClass('ajax-loading');
// replace all content with newly loaded
_$content_container.html(data.rendered);
// TODO: build a system to replace or append contents (like studio + search)
_$row.html(data.rendered);
// add body class for currently loaded content
var body_classes = [
@@ -448,7 +453,7 @@
_$body.trigger({'type':'new-content-ajax-loaded'});
// TODO: call behaviours
Drupal.attachBehaviors(_$content_container);
Drupal.attachBehaviors(_$row[0]);
};
@@ -553,7 +558,7 @@
// |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
function initProductions(){
console.log('theme : initProductions');
var $grid = $('.row', _$content_container).masonry({
var $grid = $('.row', _$row).masonry({
itemSelector:'.col',
columnWidth:'.col-2'
});
@@ -562,7 +567,7 @@
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
// var $grid = $('.row', _$content_container).imagesLoaded( function() {
// var $grid = $('.row', _$row).imagesLoaded( function() {
// // init Masonry after all images have loaded
// $grid.masonry({
// itemSelector:'.col',
@@ -591,7 +596,7 @@
function closeAllModals(){
console.log('theme : closeAllModals');
// TODO: animate the remove
_$content_container.html('');
_$row.html('');
_$ajaxLinks.removeClass('is-active');
};
@@ -587,6 +587,39 @@ main[role="main"]{
}
}
// ___ _
// / __| ___ __ _ _ _ __| |_
// \__ \/ -_) _` | '_/ _| ' \
// |___/\___\__,_|_| \__|_||_|
#edlp-search-form{
}
.col[theme="edlp_search_results"]{
article{
.entrees{
span{
@include entrie-micro-square;
}
}
h2.node-title{
margin:0 0 0.3em 0;
font-size: 1em;
font-weight: 500;
text-transform: none;
}
// .description{
// p{
// margin:0;
// font-size: 0.75em;
// }
// }
}
}
// _ _ _ _ _
// /_\ (_)__ ___ __ | \| |___ __| |___
// / _ \ | / _` \ \ / | .` / _ \/ _` / -_)
@@ -692,6 +725,7 @@ body.path-productions{
}
}
}
// ___ _
// | __|__ ___| |_ ___ _ _
// | _/ _ \/ _ \ _/ -_) '_|
@@ -1041,8 +1075,8 @@ footer{
}
}
$icons_w:20px;
@mixin iconlinkblock($bgimgurl) {
$icons_w:20px;
pointer-events: all;
margin-left: 0.5em;
a{
@@ -73,3 +73,9 @@ $med-bp:1080px;
}
}
}
.col.float-right{
float: right;
padding-right: 0;
padding-left: $default_gap;
}
@@ -36,6 +36,16 @@ header[role="banner"]{
}
}
aside.messages{
border: none;
z-index: 99;
position: absolute;
left:5%; top:100px;
width:80%; max-height: 600px;
background-color: rgba(255,255,255,0.8);
padding:0;
overflow-y: auto;
}
main[role="main"]{
// outline:1px solid green;
@@ -51,10 +61,6 @@ main[role="main"]{
.layout-content{
width: 100%; height:100%;
overflow:hidden;
&>.messages{
max-height: 500px;
overflow: auto;
}
&>*{
pointer-events: auto;
}
@@ -11,10 +11,9 @@ use Drupal\Core\Template\Attribute;
use Drupal\Component\Utility\Unicode;
use Drupal\Core\Render\Element;
// function edlptheme_preprocess_input(&$vars){
function edlptheme_preprocess_page(&$vars){
// dsm($vars, 'vars');
// $vars['attributes']['placeholder'] = "salut";
// }
}
function edlptheme_preprocess_node(&$vars){
$node = $vars['elements']['#node'];
@@ -80,6 +79,30 @@ function edlptheme_preprocess_node__enregistrement__index(&$vars){
// dpm($vars['link_attributes']);
}
function edlptheme_preprocess_node__enregistrement__search_index(&$vars){
$node = $vars['elements']['#node'];
$options = ['absolute' => TRUE];
$url = Url::fromRoute('entity.node.canonical', ['node' => $node->id()], $options);
$system_path = $url->getInternalPath();
// 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);
}
$vars['link_attributes'] = new Attribute(array(
'data-drupal-link-system-path' => $system_path=='' ? '<front>' : $system_path,
'audio_url' => $son_url,
'nid' => $node->id(),
'class' => array('audio-link', 'ajax-link')
));
// dpm($vars['link_attributes']);
}
function edlptheme_preprocess_node__enregistrement__player_cartel(&$vars){
// dpm($vars);
// if transcript not empty
@@ -1,17 +1,15 @@
<div class="row">
<div class="col small-col-12 med-col-12 large-col-8 ">
<div class="wrapper">
<div id="agenda">
<div class="column next-event">
{{ next_event }}
</div>
<div class="column future-past-events os-scroll">
{{ coming_events }}
{{ past_events }}
</div>
<div class="col small-col-12 med-col-12 large-col-8 ">
<div class="wrapper">
<div id="agenda">
<div class="column next-event">
{{ next_event }}
</div>
<div class="column future-past-events os-scroll">
{{ coming_events }}
{{ past_events }}
</div>
</div>
</div>
</div>
@@ -1,7 +1,5 @@
<div class="row">
<div class="col small-col-12 med-col-6 large-col-6">
<div class="wrapper">
{{ content }}
</div>
<div class="col small-col-12 med-col-6 large-col-6">
<div class="wrapper">
{{ content }}
</div>
</div>
@@ -1,9 +1,7 @@
<div class="row">
<div class="col small-col-12 med-col-6 large-col-6">
<div class="wrapper">
{#<div class="os-scroll">#}
{{ content }}
{#</div>#}
</div>
<div class="col small-col-12 med-col-6 large-col-6">
<div class="wrapper">
{#<div class="os-scroll">#}
{{ content }}
{#</div>#}
</div>
</div>
@@ -1,7 +1,5 @@
<div class="row">
<div class="col small-col-12 med-col-6 large-col-6">
<div class="wrapper">
{{ content }}
</div>
<div class="col small-col-12 med-col-6 large-col-6">
<div class="wrapper">
{{ content }}
</div>
</div>
@@ -1,7 +1,5 @@
<div class="row">
<div class="col small-col-12 med-col-4 large-col-4">
<div class="wrapper">
{{ content }}
</div>
<div class="col small-col-12 med-col-4 large-col-4">
<div class="wrapper">
{{ content }}
</div>
</div>
@@ -1,7 +1,5 @@
<div class="row">
<div class="col small-col-12 med-col-6 large-col-6">
<div class="wrapper">
{{ content }}
</div>
<div class="col small-col-12 med-col-6 large-col-6">
<div class="wrapper">
{{ content }}
</div>
</div>
@@ -1,22 +1,20 @@
<div class="row">
<div class="presentation col col-4">
<div class="wrapper">
{{ presentation }}
</div>
</div>
<div class="last-file col col-2">
<div class="wrapper">
{{ last_fil }}
</div>
</div>
<div class="last-prod col col-4">
<div class="wrapper">
{{ last_production }}
</div>
</div>
<div class="agenda col col-2">
<div class="wrapper">
{{ agenda }}
</div>
<div class="presentation col col-4">
<div class="wrapper">
{{ presentation }}
</div>
</div>
<div class="last-file col col-2">
<div class="wrapper">
{{ last_fil }}
</div>
</div>
<div class="last-prod col col-4">
<div class="wrapper">
{{ last_production }}
</div>
</div>
<div class="agenda col col-2">
<div class="wrapper">
{{ agenda }}
</div>
</div>
@@ -1,9 +1,7 @@
<div class="row">
{% for node in nodes %}
<div class="col col-{{ node.cols }}">
<div class="wrapper">
{{ node.build }}
</div>
{% for node in nodes %}
<div class="col col-{{ node.cols }}">
<div class="wrapper">
{{ node.build }}
</div>
{% endfor %}
</div>
</div>
{% endfor %}
@@ -0,0 +1,7 @@
<div theme="{{ theme_hook_original }}" class="col small-col-12 med-col-4 large-col-3 float-right">
<div class="wrapper">
{{ items }}
{{ no_results_found }}
{{ search_help }}
</div>
</div>
@@ -1,7 +1,5 @@
<div class="row">
<div class="col small-col-12 med-col-6 large-col-6">
<div class="wrapper">
{{ form }}
</div>
<div theme="{{ theme_hook_original }}" class="col small-col-12 med-col-4 large-col-3 float-right">
<div class="wrapper">
{{ form }}
</div>
</div>
@@ -1,10 +1,8 @@
<div class="row">
<div class="col small-col-12 med-col-12 large-col-6">
<div class="wrapper studio-ui-wrapper">
<div id="studio-ui">
{{ chutier_ui }}
{{ composition_ui }}
</div>
<div class="col small-col-12 med-col-12 large-col-6">
<div class="wrapper studio-ui-wrapper">
<div id="studio-ui">
{{ chutier_ui }}
{{ composition_ui }}
</div>
</div>
</div>
@@ -0,0 +1,96 @@
{#
/**
* @file
* Theme override to display a node.
*
* Available variables:
* - node: The node entity with limited access to object properties and methods.
* Only method names starting with "get", "has", or "is" and a few common
* methods such as "id", "label", and "bundle" are available. For example:
* - node.getCreatedTime() will return the node creation timestamp.
* - node.hasField('field_example') returns TRUE if the node bundle includes
* field_example. (This does not indicate the presence of a value in this
* field.)
* - node.isPublished() will return whether the node is published or not.
* Calling other methods, such as node.delete(), will result in an exception.
* See \Drupal\node\Entity\Node for a full list of public properties and
* methods for the node object.
* - label: The title of the node.
* - content: All node items. Use {{ content }} to print them all,
* or print a subset such as {{ content.field_example }}. Use
* {{ content|without('field_example') }} to temporarily suppress the printing
* of a given child element.
* - author_picture: The node author user entity, rendered using the "compact"
* view mode.
* - metadata: Metadata for this node.
* - date: Themed creation date field.
* - author_name: Themed author name field.
* - url: Direct URL of the current node.
* - display_submitted: Whether submission information should be displayed.
* - attributes: HTML attributes for the containing element.
* The attributes.class element may contain one or more of the following
* classes:
* - node: The current template type (also known as a "theming hook").
* - node--type-[type]: The current node type. For example, if the node is an
* "Article" it would result in "node--type-article". Note that the machine
* name will often be in a short form of the human readable label.
* - node--view-mode-[view_mode]: The View Mode of the node; for example, a
* teaser would result in: "node--view-mode-teaser", and
* full: "node--view-mode-full".
* The following are controlled through the node publishing options.
* - node--promoted: Appears on nodes promoted to the front page.
* - node--sticky: Appears on nodes ordered above other non-sticky nodes in
* teaser listings.
* - node--unpublished: Appears on unpublished nodes visible only to site
* admins.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - content_attributes: Same as attributes, except applied to the main
* content tag that appears in the template.
* - author_attributes: Same as attributes, except applied to the author of
* the node tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
* - view_mode: View mode; for example, "teaser" or "full".
* - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
* - page: Flag for the full page state. Will be true if view_mode is 'full'.
* - readmore: Flag for more state. Will be true if the teaser content of the
* node cannot hold the main body content.
* - logged_in: Flag for authenticated user status. Will be true when the
* current user is a logged-in member.
* - is_admin: Flag for admin user status. Will be true when the current user
* is an administrator.
*
* @see template_preprocess_node()
*
* @todo Remove the id attribute (or make it a class), because if that gets
* rendered twice on a page this is invalid CSS for example: two lists
* in different view modes.
*/
#}
{%
set classes = [
'node',
'node--type-' ~ node.bundle|clean_class,
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
]
%}
{{ attach_library('classy/node') }}
<article{{ attributes.addClass(classes) }}>
<div class="entrees">
{# THIS IS REALLY DIRTY !! #}
{% for key, child in content.field_entrees if key|first != '#' %}
{% set tid = child['#cache']['tags'][0]|replace({'taxonomy_term:':''}) %}
<span class="entree" tid="{{ tid }}" title="{{ child }}"></span>
{% endfor %}
</div>
<h2{{ title_attributes.addClass('node-title') }}>
<a href="{{ url }}" rel="bookmark" {{ link_attributes }}>{{ label }}</a>
</h2>
</article>
@@ -50,9 +50,17 @@
</div>
</header>
{% if page.content.messages %}
<aside class="messages">
{{ page.content.messages }}
</aside>
{% endif %}
<main role="main">
<div class="layout-content">
{{ page.content }}
<div class="row">
{{ page.content|without('messages') }}
</div>
</div>{# /.layout-content #}
</main>