Integrated protoload.js to facilitate easier ajax indicators.

Use it on the Add New Action form, and also prevent use of the form while an action is being added via Ajax. The latter aspect fixes #339.



git-svn-id: http://www.rousette.org.uk/svn/tracks-repos/trunk@562 a4c988fc-2ded-0310-b66e-134b36920a42

tracks/app/views/layouts/standard.rhtml

@@ -14,6 +14,7 @@
   <%= javascript_include_tag "accesskey-hints" %>
   <%= javascript_include_tag "todo-items" %>
   <%= javascript_include_tag "niftycube" %> 
+  <%= javascript_include_tag "protoload" %> 
   
   <link rel="shortcut icon" href="<%= url_for(:controller => 'favicon.ico') %>" />
   <%= auto_discovery_link_tag(:rss,{:controller => "feed", :action => "na_feed", :name => "#{@user.login}", :token => "#{@user.word}"}, {:title => "RSS feed of next actions"})  %>

tracks/app/views/shared/_add_new_item_form.rhtml

@@ -20,10 +20,12 @@
 
 <div id="todo_new_action" style="display:block">
 
-<!--[form:todo]-->
 <% form_remote_tag(
     :url => todos_path, :method => :post,
-    :html=> { :id=>'todo-form-new-action', :name=>'todo', :class => 'inline-form' }) do -%>
+    :html=> { :id=>'todo-form-new-action', :name=>'todo', :class => 'inline-form' },
+    :before => "$('todo_new_action_submit').startWaiting()",
+    :complete => "$('todo_new_action_submit').stopWaiting()",
+    :condition => "!$('todo_new_action_submit').isWaiting()") do -%>
 
 <div id="status"><%= error_messages_for("item", :object_name => 'action') %></div>
 
@@ -83,16 +85,16 @@ if (contextNamesForAutoComplete.length > 1 || contextNamesForAutoComplete[0].len
 
 <div class="submit_box">
   <div class="widgets">
-    <button type="submit" class="positive">
+    <button type="submit" class="positive" id="todo_new_action_submit">
         <img src="/images/accept.png" alt=""/> 
         Add action
     </button>
   </div>
 </div>
-<% end -%><!--[eoform:todo]-->
+<% end -%>
 
                   
 <%= calendar_setup( "todo_due"  ) %>
 <%= calendar_setup( "todo_show_from"  ) %>
-</div><!-- [end:todo-new-action] -->
+</div>
 </div>

tracks/public/javascripts/protoload.js

@@ -0,0 +1,82 @@
+/* protoload 0.1 beta by Andreas Kalsch
+ * last change: 09.07.2007
+ *
+ * This simple piece of code automates the creating of Ajax loading symbols.
+ * The loading symbol covers an HTML element with correct position and size - example:
+ * $('myElement').startWaiting() and $('myElement').stopWaiting()
+ */
+ 
+Protoload = {
+	// the script to wait this amount of msecs until it shows the loading element
+	timeUntilShow: 250,
+	
+	// opacity of loading element
+	opacity: 0.8,
+
+	// Start waiting status - show loading element
+	startWaiting: function(element, className, timeUntilShow) {
+		if (typeof element == 'string')
+			element = document.getElementById(element);
+		if (className == undefined)
+			className = 'waiting';
+		if (timeUntilShow == undefined)
+			timeUntilShow = Protoload.timeUntilShow;
+		
+		element._waiting = true;
+		if (!element._loading) {
+			var e = document.createElement('div');
+			(element.offsetParent || document.body).appendChild(element._loading = e);
+			e.style.position = 'absolute';
+			try {e.style.opacity = Protoload.opacity;} catch(e) {}
+			try {e.style.MozOpacity = Protoload.opacity;} catch(e) {}
+			try {e.style.filter = 'alpha(opacity='+Math.round(Protoload.opacity * 100)+')';} catch(e) {}
+			try {e.style.KhtmlOpacity = Protoload.opacity;} catch(e) {}
+			
+			/*var zIndex = 0;
+			if (window.UI)
+				if (UI.zIndex)
+					zIndex = ++UI.zIndex;
+			if (!zIndex)
+				zIndex = ++Protoload._zIndex;
+			e.style.zIndex = zIndex;*/
+		}
+		element._loading.className = className;
+		window.setTimeout((function() {
+			if (this._waiting) {
+				var left = this.offsetLeft, 
+					top = this.offsetTop,
+					width = this.offsetWidth,
+					height = this.offsetHeight,
+					l = this._loading;
+					
+				l.style.left = left+'px';
+				l.style.top = top+'px';
+				l.style.width = width+'px';
+				l.style.height = height+'px';
+				l.style.display = 'inline';
+			}
+		}).bind(element), timeUntilShow);
+	},
+	
+	// Get current waiting status
+	isWaiting: function(element) {
+	  return element._waiting == true;
+	},
+	
+	// Stop waiting status - hide loading element
+	stopWaiting: function(element) {
+		if (element._waiting) {
+			element._waiting = false;
+			element._loading.parentNode.removeChild(element._loading);
+			element._loading = null;
+		}
+	}/*,
+	
+	_zIndex: 1000000*/
+};
+
+if (Prototype) {
+	Element.addMethods(Protoload);
+	Object.extend(Element, Protoload);
+}
+/* */

tracks/public/stylesheets/standard.css

@@ -1004,4 +1004,31 @@ button.positive, .widgets a.positive{
     background-color:#d12f19;
     border:1px solid #d12f19;
     color:#fff;
+}
+.waiting {
+	background-image:url('/images/waiting.gif');
+	background-repeat:no-repeat;
+	background-position:center center;
+	background-color:white;
+}
+
+.bigWaiting {
+	background-image:url('/images/bigWaiting.gif');
+	background-repeat:no-repeat;
+	background-position:center 20%;
+	background-color:white;
+}
+
+.blackWaiting {
+	background-image:url('/images/blackWaiting.gif');
+	background-repeat:no-repeat;
+	background-position:center center;
+	background-color:black;
+}
+
+.bigBlackWaiting {
+	background-image:url('/images/bigBlackWaiting.gif');
+	background-repeat:no-repeat;
+	background-position:center center;
+	background-color:black;
 }