diff --git a/tracks/app/views/layouts/standard.rhtml b/tracks/app/views/layouts/standard.rhtml index a06a0283..e59ab075 100644 --- a/tracks/app/views/layouts/standard.rhtml +++ b/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" %> <%= auto_discovery_link_tag(:rss,{:controller => "feed", :action => "na_feed", :name => "#{@user.login}", :token => "#{@user.word}"}, {:title => "RSS feed of next actions"}) %> diff --git a/tracks/app/views/shared/_add_new_item_form.rhtml b/tracks/app/views/shared/_add_new_item_form.rhtml index be16896c..0b0d279e 100644 --- a/tracks/app/views/shared/_add_new_item_form.rhtml +++ b/tracks/app/views/shared/_add_new_item_form.rhtml @@ -20,10 +20,12 @@
- <% 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 -%>
<%= error_messages_for("item", :object_name => 'action') %>
@@ -83,16 +85,16 @@ if (contextNamesForAutoComplete.length > 1 || contextNamesForAutoComplete[0].len
-
-<% end -%> +<% end -%> <%= calendar_setup( "todo_due" ) %> <%= calendar_setup( "todo_show_from" ) %> -
+ \ No newline at end of file diff --git a/tracks/public/images/bigBlackWaiting.gif b/tracks/public/images/bigBlackWaiting.gif new file mode 100644 index 00000000..f12cca47 Binary files /dev/null and b/tracks/public/images/bigBlackWaiting.gif differ diff --git a/tracks/public/images/bigWaiting.gif b/tracks/public/images/bigWaiting.gif new file mode 100644 index 00000000..d72e9438 Binary files /dev/null and b/tracks/public/images/bigWaiting.gif differ diff --git a/tracks/public/images/blackWaiting.gif b/tracks/public/images/blackWaiting.gif new file mode 100644 index 00000000..cb91da83 Binary files /dev/null and b/tracks/public/images/blackWaiting.gif differ diff --git a/tracks/public/images/waiting.gif b/tracks/public/images/waiting.gif new file mode 100644 index 00000000..5e62d01a Binary files /dev/null and b/tracks/public/images/waiting.gif differ diff --git a/tracks/public/javascripts/protoload.js b/tracks/public/javascripts/protoload.js new file mode 100644 index 00000000..b98f2acb --- /dev/null +++ b/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); +} +/* */ \ No newline at end of file diff --git a/tracks/public/stylesheets/standard.css b/tracks/public/stylesheets/standard.css index 9004107d..75ff0b13 100644 --- a/tracks/public/stylesheets/standard.css +++ b/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; } \ No newline at end of file