Commit 5faa4bb4 authored by Devin Carlson's avatar Devin Carlson

Issue #1972628 by Devin Carlson: Improved media browser positioning to better...

Issue #1972628 by Devin Carlson: Improved media browser positioning to better utilize window space and fix content display.
parent 6af0fc95
......@@ -58,10 +58,6 @@
margin-right: 0;
}
.media-browser-tab.ui-tabs-panel {
border: 1px solid #cccccc;
}
/* *********************************************************** */
/* Media item display */
......
......@@ -24,11 +24,7 @@ Drupal.behaviors.MediaBrowser = {
}
// Instantiate the tabs.
$('#media-browser-tabset').tabs({
// Ensure that the modal resizes to the content on each tab switch.
show: Drupal.media.browser.resizeIframe, // jquery ui < 1.8
activate: Drupal.media.browser.resizeIframe // jquery ui >= 1.8
});
$('#media-browser-tabset').tabs();
$('.ui-tabs-nav li').mouseup(function() {
Drupal.media.browser.activeTab = $(this).index();
......@@ -105,14 +101,6 @@ Drupal.media.browser.finalizeSelection = function () {
}
};
/**
* Resize the Media Browser to the content height.
*/
Drupal.media.browser.resizeIframe = function (event) {
var h = $('body').height();
$(parent.window.document).find('#mediaBrowser').height(h);
};
Drupal.media.browser.selectErrorTab = function() {
// Find the ID of a tab with an error in it
var errorTabID = $('#media-browser-tabset')
......@@ -134,7 +122,6 @@ Drupal.media.browser.selectActiveTab = function() {
// Find the index of the last active tab.
setTimeout(function() {
Drupal.media.browser.selectTab(Drupal.media.browser.activeTab);
Drupal.media.browser.resizeIframe();
}, 10);
};
......@@ -153,6 +140,8 @@ Drupal.media.browser.selectTab = function(index) {
$('#media-browser-tabset').tabs('option', 'active', index);
}
$('.media-modal-frame').width('100%');
// Update the active tab variable.
Drupal.media.browser.activeTab = index;
};
......
......@@ -30,16 +30,6 @@ Drupal.behaviors.mediaFormatForm = {
$('<a class="button fake-ok">' + Drupal.t('Submit') + '</a>').appendTo($('#media-format-form')).bind('click', Drupal.media.formatForm.submit);
$('<a class="button fake-cancel">' + Drupal.t('Cancel') + '</a>').appendTo($('#media-format-form')).bind('click', Drupal.media.formatForm.submit);
});
// Resize the window on load.
// @TODO this duplicates Drupal.media.browser.resizeIframe()
// can we put a resize function into media.core.js?
$(document).ready(function () {
// Get the height and add a bit of padding to acomidate the form buttons.
var h = $('body').height() + 20;
$(parent.window.document).find('#mediaStyleSelector').height(h);
});
}
};
......
......@@ -89,10 +89,16 @@ Drupal.media.popups.mediaBrowser = function (onSelect, globalOptions, pluginOpti
$(this).dialog("close");
};
Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions));
var dialog = mediaIframe.dialog(dialogOptions);
// Remove the title bar.
mediaIframe.parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
Drupal.media.popups.overlayDisplace(mediaIframe.parents(".ui-dialog"));
dialog.parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
Drupal.media.popups.sizeDialog(dialog);
Drupal.media.popups.resizeDialog(dialog);
Drupal.media.popups.scrollDialog(dialog);
Drupal.media.popups.overlayDisplace(dialog.parents(".ui-dialog"));
return mediaIframe;
};
......@@ -187,10 +193,16 @@ Drupal.media.popups.mediaStyleSelector = function (mediaFile, onSelect, options)
$(this).dialog("close");
};
Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions));
var dialog = mediaIframe.dialog(dialogOptions);
// Remove the title bar.
mediaIframe.parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
Drupal.media.popups.overlayDisplace(mediaIframe.parents(".ui-dialog"));
dialog.parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
Drupal.media.popups.sizeDialog(dialog);
Drupal.media.popups.resizeDialog(dialog);
Drupal.media.popups.scrollDialog(dialog);
Drupal.media.popups.overlayDisplace(dialog.parents(".ui-dialog"));
return mediaIframe;
};
......@@ -261,10 +273,16 @@ Drupal.media.popups.mediaFieldEditor = function (fid, onSelect, options) {
$(this).dialog("close");
};
Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions));
var dialog = mediaIframe.dialog(dialogOptions);
// Remove the title bar.
mediaIframe.parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
Drupal.media.popups.overlayDisplace(mediaIframe.parents(".ui-dialog"));
dialog.parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
Drupal.media.popups.sizeDialog(dialog);
Drupal.media.popups.resizeDialog(dialog);
Drupal.media.popups.scrollDialog(dialog);
Drupal.media.popups.overlayDisplace(dialog);
return mediaIframe;
};
......@@ -295,14 +313,9 @@ Drupal.media.popups.getDialogOptions = function () {
modal: true,
draggable: false,
resizable: false,
minWidth: 500,
width: 670,
height: 280,
width: 'auto',
height: 'auto',
position: 'center',
overlay: {
backgroundColor: '#000000',
opacity: 0.4
},
zIndex: 10000,
close: function (event, ui) {
$(event.target).remove();
......@@ -310,30 +323,11 @@ Drupal.media.popups.getDialogOptions = function () {
};
};
/**
* Created padding on a dialog
*
* @param jQuery dialogElement
* The element which has .dialog() attached to it.
*/
Drupal.media.popups.setDialogPadding = function (dialogElement) {
// @TODO: Perhaps remove this hardcoded reference to height.
// - It's included to make IE on Windows 7 display the dialog without
// collapsing. 550 is the height that displays all of the tab panes
// within the Add Media overlay. This is either a bug in the jQuery
// UI library, a bug in IE on Windows 7 or a bug in the way the
// dialog is instantiated. Or a combo of the three.
// All browsers except IE on Win7 ignore these defaults and adjust
// the height of the iframe correctly to match the content in the panes
dialogElement.height(dialogElement.dialog('option', 'height'));
dialogElement.width(dialogElement.dialog('option', 'width'));
};
/**
* Get an iframe to serve as the dialog's contents. Common to both plugins.
*/
Drupal.media.popups.getPopupIframe = function (src, id, options) {
var defaults = {width: '800px', scrolling: 'auto'};
var defaults = {width: '100%', scrolling: 'auto'};
var options = $.extend({}, defaults, options);
return $('<iframe class="media-modal-frame"/>')
......@@ -352,4 +346,48 @@ Drupal.media.popups.overlayDisplace = function (dialog) {
}
}
/**
* Size the dialog when it is first loaded and keep it centered when scrolling.
*
* @param jQuery dialogElement
* The element which has .dialog() attached to it.
*/
Drupal.media.popups.sizeDialog = function (dialogElement) {
var windowWidth = $(window).width();
var dialogWidth = windowWidth * 0.8;
var windowHeight = $(window).height();
var dialogHeight = windowHeight * 0.8;
dialogElement.dialog("option", "width", dialogWidth);
dialogElement.dialog("option", "height", dialogHeight);
dialogElement.dialog("option", "position", 'center');
$('.media-modal-frame').width('100%');
}
/**
* Resize the dialog when the window changes.
*
* @param jQuery dialogElement
* The element which has .dialog() attached to it.
*/
Drupal.media.popups.resizeDialog = function (dialogElement) {
$(window).resize(function() {
Drupal.media.popups.sizeDialog(dialogElement);
});
}
/**
* Keeps the dialog centered when the window is scrolled.
*
* @param jQuery dialogElement
* The element which has .dialog() attached to it.
*/
Drupal.media.popups.scrollDialog = function (dialogElement) {
// Keep the dialog window centered when scrolling.
$(window).scroll(function() {
dialogElement.dialog("option", "position", 'center');
});
}
})(jQuery);
......@@ -5,11 +5,6 @@ Drupal.behaviors.mediaUploadMultiple.attach = function (context, settings) {
// it has created, so we need to resize the browser iframe after it's done.
var uploader = jQuery('#edit-upload').pluploadQueue();
if (uploader) {
// Handle the case in which the uploader has already finished initializing.
Drupal.media.browser.resizeIframe();
// Handle the case in which the uploader has not yet initialized.
uploader.bind("PostInit", Drupal.media.browser.resizeIframe);
uploader.bind('StateChanged', Drupal.behaviors.mediaUploadMultiple.submit);
}
};
......
......@@ -30,7 +30,7 @@ $handler->display->display_options['query']['options']['query_tags'] = array(
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['exposed_form']['options']['autosubmit'] = TRUE;
$handler->display->display_options['pager']['type'] = 'full';
$handler->display->display_options['pager']['options']['items_per_page'] = '10';
$handler->display->display_options['pager']['options']['items_per_page'] = '25';
$handler->display->display_options['pager']['options']['offset'] = '0';
$handler->display->display_options['pager']['options']['id'] = '0';
$handler->display->display_options['style_plugin'] = 'media_browser';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment