infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

refactor repeated 'drawer' pattern

pull/1/head
ansuz 2020-05-26 12:51:37 -04:00
parent 5282def75b
commit 6f882e0ddd
4 changed files with 42 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
www/code/inner.js
View File

@ -85,31 +85,10 @@ define([
var $content = $(h('div.cp-toolbar-drawer-content', {
tabindex: 1
})).hide();
$theme.click(function () {
$content.toggle();
$theme.removeClass('cp-toolbar-button-active');
if ($content.is(':visible')) {
$theme.addClass('cp-toolbar-button-active');
$content.focus();
var wh = $(window).height();
var topPos = $theme[0].getBoundingClientRect().bottom;
$content.css('max-height', Math.floor(wh - topPos - 1)+'px');
}
});
var onBlur = function (e) {
if (e.relatedTarget) {
var $relatedTarget = $(e.relatedTarget);
if ($relatedTarget.is('.cp-toolbar-drawer-button')) { return; }
if ($relatedTarget.parents('.cp-toolbar-drawer-content').length) {
$relatedTarget.blur(onBlur);
return;
}
}
$theme.removeClass('cp-toolbar-button-active');
$content.hide();
};
$content.blur(onBlur).appendTo($theme);
// set up all the necessary events
UI.createDrawer($theme, $content);
framework._.toolbar.$theme = $content;
framework._.toolbar.$bottomL.append($theme);
};

33
www/common/common-interface.js
View File

@ -1364,5 +1364,38 @@ define([
};
};
/* Given two jquery objects (a 'button' and a 'drawer')
add handlers to make it such that clicking the button
displays the drawer contents, and blurring the button
hides the drawer content. Used for toolbar buttons at the moment.
*/
UI.createDrawer = function ($button, $content) {
$button.click(function () {
$content.toggle();
$button.removeClass('cp-toolbar-button-active');
if ($content.is(':visible')) {
$button.addClass('cp-toolbar-button-active');
$content.focus();
var wh = $(window).height();
var topPos = $button[0].getBoundingClientRect().bottom;
$content.css('max-height', Math.floor(wh - topPos - 1)+'px');
}
});
var onBlur = function (e) {
if (e.relatedTarget) {
var $relatedTarget = $(e.relatedTarget);
if ($relatedTarget.is('.cp-toolbar-drawer-button')) { return; }
if ($relatedTarget.parents('.cp-toolbar-drawer-content').length) {
$relatedTarget.blur(onBlur);
return;
}
}
$button.removeClass('cp-toolbar-button-active');
$content.hide();
};
$content.blur(onBlur).appendTo($button);
};
return UI;
});

27
www/common/toolbar.js
View File

@ -91,7 +91,6 @@ MessengerUI, Messages) {
var $file = $toolbar.find('.'+BOTTOM_LEFT_CLS);
if (!config.hideDrawer) {
// XXX a lot of this logic is duplicated (code, slide, here)
var $drawer = $(h('button.' + FILE_CLS, [
h('i.fa.fa-file-o'),
h('span.cp-button-name', Messages.toolbar_file)
@ -99,30 +98,8 @@ MessengerUI, Messages) {
var $drawerContent = $('<div>', {
'class': DRAWER_CLS,
'tabindex': 1
}).appendTo($drawer).hide();
$drawer.click(function () {
$drawerContent.toggle();
$drawer.removeClass('cp-toolbar-button-active');
if ($drawerContent.is(':visible')) {
$drawer.addClass('cp-toolbar-button-active');
$drawerContent.focus();
var wh = $(window).height();
var topPos = $drawer[0].getBoundingClientRect().bottom;
$drawerContent.css('max-height', Math.floor(wh - topPos - 1)+'px');
}
});
var onBlur = function (e) {
if (e.relatedTarget) {
if ($(e.relatedTarget).is('.cp-toolbar-drawer-button')) { return; }
if ($(e.relatedTarget).parents('.'+DRAWER_CLS).length) {
$(e.relatedTarget).blur(onBlur);
return;
}
}
$drawer.removeClass('cp-toolbar-button-active');
$drawerContent.hide();
};
$drawerContent.blur(onBlur);
}).hide();
UI.createDrawer($drawer, $drawerContent);
}
// The 'notitle' class removes the line added for the title with a small screen

28
www/slide/inner.js
View File

@ -100,7 +100,6 @@ define([
});
};
// XXX this function is a duplicate of /code/
var mkThemeButton = function (framework) {
var $theme = $(h('button.cp-toolbar-appmenu', [
h('i.cptools.cptools-palette'),
@ -109,29 +108,10 @@ define([
var $content = $(h('div.cp-toolbar-drawer-content', {
tabindex: 1
})).hide();
$theme.click(function () {
$content.toggle();
$theme.removeClass('cp-toolbar-button-active');
if ($content.is(':visible')) {
$theme.addClass('cp-toolbar-button-active');
$content.focus();
var wh = $(window).height();
var topPos = $theme[0].getBoundingClientRect().bottom;
$content.css('max-height', Math.floor(wh - topPos - 1)+'px');
}
});
var onBlur = function (e) {
if (e.relatedTarget) {
if ($(e.relatedTarget).is('.cp-toolbar-drawer-button')) { return; }
if ($(e.relatedTarget).parents('.cp-toolbar-drawer-content').length) {
$(e.relatedTarget).blur(onBlur);
return;
}
}
$theme.removeClass('cp-toolbar-button-active');
$content.hide();
};
$content.blur(onBlur).appendTo($theme);
// set up all the necessary events
UI.createDrawer($theme, $content);
framework._.toolbar.$theme = $content;
framework._.toolbar.$bottomL.append($theme);
};