demo: Show metadata on information icon click
This commit is contained in:
Daniel Jacobs
Mike Welsh
parent
75becaf3ba
commit
42cf08d578
|
|
@ -130,25 +130,48 @@ body {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
#stats {
|
||||
background: var(--ruffle-blue);
|
||||
box-shadow: 0 3px 6px 5px var(--ruffle-blue);
|
||||
color: white;
|
||||
height: 24px;
|
||||
padding: 10px;
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.floatright {
|
||||
.modal-content {
|
||||
background-color: #fff;
|
||||
margin: 15vh auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #666;
|
||||
width: 320px;
|
||||
height: 280px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
#stats {
|
||||
height: 36px;
|
||||
}
|
||||
.floatright {
|
||||
float: none;
|
||||
}
|
||||
#metadata {
|
||||
margin: 40px auto 0;
|
||||
}
|
||||
|
||||
#metadata td {
|
||||
padding: 2px 1px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
#metadata tr td:nth-child(1) {
|
||||
font-weight: bold;
|
||||
background-color: black;
|
||||
padding: 0 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
|
|
@ -177,7 +200,4 @@ body {
|
|||
#nav {
|
||||
flex-flow: column;
|
||||
}
|
||||
#stats {
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,13 +38,51 @@
|
|||
<span>Author: </span><a href="#" target="_blank" id="author"></a>
|
||||
</div>
|
||||
</div>
|
||||
 
|
||||
<svg width="20px" id="openModal" viewBox="0 0 416.979 416.979"><path fill="white" d="M356.004 61.156c-81.37-81.47-213.377-81.551-294.848-.182-81.47 81.371-81.552 213.379-.181 294.85 81.369 81.47 213.378 81.551 294.849.181 81.469-81.369 81.551-213.379.18-294.849zM237.6 340.786a5.821 5.821 0 0 1-5.822 5.822h-46.576a5.821 5.821 0 0 1-5.822-5.822V167.885a5.821 5.821 0 0 1 5.822-5.822h46.576a5.82 5.82 0 0 1 5.822 5.822v172.901zm-29.11-202.885c-18.618 0-33.766-15.146-33.766-33.765 0-18.617 15.147-33.766 33.766-33.766s33.766 15.148 33.766 33.766c0 18.619-15.149 33.765-33.766 33.765z"/></g></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main" aria-label="Select a demo or drag an SWF">
|
||||
<div id="overlay" class="hidden"></div>
|
||||
</div>
|
||||
<div id="stats">
|
||||
size: <span id="filesize">loading</span>, movie width: <span id="width">loading</span>, movie height: <span id="height">loading</span>, flash: <span id="flashversion">loading</span>, isActionScript3: <span id="asversion">loading</span> <span class="floatright">backgroundColor: <span id="backgroundColor">loading</span>, numFrames: <span id="numFrames">loading</span>, frameRate: <span id="frameRate">loading</span></span>
|
||||
<div id="metadataModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" id="closeModal">×</span>
|
||||
<table id="metadata">
|
||||
<tr>
|
||||
<td>SWF Version</td>
|
||||
<td><span class="metadata" id="swfVersion">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>FP Version</td>
|
||||
<td><span class="metadata" id="flashVersion">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ActionScript 3</td>
|
||||
<td><span class="metadata" id="isActionScript3">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total Frames</td>
|
||||
<td><span class="metadata" id="numFrames">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Frame Rate</td>
|
||||
<td><span class="metadata" id="frameRate">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SWF Width</td>
|
||||
<td><span class="metadata" id="width">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SWF Height</td>
|
||||
<td><span class="metadata" id="height">Loading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SWF Background Color</td>
|
||||
<td><input class="metadata" type="color" id="backgroundColor" disabled value="#FFFFFF"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@ const sampleFileInputContainer = document.getElementById(
|
|||
const localFileInput = document.getElementById("local-file");
|
||||
const sampleFileInput = document.getElementById("sample-swfs");
|
||||
const localFileName = document.getElementById("local-file-name");
|
||||
const closeModal = document.getElementById("closeModal");
|
||||
const openModal = document.getElementById("openModal");
|
||||
const metadataModal = document.getElementById("metadataModal");
|
||||
// prettier-ignore
|
||||
const optionGroups = {
|
||||
"Animation": document.getElementById("anim-optgroup"),
|
||||
|
|
@ -30,62 +33,58 @@ const defaultConfig = {
|
|||
};
|
||||
|
||||
const swfToFlashVersion = {
|
||||
1: "FP1",
|
||||
2: "FP2",
|
||||
3: "FP3",
|
||||
4: "FP4",
|
||||
5: "FP5",
|
||||
6: "FP6",
|
||||
7: "FP7",
|
||||
8: "FP8",
|
||||
9: "FP9.0",
|
||||
10: "FP10.0 or FP10.1",
|
||||
11: "FP10.2",
|
||||
12: "FP10.3",
|
||||
13: "FP11.0",
|
||||
14: "FP11.1",
|
||||
15: "FP11.2",
|
||||
16: "FP11.3",
|
||||
17: "FP11.4",
|
||||
18: "FP11.5",
|
||||
19: "FP11.6",
|
||||
20: "FP11.7",
|
||||
21: "FP11.8",
|
||||
22: "FP11.9",
|
||||
23: "FP12",
|
||||
24: "FP13",
|
||||
25: "FP14",
|
||||
26: "FP15",
|
||||
27: "FP16",
|
||||
28: "FP17",
|
||||
29: "FP18",
|
||||
30: "FP19",
|
||||
31: "FP20",
|
||||
32: "FP21",
|
||||
33: "FP22",
|
||||
34: "FP23",
|
||||
35: "FP24",
|
||||
36: "FP25",
|
||||
37: "FP26",
|
||||
38: "FP27",
|
||||
39: "FP28",
|
||||
40: "FP29",
|
||||
41: "FP30",
|
||||
42: "FP31",
|
||||
43: "FP32",
|
||||
}
|
||||
1: "1",
|
||||
2: "2",
|
||||
3: "3",
|
||||
4: "4",
|
||||
5: "5",
|
||||
6: "6",
|
||||
7: "7",
|
||||
8: "8",
|
||||
9: "9.0",
|
||||
10: "10.0/10.1",
|
||||
11: "10.2",
|
||||
12: "10.3",
|
||||
13: "11.0",
|
||||
14: "11.1",
|
||||
15: "11.2",
|
||||
16: "11.3",
|
||||
17: "11.4",
|
||||
18: "11.5",
|
||||
19: "11.6",
|
||||
20: "11.7",
|
||||
21: "11.8",
|
||||
22: "11.9",
|
||||
23: "12",
|
||||
24: "13",
|
||||
25: "14",
|
||||
26: "15",
|
||||
27: "16",
|
||||
28: "17",
|
||||
29: "18",
|
||||
30: "19",
|
||||
31: "20",
|
||||
32: "21",
|
||||
33: "22",
|
||||
34: "23",
|
||||
35: "24",
|
||||
36: "25",
|
||||
37: "26",
|
||||
38: "27",
|
||||
39: "28",
|
||||
40: "29",
|
||||
41: "30",
|
||||
42: "31",
|
||||
43: "32",
|
||||
};
|
||||
|
||||
function unload() {
|
||||
if (player) {
|
||||
player.remove();
|
||||
document.getElementById("flashversion").textContent = "loading";
|
||||
document.getElementById("asversion").textContent = "loading";
|
||||
document.getElementById("frameRate").textContent = "loading";
|
||||
document.getElementById("filesize").textContent = "loading";
|
||||
document.getElementById("width").textContent = "loading";
|
||||
document.getElementById("height").textContent = "loading";
|
||||
document.getElementById("numFrames").textContent = "loading";
|
||||
document.getElementById("backgroundColor").textContent = "loading";
|
||||
document.querySelectorAll("span.metadata").forEach((el) => {
|
||||
el.textContent = "Loading";
|
||||
});
|
||||
document.getElementById("backgroundColor").value = "#FFFFFF";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -95,31 +94,24 @@ function load(options) {
|
|||
player.id = "player";
|
||||
main.append(player);
|
||||
player.load(options);
|
||||
player.addEventListener("loadedmetadata", function() {
|
||||
player.addEventListener("loadedmetadata", function () {
|
||||
if (this.metadata) {
|
||||
if (this.metadata.swfVersion) {
|
||||
document.getElementById("flashversion").textContent = swfToFlashVersion[this.metadata.swfVersion];
|
||||
}
|
||||
if (this.metadata.isActionScript3) {
|
||||
document.getElementById("asversion").textContent = "yes";
|
||||
Object.keys(this.metadata).forEach((el) => {
|
||||
const metadataElement = document.getElementById(el);
|
||||
if (metadataElement) {
|
||||
if (el === "backgroundColor") {
|
||||
metadataElement.value = this.metadata[el] ?? "#FFFFFF";
|
||||
} else {
|
||||
document.getElementById("asversion").textContent = "no";
|
||||
if (el === "swfVersion") {
|
||||
document.getElementById(
|
||||
"flashVersion"
|
||||
).textContent =
|
||||
swfToFlashVersion[this.metadata[el]];
|
||||
}
|
||||
if (this.metadata.frameRate) {
|
||||
document.getElementById("frameRate").textContent = `${this.metadata.frameRate} FPS`;
|
||||
metadataElement.textContent = this.metadata[el] ?? "?";
|
||||
}
|
||||
if (this.metadata.width) {
|
||||
document.getElementById("width").textContent = `${this.metadata.width}px`;
|
||||
}
|
||||
if (this.metadata.height) {
|
||||
document.getElementById("height").textContent = `${this.metadata.height}px`;
|
||||
}
|
||||
if (this.metadata.numFrames) {
|
||||
document.getElementById("numFrames").textContent = this.metadata.numFrames;
|
||||
}
|
||||
if (this.metadata.backgroundColor) {
|
||||
document.getElementById("backgroundColor").textContent = this.metadata.backgroundColor;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -148,27 +140,12 @@ async function loadFile(file) {
|
|||
hideSample();
|
||||
const data = await new Response(file).arrayBuffer();
|
||||
load({ data, ...defaultConfig });
|
||||
if (file.size) {
|
||||
document.getElementById("filesize").textContent = `${Math.round(file.size/1024)}Kb`;
|
||||
}
|
||||
}
|
||||
|
||||
function getFileSize(url, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("HEAD", url, true);
|
||||
xhr.onreadystatechange = function() {
|
||||
if (this.readyState == this.DONE) {
|
||||
document.getElementById("filesize").textContent = `${Math.round(parseInt(xhr.getResponseHeader("Content-Length"))/1024)}Kb`;
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
function loadSample() {
|
||||
const swfData = sampleFileInput[sampleFileInput.selectedIndex].swfData;
|
||||
localFileName.textContent = "No file selected.";
|
||||
if (swfData) {
|
||||
getFileSize(swfData.location);
|
||||
showSample(swfData);
|
||||
const config = swfData.config || defaultConfig;
|
||||
load({ url: swfData.location, ...config });
|
||||
|
|
@ -223,6 +200,14 @@ localFileInput.addEventListener("drop", (event) => {
|
|||
loadFile(event.dataTransfer.files[0]);
|
||||
});
|
||||
|
||||
closeModal.addEventListener("click", () => {
|
||||
metadataModal.style.display = "none";
|
||||
});
|
||||
|
||||
openModal.addEventListener("click", () => {
|
||||
metadataModal.style.display = "block";
|
||||
});
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
if (
|
||||
navigator.userAgent.match(/iPad/i) ||
|
||||
|
|
@ -233,6 +218,12 @@ window.addEventListener("load", () => {
|
|||
overlay.classList.remove("hidden");
|
||||
});
|
||||
|
||||
window.onclick = (event) => {
|
||||
if (event.target === metadataModal) {
|
||||
metadataModal.style.display = "none";
|
||||
}
|
||||
};
|
||||
|
||||
(async () => {
|
||||
const response = await fetch("swfs.json");
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue