Skip to content

[4.0] Recaptcha plugins javascript #26839

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wilsonge merged 3 commits into from
Nov 26, 2019
Merged

[4.0] Recaptcha plugins javascript #26839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
efcee2d
Es6, CS
dgrammatiko Oct 27, 2019
421c5d7
Merge branch '4.0-dev' into 4.0-dev-es6-1
dgrammatiko Oct 27, 2019
a7b36e5
Merge branch '4.0-dev' into 4.0-dev-es6-1
dgrammatiko Nov 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 26 additions & 25 deletions build/media_source/plg_captcha_recaptcha/js/recaptcha.es6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,34 @@
* @copyright Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
Joomla = window.Joomla || {};

window.JoomlaInitReCaptcha2 = () => {
'use strict';
((window, document, Joomla) => {
Joomla.initReCaptcha2 = () => {
'use strict';

const itemNodes = document.getElementsByClassName('g-recaptcha');
const optionKeys = ['sitekey', 'theme', 'size', 'tabindex', 'callback', 'expired-callback', 'error-callback'];
const items = [].slice.call(itemNodes);
const elements = [].slice.call(document.getElementsByClassName('g-recaptcha'));
Copy link
Member

@C-Lodder C-Lodder Oct 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for an array slice call here

Copy link
Contributor Author

@dgrammatiko dgrammatiko Oct 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually this script is targeting the front end thus is better to make sure that the es5 version will work down to IE9. Since there is the option to provide es5 scripts I think it would be better those scripts could live without the need for a polyfill...

Copy link
Member

@C-Lodder C-Lodder Oct 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IE9? Haha ok

Copy link
Contributor Author

@dgrammatiko dgrammatiko Oct 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My point is that the ES5 scripts should reflect on the browsers that run on that version and IE9 is the oldest one that had pretty decent js engine. Also my idea here is to not put artificial barriers. Obviously I won't build a site with support for IE9 but all my deliverables are still fully functional on IE11. The idea of killing ES5 before IE11 is dead IMHO is a really bad one especially when there is a very well known and established practice that will fulfil both words (type=module, nomodule)...

const optionKeys = ['sitekey', 'theme', 'size', 'tabindex', 'callback', 'expired-callback', 'error-callback'];

items.forEach((item) => {
let options = {};
elements.forEach((element) => {
let options = {};

if (item.dataset) {
options = item.dataset;
} else {
[].slice.call(optionKeys).forEach((optionData) => {
const optionKeyFq = `data-${optionData}`;
if (item.hasAttribute(optionKeyFq)) {
options[optionData] = item.getAttribute(optionKeyFq);
}
});
}
if (element.dataset) {
options = element.dataset;
} else {
optionKeys.forEach((key) => {
const optionKeyFq = `data-${key}`;
if (element.hasAttribute(optionKeyFq)) {
options[key] = element.getAttribute(optionKeyFq);
}
});
}

// Set the widget id of the recaptcha item
item.setAttribute(
'data-recaptcha-widget-id',
/* global grecaptcha */
grecaptcha.render(item, options),
);
});
};
// Set the widget id of the recaptcha item
element.setAttribute(
'data-recaptcha-widget-id',
window.grecaptcha.render(element, options),
);
});
};
})(window, document, Joomla);
40 changes: 40 additions & 0 deletions build/media_source/plg_captcha_recaptcha_invisible/js/recaptcha.es6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/**
* @package Joomla.JavaScript
* @copyright Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
Joomla = window.Joomla || {};

((window, document, Joomla) => {
Joomla.initReCaptchaInvisible = () => {
'use strict';

const elements = [].slice.call(document.getElementsByClassName('g-recaptcha'));
const optionKeys = ['sitekey', 'badge', 'size', 'tabindex', 'callback', 'expired-callback', 'error-callback'];

elements.forEach((element) => {
let options = {};

if (element.dataset) {
options = element.dataset;
} else {
optionKeys.forEach((key) => {
const optionKeyFq = `data-${optionKeys[key]}`;

if (element.hasAttribute(optionKeyFq)) {
options[optionKeys[key]] = element.getAttribute(optionKeyFq);
}
});
}

// Set the widget id of the recaptcha item
element.setAttribute(
'data-recaptcha-widget-id',
window.grecaptcha.render(element, options),
);

// Execute the invisible reCAPTCHA
window.grecaptcha.execute(element.getAttribute('data-recaptcha-widget-id'));
});
};
})(window, document, Joomla);
37 changes: 0 additions & 37 deletions build/media_source/plg_captcha_recaptcha_invisible/js/recaptcha.js
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion build/media_source/plg_captcha_recaptcha_invisible/js/recaptcha.min.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion plugins/captcha/recaptcha/recaptcha.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ public function onInit($id = 'dynamic_recaptcha_1')

HTMLHelper::_(
'script',
'https://www.google.com/recaptcha/api.js?onload=JoomlaInitReCaptcha2&render=explicit&hl=' . Factory::getLanguage()->getTag()
'https://www.google.com/recaptcha/api.js?onload=Joomla.initReCaptcha2&render=explicit&hl=' . Factory::getLanguage()->getTag()
);

return true;
Expand Down
2 changes: 1 addition & 1 deletion plugins/captcha/recaptcha_invisible/recaptcha_invisible.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ public function onInit($id = 'dynamic_recaptcha_invisible_1')

// Load Google reCAPTCHA api js
$file = 'https://www.google.com/recaptcha/api.js'
. '?onload=JoomlaInitReCaptchaInvisible'
. '?onload=Joomla.initReCaptchaInvisible'
. '&render=explicit'
. '&hl=' . Factory::getLanguage()->getTag();
HTMLHelper::_(
Expand Down