From f8cbb60bf6636f77cbac55f082aec27fbbcc326e Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Fri, 6 Jan 2012 18:57:16 +0000
Subject: [PATCH] [#14,refactor][s]: move dialog and notification out of
 demo/index.html and into DataExplorer view template.

* Believe these are the last items that tie us to demo/index.html but could be wrong!
---
 demo/index.html           | 13 -------------
 demo/style/data-table.css |  4 ++--
 src/util.js               | 10 +++++-----
 src/view.js               | 11 +++++++++++
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 8567b4b8..71cc17e9 100755
--- a/demo/index.html
+++ b/demo/index.html
@@ -41,19 +41,6 @@
     -->
   </div>
   
-  <div id="notification-container">
-    <div id="notification">
-      <img src="images/small-spinner.gif" class="notification-loader"><span id="notification-message">Loading...</span>
-    </div>
-  </div>
-    
-  <div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
-  <div class="dialog ui-draggable" style="display: none; z-index: 102; top: 101px; ">
-    <div class="dialog-frame" style="width: 700px; visibility: visible; ">
-      <div class="dialog-content dialog-border"></div>
-    </div>
-  </div>
-  
   <script type='text/mustache' class="busyTemplate">
     <div id="loading-message">
       <img src="images/large-spinner.gif">
diff --git a/demo/style/data-table.css b/demo/style/data-table.css
index 39cbcde1..c455ce8b 100755
--- a/demo/style/data-table.css
+++ b/demo/style/data-table.css
@@ -173,7 +173,7 @@ a img {
   top: -4px;
 }
 
-#notification-container {
+.notification-container {
   width: 400px;
   left: 520px;
   display: none;
@@ -183,7 +183,7 @@ a img {
   text-align: center;
 }
 
-#notification {
+.notification {
   display: inline-block;
   margin: 0 auto;
   padding: 5px 8px 4px;
diff --git a/src/util.js b/src/util.js
index 6b37f755..2d20ce1e 100755
--- a/src/util.js
+++ b/src/util.js
@@ -153,11 +153,11 @@ var util = function() {
   
   function notify( message, options ) {
     if (!options) var options = {};
-    $('#notification-container').show();
-    $('#notification-message').text(message);
-    if (!options.loader) $('.notification-loader').hide();
-    if (options.loader) $('.notification-loader').show();
-    if (!options.persist) setTimeout(function() { $('#notification-container').hide() }, 3000);
+    $('.data-explorer .notification-container').show();
+    $('.data-explorer .notification-message').text(message);
+    if (!options.loader) $('.data-explorer .notification-loader').hide();
+    if (options.loader) $('.data-explorer .notification-loader').show();
+    if (!options.persist) setTimeout(function() { $('.data-explorer .notification-container').hide() }, 3000);
   }
 
   function formatMetadata(data) {
diff --git a/src/view.js b/src/view.js
index a26e21a7..c380318a 100644
--- a/src/view.js
+++ b/src/view.js
@@ -25,6 +25,17 @@ my.DataExplorer = Backbone.View.extend({
       </ul> \
     </div> \
     <div class="data-view-container"></div> \
+    <div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div> \
+    <div class="dialog ui-draggable" style="display: none; z-index: 102; top: 101px; "> \
+      <div class="dialog-frame" style="width: 700px; visibility: visible; "> \
+        <div class="dialog-content dialog-border"></div> \
+      </div> \
+    </div> \
+    <div class="notification-container"> \
+      <div class="notification"> \
+        <img src="images/small-spinner.gif" class="notification-loader"><span class="notification-message">Loading...</span> \
+      </div> \
+    </div> \
   ',
 
   events: {