Added a really simple message box system based on miniPrompts, this will be used for confirmation windows like delete_page, clear_logs, delvote, etc.
authorDan
Mon, 14 Apr 2008 22:02:04 -0400
changeset 537 547b7ba6d535
parent 536 218a627eb53e
child 538 a43f9d646dc7
Added a really simple message box system based on miniPrompts, this will be used for confirmation windows like delete_page, clear_logs, delvote, etc.
includes/clientside/css/enano-shared.css
includes/clientside/static/ajax.js
includes/clientside/static/faders.js
includes/clientside/static/misc.js
--- a/includes/clientside/css/enano-shared.css	Mon Apr 14 12:13:12 2008 -0400
+++ b/includes/clientside/css/enano-shared.css	Mon Apr 14 22:02:04 2008 -0400
@@ -794,12 +794,13 @@
 
 .abutton:hover {
   color: #f0f0f0 !important;
+  background-color: #606060;
 }
 
-.abutton_green       { color: #00aa00 !important; }
-.abutton_green:hover { background-color: #00aa00; }
-.abutton_blue        { color: #0000aa !important; }
-.abutton_blue:hover  { background-color: #0000aa; }
-.abutton_red         { color: #aa0000 !important; }
-.abutton_red:hover   { background-color: #aa0000; }
+.abutton_green       { color:            #008800 !important; }
+.abutton_green:hover { background-color: #008800 !important; }
+.abutton_blue        { color:            #000088 !important; }
+.abutton_blue:hover  { background-color: #000088 !important; }
+.abutton_red         { color:            #880000 !important; }
+.abutton_red:hover   { background-color: #880000 !important; }
 
--- a/includes/clientside/static/ajax.js	Mon Apr 14 12:13:12 2008 -0400
+++ b/includes/clientside/static/ajax.js	Mon Apr 14 22:02:04 2008 -0400
@@ -275,12 +275,12 @@
   var btn_submit = document.createElement('a');
   btn_submit.href = '#';
   btn_submit.appendChild(document.createTextNode($lang.get('etc_go')));
-  btn_submit.className = 'fakebutton fakebutton-submit';
+  btn_submit.className = 'abutton abutton_green';
   
   var btn_cancel = document.createElement('a');
   btn_cancel.href = '#';
   btn_cancel.appendChild(document.createTextNode($lang.get('etc_cancel')));
-  btn_cancel.className = 'fakebutton';
+  btn_cancel.className = 'abutton';
   
   btndiv.appendChild(btn_submit);
   btndiv.appendChild(document.createTextNode(' | '));
@@ -829,49 +829,6 @@
   return id;
 }
 
-/*
-function ajaxChangeStyle()
-{
-  // IE <6 pseudo-compatibility
-  if ( KILL_SWITCH )
-    return true;
-  var win = document.getElementById("cn2");
-  win.innerHTML = ' \
-    <form action="'+ENANO_SPECIAL_CHANGESTYLE+'" onsubmit="jws.closeWin(\'root2\');" method="post" style="text-align: center"> \
-    <h3>Select a theme...</h3>\
-    <select id="mdgThemeID" name="theme" onchange="ajaxGetStyles(this.value);"> \
-    '+ENANO_THEME_LIST+' \
-    </select> \
-    <div id="styleSelector"></div>\
-    <br /><br />\
-    <input type="hidden" name="return_to" value="'+title+'" />\
-    <input id="styleSubmitter" type="submit" style="display: none; font-weight: bold" value="Change theme" /> \
-    <input type="button" value="Cancel" onclick="jws.closeWin(\'root2\');" /> \
-    </form> \
-  ';
-  ajaxGetStyles(ENANO_CURRENT_THEME);
-  jws.openWin('root2', 340, 300);
-}
-
-function ajaxGetStyles(id) {
-  setAjaxLoading();
-  ajaxGet(stdAjaxPrefix+'&_mode=getstyles&id='+id, function() {
-    if ( ajax.readyState == 4 && ajax.status == 200 ) {
-      unsetAjaxLoading();
-      eval(ajax.responseText);
-      html = '<h3>And a style...</h3><select id="mdgStyleID" name="style">';
-      for(i=0;i<list.length;i++) {
-        lname = list[i].substr(0, 1).toUpperCase() + list[i].substr(1, list[i].length);
-        html = html + '<option value="'+list[i]+'">'+lname+'</option>';
-      }
-      html = html + '</select>';
-      document.getElementById('styleSelector').innerHTML = html;
-      document.getElementById('styleSubmitter').style.display = 'inline'; 
-    }
-  });
-}
-*/
-
 function ajaxSwapCSS()
 {
   // IE <6 pseudo-compatibility
--- a/includes/clientside/static/faders.js	Mon Apr 14 12:13:12 2008 -0400
+++ b/includes/clientside/static/faders.js	Mon Apr 14 22:02:04 2008 -0400
@@ -514,6 +514,145 @@
   miniPrompt(function(div) { div.innerHTML = 'hello world! <a href="#" onclick="miniPromptDestroy(this); return false;">destroy me</a>'; });
 }
 
+/**
+ * Message box system for miniPrompts. Less customization but easier to scale than the regular messageBox framework.
+ * @example
+ <code>
+ miniPromptMessage({
+   title: 'Delete page',
+   message: 'Do you really want to delete this page? This is reversible unless you clear the page logs.',
+   buttons: [
+     {
+       text: 'Delete',
+       color: 'red',
+       style: {
+         fontWeight: 'bold'
+       },
+       onclick: function() {
+         ajaxDeletePage();
+         miniPromptDestroy(this);
+       }
+     },
+     {
+       text: 'cancel',
+       onclick: function() {
+         miniPromptDestroy(this);
+       }
+     }
+   ]
+ });
+ </code>
+ */
+
+function miniPromptMessage(parms)
+{
+  if ( !parms.title || !parms.message || !parms.buttons )
+    return false;
+  
+  return miniPrompt(function(parent)
+    {
+      try
+      {
+        var h3 = document.createElement('h3');
+        h3.appendChild(document.createTextNode(parms.title));
+        var body = document.createElement('p');
+        var message = parms.message.split(unescape('%0A'));
+        for ( var i = 0; i < message.length; i++ )
+        {
+          body.appendChild(document.createTextNode(message[i]));
+          if ( i + 1 < message.length )
+            body.appendChild(document.createElement('br'));
+        }
+        
+        parent.style.textAlign = 'center';
+        
+        parent.appendChild(h3);
+        parent.appendChild(body);
+        parent.appendChild(document.createElement('br'));
+        
+        // construct buttons
+        for ( var i = 0; i < parms.buttons.length; i++ )
+        {
+          var button = parms.buttons[i];
+          button.input = document.createElement('a');
+          button.input.href = '#';
+          button.input.clickAction = button.onclick;
+          button.input.className = 'abutton';
+          if ( button.color )
+          {
+            button.input.className += ' abutton_' + button.color;
+          }
+          button.input.appendChild(document.createTextNode(button.text));
+          if ( button.style )
+          {
+            for ( var j in button.style )
+            {
+              button.input.style[j] = button.style[j];
+            }
+          }
+          button.input.onclick = function(e)
+          {
+            try
+            {
+              this.clickAction(e);
+            }
+            catch(e)
+            {
+              console.error(e);
+            }
+            return false;
+          }
+          parent.appendChild(button.input);
+        }
+        if ( parms.buttons[0] )
+        {
+          setTimeout(function()
+            {
+              parms.buttons[0].input.focus();
+            }, 300);
+        }
+      }
+      catch ( e )
+      {
+        console.error(e);
+      }
+    });
+}
+
+function testMPMessageBox()
+{
+  miniPromptMessage({
+    title: 'The Game of LIFE question #73',
+    message: 'You just got your girlfriend pregnant. Please select an option:',
+    buttons: [
+      {
+        text: 'Abort',
+        color: 'red',
+        style: {
+          fontWeight: 'bold'
+        },
+        onclick: function() {
+          miniPromptDestroy(this);
+        }
+      },
+      {
+        text: 'Retry',
+        color: 'blue',
+        onclick: function() {
+          miniPromptDestroy(this);
+        }
+      },
+      {
+        text: 'Ignore',
+        color: 'green',
+        onclick: function() {
+          miniPromptDestroy(this);
+        }
+      }
+    ]
+  });
+}
+
 // Function to fade classes info-box, warning-box, error-box, etc.
 
 function fadeInfoBoxes()
--- a/includes/clientside/static/misc.js	Mon Apr 14 12:13:12 2008 -0400
+++ b/includes/clientside/static/misc.js	Mon Apr 14 22:02:04 2008 -0400
@@ -630,4 +630,13 @@
   el.setAttribute('enano:expand', 'open');
 }
 
+/**
+ * Equivalent to PHP's explode function.
+ */
+
+function explode(needle, haystack)
+{
+  return haystack.split(needle);
+}
+
 addOnloadHook(expander_onload);