Quite a few changes in this revision:

1. The contexts and projects lists are now drag and droppable. In other words, if you visit [tracks_url]/projects or [tracks_url]/contexts, you can grab the 'DRAG' handle with the mouse and drag and drop the projects or contexts into your preferred order. At the same time, this re-orders the 'position' column appropriately, so that changes in order will be reflected on other pages. '''NB''': At the moment, deleting projects and contexts is a bit buggy. The item doesn't disappear, but if you refresh the page it will update appropriately. Also, if you add a new item, you can't drag it until you refresh. I'll try to fix these things. Fixes #115.
2. Fixed typo of 'tomorrow' due date label. Fixes #131
3. I updated the syntax for some of the visual effects to use the new {{{visual_effect(:fade, 'element')}}} syntax. Also removed the javascript files effects2 and prototype-ex, which aren't used now. 


git-svn-id: http://www.rousette.org.uk/svn/tracks-repos/trunk@148 a4c988fc-2ded-0310-b66e-134b36920a42
This commit is contained in:
bsag 2005-10-09 17:51:31 +00:00
parent 86b8753c17
commit 5ce97df3f4
16 changed files with 78 additions and 519 deletions

View file

@ -72,36 +72,15 @@ class ContextController < ApplicationController
end
end
# Methods for changing the sort order of the contexts in the list
# Methods for changing the sort order of the projects in the list
#
def move_up
check_user_set_context
@context.move_higher
@context.save
redirect_to(:controller => "context", :action => "list")
def order
@params["list-contexts"].each_with_index do |id, position|
Context.update(id, :position => position + 1)
end
render_text ""
end
def move_down
check_user_set_context
@context.move_lower
@context.save
redirect_to(:controller => "context", :action => "list")
end
def move_top
check_user_set_context
@context.move_to_top
@context.save
redirect_to(:controller => "context", :action => "list")
end
def move_bottom
check_user_set_context
@context.move_to_bottom
@context.save
redirect_to(:controller => "context", :action => "list" )
end
protected
def check_user_set_context

View file

@ -71,34 +71,13 @@ class ProjectController < ApplicationController
# Methods for changing the sort order of the projects in the list
#
def move_up
check_user_set_project
@project.move_higher
@project.save
redirect_to(:controller => "project", :action => "list")
def order
@params["list-projects"].each_with_index do |id, position|
Project.update(id, :position => position + 1)
end
render_text ""
end
def move_down
check_user_set_project
@project.move_lower
@project.save
redirect_to(:controller => "project", :action => "list")
end
def move_top
check_user_set_project
@project.move_to_top
@project.save
redirect_to(:controller => "project", :action => "list")
end
def move_bottom
check_user_set_project
@project.move_to_bottom
@project.save
redirect_to(:controller => "project", :action => "list" )
end
protected
def check_user_set_project
@ -118,8 +97,7 @@ class ProjectController < ApplicationController
render_text ""
end
end
def init
@user = @session['user']
@projects = @user.projects

View file

@ -51,7 +51,7 @@ module ApplicationHelper
when 0
"<a title='" + format_date(due) + "'><span class=\"amber\">Due Today</span></a> "
when 1
"<a title='" + format_date(due) + "'><span class=\"amber\">Due Tommorrow</span></a> "
"<a title='" + format_date(due) + "'><span class=\"amber\">Due Tomorrow</span></a> "
# due 2-7 days away
when 2..7
"<a title='" + format_date(due) + "'><span class=\"orange\">Due in " + @days.to_s + " days</span></a> "

View file

@ -12,7 +12,7 @@ module TodoHelper
:update => "completed",
:position => "top",
:loading => "Form.disable('checkbox-notdone-#{item.id}');",
:complete => "new Effect2.Fade('item-#{item.id}-container', true);"
:complete => visual_effect(:fade, "item-#{item.id}-container")
)
end
@ -22,7 +22,7 @@ module TodoHelper
:update => "new_actions",
:position => "bottom",
:loading => "Form.disable('checkbox-done-#{item.id}');",
:complete => "Element.toggle('new_actions');new Effect2.Fade('done-item-#{item.id}-container', true);"
:complete => "Element.toggle('new_actions');new Effect.Fade('done-item-#{item.id}-container');"
)
end
@ -30,7 +30,7 @@ module TodoHelper
form_remote_tag( :url => { :controller => 'todo', :action => 'update_action', :id => item.id },
:html => { :id => "form-action-#{item.id}", :class => "inline-form" },
:update => "item-#{item.id}-container",
:complete => "new Effect.Appear('item-#{item.id}-container');"
:complete => visual_effect(:appear, "item-#{item.id}-container")
)
end
@ -40,7 +40,7 @@ module TodoHelper
str << " Form.focusFirstElement('form-action-#{item.id}')"
link_to_remote( image_tag("blank", :title =>"Delete action", :class=>"delete_item"),
:update => "item-#{item.id}-container",
:loading => "new Effect2.Fade('item-#{item.id}-container', true)",
:loading => visual_effect(:fade, "item-#{item.id}-container"),
:url => { :controller => "todo", :action => "destroy_action", :id => item.id },
:confirm => "Are you sure that you want to delete the action, \'#{item.description}\'?") + " " +
link_to_function(image_tag( "blank", :title => "Edit action", :class => "edit_item"),
@ -50,7 +50,7 @@ module TodoHelper
def link_to_remote_todo_done( item )
link_to_remote( image_tag("blank", :title =>"Delete action", :class=>"delete_item"),
:update => "done-item-#{item.id}-container",
:loading => "new Effect2.Fade('done-item-#{item.id}-container', true)",
:loading => visual_effect(:fade, "done-item-#{item.id}-container"),
:url => { :controller => "todo", :action => "destroy_action", :id => item.id },
:confirm => "Are you sure that you want to delete the action \'#{item.description}\'?" ) +
"<a>" + image_tag("blank") + "</a> "

View file

@ -1,21 +1,10 @@
<% context = context_listing %>
<div id="context-<%= context.id %>-container">
<div id="container_<%= context.id %>">
<!-- %= error_messages_for 'context' % -->
<div id="context-<%= context.id %>-display">
<% if context.position % 2 == 0 %>
<div id="context-<%= context.id %>-display" class="list">
<div id="context-<%= context.id %>" class="even_row" style="display:'';">
<% else %>
<div id="context-<%= context.id %>" class="odd_row" style="display:'';">
<% end %>
<div class="position">
<%= link_to(image_tag("blank", :title=>"Move to top", :border=>"0", :width=>"16", :height=>"16"),
{:action => "move_top", :id => context.id}, :title => "Move to top", :class=>"to_top") %>
<%= link_to(image_tag("blank", :title=>"Move up", :border=>"0", :width=>"16", :height=>"16"),
{:action => "move_up", :id => context.id}, :title => "Move up", :class=>"up" ) %>
<%= link_to(image_tag("blank", :title=>"Move down", :border=>"0", :width=>"16", :height=>"16"),
{:action => "move_down", :id => context.id}, :title => "Move down", :class=>"down") %>
<%= link_to(image_tag("blank", :title=>"Move to bottom", :border=>"0", :width=>"16", :height=>"16"),
{:action => "move_bottom", :id => context.id}, :title => "Move to bottom", :class=>"to_bottom") %>
<span class="handle">DRAG</span>
</div>
<div class="data">
<%= link_to( sanitize("#{context.name}"), :action => "show", :name => urlize(context.name) ) %>
@ -30,9 +19,10 @@
<% end %>
<%= link_to_remote( image_tag("blank", :title =>"Delete context", :class=>"delete_item"),
:update => "context-#{context.id}-container",
:loading => "new Effect2.Fade('context-#{context.id}-container', true)",
:url => { :controller => "context", :action => "destroy", :id => context.id }, :confirm => "Are you sure that you want to delete the context \'#{context.name}\'?" ) + " " +
:update => "container_#{context.id}",
:loading => visual_effect(:fade, 'container_#{context.id}'),
:url => { :controller => "context", :action => "destroy", :id => context.id },
:confirm => "Are you sure that you want to delete the context \'#{context.name}\'?" ) + " " +
link_to_function( image_tag( "blank", :title => "Edit context", :class=>"edit_item"), "Element.toggle('context-#{context.id}','context-#{context.id}-edit-form'); new Effect.Appear('context-#{context.id}-edit-form'); Form.focus_first('form-context-#{context.id}');" ) %>
</div>
</div><!-- [end:context-context.id] -->
@ -41,8 +31,8 @@
<div id="context-<%= context.id %>-edit-form" class="edit-form" style="display:none;">
<%= form_remote_tag :url => { :controller => 'context', :action => 'update', :id => context.id },
:html => { :id => "form-context-#{context.id}", :class => "inline-form" },
:update => "context-#{context.id}-container",
:complete => "new Effect.Appear('context-#{context.id}-container');" %>
:update => "container_#{context.id}",
:complete => visual_effect(:appear, 'container_#{context.id}') %>
<%= render_partial 'context_form', context %>
<div class="buttons">
<input type="submit" value="Update" />

View file

@ -6,7 +6,7 @@
:update => "completed",
:position => "top",
:loading => "Form.disable('checkbox-notdone-#{item.id}');",
:complete => "new Effect2.Fade('item-#{item.id}-container', true);"
:complete => "new Effect.Fade('item-#{item.id}-container', true);"
) %>
<div id="item-<%= item.id %>">
@ -14,7 +14,7 @@
<%=
link_to_remote( image_tag("blank", :title =>"Delete this action", :class=>"delete_item"),
:update => "item-#{item.id}-container",
:loading => "new Effect2.Fade('item-#{item.id}-container', true)",
:loading => "new Effect.Fade('item-#{item.id}-container', true)",
:url => { :controller => "todo", :action => "destroy_action", :id => item.id }, :confirm => "Are you sure that you want to delete the action \'#{item.description}\'?" ) + " " +
link_to_function(image_tag( "blank", :title => "Edit item", :class=>"edit_item"), "Element.toggle('item-#{item.id}','action-#{item.id}-edit-form'); new Effect.Appear('action-#{item.id}-edit-form'); Form.focusFirstElement('form-action-#{item.id}');" ) + " "
%>
@ -61,7 +61,7 @@
:update => "next_actions",
:position => "bottom",
:loading => "Form.disable('checkbox-done-#{item.id}');",
:complete => "new Effect2.Fade('done-item-#{item.id}-container', true);"
:complete => "new Effect.Fade('done-item-#{item.id}-container', true);"
) %>
<div id="done-item-<%= item.id %>">
@ -69,7 +69,7 @@
<%=
link_to_remote( image_tag("blank", :title =>"Delete this action", :class=>"delete_item"),
:update => "done-item-#{item.id}-container",
:loading => "new Effect2.Fade('done-item-#{item.id}-container', true)",
:loading => "new Effect.Fade('done-item-#{item.id}-container', true)",
:url => { :controller => "todo", :action => "destroy_action", :id => item.id }, :confirm => "Are you sure that you want to delete the action \'#{item.description}\'?" ) + " "
%>
<%= image_tag("blank") %>

View file

@ -6,6 +6,12 @@
<% end %>
</div>
<%= sortable_element 'list-contexts',
:tag => 'div',
:handle => 'handle',
:complete => visual_effect(:highlight, 'list-contexts'),
:url => {:controller => 'context', :action => 'order'}
%>
<br />
<a href="javascript:void(0)" onClick="Element.toggle('context_new'); Form.focus_first('context-form');" accesskey="n" title="Create a new context [Alt+n]">Create new context &#187;</a>
<div id="context_new" class="context_new" style="display:none">

View file

@ -5,8 +5,9 @@
<%= stylesheet_link_tag "standard" %>
<%= javascript_include_tag "toggle_notes" %>
<%= javascript_include_tag "prototype" %>
<%= javascript_include_tag "prototype-ex" %>
<%= javascript_include_tag "effects2" %>
<%= javascript_include_tag "effects" %>
<%= javascript_include_tag "dragdrop" %>
<%= javascript_include_tag "controls" %>
<%= stylesheet_link_tag 'calendar-system.css' %>
<%= javascript_include_tag 'calendar', 'calendar-en', 'calendar-setup' %>

View file

@ -8,7 +8,7 @@
<div class="note_footer">
<%= link_to_remote( image_tag("blank", :title =>"Delete this note", :class=>"delete_item"),
:update => "note-#{note.id}",
:loading => "new Effect2.Fade('note-#{note.id}-container', true)",
:loading => "new Effect.Fade('note-#{note.id}-container', true)",
:complete => "Element.remove('note-#{note.id}-wrapper');",
:url => { :controller => "note", :action => "delete", :id => note.id },
:confirm => "Are you sure that you want to delete the note \'#{note.id.to_s}\'?" ) + "&nbsp;"%><%= link_to_function(image_tag( "blank", :title => "Edit item", :class=>"edit_item"),

View file

@ -1,21 +1,10 @@
<% project = project_listing %>
<div id="project-<%= project.id %>-container">
<div id="container_<%= project.id %>">
<!-- %= error_messages_for 'project' % -->
<div id="project-<%= project.id %>-display" class="list">
<% if project.position % 2 == 0 %>
<div id="project-<%= project.id %>" class="even_row" style="display:'';">
<% else %>
<div id="project-<%= project.id %>" class="odd_row" style="display:'';">
<% end %>
<div class="position">
<%= link_to(image_tag("blank", :title=>"Move to top", :border=>"0", :width=>"16", :height=>"16"),
{:action => "move_top", :id => project.id}, :title => "Move to top", :class=>"to_top") %>
<%= link_to(image_tag("blank", :title=>"Move up", :border=>"0", :width=>"16", :height=>"16"),
{:action => "move_up", :id => project.id}, :title => "Move up", :class=>"up" ) %>
<%= link_to(image_tag("blank", :title=>"Move down", :border=>"0", :width=>"16", :height=>"16"),
{:action => "move_down", :id => project.id}, :title => "Move down", :class=>"down") %>
<%= link_to(image_tag("blank", :title=>"Move to bottom", :border=>"0", :width=>"16", :height=>"16"),
{:action => "move_bottom", :id => project.id}, :title => "Move to bottom", :class=>"to_bottom") %>
<span class="handle">DRAG</span>
</div>
<div class="data">
<%= link_to( sanitize("#{project.name}"), :action => "show", :name => urlize(project.name) ) %><%= " (" + project.count_undone_todos("actions") + ")" %>
@ -28,9 +17,10 @@
<% end -%>
<%= link_to_remote( image_tag("blank", :title =>"Delete project", :class=>"delete_item"),
:update => "project-#{project.id}-container",
:loading => "new Effect2.Fade('project-#{project.id}-container', true)",
:url => { :controller => "project", :action => "destroy", :id => project.id }, :confirm => "Are you sure that you want to delete the project \'#{project.name}\'?" ) + " " +
:update => "container_#{project.id}",
:loading => visual_effect(:fade, 'container_#{project.id}'),
:url => { :controller => "project", :action => "destroy", :id => project.id },
:confirm => "Are you sure that you want to delete the project \'#{project.name}\'?" ) + " " +
link_to_function(image_tag( "blank", :title => "Edit item", :class=>"edit_item"), "Element.toggle('project-#{project.id}','project-#{project.id}-edit-form'); new Effect.Appear('project-#{project.id}-edit-form'); Form.focus_first('form-project-#{project.id}');" ) %>
</div>
</div><!-- [end:project-project.id] -->
@ -39,8 +29,8 @@
<div id="project-<%= project.id %>-edit-form" class="edit-form" style="display:none;">
<%= form_remote_tag :url => { :controller => 'project', :action => 'update', :id => project.id },
:html => { :id => "form-project-#{project.id}", :class => "form" },
:update => "project-#{project.id}-container",
:complete => "new Effect.Appear('project-#{project.id}-container');" %>
:update => "container_#{project.id}",
:complete => visual_effect(:appear, 'container_#{project.id}') %>
<%= render_partial 'project_form', project %>
<div class="buttons">
<input type="submit" value="Update" />
@ -48,7 +38,7 @@
</div>
<%= end_form_tag %>
</div><!-- [end:project-project.id-edit-form] -->
</div><!-- [end:project-project.id-container] -->
</div><!-- [end:container_project.id] -->
<% if controller.action_name == 'new_project' %>
<script>
new Effect.Appear('project-<%= project.id %>');

View file

@ -6,7 +6,7 @@
:update => "completed",
:position => "top",
:loading => "Form.disable('checkbox-notdone-#{item.id}');",
:complete => "new Effect2.Fade('item-#{item.id}-container', true);"
:complete => "new Effect.Fade('item-#{item.id}-container', true);"
) %>
<div id="item-<%= item.id %>">
@ -14,7 +14,7 @@
<%=
link_to_remote( image_tag("blank", :title =>"Delete action", :class=>"delete_item"),
:update => "item-#{item.id}-container",
:loading => "new Effect2.Fade('item-#{item.id}-container', true)",
:loading => "new Effect.Fade('item-#{item.id}-container', true)",
:url => { :controller => "todo", :action => "destroy_action", :id => item.id }, :confirm => "Are you sure that you want to delete the action \'#{item.description}\'?" ) + " " +
link_to_function(image_tag( "blank", :title => "Edit action", :class=>"edit_item"), "Element.toggle('item-#{item.id}','action-#{item.id}-edit-form'); new Effect.Appear('action-#{item.id}-edit-form'); Form.focusFirstElement('form-action-#{item.id}');" ) + " "
%>
@ -63,7 +63,7 @@
:update => "next_actions",
:position => "bottom",
:loading => "Form.disable('checkbox-done-#{item.id}');",
:complete => "new Effect2.Fade('done-item-#{item.id}-container', true);"
:complete => "new Effect.Fade('done-item-#{item.id}-container', true);"
) %>
<div id="done-item-<%= item.id %>">
@ -71,7 +71,7 @@
<%=
link_to_remote( image_tag("blank", :title =>"Delete action", :class=>"delete_item"),
:update => "done-item-#{item.id}-container",
:loading => "new Effect2.Fade('done-item-#{item.id}-container', true)",
:loading => "new Effect.Fade('done-item-#{item.id}-container', true)",
:url => { :controller => "todo", :action => "destroy_action", :id => item.id }, :confirm => "Are you sure that you want to delete the action \'#{item.description}\'?" ) + " "
%>
</div><!-- [end:big-box] -->

View file

@ -6,6 +6,12 @@
<% end %>
</div>
<%= sortable_element 'list-projects',
:tag => 'div',
:handle => 'handle',
:complete => visual_effect(:highlight, 'list-projects'),
:url => {:controller => 'project', :action => 'order'}
%>
<br />
<a href="javascript:void(0)" onClick="Element.toggle('project_new'); Form.focus_first('project-form');" accesskey="n" title="Create a new project [Alt+n]">Create new project &#187;</a>
<div id="project_new" class="project_new" style="display:none">

View file

@ -26,6 +26,7 @@ ActionController::Routing::Routes.draw do |map|
map.connect 'context/new_context', :controller => 'context', :action => 'new_context'
map.connect 'context/add_item', :controller => 'context', :action => 'add_item'
map.connect 'contexts', :controller => 'context', :action => 'list'
map.connect 'context/order', :controller => 'context', :action => 'order'
map.connect 'context/:name', :controller => 'context', :action => 'show'
map.connect 'context/:id', :controller=> 'context', :action => 'show'
@ -34,6 +35,7 @@ ActionController::Routing::Routes.draw do |map|
map.connect 'project/add_item/:id', :controller => 'project', :action => 'add_item'
map.connect 'project/toggle_check/:id', :controller => 'project', :action => 'toggle_check'
map.connect 'projects', :controller => 'project', :action => 'list'
map.connect 'project/order', :controller => 'project', :action => 'order'
map.connect 'project/:name', :controller => 'project', :action => 'show'
map.connect 'project/:id', :controller => 'project', :action => 'show'

View file

@ -1,349 +0,0 @@
// Copyright (c) 2005 Thomas Fuchs (http://mir.aculo.us)
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Effect2 = {}
/* ------------- transitions ------------- */
Effect2.Transitions = {}
Effect2.Transitions.linear = function(pos) {
return pos;
}
Effect2.Transitions.sinoidal = function(pos) {
return (-Math.cos(pos*Math.PI)/2) + 0.5;
}
Effect2.Transitions.reverse = function(pos) {
return 1-pos;
}
Effect2.Transitions.flicker = function(pos) {
return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random(0.25);
}
Effect2.Transitions.wobble = function(pos) {
return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
}
/* ------------- core effects ------------- */
Effect2.Base = function() {};
Effect2.Base.prototype = {
setOptions: function(options) {
this.options = {
transition: Effect2.Transitions.sinoidal,
duration: 1.0, // seconds
fps: 25.0, // max. 100fps
sync: false, // true for combining
from: 0.0,
to: 1.0
}.extend(options || {});
},
start: function(options) {
this.setOptions(options || {});
this.currentFrame = 0;
this.startOn = new Date().getTime();
this.finishOn = this.startOn + (this.options.duration*1000);
if(this.options.beforeStart) this.options.beforeStart(this);
if(!this.options.sync) this.loop();
},
loop: function() {
timePos = new Date().getTime();
if(timePos >= this.finishOn) {
this.render(this.options.to);
if(this.finish) this.finish();
if(this.options.afterFinish) this.options.afterFinish(this);
return;
}
pos = (timePos - this.startOn) / (this.finishOn - this.startOn);
frame = Math.round(pos * this.options.fps * this.options.duration);
if(frame > this.currentFrame) {
this.render(pos);
this.currentFrame = frame;
}
this.timeout = setTimeout(this.loop.bind(this), 10);
},
render: function(pos) {
if(this.options.transition) pos = this.options.transition(pos);
pos = pos * (this.options.to-this.options.from);
pos += this.options.from;
if(this.options.beforeUpdate) this.options.beforeUpdate(this);
if(this.update) this.update(pos);
if(this.options.afterUpdate) this.options.afterUpdate(this);
},
cancel: function() {
if(this.timeout) clearTimeout(this.timeout);
}
}
Effect2.Parallel = Class.create();
Effect2.Parallel.prototype = (new Effect2.Base()).extend({
initialize: function(effects) {
this.effects = effects || [];
this.start(arguments[1]);
},
update: function(position) {
for (var i = 0; i < this.effects.length; i++)
this.effects[i].render(position);
},
finish: function(position) {
for (var i = 0; i < this.effects.length; i++)
if(this.effects[i].finish) this.effects[i].finish(position);
}
});
Effect2.Opacity = Class.create();
Effect2.Opacity.prototype = (new Effect2.Base()).extend({
initialize: function() {
this.element = $(arguments[0] || document.rootElement);
options = {
from: 0.0,
to: 1.0
}.extend(arguments[1] || {});
this.start(options);
},
update: function(position) {
this.setOpacity(position);
},
setOpacity: function(opacity) {
opacity = (opacity == 1) ? 0.99999 : opacity;
this.element.style.opacity = opacity;
this.element.style.filter = "alpha(opacity:"+opacity*100+")";
}
});
Effect2.MoveBy = Class.create();
Effect2.MoveBy.prototype = (new Effect2.Base()).extend({
initialize: function(element, toTop, toLeft) {
this.element = $(element);
this.originalTop =
this.element.style.top ? parseFloat(this.element.style.top) : 0;
this.originalLeft =
this.element.style.left ? parseFloat(this.element.style.left) : 0;
this.toTop = toTop;
this.toLeft = toLeft;
if(this.element.style.position == "")
this.element.style.position = "relative";
this.start(arguments[3]);
},
update: function(position) {
topd = this.toTop * position + this.originalTop;
leftd = this.toLeft * position + this.originalLeft;
this.setPosition(topd, leftd);
},
setPosition: function(topd, leftd) {
this.element.style.top = topd + "px";
this.element.style.left = leftd + "px";
}
});
Effect2.Scale = Class.create();
Effect2.Scale.prototype = (new Effect2.Base()).extend({
initialize: function(element, percent) {
this.element = $(element)
options = {
scaleX: true,
scaleY: true,
scaleContent: true,
scaleFromCenter: false,
scaleMode: 'box', // 'box' or 'contents'
scaleFrom: 100.0
}.extend(arguments[2] || {});
this.originalTop = this.element.offsetTop;
this.originalLeft = this.element.offsetLeft;
if (this.element.style.fontSize=="") this.sizeEm = 1.0;
if (this.element.style.fontSize && this.element.style.fontSize.indexOf("em")>0)
this.sizeEm = parseFloat(this.element.style.fontSize);
this.factor = (percent/100.0) - (options.scaleFrom/100.0);
if(options.scaleMode=='box') {
this.originalHeight = this.element.clientHeight;
this.originalWidth = this.element.clientWidth;
} else
if(options.scaleMode=='contents') {
this.originalHeight = this.element.scrollHeight;
this.originalWidth = this.element.scrollWidth;
}
this.start(options);
},
update: function(position) {
currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
if(this.options.scaleContent && this.sizeEm)
this.element.style.fontSize = this.sizeEm*currentScale + "em";
this.setDimensions(
this.originalWidth * currentScale,
this.originalHeight * currentScale);
},
setDimensions: function(width, height) {
if(this.options.scaleX) this.element.style.width = width + 'px';
if(this.options.scaleY) this.element.style.height = height + 'px';
if(this.options.scaleFromCenter) {
topd = (height - this.originalHeight)/2;
leftd = (width - this.originalWidth)/2;
if(this.element.style.position=='absolute') {
if(this.options.scaleY) this.element.style.top = this.originalTop-topd + "px";
if(this.options.scaleX) this.element.style.left = this.originalLeft-leftd + "px";
} else {
if(this.options.scaleY) this.element.style.top = -topd + "px";
if(this.options.scaleX) this.element.style.left = -leftd + "px";
}
}
}
});
/* ------------- prepackaged effects ------------- */
Effect2.Fade = function(element) {
options = {
from: 1.0,
to: 0.0,
afterFinish: function(effect)
{ Element.hide(effect.element);
effect.setOpacity(1); }
}.extend(arguments[1] || {});
new Effect2.Opacity(element,options);
}
Effect2.Appear = function(element) {
options = {
from: 0.0,
to: 1.0,
beforeStart: function(effect)
{ effect.setOpacity(0);
Element.show(effect.element); },
afterUpdate: function(effect)
{ Element.show(effect.element); }
}.extend(arguments[1] || {});
new Effect2.Opacity(element,options);
}
Effect2.Puff = function(element) {
new Effect2.Parallel(
[ new Effect2.Scale(element, 200, { sync: true, scaleFromCenter: true }),
new Effect2.Opacity(element, { sync: true, to: 0.0, from: 1.0 } ) ],
{ duration: 1.0,
afterUpdate: function(effect)
{ effect.effects[0].element.style.position = 'absolute'; },
afterFinish: function(effect)
{ Element.hide(effect.effects[0].element); }
}
);
}
Effect2.BlindUp = function(element) {
$(element).style.overflow = 'hidden';
new Effect2.Scale(element, 0,
{ scaleContent: false,
scaleX: false,
afterFinish: function(effect)
{ Element.hide(effect.element) }
}.extend(arguments[1] || {})
);
}
Effect2.BlindDown = function(element) {
$(element).style.height = '0px';
$(element).style.overflow = 'hidden';
Element.show(element);
new Effect2.Scale(element, 100,
{ scaleContent: false,
scaleX: false,
scaleMode: 'contents',
scaleFrom: 0
}.extend(arguments[1] || {})
);
}
Effect2.SwitchOff = function(element) {
new Effect2.Appear(element,
{ duration: 0.4,
transition: Effect2.Transitions.flicker,
afterFinish: function(effect)
{ effect.element.style.overflow = 'hidden';
new Effect2.Scale(effect.element, 1,
{ duration: 0.3, scaleFromCenter: true,
scaleX: false, scaleContent: false,
afterUpdate: function(effect) {
if(effect.element.style.position=="")
effect.element.style.position = 'relative'; },
afterFinish: function(effect) { Element.hide(effect.element); }
} )
}
} )
}
Effect2.DropOut = function(element) {
new Effect2.Parallel(
[ new Effect2.MoveBy(element, 100, 0, { sync: true }),
new Effect2.Opacity(element, { sync: true, to: 0.0, from: 1.0 } ) ],
{ duration: 0.5,
afterFinish: function(effect)
{ Element.hide(effect.effects[0].element); }
});
}
Effect2.Shake = function(element) {
new Effect2.MoveBy(element, 0, 20,
{ duration: 0.05, afterFinish: function(effect) {
new Effect2.MoveBy(effect.element, 0, -40,
{ duration: 0.1, afterFinish: function(effect) {
new Effect2.MoveBy(effect.element, 0, 40,
{ duration: 0.1, afterFinish: function(effect) {
new Effect2.MoveBy(effect.element, 0, -40,
{ duration: 0.1, afterFinish: function(effect) {
new Effect2.MoveBy(effect.element, 0, 40,
{ duration: 0.1, afterFinish: function(effect) {
new Effect2.MoveBy(effect.element, 0, -20,
{ duration: 0.05, afterFinish: function(effect) {
}}) }}) }}) }}) }}) }});
}
Effect2.SlideDown = function(element) {
$(element).style.height = '0px';
$(element).style.overflow = 'hidden';
$(element).childNodes[0].style.position = 'relative';
Element.show(element);
new Effect2.Scale(element, 100,
{ scaleContent: false,
scaleX: false,
scaleMode: 'contents',
scaleFrom: 0,
afterUpdate: function(effect)
{ effect.element.firstChild.style.bottom =
(effect.originalHeight - effect.element.clientHeight) + 'px'; }
}.extend(arguments[1] || {})
);
}
Effect2.SlideUp = function(element) {
$(element).style.overflow = 'hidden';
$(element).childNodes[0].style.position = 'relative';
Element.show(element);
new Effect2.Scale(element, 0,
{ scaleContent: false,
scaleX: false,
afterUpdate: function(effect)
{ effect.element.firstChild.style.bottom =
(effect.originalHeight - effect.element.clientHeight) + 'px'; },
afterFinish: function(effect)
{ Element.hide(effect.element); }
}.extend(arguments[1] || {})
);
}

View file

@ -1,55 +0,0 @@
/* Form extensions - prototype-ex by Matt McCray
<http://darthapo.com/repos/prototype-ex.html> */
Form.extend( {
disable: function( form ) {
var elements = Form.getElements( form );
for(var i=0; i<elements.length; i++)
{
elements[i].blur();
elements[i].disable = 'true';
}
},
focus_first: function( form )
{
form = $(form);
var elements = Form.getElements( form );
for( var i=0; i<elements.length; i++ ) {
var elem = elements[i];
if( elem.type != 'hidden' && !elem.disabled) {
Field.activate( elem );
break;
}
}
},
reset: function( form )
{
$(form).reset();
}
});
/*--------------------------------------------------------------------------*/
Field.extend({
select: function(element) {
$(element).select();
},
activate: function(element) {
$(element).focus();
$(element).select();
}
});
var Action = {
do_submit: function(form) {
// calling form.submit seems to override the onsubmit handler...
$(form).onsubmit();
},
};

View file

@ -365,6 +365,8 @@ li {
.even_row {
background: #fff;
padding: 5px 5px 5px 10px;
margin: 2px 2px;
border: 1px solid #ccc;
}
.odd_row {
@ -390,13 +392,13 @@ input {
}
/* Positioning the 'cells' in the list */
table.list {
/* table.list {
margin-top: 0px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background: #fff;
}
} */
.position {
float: left;
@ -479,4 +481,13 @@ input, select {
border-color: #FC9 #630 #330 #F96;
padding:0px 3px 0px 3px;
margin:0px;
}
}
/* Classes for Drag and Drop */
.handle {
color: #fff;
background: #000;
padding: 1px;
font-size: 10px;
cursor: move;
}