Chutier link from audio player cartel is working git add .

This commit is contained in:
Bachir Soussi Chiadmi
2018-03-11 18:44:32 +01:00
parent 12a4b7c6a9
commit c0d185bb6d
23 changed files with 667 additions and 197 deletions
@@ -1,5 +1,63 @@
(function ($, Drupal) {
function init(){
console.log('Studio Init');
initEvents();
initAjax();
};
function initEvents(){
$('body').on('new-audio-cartel-loaded', initAjax);
};
function initAjax(){
console.log('studio initAjax chutier');
$('.chutier-ajax-link:not(.ajax-enabled)')
.addClass('ajax-enabled')
.on('click', onClickAjaxLink);
};
function onClickAjaxLink(e){
console.log('studio onClickAjaxLink chutier');
e.preventDefault();
// var $this = $(this);
addRemoveToChutier($(this));
// switch($this.attr('action')){
// case 'add':
// // TODO: get target chutier
// addToChutier($this);
// break;
// case 'remove':
// // TODO: if we use more than one chutoer per user get target chutier
// removeFromChutier($this);
// break;
// }
return false;
};
function addRemoveToChutier($link){
// var ajax_path = 'edlp_studio/ajax/chutier/add/'+id; // + '/' +cid;
var ajax_path = $link.attr('data-drupal-link-system-path');
var path = window.location.origin + drupalSettings.path.baseUrl + ajax_path;
$link.addClass('ajax-loading');
$.getJSON(path, {})
.done(function(data){
onActionToChutierDone($link, data);
})
.fail(function(jqxhr, textStatus, error){
onErrorActionToChutier(jqxhr, textStatus, error, $link);
});
};
function onActionToChutierDone($link, data){
console.log('onActionToChutierDone',data);
$link.replaceWith(data.new_link);
initAjax();
};
function onErrorActionToChutier(jqxhr, textStatus, error, $link){
console.warn('add to chuttier load failed : '+error, jqxhr.responseText);
};
init();
})(jQuery, Drupal);
@@ -1,3 +1,6 @@
edlp_studio-library:
js:
js/edlp_studio.js: {}
assets/js/edlp_studio.js: { scope: footer }
dependencies:
- core/drupalSettings
- core/jquery
@@ -6,7 +6,8 @@
*/
use Drupal\Core\Routing\RouteMatchInterface;
use Drupal\Core\Url;
use Drupal\edlp_studio\Entity\Chutier;
/**
* Implements hook_help().
*/
@@ -23,6 +24,15 @@ function edlp_studio_help($route_name, RouteMatchInterface $route_match) {
}
}
/**
* Implements hook_page_attachments().
* @param array $attachments
*/
function edlp_studio_page_attachments(array &$attachments) {
$attachments['#attached']['library'][] = 'edlp_studio/edlp_studio-library';
}
/**
* hook_entity_extra_field_info()
*
@@ -30,8 +40,8 @@ function edlp_studio_help($route_name, RouteMatchInterface $route_match) {
function edlp_studio_entity_extra_field_info(){
$extra = [];
// TODO: get node content type by settings @see readme
$extra['node']['enregistrement']['display']['add_to_chutier'] = [
'label' => t('Add to chutier link'),
$extra['node']['enregistrement']['display']['chutier_actions'] = [
'label' => t('Chutier actions'),
'description' => 'Display a link to add the content to chutier',
'weight' => 99,
'visible' => FALSE,
@@ -45,18 +55,41 @@ function edlp_studio_entity_extra_field_info(){
* @see https://www.amazeelabs.com/en/render-menu-tree-custom-code-drupal-8
*/
function edlp_studio_node_view(array &$build, \Drupal\Core\Entity\EntityInterface $entity, \Drupal\Core\Entity\Display\EntityViewDisplayInterface $display, $view_mode) {
$display_settings = $display->getComponent('add_to_chutier');
$display_settings = $display->getComponent('chutier_actions');
if (!empty($display_settings)) {
// dpm($entity);
// dpm($entity->id());
$url = Url::fromRoute('edlp_studio.chutier_controller_add_content', ['id'=>$entity->id()], array(
'attributes' => array(
'class' => ['add-to-chutier-link', 'ajax-link'],
'target_id' => $entity->id(),
)
));
$build['add_to_chutier'] = array(
'#title' => t("Add this content to chutier."),
$user = \Drupal::currentUser();
// dpm($user);
if($user->id() == 0){
// // TODO: check if user loged in ? yes -> links : no : popup message
// $action = 'add';
}
// else{
// // TODO: check if node already in chutier ? no -> add link : yes -> remove link
// // use getUserChutiersContents() from \Drupal\edlp_studio\ChutierInterface
// $contents = Chutier::getUserChutiersContents($user->id());
// dpm($contents);
// if(array_search($entity->id(), $contents) === false){
// $action = 'add';
// }else{
// $action = 'remove';
// }
// }
// $args = array(
// 'action'=>$action,
// 'id'=>$entity->id()
// );
// $url = Url::fromRoute('edlp_studio.chutier_controller_ajax_add_content', $args, array(
// 'attributes' => array(
// 'class' => ['chutier-link','chutier-ajax-link'],
// 'action' => $action,
// 'target_id' => $entity->id(),
// )
// ));
$url = Chutier::getActionsUrl($entity->id(), $user->id());
$build['chutier_actions'] = array(
'#title' => t("Chutier."),
'#type' => 'link',
'#url' => $url,
'#options'=>array(
@@ -6,10 +6,11 @@ edlp_studio.studio:
requirements:
_permission: 'administer studio'
edlp_studio.chutier_controller_add_content:
path: '/studio/chutier/add/{id}'
edlp_studio.chutier_controller_ajax_add_content:
path: '/edlp_studio/ajax/chutier/{action}/{id}/{cid}'
defaults:
_controller: '\Drupal\edlp_studio\Controller\ChutierController::addContent'
_title: 'Add content to chutier'
_controller: '\Drupal\edlp_studio\Controller\ChutierController::AddRemoveContent'
_title: 'Add/remove content to/from chutier'
cid: null
requirements:
_permission: 'use chutier'
@@ -20,6 +20,8 @@ class ChutierListBuilder extends EntityListBuilder {
public function buildHeader() {
$header['id'] = $this->t('Chutier ID');
$header['name'] = $this->t('Name');
$header['user'] = $this->t('User');
// $header['default'] = $this->t('User id');
return $header + parent::buildHeader();
}
@@ -34,6 +36,13 @@ class ChutierListBuilder extends EntityListBuilder {
'entity.chutier.edit_form',
['chutier' => $entity->id()]
);
$row['user'] = Link::createFromRoute(
$entity->getOwner()->getUserName(),
'entity.user.canonical',
['user' => $entity->getOwnerId()]
);
// $row['uid'] = $entity->getOwnerId();
return $row + parent::buildRow($entity);
}
@@ -3,38 +3,173 @@
namespace Drupal\edlp_studio\Controller;
use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Session\AccountInterface;
use Drupal\User\UserDataInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Symfony\Component\HttpFoundation\JsonResponse;
use Drupal\edlp_studio\Entity\Chutier;
/**
* Class ChutierController.
*/
class ChutierController extends ControllerBase {
protected $user;
protected $userdata;
/**
* Hello.
* Class constructor.
*/
public function __construct(AccountInterface $account, UserDataInterface $userdata) {
$this->user = $account;
$this->userdata = $userdata;
}
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container) {
// Instantiates this form class.
return new static(
// Load the service required to construct this class.
$container->get('current_user'),
$container->get('user.data')
);
}
/**
* AdddContent.
*
* @return json
* Return Hello string.
* Return status.
*/
public function AddContent($id) {
// TODO: get current user
// TODO: check if default chutier exists ? yes use it : no create and use it.
// TODO: add $id to documents field
// TODO: return status
public function AddRemoveContent($action, $id, $cid) {
$this->error_message = null;
$status = 'ok';
// get current user :
// done by DependencyInjection of AccountInterface
$response = new JsonResponse();
// TODO: use the send chutier instead of default
// check if default chutier exists ? yes use it : no create and use it.
$this->checkChutier();
// dpm($this->chutier);
$data = array(
'test' => 'Hello chutier',
// check if $id exists, is a document, and does not already exist in chutier
switch($action){
case 'add':
$this->validateNewDoc($id);
if(!$this->error_message){
// add $id to documents field
$this->addNewDoc($id);
$message = t('Node @id added to chutier.', array('@id'=>$id));
}else{
$status = "error";
}
break;
case 'remove':
$this->removeDoc($id);
$message = t('Node @id removed to chutier.', array('@id'=>$id));
break;
}
$url = Chutier::getActionsUrl($id, $this->user->id());
$new_link_build = array(
'#title' => t("Chutier."),
'#type' => 'link',
'#url' => $url,
'#options'=>array(
'attributes' => array(
'data-drupal-link-system-path' => $url->getInternalPath()
)
)
);
$new_link = render($new_link_build);
if($status == 'error'){
$message = $this->error_message;
}
// JSON
$response = new JsonResponse();
$data = array(
'status' => $status,
'message' => $message,
'new_link' => $new_link,
);
$response->setData($data);
return $response;
// classic html
// return array(
// '#markup'=>'Hello Chutier'
// ); }
// '#markup'=>'Status : ' . $status . ' | Message : ' . $message,
// );
}
private function addNewDoc($id){
$this->chutier->documents->appendItem($id);
$this->chutier->save();
}
private function removeDoc($id){
$values = array_column($this->chutier->documents->getValue(), 'target_id');
$index = array_search($id,$values);
$this->chutier->documents->removeItem($index);
$this->chutier->save();
}
private function validateNewDoc($id){
$node = entity_load('node', $id);
if($node){
// TODO: get node bundle by settings (@see readme)
if($node->getType() == 'enregistrement'){
$docs = array_column($this->chutier->documents->getValue(), 'target_id');
if( in_array($id, $docs) ){
$this->error_message = t("Node '@title'(@id) already exists in chutier '@name'(@cid)", array(
'@title'=>$node->getTitle(),
'@id'=>$id,
'@name' => $this->chutier->getName(),
'@cid' => $this->chutier->id())
);
}
}else{
$this->error_message = t("Node @title (@id) is not an Enregistrement (@type)", array(
'@title'=>$node->getTitle(),
'@id'=>$id,
'@type' => $node->getType())
);
}
}else{
$this->error_message = t("Node @id does not exists", array('@id'=>$id));
}
}
private function checkChutier(){
$default_chutier_id = $this->userdata->get('edlp_studio', $this->user->id(), 'default_chutier');
// dpm($this->default_chutier_id);
$this->chutier = entity_load('chutier', $default_chutier_id);
// if default chutier does not exists, create, save and record it
if(!$this->chutier){
$this->createDefaultChutier();
}
}
private function createDefaultChutier(){
// dpm('createDefaultChutier');
$this->createChutier();
$this->userdata->set('edlp_studio', $this->user->id(), 'default_chutier', $this->chutier->id());
}
public function createChutier(){
$chutier = array(
'id' => NULL,
'uid' => $this->user->id(),
'status' => TRUE,
'name' => t('Default'),
);
$this->chutier = entity_create('chutier', $chutier);
$this->chutier->save();
}
}
@@ -8,6 +8,7 @@ use Drupal\Core\Entity\ContentEntityBase;
use Drupal\Core\Entity\EntityChangedTrait;
use Drupal\Core\Entity\EntityTypeInterface;
use Drupal\user\UserInterface;
use Drupal\Core\Url;
/**
* Defines the Chutier entity.
@@ -240,4 +241,55 @@ class Chutier extends ContentEntityBase implements ChutierInterface {
return $fields;
}
/**
* {@inheritdoc}
*/
public static function getUserChutiersContents($uid){
// TODO: use query if we use more than one chutier
// $query = \Drupal::entityQuery('chutier')
// ->condition('user_id', $uid);
//
// $chutiers_nids = $query->execute();
// $chutiers = entity_load_multiple('chutier', $chutiers_nids);
//
// $contents = array();
// foreach ($chutiers as $id => $chutier) {
// $contents[$id] = array_column($chutier->documents->getValue(), 'target_id');
// }
/** @var UserDataInterface $userData */
$userData = \Drupal::service('user.data');
$default_chutier_id = $userData->get('edlp_studio', $uid, 'default_chutier');
if($chutier = entity_load('chutier', $default_chutier_id)){
return array_column($chutier->documents->getValue(), 'target_id');
}else{
return array();
}
}
/**
* {@inheritdoc}
*/
public static function getActionsUrl($id, $uid){
$contents = self::getUserChutiersContents($uid);
// dpm($contents);
if(array_search($id, $contents) === false){
$action = 'add';
}else{
$action = 'remove';
}
$args = array(
'action'=>$action,
'id'=>$id
);
$url = Url::fromRoute('edlp_studio.chutier_controller_ajax_add_content', $args, array(
'attributes' => array(
'class' => ['chutier-link','chutier-ajax-link'],
'action' => $action,
'target_id' => $id,
)
));
return $url;
}
}
@@ -74,4 +74,33 @@ interface ChutierInterface extends ContentEntityInterface, EntityChangedInterfac
*/
public function setPublished($published);
/**
* get the contents in user's chutiers
*
* @param int $uid
* user id
*
* @return array
* associative array of contents by chutiers
*
*/
public static function getUserChutiersContents($uid);
/**
* get the contents in user's chutiers
*
* @param int $id
* content id
*
* @param int $uid
* user id
*
* @return Drupal\Core\Url
* depending on action is add or remove
*
*/
public static function getActionsURL($id, $uid);
}
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3.1749999 3.1750001" height="12" width="12"><path d="M0 0h3.175v3.175H0z" style="isolation:auto;mix-blend-mode:normal" color="#000" overflow="visible" fill="none"/><path style="line-height:20px;-inkscape-font-specification:'Crimson, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;text-align:start" d="M2.553.402H.622v2.343l.798-.766.168-.16.167.16.798.766zm.023-.241q.043 0 .083.017.062.024.098.077.038.053.038.117v2.431q0 .064-.038.117-.036.053-.098.077-.036.016-.083.016-.09 0-.157-.06l-.831-.8-.832.8q-.068.061-.157.061-.043 0-.083-.017-.062-.024-.1-.077Q.38 2.867.38 2.803V.372q0-.064.036-.117.038-.053.1-.077Q.556.16.6.16z" font-weight="400" font-family="#dc143c" letter-spacing="0" word-spacing="0"/></svg>

After

Width:  |  Height:  |  Size: 809 B

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 3.1749999 3.1750001"><path style="isolation:auto;mix-blend-mode:normal" d="M0 0h3.175v3.175H0z" color="#000" overflow="visible" fill="none"/><path d="M2.576.16c.029 0 .057.007.083.018a.207.207 0 0 1 .098.077.197.197 0 0 1 .038.117v2.431a.197.197 0 0 1-.038.117.207.207 0 0 1-.098.077.212.212 0 0 1-.083.016.224.224 0 0 1-.157-.06l-.831-.8-.832.8a.225.225 0 0 1-.34-.033.203.203 0 0 1-.036-.117V.372A.204.204 0 0 1 .516.178.209.209 0 0 1 .6.16z" style="line-height:20px;-inkscape-font-specification:'Crimson, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;text-align:start" font-weight="400" font-family="#dc143c" letter-spacing="0" word-spacing="0"/></svg>

After

Width:  |  Height:  |  Size: 776 B

@@ -131,6 +131,7 @@ edlp_vars = {
console.log('AudioPlayer node loaded', data);
this.$cartel.html(data.rendered);
this.$cartel.removeClass('loading');
_$body.trigger({'type':'new-audio-cartel-loaded'});
initAjaxLinks();
},
onNodeLoadFail(jqxhr, textStatus, error){
@@ -1365,67 +1365,75 @@ body.ajax-loading main[role="main"]:before {
height: 100%; }
#audio-player .cartel {
position: relative;
max-width: 400px;
max-width: 350px;
margin-left: 1em;
background-color: white;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
transition: opacity 0.5s ease-in-out;
white-space: nowrap; }
#audio-player .cartel.loading {
opacity: 0; }
#audio-player .cartel .first-cartel .entrees {
#audio-player .cartel .actions, #audio-player .cartel .cartels {
display: inline-block;
vertical-align: top;
white-space: normal;
position: relative; }
#audio-player .cartel .actions {
width: 1.5em; }
#audio-player .cartel .cartels .first-cartel .entrees {
line-height: 0; }
#audio-player .cartel .first-cartel .entrees span {
#audio-player .cartel .cartels .first-cartel .entrees span {
display: inline-block;
width: 8px;
height: 8px;
background-color: black;
margin-right: 3px; }
#audio-player .cartel .first-cartel .entrees span[tid='134'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='134'] {
background-color: #2b8f2f; }
#audio-player .cartel .first-cartel .entrees span[tid='121'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='121'] {
background-color: #3a33b6; }
#audio-player .cartel .first-cartel .entrees span[tid='125'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='125'] {
background-color: #2c9f57; }
#audio-player .cartel .first-cartel .entrees span[tid='119'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='119'] {
background-color: #c48978; }
#audio-player .cartel .first-cartel .entrees span[tid='132'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='132'] {
background-color: #5270bb; }
#audio-player .cartel .first-cartel .entrees span[tid='122'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='122'] {
background-color: #fb54d3; }
#audio-player .cartel .first-cartel .entrees span[tid='129'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='129'] {
background-color: #e07483; }
#audio-player .cartel .first-cartel .entrees span[tid='120'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='120'] {
background-color: #655845; }
#audio-player .cartel .first-cartel .entrees span[tid='130'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='130'] {
background-color: #7e0868; }
#audio-player .cartel .first-cartel .entrees span[tid='118'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='118'] {
background-color: #0e7121; }
#audio-player .cartel .first-cartel .entrees span[tid='127'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='127'] {
background-color: #dabd42; }
#audio-player .cartel .first-cartel .entrees span[tid='133'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='133'] {
background-color: #0399bb; }
#audio-player .cartel .first-cartel .entrees span[tid='128'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='128'] {
background-color: #399a1c; }
#audio-player .cartel .first-cartel .entrees span[tid='124'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='124'] {
background-color: #708540; }
#audio-player .cartel .first-cartel .entrees span[tid='116'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='116'] {
background-color: #191bff; }
#audio-player .cartel .first-cartel .entrees span[tid='117'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='117'] {
background-color: #279d84; }
#audio-player .cartel .first-cartel .entrees span[tid='131'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='131'] {
background-color: #5219ab; }
#audio-player .cartel .first-cartel .entrees span[tid='126'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='126'] {
background-color: #d49cb6; }
#audio-player .cartel .first-cartel .entrees span[tid='123'] {
#audio-player .cartel .cartels .first-cartel .entrees span[tid='123'] {
background-color: #497715; }
#audio-player .cartel .first-cartel h2.node-title {
#audio-player .cartel .cartels .first-cartel h2.node-title {
margin: 0.2em 0 0;
font-size: 1em; }
#audio-player .cartel .first-cartel p {
#audio-player .cartel .cartels .first-cartel p {
margin: 0;
font-size: 0.75em; }
#audio-player .cartel .second-cartel {
#audio-player .cartel .cartels .second-cartel {
position: absolute;
top: 0;
left: 0;
@@ -1435,20 +1443,37 @@ body.ajax-loading main[role="main"]:before {
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out; }
#audio-player .cartel .second-cartel > * {
#audio-player .cartel .cartels .second-cartel > * {
display: inline-block;
vertical-align: top; }
#audio-player .cartel .second-cartel .col-left a {
#audio-player .cartel .cartels .second-cartel .col-left a {
display: block;
font-size: 0.90em;
font-weight: 600; }
#audio-player .cartel .second-cartel .col-right {
#audio-player .cartel .cartels .second-cartel .col-right {
font-size: 0.75em; }
#audio-player .cartel:hover .second-cartel {
opacity: 1; }
#audio-player.is-playing .btns .play-pause {
background-image: url(../img/audio-player-pause.svg); }
a.chutier-link {
display: block;
width: 1em;
height: 1em;
overflow: hidden;
text-indent: 50em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url(../img/favori-off.svg);
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out; }
a.chutier-link[action="remove"] {
background-image: url(../img/favori-on.svg); }
a.chutier-link.ajax-loading {
opacity: 0.2; }
body.path-agenda main .col > .wrapper {
height: 100%; }
@@ -1767,6 +1792,7 @@ footer {
width: 350px;
opacity: 1; }
footer #block-userlogin {
pointer-events: all;
position: relative;
width: 20px;
height: 20px; }
@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg14944"
version="1.1"
viewBox="0 0 3.1749999 3.1750001"
height="12"
width="12">
<defs
id="defs14938" />
<metadata
id="metadata14941">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-293.82497)"
id="layer1">
<path
id="rect15501"
d="m 0,293.82497 h 3.175 v 3.175 H 0 Z"
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.05833328;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
<path
id="path11601"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:20px;font-family:Crimson;-inkscape-font-specification:'Crimson, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.42250523"
d="M 2.55331,294.22707 H 0.62185999 v 2.34264 L 1.4197,295.80392 l 0.16788,-0.16033 0.16787,0.16033 0.79786,0.76579 z m 0.0226,-0.24143 q 0.0434,0 0.083,0.017 0.0623,0.0245 0.0981,0.0773 0.0377,0.0528 0.0377,0.11694 v 2.43129 q 0,0.0641 -0.0377,0.11694 -0.0359,0.0528 -0.0981,0.0773 -0.0359,0.0151 -0.083,0.0151 -0.0905,0 -0.15655,-0.0604 l -0.83181,-0.79974 -0.83181001,0.79974 q -0.0679,0.0622 -0.15655,0.0622 -0.0434,0 -0.083,-0.017 -0.0623,-0.0245 -0.1,-0.0773 -0.0359,-0.0527 -0.0359,-0.11685 v -2.43129 q 0,-0.0641 0.0359,-0.11694 0.0377,-0.0528 0.1,-0.0773 0.0396,-0.017 0.083,-0.017 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

@@ -0,0 +1,69 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="12"
height="12"
viewBox="0 0 3.1749999 3.1750001"
version="1.1"
id="svg14944"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
sodipodi:docname="favori-on.svg">
<defs
id="defs14938" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="31.678384"
inkscape:cx="2.2360443"
inkscape:cy="5.0420999"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1920"
inkscape:window-height="1025"
inkscape:window-x="0"
inkscape:window-y="28"
inkscape:window-maximized="1" />
<metadata
id="metadata14941">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-293.82497)">
<path
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.05833328;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 0,293.82497 h 3.175 v 3.175 H 0 Z"
id="rect15501"
inkscape:connector-curvature="0" />
<path
d="m 2.57591,293.98564 c 0.028933,0 0.0566,0.006 0.083,0.017 0.041533,0.0163 0.074233,0.0421 0.0981,0.0773 0.025133,0.0352 0.0377,0.0742 0.0377,0.11694 v 2.43129 c 0,0.0427 -0.012567,0.0817 -0.0377,0.11694 -0.023933,0.0352 -0.056633,0.061 -0.0981,0.0773 -0.023933,0.0101 -0.0516,0.0151 -0.083,0.0151 -0.060333,0 -0.1125167,-0.0201 -0.15655,-0.0604 l -0.83181,-0.79974 -0.83181001,0.79974 c -0.0452667,0.0415 -0.09745,0.0622 -0.15655,0.0622 -0.0289333,0 -0.0566,-0.006 -0.083,-0.017 -0.0415333,-0.0163 -0.0748667,-0.0421 -0.1,-0.0773 -0.0239333,-0.0351 -0.0359,-0.0741 -0.0359,-0.11685 v -2.43129 c 0,-0.0427 0.0119667,-0.0817 0.0359,-0.11694 0.0251333,-0.0352 0.0584667,-0.061 0.1,-0.0773 0.0264,-0.0113 0.0540667,-0.017 0.083,-0.017 z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:20px;font-family:Crimson;-inkscape-font-specification:'Crimson, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.42250523"
id="path11601"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccssccscccsccsscccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

@@ -108,6 +108,7 @@
console.log('AudioPlayer node loaded', data);
this.$cartel.html(data.rendered);
this.$cartel.removeClass('loading');
_$body.trigger({'type':'new-audio-cartel-loaded'});
initAjaxLinks();
},
onNodeLoadFail(jqxhr, textStatus, error){
@@ -248,6 +248,7 @@ main[role="main"]{
&>*{
display: inline-block;
vertical-align: middle;
// word-break:keep-all;
padding:0;
max-height: 100%;
// outline: 1px solid green;
@@ -312,49 +313,61 @@ main[role="main"]{
.cartel{
// TODO: set max-width regarding responsive
position: relative;
max-width: 400px;
max-width: 350px;
margin-left: 1em;
background-color: white;
opacity: 1;
transition: opacity 0.5s ease-in-out;
&.loading{opacity: 0;}
.first-cartel{
.entrees{
line-height: 0;
span{
@include entrie-micro-square;
}
}
h2.node-title{
margin:0.2em 0 0;
font-size: 1em;
}
p{
margin:0;
font-size: 0.75em;
}
white-space: nowrap;
.actions, .cartels{
display: inline-block;
vertical-align: top;
white-space: normal;
position: relative;
}
.second-cartel{
position: absolute;
top: 0; left:0;
background-color: white;
height:100%; min-width: 100%;
opacity: 0;
transition: opacity 0.2s ease-in-out;
&>*{
display: inline-block;
vertical-align: top;
}
.col-left{
a{
display: block;
font-size: 0.90em;
font-weight: 600;
.actions{
width:1.5em;
}
.cartels{
.first-cartel{
.entrees{
line-height: 0;
span{
@include entrie-micro-square;
}
}
h2.node-title{
margin:0.2em 0 0;
font-size: 1em;
}
p{
margin:0;
font-size: 0.75em;
}
}
.col-right{
font-size: 0.75em;
.second-cartel{
position: absolute;
top: 0; left:0;
background-color: white;
height:100%; min-width: 100%;
opacity: 0;
transition: opacity 0.2s ease-in-out;
&>*{
display: inline-block;
vertical-align: top;
}
.col-left{
a{
display: block;
font-size: 0.90em;
font-weight: 600;
}
}
.col-right{
font-size: 0.75em;
}
}
}
&:hover{
@@ -368,6 +381,32 @@ main[role="main"]{
}
}
// ___ _ _ _
// / __| |_ _ _ __| (_)___
// \__ \ _| || / _` | / _ \
// |___/\__|\_,_\__,_|_\___/
a.chutier-link{
display: block;
width:1em;height:1em;
overflow: hidden;
text-indent: 50em;
// background-color: red;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url(../img/favori-off.svg);
&[action="remove"]{
background-image: url(../img/favori-on.svg);
}
transition: opacity 0.2s ease-in-out;
&.ajax-loading{
opacity: 0.2;
}
}
// _ _ _ _ _
// /_\ (_)__ ___ __ | \| |___ __| |___
// / _ \ | / _` \ \ / | .` / _ \/ _` / -_)
@@ -772,6 +811,7 @@ footer{
}
#block-userlogin{
pointer-events: all;
// outline: 1px solid blue;
$wh:20px;
position: relative;
@@ -1,78 +0,0 @@
{#
/**
* @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.
*/
#}
<h2{{ title_attributes.addClass('node-title') }}>
<a href="{{ url }}" rel="bookmark" {{ link_attributes }}>{{ label }}</a>
</h2>
<div{{ content_attributes.addClass('node__content') }}>
{{ content }}
</div>
@@ -82,32 +82,39 @@
%}
{{ attach_library('classy/node') }}
<article{{ attributes.addClass(classes) }}>
<section class="first-cartel">
<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') }}>
{{ label }}
</h2>
<div class="description">
{{ content.field_description }}
</div>
<section class="actions">
{{ content.chutier_actions }}
</section>
<section class="second-cartel">
{% if col_left %}
<div class="col-left">
{{ link_transcript }}
{{ link_article }}
<section class="cartels">
<section class="first-cartel">
<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>
{% endif %}
{% if col_right %}
<div class="col-right">
right colume
<h2{{ title_attributes.addClass('node-title') }}>
{{ label }}
</h2>
<div class="description">
{{ content.field_description }}
</div>
{% endif %}
</section>
<section class="second-cartel">
{% if col_left %}
<div class="col-left">
{{ link_transcript }}
{{ link_article }}
</div>
{% endif %}
{% if col_right %}
<div class="col-right">
right colume
</div>
{% endif %}
</section>
</section>
</article>
@@ -29,6 +29,11 @@ content:
region: content
settings: { }
third_party_settings: { }
chutier_actions:
weight: 1
region: content
settings: { }
third_party_settings: { }
content_moderation_control:
weight: -20
region: content
@@ -0,0 +1,14 @@
uuid: edce0062-97e8-4dba-848f-0d1ada71a23e
langcode: fr
status: true
dependencies:
config:
- user.role.user
module:
- user
id: user_add_role_action.user
label: 'Add the User role to the selected user(s)'
type: user
plugin: user_add_role_action
configuration:
rid: user
@@ -0,0 +1,14 @@
uuid: c4a61f84-8f75-4d58-a319-0deb762aba56
langcode: fr
status: true
dependencies:
config:
- user.role.user
module:
- user
id: user_remove_role_action.user
label: 'Remove the User role from the selected user(s)'
type: user
plugin: user_remove_role_action
configuration:
rid: user
@@ -20,6 +20,7 @@ permissions:
- 'delete own fil entities'
- 'edit own chutier entities'
- 'edit own fil entities'
- 'use chutier'
- 'use text format wysiwyg'
- 'view own unpublished chutier entities'
- 'view own unpublished fil entities'
@@ -0,0 +1,9 @@
uuid: 05cb1550-ab78-4bf9-a7d0-39a33e3fa03b
langcode: fr
status: true
dependencies: { }
id: user
label: User
weight: -4
is_admin: null
permissions: { }