HTML5 and CSS3 (#1677)

* Updates to HTML5 and CSS3

* UI Tweaks and Fixes
This commit is contained in:
SinTwo
2016-05-19 14:28:38 -04:00
committed by Datraen
parent 2a6e86f4fc
commit a87c8de3fd
16 changed files with 5260 additions and 4341 deletions
+3 -2
View File
@@ -74,10 +74,11 @@
if (title_image)
title_attributes = "class='uiTitle icon' style='background-image: url([title_image]);'"
return {"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
return {"<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta charset=ISO-8859-1">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
[head_content]
</head>
<body scroll=auto>
+12 -1
View File
@@ -4,6 +4,9 @@
#define UPLOAD_LIMIT 10485760 //Restricts client uploads to the server to 10MB //Boosted this thing. What's the worst that can happen?
#define MIN_CLIENT_VERSION 0 //Just an ambiguously low version for now, I don't want to suddenly stop people playing.
//I would just like the code ready should it ever need to be used.
//#define TOPIC_DEBUGGING 1
/*
When somebody clicks a link in game, this Topic is called first.
It does the stuff in this proc and then is redirected to the Topic() proc for the src=[0xWhatever]
@@ -23,6 +26,14 @@
if(!usr || usr != mob) //stops us calling Topic for somebody else's client. Also helps prevent usr=null
return
#if defined(TOPIC_DEBUGGING)
world << "[src]'s Topic: [href] destined for [hsrc]."
if(href_list["nano_err"]) //nano throwing errors
world << "## NanoUI, Subject [src]: " + html_decode(href_list["nano_err"]) //NANO DEBUG HOOK
#endif
//search the href for script injection
if( findtext(href,"<script",1,0) )
world.log << "Attempted use of scripts within a topic call, by [src]"
@@ -159,7 +170,7 @@
send_resources()
nanomanager.send_resources(src)
if(!void)
void = new()
screen += void
+10 -3
View File
@@ -175,9 +175,11 @@ nanoui is used to open and update nano browser uis
* @return /list config data
*/
/datum/nanoui/proc/get_config_data()
var/name = "[src_object]"
name = sanitize(name)
var/list/config_data = list(
"title" = title,
"srcObject" = list("name" = "[src_object]"),
"srcObject" = list("name" = name),
"stateKey" = state_key,
"status" = status,
"autoUpdateLayout" = auto_update_layout,
@@ -354,10 +356,11 @@ nanoui is used to open and update nano browser uis
var/url_parameters_json = json_encode(list("src" = "\ref[src]"))
return {"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type='text/javascript'>
function receiveUpdateData(jsonString)
{
@@ -367,6 +370,10 @@ nanoui is used to open and update nano browser uis
{
NanoStateManager.receiveUpdateData(jsonString);
}
//else
//{
// alert('browser.recieveUpdateData failed due to jQuery or NanoStateManager being unavailiable.');
//}
}
</script>
[head_content]
@@ -459,7 +466,7 @@ nanoui is used to open and update nano browser uis
var/list/send_data = get_send_data(data)
//user << list2json(data) // used for debugging
//user << list2json_usecache(send_data) // used for debugging //NANO DEBUG HOOK
user << output(list2params(list(strip_improper(json_encode(send_data)))),"[window_id].browser:receiveUpdateData")
/**
+6
View File
@@ -246,6 +246,7 @@ div.notice {
width: 100%;
margin: 4px 0 0 0;
clear: both;
overflow: auto;
}
.itemContentNarrow, .itemContent {
@@ -306,6 +307,7 @@ div.notice {
border: 1px solid #40628a;
padding: 4px;
margin: 3px 0;
overflow: hidden;
}
.statusDisplayRecords {
@@ -446,6 +448,10 @@ div.notice {
float: right;
}
.floatLeft {
float: left;
}
/* Used in PDA */
.wholeScreen {
+1
View File
File diff suppressed because one or more lines are too long
+50 -1
View File
File diff suppressed because one or more lines are too long
+396 -249
View File
File diff suppressed because it is too large Load Diff
+4582 -4031
View File
File diff suppressed because it is too large Load Diff
+138 -4
View File
@@ -1,4 +1,138 @@
jQuery.fn.extend({everyTime:function(c,a,d,b){return this.each(function(){jQuery.timer.add(this,c,a,d,b)})},oneTime:function(c,a,d){return this.each(function(){jQuery.timer.add(this,c,a,d,1)})},stopTime:function(c,a){return this.each(function(){jQuery.timer.remove(this,c,a)})}});
jQuery.extend({timer:{global:[],guid:1,dataKey:"jQuery.timer",regex:/^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,powers:{ms:1,cs:10,ds:100,s:1E3,das:1E4,hs:1E5,ks:1E6},timeParse:function(c){if(c==undefined||c==null)return null;var a=this.regex.exec(jQuery.trim(c.toString()));return a[2]?parseFloat(a[1])*(this.powers[a[2]]||1):c},add:function(c,a,d,b,e){var g=0;if(jQuery.isFunction(d)){e||(e=b);b=d;d=a}a=jQuery.timer.timeParse(a);if(!(typeof a!="number"||isNaN(a)||a<0)){if(typeof e!="number"||isNaN(e)||e<0)e=
0;e=e||0;var f=jQuery.data(c,this.dataKey)||jQuery.data(c,this.dataKey,{});f[d]||(f[d]={});b.timerID=b.timerID||this.guid++;var h=function(){if(++g>e&&e!==0||b.call(c,g)===false)jQuery.timer.remove(c,d,b)};h.timerID=b.timerID;f[d][b.timerID]||(f[d][b.timerID]=window.setInterval(h,a));this.global.push(c)}},remove:function(c,a,d){var b=jQuery.data(c,this.dataKey),e;if(b){if(a){if(b[a]){if(d){if(d.timerID){window.clearInterval(b[a][d.timerID]);delete b[a][d.timerID]}}else for(d in b[a]){window.clearInterval(b[a][d]);
delete b[a][d]}for(e in b[a])break;if(!e){e=null;delete b[a]}}}else for(a in b)this.remove(c,a,d);for(e in b)break;e||jQuery.removeData(c,this.dataKey)}}}});jQuery(window).bind("unload",function(){jQuery.each(jQuery.timer.global,function(c,a){jQuery.timer.remove(a)})});
/**
* jQuery.timers - Timer abstractions for jQuery
* Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
* Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
* Date: 2009/10/16
*
* @author Blair Mitchelmore
* @version 1.2
*
**/
jQuery.fn.extend({
everyTime: function(interval, label, fn, times) {
return this.each(function() {
jQuery.timer.add(this, interval, label, fn, times);
});
},
oneTime: function(interval, label, fn) {
return this.each(function() {
jQuery.timer.add(this, interval, label, fn, 1);
});
},
stopTime: function(label, fn) {
return this.each(function() {
jQuery.timer.remove(this, label, fn);
});
}
});
jQuery.extend({
timer: {
global: [],
guid: 1,
dataKey: "jQuery.timer",
regex: /^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,
powers: {
// Yeah this is major overkill...
'ms': 1,
'cs': 10,
'ds': 100,
's': 1000,
'das': 10000,
'hs': 100000,
'ks': 1000000
},
timeParse: function(value) {
if (value == undefined || value == null)
return null;
var result = this.regex.exec(jQuery.trim(value.toString()));
if (result[2]) {
var num = parseFloat(result[1]);
var mult = this.powers[result[2]] || 1;
return num * mult;
} else {
return value;
}
},
add: function(element, interval, label, fn, times) {
var counter = 0;
if (jQuery.isFunction(label)) {
if (!times)
times = fn;
fn = label;
label = interval;
}
interval = jQuery.timer.timeParse(interval);
if (typeof interval != 'number' || isNaN(interval) || interval < 0)
return;
if (typeof times != 'number' || isNaN(times) || times < 0)
times = 0;
times = times || 0;
var timers = jQuery.data(element, this.dataKey) || jQuery.data(element, this.dataKey, {});
if (!timers[label])
timers[label] = {};
fn.timerID = fn.timerID || this.guid++;
var handler = function() {
if ((++counter > times && times !== 0) || fn.call(element, counter) === false)
jQuery.timer.remove(element, label, fn);
};
handler.timerID = fn.timerID;
if (!timers[label][fn.timerID])
timers[label][fn.timerID] = window.setInterval(handler,interval);
this.global.push( element );
},
remove: function(element, label, fn) {
var timers = jQuery.data(element, this.dataKey), ret;
if ( timers ) {
if (!label) {
for ( label in timers )
this.remove(element, label, fn);
} else if ( timers[label] ) {
if ( fn ) {
if ( fn.timerID ) {
window.clearInterval(timers[label][fn.timerID]);
delete timers[label][fn.timerID];
}
} else {
for ( var fn in timers[label] ) {
window.clearInterval(timers[label][fn]);
delete timers[label][fn];
}
}
for ( ret in timers[label] ) break;
if ( !ret ) {
ret = null;
delete timers[label];
}
}
for ( ret in timers ) break;
if ( !ret )
jQuery.removeData(element, this.dataKey);
}
}
}
});
jQuery(window).bind("unload", function() {
jQuery.each(jQuery.timer.global, function(index, item) {
jQuery.timer.remove(item);
});
});
+1 -3
View File
@@ -63,9 +63,7 @@ NanoStateClass.prototype.onUpdate = function (data) {
if (!this.mapInitialised)
{
// Add drag functionality to the map ui
$('#uiMap').draggable({
handle : '#uiMapImage'
});
$('#uiMap').draggable();
$('#uiMapTooltip')
.off('click')
+5 -1
View File
@@ -48,6 +48,8 @@ NanoStateManager = function ()
var receiveUpdateData = function (jsonString)
{
var updateData;
//alert("recieveUpdateData called." + "<br>Type: " + typeof jsonString); //debug hook
try
{
// parse the JSON string from the server into a JSON object
@@ -55,10 +57,12 @@ NanoStateManager = function ()
}
catch (error)
{
alert(error.Message);
alert("recieveUpdateData failed. " + "<br>Error name: " + error.name + "<br>Error Message: " + error.message);
return;
}
//alert("recieveUpdateData passed trycatch block."); //debug hook
if (!updateData.hasOwnProperty('data'))
{
if (_data && _data.hasOwnProperty('data'))
+8
View File
@@ -50,6 +50,14 @@ if (typeof doT == 'undefined') {
alert('ERROR: Template engine failed to load!');
}
(function() {
var _alert = window.alert;
window.alert = function(str) {
window.location = "byond://?nano_err=" + encodeURIComponent(str);
_alert(str);
};
})();
// All scripts are initialised here, this allows control of init order
$(document).ready(function () {
NanoUtility.init();
+1 -1
View File
@@ -4,7 +4,7 @@ Used In File(s): \code\game\machinery\computer\crew.dm
-->
{{for data.crewmembers}}
{{if value.sensor_type == 3}}
<div class="mapIcon mapIcon16 rank-{{:value.rank.ckey()}} {{:value.dead ? 'dead' : 'alive'}}" style="left: {{:(value.x)}}px; bottom: {{:(value.y - 1)}}px;" unselectable="on">
<div class="mapIcon mapIcon16 rank-{{:value.rank.ckey()}} {{:value.dead ? 'dead' : 'alive'}}" style="left: {{:(value.x + 0.2)}}px; bottom: {{:(value.y - 14.75)}}px;" unselectable="on">
<div class="tooltip hidden">
{{:value.name}} ({{:value.assignment}}) ({{:value.dead ? "<span class='bad'>Deceased</span>" : "<span class='good'>Living</span>"}}) (<span class="oxyloss">{{:value.oxy}}</span>/<span class="toxin">{{:value.tox}}</span>/<span class="burn">{{:value.fire}}</span>/<span class="brute">{{:value.brute}}</span>) ({{:value.area}}: {{:value.x}}, {{:value.y}})
</div>
+20 -19
View File
@@ -5,36 +5,37 @@
<div class="itemContent" style="padding: 5px">
{{:helper.link('Configure', null, {'command' : 'configure'}, null, data.config ? 'selected' : null)}}
</div>
</div>
<div class="item">
{{if data.config}}
<div style="width: 315px; text-align: center">
<div style="width: 100%; text-align: center">
<div style="float: left">
<div class="white" style="height: 26">Port</div>
<div class="white" style="height: 26px">Port</div>
{{for data.ports}}
<div class="average" style="height: 26">{{:value.dir}} Port</div>
<div class="average" style="height: 26px">{{:value.dir}} Port</div>
{{/for}}
</div>
<div style="float: left; margin-left: 10">
<div class="white" style="height: 26">Input</div>
<div style="float: left; margin-left: 10px">
<div class="white" style="height: 26px">Input</div>
{{for data.ports}}
<div style="height: 26">
<div style="height: 26px">
{{:helper.link(' ', null, {'command' : 'switch_mode', 'mode' : 'in', 'dir' : value.dir}, null, value.input ? 'selected' : null)}}
</div>
{{/for}}
</div>
<div style="float: left; margin-left: 10">
<div class="white" style="height: 26">Output</div>
<div style="float: left; margin-left: 10px">
<div class="white" style="height: 26px">Output</div>
{{for data.ports}}
<div style="height: 26">
<div style="height: 26px">
{{:helper.link(' ', null, {'command' : 'switch_mode', 'mode' : 'out', 'dir' : value.dir}, null, value.output ? 'selected' : null)}}
</div>
{{/for}}
</div>
<div style="float: left; margin-left: 10">
<div class="white" style="height: 26">Filter</div>
<div style="float: left; margin-left: 10px">
<div class="white" style="height: 26px">Filter</div>
{{for data.ports}}
<div style="height: 26">
<div style="height: 26px">
{{:helper.link(value.f_type ? value.f_type : 'None', null, {'command' : 'switch_filter', 'mode' : value.f_type, 'dir' : value.dir}, value.filter ? null : 'disabled', value.f_type ? 'selected' : null)}}
</div>
{{/for}}
@@ -50,17 +51,17 @@
{{else}}
<div style="width: 315px; text-align: center">
<div style="width: 100%; text-align: center">
<div style="float: left">
<div class="white" style="height: 26">Port</div>
<div class="white" style="height: 26px">Port</div>
{{for data.ports}}
<div class="average" style="height: 26">{{:value.dir}} Port</div>
<div class="average" style="height: 26px">{{:value.dir}} Port</div>
{{/for}}
</div>
<div style="float: left; margin-left: 10">
<div class="white" style="height: 26">Mode</div>
<div style="float: left; margin-left: 10px">
<div class="white" style="height: 26px">Mode</div>
{{for data.ports}}
<div style="height: 26">
<div style="height: 26px">
{{if value.input}}
Input
{{else value.output}}
+26 -25
View File
@@ -5,44 +5,45 @@
<div class="itemContent" style="padding: 5px">
{{:helper.link('Configure', null, {'command' : 'configure'}, null, data.config ? 'selected' : null)}}
</div>
</div>
<div class="item">
{{if data.config}}
<div style="width: 315px; text-align: center">
<div style="width: 100%; text-align: center">
<div style="float: left">
<div class="white" style="height: 26">Port</div>
<div class="white" style="height: 26px">Port</div>
{{for data.ports}}
<div class="average" style="height: 26">{{:value.dir}} Port</div>
<div class="average" style="height: 26px">{{:value.dir}} Port</div>
{{/for}}
</div>
<div style="float: left; margin-left: 10">
<div class="white" style="height: 26">Input</div>
<div style="float: left; margin-left: 10px">
<div class="white" style="height: 26px">Input</div>
{{for data.ports}}
<div style="height: 26">
<div style="height: 26px">
{{:helper.link(' ', null, value.input ? {'command' : 'switch_mode', 'mode' : 'none', 'dir' : value.dir} : {'command' : 'switch_mode', 'mode' : 'in', 'dir' : value.dir}, value.output ? 'disabled' : null, value.input ? 'selected' : null)}}
</div>
{{/for}}
</div>
<div style="float: left; margin-left: 10">
<div class="white" style="height: 26">Output</div>
<div style="float: left; margin-left: 10px">
<div class="white" style="height: 26px">Output</div>
{{for data.ports}}
<div style="height: 26">
<div style="height: 26px">
{{:helper.link(' ', null, value.output ? null : {'command' : 'switch_mode', 'mode' : 'out', 'dir' : value.dir}, null, value.output ? 'selected' : null)}}
</div>
{{/for}}
</div>
<div style="float: left; margin-left: 10">
<div class="white" style="height: 26">Concentration</div>
<div style="float: left; margin-left: 10px">
<div class="white" style="height: 26px">Concentration</div>
{{for data.ports}}
<div style="height: 26">
<div style="height: 26px">
{{:helper.link( value.input ? helper.round(value.concentration*100)+' %' : '-', null, {'command' : 'switch_con', 'dir' : value.dir}, value.input ? null : 'disabled')}}
</div>
{{/for}}
</div>
<div style="float: left; margin-left: 10">
<div class="white" style="height: 26">Lock</div>
<div style="float: left; margin-left: 10px">
<div class="white" style="height: 26px">Lock</div>
{{for data.ports}}
<div style="height: 26">
<div style="height: 26px">
{{:helper.link(' ', value.con_lock ? 'locked' : 'unlocked', {'command' : 'switch_conlock', 'dir' : value.dir}, value.input ? null : 'disabled', value.con_lock ? 'selected' : null)}}
</div>
{{/for}}
@@ -58,17 +59,17 @@
{{else}}
<div style="width: 315px; text-align: center">
<div style="width: 100%; text-align: center">
<div style="float: left">
<div class="white" style="height: 26">Port</div>
<div class="white" style="height: 26px">Port</div>
{{for data.ports}}
<div class="average" style="height: 26">{{:value.dir}} Port</div>
<div class="average" style="height: 26px">{{:value.dir}} Port</div>
{{/for}}
</div>
<div style="float: left; margin-left: 10">
<div class="white" style="height: 26">Mode</div>
<div style="float: left; margin-left: 10px">
<div class="white" style="height: 26px">Mode</div>
{{for data.ports}}
<div style="height: 26">
<div style="height: 26px">
{{if value.input}}
Input
{{else value.output}}
@@ -79,10 +80,10 @@
</div>
{{/for}}
</div>
<div style="float: left; margin-left: 10">
<div class="white" style="height: 26">Concentration</div>
<div style="float: left; margin-left: 10px">
<div class="white" style="height: 26px">Concentration</div>
{{for data.ports}}
<div style="height: 26">
<div style="height: 26px">
{{if value.input}}
{{:helper.round(value.concentration*100)}} %
{{else}}
+1 -1
View File
@@ -4,7 +4,7 @@ Used In File(s): \code\game\machinery\computer\camera.dm
-->
{{for data.cameras}}
{{if value.z == 1}}
<div class="mapIcon mapIcon16" style="left: {{:(value.x)}}px; bottom: {{:(value.y - 1)}}px;">
<div class="mapIcon mapIcon16" style="left: {{:(value.x)}}px; bottom: {{:(value.y - 14.75)}}px;">
{{if data.current && value.name == data.current.name}}
{{:helper.link("#", '', {'switch_camera' : value.camera}, 'selected')}}
{{else value.deact}}