Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3024975 by quiron, huzooka, lauriii, Wim Leers, nod_: Add Drupal JavaScript theme function for checkbox

merge-requests/55/head
Alex Pott 2019-09-21 00:18:38 +01:00
parent 6340ef5877
commit 21e024eacd
No known key found for this signature in database
GPG Key ID: 31905460D4A69276
12 changed files with 68 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/core.libraries.yml
View File

@ -127,6 +127,13 @@ drupal.batch:
- core/drupal.progress
- core/jquery.once
drupal.checkbox:
version: VERSION
js:
misc/checkbox.js: {}
dependencies:
- core/drupal
drupal.collapse:
version: VERSION
js:
@ -307,6 +314,7 @@ drupal.tableselect:
misc/tableselect.js: {}
dependencies:
- core/drupal
- core/drupal.checkbox
- core/jquery
- core/jquery.once

15
core/misc/checkbox.es6.js Normal file
View File

@ -0,0 +1,15 @@
/**
* @file
* Defines checkbox theme functions.
*/
(Drupal => {
/**
* Theme function for a checkbox.
*
* @return {string}
* The HTML markup for the checkbox.
*/
Drupal.theme.checkbox = () =>
`<input type="checkbox" class="form-checkbox"/>`;
})(Drupal);

12
core/misc/checkbox.js Normal file
View File

@ -0,0 +1,12 @@
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
(function (Drupal) {
Drupal.theme.checkbox = function () {
return "<input type=\"checkbox\" class=\"form-checkbox\"/>";
};
})(Drupal);

7
core/misc/tableselect.es6.js
View File

@ -70,12 +70,7 @@
// Find all <th> with class select-all, and insert the check all checkbox.
$table
.find('th.select-all')
.prepend(
$('<input type="checkbox" class="form-checkbox" />').attr(
'title',
strings.selectAll,
),
)
.prepend($(Drupal.theme('checkbox')).attr('title', strings.selectAll))
.on('click', event => {
if ($(event.target).is('input[type="checkbox"]')) {
// Loop through all checkboxes and set their state to the select all

2
core/misc/tableselect.js
View File

@ -38,7 +38,7 @@
});
};
$table.find('th.select-all').prepend($('<input type="checkbox" class="form-checkbox" />').attr('title', strings.selectAll)).on('click', function (event) {
$table.find('th.select-all').prepend($(Drupal.theme('checkbox')).attr('title', strings.selectAll)).on('click', function (event) {
if ($(event.target).is('input[type="checkbox"]')) {
checkboxes.each(function () {
var $checkbox = $(this);

37
core/modules/media_library/js/media_library.view.es6.js
View File

@ -16,24 +16,25 @@
'media-library-select-all',
);
if ($view.length && $view.find('.js-media-library-item').length) {
const $checkbox = $(
'<input type="checkbox" class="form-checkbox" />',
).on('click', ({ currentTarget }) => {
// Toggle all checkboxes.
const $checkboxes = $(currentTarget)
.closest('.media-library-view')
.find('.js-media-library-item input[type="checkbox"]');
$checkboxes
.prop('checked', $(currentTarget).prop('checked'))
.trigger('change');
// Announce the selection.
const announcement = $(currentTarget).prop('checked')
? Drupal.t('Zero items selected')
: Drupal.t('All @count items selected', {
'@count': $checkboxes.length,
});
Drupal.announce(announcement);
});
const $checkbox = $(Drupal.theme('checkbox')).on(
'click',
({ currentTarget }) => {
// Toggle all checkboxes.
const $checkboxes = $(currentTarget)
.closest('.media-library-view')
.find('.js-media-library-item input[type="checkbox"]');
$checkboxes
.prop('checked', $(currentTarget).prop('checked'))
.trigger('change');
// Announce the selection.
const announcement = $(currentTarget).prop('checked')
? Drupal.t('Zero items selected')
: Drupal.t('All @count items selected', {
'@count': $checkboxes.length,
});
Drupal.announce(announcement);
},
);
const $label = $(
'<label class="media-library-select-all"></label>',
).text(Drupal.t('Select all media'));

2
core/modules/media_library/js/media_library.view.js
View File

@ -10,7 +10,7 @@
attach: function attach(context) {
var $view = $('.js-media-library-view', context).once('media-library-select-all');
if ($view.length && $view.find('.js-media-library-item').length) {
var $checkbox = $('<input type="checkbox" class="form-checkbox" />').on('click', function (_ref) {
var $checkbox = $(Drupal.theme('checkbox')).on('click', function (_ref) {
var currentTarget = _ref.currentTarget;
var $checkboxes = $(currentTarget).closest('.media-library-view').find('.js-media-library-item input[type="checkbox"]');

1
core/modules/media_library/media_library.libraries.yml
View File

@ -19,6 +19,7 @@ view:
js:
js/media_library.view.js: {}
dependencies:
- core/drupal.checkbox
- media_library/style
- media_library/click_to_select

7
core/modules/simpletest/simpletest.es6.js
View File

@ -47,10 +47,9 @@
.each(function() {
const $group = $(this);
const $cell = $group.find('.simpletest-group-select-all');
const $groupCheckbox = $(
`<input type="checkbox" id="${$cell.attr(
'id',
)}-group-select-all" class="form-checkbox" />`,
const $groupCheckbox = $(Drupal.theme('checkbox')).attr(
'id',
`${$cell.attr('id')}-group-select-all`,
);
const $testCheckboxes = $group
.nextUntil('.simpletest-group')

2
core/modules/simpletest/simpletest.js
View File

@ -27,7 +27,7 @@
$(context).find('.simpletest-group').once('simpletest-group-select-all').each(function () {
var $group = $(this);
var $cell = $group.find('.simpletest-group-select-all');
var $groupCheckbox = $('<input type="checkbox" id="' + $cell.attr('id') + '-group-select-all" class="form-checkbox" />');
var $groupCheckbox = $(Drupal.theme('checkbox')).attr('id', $cell.attr('id') + '-group-select-all');
var $testCheckboxes = $group.nextUntil('.simpletest-group').find('input[type=checkbox]');
$cell.append($groupCheckbox);

8
core/modules/user/user.permissions.es6.js
View File

@ -40,9 +40,11 @@
// submitted form. If we'd automatically check existing checkboxes, the
// permission table would be polluted with redundant entries. This
// is deliberate, but desirable when we automatically check them.
const $dummy = $(
'<input type="checkbox" class="dummy-checkbox js-dummy-checkbox" disabled="disabled" checked="checked" />',
)
const $dummy = $(Drupal.theme('checkbox'))
.removeClass('form-checkbox')
.addClass('dummy-checkbox js-dummy-checkbox')
.attr('disabled', 'disabled')
.attr('checked', 'checked')
.attr(
'title',
Drupal.t(

2
core/modules/user/user.permissions.js
View File

@ -22,7 +22,7 @@
}
$table.detach();
var $dummy = $('<input type="checkbox" class="dummy-checkbox js-dummy-checkbox" disabled="disabled" checked="checked" />').attr('title', Drupal.t('This permission is inherited from the authenticated user role.')).hide();
var $dummy = $(Drupal.theme('checkbox')).removeClass('form-checkbox').addClass('dummy-checkbox js-dummy-checkbox').attr('disabled', 'disabled').attr('checked', 'checked').attr('title', Drupal.t('This permission is inherited from the authenticated user role.')).hide();
$table.find('input[type="checkbox"]').not('.js-rid-anonymous, .js-rid-authenticated').addClass('real-checkbox js-real-checkbox').after($dummy);