truck/Sahli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

indentation fix, start of changing font in editor

Browse source
This commit is contained in:
Iam Naughton Phier 2015-03-26 18:15:38 +02:00
parent 4bcfeb755c
commit 6d5c51d0e5
3 changed files with 411 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

141
editor/sahliedit.css
View file

@ -17,7 +17,7 @@ textarea {
} }
pre { pre {
font-family: 'TopazPlus a500a1000a2000','mOsOul',Monaco,monospace; font-family: 'topaz500','mosoul',Monaco,monospace;
font-size: 16; font-size: 16;
border: 2px inset #808080; border: 2px inset #808080;
} }
@ -56,12 +56,14 @@ div ul li{
display: inline-block; display: inline-block;
} }
# this does not actually change anything because the design is set by /* 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. /* the jquery-ui bit. Altering in the script does work. Here for reference. */
/*
.45box { .45box {
width: 45%; width: 45%;
display: inline-block; display: inline-block;
} }
*/
div.groupbox p { div.groupbox p {
margin: .25 ex; margin: .25 ex;
@ -79,7 +81,7 @@ div.groupbox p {
} }
#sahlioutput { #sahlioutput {
font-family: 'TopazPlus a500a1000a2000','mOsOul',Monaco,monospace; font-family: 'microknight','P0t-nOodle',Monaco,monospace;
font-size: 16; font-size: 16;
background: aliceblue; background: aliceblue;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -96,3 +98,134 @@ div.groupbox p {
padding: 0px; padding: 0px;
} }
@font-face {
font-family: 'P0t-nOodle';
src: url('fonts/P0T-NOoDLE_v1.0.woff2') format('woff2');
src: url('fonts/P0T-NOoDLE_v1.0.woff') format('woff');
}
@font-face {
font-family: 'MicroKnight';
src: url('fonts/MicroKnightPlus_v1.0.woff2') format('woff2');
src: url('fonts/MicroKnightPlus_v1.0.woff') format('woff');
}
@font-face {
font-family: 'mOsOul';
src: url('fonts/mOsOul_v1.0.woff2') format('woff2');
src: url('fonts/mOsOul_v1.0.woff') format('woff');
}
@font-face {
font-family: 'Topaz1200';
src: url('fonts/TopazPlusA1200.woff') format('woff2');
src: url('fonts/TopazPlusA1200.woff') format('woff');
}
@font-face {
font-family: 'Topaz500';
src: url('fonts/TopazPlusA500.woff2') format('woff2');
src: url('fonts/TopazPlusA500.woff') format('woff');
}
@font-face {
font-family: 'blockzone';
src: url('fonts/BlockZone.woff2') format('woff2');
src: url('fonts/BlockZone.woff') format('woff');
}
.mosoul {
font-family: mOsOul;
text-align: left;
}
.pot-noodle , .p0t-noodle {
font-family: 'P0t-nOodle';
text-align: left;
}
.topaz, .topaz500 {
font-family: 'Topaz500';
text-align: left;
}
.propaz, .topaz1200 {
font-family: 'Topaz1200';
text-align: left;
}
.microknight, .microknightplus {
font-family: 'MicroKnight';
text-align: left;
}
.blockzone, .pcansifont {
font-family: 'blockzone';
text-align: left;
}
@font-face {
font-family: 'P0t-nOodle';
src: url('../fonts/P0T-NOoDLE_v1.0.woff2') format('woff2');
src: url('../fonts/P0T-NOoDLE_v1.0.woff') format('woff');
}
@font-face {
font-family: 'MicroKnight';
src: url('../fonts/MicroKnightPlus_v1.0.woff2') format('woff2');
src: url('../fonts/MicroKnightPlus_v1.0.woff') format('woff');
}
@font-face {
font-family: 'mOsOul';
src: url('../fonts/mOsOul_v1.0.woff2') format('woff2');
src: url('../fonts/mOsOul_v1.0.woff') format('woff');
}
@font-face {
font-family: 'Topaz1200';
src: url('../fonts/TopazPlusA1200.woff') format('woff2');
src: url('../fonts/TopazPlusA1200.woff') format('woff');
}
@font-face {
font-family: 'Topaz500';
src: url('../fonts/TopazPlusA500.woff2') format('woff2');
src: url('../fonts/TopazPlusA500.woff') format('woff');
}
@font-face {
font-family: 'blockzone';
src: url('../fonts/BlockZone.woff2') format('woff2');
src: url('../fonts/BlockZone.woff') format('woff');
}
.mosoul {
font-family: mOsOul;
text-align: left;
}
.pot-noodle , .p0t-noodle {
font-family: 'P0t-nOodle';
text-align: left;
}
.topaz, .topaz500 {
font-family: 'Topaz500';
text-align: left;
}
.propaz, .topaz1200 {
font-family: 'Topaz1200';
text-align: left;
}
.microknight, .microknightplus {
font-family: 'MicroKnight';
text-align: left;
}
.blockzone, .pcansifont {
font-family: 'blockzone';
text-align: left;
}

538
editor/sahliedit.litcoffee
View file

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

9
editor/sahlieditor.html
View file

@ -138,10 +138,11 @@
</div> </div>
<div class='45box'> <div class='45box'>
<pre id='sahliascii'> <pre id='sahliascii'>
________________________, ._____, ABCDEFGHIJKLMNOPQRSTUVWXYZ&gt;&lt;~`'"^&amp;eXmPl
| ___|___ | | | | |_____| abcdefghijklmnopqrstuvwxyz1234567890?+@
|_____ | _ | | |__| | * | ___)___ 7 I | | \-~=#/ $
|_____|_____|___|__|______|___| : |_____ | {~} ! | \__[ : #~%
; (_____j__"__l___|__|______]___; 0Oo
</pre> </pre>
</div> </div>
</div> </div>