indentation fix, start of changing font in editor

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

View file

@ -17,7 +17,7 @@ textarea {
}
pre {
font-family: 'TopazPlus a500a1000a2000','mOsOul',Monaco,monospace;
font-family: 'topaz500','mosoul',Monaco,monospace;
font-size: 16;
border: 2px inset #808080;
}
@ -56,12 +56,14 @@ div ul li{
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.
/* 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;
@ -79,7 +81,7 @@ div.groupbox p {
}
#sahlioutput {
font-family: 'TopazPlus a500a1000a2000','mOsOul',Monaco,monospace;
font-family: 'microknight','P0t-nOodle',Monaco,monospace;
font-size: 16;
background: aliceblue;
overflow-wrap: break-word;
@ -95,4 +97,135 @@ div.groupbox p {
margin: 0px 0px 1ex;
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;
}

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.
$(->
$("#newsahli")
.button { disabled: false}
.click -> newsahli()
)
$("#newsahli")
.button { disabled: false}
.click -> newsahli()
)
$(->
$("#loadsahli")
.button { disabled: false}
.click -> loadsahli()
)
$("#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()
$(".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()
$("#entryfont").change ->
$('pre').css 'font-family',$('#entryfont').val()
$("#entryfilepick").change ->
if @.files[0]? then $("#entryfile").val @.files[0].name
$("#entryfile").click ->
$("#entryfilepick").click()
)
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,
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 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": [ ]
}
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()
}
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
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 ''
$('#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
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
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]
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
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
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
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()
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()
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"
JSON.stringify obj,null,"\t"
Boolean / integer Helpers
booltoint = (bool) ->
bool + 1 - 1
bool + 1 - 1
inttobool = (intstr) ->
(intstr == 1).toString()
(intstr == 1).toString()
statustobool = (status) ->
if status is 'Ascii' then true else false
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]
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"
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.
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}"
"#{('000'+num.toString 16).slice -2}"
hex2dec = (num) ->
parseInt num,16
parseInt num,16
arraytocolor = (array) ->
c = (dec2hex x for x in array)[0..2].join ''
"##{c}"
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
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
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]
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
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}
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.
Function for loading the filelist from the specified directory on the
server/filesystem.
getfilelist = ->
location = $("#dirlocation").val()
$.get("../#{location}", (listing) ->
console.log listing
)
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()
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'
sahli = new Sahli
sahli.loader 'list.sahli'

View file

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