From 6d5c51d0e5b8df6c2797b8237e3a46a7b153e798 Mon Sep 17 00:00:00 2001 From: Iam Naughton Phier Date: Thu, 26 Mar 2015 18:15:38 +0200 Subject: [PATCH] indentation fix, start of changing font in editor --- editor/sahliedit.css | 143 +++++++++- editor/sahliedit.litcoffee | 538 ++++++++++++++++++------------------- editor/sahlieditor.html | 9 +- 3 files changed, 411 insertions(+), 279 deletions(-) diff --git a/editor/sahliedit.css b/editor/sahliedit.css index 3821a74..f9f3361 100644 --- a/editor/sahliedit.css +++ b/editor/sahliedit.css @@ -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; -} \ No newline at end of file +} + +@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; +} diff --git a/editor/sahliedit.litcoffee b/editor/sahliedit.litcoffee index 412b89c..7341dae 100644 --- a/editor/sahliedit.litcoffee +++ b/editor/sahliedit.litcoffee @@ -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 = "" - amigastatus = ansiorascii booltoint item.amiga - delbutton = $("delete") - .click (event) => - pos = event.currentTarget.id.replace "del-","" - @data.filedata.splice pos,1 - @buildlist @data - entry = $("
  • #{arrows}#{amigastatus} | #{item.author} : #{item.name} : #{item.file}
    • ") - entry.append delbutton + genentryline: (item,pos) -> + arrows = "" + amigastatus = ansiorascii booltoint item.amiga + delbutton = $("delete") + .click (event) => + pos = event.currentTarget.id.replace "del-","" + @data.filedata.splice pos,1 + @buildlist @data + entry = $("
  • #{arrows}#{amigastatus} | #{item.author} : #{item.name} : #{item.file}
    • ") + 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' diff --git a/editor/sahlieditor.html b/editor/sahlieditor.html index 547f106..e007301 100644 --- a/editor/sahlieditor.html +++ b/editor/sahlieditor.html @@ -138,10 +138,11 @@ 
    -   ________________________,  ._____,
-  |  ___|___    |  |   |   |  |_____|
-  |_____  |  _  |      |   |__|   |
-    |_____|_____|___|__|______|___|
+ABCDEFGHIJKLMNOPQRSTUVWXYZ><~`'"^&eXmPl
+abcdefghijklmnopqrstuvwxyz1234567890?+@
+* |  ___)___    7  I   |   |  \-~=#/  $
+: |_____  | {~} !      |   \__[   : #~%
+;   (_____j__"__l___|__|______]___; 0Oo