Add .gitignore; move old javascript editor thing out of the way

- prepare for python editor
This commit is contained in:
Howland Owl 2020-04-09 14:12:24 +03:00
parent 10bc3e132e
commit d7c908a033
8 changed files with 179 additions and 0 deletions

4
editor-old-js/jquery-2.1.0.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

7
editor-old-js/jquery-ui.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,98 @@
label, input, textarea{
display: block;
}
input, textarea {
width: 90%;
}
textarea {
height: 8em;
}
.colorbox {
border: 0;
padding: 0;
height: 2em;
}
pre {
font-family: 'TopazPlus a500a1000a2000','mOsOul',Monaco,monospace;
font-size: 16;
border: 2px inset #808080;
}
label {
font-size: 10;
}
div ul li{
list-style-type: none
}
#list {
border: 1px solid black;
}
#formica {
font-size: medium;
}
.entry {
margin: 0 3px 3px 3px;
padding: 0.4em;
padding-left: 1.5em;
width: 95%;
height: 18px;
border: 2px outset rgb(255,228,196);
background-color: rgb(245,245,220);
}
.righty {
float: right;
}
.entry span {
display: inline-block;
}
# this does not actually change anything because the design is set by
# the jquery-ui bit. Altering in the script does work. Here for reference.
.45box {
width: 45%;
display: inline-block;
}
div.groupbox p {
margin: .25 ex;
}
#dumparea {
position: absolute;
top: 1em;
padding: 1em;
margin: 1em;
width: 90%;
height: 90%;
background: floralwhite;
border: inset 2px royalblue;
}
#sahlioutput {
font-family: 'TopazPlus a500a1000a2000','mOsOul',Monaco,monospace;
font-size: 16;
background: aliceblue;
overflow-wrap: break-word;
word-wrap: break-word;
width: 100%;
height: 95%;
padding: 1ex;
border: inset 2px royalblue;
}
#closespan {
float: right;
margin: 0px 0px 1ex;
padding: 0px;
}

481
editor-old-js/sahliedit.js Normal file
View file

@ -0,0 +1,481 @@
// Generated by CoffeeScript 1.11.0
(function() {
var Sahli, ansiorascii, arraytocolor, booltoint, colorindex, colortoarray, colortoname, dec2hex, dumpjson, emptyfiledef, getfilelist, hex2dec, inttobool, loadsahli, newsahli, resolvefiletype, sahlicolor, statustobool;
$(function() {
return $("h1").hide().slideDown(500);
});
$(function() {
return $("#newsahli").button({
disabled: false
}).click(function() {
return newsahli();
});
});
$(function() {
return $("#loadsahli").button({
disabled: false
}).click(function() {
return loadsahli();
});
});
$(function() {
$(".hidden").hide();
$("#entryamiga").button({
icons: {
primary: "ui-icon-gear"
}
}).click(function() {
var stuff;
stuff = $(this).children();
if (this.value === "1") {
stuff[1].textContent = 'Ansi';
return this.value = "0";
} else {
stuff[1].textContent = 'Ascii';
return this.value = "1";
}
});
$(".45box").css({
width: '45%',
display: 'inline-block'
});
$(".groupbox p").css({
margin: "0 0 .25em 0"
});
$(".colorbox").change((function(_this) {
return function() {
return sahlicolor();
};
})(this));
$("#entryfilepick").change(function() {
if (this.files[0] != null) {
return $("#entryfile").val(this.files[0].name);
}
});
return $("#entryfile").click(function() {
return $("#entryfilepick").click();
});
});
emptyfiledef = (function() {
function emptyfiledef() {
this.file = "";
this.name = "";
this.amiga = true;
this.filetype = 'plain';
this.width = "";
this.author = "";
this.font = "Propaz";
this.color = [255, 255, 255, 255];
this.bg = [0, 0, 0, 0];
this.line1 = "";
this.line2 = "";
this.text = "";
}
return emptyfiledef;
})();
Sahli = (function() {
function Sahli() {
this.emptyfiledef = new emptyfiledef;
this.emptyslidesdef = {
"background": "",
"template": "",
"css": ""
};
this.empty = {
"location": "",
"slides": this.emptyslidesdef,
"filedata": []
};
}
Sahli.prototype.loader = function() {
return $.ajax({
url: '../list.sahli',
dataType: "json",
success: (function(_this) {
return function(result) {
_this.data = result;
return _this.edit();
};
})(this)
});
};
Sahli.prototype.edit = function() {
$('#buttonbox').hide();
$('#dirlocation').change((function(_this) {
return function(event) {
return _this.data.location = event.target.value;
};
})(this));
$('#listsave').button({
icons: {
primary: "ui-icon-disk"
}
}).click((function(_this) {
return function() {
$('#sahlioutput').text(dumpjson(_this.data));
$('#dumparea').show(100);
return console.log(dumpjson(_this.data));
};
})(this));
$('#listlist').button({
icons: {
primary: "ui-icon-folder-open"
}
}).click(function() {
return getfilelist();
});
$('#listappend').button({
icons: {
primary: "ui-icon-1-n"
}
}).click((function(_this) {
return function(event) {
var newentry;
newentry = new emptyfiledef;
_this.data.filedata.push(newentry);
return _this.buildlist(_this.data);
};
})(this));
$('#listdisplay').button({
icons: {
primary: "ui-icon-refresh"
}
}).click((function(_this) {
return function() {
return _this.buildlist(_this.data);
};
})(this));
$('#closespan').click(function() {
$(this.parentElement.parentElement).hide();
return $('#sahlioutput').text('');
});
return this.buildlist(this.data);
};
Sahli.prototype.buildlist = function(data) {
var i, item, j, k, len, len1, ref, ref1, x;
$('#list').show(100);
$('#list ol li').remove();
ref = this.data.filedata;
for (j = 0, len = ref.length; j < len; j++) {
i = ref[j];
console.log(i.author);
}
x = 0;
$('#dirlocation').val(this.data.location);
ref1 = this.data.filedata;
for (k = 0, len1 = ref1.length; k < len1; k++) {
item = ref1[k];
$('#sortlist').append(this.additem(item, x++));
}
return $('#sortlist').sortable({
start: function(event, ui) {
return ui.item.data({
startpos: ui.item.index()
});
},
stop: (function(_this) {
return function(event, ui) {
var e, l, len2, name, ref2, s;
s = ui.item.data().startpos;
e = ui.item.index();
_this.data.filedata = _this.rearrangearray(s, e, _this.data.filedata);
ref2 = _this.data.filedata;
for (l = 0, len2 = ref2.length; l < len2; l++) {
name = ref2[l];
console.log(name.author, name.name, name.file);
}
console.log('---');
return _this.buildlist(_this.data);
};
})(this)
});
};
Sahli.prototype.rearrangearray = function(startpos, endpos, a) {
var alen, moving, tarr;
moving = a[startpos];
alen = a.length;
tarr = a.slice(0, startpos).concat(a.slice(startpos + 1));
return tarr.slice(0, endpos).concat([moving].concat(tarr.slice(endpos)));
};
Sahli.prototype.additem = function(item, pos) {
var entry;
entry = this.genentryline(item, pos);
return entry.dblclick((function(_this) {
return function() {
return _this.editline(item, pos);
};
})(this));
};
Sahli.prototype.genentryline = function(item, pos) {
var amigastatus, arrows, delbutton, entry;
arrows = "<span class='ui-icon ui-icon-arrowthick-2-n-s'></span>";
amigastatus = ansiorascii(booltoint(item.amiga));
delbutton = $("<span class='righty' id=del-" + pos + ">delete</span>").click((function(_this) {
return function(event) {
pos = event.currentTarget.id.replace("del-", "");
_this.data.filedata.splice(pos, 1);
return _this.buildlist(_this.data);
};
})(this));
entry = $("<li class='entry' id='" + item.file + "'>" + arrows + amigastatus + " | " + item.author + " : " + item.name + " : " + item.file + "</li>");
return entry.append(delbutton);
};
Sahli.prototype.save = function() {
var entry, pos;
pos = $("#entryindex").val();
entry = this.data.filedata[pos];
entry.name = $("#entryname").val();
entry.author = $("#entryauthor").val();
entry.amiga = statustobool($("#entryamiga").children()[1].textContent);
console.log($("#entryamiga").children()[1].textContent, entry.amiga, entry.author);
entry.color = colortoarray($("#entrycolor").val());
entry.bg = colortoarray($("#entrybg").val());
entry.width = $("#entrywidth").val();
entry.line1 = $("#entryline1").val();
entry.line2 = $("#entryline2").val();
entry.text = $("#entrytext").val();
entry.file = $("#entryfile").val();
entry.filetype = $("#entryfiletype").val();
return this.buildlist(this.data);
};
Sahli.prototype.editline = function(data, pos) {
var bcol, fcol;
$("#formica").dialog({
width: '800',
modal: false,
title: "Entry " + data.file + " ",
buttons: [
{
text: "Cancel",
icons: {
primary: 'ui-icon-trash'
},
click: function() {
return $(this).dialog("close");
}
}, {
text: "Save",
icons: {
primary: 'ui-icon-disk'
},
click: (function(_this) {
return function(event) {
event.preventDefault();
_this.save();
return event.currentTarget.previousElementSibling.click();
};
})(this)
}
]
});
data.amiga = booltoint(data.amiga);
fcol = colortoname(arraytocolor(data.color));
bcol = colortoname(arraytocolor(data.bg));
$("#entryindex").val(pos);
$("#entryname").val(data.name);
$("#entryauthor").val(data.author);
$("#entryfiletpye").val(data.filetype);
$("#entryfiletype").children()[resolvefiletype(data.filetype)].selected = true;
$("#entryamiga").val(data.amiga);
$("#entryamiga").children()[1].textContent = ansiorascii(data.amiga);
$("#entryfont").val(data.font);
$("#entrycolor").val(fcol);
$("#entrycolor").children()[colorindex(fcol)].selected = true;
$("#entrybg").val(bcol);
$("#entrybg").children()[colorindex(bcol)].selected = true;
$("#entrywidth").val(data.width);
$("#entryline1").val(data.line1);
$("#entryline2").val(data.line2);
$("#entrytext").val(data.text);
$("#entryfile").val(data.file);
return sahlicolor();
};
return Sahli;
})();
dumpjson = function(obj) {
return JSON.stringify(obj, null, "\t");
};
booltoint = function(bool) {
return bool + 1 - 1;
};
inttobool = function(intstr) {
return (intstr === 1).toString();
};
statustobool = function(status) {
if (status === 'Ascii') {
return true;
} else {
return false;
}
};
resolvefiletype = function(filetype) {
var options;
options = {
"plain": 0,
"ansi": 1,
"xbin": 2,
"ice": 3,
"adf": 4,
"avatar": 5,
"bin": 6,
"idf": 7,
"pcboard": 8,
"tundra": 9
};
return options[filetype];
};
ansiorascii = function(status) {
if (status === 0) {
return "Ansi";
} else {
return "Ascii";
}
};
dec2hex = function(num) {
return "" + (('000' + num.toString(16)).slice(-2));
};
hex2dec = function(num) {
return parseInt(num, 16);
};
arraytocolor = function(array) {
var c, x;
c = ((function() {
var j, len, results;
results = [];
for (j = 0, len = array.length; j < len; j++) {
x = array[j];
results.push(dec2hex(x));
}
return results;
})()).slice(0, 3).join('');
return "#" + c;
};
colortoarray = function(color) {
var c1, i, x;
color = color.slice(1);
c1 = [color.slice(0, 2), color.slice(2, 4), color.slice(4, 6)];
x = (function() {
var j, len, results;
results = [];
for (j = 0, len = c1.length; j < len; j++) {
i = c1[j];
results.push(hex2dec(i));
}
return results;
})();
x.push(255);
return x;
};
colortoname = function(color) {
var bw, colorname, names, ret;
names = {
"#E0E0E0": "Light Grey",
"#A0A0E0": "Light Blue",
"#9AFE2E": "Light Green",
"#FF0000": "Red",
"#FF8000": "Orange",
"#FFFF00": "Yellow",
"#00F000": "Green",
"#2EFEF7": "Cyan",
"#002EF7": "Blue",
"#0B0B3B": "Navy",
"#FF00FF": "Magenta",
"#8000FF": "Purple",
"#0A2A0A": "Dark Green",
"#3B3B3B": "Dark Grey",
"#FFFFFF": "White",
"#000000": "Black"
};
color = color.toUpperCase();
colorname = names[color];
bw = hex2dec(color.slice(1)) > 8421504 ? 'White' : "Black";
return ret = colorname != null ? colorname : bw;
};
colorindex = function(colorname) {
var names;
names = {
"Light Grey": 0,
"Light Blue": 1,
"Light Green": 2,
"Red": 3,
"Orange": 4,
"Yellow": 5,
"Green": 6,
"Cyan": 7,
"Blue": 8,
"Navy": 9,
"Magenta": 10,
"Purple": 11,
"Dark Green": 12,
"Dark Grey": 13,
"White": 14,
"Black": 15
};
return names[colorname];
};
sahlicolor = function() {
var bg, fg;
fg = $('#entrycolor').val();
bg = $('#entrybg').val();
console.log('sahlicolor', fg, bg);
return $('#sahliascii').css({
'color': fg,
'background': bg
});
};
getfilelist = function() {
var location;
location = $("#dirlocation").val();
return $.get("../" + location, function(listing) {
return console.log(listing);
});
};
newsahli = function() {
var newentry, sahli;
sahli = new Sahli;
sahli.data = sahli.empty;
newentry = new emptyfiledef;
sahli.data.filedata.push(newentry);
return sahli.edit();
};
loadsahli = function() {
var sahli;
sahli = new Sahli;
return sahli.loader('list.sahli');
};
}).call(this);

View file

@ -0,0 +1,415 @@
Sahli Editor
============
Editor for Sahli files.
- open existing file
- create new item
* get filename from dir
* insert SAUCE data if available
* use SAUCE data to find font
* allow Amiga choices
* colorpicker
- edit existing item
- remove item
- clear whole file
- copy/clone
- move items around
- sort items
- output to screen (copy into file)
* run from node - save filename dialog
***
It should be noted that this does not do bounds checking, and it would be very
possible to overflow this by using a debugger and such. As the purpose of this
is limited, and this should NOT be put on a live website, I feel that is ok for
now. Perhaps I will fix it after Revision.
***
== Create Initial crappage
We need to make a screen that has a few things in it for starters
Title, load existing, and new file options.
Silliness for checking that this works.
$(-> $("h1").hide().slideDown(500))
Create buttos to choose between the New and Load functionalities
(As we aren't going to ever load a file _and_ do a new file.)
(If someone wants to do that, they can restart with F5 or something.)
Also hide the editor until needed, and initialize some elements.
$(->
$("#newsahli")
.button { disabled: false}
.click -> newsahli()
)
$(->
$("#loadsahli")
.button { disabled: false}
.click -> loadsahli()
)
$(->
$(".hidden").hide()
$("#entryamiga").button {icons: {primary:"ui-icon-gear"}}
.click ->
stuff = $(@).children()
if @.value == "1"
stuff[1].textContent = 'Ansi'
@.value = "0"
else
stuff[1].textContent = 'Ascii'
@.value = "1"
$(".45box").css {width:'45%',display:'inline-block'}
$(".groupbox p").css {margin:"0 0 .25em 0"}
$(".colorbox").change =>
sahlicolor()
$("#entryfilepick").change ->
if @.files[0]? then $("#entryfile").val @.files[0].name
$("#entryfile").click ->
$("#entryfilepick").click()
)
The sahli file definition format is as follows:
"file" - the actual filename on disk, "name" - the title of the piece,
the boolean 'amiga' indicates if it is ansi or ascii (True = ascii),
width is the width (widest point of the file), author the author of the piece,
the color and bg items define the color for amiga ascii, and the font
defines the font similarly. For PC ansi, this should be 'ansifont.'
The three remaining lines are informational and optional.
The slide format is currently unused, but consists of a background picture,
a html template, and a css file.
class emptyfiledef
constructor: ->
@file = ""
@name = ""
@amiga = true
@filetype = 'plain'
@width = ""
@author = ""
@font = "Propaz"
@color = [ 255,255,255,255 ]
@bg = [ 0,0,0,0 ]
@line1 = ""
@line2 = ""
@text = ""
class Sahli
constructor: ->
@emptyfiledef = new emptyfiledef
@emptyslidesdef = {
"background": "",
"template": "",
"css": ""
}
@empty = {
"location": "",
"slides": @emptyslidesdef,
"filedata": [ ]
}
loader: ->
$.ajax {
url: '../list.sahli',
dataType: "json",
success: (result) =>
@data = result
@.edit()
}
Editor functionality:
Close the new/load buttons - unneeded now.
list, and allow dragon-droppings for sorting. Doubleclick to edit, or use
edit button.
edit: ->
$('#buttonbox').hide()
$('#dirlocation').change (event) =>
@data.location = event.target.value
$('#listsave').button {icons: {primary:"ui-icon-disk"}}
.click =>
$('#sahlioutput').text dumpjson @data
$('#dumparea').show 100
console.log dumpjson @data
$('#listlist').button {icons: {primary:"ui-icon-folder-open"}}
.click ->
getfilelist()
$('#listappend').button {icons: {primary:"ui-icon-1-n"}}
.click (event) =>
newentry = new emptyfiledef
@data.filedata.push newentry
@buildlist @data
$('#listdisplay').button {icons: {primary:"ui-icon-refresh"}}
.click =>
@buildlist @data
$('#closespan').click ->
$(@parentElement.parentElement).hide()
$('#sahlioutput').text ''
You need to save the order, and extract these in that order; moving around
does not alter the array. Alternately, _have_ it alter the array.
@buildlist @data
buildlist: (data) ->
$('#list').show 100
$('#list ol li').remove()
console.log i.author for i in @data.filedata
x = 0
$('#dirlocation').val @data.location
$('#sortlist').append @.additem item,x++ for item in @data.filedata
$('#sortlist').sortable
start: (event,ui) ->
ui.item.data {startpos:ui.item.index()}
stop: (event,ui) =>
s = ui.item.data().startpos
e = ui.item.index()
@data.filedata = @.rearrangearray s,e,@data.filedata
console.log name.author,name.name,name.file for name in @data.filedata
console.log '---'
@buildlist @data
Given a start and and end position, pop the array element at start off and
insert it into the array at end position. A la the draggon-dropping.
rearrangearray: (startpos,endpos,a) ->
moving = a[startpos]
alen = a.length
tarr = a[0...startpos].concat a[startpos+1..-1]
tarr[0...endpos].concat [moving].concat tarr[endpos..-1]
additem: (item,pos) ->
entry = @genentryline item,pos
entry.dblclick =>
@editline item,pos
genentryline: (item,pos) ->
arrows = "<span class='ui-icon ui-icon-arrowthick-2-n-s'></span>"
amigastatus = ansiorascii booltoint item.amiga
delbutton = $("<span class='righty' id=del-#{pos}>delete</span>")
.click (event) =>
pos = event.currentTarget.id.replace "del-",""
@data.filedata.splice pos,1
@buildlist @data
entry = $("<li class='entry' id='#{item.file}'>#{arrows}#{amigastatus} | #{item.author} : #{item.name} : #{item.file}</li>")
entry.append delbutton
save: ->
pos = $("#entryindex").val()
entry = @data.filedata[pos]
entry.name = $("#entryname").val()
entry.author = $("#entryauthor").val()
entry.amiga = statustobool $("#entryamiga").children()[1].textContent
console.log $("#entryamiga").children()[1].textContent,entry.amiga,entry.author
entry.color = colortoarray $("#entrycolor").val()
entry.bg = colortoarray $("#entrybg").val()
entry.width = $("#entrywidth").val()
entry.line1 = $("#entryline1").val()
entry.line2 = $("#entryline2").val()
entry.text = $("#entrytext").val()
entry.file = $("#entryfile").val()
entry.filetype = $("#entryfiletype").val()
@buildlist @data
editline: (data,pos) ->
$("#formica").dialog {
width:'800',
modal: false,
title:"Entry #{data.file} ",
buttons: [{
text: "Cancel",
icons: {primary: 'ui-icon-trash'},
click: ->
$(@).dialog "close"
},{
text: "Save",
icons: {primary: 'ui-icon-disk'},
click: (event) =>
event.preventDefault()
@save()
event.currentTarget.previousElementSibling.click()
}]
}
data.amiga = booltoint data.amiga
fcol = colortoname arraytocolor data.color
bcol = colortoname arraytocolor data.bg
$("#entryindex").val pos
$("#entryname").val data.name
$("#entryauthor").val data.author
$("#entryfiletpye").val data.filetype
$("#entryfiletype").children()[resolvefiletype data.filetype].selected = true
$("#entryamiga").val data.amiga
$("#entryamiga").children()[1].textContent = ansiorascii data.amiga
$("#entryfont").val data.font
$("#entrycolor").val fcol
$("#entrycolor").children()[colorindex fcol ].selected = true
$("#entrybg").val bcol
$("#entrybg").children()[colorindex bcol ].selected = true
$("#entrywidth").val data.width
$("#entryline1").val data.line1
$("#entryline2").val data.line2
$("#entrytext").val data.text
$("#entryfile").val data.file
sahlicolor()
A Helper function to dump json out of an object as text:
dumpjson = (obj) ->
JSON.stringify obj,null,"\t"
Boolean / integer Helpers
booltoint = (bool) ->
bool + 1 - 1
inttobool = (intstr) ->
(intstr == 1).toString()
statustobool = (status) ->
if status is 'Ascii' then true else false
Resolve filetype offset in array:
resolvefiletype = (filetype) ->
options = {
"plain":0
"ansi":1
"xbin":2
"ice":3
"adf":4
"avatar":5
"bin":6
"idf":7
"pcboard":8
"tundra":9
}
options[filetype]
Resolve ansi or ascii status
ansiorascii = (status) ->
if status is 0 then "Ansi" else "Ascii"
Color conversion from array to color item:
This decimal to hex conversion only handles 00-FF but it's fine for this purpose;
we actually _want_ that limitation in the output.
dec2hex = (num) ->
"#{('000'+num.toString 16).slice -2}"
hex2dec = (num) ->
parseInt num,16
arraytocolor = (array) ->
c = (dec2hex x for x in array)[0..2].join ''
"##{c}"
colortoarray = (color) ->
color = color.slice(1)
c1 = [ color[0..1], color[2..3], color[4..5] ]
x = (hex2dec i for i in c1)
x.push 255
x
Need a way to convert the array back to the color name.
colortoname = (color) ->
names = {
"#E0E0E0":"Light Grey"
"#A0A0E0":"Light Blue"
"#9AFE2E":"Light Green"
"#FF0000":"Red"
"#FF8000":"Orange"
"#FFFF00":"Yellow"
"#00F000":"Green"
"#2EFEF7":"Cyan"
"#002EF7":"Blue"
"#0B0B3B":"Navy"
"#FF00FF":"Magenta"
"#8000FF":"Purple"
"#0A2A0A":"Dark Green"
"#3B3B3B":"Dark Grey"
"#FFFFFF":"White"
"#000000":"Black"
}
color = color.toUpperCase()
colorname = names[color]
bw = if hex2dec(color.slice(1)) > 8421504 then 'White' else "Black"
ret = if colorname? then colorname else bw
Similarly, need to be able to get the color index.
colorindex = (colorname) ->
names = {
"Light Grey":0
"Light Blue":1
"Light Green":2
"Red":3
"Orange":4
"Yellow":5
"Green":6
"Cyan":7
"Blue":8
"Navy":9
"Magenta":10
"Purple":11
"Dark Green":12
"Dark Grey":13
"White":14
"Black":15
}
names[colorname]
A function for changing the fore and background colors of the sahli ascii example
sahlicolor = ->
fg = $('#entrycolor').val()
bg = $('#entrybg').val()
console.log 'sahlicolor',fg,bg
$('#sahliascii').css {'color':fg,'background':bg}
Function for loading the filelist from the specified directory on the server/filesystem.
getfilelist = ->
location = $("#dirlocation").val()
$.get("../#{location}", (listing) ->
console.log listing
)
When clicking 'New' we want to make a brand new Sahli, and then clear out
the buttons and create the editor bit as blank.
newsahli = ->
sahli = new Sahli
sahli.data = sahli.empty
newentry = new emptyfiledef
sahli.data.filedata.push newentry
sahli.edit()
And when clicking 'load' we want to load the existing sahli file.
loadsahli = ->
sahli = new Sahli
sahli.loader 'list.sahli'

View file

@ -0,0 +1,174 @@
<html>
<head>
<title>Sahli Editor</title>
<!-- changed to local copies to avoid party network "dropouts" preventing the code from running
as it can't be pulled from afar if the network is down. Use remote if you would like, just uncomment
<script src="//code.jquery.com/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript" charset="utf-8" ></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/dot-luv/jquery-ui.css">
-->
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<script src="sahliedit.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="sahliedit.css">
<link rel="stylesheet" href="jquery-ui-dot-luv.css">
</head>
<body>
<h1>Sahli Editor</h1>
<div id='editbox'>
<div id='buttonbox'>
<button id='newsahli'>New</button>
<button id='loadsahli'>Load</button>
</div>
</div>
<div class='hidden' id='list'>
<label>Location of Files:<input type="text" id='dirlocation' name="location" value=""></label>
<ol id='sortlist'>
</ol>
<p id='listappend'>Add</p>
<p id='listlist'>List</p>
<p id='listdisplay'>Redisplay</p>
<p id='listsave'>Save</p>
</div>
<div class='hidden' id='formica'>
<form accept-charset="utf-8">
<ul>
<div class='groupbox' id='basics'>
<p>Basics:</p>
<div class='drop'>
<li>
<input type="text" id="entryindex" value="" class='hidden'>
<label for="file">File name:</label>
<input id='entryfile' type="text" name="file" value="" placeholder="">
<input id='entryfilepick' type="file" class='hidden' name="pickfile" value="" placeholder="">
</li>
<li>
<label for="file">Title:</label>
<input id='entryname' type="text" name="name" value="" placeholder="">
</li>
<li>
<label for="author">Author's name:</label>
<input id='entryauthor' type="text" name="author" value="" placeholder="">
</li>
</div>
</div>
<div class='groupbox' id='displaydata'>
<p>Display:</p>
<div class='drop' id='fl'>
<li>
<label for="file">Ascii or Ansi?</label>
<button id='entryamiga' name="amiga" id='amiga' type='button' value='1'>Ascii</button>
</li>
<li>
<label for='filetype'>File Type:</label>
<select name='filetype' id='entryfiletype'>
<option value="plain">plain</option>
<option value="ansi">ansi</option>
<option value="xbin">xbin</option>
<option value="ice">ice</option>
<option value="adf">adf</option>
<option value="avatar">avatar</option>
<option value="bin">bin</option>
<option value="idf">idf</option>
<option value="pcboard">pcboard</option>
<option value="tundra">tundra</option>
</select>
</li>
<li>
<label for="width">Width of file:</label>
<input id='entrywidth' type="number" name="width" value="80" placeholder="">
</li>
<li>
<label for="font">Font:</label>
<select id='entryfont' name="font">
<option value="propaz">Topaz 2.0</option>
<option value="topaz">Topaz 1.3</option>
<option value="mosoul">mOsOul</option>
<option value="microknight">Microknight</option>
<option value="pot-noodle">P0t-nOodle</option>
<option value="blockzone">BlockZone</option>
<option value="ansifont">Ansifont</option>
</select>
</li>
<div class='45box'>
<li>
<label for="color">Text Color:</label>
<select name="color" id='entrycolor' class='colorbox'>
<option value="#E0E0E0">Light Grey</option>
<option value="#A0A0E0">Light Blue</option>
<option value="#9AFE2E">Light Green</option>
<option value="#FF0000">Red</option>
<option value="#FF8000">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#00F000">Green</option>
<option value="#2EFEF7">Cyan</option>
<option value="#002EF7">Blue</option>
<option value="#0B0B3B">Navy</option>
<option value="#FF00FF">Magenta</option>
<option value="#8000FF">Purple</option>
<option value="#0A2A0A">Dark Green</option>
<option value="#3B3B3B">Dark Grey</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
</select>
</li>
<li>
<label for="bg">Background color:</label>
<select name="bg" id='entrybg' class='colorbox'>
<option value="#E0E0E0">Light Grey</option>
<option value="#A0A0E0">Light Blue</option>
<option value="#9AFE2E">Light Green</option>
<option value="#FF0000">Red</option>
<option value="#FF8000">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#00F000">Green</option>
<option value="#2EFEF7">Cyan</option>
<option value="#002EF7">Blue</option>
<option value="#0B0B3B">Navy</option>
<option value="#FF00FF">Magenta</option>
<option value="#8000FF">Purple</option>
<option value="#0A2A0A">Dark Green</option>
<option value="#3B3B3B">Dark Grey</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
</select>
</li>
</div>
<div class='45box'>
<pre id='sahliascii'>
________________________, ._____,
| ___|___ | | | | |_____|
|_____ | _ | | |__| |
|_____|_____|___|__|______|___|
</pre>
</div>
</div>
</div>
<div class='groupbox' id='optionals'>
<p>Optional text:</p>
<div class='drop'>
<li>
<label for="line1">Optional Info line 1:</label>
<input id='entryline1' type="text" name="line1" value="" placeholder="">
</li>
<li>
<label for="line2">Optional Info line 2:</label>
<input id='entryline2' type="text" name="line2" value="" placeholder="">
</li>
<li>
<label for="text">Optional Text (notes, comments, etc):</label>
<textarea id='entrytext' name='text'></textarea>
</li>
</div>
</ul>
</form>
</div>
<div class='hidden' id='dumparea' >
<p>Copy and save all this textual data as list.sahli in your Sahli directory <span id='closespan'>[X]</span></p>
<textarea name="sahlioutput" id='sahlioutput'></textarea>
</div>
</body>
</html>