From f4c9ebd701651045740cfdea242e959d77c4c2f6 Mon Sep 17 00:00:00 2001 From: James Elliott Date: Tue, 26 Apr 2011 23:05:49 -0400 Subject: [PATCH 15/15] AJAX paging is working Some file organization --- includes/media.browser.inc | 72 +++++---- js/media.admin.js | 2 +- js/media.browser.js | 99 ++---------- js/media.popups.js | 357 ---------------------------------------- js/media.thumbnails.js | 47 ------ js/plugins/media.table.js | 19 ++ js/plugins/media.thumbnails.js | 47 ++++++ 7 files changed, 117 insertions(+), 526 deletions(-) delete mode 100644 js/media.popups.js delete mode 100644 js/media.thumbnails.js create mode 100644 js/plugins/media.table.js create mode 100644 js/plugins/media.thumbnails.js diff --git a/includes/media.browser.inc b/includes/media.browser.inc index cd0dc4b..891a7d3 100644 --- a/includes/media.browser.inc +++ b/includes/media.browser.inc @@ -180,7 +180,16 @@ function media_browser_build() { $form = array(); // Attach browser JS media_attach_browser_js($form); - + + $params = array_merge(drupal_get_query_parameters(), drupal_get_query_parameters($_POST)); + $params['limit'] = isset($params['limit']) ? $params['limit'] : variable_get('media_admin_limit', 50); + $params['types'] = isset($params['types']) ? $params['types'] : array_keys(media_type_get_types()); + $params['no_ops'] = isset($params['no_ops']) ? TRUE : FALSE; + $params['page'] = isset($params['page']) ? $params['page'] : 0; + + // This will translate a POST page # to the pager and queries + $_GET['page'] = $params['page']; + // Gather the display information. $display = media_browser_get_display(); @@ -189,12 +198,15 @@ function media_browser_build() { '#suffix' => '', ); + drupal_add_js(drupal_get_path('module', 'media') . '/js/media.browser.js'); + drupal_add_library('system', 'jquery.bbq'); + // Build the display switch. - $form['browser']['switch'] = media_browser_display_switch(); - + $form['browser']['switch'] = media_browser_display_switch($params); + // Build the display. include_once $display['file']; - $form['browser']['display'] = $display['callback'](); + $form['browser']['display'] = $display['callback']($params); return $form; } @@ -217,7 +229,6 @@ function media_browser_set_display($type, $js = FALSE) { global $user; $types = media_display_types(); - if (in_array($type, array_keys($types))) { $user->data['media_display_type'] = $type; user_save($user); @@ -279,13 +290,8 @@ function media_browser_get_plugins($params = array()) { /** * Form builder: Builds the media list administration overview. */ -function media_browser_table() { - // @todo Change to media_variable_get('admin_pager_limit') for consistency - // with browser_pager_limit? - $params = array_merge(drupal_get_query_parameters(), drupal_get_query_parameters($_POST)); - $limit = isset($params['limit']) ? $params['limit'] : variable_get('media_admin_limit', 50); - $types = isset($params['types']) ? $params['types'] : media_type_get_types(); - $no_ops = isset($params['no_ops']) ? TRUE : FALSE; +function media_browser_table($params) { + drupal_add_js(drupal_get_path('module', 'media') . '/js/plugins/media.table.js'); // Build the sortable table header. $header = array( @@ -293,23 +299,26 @@ function media_browser_table() { 'type' => array('data' => t('Type'), 'field' => 'f.filemime'), 'size' => array('data' => t('Size'), 'field' => 'f.filesize'), 'author' => array('data' => t('Author'), 'field' => 'u.name'), - 'timestamp' => array('data' => t('Updated'), 'field' => 'f.timestamp', 'sort' => 'asc'), + 'timestamp' => array('data' => t('Updated'), 'field' => 'f.timestamp', 'sort' => 'desc'), ); - if (!$no_ops) { + if (!isset($params['no_ops'])) { $header['operations'] = array('data' => t('Operations')); } $query = db_select('file_managed', 'f')->extend('PagerDefault')->extend('TableSort'); $query->join('users', 'u', 'f.uid = u.uid'); - $result = $query + $query ->fields('f') ->fields('u', array('name')) ->condition('f.status', FILE_STATUS_PERMANENT) - ->limit($limit) - ->orderByHeader($header) - ->execute(); + ->condition('f.type', $params['types']) + ->element(0) + ->limit($params['limit']) + ->orderByHeader($header); + + $result = $query->execute(); $destination = drupal_get_destination(); $files = array(); @@ -332,7 +341,7 @@ function media_browser_table() { 'timestamp' => format_date($file->timestamp, 'short'), ); - if (!$no_ops) { + if (!$params['no_ops']) { $options[$file->fid]['operations'] = l(t('edit'), 'media/' . $file->fid . '/edit', array('query' => $destination)); } @@ -354,19 +363,15 @@ function media_browser_table() { /** * Form builder: Builds the media thumbnails administration overview. */ -function media_browser_thumbnails() { - // @todo Change to media_variable_get('admin_pager_limit') for consistency - // with browser_pager_limit? - $params = array_merge(drupal_get_query_parameters(), drupal_get_query_parameters($_POST)); - $limit = isset($params['limit']) ? $params['limit'] : variable_get('media_admin_limit', 50); - $types = isset($params['types']) ? $params['types'] : media_type_get_types(); - $no_ops = isset($params['no_ops']) ? TRUE : FALSE; - +function media_browser_thumbnails($params) { + $query = new EntityFieldQuery(); - $query->pager($limit); + $query->pager($params['limit'], 0); $query->entityCondition('entity_type', 'media'); + $query->propertyOrderBy('timestamp', 'desc'); $query->propertyCondition('status', FILE_STATUS_PERMANENT); + $query->propertyCondition('type', $params['types']); $result = $query->execute(); $ids = key_exists('media', $result) ? array_keys($result['media']) : FALSE; @@ -379,7 +384,7 @@ function media_browser_thumbnails() { $path = drupal_get_path('module', 'media'); drupal_add_css($path . '/css/media.thumbnails.css'); - drupal_add_js($path . '/js/media.thumbnails.js'); + drupal_add_js($path . '/js/plugins/media.thumbnails.js'); if (!isset($params['singleselect'])) { $form['select_all'] = array( @@ -413,7 +418,7 @@ function media_browser_thumbnails() { if (count($media_entities)) { foreach ($media_entities as $media) { - $preview = media_get_thumbnail_preview($media, !$no_ops); + $preview = media_get_thumbnail_preview($media, !$params['no_ops']); $form['files'][$media->fid] = array( '#type' => 'checkbox', '#title' => '', @@ -431,7 +436,7 @@ function media_browser_thumbnails() { /** * Build the display switch portion of the file listings form. */ -function media_browser_display_switch() { +function media_browser_display_switch($params) { global $user; $type = isset($user->data['media_display_type']) ? $user->data['media_display_type'] : 'list'; $display_types = media_display_types(); @@ -460,8 +465,9 @@ function media_browser_display_switch() { '#ajax' => array( 'path' => 'media/browser/ajax/' . $delta, 'submit' => array( - 'limit' => isset($_POST['limit']) ? $_POST['limit'] : variable_get('media_admin_limit', 50), - 'no_ops' => isset($_POST['no_ops']) ? $_POST['no_ops'] : '', + 'limit' => $params['limit'], + 'no_ops' => $params['no_ops'], + 'page' => $params['page'], ), ), '#attributes' => $attributes, diff --git a/js/media.admin.js b/js/media.admin.js index 6cf8c2e..50f383f 100644 --- a/js/media.admin.js +++ b/js/media.admin.js @@ -25,7 +25,7 @@ Drupal.behaviors.mediaAdmin = { // When the media browser closes successfully, refresh the page // @todo: Turn this into an AJAX refresh of the current display - $(window).bind('mediaBrowserSelect', function() {location.reload();}); + $('#media-admin-base').bind('mediaBrowserSelect', function() { location.reload(); }); } }; diff --git a/js/media.browser.js b/js/media.browser.js index 284d7e2..67b6812 100644 --- a/js/media.browser.js +++ b/js/media.browser.js @@ -1,96 +1,19 @@ (function ($) { - -Drupal.media = Drupal.media || {}; -Drupal.media.browser = Drupal.media.browser || {}; -Drupal.media.browser.selectedMedia = []; -Drupal.media.browser.mediaAdded = function () {}; -Drupal.media.browser.selectionFinalized = function (selectedMedia) { - // This is intended to be overridden if a callee wants to be triggered - // when the media selection is finalized from inside the browser. - // This is used for the file upload form for instance. -}; - -Drupal.behaviors.experimentalMediaBrowser = { - attach: function (context) { - var tab = $('.media-browser-active-tab', context).val(); - $('#media-browser-tabset').tabs({ - show: Drupal.media.browser.tabSwitch, - selected: tab +Drupal.behaviors.media_browser = { + attach: function (context, settings) { + $('.pager a', context).bind('click', function (event) { + event.preventDefault(); + var display = $('#media-display-switches input.active'); + var params = $.deparam.querystring($(this).attr('href')); + + Drupal.ajax[display.attr('id')].options.data.page = params.page; + Drupal.ajax[display.attr('id')].element_settings.submit.page = params.page; + + display.trigger(Drupal.ajax[display.attr('id')].event); }); } }; -Drupal.media.browser.launch = function (event, ui) { - return ; -}; - -Drupal.media.browser.tabSwitch = function (event, ui) { - var value = $(this).tabs( "option", "selected" ); - console.warn('Tab index: ' + value); - $('.media-browser-active-tab').val(value); -}; - -Drupal.media.browser.validateButtons = function() { - // The media browser runs in an IFRAME. The Drupal.media.popups.mediaBrowser() - // function sets up the IFRAME and "OK" and "Cancel" buttons that are outside - // of the IFRAME, so that their click handlers can destroy the IFRAME while - // retaining information about what media items were selected. However, - // Drupal UI convention is to place all action buttons on the same "line" - // at the bottom of the form, so if the form within the IFRAME contains a - // "Submit" button or other action buttons, then the "OK" and "Cancel" - // buttons below the IFRAME break this convention and confuse the user. - // Therefore, we add "Submit" and "Cancel" buttons inside the IFRAME, and - // have their click action trigger the click action of the corresonding - // "OK" and "Cancel" buttons that are outside the IFRAME. media.css contains - // CSS rules that hide the outside buttons. - // - // We don't add a "Submit" button if the form already has one, since in these - // cases, another round-trip to the server is needed before the user's - // selection is finalized. For these cases, when the form's real Submit - // button is clicked, the server either returns another form for the user to - // fill out, or else a completion page that contains or sets the - // Drupal.media.browser.selectedMedia variable. If the latter, then - // Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad() auto-triggers the - // "OK" button action to finalize the selection and remove the IFRAME. - // - // @todo An alternate, less hacky solution would be most welcome. - if (!($('.form-submit', this).length > 0)) { - $('Submit').appendTo(this).bind('click', Drupal.media.browser.submit); - if (!($('.fake-cancel', this).length > 0)) { - $('Cancel').appendTo(this).bind('click', Drupal.media.browser.submit); - } - } else if (!($('.fake-cancel', this).length > 0)) { - var parent = $('.form-actions', this); - if (!parent.length) { - parent = $('form > div', this); - } - $('Cancel').appendTo(parent).bind('click', Drupal.media.browser.submit); - } -}; - -Drupal.media.browser.submit = function () { - // @see Drupal.media.browser.validateButtons(). - var buttons = $(parent.window.document.body).find('#mediaBrowser').parent('.ui-dialog').find('.ui-dialog-buttonpane button'); - if ($(this).hasClass('fake-cancel')) { - buttons[1].click(); - } else { - buttons[0].click(); - } -} - -Drupal.media.browser.selectMedia = function (selectedMedia) { - Drupal.media.browser.selectedMedia = selectedMedia; -}; - -Drupal.media.browser.finalizeSelection = function () { - if (!Drupal.media.browser.selectedMedia) { - throw new exception('Cannot continue, nothing selected'); - } - else { - Drupal.media.browser.selectionFinalized(Drupal.media.browser.selectedMedia); - } -}; - }(jQuery)); diff --git a/js/media.popups.js b/js/media.popups.js deleted file mode 100644 index e251a8a..0000000 --- a/js/media.popups.js +++ /dev/null @@ -1,357 +0,0 @@ - -/** - * @file: Popup dialog interfaces for the media project. - * - * Drupal.media.popups.mediaBrowser - * Launches the media browser which allows users to pick a piece of media. - * - * Drupal.media.popups.mediaStyleSelector - * Launches the style selection form where the user can choose - * what format / style they want their media in. - * - */ - -(function ($) { - -Drupal.media = Drupal.media || {}; -Drupal.media.popups = Drupal.media.popups || {}; - -/** - * Media browser popup. Creates a media browser dialog. - * - * @param {function} - * onSelect Callback for when dialog is closed, received (Array - * media, Object extra); - * @param {Object} - * globalOptions Global options that will get passed upon initialization of the browser. - * @see Drupal.media.popups.mediaBrowser.getDefaults(); - * - * @param {Object} - * pluginOptions Options for specific plugins. These are passed - * to the plugin upon initialization. If a function is passed here as - * a callback, it is obviously not passed, but is accessible to the plugin - * in Drupal.settings.variables. - * - * Example - * pluginOptions = {library: {url_include_patterns:'/foo/bar'}}; - * - * @param {Object} - * widgetOptions Options controlling the appearance and behavior of the - * modal dialog. - * @see Drupal.media.popups.mediaBrowser.getDefaults(); - */ -Drupal.media.popups.mediaBrowser = function (onSelect, globalOptions, pluginOptions, widgetOptions) { - var options = Drupal.media.popups.mediaBrowser.getDefaults(); - options.global = $.extend({}, options.global, globalOptions); - options.plugins = pluginOptions; - options.widget = $.extend({}, options.widget, widgetOptions); - - // Create it as a modal window. - var browserSrc = options.widget.src; - // Params to send along to the iframe. WIP. - var params = {}; - $.extend(params, options.global); - params.plugins = options.plugins; - - browserSrc += '&' + $.param(params); - var mediaIframe = Drupal.media.popups.getPopupIframe(browserSrc, 'mediaBrowser'); - // Attach the onLoad event - mediaIframe.bind('load', options, options.widget.onLoad); - /** - * Setting up the modal dialog - */ - - var ok = 'OK'; - var cancel = 'Cancel'; - var notSelected = 'You have not selected anything!'; - - if (Drupal && Drupal.t) { - ok = Drupal.t(ok); - cancel = Drupal.t(cancel); - notSelected = Drupal.t(notSelected); - } - - // @todo: let some options come through here. Currently can't be changed. - var dialogOptions = options.dialog; - - dialogOptions.buttons[ok] = function () { - var selected = this.contentWindow.Drupal.media.browser.selectedMedia; - if (selected.length < 1) { - alert(notSelected); - return; - } - onSelect(selected); - $(this).dialog("destroy"); - $(this).remove(); - }; - - dialogOptions.buttons[cancel] = function () { - $(this).dialog("destroy"); - $(this).remove(); - }; - - Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions)); - // Remove the title bar. - mediaIframe.parents(".ui-dialog").find(".ui-dialog-titlebar").remove(); - Drupal.media.popups.overlayDisplace(mediaIframe.parents(".ui-dialog")); - return mediaIframe; -}; - -Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad = function (e) { - var options = e.data; - if (this.contentWindow.Drupal.media.browser.selectedMedia.length > 0) { - var ok = $(this).dialog('option', 'buttons')['OK']; - ok.call(this); - return; - } -}; - -Drupal.media.popups.mediaBrowser.getDefaults = function () { - return { - global: { - types: [], // Types to allow, defaults to all. - activePlugins: [] // If provided, a list of plugins which should be enabled. - }, - widget: { // Settings for the actual iFrame which is launched. - src: Drupal.settings.media.browserUrl, // Src of the media browser (if you want to totally override it) - onLoad: Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad // Onload function when iFrame loads. - }, - dialog: Drupal.media.popups.getDialogOptions() - }; -}; - -Drupal.media.popups.mediaBrowser.finalizeSelection = function () { - var selected = this.contentWindow.Drupal.media.browser.selectedMedia; - if (selected.length < 1) { - alert(notSelected); - return; - } - onSelect(selected); - $(this).dialog("destroy"); - $(this).remove(); -} - -/** - * Style chooser Popup. Creates a dialog for a user to choose a media style. - * - * @param mediaFile - * The mediaFile you are requesting this formatting form for. - * @todo: should this be fid? That's actually all we need now. - * - * @param Function - * onSubmit Function to be called when the user chooses a media - * style. Takes one parameter (Object formattedMedia). - * - * @param Object - * options Options for the mediaStyleChooser dialog. - */ -Drupal.media.popups.mediaStyleSelector = function (mediaFile, onSelect, options) { - var defaults = Drupal.media.popups.mediaStyleSelector.getDefaults(); - // @todo: remove this awful hack :( - defaults.src = defaults.src.replace('-media_id-', mediaFile.fid); - options = $.extend({}, defaults, options); - // Create it as a modal window. - var mediaIframe = Drupal.media.popups.getPopupIframe(options.src, 'mediaStyleSelector'); - // Attach the onLoad event - mediaIframe.bind('load', options, options.onLoad); - - /** - * Set up the button text - */ - var ok = 'OK'; - var cancel = 'Cancel'; - var notSelected = 'Very sorry, there was an unknown error embedding media.'; - - if (Drupal && Drupal.t) { - ok = Drupal.t(ok); - cancel = Drupal.t(cancel); - notSelected = Drupal.t(notSelected); - } - - // @todo: let some options come through here. Currently can't be changed. - var dialogOptions = Drupal.media.popups.getDialogOptions(); - - dialogOptions.buttons[ok] = function () { - - var formattedMedia = this.contentWindow.Drupal.media.formatForm.getFormattedMedia(); - if (!formattedMedia) { - alert(notSelected); - return; - } - onSelect(formattedMedia); - $(this).dialog("destroy"); - $(this).remove(); - }; - - dialogOptions.buttons[cancel] = function () { - $(this).dialog("destroy"); - $(this).remove(); - }; - - Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions)); - // Remove the title bar. - mediaIframe.parents(".ui-dialog").find(".ui-dialog-titlebar").remove(); - Drupal.media.popups.overlayDisplace(mediaIframe.parents(".ui-dialog")); - return mediaIframe; -}; - -Drupal.media.popups.mediaStyleSelector.mediaBrowserOnLoad = function (e) { -}; - -Drupal.media.popups.mediaStyleSelector.getDefaults = function () { - return { - src: Drupal.settings.media.styleSelectorUrl, - onLoad: Drupal.media.popups.mediaStyleSelector.mediaBrowserOnLoad - }; -}; - - -/** - * Style chooser Popup. Creates a dialog for a user to choose a media style. - * - * @param mediaFile - * The mediaFile you are requesting this formatting form for. - * @todo: should this be fid? That's actually all we need now. - * - * @param Function - * onSubmit Function to be called when the user chooses a media - * style. Takes one parameter (Object formattedMedia). - * - * @param Object - * options Options for the mediaStyleChooser dialog. - */ -Drupal.media.popups.mediaFieldEditor = function (fid, onSelect, options) { - var defaults = Drupal.media.popups.mediaFieldEditor.getDefaults(); - // @todo: remove this awful hack :( - defaults.src = defaults.src.replace('-media_id-', fid); - options = $.extend({}, defaults, options); - // Create it as a modal window. - var mediaIframe = Drupal.media.popups.getPopupIframe(options.src, 'mediaFieldEditor'); - // Attach the onLoad event - // @TODO - This event is firing too early in IE on Windows 7, - // - so the height being calculated is too short for the content. - mediaIframe.bind('load', options, options.onLoad); - - /** - * Set up the button text - */ - var ok = 'OK'; - var cancel = 'Cancel'; - var notSelected = 'Very sorry, there was an unknown error embedding media.'; - - if (Drupal && Drupal.t) { - ok = Drupal.t(ok); - cancel = Drupal.t(cancel); - notSelected = Drupal.t(notSelected); - } - - // @todo: let some options come through here. Currently can't be changed. - var dialogOptions = Drupal.media.popups.getDialogOptions(); - - dialogOptions.buttons[ok] = function () { - alert('hell yeah'); - return "poo"; - - var formattedMedia = this.contentWindow.Drupal.media.formatForm.getFormattedMedia(); - if (!formattedMedia) { - alert(notSelected); - return; - } - onSelect(formattedMedia); - $(this).dialog("destroy"); - $(this).remove(); - }; - - dialogOptions.buttons[cancel] = function () { - $(this).dialog("destroy"); - $(this).remove(); - }; - - Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions)); - // Remove the title bar. - mediaIframe.parents(".ui-dialog").find(".ui-dialog-titlebar").remove(); - Drupal.media.popups.overlayDisplace(mediaIframe.parents(".ui-dialog")); - return mediaIframe; -}; - -Drupal.media.popups.mediaFieldEditor.mediaBrowserOnLoad = function (e) { - -}; - -Drupal.media.popups.mediaFieldEditor.getDefaults = function () { - return { - // @todo: do this for real - src: '/media/-media_id-/edit?render=media-popup', - onLoad: Drupal.media.popups.mediaFieldEditor.mediaBrowserOnLoad - }; -}; - - -/** - * Generic functions to both the media-browser and style selector - */ - -/** - * Returns the commonly used options for the dialog. - */ -Drupal.media.popups.getDialogOptions = function () { - return { - buttons: {}, - dialogClass: 'media-wrapper', - modal: true, - draggable: false, - resizable: false, - minWidth: 600, - width: 800, - height: 550, - position: 'center', - overlay: { - backgroundColor: '#000000', - opacity: 0.4 - } - }; -}; - -/** - * 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: 'no'}; - var options = $.extend({}, defaults, options); - - return $('