working on top drawer (partial)...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen4)/css/widget/drawer.css

@@ -34,6 +34,10 @@
 
 	box-shadow: rgba(0, 0, 0, 0.1) 0.3em 0.3em 5em;
 }
+.drawer-widget.top .content {
+	top: auto;
+	margin-bottom: 100%;
+}
 .drawer-widget~.drawer-widget .content {
 	box-shadow: rgba(0, 0, 0, 0.05) 0.1em 0.1em 3em;
 }

ui (gen4)/features/ui-widgets.js

@@ -386,6 +386,28 @@ module.makeUIDialog = function(a, b){
 }
 
 
+var makeDrawer = function(direction){
+	return makeUIContainer(function(dialog, options){
+		var parent = (options || {}).parentElement 
+		parent = parent ? $(parent) : this.ribbons.viewer 
+
+		options.direction = direction || 'bottom'
+
+		var d = drawer.Drawer(
+				parent,
+				dialog, 
+				options)
+		// we need to clear other ui elements, like the status bar...
+		// XXX is this the right way to go???
+		d.dom.css({
+			'z-index': 5000,
+		})
+
+		return d
+	})
+}
+
+
 
 //---------------------------------------------------------------------
 
@@ -432,34 +454,14 @@ var DialogsActions = actions.Actions({
 		})],
 	// XXX should this be renamed to BottomDrawer???
 	Drawer: ['- Interface/',
-		makeUIContainer(function(dialog, options){
+		makeDrawer('bottom')],
-			var parent = (options || {}).parentElement 
-			parent = parent ? $(parent) : this.ribbons.viewer 
-
-			var d = drawer.Drawer(
-					parent,
-					dialog, 
-					options)
-			// we need to clear other ui elements, like the status bar...
-			// XXX is this the right way to go???
-			d.dom.css({
-				'z-index': 5000,
-			})
-
-			return d
-		})],
 	
 	// XXX not implemented yet...
 	TopDrawer: ['- Interface/',
-		makeUIContainer(function(dialog, options){
+		makeDrawer('top')],
-			// XXX
-			console.error('Not yet implemented.')
-		})],
 	BottomDrawer: ['- Interface/',
-		makeUIContainer(function(dialog, options){
+		makeDrawer('bottom')],
-			// XXX
+
-			console.error('Not yet implemented.')
-		})],
 	RightDrawer: ['- Interface/',
 		makeUIContainer(function(dialog, options){
 			// XXX

ui (gen4)/lib/widget/drawer.js

@@ -19,7 +19,7 @@ var DrawerClassPrototype = {
 	make: function(obj, client, options){
 		var that = this
 		var overlay = $('<div>')
-			.addClass('drawer-widget')
+			.addClass('drawer-widget ' + (options.direction || 'bottom'))
 			.append($('<div>')
 				.addClass('content')
 				.click(function(){
@@ -60,6 +60,8 @@ var DrawerPrototype = {
 		],
 
 		background: null,
+
+		direction: 'bottom',
 	},
 
 	keyboard: {
@@ -116,30 +118,68 @@ var DrawerPrototype = {
 				that.close()
 			})
 			.css({ opacity: 0 })
+			.scrollTop(options.direction == 'bottom' ?  0
+				: options.direction == 'top' ?
+					dom.find('.content')[0].scrollHeight
+				: 0)
 			.animate({
-					scrollTop: Math.min(
+					scrollTop: 
+						(options.direction == 'bottom' ?
+							Math.min(
 								client_dom.outerHeight(), 
 								// do not scroll more than the container height and
 								// keep a bit on top...
 								(parent.is('body') ? $(document) : parent)
-							.outerHeight()-options['fade-at'])+'px',
+									.outerHeight()-options['fade-at']) + 'px'
+						// XXX this is wrong!
+						: options.direction == 'top' ?
+							(dom.find('.content')[0].scrollHeight
+							 	- dom.outerHeight()
+								+ options['fade-at']) + 'px'
+						: 0),
 					opacity: 1,
 				}, 
 				options['animate'],
 				function(){
 					dom.scroll(function(){
 						var st = $(this).scrollTop()
+
+						// bottom drawer...
+						if(options.direction == 'bottom'){
 							var h = Math.min(options['fade-at'], client_dom.outerHeight())
+
 							// start fading...
 							if(st < h){
 								dom.css({ opacity: Math.min(1, st/h) })
+
 							} else if(dom.css('opacity') < 1){
 								dom.css('opacity', 1)
 							}
+
 							// close drawer when scrolling to the top...
 							if(st < options['close-at']){
 								that.close()
 							}
+
+						// top drawer...
+						} else if(options.direction == 'top'){
+							var h = dom.find('.content')[0].scrollHeight
+
+							// start fading...
+							// XXX not working yet...
+							if(st < h - options['fade-at']){
+								dom.css({ opacity: Math.min(1, st/h) })
+
+							} else if(dom.css('opacity') < 1){
+								dom.css('opacity', 1)
+							}
+
+							// close...
+							if(st > h - options['close-at']){
+								// XXX adapt close...
+								that.close()
+							}
+						}
 					})
 				})