[4.0][RFC] Custom Element: Joomla! Toolbar button

build/webcomponents/js/toolbar-button/toolbar-button.js

@@ -0,0 +1,89 @@
+/**
+ * @copyright  Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+;(function(customElements) {
+    "use strict";
+
+    class JoomlaToolbarButton extends HTMLElement {
+
+        // Attribute getters
+        get task()              { return this.getAttribute('task'); }
+        get execute()           { return this.getAttribute('execute'); }
+        get listSelection()     { return this.hasAttribute('list-selection'); }
+        get form()              { return this.getAttribute('form'); }
+        get formValidation()    { return this.hasAttribute('form-validation'); }
+        get confirmMessage()    { return this.getAttribute('confirm-message'); }
+
+        constructor() {
+            super();
+
+            // We need a button to support button behavior, because we cannot currently extend HTMLButtonElement
+            this.buttonElement = this.querySelector('button');
+            this.disabled      = false;
+
+            // If list selection are required, set button to disabled by default
+            if (this.listSelection) {
+                this.setDisabled(true);
+            }
+
+            this.addEventListener('click', e => this.executeTask());
+        }
+
+        connectedCallback() {
+            // Check whether we have a form
+            let formSelector = this.form || '#adminForm';
+            this.formElement = document.querySelector(formSelector);
+
+            if (this.listSelection) {
+                if (!this.formElement) {
+                    throw new Error('The form "' + formSelector + '" is required to perform the task, but the form not found on the page.');
+                }
+
+                // Watch on list selection
+                this.formElement.boxchecked.addEventListener('change', (event) => {
+                    // Check whether we have selected something
+                    this.setDisabled(event.target.value == 0);
+                });
+            }
+        }
+
+        setDisabled(disabled) {
+            // Make sure we have a boolean value
+            this.disabled = !!disabled;
+
+            if (this.buttonElement) {
+                if (this.disabled) {
+                    this.buttonElement.setAttribute('disabled', true);
+                } else {
+                    this.buttonElement.removeAttribute('disabled');
+                }
+            }
+        }
+
+        executeTask() {
+            if (this.disabled) {
+                return;
+            }
+
+            if (this.confirmMessage && !confirm(this.confirmMessage)) {
+                return;
+            }
+
+            if (this.task) {
+                Joomla.submitbutton(this.task, this.form, this.formValidation);
+            } else if (this.execute) {
+                let method = new Function(this.execute);
+                method.call({});
+            } else {
+                throw new Error('Either "task" or "execute" attribute must be preset to perform an action.');
+            }
+
+        }
+
+    }
+
+    customElements.define('joomla-toolbar-button', JoomlaToolbarButton);
+
+})(customElements);

layouts/joomla/toolbar/apply.php

@@ -13,24 +13,34 @@
 use Joomla\CMS\HTML\HTMLHelper;
 
 HTMLHelper::_('behavior.core');
+HTMLHelper::_('webcomponent', ['joomla-toolbar-button' => 'system/webcomponents/joomla-toolbar-button.min.js'], ['relative' => true, 'version' => 'auto', 'detectBrowser' => false, 'detectDebug' => true]);
 
-if (preg_match('/Joomla.submitbutton/', $displayData['doTask']))
-{
-	$ctrls = str_replace("Joomla.submitbutton('", '', $displayData['doTask']);
-	$ctrls = str_replace("')", '', $ctrls);
-	$ctrls = str_replace(";", '', $ctrls);
-
-	$options = array('task' => $ctrls);
-	Factory::getDocument()->addScriptOptions('keySave', $options);
-}
+$options = array('task' => $displayData['task']);
+Factory::getDocument()->addScriptOptions('keySave', $options);
 
 $id       = isset($displayData['id']) ? $displayData['id'] : '';
-$doTask   = $displayData['doTask'];
 $class    = $displayData['class'];
 $text     = $displayData['text'];
 $btnClass = $displayData['btnClass'];
+$group    = $displayData['group'];
+$task     = '';
+$list     = !empty($displayData['list'])     ? ' list-selection' : '';
+$form     = !empty($displayData['form'])     ? ' form="' . $displayData['form'] . '"' : '';
+$validate = !empty($displayData['validate']) ? ' form-validation' : '';
+
+if (!empty($displayData['task']))
+{
+	$task = ' task="' . $displayData['task'] . '"';
+}
+elseif (!empty($displayData['doTask']))
+{
+	$task = ' execute="' . $displayData['doTask'] . '"';
+}
 ?>
-<button<?php echo $id; ?> onclick="<?php echo $doTask; ?>" class="<?php echo $btnClass; ?>">
-	<span class="<?php echo trim($class); ?>"></span>
-	<?php echo $text; ?>
-</button>
+
+<joomla-toolbar-button <?php echo $id.$task.$list.$form.$validate; ?>>
+	<button type="button" class="<?php echo $btnClass; ?>">
+		<span class="<?php echo trim($class); ?>" aria-hidden="true"></span>
+		<?php echo $text; ?>
+	</button>
+</joomla-toolbar-button>

layouts/joomla/toolbar/batch.php

@@ -13,15 +13,15 @@
 use Joomla\CMS\Language\Text;
 
 HTMLHelper::_('behavior.core');
+HTMLHelper::_('webcomponent', ['joomla-toolbar-button' => 'system/webcomponents/joomla-toolbar-button.min.js'], ['relative' => true, 'version' => 'auto', 'detectBrowser' => false, 'detectDebug' => true]);
 
 $id    = isset($displayData['id']) ? $displayData['id'] : '';
 $title = $displayData['title'];
-Text::script('JLIB_HTML_PLEASE_MAKE_A_SELECTION_FROM_THE_LIST');
-Text::script('ERROR');
-$message = "{'error': [Joomla.JText._('JLIB_HTML_PLEASE_MAKE_A_SELECTION_FROM_THE_LIST')]}";
-$alert = "Joomla.renderMessages(" . $message . ")";
+
 ?>
-<button<?php echo $id; ?> data-toggle="modal" onclick="if (document.adminForm.boxchecked.value==0){<?php echo $alert; ?>}else{jQuery( '#collapseModal' ).modal('show'); return true;}" class="btn btn-outline-primary btn-sm">
-	<span class="fa fa-square" aria-hidden="true" title="<?php echo $title; ?>"></span>
-	<?php echo $title; ?>
-</button>
+<joomla-toolbar-button <?php echo $id; ?> execute="jQuery( '#collapseModal' ).modal('show');" list-selection>
+	<button type="button" class="btn btn-outline-primary btn-sm">
+		<span class="fa fa-square" aria-hidden="true"></span>
+		<?php echo $title; ?>
+	</button>
+</joomla-toolbar-button>

layouts/joomla/toolbar/confirm.php

@@ -12,13 +12,31 @@
 use Joomla\CMS\HTML\HTMLHelper;
 
 HTMLHelper::_('behavior.core');
+HTMLHelper::_('webcomponent', ['joomla-toolbar-button' => 'system/webcomponents/joomla-toolbar-button.min.js'], ['relative' => true, 'version' => 'auto', 'detectBrowser' => false, 'detectDebug' => true]);
 
 $id     = isset($displayData['id']) ? $displayData['id'] : '';
 $doTask = $displayData['doTask'];
 $class  = $displayData['class'];
 $text   = $displayData['text'];
+$task     = '';
+$list     = !empty($displayData['list'])     ? ' list-selection' : '';
+$form     = !empty($displayData['form'])     ? ' form="' . $displayData['form'] . '"' : '';
+$validate = !empty($displayData['validate']) ? ' form-validation' : '';
+$msg      = !empty($displayData['msg'])      ? ' confirm-message="' . $this->escape($displayData['msg']) . '"' : '';
+
+if (!empty($displayData['task']))
+{
+	$task = ' task="' . $displayData['task'] . '"';
+}
+elseif (!empty($displayData['doTask']))
+{
+	$task = ' execute="' . $displayData['doTask'] . '"';
+}
+
 ?>
-<button<?php echo $id; ?> onclick="<?php echo $doTask; ?>" class="btn btn-sm btn-outline-danger">
-	<span class="<?php echo $class; ?>" aria-hidden="true"></span>
-	<?php echo $text; ?>
-</button>
+<joomla-toolbar-button <?php echo $id.$task.$list.$form.$validate.$msg; ?>>
+	<button type="button" class="btn btn-sm btn-outline-danger">
+		<span class="<?php echo trim($class); ?>" aria-hidden="true"></span>
+		<?php echo $text; ?>
+	</button>
+</joomla-toolbar-button>

layouts/joomla/toolbar/help.php

@@ -12,12 +12,15 @@
 use Joomla\CMS\HTML\HTMLHelper;
 
 HTMLHelper::_('behavior.core');
+HTMLHelper::_('webcomponent', ['joomla-toolbar-button' => 'system/webcomponents/joomla-toolbar-button.min.js'], ['relative' => true, 'version' => 'auto', 'detectBrowser' => false, 'detectDebug' => true]);
 
 $id     = $displayData['id'] ?? '';
 $doTask = $displayData['doTask'];
 $text   = $displayData['text'];
 ?>
-<button<?php echo $id; ?> onclick="<?php echo $doTask; ?>" rel="help" class="btn btn-outline-info btn-sm">
-	<span class="fa fa-question" aria-hidden="true"></span>
-	<?php echo $text; ?>
-</button>
+<joomla-toolbar-button <?php echo $id; ?> execute="<?php echo $doTask; ?>">
+	<button type="button" class="btn btn-outline-info btn-sm" rel="help">
+		<span class="fa fa-question" aria-hidden="true"></span>
+		<?php echo $text; ?>
+	</button>
+</joomla-toolbar-button>

layouts/joomla/toolbar/link.php

@@ -9,13 +9,34 @@
 
 defined('JPATH_BASE') or die;
 
+use Joomla\CMS\HTML\HTMLHelper;
+
+HTMLHelper::_('behavior.core');
+HTMLHelper::_('webcomponent', ['joomla-toolbar-button' => 'system/webcomponents/joomla-toolbar-button.min.js'], ['relative' => true, 'version' => 'auto', 'detectBrowser' => false, 'detectDebug' => true]);
+
 $id     = isset($displayData['id']) ? $displayData['id'] : '';
-$doTask = $displayData['doTask'];
+$task   = '';
 $class  = $displayData['class'];
 $text   = $displayData['text'];
-$margin = (strpos($doTask, 'index.php?option=com_config') === false) ? '' : ' ml-auto';
+
+if (!empty($displayData['task']))
+{
+	$task = ' task="' . $displayData['task'] . '"';
+}
+elseif (!empty($displayData['doTask']))
+{
+	$task = ' execute="location.href=\'' . $displayData['doTask'] . '\';"';
+}
+
+$margin = (strpos($task, 'index.php?option=com_config') === false) ? '' : 'ml-auto';
+
+if ($margin):
 ?>
-<button<?php echo $id; ?> class="btn btn-outline-danger btn-sm<?php echo $margin; ?>" onclick="location.href='<?php echo $doTask; ?>';">
-	<span class="<?php echo $class; ?>" aria-hidden="true"></span>
-	<?php echo $text; ?>
-</button>
+<div class="<?php echo $margin; ?>"></div>
+<?php endif; ?>
+<joomla-toolbar-button <?php echo $id.$task; ?>>
+	<button type="button" class="btn btn-outline-danger btn-sm">
+		<span class="<?php echo trim($class); ?>" aria-hidden="true"></span>
+		<?php echo $text; ?>
+	</button>
+</joomla-toolbar-button>

layouts/joomla/toolbar/standard.php

@@ -12,23 +12,32 @@
 use Joomla\CMS\HTML\HTMLHelper;
 
 HTMLHelper::_('behavior.core');
+HTMLHelper::_('webcomponent', ['joomla-toolbar-button' => 'system/webcomponents/joomla-toolbar-button.min.js'], ['relative' => true, 'version' => 'auto', 'detectBrowser' => false, 'detectDebug' => true]);
 
 $id       = isset($displayData['id']) ? $displayData['id'] : '';
-$doTask   = $displayData['doTask'];
 $class    = $displayData['class'];
 $text     = $displayData['text'];
 $btnClass = $displayData['btnClass'];
 $group    = $displayData['group'];
-?>
+$task     = '';
+$list     = !empty($displayData['list'])     ? ' list-selection' : '';
+$form     = !empty($displayData['form'])     ? ' form="' . $displayData['form'] . '"' : '';
+$validate = !empty($displayData['validate']) ? ' form-validation' : '';
+$msg      = !empty($displayData['msg'])      ? ' confirm-message="' . $this->escape($displayData['msg']) . '"' : '';
+
+if (!empty($displayData['task']))
+{
+	$task = ' task="' . $displayData['task'] . '"';
+}
+elseif (!empty($displayData['doTask']))
+{
+	$task = ' execute="' . $displayData['doTask'] . '"';
+}
 
-<?php if ($group) : ?>
-<a<?php echo $id; ?> href="#" onclick="<?php echo $doTask; ?>" class="dropdown-item">
-	<span class="<?php echo trim($class); ?>"></span>
-	<?php echo $text; ?>
-</a>
-<?php else : ?>
-<button<?php echo $id; ?> onclick="<?php echo $doTask; ?>" class="<?php echo $btnClass; ?>">
-	<span class="<?php echo trim($class); ?>" aria-hidden="true"></span>
-	<?php echo $text; ?>
-</button>
-<?php endif; ?>
+?>
+<joomla-toolbar-button <?php echo $id.$task.$list.$form.$validate.$msg; ?>>
+	<button type="button" class="<?php echo $btnClass; ?>">
+		<span class="<?php echo trim($class); ?>" aria-hidden="true"></span>
+		<?php echo $text; ?>
+	</button>
+</joomla-toolbar-button>

libraries/src/Toolbar/Button/ApplyButton.php

@@ -31,24 +31,35 @@ class ApplyButton extends ToolbarButton
 	/**
 	 * Fetch the HTML for the button
 	 *
-	 * @param   string   $type  Unused string.
-	 * @param   string   $name  The name of the button icon class.
-	 * @param   string   $text  Button text.
-	 * @param   string   $task  Task associated with the button.
-	 * @param   boolean  $list  True to allow lists
+	 * @param   string   $type            Unused string.
+	 * @param   string   $name            The name of the button icon class.
+	 * @param   string   $text            Button text.
+	 * @param   string   $task            Task associated with the button.
+	 * @param   boolean  $list            True to allow lists
+	 * @param   boolean  $group           Does the button belong to a group?
+	 * @param   string   $form            The form CSS selector eg '#adminForm'
+	 * @param   bool     $formValidation  Whether should be called the form validation before task call
 	 *
 	 * @return  string  HTML string for the button
 	 *
 	 * @since   4.0.0
 	 */
-	public function fetchButton($type = 'Apply', $name = '', $text = '', $task = '', $list = true)
+	public function fetchButton($type = 'Apply', $name = '', $text = '', $task = '', $list = true,
+		$group = false, $form = '', $formValidation = false)
 	{
 		// Store all data to the options array for use with JLayout
 		$options = array();
-		$options['text']   = \JText::_($text);
-		$options['class']  = $this->fetchIconClass($name);
-		$options['doTask'] = $this->_getCommand($options['text'], $task, $list);
-		$options['id']     = $this->fetchId('Apply', $name);
+		$options['text']     = \JText::_($text);
+		$options['class']    = $this->fetchIconClass($name);
+		$options['id']       = $this->fetchId('Apply', $name);
+		$options['task']     = $task;
+		$options['list']     = $list;
+		$options['group']    = $group;
+		$options['form']     = $form;
+		$options['validate'] = $formValidation;
+
+		// The 'doTask' option stays for B/C
+		$options['doTask']   = $this->_getCommand($options['text'], $task, $list);
 
 		if ($options['id'])
 		{
@@ -87,7 +98,7 @@ public function fetchButton($type = 'Apply', $name = '', $text = '', $task = '',
 	 */
 	public function fetchId($type = 'Apply', $name = '', $text = '', $task = '', $list = true, $hideMenu = false)
 	{
-		return $this->_parent->getName() . '-' . $name;
+		return $this->ensureUniqueId($this->_parent->getName() . '-' . $name);
 	}
 
 	/**