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

basic form - needs some more changes but basics are there.

Browse source
This commit is contained in:
Howland Owl 2014-04-14 20:09:27 +03:00
parent ec7acc5c3b
commit de82467f77
3 changed files with 151 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

17
editor/sahliedit.css Normal file
View file

@ -0,0 +1,17 @@
label, input, textarea{
display: block;
}
input, textarea {
width: 90%;
}
textarea {
height: 8em;
}
.colorbox {
border: 0;
padding: 0;
height: 2em;
}

43
editor/sahliedit.litcoffee
View file

@ -24,23 +24,38 @@ 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 a split button 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 hidden things.
$(->
$("#newsahli")
.button { disabled: false}
.click -> newsahli 'new'
)
.click ->
newsahli 'new'
$("#formica").dialog {
width:'800',
modal: false,
title:'Line Item', buttons: [{
text: "OK",
click: ->
$(@).dialog "close"
}] }
)
$(->
$("#loadsahli")
.button { disabled: false}
.click -> alert "heyoh!"
)
$(->
$(".hidden").hide()
$(".45box").css {width:'45%',float:'left'}
)
The sahli file definition format is as follows:
@ -79,10 +94,32 @@ a html template, and a css file.
"filedef": [ @filedef ]
}
loader: ->
alert "loader"
editor: (data) ->
alert dumpjson data
A Helper function to dump json out of an object as text:
dumpjson = (obj) ->
JSON.stringify(obj)
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
alert dumpjson sahli
$('#buttonbox').hide()
sahli.data = sahli.blank
sahli.editor sahli.data.filedef

106
editor/sahlieditor.html
View file

@ -1,19 +1,101 @@
<html>
<head>
<title>Sahli Editor</title>
<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>
<script src="/editor/sahliedit.js" type="text/javascript" charset="utf-8" async defer></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/dot-luv/jquery-ui.css">
<title>Sahli Editor</title>
<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>
<script src="/editor/sahliedit.js" type="text/javascript" charset="utf-8" async defer></script>
<link rel="stylesheet" href="/editor/sahliedit.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/dot-luv/jquery-ui.css">
</head>
<body>
<h1>Sahli Editor</h1>
<div id='editbox'>
<div>
<button id='newsahli'>New</button>
<button id='loadsahli'>Load</button>
</div>
</div>
<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='formica'>
<form action="sahlieditor_submit" method="get" accept-charset="utf-8">
<ol>
<div class='groupbox' id='basics'>
<p>Basics:</p>
<div>
<ul>
<label for="file">File name:</label>
<input type="file" name="file" value="" placeholder="">
</ul>
<ul>
<label for="file">Title:</label>
<input type="text" name="name" value="" placeholder="">
</ul>
<ul>
<label for="author">Author's name:</label>
<input type="text" name="author" value="" placeholder="">
</ul>
</div>
</div>
<div class='groupbox' id='displaydata'>
<p>Display:</p>
<div>
<ul>
<label for="file">Ascii or Ansi?</label>
<button name="amiga" id='amiga'>Ascii?</button>
</ul>
<ul>
<label for="width">With of file:</label>
<input type="number" name="width" value="80" placeholder="">
</ul>
<ul>
<label for="font">Font:</label>
<select name="font">
<option value="Propaz">Propaz</option>
<option value="Topaz13">Topaz13</option>
<option value="mOsOul">mOsOul</option>
<option value="MicroKnight">Microknight</option>
<option value="Ansifont">Ansifont</option>
</select>
</ul>
<div class='45box'>
<ul>
<label for="color">Text Color:</label>
<input type="color" name="color" value="#D0D0D0" placeholder="" class="colorbox">
</ul>
<ul>
<label for="bg">Background color:</label>
<input type="color" name="bg" value="#000000" placeholder="" class="colorbox">
</ul>
</div>
<div class='45box'>
<pre>
________________________, ._____,
| ___|___ | | | | |_____|
|_____ | _ | | |__| |
|_____|_____|___|__|______|___|
</pre>
</div>
</div>
</div>
<div class='groupbox' id='optionals'>
<p>Optional text:</p>
<div>
<ul>
<label for="line1">Optional Info line 1:</label>
<input type="text" name="line1" value="" placeholder="">
</ul>
<ul>
<label for="line2">Optional Info line 2:</label>
<input type="text" name="line2" value="" placeholder="">
</ul>
<ul>
<label for="text">Optional Text (notes, comments, etc):</label>
<textarea name='text'></textarea>
</ul>
</div>
</ol>
</form>
</div>
</body>
</html>