Adjusted uianimation.js to new html/css model

src/main/resources/static/css/commons/r11form.css

@@ -87,6 +87,16 @@
     display: none;
 }
 
+.tool-extention {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.tool-extention.active {
+    opacity: 100%;
+    pointer-events: all;
+}
+
 .clickable-text {
     padding: 0;
     outline: none;
@@ -355,6 +365,15 @@
     display: block;
 }
 
+.tabcontent {
+    display: none;
+}
+
+.tabcontent.active {
+    display: flex;
+    justify-content: center;
+}
+
 .collapsible .section-button {
     width: 100%;
     padding: 15px 0;
@@ -385,6 +404,10 @@
     text-align: justify;
 }
 
-.hiddable.active {
+.hiddable {
     display: none;
 }
+
+.hiddable.active {
+    display: block;
+}

src/main/resources/static/html/mock.html

@@ -19,7 +19,7 @@
                 </div>
                 <div>
                     <!-- h2 -->
-                    <div id="basicItemData" class="hiddable"><h2>Your Message</h2></div>
+                    <div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>
                     <div id="advancedItemData" class="hiddable"><h2>Messaged id: <span>1</span></h2></div>
                     <!-- save -->
                     <div>
@@ -69,7 +69,7 @@
                         <h3>&gt; show/hide advanced settings</h3>
                     </div>
                     <!-- advanced -->
-                    <div id="advanced" class="max-width with-padding">
+                    <div id="advanced" class="max-width with-padding hiddable">
                         <!-- tab menu -->
                         <div class="tabmenu medium-vertical-margin">
                             <button id="headersTab" class="tabitem active clickable-text big-font">Headers</button>
@@ -78,7 +78,7 @@
                         <!-- container -->
                         <div class="medium-vertical-margin">
                             <!-- headers -->
-                            <div class="medium-vertical-margin tabcontent centered-content">
+                            <div id="headers" class="medium-vertical-margin tabcontent active">
                                 <table class="table-map">
                                     <thead>
                                         <tr>
@@ -102,7 +102,7 @@
                                 </table>
                             </div>
                             <!-- history -->
-                            <div class="medium-vertical-margin tabcontent centered-content">
+                            <div id="history" class="medium-vertical-margin tabcontent">
                                 <table class="table-default">
                                     <tr class="bottom-border">
                                         <th>Timestamp</th>

src/main/resources/static/js/uianimation.js

@@ -6,50 +6,41 @@ var advancedID = $("#advancedItemData");
 var focusedField = false;
 function changeAdvancedVisibility(){
     if(advancedVisibility){
-        selectMenu.css('display', 'none');
-        advancedTab.css('display', 'none');
-        advancedID.css('display', 'none');
-        basicID.css('display', 'block')
+        selectMenu.removeClass('active');
+        advancedTab.removeClass('active');
+        advancedID.removeClass('active');
+        basicID.addClass('active');
         advancedVisibility = false;
     }
     else {
-        selectMenu.css('display', 'block');
-        advancedTab.css('display', 'block');
-        advancedID.css('display', 'block');
-        basicID.css('display', 'none');
+        selectMenu.addClass('active');
+        advancedTab.addClass('active');
+        advancedID.addClass('active');
+        basicID.removeClass('active');
         advancedVisibility = true;
     }
     setCookie();
 }
 
-function createMessageTab() {
-    var items = document.getElementById("listItems");
-    items.innerHTML += '<div class="menuItem">Item</div>';
-}
-
 $("#optional").click(changeAdvancedVisibility);
-$(".menuFactory").click(createMessageTab);
 $('#historyTab').click(showHistory);
 
+const tabitem = $('.tabitem');
 function showHistory(){
-    $('#headers').css('display', 'none');
-    $('.advancedMenuTabSelected').addClass('advancedMenuTab');
-    $('.advancedMenuTabSelected').click(showHeaders);
-    $('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
-    $('#history').css('display', 'block');
-    $('#historyTab').addClass('advancedMenuTabSelected');
-    $('#historyTab').removeClass('advancedMenuTab');
+    $('#headersTab').click(showHeaders);
+    tabitem.removeClass('active');
+    $('.tabcontent').removeClass('active');
+    $('#history').addClass('active');
+    $('#historyTab').addClass('active');
     $('#historyTab').off('click');
 }
 
 function showHeaders(){
-    $('#history').css('display', 'none');
-    $('.advancedMenuTabSelected').addClass('advancedMenuTab');
-    $('.advancedMenuTabSelected').click(showHistory);
-    $('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
-    $('#headers').css('display', 'block');
-    $('#headersTab').addClass('advancedMenuTabSelected');
-    $('#headersTab').removeClass('advancedMenuTab');
+    $('#historyTab').click(showHistory);
+    tabitem.removeClass('active');
+    $('.tabcontent').removeClass('active');
+    $('#headers').addClass('active');
+    $('#headersTab').addClass('active');
     $('#headersTab').off('click');
 }