Toggler.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. define("dojo/fx/Toggler", ["../_base/lang","../_base/declare","../_base/fx", "../_base/connect"],
  2. function(lang, declare, baseFx, connectUtil) {
  3. // module:
  4. // dojo/fx/Toggler
  5. // summary:
  6. // TODOC
  7. return declare("dojo.fx.Toggler", null, {
  8. // summary:
  9. // A simple `dojo.Animation` toggler API.
  10. //
  11. // description:
  12. // class constructor for an animation toggler. It accepts a packed
  13. // set of arguments about what type of animation to use in each
  14. // direction, duration, etc. All available members are mixed into
  15. // these animations from the constructor (for example, `node`,
  16. // `showDuration`, `hideDuration`).
  17. //
  18. // example:
  19. // | var t = new dojo.fx.Toggler({
  20. // | node: "nodeId",
  21. // | showDuration: 500,
  22. // | // hideDuration will default to "200"
  23. // | showFunc: dojo.fx.wipeIn,
  24. // | // hideFunc will default to "fadeOut"
  25. // | });
  26. // | t.show(100); // delay showing for 100ms
  27. // | // ...time passes...
  28. // | t.hide();
  29. // node: DomNode
  30. // the node to target for the showing and hiding animations
  31. node: null,
  32. // showFunc: Function
  33. // The function that returns the `dojo.Animation` to show the node
  34. showFunc: baseFx.fadeIn,
  35. // hideFunc: Function
  36. // The function that returns the `dojo.Animation` to hide the node
  37. hideFunc: baseFx.fadeOut,
  38. // showDuration:
  39. // Time in milliseconds to run the show Animation
  40. showDuration: 200,
  41. // hideDuration:
  42. // Time in milliseconds to run the hide Animation
  43. hideDuration: 200,
  44. // FIXME: need a policy for where the toggler should "be" the next
  45. // time show/hide are called if we're stopped somewhere in the
  46. // middle.
  47. // FIXME: also would be nice to specify individual showArgs/hideArgs mixed into
  48. // each animation individually.
  49. // FIXME: also would be nice to have events from the animations exposed/bridged
  50. /*=====
  51. _showArgs: null,
  52. _showAnim: null,
  53. _hideArgs: null,
  54. _hideAnim: null,
  55. _isShowing: false,
  56. _isHiding: false,
  57. =====*/
  58. constructor: function(args){
  59. var _t = this;
  60. lang.mixin(_t, args);
  61. _t.node = args.node;
  62. _t._showArgs = lang.mixin({}, args);
  63. _t._showArgs.node = _t.node;
  64. _t._showArgs.duration = _t.showDuration;
  65. _t.showAnim = _t.showFunc(_t._showArgs);
  66. _t._hideArgs = lang.mixin({}, args);
  67. _t._hideArgs.node = _t.node;
  68. _t._hideArgs.duration = _t.hideDuration;
  69. _t.hideAnim = _t.hideFunc(_t._hideArgs);
  70. connectUtil.connect(_t.showAnim, "beforeBegin", lang.hitch(_t.hideAnim, "stop", true));
  71. connectUtil.connect(_t.hideAnim, "beforeBegin", lang.hitch(_t.showAnim, "stop", true));
  72. },
  73. show: function(delay){
  74. // summary: Toggle the node to showing
  75. // delay: Integer?
  76. // Ammount of time to stall playing the show animation
  77. return this.showAnim.play(delay || 0);
  78. },
  79. hide: function(delay){
  80. // summary: Toggle the node to hidden
  81. // delay: Integer?
  82. // Ammount of time to stall playing the hide animation
  83. return this.hideAnim.play(delay || 0);
  84. }
  85. });
  86. });