Adding Delegator for FxReveal

anutron · Sep 15, 2011 · 8e1fdaf · 8e1fdaf
1 parent c152ca0
commit 8e1fdaf
Show file tree

Hide file tree

Showing 7 changed files with 295 additions and 1 deletion.
diff --git a/Docs/Delegators/Delegator.Fx.Reveal.md 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
+
+	<div>
+		<p>
+			<a style="display: block" id="toggleParent" data-trigger="toggleReveal" data-togglereveal-options="'target':'!div', 'fxOptions':{'duration': 0}">Toggle parent</a>
+			<a style="display: block" id="toggleSelf" data-trigger="toggleReveal" data-togglereveal-options="'fxOptions':{'duration': 0}">Toggle self</a>
+			<a style="display: block" id="revealParent" data-trigger="reveal" data-reveal-options="'target':'!div', 'fxOptions':{'duration': 0}">Reveal Parent</a>
+			<a style="display: block" id="revealSelf" data-trigger="reveal" data-reveal-options="'fxOptions':{'duration': 0}">Reveal Self</a>
+			<a style="display: block" id="dissolveParent" data-trigger="dissolve" data-dissolve-options="'target':'!div', 'fxOptions':{'duration': 0}">Dissolve parent</a>
+			<a style="display: block" id="dissolveSelf" data-trigger="dissolve" data-dissolve-options="'fxOptions':{'duration': 0}">Dissolve self</a>
+			<a style="display: block" id="nixParent" data-trigger="nix" data-nix-options="'target':'!div', 'fxOptions':{'duration': 0}">nix parent</a>
+			<a style="display: block" id="nixSelf" data-trigger="nix" data-nix-options="'fxOptions':{'duration': 0}">Nix self</a>
+		</p>
+	</div>
+
+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`.
diff --git a/Source/Delegators/Delegator.FxReveal.js 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);
+
+})();
diff --git a/Tests/Interactive/Delegators/Delegator.Fx.Reveal.html b/Tests/Interactive/Delegators/Delegator.Fx.Reveal.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Delegator: Ajax Target</title>
+		<script src="/depender/build?require=More-Behaviors/Delegator.FxReveal"></script>
+		<style>
+		</style>
+	</head>
+	<body>
+		<h3>Reveal Target</h3>
+
+		<a data-trigger="reveal" data-reveal-target="!body #boxReveal">click to show box</a>
+		<div id="boxReveal" style="display: none; border: 1px solid #fff; height: 100px; width: 100px; background: #999;"></div>
+		<hr/>
+
+		<h3>Dissolve Target</h3>
+
+		<a data-trigger="dissolve" data-dissolve-target="!body #boxDissolve">click to hide box</a>
+		<div id="boxDissolve" style="border: 1px solid #fff; height: 100px; width: 100px; background: #999;"></div>
+		<hr/>
+
+		<h3>Toggle Target</h3>
+
+		<a data-trigger="toggleReveal" data-togglereveal-target="!body #boxToggle">click to toggle box</a>
+		<div id="boxToggle" style="border: 1px solid #fff; height: 100px; width: 100px; background: #999;"></div>
+		<hr/>
+
+		<h3>Nix Target (hide and then destroy)</h3>
+
+		<a data-trigger="nix" data-nix-target="!body #boxNix">click to nix box</a>
+		<div id="boxNix" style="border: 1px solid #fff; height: 100px; width: 100px; background: #999;"></div>
+		<hr/>
+
+
+		<script>
+			var b = new Behavior().apply(document.body);
+			var d = new Delegator({
+				getBehavior: function(){ return b }
+			}).attach(document.body);
+		</script>
+	</body>
+</html>
diff --git 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
@@ -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',
+		'<p>\
+			<a style="display: block" id="toggleParent" data-trigger="toggleReveal" data-togglereveal-options="\'target\':\'!div\', \'fxOptions\':{\'duration\': 0}">Toggle parent</a>\
+			<a style="display: block" id="toggleSelf" data-trigger="toggleReveal" data-togglereveal-options="\'fxOptions\':{\'duration\': 0}">Toggle self</a>\
+			<a style="display: block" id="revealParent" data-trigger="reveal" data-reveal-options="\'target\':\'!div\', \'fxOptions\':{\'duration\': 0}">Reveal Parent</a>\
+			<a style="display: block" id="revealSelf" data-trigger="reveal" data-reveal-options="\'fxOptions\':{\'duration\': 0}">Reveal Self</a>\
+			<a style="display: block" id="dissolveParent" data-trigger="dissolve" data-dissolve-options="\'target\':\'!div\', \'fxOptions\':{\'duration\': 0}">Dissolve parent</a>\
+			<a style="display: block" id="dissolveSelf" data-trigger="dissolve" data-dissolve-options="\'fxOptions\':{\'duration\': 0}">Dissolve self</a>\
+			<a style="display: block" id="nixParent" data-trigger="nix" data-nix-options="\'target\':\'!div\', \'fxOptions\':{\'duration\': 0}">nix parent</a>\
+			<a style="display: block" id="nixSelf" data-trigger="nix" data-nix-options="\'fxOptions\':{\'duration\': 0}">Nix self</a>\
+		</p>'
+	);
+
+	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);
+		});
+
+	});
+})();
diff --git 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"
diff --git 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"