From: Jérémy Fabre Date: Thu, 9 Feb 2017 17:23:52 +0000 (+0100) Subject: Video overlay first implementation X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=f99c047745d3a4109012dbac2cc2f615b6a3e016;p=mezzo.git Video overlay first implementation --- diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js index 705525cf..bedd48d8 100644 --- a/app/static/src/js/index.js +++ b/app/static/src/js/index.js @@ -18,6 +18,7 @@ var LazyLoadInit = require('./modules/lazyload-init'); var HomeMenu = require('./modules/home-menu'); var Audio = require('./modules/audio'); var Video = require('./modules/video'); +var VideoOverlay = require('./modules/video-overlay'); // // Init all the modules @@ -38,4 +39,5 @@ window[LightSliderNetworkInit] = new LightSliderNetworkInit(); window[LazyLoadInit] = new LazyLoadInit(); window[HomeMenu] = new HomeMenu(); window[Audio] = new Audio(); -window[Video] = new Video(); +window['Video'] = new Video(); +window[VideoOverlay] = new VideoOverlay(); diff --git a/app/static/src/js/modules/video-overlay.js b/app/static/src/js/modules/video-overlay.js new file mode 100644 index 00000000..15eb72f8 --- /dev/null +++ b/app/static/src/js/modules/video-overlay.js @@ -0,0 +1,44 @@ +var VideoOverlay = function() { + + this.$overlay = $('#overlay'); + this.$overlayContent = $('#overlayContent'); + + // + // Init + // + this.init(); + +}; + +VideoOverlay.prototype.init = function() { + + var that = this; + + $('[data-video-overlay]').click(function(e) { + e.preventDefault(); + + that.openOverlay(this.href); + + return false; + }); + +}; + +VideoOverlay.prototype.openOverlay = function(url) { + + var that = this; + + that.$overlay.addClass('open'); + + that.$overlayContent.load(url, function() { + + window['Video'].init(); + setTimeout(function() { + that.$overlayContent.addClass('loaded'); + }, 2000); + + }); + +}; + +module.exports = VideoOverlay; diff --git a/app/static/src/js/modules/video.js b/app/static/src/js/modules/video.js index e23518a4..4238d58d 100644 --- a/app/static/src/js/modules/video.js +++ b/app/static/src/js/modules/video.js @@ -15,6 +15,10 @@ Video.prototype.init = function() { var that = this; + if(that.player) { + that.player.dispose(); + } + that.player = videojs('video-js-playlist', { aspectRatio:"905:520" }); diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss index bb234c3e..0ec352f2 100755 --- a/app/static/src/sass/modules/_all.scss +++ b/app/static/src/sass/modules/_all.scss @@ -67,6 +67,7 @@ @import 'newsletter'; @import 'tweets'; @import 'hero'; +@import 'overlay'; // Typography modules @import 'dashed'; diff --git a/app/static/src/sass/modules/_overlay.scss b/app/static/src/sass/modules/_overlay.scss new file mode 100644 index 00000000..e53752bb --- /dev/null +++ b/app/static/src/sass/modules/_overlay.scss @@ -0,0 +1,110 @@ +$module: ".overlay"; + +#{$module} { + + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 100; + + overflow: hidden; + + background: rgba($color-background, .95); + + display: block; + height: 0; + opacity: 0; + + @include transition(opacity .5s ease-in-out, height 0s .5s); + + &.open { + + height: 100%; + display: table; + opacity: 1; + @include transition(opacity .5s ease-in-out, height 0s); + + } + + &__close { + + position: absolute; + top: 2rem; + right: 2rem; + z-index: 2; + color: white; + display: block; + + width: 40px; + height: 40px; + + &:before, &:after { + width: 100%; + height: 1px; + content: ""; + display: block; + background: white; + + position: absolute; + top: 20px; + left: 0; + + @include transition(all 0.5s ease-in-out); + } + + &:before { + @include transform(rotate(45deg)); + } + &:after { + @include transform(rotate(-45deg)); + } + + &:hover { + + &:before { + background: $color-main; + @include transform(rotate(225deg)); + } + &:after { + background: $color-main; + @include transform(rotate(-225deg)); + } + + } + + } + + &__container { + + display: table; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + + } + + &__content { + + display: table-cell; + vertical-align: middle; + + } + + #overlayContent { + + opacity: 0; + @include transition(opacity .5s ease-in-out, height 0s .5s); + + &.loaded { + + opacity: 1; + + } + + } + +} diff --git a/app/static/src/sass/modules/_search.scss b/app/static/src/sass/modules/_search.scss index 8b9059b3..ee369ec3 100644 --- a/app/static/src/sass/modules/_search.scss +++ b/app/static/src/sass/modules/_search.scss @@ -28,7 +28,7 @@ $module: ".search"; width: 100%; z-index: 100; - background: rgba(255,255,255, .95); + background: rgba($color-background, .95); display: block; height: 0; @@ -49,9 +49,48 @@ $module: ".search"; &__close { position: absolute; - top: 1rem; - right: 1rem; + top: 2rem; + right: 2rem; z-index: 2; + color: white; + display: block; + + width: 40px; + height: 40px; + + &:before, &:after { + width: 100%; + height: 1px; + content: ""; + display: block; + background: white; + + position: absolute; + top: 20px; + left: 0; + + @include transition(all 0.5s ease-in-out); + } + + &:before { + @include transform(rotate(45deg)); + } + &:after { + @include transform(rotate(-45deg)); + } + + &:hover { + + &:before { + background: $color-main; + @include transform(rotate(225deg)); + } + &:after { + background: $color-main; + @include transform(rotate(-225deg)); + } + + } } diff --git a/app/static/src/sass/modules/_share-links.scss b/app/static/src/sass/modules/_share-links.scss index 4e36dfee..e90ffc01 100644 --- a/app/static/src/sass/modules/_share-links.scss +++ b/app/static/src/sass/modules/_share-links.scss @@ -50,4 +50,16 @@ $module: ".share-links"; } + .overlay & { + + #{$module}__item { + + display: inline-block; + @include margin-right(.25); + font-size: 1.3rem; + + } + + } + } diff --git a/app/static/src/sass/modules/boxes/_article-box.scss b/app/static/src/sass/modules/boxes/_article-box.scss index ec737b72..55cbe549 100644 --- a/app/static/src/sass/modules/boxes/_article-box.scss +++ b/app/static/src/sass/modules/boxes/_article-box.scss @@ -147,6 +147,7 @@ $module: ".article-box"; @include margin-bottom(.5); @include margin-right(.5); + } &__content { diff --git a/app/static/src/sass/modules/boxes/_media-box.scss b/app/static/src/sass/modules/boxes/_media-box.scss index 49cf366c..fbc5d331 100644 --- a/app/static/src/sass/modules/boxes/_media-box.scss +++ b/app/static/src/sass/modules/boxes/_media-box.scss @@ -64,6 +64,7 @@ $module: ".media-box"; &__image-container { background: $color-background; + display: block; @include transition(all 0.5s ease-in-out); } @@ -78,6 +79,7 @@ $module: ".media-box"; position: relative; overflow: hidden; + display: block; @include mq($until: xs) { height: auto; diff --git a/app/templates/base.html b/app/templates/base.html index ba311048..bc89735c 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -96,6 +96,18 @@ +
+ + +
+
+
+ +
+
+
+
+ {% search_form %} {% include "includes/footer_scripts.html" %} {% endspaceless %} diff --git a/app/templates/includes/search_form.html b/app/templates/includes/search_form.html index 8dceb004..3c3f1d6f 100644 --- a/app/templates/includes/search_form.html +++ b/app/templates/includes/search_form.html @@ -1,8 +1,7 @@ {% load mezzanine_tags i18n %}