Hide media player elements in view editor when a block is being configured

htdocs/artefact/file/blocktype/internalmedia/lib.php

@@ -71,7 +71,7 @@ class PluginBlocktypeInternalmedia extends PluginBlocktype {
             return get_string('typeremoved', 'blocktype.file/internalmedia');
         }
         $callbacks = self::get_all_filetype_players();
-        $result .= call_static_method('PluginBlocktypeInternalmedia', $callbacks[$mimetypefiletypes[$mimetype]], $artefact, $instance, $width, $height);
+        $result .= '<div class="mediaplayer-container"><div class="mediaplayer">' . call_static_method('PluginBlocktypeInternalmedia', $callbacks[$mimetypefiletypes[$mimetype]], $artefact, $instance, $width, $height) . '</div></div>';
         return $result;
     }
 

htdocs/js/views.js

@@ -113,6 +113,7 @@ function ViewManager() {
                     configblockcontent.innerHTML = data.data;
                     self.currentConfigureData = null;
                     removeNodeAttribute(button, 'disabled');
+                    self.showMediaPlayers();
                     self.shrinkBlock(blockinstance);
                 });
             }, function() {
@@ -349,6 +350,7 @@ function ViewManager() {
                 contentDiv.innerHTML = oldContent;
                 self.currentConfigureData = null;
                 removeNodeAttribute(button, 'disabled');
+                self.showMediaPlayers();
                 self.shrinkBlock(blockinstance);
             });
 
@@ -358,7 +360,29 @@ function ViewManager() {
     }
 
 
+    this.hideMediaPlayers = function () {
+        var cols = $('column-container');
+        forEach(getElementsByTagAndClassName(null, 'mediaplayer-container', cols), function (e) {
+            var d = getElementDimensions(e);
+            setStyle(e, {'height': d.h+'px'});
+            hideElement(getFirstElementByTagAndClassName(null, 'mediaplayer', e));
+        });
+        addElementClass(cols, 'grey');
+    }
+
+
+    this.showMediaPlayers = function () {
+        var cols = $('column-container');
+        forEach(getElementsByTagAndClassName(null, 'mediaplayer-container', cols), function (e) {
+            showElement(getFirstElementByTagAndClassName(null, 'mediaplayer', e));
+            setStyle(e, {'height': 'auto'});
+        });
+        removeElementClass(cols, 'grey');
+    }
+
+
     this.growBlock = function(blockinstance) {
+        self.hideMediaPlayers();
         var width = getElementDimensions(blockinstance).w;
         var left = getElementPosition(blockinstance).x;
         hideElement(blockinstance);
@@ -367,9 +391,8 @@ function ViewManager() {
         var blockcontrols = getFirstElementByTagAndClassName('div', 'blockinstance-controls', blockinstance);
         hideElement(blockheader);
         insertSiblingNodesAfter(blockheader, DIV({'id':'blockconfig-header'}, scrapeText(blockheader) + ': ' + get_string('Configure')));
+        addElementClass(blockinstance, 'configure');
         setStyle(blockinstance, {
-            'border': '2px solid #a0a0a0',
-            'z-index': 1,
             'width': newwidth + 'px'
         });
         // Move the block to the left to keep it above the old block
@@ -387,11 +410,10 @@ function ViewManager() {
 
     this.shrinkBlock = function(blockinstance) {
         hideElement(blockinstance);
+        removeElementClass(blockinstance, 'configure');
         setStyle(blockinstance, {
             'left': 0,
             'width': 'auto',
-            'border': 0,
-            'z-index': 0
         });
         var blockheader = getFirstElementByTagAndClassName('div', 'blockinstance-header', blockinstance);
         var blockcontrols = getFirstElementByTagAndClassName('div', 'blockinstance-controls', blockinstance);
@@ -424,6 +446,13 @@ function ViewManager() {
                 sendjsonrequest(config['wwwroot'] + 'view/blocks.json.php', pd, 'POST', function(data) {
                     removeElement(getFirstParentByTagAndClassName(button, 'div', 'blockinstance'));
                     removeNodeAttribute(button, 'disabled');
+                    if (self.currentConfigureData) {
+                        self.currentConfigureData['contentdiv'].innerHTML = self.currentConfigureData['oldcontent'];
+                        removeNodeAttribute(self.currentConfigureData['button'], 'disabled');
+                        self.showMediaPlayers();
+                        self.shrinkBlock(getFirstParentByTagAndClassName(self.currentConfigureData['contentdiv'], 'div', 'blockinstance'));
+                        self.currentConfigureData = null;
+                    }
                 }, function() {
                     removeNodeAttribute(button, 'disabled');
                 });

htdocs/theme/default/static/style/style.css

@@ -2879,3 +2879,7 @@ table#initials .initial-letters {
 .performanceinfo br {
 	display: none;
 }
+
+.grey {
+  background: url(../images/grey.png) repeat;
+}
\ No newline at end of file

htdocs/theme/default/static/style/views.css

@@ -133,7 +133,6 @@ div.editview {
 
 .blockinstance {
     margin-top: 1em;
-    background-color: #FFF;
     padding: 5px;
     font-size: 12px;
 }
@@ -144,7 +143,6 @@ div.editview {
     margin: 0;
     padding: 3px 5px;
     border-bottom: 1px solid #d2d2d2;
-    background-color: #FFF;
 }
 .blockinstance-header h4 a {
     text-decoration: none;
@@ -300,3 +298,8 @@ body:last-child:not(:root:root) .newblockhere {
 .blockinstance-content table p img {
 	padding: 10px 20px;
 }
+.configure {
+  border: 2px solid #a0a0a0;
+  background: #fff;
+  z-index: 2;
+}