How many Effects do I need?

Question

OK. So maybe someone can help with THIS one...
We have several lists of data categories (teachers, students
and media) and each category has two states--pending and active,
which we use Spry Tabs to move effectively between. We use a detail
region to approve/delete the individual items.
So, we end up with this mess:
var g_oTeacherDetailShrink_effect = new
Spry.Effect.Grow('adminDetail_div', {toggle:true,
finish:showDetailShrink_finish, growCenter:true, from:'100%',
to:'0%', duration: '100'});
var g_oTeacherDetailExpand_effect = new
Spry.Effect.Grow('adminDetail_div', {toggle:false, setup:
showDetailExpand_begin, finish:showDetailExpand_finish,
growCenter:true, from:'0%', to:'100%', duration: '300'});
var g_oTeacherPendingDetailShrink_effect = new
Spry.Effect.Grow('adminDetail_div', {toggle:true,
finish:showDetailShrink_finish, growCenter:true, from:'100%',
to:'0%', duration: '100'});
var g_oTeacherPendingDetailExpand_effect = new
Spry.Effect.Grow('adminDetail_div', {toggle:false, setup:
showDetailExpand_begin, finish:showDetailExpand_finish,
growCenter:true, from:'0%', to:'100%', duration: '300'});
var g_oStudentDetailShrink_effect = new
Spry.Effect.Grow('studentDetail_div', {toggle:true,
finish:showStudentDetailShrink_finish, growCenter:true,
from:'100%', to:'0%', duration: '100'});
var g_oStudentDetailExpand_effect = new
Spry.Effect.Grow('studentDetail_div', {toggle:false, setup:
showStudentDetailExpand_begin,
finish:showStudentDetailExpand_finish, growCenter:true, from:'0%',
to:'100%', duration: '300'});
var g_oAssetPendingDetailShrink_effect = new
Spry.Effect.Grow('assetPendingDetail_div', {toggle:true,
finish:showAssetPendingDetailShrink_finish, growCenter:true,
from:'100%', to:'0%', duration: '100'});
var g_oAssetPendingDetailExpand_effect = new
Spry.Effect.Grow('assetPendingDetail_div', {toggle:false, setup:
showAssetPendingDetailExpand_begin,
finish:showAssetDetailExpand_finish, growCenter:true, from:'0%',
to:'100%', duration: '300'});
var g_oAssetDetailShrink_effect = new
Spry.Effect.Grow('assetDetail_div', {toggle:true,
finish:showAssetDetailShrink_finish, growCenter:true, from:'100%',
to:'0%', duration: '100'});
var g_oAssetDetailExpand_effect = new
Spry.Effect.Grow('assetDetail_div', {toggle:false, setup:
showAssetDetailExpand_begin, finish:showAssetDetailExpand_finish,
growCenter:true, from:'0%', to:'100%', duration: '300'});
Which seems rather inefficient given each pair does
essentially the exact same thing in exactly the same location and
size. Only the data changes.
Suggestions to make this more efficient (let alone
maintainable!)?
Scott.
P.S. Adobe needs to lose fusetalk for something that handles
code posting better...!

Answer 1

I love that example! Although I still need that rats nest for
setup, actually implementing them works resonably well--the trick
to consolidating things was re-reading the doc a few times and
realizing that the "
setup:
function" and "
finish:
function" were secretly, er,
automatically passed two variables, the element and the
effect, respectively.
So, for those who also might be fuzzy on that:
var zoomWindow = new Spry.Effect.Grow('example1',{duration:700,
from:'100%', to:'20%',toggle:true, setup:startMeUp,
finish:endMeUp});
will call:
function startMeUp(
element (zoomWindow, in this case)
effect (the object "Grow", in this case)
at the start and:
function endMeUp(
element (zoomWindow, in this case),
effect (the object "Grow", in this case)
at the end. So, even though the reference to the function in
the Grow doesn't seem to be passing variables, you need to build
your function to accept them. Note that you do *not* use quotes
around your setup and/or finish functions (and don't include the
parenthesis, either!)