[sling-org-apache-sling-app-cms] branch master updated: Updated to clean up the loading behavior for slower connections / servers

[dklco]

This is an automated email from the ASF dual-hosted git repository.

dklco pushed a commit to branch master
in repository 
https://gitbox.apache.org/repos/asf/sling-org-apache-sling-app-cms.git


The following commit(s) were added to refs/heads/master by this push:
     new 3e53db7  Updated to clean up the loading behavior for slower 
connections / servers
     new 5491f4f  Merge branch 'master' of 
g...@github.com:apache/sling-org-apache-sling-app-cms.git
3e53db7 is described below

commit 3e53db7d6f870603328254e92477ddc3cb0cad83
Author: Dan Klco <dk...@apache.org>
AuthorDate: Fri Oct 19 14:25:41 2018 -0400

    Updated to clean up the loading behavior for slower connections /
    servers
---
 ui/src/main/frontend/src/js/cms.js       | 4 ++++
 ui/src/main/frontend/src/js/cms.modal.js | 6 ++++--
 ui/src/main/frontend/src/scss/cms.scss   | 9 +++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/ui/src/main/frontend/src/js/cms.js 
b/ui/src/main/frontend/src/js/cms.js
index 8ccdb44..0af533b 100644
--- a/ui/src/main/frontend/src/js/cms.js
+++ b/ui/src/main/frontend/src/js/cms.js
@@ -143,8 +143,12 @@ nomnom.decorate('.page-properties-container', {
             var $ctr = $(this);
             var $wrapper = $ctr.closest('.form-wrapper');
             $($ctr.data('source')).change(function(){
+                var $source = $(this);
+                $source.attr('disabled', 'disabled');
+                $ctr.html('');
                 var config = $(this).val();
                 $ctr.load($ctr.data('path')+config, function(){
+                    $source.removeAttr('disabled');
                     var source   = $('#content-template').html();
                     var template = Handlebars.compile(source);
                     var updateContent = function(){
diff --git a/ui/src/main/frontend/src/js/cms.modal.js 
b/ui/src/main/frontend/src/js/cms.modal.js
index 5de626e..3aef3e2 100644
--- a/ui/src/main/frontend/src/js/cms.modal.js
+++ b/ui/src/main/frontend/src/js/cms.modal.js
@@ -29,9 +29,9 @@ nomnom.decorate("a.Fetch-Modal", {
     methods : {
         getModal: function(title, link, path, complete) {
             var button = this;
-            var $modal = $('<div class="modal"><div 
class="modal-background"></div><div class="modal-card is-draggable"><header 
class="modal-card-head"><p class="modal-card-title">'+title+'</p><button 
class="delete" aria-label="close"></button></header><section 
class="modal-card-body"></section><footer 
class="modal-card-foot"></footer></div>');
+            var $modal = $('<div class="modal"><div 
class="modal-background"></div><div class="modal-card is-draggable"><header 
class="modal-card-head"><p class="modal-card-title">'+title+'</p><button 
class="delete" aria-label="close"></button></header><section 
class="modal-card-body"><div class="loader is-loading"></div></section><footer 
class="modal-card-foot"></footer></div>');
             $('body').append($modal);
-                $modal.find('.modal-card-body').load(link,function(){
+            $modal.find('.modal-card-body').load(link,function(){
                 $modal.addClass('is-active');
                 $modal.find('.delete,.close-modal').click(function(){
                     $modal.css('display','none').remove();
@@ -39,6 +39,8 @@ nomnom.decorate("a.Fetch-Modal", {
                 });
                 button.removeAttribute("disabled");
             });
+            
+            $modal.addClass('is-active');
             return $modal;
         }
     }
diff --git a/ui/src/main/frontend/src/scss/cms.scss 
b/ui/src/main/frontend/src/scss/cms.scss
index 6573c90..036d09c 100644
--- a/ui/src/main/frontend/src/scss/cms.scss
+++ b/ui/src/main/frontend/src/scss/cms.scss
@@ -87,6 +87,15 @@ h5 {
     position: relative;
 }
 
+.loader {
+    margin: auto;
+    width: 2em;
+    height: 2em;
+    border: 2px solid $primary;
+    border-right-color: transparent;
+    border-top-color: transparent;
+}
+
 .menu-label {
     text-transform: none;
     font-size: 1.25em;