[Argil-svn] SF.net SVN: argil: [490] trunk/src/ArgilCore

[<tsw...@us...>]

Revision: 490
          http://argil.svn.sourceforge.net/argil/?rev=490&view=rev
Author:   tswicegood
Date:     2007-02-20 06:48:26 -0800 (Tue, 20 Feb 2007)

Log Message:
-----------
Add in a SlideWithTab to handle the drawer widget

Modified Paths:
--------------
    trunk/src/ArgilCore/Public/css/layout.css
    trunk/src/ArgilCore/Public/scripts/argil.moo.js

Added Paths:
-----------
    trunk/src/ArgilCore/Controllers/DemoController.php
    trunk/src/ArgilCore/Public/css/drawer.css
    trunk/src/ArgilCore/Views/Demo/
    trunk/src/ArgilCore/Views/Demo/drawer.php

Added: trunk/src/ArgilCore/Controllers/DemoController.php
===================================================================
--- trunk/src/ArgilCore/Controllers/DemoController.php	                        (rev 0)
+++ trunk/src/ArgilCore/Controllers/DemoController.php	2007-02-20 14:48:26 UTC (rev 490)
@@ -0,0 +1,10 @@
+<?php
+
+require_once 'Argil/Controller.php';
+
+class ArgilCore_Controllers_DemoController extends Argil_Controller
+{
+	public function actionDrawer() {
+		return $this->_viewFactory('drawer');
+	}
+}

Added: trunk/src/ArgilCore/Public/css/drawer.css
===================================================================
--- trunk/src/ArgilCore/Public/css/drawer.css	                        (rev 0)
+++ trunk/src/ArgilCore/Public/css/drawer.css	2007-02-20 14:48:26 UTC (rev 490)
@@ -0,0 +1,11 @@
+.drawer {
+	border:1px solid red;
+	background-color:#f9f9f9;
+}
+
+.drawer-wrapper {
+	position:absolute;
+}
+.drawer-toggle {
+	position:relative;
+}

Modified: trunk/src/ArgilCore/Public/css/layout.css
===================================================================
--- trunk/src/ArgilCore/Public/css/layout.css	2007-02-20 14:47:20 UTC (rev 489)
+++ trunk/src/ArgilCore/Public/css/layout.css	2007-02-20 14:48:26 UTC (rev 490)
@@ -1,6 +1,9 @@
 /* Form loading modal styling */
 @import url("loading.css");
 
+/* Handle drawer CSS */
+@import url('drawer.css');
+
 body {
     font-family: sans-serif;
     font-size: 12px;

Modified: trunk/src/ArgilCore/Public/scripts/argil.moo.js
===================================================================
--- trunk/src/ArgilCore/Public/scripts/argil.moo.js	2007-02-20 14:47:20 UTC (rev 489)
+++ trunk/src/ArgilCore/Public/scripts/argil.moo.js	2007-02-20 14:48:26 UTC (rev 490)
@@ -231,7 +231,79 @@
 });
 
 
+Argil.Drawer = new Moo.Class({
+	getOptions: function() {
+		return {
+			slider: {
+				duration: 500,
+				mode:'vertical',
+			},
+			wrapper: {
+				class: 'drawer-wrapper',
+			},
+			toggle: {
+				textIn: 'Hide',
+				textOut: 'Show',
+				class: 'drawer-toggle',
+			},
+		};
+	},
+	initialize: function(selector, options) {
+		this.options = Moo.Object.extend(this.getOptions(), options);
+		this.element = Moo.$E(selector);
+		this.wrapper = new Element('div')
+			.injectAfter(this.element)
+			.adopt(this.element)
+			.addClass(this.options.wrapper.class);
+		this.wrapper.setStyles({
+			position: 'absolute',
+		});
+//		this.wrapper.style.top = '-' + this.element.style.height +'px';
+		this.wrapper.style.width = this.element.style.width;
+
+		var me = this;
+		a = new Moo.Element('a')
+			.addEvent('click', function(event) {
+				me.slider.toggle();
+				me.options.closed = !me.options.closed;
+				this.setHTML(me.options.closed ? me.options.toggle.textOut : me.options.toggle.textIn);
+				new Moo.Event(event).stop();
+			})
+			.setHTML('Click Me!')
+			.addClass(this.options.toggle.class)
+		a.href = '#';
+		this.element.adopt(a);
+		
+		this.slider = new Argil.Fx.SlideWithTab(this.element, this.options.slider);
+		
+	},
+});
+
 Argil.Fx = {};
+Argil.Fx.SlideWithTab = Moo.Fx.Slide.extend({
+	initialize: function(el, options) {
+		this.parent(el, options);
+		this.options.tabSelector = this.options.tabSelector || '.drawer-toggle';
+		this.closed = false;
+		
+		this.tabSize = Moo.$E(this.options.tabSelector, this.wrapper).getStyle('height').toInt();
+	},
+
+	/*
+	Property: slideOut
+		slides the elements out of the view horizontally or vertically, depending on the mode parameter or options.mode.
+	*/
+
+	slideOut: function(mode){
+		return this.start(this[mode || this.options.mode](), [-(this.offset - this.tabSize), this.tabSize]);
+	},
+
+	toggle: function(mode){
+		if (this.wrapper.offsetHeight == this.tabSize || this.wrapper.offsetWidth == this.tabSize) return this.slideIn(mode);
+		else return this.slideOut(mode);
+	},
+
+});
 Argil.Fx.FadeOutAndRemove = new Moo.Class({
     initialize: function(selector, options) {
         this.element = $(selector);

Added: trunk/src/ArgilCore/Views/Demo/drawer.php
===================================================================
--- trunk/src/ArgilCore/Views/Demo/drawer.php	                        (rev 0)
+++ trunk/src/ArgilCore/Views/Demo/drawer.php	2007-02-20 14:48:26 UTC (rev 490)
@@ -0,0 +1,11 @@
+<div class="drawer">
+	<ul>
+		<li>Item One</li>
+		<li>Item Two</li>
+		<li>Item Three</li>
+	</ul>
+</div>
+
+<script type="text/javascript">
+	var d = new Argil.Drawer('.drawer');
+</script>


This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.