Fixed problem with dropdown menus in responsive tables (grids)

This commit is contained in:
Lucas Bartholemy 2017-10-28 22:26:54 +02:00
parent 246b6c38ab
commit 4e432faf6d

View File

@ -55,7 +55,7 @@ humhub.module('ui.additions', function (module, require, $) {
if (options.filter && !options.filter.indexOf(id)) { if (options.filter && !options.filter.indexOf(id)) {
return; return;
} }
try { try {
module.apply($element, id); module.apply($element, id);
} catch (e) { } catch (e) {
@ -79,12 +79,12 @@ humhub.module('ui.additions', function (module, require, $) {
} }
var $match = $element.find(addition.selector).addBack(addition.selector); var $match = $element.find(addition.selector).addBack(addition.selector);
// only apply addition if we actually find a match // only apply addition if we actually find a match
if(!$match.length) { if (!$match.length) {
return; return;
} }
addition.handler.apply($match, [$match, $element]); addition.handler.apply($match, [$match, $element]);
}; };
@ -92,15 +92,35 @@ humhub.module('ui.additions', function (module, require, $) {
event.on('humhub:ready', function (evt) { event.on('humhub:ready', function (evt) {
module.applyTo($('body')); module.applyTo($('body'));
}); });
require('action').registerHandler('copyToClipboard', function(evt) { require('action').registerHandler('copyToClipboard', function (evt) {
clipboard.writeText(evt.$target.text()).then(function() { clipboard.writeText(evt.$target.text()).then(function () {
require('ui.status').success(module.text('success.clipboard')); require('ui.status').success(module.text('success.clipboard'));
}).catch(function(err) { }).catch(function (err) {
require('ui.status').error(module.text('error.clipboard'), true); require('ui.status').error(module.text('error.clipboard'), true);
}); });
}); });
// Workaround: Bootstrap bug with dropdowns in responsive tables
// See: https://github.com/twbs/bootstrap/issues/11037
$(document).on('shown.bs.dropdown', '.table-responsive', function (e) {
var t = $(this),
m = $(e.target).find('.dropdown-menu'),
tb = t.offset().top + t.height(),
mb = m.offset().top + m.outerHeight(true),
d = 20; // Space for shadow + scrollbar.
if (t[0].scrollWidth > t.innerWidth()) {
if (mb + d > tb) {
t.css('padding-bottom', ((mb + d) - tb));
}
} else {
t.css('overflow', 'visible');
}
}).on('hidden.bs.dropdown', '.table-responsive', function () {
$(this).css({'padding-bottom': '', 'overflow': ''});
});
// workaround for jp-player since it sets display to inline which results in a broken view... // workaround for jp-player since it sets display to inline which results in a broken view...
$(document).on('click.humhub-jp-play', '.jp-play', function () { $(document).on('click.humhub-jp-play', '.jp-play', function () {
$(this).closest('.jp-controls').find('.jp-pause').css('display', 'block'); $(this).closest('.jp-controls').find('.jp-pause').css('display', 'block');
@ -110,9 +130,9 @@ humhub.module('ui.additions', function (module, require, $) {
module.register('autosize', '.autosize', function ($match) { module.register('autosize', '.autosize', function ($match) {
$match.autosize(); $match.autosize();
}); });
module.register('select2', '[data-ui-select2]', function ($match) { module.register('select2', '[data-ui-select2]', function ($match) {
$match.select2({theme:"humhub"}); $match.select2({theme: "humhub"});
}); });
// Show tooltips on elements // Show tooltips on elements
@ -142,7 +162,7 @@ humhub.module('ui.additions', function (module, require, $) {
$match.loader(); $match.loader();
}); });
}; };
var extend = function (id, handler, options) { var extend = function (id, handler, options) {
options = options || {}; options = options || {};
@ -180,7 +200,7 @@ humhub.module('ui.additions', function (module, require, $) {
// Jquery date picker div is not removed... // Jquery date picker div is not removed...
$('#ui-datepicker-div').remove(); $('#ui-datepicker-div').remove();
$('.popover').remove(); $('.popover').remove();
$('.tooltip').remove(); $('.tooltip').remove();
}; };
@ -218,12 +238,12 @@ humhub.module('ui.additions', function (module, require, $) {
var $node = $(node); var $node = $(node);
node = $node[0]; node = $node[0];
var observer = new MutationObserver(function (mutations) { var observer = new MutationObserver(function (mutations) {
mutations.forEach(function(mutation) { mutations.forEach(function (mutation) {
var $nodes = $(mutation.addedNodes).filter(function () { var $nodes = $(mutation.addedNodes).filter(function () {
return this.nodeType === 1; // filter out text nodes return this.nodeType === 1; // filter out text nodes
}); });
$nodes.each(function() { $nodes.each(function () {
var $this = $(this); var $this = $(this);
module.applyTo($this); module.applyTo($this);
}) })