From 3a5e8bca5a5c27551781b4e70efaee3b3b6dec5a Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 7 May 2016 16:15:18 +0300 Subject: [PATCH] working on top drawer (partial)... Signed-off-by: Alex A. Naanou --- ui (gen4)/css/widget/drawer.css | 4 ++ ui (gen4)/features/ui-widgets.js | 50 +++++++++++---------- ui (gen4)/lib/widget/drawer.js | 76 ++++++++++++++++++++++++-------- 3 files changed, 88 insertions(+), 42 deletions(-) diff --git a/ui (gen4)/css/widget/drawer.css b/ui (gen4)/css/widget/drawer.css index 729388e9..1c74c4c1 100755 --- a/ui (gen4)/css/widget/drawer.css +++ b/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; } diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index 98ac87b0..0f0be90d 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/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){ - 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 - })], + makeDrawer('bottom')], // XXX not implemented yet... TopDrawer: ['- Interface/', - makeUIContainer(function(dialog, options){ - // XXX - console.error('Not yet implemented.') - })], + makeDrawer('top')], BottomDrawer: ['- Interface/', - makeUIContainer(function(dialog, options){ - // XXX - console.error('Not yet implemented.') - })], + makeDrawer('bottom')], + RightDrawer: ['- Interface/', makeUIContainer(function(dialog, options){ // XXX diff --git a/ui (gen4)/lib/widget/drawer.js b/ui (gen4)/lib/widget/drawer.js index 7b8584bb..90bfe2fc 100755 --- a/ui (gen4)/lib/widget/drawer.js +++ b/ui (gen4)/lib/widget/drawer.js @@ -19,7 +19,7 @@ var DrawerClassPrototype = { make: function(obj, client, options){ var that = this var overlay = $('
') - .addClass('drawer-widget') + .addClass('drawer-widget ' + (options.direction || 'bottom')) .append($('
') .addClass('content') .click(function(){ @@ -60,6 +60,8 @@ var DrawerPrototype = { ], background: null, + + direction: 'bottom', }, keyboard: { @@ -115,30 +117,68 @@ var DrawerPrototype = { .click(function(){ that.close() }) - .css({opacity: 0}) + .css({ opacity: 0 }) + .scrollTop(options.direction == 'bottom' ? 0 + : options.direction == 'top' ? + dom.find('.content')[0].scrollHeight + : 0) .animate({ - scrollTop: 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', + 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' + // 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() - 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() + + // 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() + } } }) })