Monopoly Tile Form

Form input

by Chris Watson

HTML

<h1>Create Monopoly Board Tile</h1>
<p>Font Name/Type is optional. If undefined, it reverts to sans-serif. When using an non-specific Font Type, such as sans-serif, the actual font will be determined by your browser's settings.</p>
<p>Font Size is optional. If undefined, it is calculated relative to the tile's dimensions. Individual words cannot exceed the tile's width, hence they will be distorted to fit, if required.</p>
<p>Only one of Tile Width/Height is required, although both may be defined.  An undefined dimension will be calculated relative to the other.</p>
<p>Where units are defined in brackets, e.g. Font Size (px), only the number is required in the text-box, i.e. '10' and not '10px'.</p>
<hr style="margin:50px">
<table width="100%">
   <tr>
      <td>
         <form action="/c24w/zKBRF/show" target="preview">
            <label for="colour" style="margin-top:0">Colour</label><input name="colour" type="text" value="#0099ff" list="colours" title="Enter a valid hexadecimal colour or colour name"><input type="color" value="#0099ff" id="picker" title="Click for colour picker">
            <datalist id="colours">
               <option value="aliceblue">
               <option value="antiquewhite">
               <option value="aqua">
               <option value="aquamarine">
               <option value="azure">
               <option value="beige">
               <option value="bisque">
               <option value="black">
               <option value="blanchedalmond">
               <option value="blue">
               <option value="blueviolet">
               <option value="brown">
               <option value="burlywood">
               <option value="cadetblue">
               <option value="chartreuse">
               <option value="chocolate">
               <option value="coral">
               <option value="cornflowerblue">
               <option value="cornsilk">
               <option value="crimson">
               <option value="cyan">
   ...

CSS

html, body{
    font-family:sans-serif;
   /* background:#bdebce;*/
}
label{
    display:block;
    margin-top:10px;
}
input[type=color]{
    background:transparent;
    position:relative;
    top:6px;
    height:22px;
    padding:0;
    border:0;
    cursor:pointer;
}
td{
    vertical-align:top;
}
td p{
    margin:0 10px 0 0;
    text-align:right   ;
}
#preview{
    overflow:hidden;
    border:0;
    width:inherit;
    height:inherit;
}
#overBox{
    border:5px outset #abc;
    padding:0 10px 10px;
    background:#fff;
    width:150px;
    margin-left:50%;
    margin-top:50%;
    font-family:sans-serif;
    position:absolute;
    top:0;
    left:-75px;
    z-index:2;
}
#overBox *{
    font-weight:bold;
    display:block;
    width:inherit;
    height:20%;
    margin:10px 0 0;
}
#overBox hr{
}
#over{
    display:none;
    background:rgba(85,170,255,0.9);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

JavaScript

var over = document.getElementById('over');
var box = document.getElementById('overBox');
over.style.display = 'none';
var preview = document.getElementById('preview');
if((p = document.getElementById('picker')).type == 'text')
    p.style.display = 'none';
var form = document.forms[0];
updatePreview();
var inputs = form.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++){
    inputs[i].onchange = inputs[i].onkeyup = function(e){
        var input = e.srcElement;
        if(input.name == 'colour'){
            if(input.value.indexOf('#') == 0 || input.value == ''){
                input.nextSibling.value = input.value;
                input.nextSibling.style.display = 'inline';
            }
            else input.nextSibling.style.display = 'none';
        }
        else if(input.type == 'color')
            input.previousSibling.value = input.value;
        updatePreview();
    }
}

function updatePreview(){
    form.submit();   
}
        
function testColour(e){
    //e.value = e.value.substring(0,1) != '#' ? '#' + e.value : e.value;
    //alert(!(/^(#([A-Fa-f0-9]{3}){1,2})|[A-Za-z]+$/.test(e.value)));
}

function getCanvas(){
    return preview.contentWindow.getCanvas();   
}
/* future work: canvas.toblob
                window.URL.createObjectURL(blob);
                download attribute
*/


window.toDataURL = function(format){
    var type = 'image/' + format.toLowerCase();
    var data = getCanvas().toDataURL(type);
    var c = document.createElement('canvas');
    c.width = c.height = 1;
    var cdata = c.toDataURL();
    var defaultFormat = cdata.substring(cdata.indexOf('/') + 1, cdata.indexOf(';')).toUpperCase();
    var error = 'Your browser doesn\'t support exporting to that format (' + format + ').\n\n'
              + 'Would you like to export to your browser\'s default format (' + defaultFormat + ')?';
    if(data.indexOf('data:' + type) != 0){ // unsupported format
        if(confirm(error))
            window.open(data); //...