[BUGFIX] Add UI blocker to prevent loading issues in FormEngine 77/52777/2
authorFrank Naegler <frank.naegler@typo3.org>
Wed, 26 Apr 2017 13:19:37 +0000 (15:19 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Fri, 12 May 2017 14:22:09 +0000 (16:22 +0200)
Resolves: #80672
Releases: master, 8.7, 7.6
Change-Id: I52da6df109531f2a29acbb99b7871dc6227974b7
Reviewed-on: https://review.typo3.org/52777
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Build/Resources/Public/Less/TYPO3/_element_uiblock.less [new file with mode: 0644]
Build/Resources/Public/Less/backend.less
typo3/sysext/backend/Classes/Controller/EditDocumentController.php
typo3/sysext/backend/Classes/Template/ModuleTemplate.php
typo3/sysext/backend/Resources/Private/Templates/Module.html
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
typo3/sysext/install/Resources/Public/Css/InstallTool.css
typo3/sysext/t3skin/Resources/Public/Css/backend.css

diff --git a/Build/Resources/Public/Less/TYPO3/_element_uiblock.less b/Build/Resources/Public/Less/TYPO3/_element_uiblock.less
new file mode 100644 (file)
index 0000000..ccafbf1
--- /dev/null
@@ -0,0 +1,14 @@
+//
+// UI blocker
+//
+.ui-block {
+       text-align: center;
+       padding-top: 200px;
+       position: absolute;
+       z-index: 3000;
+       top: 0;
+       left: 0;
+       width: 100%;
+       height: 100%;
+       background: rgba(0, 0, 0, 0.3);
+}
index a8025ca..e212ba6 100644 (file)
@@ -49,6 +49,7 @@
 @import "TYPO3/_element_popover.less";
 @import "TYPO3/_element_tceforms.less";
 @import "TYPO3/_element_tree.less";
+@import "TYPO3/_element_uiblock.less";
 @import "TYPO3/_element_pagination.less";
 @import "TYPO3/_element_fieldselectbox.less";
 @import "TYPO3/_element_label.less";
index eb7df29..8ad2982 100644 (file)
@@ -414,6 +414,7 @@ class EditDocumentController extends AbstractModule
     public function __construct()
     {
         parent::__construct();
+        $this->moduleTemplate->setUiBlock(true);
         $GLOBALS['SOBE'] = $this;
         $this->getLanguageService()->includeLLFile('EXT:lang/locallang_alt_doc.xlf');
     }
index 47eb4e4..4d7a82e 100644 (file)
@@ -88,6 +88,11 @@ class ModuleTemplate
     protected $pageRenderer;
 
     /**
+     * @var bool
+     */
+    protected $uiBlock = false;
+
+    /**
      * TemplateRootPath
      *
      * @var string[]
@@ -355,6 +360,7 @@ class ModuleTemplate
         if ($this->moduleName) {
             $this->view->assign('moduleName', $this->moduleName);
         }
+        $this->view->assign('uiBlock', $this->uiBlock);
         $this->view->assign('flashMessageQueueIdentifier', $this->getFlashMessageQueue()->getIdentifier());
         $renderedPage = $this->pageRenderer->render(PageRenderer::PART_HEADER);
         $renderedPage .= $this->bodyTag;
@@ -884,4 +890,20 @@ class ModuleTemplate
         }
         return $this->flashMessageQueue;
     }
+
+    /**
+     * @return bool
+     */
+    public function isUiBlock()
+    {
+        return $this->uiBlock;
+    }
+
+    /**
+     * @param bool $uiBlock
+     */
+    public function setUiBlock($uiBlock)
+    {
+        $this->uiBlock = (bool)$uiBlock;
+    }
 }
index eaf142e..eb5a562 100644 (file)
@@ -1,3 +1,5 @@
+{namespace core = TYPO3\CMS\Core\ViewHelpers}
+
 <div class="module" data-module-id="{moduleId}" data-module-name="{moduleName}">
        <f:if condition="{formTag}">
                <f:then>
@@ -8,6 +10,11 @@
                <f:render partial="DocHeader" arguments="{docHeader:docHeader}" />
        </f:if>
        <div class="module-body t3js-module-body">
+               <f:if condition="{uiBlock}">
+                       <div id="t3js-ui-block" class="ui-block">
+                               <core:icon identifier="spinner-circle-light" size="large" />
+                       </div>
+               </f:if>
                <f:flashMessages as="flashMessages" queueIdentifier="{flashMessageQueueIdentifier}">
                        <f:for each="{flashMessages}" as="flashMessage">
                                <div class="alert {flashMessage.class}">
@@ -35,4 +42,4 @@
                        </form>
                </f:then>
        </f:if>
-</div>
\ No newline at end of file
+</div>
index cdac8a6..2d8fc9a 100644 (file)
@@ -903,10 +903,14 @@ define(['jquery',
                                Suggest($('.t3-form-suggest'));
                        });
                }
-               // apply DatePicker to all date time fields
-               require(['TYPO3/CMS/Backend/DateTimePicker'], function(DateTimePicker) {
-                       DateTimePicker.initialize();
-               });
+
+               // Apply DatePicker to all date time fields
+               if ($('.t3js-datetimepicker').length) {
+                       require(['TYPO3/CMS/Backend/DateTimePicker'], function(DateTimePicker) {
+                               DateTimePicker.initialize();
+                       });
+               }
+
                FormEngine.convertTextareasResizable();
                FormEngine.convertTextareasEnableTab();
        };
@@ -989,22 +993,16 @@ define(['jquery',
                FormEngine.Validation.setUsMode(mode);
 
                $(function() {
+                       FormEngine.initializeEvents();
+                       FormEngine.SelectBoxFilter.initializeEvents();
                        FormEngine.initializeRemainingCharacterViews();
                        FormEngine.initializeSelectCheckboxes();
                        FormEngine.Validation.initialize();
                        FormEngine.reinitialize();
+                       $('#t3js-ui-block').remove();
                });
        };
 
-       /**
-        * initialize function, always require possible post-render hooks return the main object
-        */
-
-       // the events are only bound to the document, which is already present for sure.
-       // no need to have it in DOMready handler
-       FormEngine.initializeEvents();
-       FormEngine.SelectBoxFilter.initializeEvents();
-
        // load required modules to hook in the post initialize function
        if (undefined !== TYPO3.settings.RequireJS && undefined !== TYPO3.settings.RequireJS.PostInitializationModules['TYPO3/CMS/Backend/FormEngine']) {
                $.each(TYPO3.settings.RequireJS.PostInitializationModules['TYPO3/CMS/Backend/FormEngine'], function(pos, moduleName) {
index 6e9c2f9..8299907 100644 (file)
@@ -323,7 +323,8 @@ th {
 :root .fa-rotate-270,
 :root .fa-flip-horizontal,
 :root .fa-flip-vertical {
-  filter: none;
+  -webkit-filter: none;
+          filter: none;
 }
 .fa-stack {
   position: relative;
index 0a5e9de..a09f93b 100644 (file)
@@ -325,7 +325,8 @@ th {
 :root .fa-rotate-270,
 :root .fa-flip-horizontal,
 :root .fa-flip-vertical {
-  filter: none;
+  -webkit-filter: none;
+          filter: none;
 }
 .fa-stack {
   position: relative;
@@ -11233,6 +11234,17 @@ ul.tree div.treeLinkItem span.dragIcon {
   width: 1px;
   background-color: #c3c3c3;
 }
+.ui-block {
+  text-align: center;
+  padding-top: 200px;
+  position: absolute;
+  z-index: 3000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+}
 .pagination .t3-icon {
   margin: 0;
 }