Ticket #4152 - United Post Form: Update forms loading/switching effects.

inc/js/classes/BxDolCreatePost.js

@@ -55,7 +55,6 @@ BxDolCreatePost.prototype.init = function () {
 
 BxDolCreatePost.prototype.getForm = function (sModuleName, sModuleUri, oElement) {
     var $this = this;
-    var oDate = new Date();
 
     var oTab = $(oElement);
     var sTabActive = 'bx-menu-tab-active';
@@ -63,47 +62,44 @@ BxDolCreatePost.prototype.getForm = function (sModuleName, sModuleUri, oElement)
     oTab.parents('li:first').addClass(sTabActive);
     oTab.parents('.bx-popup-applied:visible').dolPopupHide();
 
-    if($('.sys-cpf-form.sys-cpf-' + sModuleName + ' form').length > 0) {
-        $('.sys-cpf-form:visible').bx_anim('hide', this._sAnimationEffect, this._iAnimationSpeed, function() {
-            $('.sys-cpf-form.sys-cpf-' + sModuleName).show().siblings('.sys-cpf-close:hidden').show();
-        });
-
-        return false;
-    }
-
-    this._loadingInBlock(oElement, true);
-
-    $.get(
-        this._sRootUrl + 'modules/?r=' + sModuleUri + '/get_create_post_form/', {
-            ajax_mode: true,
-            dynamic_mode: true,
-            absolute_action_url: true,
-            context_id: this._iContextId,
-            custom: this._oCustom,
-            _t:oDate.getTime()
-        },
-        function(oData) {
-            $this._loadingInBlock(oElement, false);
-
-            if(!oData || !oData.content) 
-                return;
-
-            $('.sys-cpf-form:visible').bx_anim('hide', this._sAnimationEffect, this._iAnimationSpeed, function() {
-                $this._loadingInBlock(oElement, true);
-
-                $('.sys-cpf-close:visible').hide();
-
-                var sForm = '.sys-cpf-form.sys-cpf-' + oData.module;
-                if($(sForm).length == 0)
-                    $('.sys-cpf-close').before($('<div class="sys-cpf-form sys-cpf-' + oData.module + '"></div>').hide());
-
-                $(sForm).html(oData.content).show().siblings('.sys-cpf-close:hidden').show();
-
-                $this._loadingInBlock(oElement, false);
-            });
-        }, 
-        'json'
-    );
+    $('.sys-cpf-form:visible').hide({
+        duration: 0,
+        complete: function() {
+            $('.sys-cpf-close:visible').hide();
+
+            if(!$('.sys-cpf-form.sys-cpf-' + sModuleName + ' form').length) {
+                var oDate = new Date();
+
+                $this._placeholderInBlock(oElement, true);
+
+                $.get(
+                    $this._sRootUrl + 'modules/?r=' + sModuleUri + '/get_create_post_form/', {
+                        ajax_mode: true,
+                        dynamic_mode: true,
+                        absolute_action_url: true,
+                        context_id: $this._iContextId,
+                        custom: $this._oCustom,
+                        _t: oDate.getTime()
+                    },
+                    function(oData) {
+                        $this._placeholderInBlock(oElement, false);
+
+                        if(!oData || !oData.content) 
+                            return;
+
+                        var sForm = '.sys-cpf-form.sys-cpf-' + oData.module;
+                        if($(sForm).length == 0)
+                            $('.sys-cpf-close').before($('<div class="sys-cpf-form sys-cpf-' + oData.module + '"></div>').hide());
+
+                        $(sForm).html(oData.content).show().siblings('.sys-cpf-close:hidden').show();
+                    }, 
+                    'json'
+                );
+            }
+            else 
+                $('.sys-cpf-form.sys-cpf-' + sModuleName).show().siblings('.sys-cpf-close:hidden').show();
+        }
+    });
 
     return false;
 };
@@ -134,8 +130,22 @@ BxDolCreatePost.prototype._loading = function(e, bShow) {
 };
 
 BxDolCreatePost.prototype._loadingInBlock = function(e, bShow) {
-    var oParent = $(e).length ? $(e).parents('.bx-db-content:first') : $('body'); 
+    var oParent = $(e).length ? $(e).parents('.bx-db-container:first') : $('body'); 
     bx_loading(oParent, bShow);
 };
 
+BxDolCreatePost.prototype._placeholderInBlock = function(e, bShow) {
+    var oPlaceholder = null;
+    if($(e).length) 
+        oPlaceholder = $(e).parents('.bx-db-container:first').find('.sys-cpf-form.sys-cpf-loading'); 
+
+    if(!oPlaceholder)
+        return _loadingInBlock(e, bShow);
+
+    if(bShow)
+        oPlaceholder.show();
+    else
+        oPlaceholder.hide();
+};
+
 /** @} */

modules/boonex/artificer/data/template/system/css/general.css

@@ -107,4 +107,32 @@ import url(../../../../../../../template/css/general.css);
 /*--- Page Type: Application ---*/
 .bx-menu-panel-item .bx-profile-avatar .bx-profile-avatar-cnt {
     min-height: 2.5rem;
+}
+
+/*--- Create Post Form ---*/
+.sys-cpf-form:not(.sys-cpf-loading) {
+    -webkit-animation: sys-cpf-slide-in 0.4s cubic-bezier(0.37, 0.82, 0.2, 1);
+    animation: sys-cpf-slide-in 0.4s cubic-bezier(0.37, 0.82, 0.2, 1);
+}
+
+@keyframes sys-cpf-slide-in {
+    0% {
+        opacity: 0;
+        margin-left: -10rem;
+    }
+    100% {
+        opacity: 1;
+        margin-left: 0px;
+    }
+}
+
+@-webkit-keyframes sys-cpf-slide-in {
+    0% {
+        opacity: 0;
+        margin-left: -10rem;
+    }
+    100% {
+        opacity: 1;
+        margin-left: 0px;
+    }
 }

template/create_post_form.html

@@ -1,6 +1,14 @@
 <div id="sys-create-post-form" class="sys-create-post-form relative">
     <div class="sys-cpf-cnt">
         <div id="sys-cpf-form">
+            <div class="sys-cpf-form sys-cpf-loading bx-def-bc-margin" style="display:none">
+                <div class="flex items-center p-4">
+                    <div class="flex-0 h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full">&nbsp;</div>
+                    <div class="flex-1 ml-4 space-y-2 animate-pulse">
+                        <div class="h-8 w-full bg-gray-300 dark:bg-gray-600 rounded-md">&nbsp;</div>
+                    </div>
+                </div>
+            </div>
             <div class="sys-cpf-form sys-cpf-default flex items-center p-4 bg-gray-50 hover:bg-white dark:bg-gray-900/50 dark:hover:bg-gray-900 shadow hover:shadow-md ring-1 ring-gray-300 dark:ring-gray-700 rounded-md cursor-pointer" onclick="__js_object__.getForm('__default__')">
                 <div class="sys-cpf-user">__user_thumb__</div>
                 <div class="sys-cpf-content flex text-base ml-4 text-gray-500 dark:text-gray-400">

template/css/general.css

@@ -517,6 +517,10 @@ div.bx-account-unit-online {
 .sys-cpf-form {
     position: relative;
 }
+.sys-cpf-form:not(.sys-cpf-loading) {
+    -webkit-animation: sys-cpf-slide-in 0.4s cubic-bezier(0.37, 0.82, 0.2, 1);
+    animation: sys-cpf-slide-in 0.4s cubic-bezier(0.37, 0.82, 0.2, 1);
+}
 .sys-cpf-form .bx-uploader-ghost .bx-base-general-icon-wrapper img {
     max-width: 9.375rem;
 }
@@ -528,6 +532,28 @@ div.bx-account-unit-online {
     bottom: 0;
 }
 
+@keyframes sys-cpf-slide-in {
+    0% {
+        opacity: 0;
+        margin-left: -10rem;
+    }
+    100% {
+        opacity: 1;
+        margin-left: 0px;
+    }
+}
+
+@-webkit-keyframes sys-cpf-slide-in {
+    0% {
+        opacity: 0;
+        margin-left: -10rem;
+    }
+    100% {
+        opacity: 1;
+        margin-left: 0px;
+    }
+}
+
 
 /* --------------- Account Unit */
 .bx-account-unit .bx-def-unit-img,