[AdminBundle, MediaBundle] Update loading behaviour of app

src/Kunstmaan/AdminBundle/Resources/ui/js/_app-filter.js

@@ -168,7 +168,7 @@ kunstmaanbundles.filter = (function($, window, undefined) {
 
     clearAllFilters = function() {
         // Set Loading
-        $body.addClass('app--loading');
+        kunstmaanbundles.appLoading.addLoading();
 
         // Remove all filters
         $('.app__filter__line').remove();

src/Kunstmaan/AdminBundle/Resources/ui/js/_app-loading.js

@@ -0,0 +1,37 @@
+var kunstmaanbundles = kunstmaanbundles || {};
+
+kunstmaanbundles.appLoading = (function($, window, undefined) {
+
+    var init,
+        addLoading, removeLoading;
+
+    var $body = $('body');
+
+    init = function() {
+        $('.js-add-app-loading').on('click', addLoading);
+        $('.js-add-app-loading--forms').on('click', addLoadingForms);
+    };
+
+    addLoading = function() {
+        $body.addClass('app--loading');
+    };
+
+    addLoadingForms = function() {
+        var valid = $(this).parents('form')[0].checkValidity();
+
+        if(valid) {
+            addLoading();
+        }
+    };
+
+    removeLoading = function() {
+        $body.removeClass('app--loading');
+    };
+
+    return {
+        init: init,
+        addLoading: addLoading,
+        removeLoading: removeLoading
+    };
+
+}(jQuery, window));

src/Kunstmaan/AdminBundle/Resources/ui/js/_page-editor.js

@@ -308,7 +308,8 @@ kunstmaanbundles.pageEditor = (function(window, undefined) {
             if((e.ctrlKey || e.metaKey) && e.which === 83) {
                 e.preventDefault();
 
-                $body.addClass('app--loading');
+                kunstmaanbundles.appLoading.addLoading();
+
                 $('#pageadminform').submit();
             };
         });

src/Kunstmaan/AdminBundle/Resources/ui/js/_pagepart-editor.js

@@ -39,7 +39,7 @@ kunstmaanbundles.pagepartEditor = (function(window, undefined) {
             ppType = $select.val();
 
         // Set Loading
-        $body.addClass('app--loading');
+        kunstmaanbundles.appLoading.addLoading();
 
         // Ajax Request
         $.ajax({
@@ -61,7 +61,7 @@ kunstmaanbundles.pagepartEditor = (function(window, undefined) {
                 }
 
                 // Remove Loading
-                $body.removeClass('app--loading');
+                kunstmaanbundles.appLoading.removeLoading();
 
                 // Enable leave-page modal
                 kunstmaanbundles.checkIfEdited.edited();

src/Kunstmaan/AdminBundle/Resources/ui/js/app.js

@@ -34,6 +34,7 @@ kunstmaanbundles.app = (function($, window, undefined) {
         kunstmaanbundles.mediaChooser.init();
         kunstmaanbundles.bulkActions.init();
         kunstmaanbundles.nestedForm.init();
+        kunstmaanbundles.appLoading.init();
     };
 
 

src/Kunstmaan/AdminBundle/Resources/ui/scss/default-theme/general/_app.scss

@@ -18,7 +18,7 @@
         &:before {
             content: " ";
 
-            z-index: 601;
+            z-index: 9001;
             position: fixed;
             top: 50vh;
             left: 50vw;
@@ -37,7 +37,7 @@
         &:after {
             content: " ";
 
-            z-index: 600;
+            z-index: 9001;
             position: fixed;
             top: 0;
             left: 0;

src/Kunstmaan/AdminBundle/Resources/views/Default/_js_footer.html.twig

@@ -22,7 +22,7 @@
     "@KunstmaanAdminBundle/Resources/ui/vendor_bower/Sortable/Sortable.js"
     "@KunstmaanAdminBundle/Resources/ui/vendor_bower/select2/dist/js/select2.full.min.js"
     "@KunstmaanAdminBundle/Resources/ui/vendor_bower/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"
-    "@KunstmaanAdminBundle/Resources/ui/js/_app-sidebar-tree.js"
+    "@KunstmaanAdminBundle/Resources/ui/js/_app-loading.js"
     "@KunstmaanAdminBundle/Resources/ui/js/_app-sidebar-tree.js"
     "@KunstmaanAdminBundle/Resources/ui/js/_app-sidebar-toggle.js"
     "@KunstmaanAdminBundle/Resources/ui/js/_app-main-actions.js"

src/Kunstmaan/MediaBundle/Resources/views/Folder/addsub-modal.html.twig

@@ -22,7 +22,7 @@
 
                 <!-- Footer -->
                 <div class="modal-footer">
-                    <button type="submit" class="btn btn-primary btn--raise-on-hover">
+                    <button type="submit" class="js-add-app-loading--forms btn btn-primary btn--raise-on-hover">
                         {{ 'media.folder.addsub.modal.save' | trans }}
                     </button>
                     <button type="button" class="btn btn-default btn--raise-on-hover" data-dismiss="modal">

src/Kunstmaan/MediaBundle/Resources/views/Folder/delete-modal.html.twig

@@ -21,7 +21,7 @@
 
             <!-- Footer -->
             <div class="modal-footer">
-                <a href="{{ path('KunstmaanMediaBundle_folder_delete', { 'folderId' : folder.id }) }}" class="btn btn-danger btn--raise-on-hover">
+                <a href="{{ path('KunstmaanMediaBundle_folder_delete', { 'folderId' : folder.id }) }}" class="js-add-app-loading btn btn-danger btn--raise-on-hover">
                     {{ 'form.delete' |trans }}
                 </a>
                 <button type="button" class="btn btn-default btn--raise-on-hover" data-dismiss="modal">

src/Kunstmaan/MediaBundle/Resources/views/Media/addType-modal.html.twig

@@ -24,7 +24,7 @@
                     <!-- Footer -->
                     <div class="modal-footer">
                         {% set save = 'media.' ~ type ~ '.modal.save' %}
-                        <button type="submit" class="btn btn-primary btn--raise-on-hover">
+                        <button type="submit" class="js-add-app-loading--forms btn btn-primary btn--raise-on-hover">
                             {{ save | trans }}
                         </button>
                         <button type="button" class="btn btn-default btn--raise-on-hover" data-dismiss="modal">