Problem/Motivation

The native JS is good, but, according to the drupal js cashing and another standatrs points I suggest to move it to the drupal standarts of Js. I really respect this approach, but it makes a mess in the future.

Proposed resolution

I did locally some updates

(function ($, Drupal, drupalSettings) {

  'use strict';

  Drupal.behaviors.menuTree = {
    attach: function (context, settings) {

      /**
       * Add functionality for expanding and collapsing menu tree.
       */
      $(once('menu-tree-toggle', '#edit-menu', context)).on('click', 'span.toggle', function(event) {
        $($(event.currentTarget)).toggleClass("show");
      });

      /**
       * Set default value of menu tree and expand active branches.
       */
      $(once('menu-tree-state', '#edit-menu input[name="menu[menu_parent]"]', context)).each(function (index, element) {
        let $item = $('#edit-menu input[name="menu_tree"][value="' + element.value + '"]', context).get(0);
        $item.checked = true;
        while ($item) {
          if ($item.matches('li') && $item.firstElementChild.matches('.toggle')) {
            $($item.firstElementChild).addClass("show");
          }
          $item = $item.parentElement;
        }
      });

      /**
       * React on radio button changes and set value of actual menu parent element.
       */
      $(once('menu-tree-change', '#edit-menu input[type="radio"][name="menu_tree"]', context)).on('change', function(event) {
        $('#edit-menu input[name="menu[menu_parent]"]', context).get(0).value = $(event.currentTarget).val();
      });
    }
  };
})(jQuery, Drupal, drupalSettings);

CommentFileSizeAuthor
#3 menu_tree-js-update-3375050.patch3.11 KBp.kasianov

Comments

t1mm1 created an issue. See original summary.

p.kasianov’s picture

Also, take a look - I use 'once' as it was added in the D10. It means that need update menu_tree.libraries.yml file as well..

As it on my local now.

menu-tree:
  version: 1.0
  js:
    js/tree.js: { }
  css:
    theme:
      css/tree.css: { }
  dependencies:
    - core/jquery
    - core/drupal
    - core/once

I did add version and dependicies.

Thanks.

p.kasianov’s picture

StatusFileSize
new3.11 KB

The patch

p.kasianov’s picture

Status: Active » Needs review

Please, take a look for review.

heykarthikwithu’s picture

Priority: Normal » Minor
Issue tags: +Novice
heykarthikwithu’s picture

Issue tags: -Novice
peter törnstrand’s picture

Assigned: Unassigned » peter törnstrand

Thank, will have a look asap.

peter törnstrand’s picture

Status: Needs review » Needs work

If you can refactor this to not use jQuery I will commit this.

peter törnstrand’s picture

Assigned: peter törnstrand » Unassigned
peter törnstrand’s picture

Title: Drupal standarts of JS (Jquery) » Drupal JS standards
Version: 1.0.0 » 2.0.x-dev
Assigned: Unassigned » peter törnstrand

peter törnstrand’s picture

Status: Needs work » Fixed
peter törnstrand’s picture

Version: 2.0.x-dev » 2.x-dev

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.