Bootstrap popup with mootols compatibility

administrator/components/com_media/views/images/tmpl/default.php

@@ -9,10 +9,13 @@
 
 defined('_JEXEC') or die;
 
-$user   = JFactory::getUser();
-$input  = JFactory::getApplication()->input;
-$params = JComponentHelper::getParams('com_media');
-$lang   = JFactory::getLanguage();
+$user       = JFactory::getUser();
+$input      = JFactory::getApplication()->input;
+$params     = JComponentHelper::getParams('com_media');
+$lang       = JFactory::getLanguage();
+$onClick    = '';
+$fieldInput = $this->state->get('field.id');
+$isMoo      = $input->getInt('ismoo', 1);
 
 JHtml::_('formbehavior.chosen', 'select');
 
@@ -34,6 +37,26 @@
 		var image_base_path = '" . $params->get('image_path', 'images') . "/';
 	"
 );
+
+/**
+ * Mootools compatibility
+ *
+ * There is an extra option passed in the url for the iframe &ismoo=0 for the bootstrap fields.
+ * By default the value will be 1 or defaults to mootools behaviour
+ *
+ * This should be removed when mootools won't be shipped by Joomla.
+ */
+if (!empty($fieldInput)) // Media Form Field
+{
+	if ($isMoo)
+	{
+		$onClick = "window.parent.jInsertFieldValue(document.getElementById('f_url').value, '" . $fieldInput . "');window.parent.jModalClose();window.parent.jQuery('.modal.in').modal('hide');";
+	}
+}
+else // XTD Image plugin
+{
+	$onClick = "ImageManager.onok();window.parent.jModalClose();";
+}
 ?>
 <div class="container-popup">
 
@@ -55,8 +78,9 @@
 					</div>
 				</div>
 				<div class="pull-right">
-					<button class="btn btn-success button-save-selected" type="button" onclick="<?php if ($this->state->get('field.id')):?>window.parent.jInsertFieldValue(document.getElementById('f_url').value,'<?php echo $this->state->get('field.id');?>');<?php else:?>ImageManager.onok();<?php endif;?>window.parent.jQuery('.modal.in').modal('hide');window.parent.jModalClose();" data-dismiss="modal"><?php echo JText::_('COM_MEDIA_INSERT') ?></button>
-					<button class="btn button-cancel" type="button" onclick="window.parent.jQuery('.modal.in').modal('hide');window.parent.jModalClose();<?php if (!$this->state->get('field.id')) :
+					<button class="btn btn-success button-save-selected" type="button" <?php if (!empty($onClick)) :
+					// This is for Mootools compatibility ?>onclick="<?php echo $onClick; ?>"<?php endif; ?> data-dismiss="modal"><?php echo JText::_('COM_MEDIA_INSERT') ?></button>
+					<button class="btn button-cancel" type="button" onclick="window.parent.jQuery('.modal.in').modal('hide');<?php if (!empty($onClick)) :
 						// This is for Mootools compatibility ?>parent.jModalClose();<?php endif ?>" data-dismiss="modal"><?php echo JText::_('JCANCEL') ?></button>
 				</div>
 			</div>

administrator/templates/isis/html/layouts/joomla/form/field/media.php

@@ -0,0 +1,134 @@
+<?php
+/**
+ * @package     Joomla.Admin
+ * @subpackage  Layout
+ *
+ * @copyright   Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+/**
+ * Layout variables
+ * ---------------------
+ *
+ * @var  string   $asset The asset text
+ * @var  string   $authorField The label text
+ * @var  integer  $authorId The author id
+ * @var  string   $class The class text
+ * @var  boolean  $disabled True if field is disabled
+ * @var  string   $folder The folder text
+ * @var  string   $id The label text
+ * @var  string   $link The link text
+ * @var  string   $name The name text
+ * @var  string   $preview The preview image relative path
+ * @var  integer  $previewHeight The image preview height
+ * @var  integer  $previewWidth The image preview width
+ * @var  string   $onchange  The onchange text
+ * @var  boolean  $readonly True if field is readonly
+ * @var  integer  $size The size text
+ * @var  string   $value The value text
+ * @var  string   $src The path and filename of the image
+ */
+extract($displayData);
+
+// The button.
+if ($disabled != true)
+{
+	JHtml::_('bootstrap.tooltip');
+}
+
+$attr = '';
+
+// Initialize some field attributes.
+$attr .= !empty($class) ? ' class="input-small hasTooltip field-media-input ' . $class . '"' : ' class="input-small hasTooltip field-media-input"';
+$attr .= !empty($size) ? ' size="' . $size . '"' : '';
+
+// Initialize JavaScript field attributes.
+$attr .= !empty($onchange) ? ' onchange="' . $onchange . '"' : '';
+
+switch ($preview)
+{
+	case 'no': // Deprecated parameter value
+	case 'false':
+	case 'none':
+		$showPreview = false;
+		$showAsTooltip = false;
+		break;
+	case 'yes': // Deprecated parameter value
+	case 'true':
+	case 'show':
+		break;
+	case 'tooltip':
+	default:
+		$showPreview = true;
+		$showAsTooltip = true;
+		break;
+}
+
+// Pre fill the contents of the popover
+if ($showPreview)
+{
+	if ($value && file_exists(JPATH_ROOT . '/' . $value))
+	{
+		$src = JUri::root() . $value;
+	}
+	else
+	{
+		$src = JText::_('JLIB_FORM_MEDIA_PREVIEW_EMPTY');
+	}
+}
+
+// The url for the modal
+$url    = ($readonly ? ''
+	: ($link ? $link
+		: 'index.php?option=com_media&amp;view=images&amp;tmpl=component&amp;asset='
+		. $asset . '&amp;author=' . $authorId)
+	. '&amp;fieldid={field-media-id}&amp;ismoo=0&amp;folder=' . $folder);
+?>
+<div class="field-media-wrapper"
+	data-basepath="<?php echo JUri::root(); ?>"
+	data-url="<?php echo $url; ?>"
+	data-modal=".modal"
+	data-modal-width="100%"
+	data-modal-height="400px"
+	data-input=".field-media-input"
+	data-button-select=".button-select"
+	data-button-clear=".button-clear"
+	data-button-save-selected=".button-save-selected"
+	data-preview="<?php echo $showPreview ? 'true' : 'false'; ?>"
+	data-preview-container=".field-media-preview"
+	data-preview-width="<?php echo $previewWidth; ?>"
+	data-preview-height="<?php echo $previewHeight; ?>"
+>
+	<?php
+	// Render the modal
+	echo JHtml::_('bootstrap.renderModal',
+		'imageModal_'. $id,
+		array(
+			'title' => JText::_('JLIB_FORM_CHANGE_IMAGE'),
+			'closeButton' => true,
+			'footer' => '<button class="btn" data-dismiss="modal">' . JText::_('JCANCEL') . '</button>'
+		)
+	);
+
+	JHtml::_('script', 'media/mediafield.min.js', false, true, false, false, true);
+	?>
+	<?php if ($showPreview) : ?>
+	<div class="input-prepend input-append">
+		<span rel="popover" class="add-on pop-helper field-media-preview"
+			title="<?php echo	JText::_('JLIB_FORM_MEDIA_PREVIEW_SELECTED_IMAGE'); ?>" data-content="<?php echo JText::_('JLIB_FORM_MEDIA_PREVIEW_EMPTY'); ?>"
+			data-original-title="<?php echo JText::_('JLIB_FORM_MEDIA_PREVIEW_SELECTED_IMAGE'); ?>" data-trigger="hover">
+			<i class="icon-eye"></i>
+		</span>
+	<?php else: ?>
+	<div class="input-append">
+		<?php endif; ?>
+		<input type="text" name="<?php echo $name; ?>" id="<?php echo $id; ?>" value="<?php echo htmlspecialchars($value, ENT_COMPAT, 'UTF-8'); ?>" readonly="readonly"<?php echo $attr; ?>/>
+		<?php if ($disabled != true) : ?>
+			<a class="btn add-on button-select"><?php echo JText::_("JLIB_FORM_BUTTON_SELECT"); ?></a>
+			<a class="btn icon-remove hasTooltip add-on button-clear" title="<?php echo JText::_("JLIB_FORM_BUTTON_CLEAR"); ?>"></a>
+		<?php endif; ?>
+	</div>
+</div>

media/media/js/mediafield.js

@@ -154,3 +154,68 @@
 	});
 
 })(jQuery);
+
+// Compatibility with mootools modal layout
+function jInsertFieldValue(value, id) {
+	var $ = jQuery.noConflict();
+	var old_value = $("#" + id).val();
+	if (old_value != value) {
+		var $elem = $("#" + id);
+		$elem.val(value);
+		$elem.trigger("change");
+		if (typeof($elem.get(0).onchange) === "function") {
+			$elem.get(0).onchange();
+		}
+		jMediaRefreshPreview(id);
+	}
+}
+
+function jMediaRefreshPreview(id) {
+	var $ = jQuery.noConflict();
+	var value = $("#" + id).val();
+	var $img = $("#" + id + "_preview");
+	var basepath = $("#" + id).data("basepath");
+
+	if ($img.length) {
+		if (value) {
+			$img.attr("src", basepath + value);
+			$("#" + id + "_preview_empty").hide();
+			$("#" + id + "_preview_img").show()
+		} else {
+			$img.attr("src", "");
+			$("#" + id + "_preview_empty").show();
+			$("#" + id + "_preview_img").hide();
+		}
+	}
+}
+
+function jMediaRefreshPreviewTip(tip)
+{
+	var $ = jQuery.noConflict();
+	var $tip = $(tip);
+	var $img = $tip.find("img.media-preview");
+
+	$img.each(function(index, value) {
+		$tip.find("div.tip").css("max-width", "none");
+		var id = $(this).attr("id");
+		id = id.substring(0, id.length - "_preview".length);
+		jMediaRefreshPreview(id);
+		$tip.show(this);
+	});
+}
+
+// JQuery for tooltip for INPUT showing whole image path
+function jMediaRefreshImgpathTip(tip, els)
+{
+	var $ = jQuery.noConflict();
+	var $tip = $(tip);
+	$tip.css("max-width", "none");
+	var $imgpath = $(els).val();
+	$("#TipImgpath").html($imgpath);
+
+	if ($imgpath.length) {
+		$tip.show();
+	} else {
+		$tip.hide();
+	}
+}