Mirror
/
CyberChef
mirror of https://github.com/gchq/CyberChef.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added old loading icon back for initial page load.

This commit is contained in:
n1474335 2019-01-16 12:29:34 +00:00 committed by s2224834
parent 02b9dbdee9
commit 87e956fe7d
7 changed files with 69 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/web/App.mjs
View File

@ -124,6 +124,9 @@ class App {
// Reset attemptHighlight flag
this.options.attemptHighlight = true;
// Remove all current indicators
this.manager.recipe.updateBreakpointIndicator(false);
this.manager.worker.bake(
this.getInput(), // The user's input
this.getRecipeConfig(), // The configuration of the recipe

13
src/web/OutputWaiter.mjs
View File

@ -334,12 +334,11 @@ class OutputWaiter {
/**
* Save bombe object before it is removed so that it can be used later
* Save bombe object then remove it from the DOM so that it does not cause performance issues.
*/
saveBombe() {
this.bombeEl = document.getElementById("bombe").cloneNode();
this.bombeEl.setAttribute("width", "100%");
this.bombeEl.setAttribute("height", "100%");
this.bombeEl = document.getElementById("bombe");
this.bombeEl.parentNode.removeChild(this.bombeEl);
}
@ -358,7 +357,7 @@ class OutputWaiter {
const outputLoader = document.getElementById("output-loader"),
outputElement = document.getElementById("output-text"),
loader = outputLoader.querySelector(".loader");
animation = document.getElementById("output-loader-animation");
if (value) {
this.manager.controls.hideStaleIndicator();
@ -366,7 +365,7 @@ class OutputWaiter {
// Start a timer to add the Bombe to the DOM just before we make it
// visible so that there is no stuttering
this.appendBombeTimeout = setTimeout(function() {
loader.appendChild(this.bombeEl);
animation.appendChild(this.bombeEl);
}.bind(this), 150);
// Show the loading screen
@ -380,7 +379,7 @@ class OutputWaiter {
// Remove the Bombe from the DOM to save resources
this.outputLoaderTimeout = setTimeout(function () {
try {
loader.removeChild(this.bombeEl);
animation.removeChild(this.bombeEl);
} catch (err) {}
}.bind(this), 500);
outputElement.disabled = false;

3
src/web/RecipeWaiter.mjs
View File

@ -340,10 +340,11 @@ class RecipeWaiter {
/**
* Moves or removes the breakpoint indicator in the recipe based on the position.
*
* @param {number} position
* @param {number|boolean} position - If boolean, turn off all indicators
*/
updateBreakpointIndicator(position) {
const operations = document.querySelectorAll("#rec-list li.operation");
if (typeof position === "boolean") position = operations.length;
for (let i = 0; i < operations.length; i++) {
if (i === position) {
operations[i].classList.add("break");

8
src/web/html/index.html
View File

@ -142,9 +142,7 @@
<body>
<!-- Preloader overlay -->
<div id="loader-wrapper">
<div id="preloader" class="loader">
<object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="400"></object>
</div>
<div id="preloader" class="loader"></div>
<div id="preloader-msg" class="loading-msg"></div>
<div id="preloader-error" class="loading-error"></div>
</div>
@ -321,7 +319,9 @@
</div>
</div>
<div id="output-loader">
<div class="loader"></div>
<div id="output-loader-animation">
<object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%"></object>
</div>
<div class="loading-msg"></div>
</div>
</div>

4
src/web/static/images/bombe.svg
View File

@ -56,13 +56,13 @@
</script>
<style>
.row0 {--primary-color: #e5d41b;}
.row1 {--primary-color: #BE1E2D;}
.row1 {--primary-color: #be1e2d;}
.row2 {--primary-color: #337f24;}
</style>
<symbol id="rotor">
<g transform="scale(0.1)">
<circle id="casing" class="ring-color" style="fill: var(--primary-color, #BE1E2D)" cx="692" cy="674" r="505"/>
<circle id="casing" class="ring-color" style="fill: var(--primary-color, #be1e2d)" cx="692" cy="674" r="505"/>
<circle id="alphabet-ring" fill="#7a5340" cx="692" cy="674" r="477"/>
<circle id="face" fill="#412612" cx="692" cy="674" r="412"/>
<circle id="plate" fill="#F1F2F2" cx="692" cy="674" r="185"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

6
src/web/stylesheets/layout/_io.css
View File

@ -80,11 +80,13 @@
transition: all 0.5s ease;
}
#output-loader .loader {
#output-loader-animation {
display: block;
position: absolute;
width: 60%;
height: 60%;
left: unset;
top: 10%;
transition: all 0.5s ease;
}
#output-loader .loading-msg {

58
src/web/stylesheets/preloader.css
View File

@ -16,25 +16,54 @@
background-color: var(--secondary-border-colour);
}
#loader-wrapper div {
animation: fadeIn 1s ease-in 0s;
}
.loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 3px solid transparent;
border-top-color: #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
}
.loader:before,
.loader:after {
content: "";
position: absolute;
left: calc(50% - 200px);
top: calc(50% - 160px);
width: 400px;
height: 260px;
border: 3px solid transparent;
border-radius: 50%;
}
.loader:before {
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-top-color: #e74c3c;
animation: spin 3s linear infinite;
}
.loader:after {
top: 13px;
left: 13px;
right: 13px;
bottom: 13px;
border-top-color: #f9c922;
animation: spin 1.5s linear infinite;
}
.loading-msg {
display: block;
position: absolute;
position: relative;
width: 400px;
left: calc(50% - 200px);
top: calc(50% + 110px);
top: calc(50% + 50px);
text-align: center;
opacity: 0;
font-size: 18px;
@ -116,6 +145,15 @@
/* Animations */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes bump {
from {
opacity: 0;