').addClass('play-pause')
+ .on('click', this.togglePlayPause.bind(this))
+ .appendTo(this.$controls);
+ this.$next = $('
').addClass('next')
+ .on('click', this.next.bind(this))
+ .appendTo(this.$controls);
+ // this.$playpause = $('.compo-player-controls', this.$composer)
+ // .on('click', this.togglePlayPause.bind(this));
+ this.refresh();
+ },
+ refresh(){
+ // console.log('CompoPlayer refresh(), this', this);
+ // this.playing = false;
+ // this.paused = false;
+ // this.resetIndex();
+ this.stop();
+
+ // load new playlist
+ this.playlist = [];
+ var that = this;
+ $('.field--name-documents .field__item',this.$compo).each(function(i,el){
+ var $link = $('a.audio-link',this);
+ that.playlist.push({
+ item:$(this),
+ audio_url:$link.attr("audio_url"),
+ nid:$link.attr("nid"),
+ });
+ });
+ this.showHideControls();
+ },
+ togglePlayPause(){
+ // console.log('CompoPlayer togglePlayPause');
+ if (this.playing && !this.paused) {
+ this.pause();
+ }else{
+ if(this.playing && this.paused){
+ this.play();
+ }else{
+ this.start();
+ }
+ }
+ },
+ start(){
+ console.log('start');
+ // console.log('CompoPlayer start()');
+ this.playing = true;
+ this.play();
+ },
+ play(){
+ // console.log('play');
+ if(this.paused){
+ this.paused = false;
+ _audioPlayer.play();
+ }else{
+ _audioPlayer.openDocument(this.playlist[this.current_index], this);
+ }
+ this.setActiveItem().showHideControls();
+ },
+ pause(){
+ console.log('pause');
+ this.paused = true;
+ this.showHideControls();
+ _audioPlayer.stop();
+ },
+ next(){
+ // console.log('CompoPlayer next()');
+ if(this.playing){
+ this.current_index += 1;
+ if(this.current_index < this.playlist.length){
+ this.play();
+ }else{
+ this.stop();
+ }
+ }
+ },
+ prev(){
+ // console.log('CompoPlayer prev()');
+ if(this.playing){
+ this.current_index -= 1;
+ if(this.current_index >= 0){
+ this.play();
+ }else{
+ this.stop();
+ }
+ }
+ },
+ stop(){
+ _audioPlayer.stop();
+ this.reset();
+ },
+ reset(){
+ this.playing = false;
+ this.paused = false;
+ this.resetIndex();
+ },
+ resetIndex(){
+ this.current_index = 0;
+ this.showHideControls().resetActiveItems();
+ },
+ setActiveItem(){
+ this.resetActiveItems();
+ if(this.playing && this.current_index >= 0){
+ this.playlist[this.current_index].item.addClass('is-active');
+ }
+ // this call shoud not be here
+ this.showHideControls();
+ return this;
+ },
+ resetActiveItems(){
+ for (var n = 0; n < this.playlist.length; n++) {
+ // console.log('node',node);
+ this.playlist[n].item.removeClass('is-active');
+ }
+ return this;
+ },
+ showHideControls(){
+ // console.log('CompoPlayer showHideNextBtn(), playing:'+this.playing+', paused:'+this.paused);
+ // global playing
+ if(this.playing && !this.paused){
+ this.$controls.addClass('is-playing');
+ }else{
+ this.$controls.removeClass('is-playing');
+ }
+ // playpause
+ if(this.playlist.length > 0){
+ this.$playpause.addClass('is-active');
+ }else{
+ this.$playpause.removeClass('is-active');
+ }
+ // next
+ if(this.playing && this.playlist.length > 1 && this.current_index < this.playlist.length -1){
+ this.$next.addClass('is-active');
+ }else{
+ this.$next.removeClass('is-active');
+ }
+ // previous
+ if(this.playing && this.playlist.length > 1 && this.current_index > 0){
+ this.$previous.addClass('is-active');
+ }else{
+ this.$previous.removeClass('is-active');
+ }
+ return this;
+ },
+ // _audioPlayer events
+ onAudioOpenDocument(args){
+ if(args.caller !== this){
+ // console.log('CompoPlayer onAudioOpenDocument() called by other');
+ this.reset();
+ }
+ // else{
+ // // console.log('CompoPlayer onAudioOpenDocument() self calling');
+ // }
+ },
+ onAudioPlayerPlay(){
+ if(this.playing && this.paused){
+ this.paused = false;
+ this.showHideControls();
+ }
+ },
+ onAudioPlayerPause(){
+ if(this.playing && !this.paused){
+ this.paused = true;
+ this.showHideControls();
+ }
+ },
+ onAudioPlayerEnded(){
+ this.next();
+ },
+ // onAudioPlayNext(){
+ // this.next();
+ // }
+ };
+
+
// ___ _ _ _
// | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___
// | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss
index 7fa6f101b..3df77103d 100644
--- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss
+++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss
@@ -258,6 +258,39 @@ main[role="main"]{
// / _ \ || / _` | / _ \ _/ / _` | || / -_) '_|
// /_/ \_\_,_\__,_|_\___/_| |_\__,_|\_, \___|_|
// |__/
+@mixin audio_controls {
+ // outline: 1px dotted orange;
+ &>*{
+ display: inline-block;
+ vertical-align: middle;
+ width:20px;height:30px;
+ background-position: center;
+ background-size: contain;
+ }
+ .play-pause{
+ background-image: url(../img/audio-player-play.svg);
+ padding:0 0.3em;
+ cursor: pointer;
+ }
+ &.is-playing{
+ .play-pause{background-image: url(../img/audio-player-pause.svg);}
+ }
+ .previous, .next{
+ opacity: 0.3;
+ transition: opacity 0.3s ease-in-out;
+ cursor: auto;
+ &.is-active{
+ opacity: 1;
+ cursor: pointer;
+ }
+ }
+ .previous{
+ background-image: url(../img/audio-player-previous.svg);
+ }
+ .next{
+ background-image: url(../img/audio-player-next.svg);
+ }
+}
#audio-player{
position: absolute;
top:0; left:0;
@@ -281,34 +314,7 @@ main[role="main"]{
// outline: 1px solid green;
}
.btns{
- // outline: 1px dotted orange;
- &>*{
- display: inline-block;
- vertical-align: middle;
- width:20px;height:30px;
- background-position: center;
- background-size: contain;
- }
- .play-pause{
- background-image: url(../img/audio-player-play.svg);
- padding:0 0.3em;
- cursor: pointer;
- }
- .previous, .next{
- opacity: 0.3;
- transition: opacity 0.3s ease-in-out;
- cursor: auto;
- &.is-active{
- opacity: 1;
- cursor: pointer;
- }
- }
- .previous{
- background-image: url(../img/audio-player-previous.svg);
- }
- .next{
- background-image: url(../img/audio-player-next.svg);
- }
+ @include audio_controls;
}
.time-line-container{
.time-line{
@@ -413,9 +419,7 @@ main[role="main"]{
}
}
}
- &.is-playing{
- .btns .play-pause{background-image: url(../img/audio-player-pause.svg);}
- }
+
}
@@ -473,18 +477,16 @@ main[role="main"]{
#studio-ui{
height:100%;
@mixin draggable_sortable_field__item {
- // outline: 1px dotted green;
display: inline-block;
position: relative;
+ white-space: nowrap;
+ pointer-events: none;
// margin-right: 25px;
width:25px;
height: 100%;
&.ui-draggable-dragging{
height:100px;
- // cursor: grabbing;
}
- white-space: nowrap;
- pointer-events: none;
opacity: 1;
transition: opacity 0.1s ease-in-out;
&.ready-to-remove{
@@ -504,6 +506,7 @@ main[role="main"]{
margin:0;
text-transform: none;
a{
+ white-space: nowrap!important;
&:before{
content:"";
display: inline-block;
@@ -530,6 +533,9 @@ main[role="main"]{
background-color: white;
// TODO: entries color;
}
+ &.is-active .handler{
+ background-color: red;
+ }
} // end mixin
.chutier_ui{
@@ -652,6 +658,9 @@ main[role="main"]{
vertical-align: middle;
margin-right: $m;
}
+ &.ajax-loading:before{
+ @include spining-loader-square;
+ }
&.is-active:before{
background-color: black;
}
@@ -718,12 +727,18 @@ main[role="main"]{
$header_height:25px;
$actions_height:25px;
$padding:5px;
+ opacity:1;
+ transition: opacity 0.3s ease-in-out;
+ &.ajax-loading{
+ opacity:0.3;
+ }
>*{
box-sizing: border-box;
}
>header{
height:$header_height;
padding-bottom:$padding;
+ font-size: 0.756em;
}
>.composition{
position: relative;
@@ -772,10 +787,14 @@ main[role="main"]{
padding-top:$padding;
height:$actions_height;
// outline: 1px solid blue;
+ .compo-player-controls{
+ @include audio_controls;
+ }
}
}
}
}
+
// drag and drop specifics
// created by js
.field__item.ui-draggable-dragging{
diff --git a/sites/all/themes/custom/edlptheme/edlptheme.theme b/sites/all/themes/custom/edlptheme/edlptheme.theme
index c9de6dde6..2354111df 100644
--- a/sites/all/themes/custom/edlptheme/edlptheme.theme
+++ b/sites/all/themes/custom/edlptheme/edlptheme.theme
@@ -103,7 +103,6 @@ function edlptheme_preprocess_node__enregistrement__search_index(&$vars){
// dpm($vars['link_attributes']);
}
-
function edlptheme_preprocess_node__enregistrement__compo(&$vars){
$node = $vars['elements']['#node'];
$options = ['absolute' => TRUE];
@@ -125,6 +124,10 @@ function edlptheme_preprocess_node__enregistrement__compo(&$vars){
'nid' => $node->id(),
'class' => array('audio-link', 'ajax-link')
));
+
+ // dpm($vars);
+ $title = $vars['label'][0]['#context']['value'];
+ $vars['label'][0]['#context']['value'] = Unicode::truncate($title, 25, true, true);
// dpm($vars['link_attributes']);
}
diff --git a/sites/all/themes/custom/edlptheme/templates/content/node--enregistrement--compo.html.twig b/sites/all/themes/custom/edlptheme/templates/content/node--enregistrement--compo.html.twig
index 9c5ca841f..b2fe7cb9e 100644
--- a/sites/all/themes/custom/edlptheme/templates/content/node--enregistrement--compo.html.twig
+++ b/sites/all/themes/custom/edlptheme/templates/content/node--enregistrement--compo.html.twig
@@ -84,8 +84,9 @@
- {% set text = label|render|striptags %}
- {{ text|length > 25 ? text|slice(0, 25)|split(' ')|slice(0, -1)|join(' ') ~ '…' : text }}
+ {{ label }}
+ {# set text = label|render|striptags #}
+ {# text|length > 25 ? text|slice(0, 25)|split(' ')|slice(0, -1)|join(' ') ~ '…' : text #}
diff --git a/sites/default/config/sync/core.entity_view_display.composition.composition.default.yml b/sites/default/config/sync/core.entity_view_display.composition.composition.default.yml
index 2a4ab6dec..7937bde48 100644
--- a/sites/default/config/sync/core.entity_view_display.composition.composition.default.yml
+++ b/sites/default/config/sync/core.entity_view_display.composition.composition.default.yml
@@ -12,13 +12,20 @@ content:
documents:
label: hidden
type: entity_reference_entity_view
- weight: 0
+ weight: 1
region: content
settings:
view_mode: compo
link: false
third_party_settings: { }
+ name:
+ type: string
+ weight: 0
+ region: content
+ label: hidden
+ settings:
+ link_to_entity: false
+ third_party_settings: { }
hidden:
langcode: true
- name: true
user_id: true
diff --git a/sites/default/config/sync/core.entity_view_display.composition.composition.studio_ui.yml b/sites/default/config/sync/core.entity_view_display.composition.composition.studio_ui.yml
new file mode 100644
index 000000000..815124992
--- /dev/null
+++ b/sites/default/config/sync/core.entity_view_display.composition.composition.studio_ui.yml
@@ -0,0 +1,26 @@
+uuid: d063513e-e6a2-471a-93e0-9b02fa1117d9
+langcode: fr
+status: true
+dependencies:
+ config:
+ - core.entity_view_mode.composition.studio_ui
+ module:
+ - edlp_studio
+id: composition.composition.studio_ui
+targetEntityType: composition
+bundle: composition
+mode: studio_ui
+content:
+ documents:
+ label: hidden
+ type: entity_reference_entity_view
+ weight: 0
+ region: content
+ settings:
+ view_mode: compo
+ link: false
+ third_party_settings: { }
+hidden:
+ langcode: true
+ name: true
+ user_id: true
diff --git a/sites/default/config/sync/core.entity_view_mode.composition.studio_ui.yml b/sites/default/config/sync/core.entity_view_mode.composition.studio_ui.yml
new file mode 100644
index 000000000..39c98342a
--- /dev/null
+++ b/sites/default/config/sync/core.entity_view_mode.composition.studio_ui.yml
@@ -0,0 +1,10 @@
+uuid: eff6d988-0963-4718-ad52-bf10a8e1463d
+langcode: fr
+status: true
+dependencies:
+ module:
+ - edlp_studio
+id: composition.studio_ui
+label: studio-ui
+targetEntityType: composition
+cache: true