implement jqueryui dialog replacements.

For now only alert windows are converted automatically. You can alert custom
HTML code like so: alert('<strong>herp a derp</strong>', true);

Main can use this feature immediately, all plugins that are advertized to be
stable may only use this once 0.7 is released.

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, '<br />');
-      }
-
-      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 = '<table>';
-      $.each(data, function(i, row) {
-        tooltip += '<tr>';
-        $.each(data[i], function(k, cell) {
-          var attributes = '';
-          if(k === 0 && data[i].length < columnCount) {
-            attributes = ' colspan="'+(columnCount - data[i].length + 1)+'"';
-          }
-          tooltip += '<td'+attributes+'>'+cell+'</td>';
-        });
-        tooltip += '</tr>';
-      });
-      tooltip += '</table>';
-      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();

code/utils_misc.js

@@ -233,3 +233,37 @@ window.genFourColumnTable = function(blocks) {
   if(t.length % 2 === 1) t + '<td></td><td></td></tr>';
   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, '<br>');
+
+  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 = '<table>';
+  $.each(data, function(i, row) {
+    table += '<tr>';
+    $.each(data[i], function(k, cell) {
+      var attributes = '';
+      if(k === 0 && data[i].length < columnCount) {
+        attributes = ' colspan="'+(columnCount - data[i].length + 1)+'"';
+      }
+      table += '<td'+attributes+'>'+cell+'</td>';
+    });
+    table += '</tr>';
+  });
+  table += '</table>';
+  return table;
+}

main.js

@@ -106,7 +106,8 @@ document.getElementsByTagName('body')[0].innerHTML = ''
   + '      <a href="https://github.com/breunigs/ingress-intel-total-conversion#readme" title="IITC = Ingress Intel Total Conversion.\n\nOn the script’s homepage you can:\n– find updates\n– get plugins\n– report bugs\n– and contribute." style="cursor: help">IITC’s page</a></div>'
   + '  </div>'
   + '</div>'
-  + '<div id="updatestatus"></div>';
+  + '<div id="updatestatus"></div>'
+  + '<div id="dialog"></div>';
 
 // 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

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;