From 8e1fdaf3c01ff6df9a0d0cc84feed73f3b6e6e87 Mon Sep 17 00:00:00 2001 From: Aaron Newton Date: Wed, 14 Sep 2011 17:02:39 -0700 Subject: [PATCH] Adding Delegator for FxReveal --- Docs/Delegators/Delegator.Fx.Reveal.md | 26 +++ Source/Delegators/Delegator.FxReveal.js | 37 ++++ .../Delegators/Delegator.Fx.Reveal.html | 42 ++++ .../Delegators/Delegator.AddRemoveClass.js | 2 +- .../Delegators/Delegator.FxReveal.js | 187 ++++++++++++++++++ Tests/Specs/package.yml | 1 + package.yml | 1 + 7 files changed, 295 insertions(+), 1 deletion(-) create mode 100644 Docs/Delegators/Delegator.Fx.Reveal.md create mode 100644 Source/Delegators/Delegator.FxReveal.js create mode 100644 Tests/Interactive/Delegators/Delegator.Fx.Reveal.html create mode 100644 Tests/Specs/more-behaviors/Delegators/Delegator.FxReveal.js diff --git a/Docs/Delegators/Delegator.Fx.Reveal.md b/Docs/Delegators/Delegator.Fx.Reveal.md new file mode 100644 index 0000000..8552e84 --- /dev/null +++ b/Docs/Delegators/Delegator.Fx.Reveal.md @@ -0,0 +1,26 @@ +Delegator Triggers: Reveal, Dissolve, Nix, ToggleReveal +======================= + +Provides delegated links to use [Fx.Reveal](http://mootools.net/docs/more/Fx/Fx.Reveal) on a given target. + +### Examples + +
+

+ Toggle parent + Toggle self + Reveal Parent + Reveal Self + Dissolve parent + Dissolve self + nix parent + Nix self +

+
+ +The above examples use `Fx.Reveal` to show, hide, and destroy their respective targets. + +### Options + +* target - (*string*; required) - a selector which will return the DOM element to show/hide. Use selectors provided by [Slick](https://github.com/mootools/slick) to select parents and sibling trees. +* fxOptions - (*object*; optional) - a set of options to be passed to `Fx.Reveal`. \ No newline at end of file diff --git a/Source/Delegators/Delegator.FxReveal.js b/Source/Delegators/Delegator.FxReveal.js new file mode 100644 index 0000000..66fc354 --- /dev/null +++ b/Source/Delegators/Delegator.FxReveal.js @@ -0,0 +1,37 @@ +/* +--- +description: Provides methods to reveal, dissolve, nix, and toggle using Fx.Reveal. +provides: [Delegator.Reveal, Delegator.ToggleReveal, Delegator.Dissolve, Delegator.Nix] +requires: [Behavior/Delegator, More/Fx.Reveal] +script: Delegator.FxReveal.js +name: Delegator.FxReveal + +... +*/ +(function(){ + + var triggers = {}; + + ['reveal', 'toggleReveal', 'dissolve', 'nix'].each(function(action){ + + triggers[action] = { + handler: function(event, link, api){ + var target = link; + if (api.get('target')) { + target = link.getElement(api.get('target')); + if (!target) api.fail('could not locate target element to ' + action, link); + } + + var fxOptions = api.get('fxOptions'); + if (fxOptions) target.set('reveal', fxOptions); + target.get('reveal'); + if (action == 'toggleReveal') target.get('reveal').toggle(); + else target[action](); + } + }; + + }); + + Delegator.register('click', triggers); + +})(); \ No newline at end of file diff --git a/Tests/Interactive/Delegators/Delegator.Fx.Reveal.html b/Tests/Interactive/Delegators/Delegator.Fx.Reveal.html new file mode 100644 index 0000000..109130c --- /dev/null +++ b/Tests/Interactive/Delegators/Delegator.Fx.Reveal.html @@ -0,0 +1,42 @@ + + + + Delegator: Ajax Target + + + + +

Reveal Target

+ + click to show box + +
+ +

Dissolve Target

+ + click to hide box +
+
+ +

Toggle Target

+ + click to toggle box +
+
+ +

Nix Target (hide and then destroy)

+ + click to nix box +
+
+ + + + + \ No newline at end of file diff --git a/Tests/Specs/more-behaviors/Delegators/Delegator.AddRemoveClass.js b/Tests/Specs/more-behaviors/Delegators/Delegator.AddRemoveClass.js index b7eff78..19d3b93 100644 --- a/Tests/Specs/more-behaviors/Delegators/Delegator.AddRemoveClass.js +++ b/Tests/Specs/more-behaviors/Delegators/Delegator.AddRemoveClass.js @@ -28,7 +28,7 @@ provides: [Delegator.ToggleClass.Tests] toggleParent = dom.getElement('a#toggleParent'), toggleSelf = dom.getElement('a#toggleSelf'); - describe('Delegator.ToggleClass', function(){ + describe('Delegator.AddRemoveClass', function(){ it('should toggle the class on a target', function(){ expect(dom.hasClass('bar')).toBe(false); del.trigger('toggleClass', toggleParent, 'click'); diff --git a/Tests/Specs/more-behaviors/Delegators/Delegator.FxReveal.js b/Tests/Specs/more-behaviors/Delegators/Delegator.FxReveal.js new file mode 100644 index 0000000..558f573 --- /dev/null +++ b/Tests/Specs/more-behaviors/Delegators/Delegator.FxReveal.js @@ -0,0 +1,187 @@ +/* +--- +name: Delegator.FxReveal Tests +description: n/a +requires: [More-Behaviors/Delegator.FxReveal] +provides: [Delegator.FxReveal.Tests] +... +*/ + + +(function(){ + var dom = new Element('div', {styles: { display: 'block'}}).set('html', + '

\ + Toggle parent\ + Toggle self\ + Reveal Parent\ + Reveal Self\ + Dissolve parent\ + Dissolve self\ + nix parent\ + Nix self\ +

' + ); + + var del = new Delegator(); + var getEls = function(){ + var clone = dom.clone(true, true); + del.attach(clone); + return { + dom: clone, + toggleParent: clone.getElement('a#toggleParent'), + toggleSelf: clone.getElement('a#toggleSelf'), + revealParent: clone.getElement('a#revealParent'), + revealSelf: clone.getElement('a#revealSelf'), + dissolveParent: clone.getElement('a#dissolveParent'), + dissolveSelf: clone.getElement('a#dissolveSelf'), + nixParent: clone.getElement('a#nixParent'), + nixSelf: clone.getElement('a#nixSelf') + }; + }; + + describe('Delegator.FxReveal', function(){ + // parent toggle + it('should toggle the reveal: parent > hidden', function(){ + var els = getEls(); + expect(els.dom.getStyle('display')).toBe('block'); + del.trigger('toggleReveal', els.toggleParent, 'click'); + waits(35); + (function(){ + expect(els.dom.getStyle('display')).toBe('none'); + }).delay(30); + }); + + it('should toggle the reveal: parent > visible', function(){ + var els = getEls(); + els.dom.setStyle('display', 'none') + del.trigger('toggleReveal', els.toggleParent, 'click'); + waits(35); + (function(){ + expect(els.dom.getStyle('display')).toBe('block'); + }).delay(30); + }); + + + // self toggle + it('should toggle the reveal: self > hidden', function(){ + var els = getEls(); + expect(els.toggleSelf.getStyle('display')).toBe('block'); + del.trigger('toggleReveal', els.toggleSelf, 'click'); + waits(35); + (function(){ + expect(els.toggleSelf.getStyle('display')).toBe('none'); + }).delay(30); + }); + + it('should toggle the reveal: self > visible', function(){ + var els = getEls(); + els.toggleSelf.setStyle('display', 'none') + del.trigger('toggleReveal', els.toggleSelf, 'click'); + waits(35); + (function(){ + expect(els.toggleSelf.getStyle('display')).toBe('block'); + }).delay(30); + }); + + // parent reveal + it('should not reveal: parent is visible already', function(){ + var els = getEls(); + expect(els.dom.getStyle('display')).toBe('block'); + del.trigger('reveal', els.revealParent, 'click'); + waits(35); + (function(){ + expect(els.dom.getStyle('display')).toBe('block'); + }).delay(30); + }); + + it('should reveal: parent > visible', function(){ + var els = getEls(); + els.dom.setStyle('display', 'none') + del.trigger('reveal', els.revealParent, 'click'); + waits(35); + (function(){ + expect(els.dom.getStyle('display')).toBe('block'); + }).delay(30); + }); + + // self reveal + it('should not reveal: self is visible already', function(){ + var els = getEls(); + del.trigger('reveal', els.revealSelf, 'click'); + waits(35); + (function(){ + expect(els.revealSelf.getStyle('display')).toBe('block'); + }).delay(30); + }); + + it('should reveal: self > visible', function(){ + var els = getEls(); + els.revealSelf.setStyle('display', 'none') + del.trigger('reveal', els.revealSelf, 'click'); + waits(35); + (function(){ + expect(els.revealSelf.getStyle('display')).toBe('block'); + }).delay(30); + }); + + // parent dissolve + it('should not dissolve: parent is hidden already', function(){ + var els = getEls(); + els.dom.setStyle('display', 'none'); + del.trigger('dissolve', els.dissolveParent, 'click'); + waits(35); + (function(){ + expect(els.dom.getStyle('display')).toBe('none'); + }).delay(30); + }); + + it('should dissolve: parent > hidden', function(){ + var els = getEls(); + del.trigger('dissolve', els.dissolveParent, 'click'); + waits(35); + (function(){ + expect(els.dom.getStyle('display')).toBe('none'); + }).delay(30); + }); + + // parent dissolve + it('should dissolve: self > hidden', function(){ + var els = getEls(); + del.trigger('dissolve', els.dissolveSelf, 'click'); + waits(35); + (function(){ + expect(els.dissolveSelf.getStyle('display')).toBe('none'); + }).delay(30); + }); + + it('should dissolve: self > hidden', function(){ + var els = getEls(); + del.trigger('dissolve', els.dissolveSelf, 'click'); + waits(35); + (function(){ + expect(els.dissolveSelf.getStyle('display')).toBe('none'); + }).delay(30); + }); + + // nix + it('should nix: self', function(){ + var els = getEls(); + del.trigger('nix', els.nixSelf, 'click'); + waits(35); + (function(){ + expect(els.nixSelf.getParent()).toBeNull(); + }).delay(30); + }); + + it('should nix: parent', function(){ + var els = getEls(); + els.dom.inject(document.body).setStyle('display', 'none'); + del.trigger('nix', els.nixParent, 'click'); + waits(35); + (function(){ + expect(els.dom.getParent()).toBeNull(); + }).delay(30); + }); + + }); +})(); \ No newline at end of file diff --git a/Tests/Specs/package.yml b/Tests/Specs/package.yml index cf43769..3088743 100644 --- a/Tests/Specs/package.yml +++ b/Tests/Specs/package.yml @@ -19,4 +19,5 @@ sources: - "more-behaviors/Delegators/Delegator.AddRemoveClass.js" - "more-behaviors/Delegators/Delegator.Ajax.js" - "more-behaviors/Delegators/Delegator.CheckAllOrNone.js" + - "more-behaviors/Delegators/Delegator.FxReveal.js" - "more-behaviors/Delegators/Delegator.SubmitLink.js" \ No newline at end of file diff --git a/package.yml b/package.yml index 9af690e..bbcb60b 100644 --- a/package.yml +++ b/package.yml @@ -23,4 +23,5 @@ sources: - "Source/Delegators/Delegator.AddRemoveClass.js" - "Source/Delegators/Delegator.Ajax.js" - "Source/Delegators/Delegator.CheckAllOrNone.js" + - "Source/Delegators/Delegator.FxReveal.js" - "Source/Delegators/Delegator.SubmitLink.js"