diff --git a/code/boot.js b/code/boot.js index ff98b9a8..83be4f9c 100644 --- a/code/boot.js +++ b/code/boot.js @@ -201,37 +201,7 @@ window.setupTooltips = function(element) { }, content: function() { var title = $(this).attr('title'); - - // check if it should be converted to a table - if(!title.match(/\t/)) { - return title.replace(/\n/g, '
'); - } - - var data = []; - var columnCount = 0; - - // parse data - var rows = title.split('\n'); - $.each(rows, function(i, row) { - data[i] = row.split('\t'); - if(data[i].length > columnCount) columnCount = data[i].length; - }); - - // build the table - var tooltip = ''; - $.each(data, function(i, row) { - tooltip += ''; - $.each(data[i], function(k, cell) { - var attributes = ''; - if(k === 0 && data[i].length < columnCount) { - attributes = ' colspan="'+(columnCount - data[i].length + 1)+'"'; - } - tooltip += ''+cell+''; - }); - tooltip += ''; - }); - tooltip += '
'; - return tooltip; + return window.convertTextToTableMagic(title); } }); @@ -241,6 +211,22 @@ window.setupTooltips = function(element) { } } +window.setupDialogs = function() { + $('#dialog').dialog({ + autoOpen: false, + modal: true, + buttons: [ + { text: 'OK', click: function() { $(this).dialog('close'); } } + ] + }); + + window.alert = function(text, isHTML) { + var h = isHTML ? text : window.convertTextToTableMagic(text); + $('#dialog').html(h).dialog('open'); + } +} + + // BOOTING /////////////////////////////////////////////////////////// @@ -258,6 +244,7 @@ function boot() { window.iconRes = L.Icon.Default.extend({options: { iconUrl: base + 'marker-blue.png' } }); window.setupStyles(); + window.setupDialogs(); window.setupMap(); window.setupGeosearch(); window.setupRedeem(); diff --git a/code/utils_misc.js b/code/utils_misc.js index 409aebc7..48704d0c 100644 --- a/code/utils_misc.js +++ b/code/utils_misc.js @@ -233,3 +233,37 @@ window.genFourColumnTable = function(blocks) { if(t.length % 2 === 1) t + ''; return t; } + + +// converts given text with newlines (\n) and tabs (\t) to a HTML +// table automatically. +window.convertTextToTableMagic = function(text) { + // check if it should be converted to a table + if(!text.match(/\t/)) return text.replace(/\n/g, '
'); + + var data = []; + var columnCount = 0; + + // parse data + var rows = text.split('\n'); + $.each(rows, function(i, row) { + data[i] = row.split('\t'); + if(data[i].length > columnCount) columnCount = data[i].length; + }); + + // build the table + var table = ''; + $.each(data, function(i, row) { + table += ''; + $.each(data[i], function(k, cell) { + var attributes = ''; + if(k === 0 && data[i].length < columnCount) { + attributes = ' colspan="'+(columnCount - data[i].length + 1)+'"'; + } + table += ''+cell+''; + }); + table += ''; + }); + table += '
'; + return table; +} diff --git a/main.js b/main.js index 02b12969..1b5779e4 100644 --- a/main.js +++ b/main.js @@ -106,7 +106,8 @@ document.getElementsByTagName('body')[0].innerHTML = '' + ' IITC’s page' + ' ' + '' - + '
'; + + '
' + + '
'; // putting everything in a wrapper function that in turn is placed in a // script tag on the website allows us to execute in the site’s context diff --git a/style.css b/style.css index 8a110b96..43bc610c 100644 --- a/style.css +++ b/style.css @@ -647,8 +647,8 @@ aside { border: 2px solid #f8ff5e; } -/* tooltips */ -.ui-tooltip { +/* tooltips, dialogs */ +.ui-tooltip, .ui-dialog { max-width: 300px; position: absolute; z-index: 9999; @@ -659,6 +659,50 @@ aside { padding: 2px 4px; } +.ui-dialog { + border: 1px solid #0F0F0F; + padding: 0; + border-radius: 2px; +} + +.ui-widget-overlay { + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index:9998; + background: #444; + opacity: 0.6; +} + +.ui-dialog-titlebar { + display: none; +} + +.ui-dialog-content { + padding: 12px; + overflow-y: auto; + overflow-x: hidden; + max-height: 600px !important; + max-width: 700px !important; +} + +.ui-dialog-buttonpane { + background: #F2F2F2; + padding: 12px; + border-top: 1px solid #E6E6E6; +} + +.ui-dialog-buttonset { + text-align: right; +} + +.ui-dialog-buttonset button { + padding: 2px; + min-width: 80px; +} + td { padding: 0; vertical-align: top;