diff --git a/static/css/application.css b/static/css/application.css index d615320538..1c4abf1501 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -2863,6 +2863,30 @@ section.course-index div#accordion ul.ui-accordion-content li a p { section.course-index div#accordion ul.ui-accordion-content li a p.subtitle { color: #666; } +section.course-content .dullify, section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr, section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls { + opacity: .4; + -webkit-transition-property: all; + -moz-transition-property: all; + -ms-transition-property: all; + -o-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + -ms-transition-delay: 0; + -o-transition-delay: 0; + transition-delay: 0; } +section.course-content .dullify:hover, section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr:hover, section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls:hover { + opacity: 1; } section.course-content div.video { padding: 6px 22.652px; margin: 0 -22.652px; @@ -2911,6 +2935,8 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr border: 1px solid #000; border-top: 0; color: #ccc; } +section.course-content div.video-subtitles div.video-wrapper section.video-controls:hover ul, section.course-content div.video-subtitles div.video-wrapper section.video-controls:hover div { + opacity: 1; } section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider { -webkit-border-radius: 0; -moz-border-radius: 0; diff --git a/static/js/jquery.fullscreen.js b/static/js/jquery.fullscreen.js new file mode 100644 index 0000000000..21d6d5f8ae --- /dev/null +++ b/static/js/jquery.fullscreen.js @@ -0,0 +1,145 @@ +/** + * @name jQuery FullScreen Plugin + * @author Martin Angelov + * @version 1.0 + * @url http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ + * @license MIT License + */ + +(function($){ + + // Adding a new test to the jQuery support object + $.support.fullscreen = supportFullScreen(); + + // Creating the plugin + $.fn.fullScreen = function(props){ + + if(!$.support.fullscreen || this.length != 1){ + + // The plugin can be called only + // on one element at a time + + return this; + } + + if(fullScreenStatus()){ + // if we are already in fullscreen, exit + cancelFullScreen(); + return this; + } + + // You can potentially pas two arguments a color + // for the background and a callback function + + var options = $.extend({ + 'background' : '#111', + 'callback' : function(){} + }, props); + + // This temporary div is the element that is + // actually going to be enlarged in full screen + + var fs = $('
',{ + 'css' : { + 'overflow-y' : 'auto', + 'background' : options.background, + 'width' : '100%', + 'height' : '100%' + } + }); + + var elem = this; + + // You can use the .fullScreen class to + // apply styling to your element + elem.toggleClass('fullscreen'); + + // Inserting our element in the temporary + // div, after which we zoom it in fullscreen + fs.insertBefore(elem); + fs.append(elem); + requestFullScreen(fs.get(0)); + + fs.click(function(e){ + if(e.target == this){ + // If the black bar was clicked + cancelFullScreen(); + } + }); + + elem.cancel = function(){ + cancelFullScreen(); + return elem; + }; + + onFullScreenEvent(function(fullScreen){ + + if(!fullScreen){ + + // We have exited full screen. + // Remove the class and destroy + // the temporary div + + elem.removeClass('fullScreen').insertBefore(fs); + fs.remove(); + } + + // Calling the user supplied callback + options.callback(fullScreen); + }); + + return elem; + }; + + + // These helper functions available only to our plugin scope. + + + function supportFullScreen(){ + var doc = document.documentElement; + + return ('requestFullscreen' in doc) || + ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) || + ('webkitRequestFullScreen' in doc); + } + + function requestFullScreen(elem){ + + if (elem.requestFullscreen) { + elem.requestFullscreen(); + } + else if (elem.mozRequestFullScreen) { + elem.mozRequestFullScreen(); + } + else if (elem.webkitRequestFullScreen) { + elem.webkitRequestFullScreen(); + } + } + + function fullScreenStatus(){ + return document.fullscreen || + document.mozFullScreen || + document.webkitIsFullScreen; + } + + function cancelFullScreen(){ + if (document.exitFullscreen) { + document.exitFullscreen(); + } + else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } + else if (document.webkitCancelFullScreen) { + document.webkitCancelFullScreen(); + } + } + + function onFullScreenEvent(callback){ + $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){ + // The full screen status is automatically + // passed to our callback as an argument. + callback(fullScreenStatus()); + }); + } + +})(jQuery); diff --git a/templates/sass/courseware/_video.scss b/templates/sass/courseware/_video.scss index b26af730a6..e60f7d1115 100644 --- a/templates/sass/courseware/_video.scss +++ b/templates/sass/courseware/_video.scss @@ -1,4 +1,13 @@ section.course-content { + .dullify { + opacity: .4; + @include transition(); + + &:hover { + opacity: 1; + } + } + div.video { padding: 6px lh(); margin: 0 (-(lh())); @@ -7,6 +16,7 @@ section.course-content { background: #f3f3f3; display: block; } + div.video-subtitles { display: table; @include clearfix(); @@ -47,24 +57,6 @@ section.course-content { } } - // ul { - // float: left; - - // li { - // margin-top: 5px; - // display: inline-block; - // cursor: pointer; - // border: 0; - // padding: 0; - - // div { - // &:empty { - // display: none; - // } - // } - // } - // } - section.video-controls { @extend .clearfix; background: #333; @@ -73,6 +65,12 @@ section.course-content { border-top: 0; color: #ccc; + &:hover { + ul, div { + opacity: 1; + } + } + div#slider { @extend .clearfix; @include border-radius(0); @@ -155,6 +153,7 @@ section.course-content { ul.vcr { float: left; margin-right: lh(); + @extend .dullify; li { float: left; @@ -201,6 +200,7 @@ section.course-content { div.secondary-controls { float: right; + @extend .dullify; div.speeds { border-left: 1px solid #000; diff --git a/templates/video.html b/templates/video.html index 082f755b8e..95677493b0 100644 --- a/templates/video.html +++ b/templates/video.html @@ -3,7 +3,7 @@ % endif
-
+