Issue #3024975 by quiron, huzooka, lauriii, Wim Leers, nod_: Add Drupal JavaScript theme function for checkbox
							parent
							
								
									6340ef5877
								
							
						
					
					
						commit
						21e024eacd
					
				| 
						 | 
				
			
			@ -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
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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);
 | 
			
		||||
| 
						 | 
				
			
			@ -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);
 | 
			
		||||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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);
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -16,9 +16,9 @@
 | 
			
		|||
        '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 }) => {
 | 
			
		||||
        const $checkbox = $(Drupal.theme('checkbox')).on(
 | 
			
		||||
          'click',
 | 
			
		||||
          ({ currentTarget }) => {
 | 
			
		||||
            // Toggle all checkboxes.
 | 
			
		||||
            const $checkboxes = $(currentTarget)
 | 
			
		||||
              .closest('.media-library-view')
 | 
			
		||||
| 
						 | 
				
			
			@ -33,7 +33,8 @@
 | 
			
		|||
                  '@count': $checkboxes.length,
 | 
			
		||||
                });
 | 
			
		||||
            Drupal.announce(announcement);
 | 
			
		||||
        });
 | 
			
		||||
          },
 | 
			
		||||
        );
 | 
			
		||||
        const $label = $(
 | 
			
		||||
          '<label class="media-library-select-all"></label>',
 | 
			
		||||
        ).text(Drupal.t('Select all media'));
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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"]');
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -19,6 +19,7 @@ view:
 | 
			
		|||
  js:
 | 
			
		||||
    js/media_library.view.js: {}
 | 
			
		||||
  dependencies:
 | 
			
		||||
    - core/drupal.checkbox
 | 
			
		||||
    - media_library/style
 | 
			
		||||
    - media_library/click_to_select
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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(
 | 
			
		||||
          const $groupCheckbox = $(Drupal.theme('checkbox')).attr(
 | 
			
		||||
            'id',
 | 
			
		||||
            )}-group-select-all" class="form-checkbox" />`,
 | 
			
		||||
            `${$cell.attr('id')}-group-select-all`,
 | 
			
		||||
          );
 | 
			
		||||
          const $testCheckboxes = $group
 | 
			
		||||
            .nextUntil('.simpletest-group')
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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);
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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(
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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);
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue