Video overlay now stop when closed. Added a spinner.

diff --git a/app/static/src/js/modules/video-overlay.js b/app/static/src/js/modules/video-overlay.js
index 15eb72f8a7791b4b3c6c295c4d1e3ff5f9f9876d..ab99782dd8f638632df33390d9a3475c58513077 100644 (file)
--- a/app/static/src/js/modules/video-overlay.js
+++ b/app/static/src/js/modules/video-overlay.js
@@ -2,6 +2,8 @@ var VideoOverlay = function() {
 
     this.$overlay = $('#overlay');
     this.$overlayContent = $('#overlayContent');
+    this.$overlayClose = $('#overlayClose');
+    this.$overlayLoader = $('#overlayLoader');
 
     //
     // Init
@@ -14,9 +16,30 @@ VideoOverlay.prototype.init = function() {
 
     var that = this;
 
+    $(document).keyup(function(e) {
+
+        if(e.keyCode === 27) {
+
+            that.closeOverlay();
+
+        }
+
+    });
+
+    that.$overlayClose.bind('click', function(e) {
+
+        e.preventDefault();
+
+        that.closeOverlay();
+
+        return false;
+
+    });
+
     $('[data-video-overlay]').click(function(e) {
         e.preventDefault();
 
+        that.$overlayLoader.show();
         that.openOverlay(this.href);
 
         return false;
@@ -34,6 +57,7 @@ VideoOverlay.prototype.openOverlay = function(url) {
 
         window['Video'].init();
         setTimeout(function() {
+            that.$overlayLoader.hide();
             that.$overlayContent.addClass('loaded');
         }, 2000);
 
@@ -41,4 +65,16 @@ VideoOverlay.prototype.openOverlay = function(url) {
 
 };
 
+VideoOverlay.prototype.closeOverlay = function(url) {
+
+    var that = this;
+
+    that.$overlayContent.removeClass('loaded');
+    setTimeout(function() {
+        that.$overlayContent.html('');
+        that.$overlay.removeClass('open');
+    }, 1000);
+
+};
+
 module.exports = VideoOverlay;

diff --git a/app/static/src/sass/modules/_overlay.scss b/app/static/src/sass/modules/_overlay.scss
index e53752bb8e860225ed2c4100c038418bf56604c4..6f8b794fce012bfbb88030d4306f093d0d66f1ef 100644 (file)
--- a/app/static/src/sass/modules/_overlay.scss
+++ b/app/static/src/sass/modules/_overlay.scss
@@ -107,4 +107,34 @@ $module: ".overlay";
 
     }
 
+    &__loader {
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 10;
+        margin-left: -30px;
+        margin-top: -30px;
+
+        .loading {
+
+            height: 60px;
+            width: 60px;
+            display: block;
+            animation: rotation 1s infinite linear;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-top-color: rgba(255, 255, 255, 0.7);
+            border-radius: 50%;
+            margin: auto;
+
+        }
+
+    }
+
+}
+
+@keyframes rotation {
+  to {
+    transform: rotate(360deg);
+  }
 }

diff --git a/app/templates/base.html b/app/templates/base.html
index bc89735c100f9dae8237259a4e448be3e1bf8ff3..57cd77b442e6ef077ff0cb22462b617c4db475c2 100644 (file)
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -96,14 +96,17 @@
         </footer>
     </div>
 
-    <div class="overlay" id="overlay" data-close-button-target="overlay">
-        <a href="#" data-close-button="overlay" class="overlay__close">
+    <div class="overlay" id="overlay">
+        <a href="#" id="overlayClose" class="overlay__close">
         </a>
         <div class="overlay__container">
             <div class="overlay__content">
                 <div id="overlayContent">
 
                 </div>
+                <div class="overlay__loader" id="overlayLoader">
+                    <i class="loading"></i>
+                </div>
             </div>
         </div>
     </div>

diff --git a/app/templates/media/overlay_detail.html b/app/templates/media/overlay_detail.html
index fa065db3bb12211988766dc1db138512d3c336ec..97a2e90704b4f03adcc32efb3e48f36acb9cb8e5 100644 (file)
--- a/app/templates/media/overlay_detail.html
+++ b/app/templates/media/overlay_detail.html
@@ -36,7 +36,17 @@
 
                     {% with media as object %}
                         <div class="mt1">
-                            {% include "includes/share_buttons.html" %}
+                            <ul class="share-links">
+                                <li class="share-links__item share-links__item--facebook">
+                                    <a target="_blank" href="http://facebook.com/sharer.php?u={{ request.META.HTTP_HOST }}{{ request.scheme }}{{ '://'|urlencode }}{% url 'organization-media-detail' object|get_media_type|lower object.slug %}&amp;t={{ object.title|urlencode }}" title="{% trans "Share on Facebook" %}"><i class="fa fa-facebook-square"></i></a>
+                                </li>
+                                <li class="share-links__item share-links__item--twitter">
+                                    <a target="_blank" href="http://twitter.com/home?status={{ object.title|urlencode }}%20{{ request.scheme }}{{ '://'|urlencode }}{{ request.META.HTTP_HOST }}{% url 'organization-media-detail' object|get_media_type|lower object.slug %}" title="{% trans "Share on Twitter" %}"><i class="fa fa-twitter-square"></i></a>
+                                </li>
+                                <li class="share-links__item share-links__item--email">
+                                    <a href="mailto:?subject={{ object.title }}&amp;body={{ request.scheme }}{{ '://'|urlencode }}{{ request.META.HTTP_HOST }}{% url 'organization-media-detail' object|get_media_type|lower object.slug %}" title="{% trans "Share by email" %}"> <i class="fa fa-envelope-square"></i></a>
+                                </li>
+                            </ul>
                         </div>
                     {% endwith %}
                 </div>