Skip to content

Commit

Permalink
Merge pull request joomla#58 from C-Lodder/sample
Browse files Browse the repository at this point in the history 
Rewrite sampledata in vanilla JS
  • Loading branch information
@dneukirchen
dneukirchen authored Feb 23, 2018
2 parents a33266b + 1389360 commit dcac52d
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 75 deletions.
23 changes: 12 additions & 11 deletions administrator/modules/mod_sampledata/tmpl/default.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,41 +14,42 @@
use Joomla\CMS\Uri\Uri;
use Joomla\CMS\HTML\HTMLHelper;

HTMLHelper::_('jquery.framework');
HTMLHelper::_('script', 'mod_sampledata/sampledata-process.js', false, true);
HTMLHelper::_('script', 'mod_sampledata/sampledata-process.js', ['version' => 'auto', 'relative' => true]);

Text::script('MOD_SAMPLEDATA_CONFIRM_START');
Text::script('MOD_SAMPLEDATA_ITEM_ALREADY_PROCESSED');
Text::script('MOD_SAMPLEDATA_INVALID_RESPONSE');

Factory::getDocument()->addScriptDeclaration('
var modSampledataUrl = "index.php?option=com_ajax&format=json&group=sampledata",
modSampledataIconProgress = "' . Uri::root(true) . '/media/system/images/ajax-loader.gif";
');
Factory::getDocument()->addScriptOptions(
'sample-data',
[
'icon' => Uri::root(true) . '/media/system/images/ajax-loader.gif'
]
);
?>
<?php if ($items) : ?>
<ul class="list-group list-group-flush">
<ul id="sample-data-wrapper" class="list-group list-group-flush">
<?php foreach($items as $i => $item) : ?>
<li class="list-group-item sampledata-<?php echo $item->name; ?>">
<div class="d-flex justify-content-between align-items-center">
<div class="mr-2">
<span class="icon-<?php echo $item->icon; ?>" aria-hidden="true"></span>
<span class="fa fa-<?php echo $item->icon; ?>" aria-hidden="true"></span>
<?php echo htmlspecialchars($item->title, ENT_QUOTES, 'UTF-8'); ?>
</div>
<a href="#" class="btn btn-primary btn-sm" onclick="sampledataApply(this)" data-type="<?php echo $item->name; ?>" data-steps="<?php echo $item->steps; ?>">
<a href="#" class="btn btn-primary btn-sm apply-sample-data" data-type="<?php echo $item->name; ?>" data-steps="<?php echo $item->steps; ?>">
<?php echo Text::_('JLIB_INSTALLER_INSTALL'); ?></a>
</div>
<p class="small mt-1"><?php echo $item->description; ?></p>
</li>
<?php // Progress bar ?>
<li class="list-group-item sampledata-progress-<?php echo $item->name; ?> d-none">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated w-100" role="progressbar"></div>
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
</div>
</li>
<?php // Progress messages ?>
<li class="list-group-item sampledata-progress-<?php echo $item->name; ?> d-none">
<ul class="unstyled"></ul>
<ul class="list-unstyled"></ul>
</li>
<?php endforeach; ?>
</ul>
Expand Down
168 changes: 104 additions & 64 deletions media/mod_sampledata/js/sampledata-process.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,78 +3,102 @@
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

!(function ($) {
"use strict";
Joomla = window.Joomla || {};

var inProgress = false;

var sampledataAjax = function(type, steps, step) {
if (step > steps) {
$('.sampledata-' + type + ' .row-title').append('<span class="icon-publish"> </span>');
inProgress = false;
return;
}
var stepClass = 'sampledata-steps-' + type + '-' + step,
$stepLi = $('<li class="' + stepClass + '"><p class="loader-image text-center"><img src="' + window.modSampledataIconProgress + '" width="30" height="30" ></p></li>'),
$progress = $(".sampledata-progress-" + type + " progress");

$("div.sampledata-progress-" + type + " ul").append($stepLi);

var request = $.ajax({
url: window.modSampledataUrl,
type: 'POST',
dataType: 'json',
data: {
type: type,
plugin: 'SampledataApplyStep' + step,
step: step
}
});
request.done(function(response){
$stepLi.children('.loader-image').remove();

if (response.success && response.data && response.data.length > 0) {
var success, value, resultClass, $msg;

// Display all messages that we got
for(var i = 0, l = response.data.length; i < l; i++) {
value = response.data[i];
success = value.success;
resultClass = success ? 'success' : 'error';
$stepLi.append($('<div>', {
html: value.message,
'class': 'alert alert-' + resultClass,
}));
}
!(function (Joomla, document) {
'use strict';

// Update progress
$progress.val(step/steps);
var inProgress = false;

// Move on next step
if (success) {
step++;
sampledataAjax(type, steps, step);
Joomla.sampledataAjax = function(type, steps, step) {
// Get variables
var baseUrl = 'index.php?option=com_ajax&format=json&group=sampledata';
var options = Joomla.getOptions('sample-data');

// Create list
var list = document.createElement('li');
list.classList.add('sampledata-steps-' + type + '-' + step);

// Create paragraph
var para = document.createElement('p');
para.classList.add('loader-image');
para.classList.add('text-center');

// Create image
var img = document.createElement('img');
img.setAttribute('src', options.icon);
img.setAttribute('width', 30);
img.setAttribute('height', 30);

// Append everything
para.appendChild(img);
list.appendChild(para);
document.querySelector('.sampledata-progress-' + type + ' ul').appendChild(list);

Joomla.request({
url: baseUrl + '&type=' + type + '&plugin=SampledataApplyStep' + step + '&step=' + step,
method: 'GET',
perform: true,
onSuccess: function(response, xhr) {
var response = JSON.parse(response);
// Remove loader image
var loader = list.querySelector('.loader-image');
loader.parentNode.removeChild(loader);

if (response.success && response.data && response.data.length > 0) {
var success, value, progressClass;
var progress = document.querySelector('.sampledata-progress-' + type + ' .progress-bar');

// Display all messages that we got
for (var i = 0, l = response.data.length; i < l; i++) {
value = response.data[i];
success = value.success;
progressClass = success ? 'bg-success' : 'bg-danger';

// Display success alert
if (success) {
Joomla.renderMessages({success: [value.message]}, '.sampledata-steps-' + type + '-' + step);
} else {
Joomla.renderMessages({error: [value.message]}, '.sampledata-steps-' + type + '-' + step);
}
}

// Update progress
progress.innerText = step + '/' + steps;
progress.style.width = (step/steps) * 100 + '%';
progress.classList.add(progressClass);

// Move on next step
if (success && (step <= steps)) {
step++;
if (step <= steps) {
Joomla.sampledataAjax(type, steps, step);
}
}

} else {
// Display error alert
Joomla.renderMessages({'error': [Joomla.JText._('MOD_SAMPLEDATA_INVALID_RESPONSE')]}, '.sampledata-steps-' + type + '-' + step);

inProgress = false;
}

} else {
$stepLi.addClass('alert alert-error');
$stepLi.html(Joomla.JText._('MOD_SAMPLEDATA_INVALID_RESPONSE'));
inProgress = false;
},
onError: function(xhr) {
alert('Something went wrong! Please close and reopen the browser and try again!');
}
});
request.fail(function(jqXHR, textStatus){
alert('Something went wrong! Please close and reopen the browser and try again!');
});
};

window.sampledataApply = function(el) {
var $el = $(el), type = $el.data('type'), steps = $el.data('steps');
Joomla.sampledataApply = function(el) {
var type = el.getAttribute('data-type');
var steps = el.getAttribute('data-steps');

// Check whether the work in progress or we alredy proccessed with current item
// Check whether the work in progress or we already processed with current item
if (inProgress) {
return;
}
if ($el.data('processed')) {

if (el.getAttribute('data-processed')) {
alert(Joomla.JText._('MOD_SAMPLEDATA_ITEM_ALREADY_PROCESSED'));
return;
}
Expand All @@ -85,12 +109,28 @@
}

// Turn on the progress container
$('.sampledata-progress-' + type).removeClass('d-none');
$el.data('processed', true);
var progress = document.querySelectorAll('.sampledata-progress-' + type);
for (var i = 0, l = progress.length; i < l; i++) {
progress[i].classList.remove('d-none');
}

el.getAttribute('data-processed', true);

inProgress = true;
sampledataAjax(type, steps, 1);
Joomla.sampledataAjax(type, steps, 1);
return false;
};

})(jQuery);
document.addEventListener('DOMContentLoaded', function() {
var sampleDataWrapper = document.getElementById('sample-data-wrapper');
if (sampleDataWrapper) {
var links = sampleDataWrapper.querySelectorAll('.apply-sample-data');
for (var i = 0, l = links.length; i < l; i++) {
links[i].addEventListener('click', function(e) {
Joomla.sampledataApply(e.target);
});
}
}
});

})(Joomla, document);

0 comments on commit dcac52d

Please sign in to comment.