mirror of
https://github.com/gchq/CyberChef.git
synced 2025-04-25 01:06:16 -04:00
File details are now displayed in a side panel and the input is still editable
This commit is contained in:
n1474335
parent
e93aa42697
commit
16b79e32f6
6 changed files with 500 additions and 166 deletions
134
src/web/utils/fileDetails.mjs
Normal file
134
src/web/utils/fileDetails.mjs
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
/**
|
||||
* @author n1474335 [n1474335@gmail.com]
|
||||
* @copyright Crown Copyright 2022
|
||||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
import {showSidePanel} from "./sidePanel.mjs";
|
||||
import Utils from "../../core/Utils.mjs";
|
||||
import {isImage} from "../../core/lib/FileType.mjs";
|
||||
|
||||
/**
|
||||
* A File Details extension for CodeMirror
|
||||
*/
|
||||
class FileDetailsPanel {
|
||||
|
||||
/**
|
||||
* FileDetailsPanel constructor
|
||||
* @param {Object} opts
|
||||
*/
|
||||
constructor(opts) {
|
||||
this.fileDetails = opts.fileDetails;
|
||||
this.progress = opts.progress;
|
||||
this.status = opts.status;
|
||||
this.buffer = opts.buffer;
|
||||
this.renderPreview = opts.renderPreview;
|
||||
this.dom = this.buildDOM();
|
||||
this.renderFileThumb();
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds the file details DOM tree
|
||||
* @returns {DOMNode}
|
||||
*/
|
||||
buildDOM() {
|
||||
const dom = document.createElement("div");
|
||||
|
||||
dom.className = "cm-file-details";
|
||||
const fileThumb = require("../static/images/file-128x128.png");
|
||||
dom.innerHTML = `
|
||||
<p class="file-details-heading">File details</p>
|
||||
<img aria-hidden="true" src="${fileThumb}" alt="File icon" class="file-details-thumbnail"/>
|
||||
<table class="file-details-data">
|
||||
<tr>
|
||||
<td>Name:</td>
|
||||
<td class="file-details-name" title="${Utils.escapeHtml(this.fileDetails.name)}">
|
||||
${Utils.escapeHtml(this.fileDetails.name)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Size:</td>
|
||||
<td class="file-details-size" title="${Utils.escapeHtml(this.fileDetails.size)} bytes">
|
||||
${Utils.escapeHtml(this.fileDetails.size)} bytes
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Type:</td>
|
||||
<td class="file-details-type" title="${Utils.escapeHtml(this.fileDetails.type)}">
|
||||
${Utils.escapeHtml(this.fileDetails.type)}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Loaded:</td>
|
||||
<td class="file-details-${this.status === "error" ? "error" : "loaded"}">
|
||||
${this.status === "error" ? "Error" : this.progress + "%"}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
`;
|
||||
|
||||
return dom;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the file thumbnail
|
||||
*/
|
||||
renderFileThumb() {
|
||||
if (!this.renderPreview) {
|
||||
this.resetFileThumb();
|
||||
return;
|
||||
}
|
||||
const fileThumb = this.dom.querySelector(".file-details-thumbnail");
|
||||
const fileType = this.dom.querySelector(".file-details-type");
|
||||
const fileBuffer = new Uint8Array(this.buffer);
|
||||
const type = isImage(fileBuffer);
|
||||
|
||||
if (type && type !== "image/tiff" && fileBuffer.byteLength <= 512000) {
|
||||
// Most browsers don't support displaying TIFFs, so ignore them
|
||||
// Don't render images over 512,000 bytes
|
||||
const blob = new Blob([fileBuffer], {type: type}),
|
||||
url = URL.createObjectURL(blob);
|
||||
fileThumb.src = url;
|
||||
} else {
|
||||
this.resetFileThumb();
|
||||
}
|
||||
fileType.textContent = type;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the file thumbnail to the default icon
|
||||
*/
|
||||
resetFileThumb() {
|
||||
const fileThumb = this.dom.querySelector(".file-details-thumbnail");
|
||||
fileThumb.src = require("../static/images/file-128x128.png");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* A panel constructor factory building a panel that displays file details
|
||||
* @param {Object} opts
|
||||
* @returns {Function<PanelConstructor>}
|
||||
*/
|
||||
function makePanel(opts) {
|
||||
const fdPanel = new FileDetailsPanel(opts);
|
||||
|
||||
return (view) => {
|
||||
return {
|
||||
dom: fdPanel.dom,
|
||||
width: 200,
|
||||
update(update) {
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* A function that build the extension that enables the panel in an editor.
|
||||
* @param {Object} opts
|
||||
* @returns {Extension}
|
||||
*/
|
||||
export function fileDetailsPanel(opts) {
|
||||
const panelMaker = makePanel(opts);
|
||||
return showSidePanel.of(panelMaker);
|
||||
}
|
||||
254
src/web/utils/sidePanel.mjs
Normal file
254
src/web/utils/sidePanel.mjs
Normal file
|
|
@ -0,0 +1,254 @@
|
|||
/**
|
||||
* A modification of the CodeMirror Panel extension to enable panels to the
|
||||
* left and right of the editor.
|
||||
* Based on code here: https://github.com/codemirror/view/blob/main/src/panel.ts
|
||||
*
|
||||
* @author n1474335 [n1474335@gmail.com]
|
||||
* @copyright Crown Copyright 2022
|
||||
* @license Apache-2.0
|
||||
*/
|
||||
|
||||
import {EditorView, ViewPlugin} from "@codemirror/view";
|
||||
import {Facet} from "@codemirror/state";
|
||||
|
||||
const panelConfig = Facet.define({
|
||||
combine(configs) {
|
||||
let leftContainer, rightContainer;
|
||||
for (const c of configs) {
|
||||
leftContainer = leftContainer || c.leftContainer;
|
||||
rightContainer = rightContainer || c.rightContainer;
|
||||
}
|
||||
return {leftContainer, rightContainer};
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Configures the panel-managing extension.
|
||||
* @param {PanelConfig} config
|
||||
* @returns Extension
|
||||
*/
|
||||
export function panels(config) {
|
||||
return config ? [panelConfig.of(config)] : [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the active panel created by the given constructor, if any.
|
||||
* This can be useful when you need access to your panels' DOM
|
||||
* structure.
|
||||
* @param {EditorView} view
|
||||
* @param {PanelConstructor} panel
|
||||
* @returns {Panel}
|
||||
*/
|
||||
export function getPanel(view, panel) {
|
||||
const plugin = view.plugin(panelPlugin);
|
||||
const index = plugin ? plugin.specs.indexOf(panel) : -1;
|
||||
return index > -1 ? plugin.panels[index] : null;
|
||||
}
|
||||
|
||||
const panelPlugin = ViewPlugin.fromClass(class {
|
||||
|
||||
/**
|
||||
* @param {EditorView} view
|
||||
*/
|
||||
constructor(view) {
|
||||
this.input = view.state.facet(showSidePanel);
|
||||
this.specs = this.input.filter(s => s);
|
||||
this.panels = this.specs.map(spec => spec(view));
|
||||
const conf = view.state.facet(panelConfig);
|
||||
this.left = new PanelGroup(view, true, conf.leftContainer);
|
||||
this.right = new PanelGroup(view, false, conf.rightContainer);
|
||||
this.left.sync(this.panels.filter(p => p.left));
|
||||
this.right.sync(this.panels.filter(p => !p.left));
|
||||
for (const p of this.panels) {
|
||||
p.dom.classList.add("cm-panel");
|
||||
if (p.mount) p.mount();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {ViewUpdate} update
|
||||
*/
|
||||
update(update) {
|
||||
const conf = update.state.facet(panelConfig);
|
||||
if (this.left.container !== conf.leftContainer) {
|
||||
this.left.sync([]);
|
||||
this.left = new PanelGroup(update.view, true, conf.leftContainer);
|
||||
}
|
||||
if (this.right.container !== conf.rightContainer) {
|
||||
this.right.sync([]);
|
||||
this.right = new PanelGroup(update.view, false, conf.rightContainer);
|
||||
}
|
||||
this.left.syncClasses();
|
||||
this.right.syncClasses();
|
||||
const input = update.state.facet(showSidePanel);
|
||||
if (input !== this.input) {
|
||||
const specs = input.filter(x => x);
|
||||
const panels = [], left = [], right = [], mount = [];
|
||||
for (const spec of specs) {
|
||||
const known = this.specs.indexOf(spec);
|
||||
let panel;
|
||||
if (known < 0) {
|
||||
panel = spec(update.view);
|
||||
mount.push(panel);
|
||||
} else {
|
||||
panel = this.panels[known];
|
||||
if (panel.update) panel.update(update);
|
||||
}
|
||||
panels.push(panel)
|
||||
;(panel.left ? left : right).push(panel);
|
||||
}
|
||||
this.specs = specs;
|
||||
this.panels = panels;
|
||||
this.left.sync(left);
|
||||
this.right.sync(right);
|
||||
for (const p of mount) {
|
||||
p.dom.classList.add("cm-panel");
|
||||
if (p.mount) p.mount();
|
||||
}
|
||||
} else {
|
||||
for (const p of this.panels) if (p.update) p.update(update);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy panel
|
||||
*/
|
||||
destroy() {
|
||||
this.left.sync([]);
|
||||
this.right.sync([]);
|
||||
}
|
||||
}, {
|
||||
// provide: PluginField.scrollMargins.from(value => ({left: value.left.scrollMargin(), right: value.right.scrollMargin()}))
|
||||
});
|
||||
|
||||
/**
|
||||
* PanelGroup
|
||||
*/
|
||||
class PanelGroup {
|
||||
|
||||
/**
|
||||
* @param {EditorView} view
|
||||
* @param {boolean} left
|
||||
* @param {HTMLElement} container
|
||||
*/
|
||||
constructor(view, left, container) {
|
||||
this.view = view;
|
||||
this.left = left;
|
||||
this.container = container;
|
||||
this.dom = undefined;
|
||||
this.classes = "";
|
||||
this.panels = [];
|
||||
this.bufferWidth = 0;
|
||||
this.syncClasses();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Panel[]} panels
|
||||
*/
|
||||
sync(panels) {
|
||||
for (const p of this.panels) if (p.destroy && panels.indexOf(p) < 0) p.destroy();
|
||||
this.panels = panels;
|
||||
this.syncDOM();
|
||||
}
|
||||
|
||||
/**
|
||||
* Synchronise the DOM
|
||||
*/
|
||||
syncDOM() {
|
||||
if (this.panels.length === 0) {
|
||||
if (this.dom) {
|
||||
this.dom.remove();
|
||||
this.dom = undefined;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const parent = this.container || this.view.dom;
|
||||
if (!this.dom) {
|
||||
this.dom = document.createElement("div");
|
||||
this.dom.className = this.left ? "cm-side-panels cm-panels-left" : "cm-side-panels cm-panels-right";
|
||||
parent.insertBefore(this.dom, parent.firstChild);
|
||||
}
|
||||
|
||||
let curDOM = this.dom.firstChild;
|
||||
for (const panel of this.panels) {
|
||||
if (panel.dom.parentNode === this.dom) {
|
||||
while (curDOM !== panel.dom) curDOM = rm(curDOM);
|
||||
curDOM = curDOM.nextSibling;
|
||||
} else {
|
||||
this.dom.insertBefore(panel.dom, curDOM);
|
||||
this.bufferWidth = panel.width;
|
||||
panel.dom.style.width = panel.width + "px";
|
||||
this.dom.style.width = this.bufferWidth + "px";
|
||||
}
|
||||
}
|
||||
while (curDOM) curDOM = rm(curDOM);
|
||||
|
||||
const margin = this.left ? "marginLeft" : "marginRight";
|
||||
parent.querySelector(".cm-scroller").style[margin] = this.bufferWidth + "px";
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
scrollMargin() {
|
||||
return !this.dom || this.container ? 0 :
|
||||
Math.max(0, this.left ?
|
||||
this.dom.getBoundingClientRect().right - Math.max(0, this.view.scrollDOM.getBoundingClientRect().left) :
|
||||
Math.min(innerHeight, this.view.scrollDOM.getBoundingClientRect().right) - this.dom.getBoundingClientRect().left);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
syncClasses() {
|
||||
if (!this.container || this.classes === this.view.themeClasses) return;
|
||||
for (const cls of this.classes.split(" ")) if (cls) this.container.classList.remove(cls);
|
||||
for (const cls of (this.classes = this.view.themeClasses).split(" ")) if (cls) this.container.classList.add(cls);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {ChildNode} node
|
||||
* @returns HTMLElement
|
||||
*/
|
||||
function rm(node) {
|
||||
const next = node.nextSibling;
|
||||
node.remove();
|
||||
return next;
|
||||
}
|
||||
|
||||
const baseTheme = EditorView.baseTheme({
|
||||
".cm-side-panels": {
|
||||
boxSizing: "border-box",
|
||||
position: "absolute",
|
||||
height: "100%",
|
||||
top: 0,
|
||||
bottom: 0
|
||||
},
|
||||
"&light .cm-side-panels": {
|
||||
backgroundColor: "#f5f5f5",
|
||||
color: "black"
|
||||
},
|
||||
"&light .cm-panels-left": {
|
||||
borderRight: "1px solid #ddd",
|
||||
left: 0
|
||||
},
|
||||
"&light .cm-panels-right": {
|
||||
borderLeft: "1px solid #ddd",
|
||||
right: 0
|
||||
},
|
||||
"&dark .cm-side-panels": {
|
||||
backgroundColor: "#333338",
|
||||
color: "white"
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Opening a panel is done by providing a constructor function for
|
||||
* the panel through this facet. (The panel is closed again when its
|
||||
* constructor is no longer provided.) Values of `null` are ignored.
|
||||
*/
|
||||
export const showSidePanel = Facet.define({
|
||||
enables: [panelPlugin, baseTheme]
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue