Joomla article modal with clear button

: Joel Lipman; Joomla; 27 August 2012; Hits: 24915

Applies to Joomla 1.6+

What?
This is an article to describe how to add an article modal button in the Joomla Admin Panel (at time of print version 2.5.6) of your component including the all important clear button. What I found was that no one posted this solution which I found is compatible with almost any site and with all my components without having to modify the below script.

Why?
The article modal is a much easier way for the end-users to select a Joomla! article in the component parameters/options. The "clear" button is essential as some article_modal fields may not be required and are difficult to clear once set.

How?
Well don't quote me on this but I haven't needed to modify this script for any different component. Simply include this file in the fields folder/directory of your component (/my_component/administrator/models/fields/article.php). It's based on two Joomla core ones, namely administrator\components\models\fields\modal\article.php and \libraries\joomla\form\fields\media.php. You then refer to it in your XML file where instead of type="sql" use type="modal_article". A usage example is:

copy raw

<field 
	name="license" 
	type="modal_article" 
	default="" 
	class="inputbox" 
	label="COM_MYCOMPONENT_FIELD_LICENSE_LABEL" 
	description="COM_MYCOMPONENT_FIELD_LICENSE_DESC"
/>

<!-- I don't know if it has any other parameters nor do I use them, but the standard ones apply
-- eg. required="true" //-->

<!-- Also the type doesn't seem to be case-sensitive but just in case it's Modal_Article //-->

<field
name="license"
type="modal_article"
default=""
class="inputbox"
label="COM_MYCOMPONENT_FIELD_LICENSE_LABEL"
description="COM_MYCOMPONENT_FIELD_LICENSE_DESC"
/>
<!-- I don't know if it has any other parameters nor do I use them, but the standard ones apply
-- eg. required="true" //-->

Just copy & paste the below into a PHP file and include it in your component, the solution is really that straightforward. Feel free to check for any dodgy code but I've simply added the clear button to the existing article modal file (Joomla 1.6.x to 2.5.x). Don't overwrite any existing core files with this one, it's completely unnecessary as this is a 3.24Kb file.

Step #1 of 1:
Create and include the following PHP file, I've named this file "article.php" (thanks to my amazing imagination). The contents of which are as follows:

copy raw

<?php
/**
 * @copyright   Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license             GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('JPATH_BASE') or die;

/**
 * Supports a modal article picker.
 *
 * @package             Joomla.Administrator
 * @subpackage          com_content
 * @since               1.6
 */
class JFormFieldModal_Article extends JFormField
{
        /**
         * The form field type.
         *
         * @var         string
         * @since       1.6
         */
        protected $type = 'Modal_Article';

        /**
         * Method to get the field input markup.
         *
         * @return      string  The field input markup.
         * @since       1.6
         */
        protected function getInput()
        {
                // Load the modal behavior script.
                JHtml::_('behavior.modal', 'a.modal');

                // Build the script.
                $script = array();
                $script[] = '   function jSelectArticle_'.$this->id.'(id, title, catid, object) {';
                $script[] = '           document.id("'.$this->id.'_id").value = id;';
                $script[] = '           document.id("'.$this->id.'_name").value = title;';
                $script[] = '           SqueezeBox.close();';
                $script[] = '   }';

                // Add the script to the document head.
                JFactory::getDocument()->addScriptDeclaration(implode("\n", $script));


                // Setup variables for display.
                $html   = array();
                $link   = 'index.php?option=com_content&view=articles&layout=modal&tmpl=component&function=jSelectArticle_'.$this->id;

                $db     = JFactory::getDBO();
                $db->setQuery(
                        'SELECT title' .
                        ' FROM #__content' .
                        ' WHERE id = '.(int) $this->value
                );
                $title = $db->loadResult();

                if ($error = $db->getErrorMsg()) {
                        JError::raiseWarning(500, $error);
                }

                if (empty($title)) {
                        $title = JText::_('COM_CONTENT_SELECT_AN_ARTICLE');
                }
                $title = htmlspecialchars($title, ENT_QUOTES, 'UTF-8');

                // The current user display field.
                $html[] = '<div class="fltlft">';
                $html[] = '  <input type="text" id="'.$this->id.'_name" value="'.$title.'" disabled="disabled" size="35" />';
                $html[] = '</div>';

                // The user select button.
                $html[] = '<div class="button2-left">';
                $html[] = '  <div class="blank">';
                $html[] = '     <a class="modal" title="'.JText::_('COM_CONTENT_CHANGE_ARTICLE').'"  href="'.$link.'&'.JSession::getFormToken().'=1" rel="{handler: \'iframe\', size: {x: 800, y: 450}}">'.JText::_('COM_CONTENT_CHANGE_ARTICLE_BUTTON').'</a>';
                $html[] = '  </div>';
                $html[] = '</div>';

                // The user clear button -- hooray for Joe
                $html[] = '<div class="button2-left">';
                $html[] = '  <div class="blank">';
                $html[] = '             <a title="' . JText::_('JLIB_FORM_BUTTON_CLEAR') . '"' . ' href="#" onclick="';
                $html[] = 'jSelectArticle_' . $this->id . '(\'' . $this->id . '\', \'\', \'\', \'\' );';
                $html[] = 'return false;';
                $html[] = '">';
                $html[] = JText::_('JLIB_FORM_BUTTON_CLEAR') . '</a>';
                $html[] = '  </div>';
                $html[] = '</div>';

                // The active article id field.
                if (0 == (int)$this->value) {
                        $value = '';
                } else {
                        $value = (int)$this->value;
                }

                // class='required' for client side validation
                $class = '';
                if ($this->required) {
                        $class = ' class="required modal-value"';
                }

                $html[] = '<input type="hidden" id="'.$this->id.'_id"'.$class.' name="'.$this->name.'" value="'.$value.'" />';

                return implode("\n", $html);
        }
}

<?php
/**
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('JPATH_BASE') or die;
/**
* Supports a modal article picker.
*
* @package Joomla.Administrator
* @subpackage com_content
* @since 1.6
*/
class JFormFieldModal_Article extends JFormField
{
/**
* The form field type.
*
* @var string
* @since 1.6
*/
protected $type = 'Modal_Article';
/**
* Method to get the field input markup.
*
* @return string The field input markup.
* @since 1.6
*/
protected function getInput()
{
// Load the modal behavior script.
JHtml::_('behavior.modal', 'a.modal');
// Build the script.
$script = array();
$script[] = ' function jSelectArticle_'.$this->id.'(id, title, catid, object) {';
$script[] = ' document.id("'.$this->id.'_id").value = id;';
$script[] = ' document.id("'.$this->id.'_name").value = title;';
$script[] = ' SqueezeBox.close();';
$script[] = ' }';
// Add the script to the document head.
JFactory::getDocument()->addScriptDeclaration(implode("\n", $script));
// Setup variables for display.
$html = array();
$link = 'index.php?option=com_content&view=articles&layout=modal&tmpl=component&function=jSelectArticle_'.$this->id;
$db = JFactory::getDBO();
$db->setQuery(
'SELECT title' .
' FROM #__content' .
' WHERE id = '.(int) $this->value
);
$title = $db->loadResult();
if ($error = $db->getErrorMsg()) {
JError::raiseWarning(500, $error);
}
if (empty($title)) {
$title = JText::_('COM_CONTENT_SELECT_AN_ARTICLE');
}
$title = htmlspecialchars($title, ENT_QUOTES, 'UTF-8');
// The current user display field.
$html[] = '<div class="fltlft">';
$html[] = ' <input type="text" id="'.$this->id.'_name" value="'.$title.'" disabled="disabled" size="35" />';
$html[] = '</div>';
// The user select button.
$html[] = '<div class="button2-left">';
$html[] = ' <div class="blank">';
$html[] = ' <a class="modal" title="'.JText::_('COM_CONTENT_CHANGE_ARTICLE').'" href="'.$link.'&'.JSession::getFormToken().'=1" rel="{handler: \'iframe\', size: {x: 800, y: 450}}">'.JText::_('COM_CONTENT_CHANGE_ARTICLE_BUTTON').'</a>';
$html[] = ' </div>';
$html[] = '</div>';
// The user clear button -- hooray for Joe
$html[] = '<div class="button2-left">';
$html[] = ' <div class="blank">';
$html[] = ' <a title="' . JText::_('JLIB_FORM_BUTTON_CLEAR') . '"' . ' href="#" onclick="';
$html[] = 'jSelectArticle_' . $this->id . '(\'' . $this->id . '\', \'\', \'\', \'\' );';
$html[] = 'return false;';
$html[] = '">';
$html[] = JText::_('JLIB_FORM_BUTTON_CLEAR') . '</a>';
$html[] = ' </div>';
$html[] = '</div>';
// The active article id field.
if (0 == (int)$this->value) {
$value = '';
} else {
$value = (int)$this->value;
}
// class='required' for client side validation
$class = '';
if ($this->required) {
$class = ' class="required modal-value"';
}
$html[] = '<input type="hidden" id="'.$this->id.'_id"'.$class.' name="'.$this->name.'" value="'.$value.'" />';
return implode("\n", $html);
}
}