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.
|
