Commit ca1d112b authored by JacobSingh's avatar JacobSingh

By ksenzee and JacobSingh: Overhauled the popup api, threw JS in libraries,...

By ksenzee and JacobSingh: Overhauled the popup api, threw JS in libraries, nicer looking code (and works).  Also set it to use seven theme unless otherwise specified
parent cc1a2ac9
Drupal.media = Drupal.media || {};
namespace('Drupal.media');
Drupal.media.mediaFormatSelected = {};
(function ($) {
Drupal.behaviors.mediaFormatForm = {
attach: function (context, settings) {
// Create the jQuery UI dialog box to handle all dialog events.
$("#media-format-form").bind('submit', Drupal.media.mediaFormatSelected);
//Setup the value to start with.
$("input[name='format']", context).change(Drupal.media.mediaFormatSelected);
$("input[name='format']:checked").trigger('change');
}
};
Drupal.media.mediaFormatSelected = function (e) {
var formatType = $("input[@name='format']:checked", this).val();
var formatType = $(this).val();
var formattedMedia = {type: formatType, html: Drupal.settings.media.formatFormFormats[formatType]};
$(this).parents('#dialog').trigger('mediaSelected', [formattedMedia]);
$(this).parents('#dialog').dialog('close');
return false;
debug.debug(formattedMedia);
Drupal.media.formattedMedia = formattedMedia;
}
})(jQuery);
/**
* @file: jQuery plugin for media.browser
*/
(function ($) {
/**
* @param function onSelect
* Callback for when dialog is closed, received (Array media, Object extra);
* @param Object options
* Array of options for the browser.
*/
$.fn.mediaBrowser = function(onSelect, options) {
options = $.extend({}, $.fn.mediaBrowser.getDefaults(), options);
debug.debug(options);
this.each(function() {
// Create it as a modal window.
var mediaIframe = $.fn.mediaBrowser.getIframe(options.src);
mediaIframe.bind('load', function (e) {
if (this.contentWindow.Drupal.media.browser) {
this.contentWindow.Drupal.media.browser.launch(options);
debug.debug('browser is loaded');
}
});
var horizontalPadding = 30;
var verticalPadding = 30;
mediaIframe.dialog({
//@Todo: i18n this
buttons: {
"Ok": function() {
var selected = this.contentWindow.Drupal.media.browser.selectedMedia;
if (selected.length < 1) {
alert('You have not selected anything!');
return;
}
onSelect(selected);
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
},
modal: true,
draggable: true,
resizable: true,
minWidth: 600,
width: 800,
height:500,
position: 'top',
overlay: {
backgroundColor: '#000000',
opacity: 0.4
}
})
.width(800 - horizontalPadding)
.height(500 - verticalPadding)
// Remove the title bar.
.parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
})
return this;
};
$.fn.mediaBrowser.getDefaults = function () {
debug.debug(Drupal.settings.media);
return {
media_types: ['video', 'images'],
src: Drupal.settings.media.browserUrl
};
};
$.fn.mediaBrowser.getIframe = function (src) {
return $('<iframe id="mediaBrowser" class="media-modal-frame"/>')
.attr('src', src)
.attr('width', '800px');
}
// end of closure
})(jQuery);
/**
* @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 ($) {
namespace('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}
* options Array of options for the browser.
*/
Drupal.media.popups.mediaBrowser = function(onSelect, options) {
options = $.extend({}, Drupal.media.popups.mediaBrowser.getDefaults(), options);
// Create it as a modal window.
var mediaIframe = Drupal.media.popups.getPopupIframe(options.src, 'mediaBrowser');
// Attach the onLoad event
mediaIframe.bind('load', options, options.onLoad);
/**
* Setting up the modal dialog
*/
/**
* Set up the button text
*/
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 = Drupal.media.popups.getDialogOptions();
dialogOptions.buttons[ok] = function () {
var selected = this.contentWindow.Drupal.media.browser.selectedMedia;
if (selected.length < 1) {
alert(notSelected);
return;
}
onSelect(selected);
$(this).dialog("close");
};
dialogOptions.buttons[cancel] = function () {
$(this).dialog("close");
};
Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions));
// Remove the title bar.
mediaIframe.parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
return mediaIframe;
}
Drupal.media.popups.mediaBrowser.mediaBrowserOnLoad = function (e) {
var options = e.data;
if (this.contentWindow.Drupal.media.browser) {
this.contentWindow.Drupal.media.browser.launch(options);
debug.debug('browser is loaded');
}
},
Drupal.media.popups.mediaBrowser.getDefaults = function() {
return {
src: Drupal.settings.media.browserUrl,
onLoad: Drupal.media.popups.mediaBrowser.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.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, 'mediaBrowser');
// Attach the onLoad event
mediaIframe.bind('load', options, options.onLoad);
/**
* Set up the button text
*/
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 = Drupal.media.popups.getDialogOptions();
dialogOptions.buttons[ok] = function () {
debug.debug(this.contentWindow);
var formattedMedia = this.contentWindow.Drupal.media.formattedMedia;
if (!formattedMedia) {
alert(notSelected);
return;
}
onSelect(formattedMedia);
$(this).dialog("close");
};
dialogOptions.buttons[cancel] = function () {
$(this).dialog("close");
};
Drupal.media.popups.setDialogPadding(mediaIframe.dialog(dialogOptions));
// Remove the title bar.
mediaIframe.parents(".ui-dialog").find(".ui-dialog-titlebar").remove();
return mediaIframe;
}
Drupal.media.popups.mediaStyleSelector.mediaBrowserOnLoad = function(e) {
debug.debug('loaded the style picker form');
}
Drupal.media.popups.mediaStyleSelector.getDefaults = function() {
return {
src: Drupal.settings.media.styleSelectorUrl,
onLoad: Drupal.media.popups.mediaStyleSelector.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: {},
modal: true,
draggable: true,
resizable: true,
minWidth: 600,
width: 800,
height:500,
position: 'top',
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
var horizontalPadding = 30;
var verticalPadding = 30;
dialogElement.width(dialogElement.dialog('option', 'width') - horizontalPadding)
dialogElement.height(dialogElement.dialog('option', 'height') - verticalPadding);
};
/**
* 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'};
var options = $.extend({}, defaults, options);
debug.debug(options);
return $('<iframe class="media-modal-frame"/>')
.attr('src', src)
.attr('width', options.width)
.attr('id', id);
};
// end of closure
})(jQuery);
......@@ -3,7 +3,6 @@
Drupal.media.browser.plugin.fromurl = function(mediaBrowser, options) {
return {
/* Abstract */
init: function() {
tabset = mediaBrowser.getTabset();
tabset.tabs('add', '#fromurl', 'From URL');
......
......@@ -6,32 +6,35 @@ Drupal.media = Drupal.media || {};
/**
* Execute the button.
*/
invoke: function(data, settings, instanceId) {
invoke: function (data, settings, instanceId) {
if (data.format == 'html') {
$().mediaBrowser( function (mediaFiles) {
var mediaFile = mediaFiles[0];
debug.debug(instanceId);
// This is totally not the indended solution to this. A very
// temporary hack to see if the dialog API is a good match
// and if so, I don't know how else to integrate it :(
element_settings = {};
element_settings.url = Drupal.settings.media.formatFormUrl.replace('-media-', mediaFile.fid);
element_settings.event = 'go';
var launcher = $('<div id ="wysiwyg-launcher"></div>');
Drupal.ajax['wysiwyg-launcher'] = new Drupal.ajax('wysiwyg-launcher', launcher, element_settings);
Drupal.ajax.prototype.commands.dialog_loading();
Drupal.dialog.bind('mediaSelected', function(event, formattedMedia) {
if (formattedMedia) {
debug.debug(formattedMedia);
Drupal.wysiwyg.plugins.media.insertMediaFile(mediaFile, formattedMedia.type, formattedMedia.html, Drupal.wysiwyg.instances[instanceId]);
}
});
launcher.trigger('go');
return;
Drupal.media.popups.mediaBrowser(function (mediaFiles) {
Drupal.wysiwyg.plugins.media.mediaBrowserOnSelect(mediaFiles, instanceId);
});
}
},
/**
* Respond to the mediaBrowser's onSelect event.
*/
mediaBrowserOnSelect: function (mediaFiles, instanceId) {
var mediaFile = mediaFiles[0];
var options = {};
Drupal.media.popups.mediaStyleSelector(mediaFile, function (formattedMedia) {
Drupal.wysiwyg.plugins.media.insertMediaFile(mediaFile, formattedMedia.type, formattedMedia.html, Drupal.wysiwyg.instances[instanceId]);
}, options);
return;
},
styleChooserOnLoad: function (e) {
var options = e.data;
debug.debug("Loaded the stylechooser");
debug.debug(options);
// $("reference to stylechooser body").load("media format form");
// bind to the submit button
},
insertMediaFile: function(mediaFile, viewMode, formattedMedia, wysiwygInstance) {
// Hack to allow for use of .html()
var embeddedMedia = $('<div>' + formattedMedia + '</div>');
......@@ -98,7 +101,7 @@ Drupal.media = Drupal.media || {};
},
createTag: function(mediaObj) {
imgNode = $("img",mediaObj);
imgNode = $("img", mediaObj);
// Collect all attribs to be stashed into tagContent
attribs = {};
imgAttribList = imgNode[0].attributes;
......
......@@ -114,3 +114,24 @@ function media_browser_list($conditions = array()) {
print drupal_json_encode($medias);
die();
}
function media_include_browser_js() {
drupal_add_library('media', 'media_browser');
drupal_add_library('system','ui');
drupal_add_library('system','ui.dialog');
// copied directly from media module to get Drupal.settings.media object
$settings = array(
'browserUrl' => url('media/browser',
array('query' => array('render' => 'media-popup'))),
'styleSelectorUrl' => url('media/-media_id-/format-form',
array('query' => array('render' => 'media-popup'))),
// @Todo: rip this down and make a callback API structure with tokens, etc
// this is temporary.
// Adding src to blacklist; fid and view_mode we capture outside attribs so adding
// them too to the blacklist.
'blacklist' => array('src','fid','view_mode'),
);
drupal_add_js(array('media' => $settings), 'setting');
}
......@@ -160,9 +160,10 @@ function media_format_form($form, $form_state, $media) {
$settings['media'] = array('formatFormFormats' => $formats);
drupal_add_js($settings, 'setting');
drupal_add_library('media', 'media_base');
$path = drupal_get_path('module', 'media');
$form['#attached']['js'][] = $path . '/javascript/media-format-form.js';
drupal_add_js($path . '/javascript/media-format-form.js');
$form['preview'] = array(
'#type' => 'markup',
......@@ -177,15 +178,6 @@ function media_format_form($form, $form_state, $media) {
'#default_value' => 'media_original',
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => 'select',
// This currently does nothing, because we really don't need a form submit here.
// '#ajax' => array(
// 'callback' => 'media_format_select',
// ),
);
return $form;
}
......
......@@ -16,4 +16,3 @@ files[] = test/media.types.test
dependencies[] = file
dependencies[] = image
dependencies[] = file_styles
dependencies[] = dialog
......@@ -126,6 +126,7 @@ function media_menu() {
'access arguments' => array('view'),
'type' => MENU_CALLBACK,
'file' => 'media.browser.inc',
'theme callback' => 'media_dialog_get_theme_name',
);
$items['media/browser/library'] = array(
......@@ -138,15 +139,16 @@ function media_menu() {
'file' => 'media.browser.inc',
);
$items['media/%media/format-form/%dialog_js'] = array(
'title' => 'Format form',
'description' => 'Used as an AJAX callback',
'page callback' => 'media_format_form_ajax',
'page arguments' => array(1, 3),
$items['media/%media/format-form'] = array(
'title' => 'Style selector',
'description' => 'Choose a format for a piece of media',
'page callback' => 'drupal_get_form',
'page arguments' => array('media_format_form', 1),
'access arguments' => array('administer media'),
'weight' => 0,
'type' => MENU_CALLBACK,
'file' => 'media.filter.inc',
'theme callback' => 'media_dialog_get_theme_name',
);
$items['media'] = array(
......@@ -254,7 +256,7 @@ function media_theme() {
'file' => 'media.theme.inc',
),
// Dialoge page.
// Dialog page.
'media_dialog_page' => array(
'render element' => 'page',
'template' => 'media-dialog-page',
......@@ -321,7 +323,7 @@ function media_file_update(&$file) {
* Implement hook_page_alter().
*/
function media_page_alter(&$page) {
if (isset($_GET['render']) && $_GET['render'] == 'media-browser') {
if (isset($_GET['render']) && $_GET['render'] == 'media-popup') {
$page['#theme'] = 'media_dialog_page';
foreach (element_children($page) as $key) {
if ($key != 'content') {
......@@ -523,3 +525,44 @@ function media_attached_files() {
'css' => array($path . '/media.css'),
);
}
/**
* Implement hook_library().
*/
function media_library() {
$path = drupal_get_path('module','media');
$libraries['media_base'] = array(
'title' => 'Media base',
'website' => 'http://drupal.org/project/media',
'version' => '7.x',
'js' => array(
$path . '/javascript/media.core.js' => array('weight' => JS_DEFAULT - 5),
$path . '/javascript/util/json2.js' => array('weight' => JS_LIBRARY),
$path . '/javascript/util/ba-debug.min.js' => array('weight' => JS_LIBRARY),
),
);
$libraries['media_browser'] = array(
'title' => 'Media Browser popup libraries',
'website' => 'http://drupal.org/project/media',
'version' => '7.x',
'js' => array(
$path . '/javascript/media.popups.js' => array('weight' => JS_LIBRARY),
),
'dependencies' => array(
array('media', 'media_base'),
array('system', 'ui.resizable'),
array('system', 'ui.draggable'),
array('system', 'ui.dialog'),
),
);
return $libraries;
}
function media_dialog_get_theme_name() {
// Set to empty to get the default theme.
return variable_get('media_dialog_get_theme_name', 'seven');
}
<?php
<?php
/**
* Implementation of hook_INCLUDE_plugin()
*/
function media_media_plugin() {
// Not elegant to include js and css files here, but till we figure out
// elegant way, it atleast assures that they are included only when the
// plugin is included and not on all form_alter, page_alter, hook_init.
drupal_add_js(drupal_get_path('module','media').'/javascript/util/json2.js');
drupal_add_js(drupal_get_path('module','media').'/javascript/util/ba-debug.min.js');
drupal_add_js(drupal_get_path('module','media').'/javascript/media.jquery.js');
drupal_add_library('system','ui');
drupal_add_library('system','ui.dialog');
drupal_add_css(drupal_get_path('module','media').'/media-browser.css');
// copied directly from media module to get Drupal.settings.media object
$settings = array(
'browserUrl' => url('media/browser',
array('query' => array('render' => 'media-browser'))),
// @Todo: rip this down and make a callback API structure with tokens, etc
// this is temporary.
// Adding src to blacklist; fid and view_mode we capture outside attribs so adding
// them too to the blacklist.
'blacklist' => array('src','fid','view_mode'),
);
drupal_add_js(array('media' => $settings), 'setting');
media_include_browser_js();
// Plugin definition
$plugins['media'] = array(
'title' => t('Media Browser'),
......@@ -36,6 +19,6 @@ function media_media_plugin() {
'js file' => 'wysiwyg-media.js',
'settings' => array(),
);
return $plugins;
}
\ No newline at end of file
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