Commit 00702993 authored by David Gonçalves's avatar David Gonçalves 📖

added jquery and fixed a few things

parent 9eb840f3
......@@ -14,15 +14,14 @@
<link rel="stylesheet" type="text/css" href="css/select.css">
<link rel="stylesheet" type="text/css" href="css/input.css">
<!-- <script type="text/javascript" src="js/FileSaver.js" ></script> -->
<script type="text/javascript" src="js/handleUpload.js"></script>
<script type="text/javascript" src="js/file.js"></script>
<script type="text/javascript" src="js/setting.js"></script>
<script type="text/javascript" src="js/File.js"></script>
<script type="text/javascript" src="js/Editor.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="fileSupport();">
<body>
<h1 id="title">HF - Online Story Editor</h1>
......@@ -34,7 +33,7 @@
<div id="fileDiv">
<label for="fileInput">Open .xml file:</label>
<br>
<input id="fileInput" type="file" onchange="if(openFile()) getDataFromFile();" autocomplete="off">
<input id="fileInput" type="file">
</div>
<output id="fileDetails"></output>
......@@ -42,15 +41,15 @@
<div id="toolbar">
<input type="submit" value="&#128269;" onclick="execFind();">
<input type="submit" value="&#128269;&#11154;" onclick="execFindReplace();">
<input type="submit" value="&#128269;" id="find">
<input type="submit" value="&#128269;&#11154;" id="findreplace">
<span id="fontsize" class="css3-selectbox">
<select id="fontsize_selector" onchange="changeFontSize();">
<select id="fontsize_selector">
<option value="">---Font size---</option>
<option value="10px">10px</option>
<option value="12px">12px</option>
<option value="14px">14px</option>
<option value="14px" selected>14px</option>
<option value="16px">16px</option>
<option value="18px">18px</option>
<option value="20px">20px</option>
......@@ -63,7 +62,7 @@
</span>
<span id="theme" class="css3-selectbox">
<select id="theme_selector" onchange="changeTheme();">
<select id="theme_selector">
<option value="">---Theme---</option>
<option value="ambiance">ambiance</option>
<option value="chaos">chaos</option>
......@@ -88,7 +87,7 @@
<option value="pastel_on_dark">pastel_on_dark</option>
<option value="solarized_dark">solarized_dark</option>
<option value="solarized_light">solarized_light</option>
<option value="sqlserver">sqlserver</option>
<option value="sqlserver" selected>sqlserver</option>
<option value="terminal">terminal</option>
<option value="textmate">textmate</option>
<option value="tomorrow">tomorrow</option>
......@@ -108,52 +107,12 @@
<div id="XMLCode"></div>
<script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="ace/mode-xml.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("XMLCode");//Get editor instance
changeFontSize();
sel = document.getElementById("theme_selector");
theme = sel.options[sel.selectedIndex].value;
if(!theme)
changeTheme("sqlserver");
editor.getSession().setMode("ace/mode/xml");
editor.commands.addCommand({
name: 'SaveAs',
bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
exec: function(editor) {
saveFile();
},
readOnly: true // false if this command should not apply in readOnly mode
});
editor.getSession().on('change', function(e) {
setLines();
});
editor.getSession().selection.on('changeCursor', function(e) {
setLines();
});
function setLines() {
var lines = editor.session.getLength();
var linecol = editor.selection.getCursor();
document.getElementById('lines').innerHTML =
'<strong>Ln:<\/strong> ' + (linecol.row+1) +
' <strong>Ch:<\/strong> ' + linecol.column +
' | <strong>Total Ln:<\/strong> ' + lines;
}
</script>
<!-- Editor - End -->
<output id="lines"></output>
<script>
setLines();
</script>
<input type="submit" value="Save as..." onclick="saveFile();" />
<input type="submit" value="Upload Story" onclick="if(getDataFromEditor()) uploadCode();"><br/>
<input type="submit" value="Save as..." id="save_as" />
<input type="submit" value="Generate EXE" id="generate_exe"><br/>
Replace story(1-7): <input type="number" id="storynum" value="1" /><br/>
Story name: <input type="text" id="storyname" />
</div>
......
"use strict";
class Editor {
constructor(ace) {
this.editor = ace.edit("XMLCode");//Get editor instance
// Set font size
Editor.changeFontSize();
// Set theme
let theme = $("#theme_selector").val();
if(!theme) {
this.changeTheme("sqlserver");
}
// Set mode
this.editor.getSession().setMode("ace/mode/xml");
// Set commads
this.editor.commands.addCommand({
name: 'SaveAs',
bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
exec: function(editor) {
File.saveFile();
},
readOnly: true // false if this command should not apply in readOnly mode
});
/**
* Events
*/
const that = this;
this.editor.getSession().on('change', function(e) {
that.setLines();
});
this.editor.getSession().selection.on('changeCursor', function(e) {
that.setLines();
});
$('#fontsize_selector').on('change', function(e) {
Editor.changeFontSize();
});
$('#theme_selector').on('change', function(e) {
that.changeTheme();
});
$('#find').on('click', function(e) {
that.execFind();
});
$('#findreplace').on('click', function(e) {
that.execFindReplace();
});
}
setLines() {
let lines = this.editor.session.getLength();
let linecol = this.editor.selection.getCursor();
$('#lines').html(`<strong>Ln:<\/strong> ${linecol.row+1}
<strong>Ch:<\/strong>${linecol.column} |
<strong>Total Ln:<\/strong> ${lines}`);
}
changeTheme(theme) {
if (!theme) {
theme = $("#theme_selector").val();
}
if (theme) {
let fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", "ace/theme-" + theme + ".js");
if (typeof fileref != "undefined") {
$("head").append(fileref);
}
this.editor.setTheme("ace/theme/" + theme); //Set theme
}
}
static changeFontSize(size) {
if (!size) {
size = $("#fontsize_selector").val();
}
if (size) {
$("#XMLCode").css("font-size", size);
}
}
execFind() {
this.editor.execCommand("find");
}
execFindReplace() {
this.editor.execCommand("replace");
}
}
"use strict";
// Access File System
const fs = require('fs');
// Execute external program
const {
spawn
} = require('child_process');
let file, data;
class File {
static fileSupport() {
// Check for the various File API support.
if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
alert('The File APIs are not fully supported in this browser.'); //FIXME - better alert for node
}
}
static getDataFromEditor() {
data = ace.edit("XMLCode").getValue();
if (!data) {
alert('Text area is empty.');
return false;
}
return true;
}
static saveFile() {
if (getDataFromEditor()) {
let fileName = "new.xml";
if (file && file.name) {
fileName = file.name;
}
fileName = prompt("Please enter the file name", fileName); // FIXME Doesn't work in nodejs
if (!fileName) return;
let blob = new Blob([data], {
type: 'text/xml'
});
fs.writeFile(fileName, blob, function(err) {
if (err) {
return alert(err); // TODO Decent alert
}
else {
alert("The file was saved!"); // TODO Decent alert
}
});
}
}
static openFile() {
let file_tmp = file;
file = $("#fileInput").prop('files')[0];
let fileName = escape(file.name);
let fileType = (file.type ? file.type : 'n/a');
let fileSize = file.size;
let lastModified = file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a';
if (file.name.substring(file.name.lastIndexOf(".")) != ".xml") {
file = file_tmp;
$("#fileInput").val("");
alert('XML file only.');
return false;
} else {
fileType = "text/xml";
}
document.getElementById('fileDetails').innerHTML =
'<strong>' + fileName + '</strong> (' + fileType + ') - ' +
fileSize + ' bytes, last modified: ' + lastModified;
return true;
}
static getDataFromFile() {
let reader = new FileReader();
reader.onload = function() {
data = reader.result;
let editor = ace.edit("XMLCode");
editor.setValue(data, -1);
editor.getSession().setUndoManager(new ace.UndoManager());
};
reader.readAsText(file);
}
static create_mod(filename) {
let story_ids = {
0: "234",
1: "219",
2: "398",
3: "226",
4: "299",
5: "305",
6: "454",
7: "170"
}
console.log(filename);
let target_dir = 'GenerateEXE/';
let target_file = `${target_dir}${filename}.xml`;
let target_file_story_list = `${target_dir}${filename}storylist.xml`;
let story_list = {
1:"First Match",
2:"Trap",
3:"Defeated",
4:"Break in",
5:"Prison break",
6:"Waken",
7:"Promises",
8:"Training",
9:"Betrayal",
10:"Death Match"
}
let story_number = document.getElementById("storynum").value;
let story_name = document.getElementById("storyname").value;
story_list[story_number] = story_name;
let storynumber = story_ids[story_number];
let storylistdata=`<storylist>
<story><storyid>story01</storyid><bgid>story01</bgid><storyname><en>1. ${story_list[1]}</en><b5>第一話 初戰</b5></storyname></story>
<story><storyid>story02</storyid><bgid>story02b</bgid><storyname><en>2. ${story_list[2]}</en><b5>第二話 陷阱</b5></storyname></story>
<story><storyid>story03</storyid><bgid>story03a</bgid><storyname><en>3. ${story_list[3]}</en><b5>第三話 潰敗</b5></storyname></story>
<story><storyid>story04</storyid><bgid>story04a</bgid><storyname><en>4. ${story_list[4]}</en><b5>第四話 潛入</b5></storyname></story>
<story><storyid>story05</storyid><bgid>prison2</bgid><storyname><en>5. ${story_list[5]}</en><b5>第五話 逃獄</b5></storyname></story>
<story><storyid>story06</storyid><bgid>story06c</bgid><storyname><en>6. ${story_list[6]}</en><b5>第六話 醒覺</b5></storyname></story>
<story><storyid>story07</storyid><bgid>desert</bgid><storyname><en>7. ${story_list[7]}</en><b5>第七話 約定</b5></storyname></story>
<story><storyid>story08</storyid><bgid>hill_grass</bgid><storyname><en>8. ${story_list[8]}</en><b5>第八話 特訓</b5></storyname></story>
<story><storyid>story09</storyid><bgid>forest_grass</bgid><storyname><en>9. ${story_list[9]}</en><b5>第九話 背叛</b5></storyname></story>
<story><storyid>story10</storyid><bgid>room1</bgid><storyname><en>10. ${story_list[10]}</en><b5>第十話 死戰</b5></storyname></story>
</storylist>
`;
let ffdec = spawn('java', ['-jar', `${__dirname}/ffdec/ffdec.jar`, '-replace', `${__dirname}/game/hf.swf`, `${__dirname}/${target_dir}${filename}.swf`, `${storynumber}`, `${__dirname}/${target_dir}${filename}.xml`, `${story_ids[0]}`, `${target_file_story_list}`]);
ffdec.stdout.on('data', (data) => {
console.log(`stdout: ${data}`);
});
ffdec.stderr.on('data', (data) => {
console.log(`stderr: ${data}`);
});
ffdec.on('close', (code) => {
console.log(`child process exited with code ${code}`);
});
// compression is missing -> repalce.sh 25
}
}
function saveFile() {
if (getDataFromEditor()) {
let fileName = "new.xml";
if (file && file.name) {
fileName = file.name;
}
fileName = prompt("Please enter the file name", fileName); // FIXME Doesn't work in nodejs
if (!fileName) return;
let blob = new Blob([data], {
type: 'text/xml'
});
fs.writeFile(fileName, blob, function(err) {
if (err) {
return alert(err); // TODO Decent alert
}
else {
alert("The file was saved!"); // TODO Decent alert
}
});
}
}
function openFile() {
file_tmp = file;
file = document.getElementById("fileInput").files[0];
let fileName = escape(file.name);
let fileType = (file.type ? file.type : 'n/a');
let fileSize = file.size;
let lastModified = file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a';
if (file.name.substring(file.name.lastIndexOf(".")) != ".xml") {
file = file_tmp;
document.getElementById("fileInput").value = "";
alert('XML file only.');
return false;
} else {
fileType = "text/xml";
}
document.getElementById('fileDetails').innerHTML =
'<strong>' + fileName + '</strong> (' + fileType + ') - ' +
fileSize + ' bytes, last modified: ' + lastModified;
return true;
}
function getDataFromFile() {
let reader = new FileReader();
reader.onload = function() {
data = reader.result;
let editor = ace.edit("XMLCode");
editor.setValue(data, -1);
editor.getSession().setUndoManager(new ace.UndoManager());
};
reader.readAsText(file);
}
function create_mod(filename) {
let story_ids = {
0: "234",
1: "219",
2: "398",
3: "226",
4: "299",
5: "305",
6: "454",
7: "170"
}
console.log(filename);
let target_dir = 'GenerateEXE/';
let target_file = `${target_dir}${filename}.xml`;
let target_file_story_list = `${target_dir}${filename}storylist.xml`;
let story_list = {
1:"First Match",
2:"Trap",
3:"Defeated",
4:"Break in",
5:"Prison break",
6:"Waken",
7:"Promises",
8:"Training",
9:"Betrayal",
10:"Death Match"
}
let story_number = document.getElementById("storynum").value;
let story_name = document.getElementById("storyname").value;
story_list[story_number] = story_name;
let storynumber = story_ids[story_number];
let storylistdata=`<storylist>
<story><storyid>story01</storyid><bgid>story01</bgid><storyname><en>1. ${story_list[1]}</en><b5>第一話 初戰</b5></storyname></story>
<story><storyid>story02</storyid><bgid>story02b</bgid><storyname><en>2. ${story_list[2]}</en><b5>第二話 陷阱</b5></storyname></story>
<story><storyid>story03</storyid><bgid>story03a</bgid><storyname><en>3. ${story_list[3]}</en><b5>第三話 潰敗</b5></storyname></story>
<story><storyid>story04</storyid><bgid>story04a</bgid><storyname><en>4. ${story_list[4]}</en><b5>第四話 潛入</b5></storyname></story>
<story><storyid>story05</storyid><bgid>prison2</bgid><storyname><en>5. ${story_list[5]}</en><b5>第五話 逃獄</b5></storyname></story>
<story><storyid>story06</storyid><bgid>story06c</bgid><storyname><en>6. ${story_list[6]}</en><b5>第六話 醒覺</b5></storyname></story>
<story><storyid>story07</storyid><bgid>desert</bgid><storyname><en>7. ${story_list[7]}</en><b5>第七話 約定</b5></storyname></story>
<story><storyid>story08</storyid><bgid>hill_grass</bgid><storyname><en>8. ${story_list[8]}</en><b5>第八話 特訓</b5></storyname></story>
<story><storyid>story09</storyid><bgid>forest_grass</bgid><storyname><en>9. ${story_list[9]}</en><b5>第九話 背叛</b5></storyname></story>
<story><storyid>story10</storyid><bgid>room1</bgid><storyname><en>10. ${story_list[10]}</en><b5>第十話 死戰</b5></storyname></story>
</storylist>
`;
let ffdec = spawn('java', ['-jar', `${__dirname}/ffdec/ffdec.jar`, '-replace', `${__dirname}/game/hf.swf`, `${__dirname}/${target_dir}${filename}.swf`, `${storynumber}`, `${__dirname}/${target_dir}${filename}.xml`, `${story_ids[0]}`, `${target_file_story_list}`]);
ffdec.stdout.on('data', (data) => {
console.log(`stdout: ${data}`);
});
ffdec.stderr.on('data', (data) => {
console.log(`stderr: ${data}`);
});
ffdec.on('close', (code) => {
console.log(`child process exited with code ${code}`);
});
// compression is missing -> repalce.sh 25
}
function getDataFromEditor() {
data = ace.edit("XMLCode").getValue();
"use strict";
if (!data) {
alert('Text area is empty.');
return false;
}
return true;
}
function uploadCode() {
function generateExe() {
// let http = new XMLHttpRequest();
// let url = "upload.php";
......
/*
* Import modules
*/
"use strict";
// Access File System
const fs = require('fs');
const $ = require('jquery');
// Execute external program
const {
spawn
} = require('child_process');
$(document).ready(function () {
let file, data;
// Check for API support
File.fileSupport();
function fileSupport() {
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
}
// Initialize editor
var editor = new Editor(ace);
editor.setLines();
function execFind() {
let editor = ace.edit("XMLCode");
editor.execCommand("find");
}
function execFindReplace() {
let editor = ace.edit("XMLCode");
editor.execCommand("replace");
}
// Events
$('#fileInput').on('change', function(e) {
if(File.openFile()) {
File.getDataFromFile();
}
});
$('#save_as').on('click', function(e) {
File.saveFile();
});
$('#generate_exe').on('click', function(e) {
if(getDataFromEditor()) {
generateExe();
}
});
});
function changeTheme(t) {
let sel, theme;
if (t) {
theme = t;
} else {
sel = document.getElementById("theme_selector");
theme = sel.options[sel.selectedIndex].value;
}
if (theme) {
let fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", "ace/theme-" + theme + ".js");
if (typeof fileref != "undefined") {
document.getElementsByTagName("head")[0].appendChild(fileref);
}
let editor = ace.edit("XMLCode"); //Get editor instance
editor.setTheme("ace/theme/" + theme); //Set theme
}
}
function changeFontSize(f) {
let sel, size;
if (f) {
size = f;
} else {
sel = document.getElementById("fontsize_selector");
size = sel.options[sel.selectedIndex].value;
}
if (size) {
document.getElementById("XMLCode").style.fontSize = size;
}
}
......@@ -552,6 +552,12 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true
},
"jquery": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
"dev": true
},
"jsbn": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
......
......@@ -23,7 +23,8 @@
},
"homepage": "https://gitlab.com/zlyfer/HF-Story-Editor#README",
"devDependencies": {
"electron": "^2.0.2"
"electron": "^2.0.2",
"jquery": "^3.3.1"
},
"dependencies": {}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment