Andreas/tracks
1
0
Fork 0
mirror of https://github.com/TracksApp/tracks.git synced 2025-09-22 05:50:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Re-wrote todo-items.js and got todo uncheck working.

Browse source 
I also discovered that application.js was getting included twice, causing a few issues. Small fix in standard.html.erb took care of it.
This commit is contained in:
Eric Allen 2009-09-06 19:41:27 -04:00
parent cd8a01d2d4
commit 6b7e5d0eed
4 changed files with 74 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/views/contexts/_context.rhtml
View file

@ -10,12 +10,12 @@
toggleTarget = containerElem.down('.toggle_target')
if (Element.visible(toggleTarget))
{
todoItems.collapseNextActionListing(this, toggleTarget);
todoItems.collapseNextActionListing(toggleTarget);
$.cookie(todoItems.buildCookieName(containerElem), true);
}
else
{
todoItems.expandNextActionListing(this, toggleTarget);
todoItems.expandNextActionListing(toggleTarget);
$.cookie(todoItems.buildCookieName(containerElem), null);
}
}

5
app/views/layouts/standard.html.erb
View file

@ -10,13 +10,14 @@
<% end %>
<%= stylesheet_link_tag "print", :media => "print" %>
<% bundle :name => "jquery" do %>
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery-ui' %>
<%= javascript_include_tag 'jquery.cookie' %>
<% end %>
<% bundle :name => "tracks_js" do %>
<%= javascript_include_tag *%w[
hoverIntent superfish application
accesskey-hints todo-items niftycube
accesskey-hints niftycube
protoload flashobject ] %>
<% end %>
<%= javascript_tag "var AUTH_TOKEN = #{form_authenticity_token.inspect};" if protect_against_forgery? %>

69
public/javascripts/application.js
View file

@ -132,9 +132,78 @@ function set_behavior_for_tag_edit_todo(){
*/
}
todoItems = {
// public
ensureVisibleWithEffectAppear: function(elemId){
$('#'+elemId).fadeIn(400);
},
expandNextActionListing: function(itemsElem, skipAnimation) {
itemsElem = $(itemsElem);
if(skipAnimation == true) {
itemsElem.show();
}
else {
itemsElem.show('blind', 400);
}
todoItems.showContainer(itemsElem.parentNode);
},
collapseNextActionListing: function(itemsElem, skipAnimation) {
itemsElem = $(itemsElem);
if(skipAnimation == true) {
itemsElem.hide();
}
else {
itemsElem.hide('blind', 400);
}
todoItems.hideContainer(itemsElem.parentNode);
},
ensureContainerHeight: function(itemsElem) {
$(itemsElem).css({height: '', overflow: ''});
},
expandNextActionListingByContext: function(itemsElemId, skipAnimation){
todoItems.expandNextActionListing($('#'+itemsElem).get(), skipAnimation);
},
// private
buildCookieName: function(containerElem) {
tracks_login = $.cookie('tracks_login');
return 'tracks_'+tracks_login+'_context_' + containerElem.id + '_collapsed';
},
showContainer: function(containerElem) {
imgSrc = $(containerElem).find('.container_toggle img').attr('src');
$(containerElem).find('.container_toggle img').attr('src', imgSrc.replace('expand', 'collapse'));
},
hideContainer: function (containerElem) {
imgSrc = $(containerElem).find('.container_toggle img').attr('src');
$(containerElem).find('.container_toggle img').attr('src', imgSrc.replace('collapse', 'expand'));
}
}
function setup_container_toggles(){
// bind handlers
$('.container_toggle').click(function(evt){
toggle_target = $(this.parentNode.parentNode).find('.toggle_target');
if(toggle_target.is(':visible')){
// hide it
imgSrc = $(this).find('img').attr('src');
$(this).find('img').attr('src', imgSrc.replace('collapse', 'expand'));
$.cookie(todoItems.buildCookieName(this.parentNode.parentNode), true);
} else {
// show it
imgSrc = $(this).find('img').attr('src');
$(this).find('img').attr('src', imgSrc.replace('expand', 'collapse'));
$.cookie(todoItems.buildCookieName(this.parentNode.parentNode), null);
}
toggle_target.toggle('blind');
});
// set to cookied state
$('.container.context').each(function(){
if($.cookie(todoItems.buildCookieName(this))){
imgSrc = $(this).find('.container_toggle img').attr('src');
$(this).find('.container_toggle img').attr('src', imgSrc.replace('collapse', 'expand'));
$(this).find('.toggle_target').hide();
}
});
}
/* Unobtrusive jQuery behavior */

170
public/javascripts/todo-items.js
View file

@ -1,170 +0,0 @@
/*
* ToDo Items
*
* Requires the prototype.js library
*
* Use the following markup to include the library:
* <script type="text/javascript" src="todo-items.js"></script>
*/
ToDoItems = Class.create();
ToDoItems.prototype = {
initialize: function()
{
/* keep track of last effect so you can check if the animation has finised */
this.lastEffect= null;
this.initialized = true;
this.toggleItemsMap = {};
this.toggleContainerMap = {};
this.containerItemsMap = {};
},
addNextActionListingToggles: function()
{
this.containerToggles = $$('.container_toggle');
containerTogglesClick = this.toggleNextActionListing.bindAsEventListener(this);
for(i=0; i < this.containerToggles.length; i++)
{
toggleElem = this.containerToggles[i];
containerElem = toggleElem.parentNode.parentNode
itemsElem = $(containerElem.id).select("div#"+containerElem.id+"items")[0];
this.toggleContainerMap[toggleElem.id] = containerElem;
this.toggleItemsMap[toggleElem.id] = itemsElem;
this.containerItemsMap[containerElem.id] = itemsElem;
}
this.setNextActionListingTogglesToCookiedState();
},
setNextActionListingTogglesToCookiedState: function()
{
for(i=0; i < this.containerToggles.length; i++)
{
toggleElem = this.containerToggles[i];
containerElem = this.toggleContainerMap[toggleElem.id];
collapsedCookie = $.cookie(this.buildCookieName(containerElem));
itemsElem = this.toggleItemsMap[toggleElem.id];
isExpanded = Element.visible(itemsElem);
if (collapsedCookie && isExpanded)
{
this.collapseNextActionListing(toggleElem, itemsElem);
}
else if (!collapsedCookie && !isExpanded)
{
this.expandNextActionListing(toggleElem, itemsElem);
}
}
},
collapseAllNextActionListing: function(except)
{
for(i=0; i < this.containerToggles.length; i++)
{
toggleElem = this.containerToggles[i];
if (toggleElem != except)
{
itemsElem = this.toggleItemsMap[toggleElem.id];
isExpanded = Element.visible(itemsElem);
if (isExpanded)
{
this.collapseNextActionListing(toggleElem, itemsElem);
}
}
}
},
ensureVisibleWithEffectAppear: function(elemId)
{
if ($(elemId).style.display == 'none')
{
new Effect.Appear(elemId,{duration:0.4});
}
},
fadeAndRemoveItem: function(itemContainerElemId)
{
var fadingElemId = itemContainerElemId + '-fading';
$(itemContainerElemId).setAttribute('id',fadingElemId);
Element.removeClassName($(fadingElemId),'item-container');
new Effect.Fade(fadingElemId,{afterFinish:function(effect) { Element.remove(fadingElemId); }, duration:0.4});
},
toggleNextActionListing: function(event)
{
Event.stop(event);
toggleElem = Event.element(event).parentNode;
itemsElem = this.toggleItemsMap[toggleElem.id];
containerElem = this.toggleContainerMap[toggleElem.id];
if (Element.visible(itemsElem))
{
this.collapseNextActionListing(toggleElem, itemsElem);
$.cookie(this.buildCookieName(containerElem), true);
}
else
{
this.expandNextActionListing(toggleElem, itemsElem);
$.cookie(this.buildCookieName(containerElem), null);
}
},
findToggleElemForContext : function(contextElem)
{
childElems = $A($(contextElem).getElementsByTagName('a'));
return childElems.detect(function(childElem) { return childElem.className == 'container_toggle' });
},
expandNextActionListing: function(toggleElem, itemsElem, skipAnimation)
{
itemsElem = $(itemsElem)
if (skipAnimation == true) {
itemsElem.style.display = 'block';
}
else
{
this.lastEffect = Effect.BlindDown(itemsElem, { duration: 0.4 });
}
toggleElem.setAttribute('title', 'Collapse');
imgElem = this.findToggleImgElem(toggleElem);
imgElem.src = imgElem.src.replace('expand','collapse');
imgElem.setAttribute('title','Collapse');
},
ensureContainerHeight: function(itemsElem)
{
itemsElem = $(itemsElem);
Element.setStyle(itemsElem, {height : ''});
Element.setStyle(itemsElem, {overflow : ''});
},
expandNextActionListingByContext: function(itemsElem, skipAnimation)
{
contextElem = this.findNearestParentByClassName($(itemsElem), "context");
toggleElem = this.findToggleElemForContext(contextElem);
this.expandNextActionListing(toggleElem, itemsElem, skipAnimation);
},
collapseNextActionListing: function(toggleElem, itemsElem)
{
this.lastEffect = Effect.BlindUp(itemsElem, { duration: 0.4});
toggleElem.setAttribute('title', 'Expand');
imgElem = this.findToggleImgElem(toggleElem);
imgElem.src = imgElem.src.replace('collapse','expand');
imgElem.setAttribute('title','Expand');
},
findToggleImgElem: function(toggleElem)
{
childImgElems = $A(toggleElem.getElementsByTagName('img'));
return childImgElems[0];
},
buildCookieName: function(containerElem)
{
tracks_login = $.cookie('tracks_login');
return 'tracks_'+tracks_login+'_context_' + containerElem.id + '_collapsed';
},
findNearestParentByClassName: function(elem, parentClassName)
{
var parentElem = elem.parentNode;
while(parentElem)
{
if (Element.hasClassName(parentElem, parentClassName))
{
return parentElem;
}
parentElem = parentElem.parentNode;
}
return null;
}
}
todoItems = new ToDoItems();
Event.observe(window, "load", todoItems.addNextActionListingToggles.bindAsEventListener(todoItems));