silverstripe-cms/client/src/legacy/CMSMain.Tree.js

import $ from 'jquery';
import i18n from 'i18n';

$.entwine('ss.tree', function($) {
  $('.cms-tree').entwine({
    fromDocument: {
      'oncontext_show.vakata': function(e) {
        this.adjustContextClass();
      }
    },
    /*
     * Add and remove classes from context menus to allow for
     * adjusting the display
     */
    adjustContextClass: function() {
      var menus = $('#vakata-contextmenu').find("ul ul");

      menus.each(function(i) {
        var col = "1",
            count = $(menus[i]).find('li').length;

        //Assign columns to menus over 10 items long
        if (count > 20) {
          col = "3";
        } else if (count > 10) {
          col = "2";
        }

        $(menus[i]).addClass('vakata-col-' + col).removeClass('right');

        //Remove "right" class that jstree adds on mouseenter
        $(menus[i]).find('li').on("mouseenter", function(e) {
          $(this).parent('ul').removeClass("right");
        });
      });
    },

    showListViewFor: function(id) {
      localStorage.setItem('ss.pages-view-type', 'listview');
      const $contentView = this.closest('.cms-content-view');
      const url = $contentView.data('url-listviewroot');
      const urlWithParams = $.path.addSearchParams(url, {
        ParentID: id
      });

      const baseUrl = $('base').attr('href') || ''; // Edge17 and IE11 require absolute paths
      window.location.assign(baseUrl + urlWithParams);
    },

    getTreeConfig: function() {
      var self = this,
          config = this._super(),
          hints = this.getHints();
      config.plugins.push('contextmenu');
      config.contextmenu = {
        'items': function(node) {

          var menuitems = {
            edit: {
              'label': (node.hasClass('edit-disabled')) ?
                i18n._t('CMS.EditPage', 'Edit page', 100, 'Used in the context menu when right-clicking on a page node in the CMS tree') :
                i18n._t('CMS.ViewPage', 'View page', 100, 'Used in the context menu when right-clicking on a page node in the CMS tree'),
              'action': function(obj) {
                $('.cms-container').entwine('.ss').loadPanel(i18n.sprintf(
                  self.data('urlEditpage'), obj.data('id')
                ));
              }
            }
          };

          // Add "show as list"
          if (!node.hasClass('nochildren')) {
            menuitems['showaslist'] = {
              'label': i18n._t('CMS.ShowAsList'),
              'action': function(obj) {
                self.showListViewFor(obj.data('id'));
              }
            };
          }

          // Build a list for allowed children as submenu entries
          var pagetype = node.data('pagetype'),
              id = node.data('id'),
              allowedChildren = node.find('>a .item').data('allowedchildren'),
              menuAllowedChildren = {},
              hasAllowedChildren = false;

          // Convert to menu entries
          $.each(allowedChildren, function(index, child) {
            hasAllowedChildren = true;
            menuAllowedChildren["allowedchildren-" + child.ClassName] = {
              'label': '<span class="jstree-pageicon ' + child.IconClass + '"></span>' + child.Title,
              '_class': 'class-' + child.ClassName.replace(/[^a-zA-Z0-9\-_:.]+/g, '_'),
              'action': function(obj) {
                $('.cms-container').entwine('.ss').loadPanel(
                  $.path.addSearchParams(
                    i18n.sprintf(self.data('urlAddpage'), id, child.ClassName),
                    self.data('extraParams')
                  )
                );
              }
            };
          });

          if (hasAllowedChildren) {
            menuitems['addsubpage'] = {
              'label': i18n._t('CMS.AddSubPage', 'Add page under this page', 100, 'Used in the context menu when right-clicking on a page node in the CMS tree'),
              'submenu': menuAllowedChildren
            };
          }

          if (!node.hasClass('edit-disabled')) {
            menuitems['duplicate'] = {
              'label': i18n._t('CMS.Duplicate'),
              'submenu': [{
                'label': i18n._t('CMS.ThisPageOnly'),
                'action': function(obj) {
                  $('.cms-container').entwine('.ss').loadPanel(
                    $.path.addSearchParams(
                      i18n.sprintf(self.data('urlDuplicate'), obj.data('id')),
                      self.data('extraParams')
                    )
                  );
                }
              }, {
                'label': i18n._t('CMS.ThisPageAndSubpages'),
                'action': function(obj) {
                  $('.cms-container').entwine('.ss').loadPanel(
                    $.path.addSearchParams(
                      i18n.sprintf(self.data('urlDuplicatewithchildren'), obj.data('id')),
                      self.data('extraParams')
                    )
                  );
                }
              }]
            };
          }

          return menuitems;
        }
      };
      return config;
    }
  });

  // Scroll tree down to context of the current page, if it isn't
  // already visible
  $('.cms-tree a.jstree-clicked').entwine({
    onmatch: function() {
      var self = this,
          panel = self.parents('.cms-panel-content'),
          scrollTo;

      if (self.offset().top < 0 ||
          self.offset().top > panel.height() - self.height()) {
        // Current scroll top + our current offset top is our
        // position in the panel
        scrollTo = panel.scrollTop() + self.offset().top +
          (panel.height() / 2);

        panel.animate({
          scrollTop: scrollTo
        }, 'slow');
      }
    }
  });

  // Clear filters button
  $('.cms-tree-filtered .clear-filter').entwine({
    onclick: function() {
      window.location = location.protocol + '//' + location.host + location.pathname;
    }
  });

  $('.cms-tree .subtree-list-link').entwine({
    onclick: function(e) {
      e.preventDefault();
      this.closest('.cms-tree').showListViewFor(this.data('id'));
    }
  });
});