R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Cleared unused listeners, and optimize uianimation code

Browse Source
This commit is contained in:
Mikolaj Widla
2023-05-30 12:55:47 +02:00
parent fb128070dc
commit b37a074fa2
4 changed files with 31 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Frontend/assets/scripts/tools/mock/datatransfer.js
View File

@@ -140,7 +140,7 @@ function loadFetchedMessage(){
json.messageBody, json.messageBody,
json.httpStatus); json.httpStatus);
fillHeaderTable(json.httpHeaders); fillHeaderTable(json.httpHeaders);
initializeHistory(); getHistoryData();
refreshHeaderTable(document.innerHTML); refreshHeaderTable(document.innerHTML);
} }

44
Frontend/assets/scripts/tools/mock/modal.js
View File

@@ -7,7 +7,6 @@ var methodToCall = {
const overlay = $('#overlay'); const overlay = $('#overlay');
const savedModal = $('#modal-confirm'); const savedModal = $('#modal-confirm');
const dataLossModal = $('#modal-query'); const dataLossModal = $('#modal-query');
const uuidChangeModal = $('#modal-uuidChanged')
const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0); const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0);
const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1); const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
const allModals = $('.modal'); const allModals = $('.modal');
@@ -24,36 +23,10 @@ const dataLossModalDisplay = function(){
showModal(dataLossModal); showModal(dataLossModal);
} }
const uuidChangeModalDisplay = function(addidionalMessage){ btnModalClose.click(closeModals);
overlay.click(closeModals);
switch(addidionalMessage){ dataLossModalNo.click(closeModals);
case "success":{ dataLossModalYes.click(dropChangesAndClose);
$(".uuid-modal-body").removeClass("active");
$("#changeUUIDSuccess").addClass("active");
break;
}
case "new":{
$(".uuid-modal-body").removeClass("active");
$("#newUUID").addClass("active");
break;
}
case "restore":{
$(".uuid-modal-body").removeClass("active");
$("#restoredUUID").addClass("active");
break;
}
case "noChg":{
$(".uuid-modal-body").removeClass("active");
$("#noChgUUID").addClass("active");
break;
}
}
showModal(uuidChangeModal);
}
function setMethodToCall(name, id){ function setMethodToCall(name, id){
methodToCall.name = name; methodToCall.name = name;
@@ -74,16 +47,7 @@ function showModal(jmodal){
function hideModal(jmodal){ function hideModal(jmodal){
if(!modalDisplayed) return; if(!modalDisplayed) return;
if ($(uuidChangeModal).hasClass('active')) window.location.reload();
overlay.removeClass('active'); overlay.removeClass('active');
jmodal.removeClass('active'); jmodal.removeClass('active');
modalDisplayed = false; modalDisplayed = false;
} }
btnModalClose.click(closeModals);
overlay.click(closeModals);
dataLossModalNo.click(closeModals);
dataLossModalYes.click(dropChangesAndClose);

102
Frontend/assets/scripts/tools/mock/uianimation.js
View File

@@ -1,40 +1,31 @@
var advancedVisibility = false; var advancedVisibility = false;
var selectMenu = $("#selectMenuContent");
var advancedTab = $("#advanced");
var basicID = $("#basicItemData")
var advancedID = $("#advancedItemData");
var advancedUUIDOptions = $("#uuid-validation-strategy");
var focusedField = false; var focusedField = false;
/*
Listeners
*/
$("#optional").click(changeAdvancedVisibility);
$('#historyTab').click(showHistory);
$('.tooltipped').on("mouseenter" , (event) => {showTip(event.currentTarget.id+'Tip')})
.on( "mouseleave", (event) => {hideTip(event.currentTarget.id+'Tip')});
/*
Functions
*/
function changeAdvancedVisibility(){ function changeAdvancedVisibility(){
if(advancedVisibility){ if(advancedVisibility){
selectMenu.removeClass('active'); $("#advanced").removeClass('active');
advancedTab.removeClass('active');
advancedID.removeClass('active');
advancedUUIDOptions.removeClass('active');
basicID.addClass('active');
advancedVisibility = false; advancedVisibility = false;
} }
else { else {
selectMenu.addClass('active'); $('#advanced').addClass('active');
advancedTab.addClass('active');
advancedID.addClass('active');
advancedUUIDOptions.addClass('active');
basicID.removeClass('active');
advancedVisibility = true; advancedVisibility = true;
} }
setCookie(); setCookie();
} }
const historyFilter = $('#history-filter');
const historyFilterSwitch = function(){
historyFilter.toggleClass('active');
}
$("#optional").click(changeAdvancedVisibility);
$('#historyTab').click(showHistory);
$('#btn-history-filter').click(historyFilterSwitch);
const tabitem = $('.tabitem'); const tabitem = $('.tabitem');
function showHistory(){ function showHistory(){
$('#headersTab').click(showHeaders); $('#headersTab').click(showHeaders);
@@ -43,11 +34,6 @@ function showHistory(){
$('#history').addClass('active'); $('#history').addClass('active');
$('#historyTab').addClass('active'); $('#historyTab').addClass('active');
$('#historyTab').off('click'); $('#historyTab').off('click');
initializeHistory();
}
function initializeHistory(){
historyFilter.removeClass('active');
getHistoryData(); getHistoryData();
} }
@@ -165,69 +151,15 @@ function showRequestBody(element){
showPopup(); showPopup();
} }
function focusInTip(element){
showTip(element);
focusedField = true;
}
function focusOutTip(element){
focusedField = false;
hidTip(element);
}
function refreshHistoryRecords(){ function refreshHistoryRecords(){
getHistoryData(); getHistoryData();
} }
function hidTip(element){ function hideTip(element){
if(focusedField) return;
$('#'+element).removeClass('active'); $('#'+element).removeClass('active');
} }
function showTip(element){ function showTip(element){
if(focusedField) return;
$('.tip').removeClass('active'); $('.tip').removeClass('active');
$('#'+element).addClass('active'); $('#'+element).addClass('active');
} }
$('#messageLink').mouseover(function(){showTip('messageLinkTip')});
$('#messageLink').mouseleave(function(){hidTip('messageLinkTip')});
$('#httpStatus').mouseover(function(){showTip('httpStatusTip')});
$('#httpStatus').focusin(function(){focusInTip('httpStatusTip')});
$('#httpStatus').mouseleave(function(){hidTip('httpStatusTip')});
$('#httpStatus').focusout(function(){focusOutTip('httpStatusTip')});
$('#typeSelector').mouseover(function(){showTip('typeSelectorTip')});
$('#typeSelector').focusin(function(){focusInTip('typeSelectorTip')});
$('#typeSelector').mouseleave(function(){hidTip('typeSelectorTip')});
$('#typeSelector').focusout(function(){focusOutTip('typeSelectorTip')});
$('#bodyEditor').mouseover(function(){showTip('bodyEditorTip')});
$('#bodyEditor').focusin(function(){focusInTip('bodyEditorTip')});
$('#bodyEditor').mouseleave(function(){hidTip('bodyEditorTip')});
$('#bodyEditor').focusout(function(){focusOutTip('bodyEditorTip')});
$('#headersTab').mouseover(function(){showTip('headersTabTip')});
$('#headersTab').mouseleave(function(){hidTip('headersTabTip')});
$('#historyTab').mouseover(function(){showTip('historyTabTip')});
$('#historyTab').mouseleave(function(){hidTip('historyTabTip')});
$('#headerKeyInput').mouseover(function(){showTip('newHeaderTip')});
$('#headerKeyInput').focusin(function(){focusInTip('newHeaderTip')});
$('#headerKeyInput').mouseleave(function(){hidTip('newHeaderTip')});
$('#headerKeyInput').focusout(function(){focusOutTip('newHeaderTip')});
$('#headerValueInput').mouseover(function(){showTip('newHeaderTip')});
$('#headerValueInput').focusin(function(){focusInTip('newHeaderTip')});
$('#headerValueInput').mouseleave(function(){hidTip('newHeaderTip')});
$('#headerValueInput').focusout(function(){focusOutTip('newHeaderTip')});
$('#btnSave').mouseover(function(){showTip('btnSaveTip');});
$('#btnSave').focusin(function(){focusInTip('btnSaveTip')});
$('#btnSave').mouseleave(function(){hidTip('btnSaveTip')});
$('#btnSave').focusout(function(){focusOutTip('btnSaveTip')});
$('#listItems').mouseover(function(){showTip('messagesTip');});
$('#listItems').mouseleave(function(){hidTip('messagesTip')});

22
Frontend/tools/mock.html
View File

@@ -50,7 +50,7 @@
<!-- link --> <!-- link -->
<div> <div>
<label for="messageLink" class="block-display">Link</label> <label for="messageLink" class="block-display">Link</label>
<div id="messageLink" class="bordered-field max-width with-padding disabled-background"><a class="hyperlink" href="www.google.com" target="_blank">www.google.com</a></div> <div id="messageLink" class="bordered-field max-width with-padding disabled-background tooltipped"><a class="hyperlink" href="www.google.com" target="_blank">www.google.com</a></div>
<!-- <input id="messageLink" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla"> --> <!-- <input id="messageLink" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla"> -->
</div> </div>
<div class="display-space-between max-width"> <div class="display-space-between max-width">
@@ -59,7 +59,7 @@
<!-- status --> <!-- status -->
<div class="max-width small-vertical-margin"> <div class="max-width small-vertical-margin">
<label for="httpStatus">Http Status</label> <label for="httpStatus">Http Status</label>
<input id="httpStatus" type="number" class="bordered-field max-width data-field" value="200" list="httpStatusSuggestion"/> <input id="httpStatus" type="number" class="bordered-field max-width data-field tooltipped" value="200" list="httpStatusSuggestion"/>
<datalist id="httpStatusSuggestion"> <datalist id="httpStatusSuggestion">
<option value="200"> <option value="200">
<option value="300"> <option value="300">
@@ -72,7 +72,7 @@
<!-- content type --> <!-- content type -->
<div class="max-width small-vertical-margin"> <div class="max-width small-vertical-margin">
<label for="typeSelector">Content Type</label> <label for="typeSelector">Content Type</label>
<input id="typeSelector" class="bordered-field max-width data-field" type="text" value="application/xml" list="contentTypes"> <input id="typeSelector" class="bordered-field max-width data-field tooltipped" type="text" value="application/xml" list="contentTypes">
<datalist id="contentTypes"> <datalist id="contentTypes">
<option value="application/xml"> <option value="application/xml">
<option value="application/json"> <option value="application/json">
@@ -80,14 +80,14 @@
</datalist> </datalist>
</div> </div>
</div> </div>
<div id="btnSave" class="small-margins half-width with-padding action-button" style="background-color: white; border: 0px;"> <div id="btnSave" class="small-margins half-width with-padding action-button tooltipped" style="background-color: white; border: 0px;">
<button id="btn-save" class="small-margins half-width with-padding action-button" style="width: 100%; height: 100%;">Save</button> <button id="btn-save" class="small-margins half-width with-padding action-button" style="width: 100%; height: 100%;">Save</button>
</div> </div>
</div> </div>
<!-- body --> <!-- body -->
<div class="small-vertical-margin"> <div class="small-vertical-margin">
<label for="bodyEditor">Body</label> <label for="bodyEditor">Body</label>
<textarea id="bodyEditor" class="data-field bordered-field max-width with-padding height-300 vertically-resizeable"></textarea> <textarea id="bodyEditor" class="data-field bordered-field max-width with-padding height-300 vertically-resizeable tooltipped"></textarea>
</div> </div>
<!-- show/hide --> <!-- show/hide -->
<button id="optional" class="clickable-text highlight switch"><span class="toggleIndicator"></span> show/hide advanced settings</button> <button id="optional" class="clickable-text highlight switch"><span class="toggleIndicator"></span> show/hide advanced settings</button>
@@ -95,8 +95,8 @@
<div id="advanced" class="max-width with-padding hiddable"> <div id="advanced" class="max-width with-padding hiddable">
<!-- tab menu --> <!-- tab menu -->
<div class="tabmenu medium-vertical-margin"> <div class="tabmenu medium-vertical-margin">
<button id="headersTab" class="tabitem active clickable-text big-font">Headers</button> <button id="headersTab" class="tabitem active clickable-text big-font tooltipped">Headers</button>
<button id="historyTab" class="tabitem clickable-text big-font">History</button> <button id="historyTab" class="tabitem clickable-text big-font tooltipped">History</button>
</div> </div>
<!-- container --> <!-- container -->
<div class="medium-vertical-margin"> <div class="medium-vertical-margin">
@@ -118,8 +118,8 @@
</tr> </tr>
</tbody> </tbody>
<tr> <tr>
<td><input id="headerKeyInput" placeholder="name"></td> <td><input id="headerKeyInput" class="tooltipped" placeholder="name"></td>
<td><input id="headerValueInput" placeholder="value"></td> <td><input id="headerValueInput" class="tooltipped" placeholder="value"></td>
<td><button id="btn-newRow" class="modification-button btn-add"><i class="icon-plus"></i></button></td> <td><button id="btn-newRow" class="modification-button btn-add"><i class="icon-plus"></i></button></td>
</tr> </tr>
</table> </table>
@@ -170,10 +170,6 @@
</div> </div>
<div class="large-vertical-margin"> <div class="large-vertical-margin">
<div id="messagesTip" class="tip">
<h3>Message</h3>
<p>This is saved messages, with unique id.</p>
</div>
</div> </div>
<div class="large-vertical-margin"> <div class="large-vertical-margin">
<div id="httpStatusTip" class="tip"> <div id="httpStatusTip" class="tip">