activated video filter and making it to work;

finded the way to call Drupal.behaviors after custom ajax : Drupal.attachBehaviors(context)
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-14 10:53:10 +01:00
parent 5b725dbf53
commit 94dcce05c3
27 changed files with 1536 additions and 14 deletions
@@ -30,6 +30,7 @@ edlp_vars = {
var _$corpus_canvas;
var _$content_container = $('main[role="main"]>.layout-content');
var _$ajaxLinks;
var _audio_player;
function init(){
console.log("EdlpTheme init()");
@@ -332,6 +333,11 @@ edlp_vars = {
_$body.addClass('ajax-loading');
$link.addClass('ajax-loading');
// TODO: use Drupal.url()
// Drupal.url = function (path) {
// return drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix + path;
// };
var path = window.location.origin + drupalSettings.path.baseUrl + ajax_path;
$.getJSON(path, {})
.done(function(data){
@@ -392,6 +398,9 @@ edlp_vars = {
_$body.trigger({'type':'new-content-ajax-loaded'});
// TODO: call behaviours
Drupal.attachBehaviors(_$content_container);
};
// ___
@@ -411,6 +420,8 @@ edlp_vars = {
console.log('theme : corpus-cliked-on-node', e);
_audio_player.openDocument(e.target_node);
});
_$body.attr('corpus-map', 'ready');
}
// ___ _ _ _
@@ -1110,16 +1110,16 @@ header[role="banner"] {
main[role="main"] {
z-index: 1;
pointer-events: none;
position: absolute;
left: 0;
top: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 7em 2em 9em;
width: 100%;
height: 100%;
overflow: hidden; }
padding: 7em 2em 9em;
overflow: hidden;
pointer-events: none;
height: auto; }
main[role="main"] .layout-content {
width: 100%;
height: 100%;
@@ -1130,6 +1130,9 @@ main[role="main"] {
main[role="main"] .layout-content > * {
pointer-events: auto; }
body[corpus-map="ready"] main[role="main"] {
height: 100%; }
footer[role="contentinfo"] {
z-index: 2;
position: fixed;
@@ -2138,3 +2141,27 @@ footer {
position: absolute;
top: 1em;
right: 1em; }
.url-to-video-container {
margin: 10px auto; }
.url-to-video-container.no-js {
border: solid black 1px; }
.url-to-video-container.no-js .url-to-video-player {
cursor: auto; }
.url-to-video-container .loader {
top: auto;
left: auto;
-webkit-transform: none;
transform: none; }
.url-to-video-container span.url-to-video-player {
/* assuming that the video has a 16:9 ratio */
padding-bottom: 0;
height: auto; }
.url-to-video-container span.url-to-video-player:before {
content: "";
display: block;
/* assuming that the video has a 16:9 ratio */
padding-top: 56.25%; }
.url-to-video-container span.url-to-video-player .play-button {
z-index: 5;
top: 50%; }
@@ -7,6 +7,7 @@
var _$corpus_canvas;
var _$content_container = $('main[role="main"]>.layout-content');
var _$ajaxLinks;
var _audio_player;
function init(){
console.log("EdlpTheme init()");
@@ -309,6 +310,11 @@
_$body.addClass('ajax-loading');
$link.addClass('ajax-loading');
// TODO: use Drupal.url()
// Drupal.url = function (path) {
// return drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix + path;
// };
var path = window.location.origin + drupalSettings.path.baseUrl + ajax_path;
$.getJSON(path, {})
.done(function(data){
@@ -369,6 +375,9 @@
_$body.trigger({'type':'new-content-ajax-loaded'});
// TODO: call behaviours
Drupal.attachBehaviors(_$content_container);
};
// ___
@@ -388,6 +397,8 @@
console.log('theme : corpus-cliked-on-node', e);
_audio_player.openDocument(e.target_node);
});
_$body.attr('corpus-map', 'ready');
}
// ___ _ _ _
@@ -1148,3 +1148,90 @@ footer{
}
}
}
// __ ___ _ ___ _ _ _
// \ \ / (_)__| |___ ___| __(_) | |_ ___ _ _
// \ V /| / _` / -_) _ \ _|| | | _/ -_) '_|
// \_/ |_\__,_\___\___/_| |_|_|\__\___|_|
// complete rewrite of url_to_video_filter css
.url-to-video-container{
// display:block;
margin:10px auto;
// width:100%;
&.no-js{
border:solid black 1px;
.loader{
// background:url(../images/no-js.png) no-repeat center center;
// background-size:40px 40px;
}
.url-to-video-player{
cursor:auto;
}
}
.loader{
// top:240px;
// left:50%;
// transform:translate(-50%, -50%);
// background:#FFF url(../images/ajax-loader.gif) no-repeat center center;
top:auto; left: auto;
transform: none;
}
span.url-to-video-player{
// display:block;
// width:100%;
/* assuming that the video has a 16:9 ratio */
// padding-bottom:56.25%;
padding-bottom:0;
// overflow:hidden;
// position:relative;
// width:100%;
// height:100%;
height:auto;
// cursor:hand;
// cursor:pointer;
// display: block;
&:before{
content: "";
display: block;
/* assuming that the video has a 16:9 ratio */
padding-top: 56.25%;
}
img.player-thumb
{
// background-position:center center;
// background-size:cover;
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// cursor:pointer;
}
.play-button
{
z-index: 5;
// height:40px;
// width:40px;
// display:block;
// background:url(../images/play-button.png) no-repeat center center;
// background-size:40px 40px;
// position:absolute;
// top:240px;
top:50%;
// left:50%;
// transform:translate(-50%, -50%);
// cursor:pointer;
}
iframe.player-iframe
{
// width:100%;
// height:100%;
// position:absolute;
// top:0;
// left:0;
}
}
}
@@ -40,13 +40,14 @@ header[role="banner"]{
main[role="main"]{
// outline:1px solid green;
z-index: 1;
pointer-events: none;
position: absolute;
left:0; top:0;
box-sizing:border-box;
width:100%;
padding:7em 2em 9em;
width:100%; height:100%;
overflow: hidden;
pointer-events: none;
height:auto;
.layout-content{
width: 100%; height:100%;
overflow:hidden;
@@ -60,6 +61,11 @@ main[role="main"]{
}
}
body[corpus-map="ready"] main[role="main"]{
height:100%;
// overflow-y: hidden;
}
footer[role="contentinfo"]{
// outline: 1px solid pink;
z-index: 2;
@@ -17,7 +17,11 @@ global-js:
assets/dist/scripts/main.min.js: { scope: footer }
dependencies:
- core/drupal
- core/drupal.ajax
- core/matchmedia
- core/matchmedia.addListener
- core/jquery
- core/jquery.once
- url_to_video_filter/player_embed
- url_to_video_filter/vimeo_embed
- url_to_video_filter/youtube_embed