Skip to content

Commit

Permalink
Merge branch '4.0-dev' into patch-81
Browse files Browse the repository at this point in the history
  • Loading branch information
@HLeithner
HLeithner committed Feb 23, 2019
2 parents 8f194dd + 1b6975f commit 6095426
Show file tree
Hide file tree
Showing 2 changed files with 188 additions and 129 deletions.
285 changes: 156 additions & 129 deletions build/media_source/system/js/fields/joomla-field-permissions.w-c.es6.js
View file
@@ -1,149 +1,176 @@
((customElements, Joomla) => {
class JoomlaFieldPermissions extends HTMLElement {
constructor() {
super();
/**
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
window.customElements.define('joomla-field-permissions', class extends HTMLElement {
constructor() {
super();

if (!Joomla) {
throw new Error('Joomla API is not properly initiated');
}

if (!Joomla) {
throw new Error('Joomla API is not properly initiated');
}
if (!this.getAttribute('data-uri')) {
throw new Error('No valid url for validation');
}

if (!this.getAttribute('data-uri')) {
throw new Error('No valid url for validation');
}
this.query = window.location.search.substring(1);
this.buttons = '';
this.buttonDataSelector = 'data-onchange-task';
this.onDropdownChange = this.onDropdownChange.bind(this);
this.getUrlParam = this.getUrlParam.bind(this);

this.component = this.getUrlParam('component');
this.extension = this.getUrlParam('extension');
this.option = this.getUrlParam('option');
this.view = this.getUrlParam('view');
this.title = this.component;
this.asset = 'not';
this.context = '';
}

/**
* Lifecycle
*/
connectedCallback() {
this.buttons = [].slice.call(document.querySelectorAll(`[${this.buttonDataSelector}]`));
if (this.buttons) {
this.buttons.forEach((button) => {
button.addEventListener('change', this.onDropdownChange);
});
}
}

/**
* Lifecycle
*/
disconnectedCallback() {
if (this.buttons) {
this.buttons.forEach((button) => {
button.removeEventListener('change', this.onDropdownChange);
});
}
}

connectedCallback() {
const buttonDataSelector = 'data-onchange-task';
const buttons = [].slice.call(document.querySelectorAll(`[${buttonDataSelector}]`));

if (buttons) {
buttons.forEach((button) => {
button.addEventListener('change', (e) => {
e.preventDefault();
const task = e.target.getAttribute(buttonDataSelector);
if (task == 'permissions.apply') {
this.sendPermissions(e);
}
});
});
}
/**
* Lifecycle
*/
onDropdownChange(event) {
event.preventDefault();
const task = event.target.getAttribute(this.buttonDataSelector);
if (task === 'permissions.apply') {
this.sendPermissions(event);
}
}

sendPermissions(event) {
const target = event.target;
// set the icon while storing the values
const icon = document.getElementById(`icon_${target.id}`);
icon.removeAttribute('class');
icon.setAttribute('class', 'fa fa-spinner fa-spin');

// get values add prepare GET-Parameter
let asset = 'not';
const component = this.getUrlParam('component');
const extension = this.getUrlParam('extension');
const option = this.getUrlParam('option');
const view = this.getUrlParam('view');
let title = component;
const value = target.value;
let context = '';

if (document.getElementById('jform_context')) {
context = document.getElementById('jform_context').value;
context = context.split('.')[0];
}
sendPermissions(event) {
const { target } = event;

if (option == 'com_config' && component == false && extension == false) {
asset = 'root.1';
} else if (extension == false && view == 'component') {
asset = component;
} else if (context) {
if (view == 'group') {
asset = `${context}.fieldgroup.${this.getUrlParam('id')}`;
} else {
asset = `${context}.field.${this.getUrlParam('id')}`;
}
title = document.getElementById('jform_title').value;
} else if (extension != false && view != false) {
asset = `${extension}.${view}.${this.getUrlParam('id')}`;
title = document.getElementById('jform_title').value;
} else if (extension == false && view != false) {
asset = `${option}.${view}.${this.getUrlParam('id')}`;
title = document.getElementById('jform_title').value;
// Set the icon while storing the values
const icon = document.getElementById(`icon_${target.id}`);
icon.removeAttribute('class');
icon.setAttribute('class', 'joomla-icon joomla-field-permissions__spinner');

// Get values add prepare GET-Parameter
const { value } = target;

if (document.getElementById('jform_context')) {
this.context = document.getElementById('jform_context').value;
[this.context] = this.context.split('.');
}

if (this.option === 'com_config' && !this.component && !this.extension) {
this.asset = 'root.1';
} else if (!this.extension && this.view === 'component') {
this.asset = this.component;
} else if (this.context) {
if (this.view === 'group') {
this.asset = `${this.context}.fieldgroup.${this.getUrlParam('id')}`;
} else {
this.asset = `${this.context}.field.{this.getUrlParam('id')}`;
}
this.title = document.getElementById('jform_title').value;
} else if (this.extension && this.view) {
this.asset = `${this.extension}.${this.view}.${this.getUrlParam('id')}`;
this.title = document.getElementById('jform_title').value;
} else if (!this.extension && this.view) {
this.asset = `${this.option}.${this.view}.${this.getUrlParam('id')}`;
this.title = document.getElementById('jform_title').value;
}

const id = target.id.replace('jform_rules_', '');
const lastUnderscoreIndex = id.lastIndexOf('_');

const permissionData = {
comp: asset,
action: id.substring(0, lastUnderscoreIndex),
rule: id.substring(lastUnderscoreIndex + 1),
value,
title,
};

// Remove JS messages, if they exist.
Joomla.removeMessages();

// Ajax request
Joomla.request({
url: this.getAttribute('data-uri'),
method: 'POST',
data: JSON.stringify(permissionData),
perform: true,
headers: { 'Content-Type': 'application/json' },
onSuccess: (response, xhr) => {
try {
response = JSON.parse(response);
} catch (e) {
console.log(e);
}
const id = target.id.replace('jform_rules_', '');
const lastUnderscoreIndex = id.lastIndexOf('_');

const permissionData = {
comp: this.asset,
action: id.substring(0, lastUnderscoreIndex),
rule: id.substring(lastUnderscoreIndex + 1),
value,
title: this.title,
};

// Remove JS messages, if they exist.
Joomla.removeMessages();

// Ajax request
Joomla.request({
url: this.getAttribute('data-uri'),
method: 'POST',
data: JSON.stringify(permissionData),
perform: true,
headers: { 'Content-Type': 'application/json' },
onSuccess: (data) => {
let response;

try {
response = JSON.parse(data);
} catch (e) {
console.log(e);
}

icon.removeAttribute('class');
icon.removeAttribute('class');

// Check if everything is OK
if (response.data && response.data.result === true) {
icon.setAttribute('class', 'fa fa-check');
// Check if everything is OK
if (response.data && response.data.result) {
icon.setAttribute('class', 'joomla-icon joomla-field-permissions__allowed');

const badgeSpan = target.parentNode.parentNode.nextElementSibling.querySelector('span');
badgeSpan.removeAttribute('class');
badgeSpan.setAttribute('class', response.data.class);
badgeSpan.innerHTML = response.data.text;
}
const badgeSpan = target.parentNode.parentNode.nextElementSibling.querySelector('span');
badgeSpan.removeAttribute('class');
badgeSpan.setAttribute('class', response.data.class);
badgeSpan.innerHTML = response.data.text;
}

// Render messages, if any. There are only message in case of errors.
if (typeof response.messages === 'object' && response.messages !== null) {
Joomla.renderMessages(response.messages);
// Render messages, if any. There are only message in case of errors.
if (typeof response.messages === 'object' && response.messages !== null) {
Joomla.renderMessages(response.messages);

if (response.data && response.data.result === true) {
icon.setAttribute('class', 'fa fa-check');
} else {
icon.setAttribute('class', 'fa fa-times');
}
if (response.data && response.data.result) {
icon.setAttribute('class', 'joomla-icon joomla-field-permissions__allowed');
} else {
icon.setAttribute('class', 'joomla-icon joomla-field-permissions__denied');
}
},
onError: (xhr) => {
// Remove the spinning icon.
icon.removeAttribute('style');

Joomla.renderMessages(Joomla.ajaxErrorsMessages(jqXHR, textStatus, error));
icon.setAttribute('class', 'fa fa-times');
},
});
}
}
},
onError: (xhr) => {
// Remove the spinning icon.
icon.removeAttribute('style');

Joomla.renderMessages(Joomla.ajaxErrorsMessages(xhr, xhr.statusText));
icon.setAttribute('class', 'joomla-icon joomla-field-permissions__denied');
},
});
}

getUrlParam(variable) {
const query = window.location.search.substring(1);
const vars = query.split('&');
getUrlParam(variable) {
const vars = this.query.split('&');
let i = 0;

for (let i = 0; i < vars.length; i += 1) {
const pair = vars[i].split('=');
if (pair[0] == variable) {
return pair[1];
}
for (i; i < vars.length; i += 1) {
const pair = vars[i].split('=');
if (pair[0] === variable) {
return pair[1];
}
return false;
}
return false;
}

customElements.define('joomla-field-permissions', JoomlaFieldPermissions);
})(customElements, Joomla);
});
32 changes: 32 additions & 0 deletions build/media_source/system/scss/fields/joomla-field-permissions.scss
View file
@@ -0,0 +1,32 @@
joomla-field-permissions .joomla-icon::after {
display: inline-block;
content: "";
width: 1rem;
height: 1rem;
line-height: 1.5;
}

joomla-field-permissions .joomla-icon.joomla-field-permissions__allowed::after {
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23111' d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/%3E%3C/svg%3E") no-repeat;
}

joomla-field-permissions .joomla-icon.joomla-field-permissions__denied::after {
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23111' d='M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z'/%3E%3C/svg%3E") no-repeat;
}

joomla-field-permissions .joomla-icon.joomla-field-permissions__spinner {
animation: spin 2s infinite linear;
}

joomla-field-permissions .joomla-icon.joomla-field-permissions__spinner::after {
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23111' d='M526 1394q0 53-37.5 90.5t-90.5 37.5q-52 0-90-38t-38-90q0-53 37.5-90.5t90.5-37.5 90.5 37.5 37.5 90.5zm498 206q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-704-704q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm1202 498q0 52-38 90t-90 38q-53 0-90.5-37.5t-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-964-996q0 66-47 113t-113 47-113-47-47-113 47-113 113-47 113 47 47 113zm1170 498q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-640-704q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm530 206q0 93-66 158.5t-158 65.5q-93 0-158.5-65.5t-65.5-158.5q0-92 65.5-158t158.5-66q92 0 158 66t66 158z'/%3E%3C/svg%3E") no-repeat;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

0 comments on commit 6095426

Please sign in to comment.