Skip to content

Commit

Permalink
Use webcomponents for the alerts
Browse files Browse the repository at this point in the history
  • Loading branch information
dgrammatiko committed Jul 21, 2017
1 parent 91272d2 commit b0a580d
Show file tree
Hide file tree
Showing 24 changed files with 1,165 additions and 119 deletions.
1 change: 1 addition & 0 deletions installation/template/css/joomla-alert.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

42 changes: 42 additions & 0 deletions installation/template/html/system/message.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<?php
/**
* @package Joomla.Site
* @subpackage Layout
*
* @copyright Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('JPATH_BASE') or die;

// @TODO Remove when webcomponents get merged into the core

$msgList = $displayData['msgList'];
$alert = [
JApplicationCms::MSG_EMERGENCY => 'danger',
JApplicationCms::MSG_ALERT => 'danger',
JApplicationCms::MSG_CRITICAL => 'danger',
JApplicationCms::MSG_ERROR => 'danger',
JApplicationCms::MSG_WARNING => 'warning',
JApplicationCms::MSG_NOTICE => 'info',
JApplicationCms::MSG_INFO => 'info',
JApplicationCms::MSG_DEBUG => 'info',
];
?>
<div id="system-message-container">
<?php if (is_array($msgList) && !empty($msgList)) : ?>
<div id="system-message">
<?php foreach ($msgList as $type => $msgs) : ?>
<joomla-alert level="<?php echo isset($alert[$type]) ? $alert[$type] : $type; ?>" dismiss="true">
<?php if (!empty($msgs)) : ?>
<h4><?php echo JText::_($type); ?></h4>
<div>
<?php foreach ($msgs as $msg) : ?>
<div><?php echo $msg; ?></div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</joomla-alert>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
17 changes: 13 additions & 4 deletions installation/template/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,27 @@

/** @var JDocumentHtml $this */

// @TODO Remove when webcomponents get merged into the core
JLoader::register('JDocumentRendererHtmlMessage', __DIR__ . '/message.php', true);

// Add Stylesheets
JHtml::_('stylesheet', 'installation/template/css/template.css', array('version' => 'auto'));
JHtml::_('stylesheet', 'media/vendor/font-awesome/css/font-awesome.min.css');
JHtml::_('stylesheet', 'installation/template/css/template.css', ['version' => 'auto']);
JHtml::_('stylesheet', 'media/vendor/font-awesome/css/font-awesome.min.css', ['version' => 'auto']);
JHtml::_('stylesheet', 'installation/template/css/joomla-alert.min.css', ['version' => 'auto']);

// Add scripts
JHtml::_('behavior.core');
JHtml::_('behavior.keepalive');
JHtml::_('behavior.formvalidator');
JHtml::_('script', 'installation/template/js/template.js', array('version' => 'auto'));
JHtml::_('script', 'installation/template/js/template.js', ['version' => 'auto']);
JHtml::_('script', 'installation/template/js/wc-loader.min.js', ['version' => 'auto']);

// Add script options
$this->addScriptOptions('system.installation', array('url' => JRoute::_('index.php')));
$this->addScriptOptions('system.installation', ['url' => JRoute::_('index.php')]);
$this->addScriptOptions(
'webcomponents',
['joomla-alert' => JHtml::_('script', 'installation/template/js/joomla-alert.min.js', ['relative' => false, 'pathOnly' => true])]
);

// Load JavaScript message titles
JText::script('ERROR');
Expand Down
63 changes: 63 additions & 0 deletions installation/template/js/joomla-alert.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _createClass = function () {
function a(a, b) {
for (var c, d = 0; d < b.length; d++) {
c = b[d], c.enumerable = c.enumerable || !1, c.configurable = !0, 'value' in c && (c.writable = !0), Object.defineProperty(a, c.key, c);
}
}return function (b, c, d) {
return c && a(b.prototype, c), d && a(b, d), b;
};
}();function _classCallCheck(a, b) {
if (!(a instanceof b)) throw new TypeError('Cannot call a class as a function');
}function _possibleConstructorReturn(a, b) {
if (!a) throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b && ('object' == (typeof b === 'undefined' ? 'undefined' : _typeof(b)) || 'function' == typeof b) ? b : a;
}function _inherits(a, b) {
if ('function' != typeof b && null !== b) throw new TypeError('Super expression must either be null or a function, not ' + (typeof b === 'undefined' ? 'undefined' : _typeof(b)));a.prototype = Object.create(b && b.prototype, { constructor: { value: a, enumerable: !1, writable: !0, configurable: !0 } }), b && (Object.setPrototypeOf ? Object.setPrototypeOf(a, b) : a.__proto__ = b);
}var AlertElement = function (a) {
function b() {
return _classCallCheck(this, b), _possibleConstructorReturn(this, (b.__proto__ || Object.getPrototypeOf(b)).call(this));
}return _inherits(b, a), _createClass(b, [{ key: 'level', get: function get() {
return this.getAttribute('level');
} }, { key: 'dismiss', get: function get() {
return this.getAttribute('dismiss');
} }, { key: 'acknowledge', get: function get() {
return this.getAttribute('acknowledge');
} }, { key: 'href', get: function get() {
return this.getAttribute('href');
} }], [{ key: 'observedAttributes', get: function get() {
return ['level', 'dismiss', 'acknowledge', 'href'];
} }]), _createClass(b, [{ key: 'connectedCallback', value: function connectedCallback() {
this.setAttribute('role', 'alert'), this.classList.add('show'), this.level && -1 !== ['info', 'warning', 'danger', 'success'].indexOf(this.level) || this.setAttribute('level', 'info'), (this.hasAttribute('dismiss') && '' !== this.getAttribute('dismiss') || this.hasAttribute('acknowledge') && '' !== this.getAttribute('acknowledge') || this.hasAttribute('href') && '' !== this.getAttribute('href') && !this.querySelector('button.close') && !this.querySelector('button.button--close')) && this.appendCloseButton(), this.dispatchCustomEvent('joomla.alert.show');
} }, { key: 'disconnectedCallback', value: function disconnectedCallback() {
this.removeEventListener('joomla.alert.show', this), this.removeEventListener('joomla.alert.close', this), this.removeEventListener('joomla.alert.closed', this), 'button' === this.firstChild.tagName.toLowerCase() && this.firstChild.removeEventListener('click', this);
} }, { key: 'attributeChangedCallback', value: function attributeChangedCallback(a, b, c) {
'level' === a ? -1 === ['info', 'warning', 'danger', 'success'].indexOf(c) && this.setAttribute('level', b) : 'dismiss' === a || 'acknowledge' === a ? 'true' === c ? this.appendCloseButton() : this.removeCloseButton() : 'href' === a ? '' === c ? this.removeCloseButton() : !this.querySelector('button.button--close') && this.appendCloseButton() : void 0;
} }, { key: 'close', value: function close() {
this.dispatchCustomEvent('joomla.alert.close'), this.addEventListener('transitionend', function () {
this.dispatchCustomEvent('joomla.alert.closed'), this.parentNode.removeChild(this);
}, !1), this.classList.remove('show');
} }, { key: 'dispatchCustomEvent', value: function dispatchCustomEvent(a) {
var b = new CustomEvent(a);b.relatedTarget = this, this.dispatchEvent(b), this.removeEventListener(a, this);
} }, { key: 'appendCloseButton', value: function appendCloseButton() {
if (!(this.querySelector('button.close') || this.querySelector('button.button--close'))) {
var a = this,
b = document.createElement('button');this.hasAttribute('dismiss') ? (b.classList.add('close'), b.innerHTML = '<span aria-hidden="true">&times;</span>', b.setAttribute('aria-label', this.getText('JCLOSE', 'Close'))) : (b.classList.add('button--close'), b.innerHTML = this.hasAttribute('acknowledge') ? this.getText('JOK', 'ok') : this.getText('JOPEN', 'Open')), this.firstChild ? this.insertBefore(b, this.firstChild) : this.appendChild(b), this.firstChild && this.firstChild.tagName && 'button' === this.firstChild.tagName.toLowerCase() && (this.href ? this.firstChild.addEventListener('click', function () {
a.dispatchCustomEvent('joomla.alert.buttonClicked'), window.location.href = a.href, a.close();
}) : this.firstChild.addEventListener('click', function () {
a.dispatchCustomEvent('joomla.alert.buttonClicked'), a.getAttribute('data-callback') ? (window[a.getAttribute('data-callback')](), a.close()) : a.close();
})), this.hasAttribute('auto-dismiss') && setTimeout(function () {
a.dispatchCustomEvent('joomla.alert.buttonClicked'), a.hasAttribute('data-callback') ? window[a.getAttribute('data-callback')]() : a.close();
}, parseInt(a.getAttribute('auto-dismiss')) ? a.getAttribute('auto-dismiss') : 3e3);
}
} }, { key: 'removeCloseButton', value: function removeCloseButton() {
var a = this.querySelector('button');a && (a.removeEventListener('click', this), a.parentNode.removeChild(a));
} }, { key: 'getText', value: function getText(a, b) {
return window.Joomla && Joomla.JText && Joomla.JText._ && 'function' == typeof Joomla.JText._ && Joomla.JText._(a) ? Joomla.JText._(a) : b;
} }]), b;
}(HTMLElement);customElements.define('joomla-alert', AlertElement);

},{}]},{},[1]);
1 change: 1 addition & 0 deletions installation/template/js/joomla-alert.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions installation/template/js/preinstall.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@ Joomla.installation.detectFtpRoot = function(el) {
};

if (document.getElementById('showFtp')) {
// @TODO FTP??
document.getElementById('showFtp').style.display = 'none';
document.getElementById('showFtp').addEventListener('click', function(e) {
e.preventDefault();
if (document.getElementById('ftpOptions')) {
Expand All @@ -70,6 +72,7 @@ if (document.getElementById('showFtp')) {
if (document.getElementById('verifybutton')) {
document.getElementById('verifybutton').addEventListener('click', function(e) {
e.preventDefault();
// @TODO FTP??
//onclick="Install.verifyFtpSettings(this);"
var ftpForm = document.getElementById('ftpForm');
if (ftpForm) {
Expand Down

0 comments on commit b0a580d

Please sign in to comment.