<commit_before>import Backbone from 'backbone';
const $ = Backbone.$;

export default {
  run(em, sender) {
    this.sender = sender;
    if (!this.$cn) {
      var config = em.getConfig(),
        panels = em.Panels;
      // Main container
      this.$cn = $('<div></div>');
      // Secondary container
      this.$cn2 = $('<div></div>');
      this.$cn.append(this.$cn2);

      // Device Manager
      var dvm = em.DeviceManager;
      if (dvm && config.showDevices) {
        var devicePanel = panels.addPanel({ id: 'devices-c' });
        devicePanel
          .set('appendContent', dvm.render())
          .trigger('change:appendContent');
      }

      // Class Manager container
      var clm = em.SelectorManager;
      if (clm) this.$cn2.append(clm.render([]));
      this.$cn2.append(em.StyleManager.render());
      var smConfig = em.StyleManager.getConfig();
      const pfx = smConfig.stylePrefix;
      // Create header
      this.$header = $(
        `<div class="${pfx}header">${em.t('styleManager.empty')}</div>`
      );
      this.$cn.append(this.$header);

      // Create panel if not exists
      if (!panels.getPanel('views-container'))
        this.panel = panels.addPanel({ id: 'views-container' });
      else this.panel = panels.getPanel('views-container');

      // Add all containers to the panel
      this.panel.set('appendContent', this.$cn).trigger('change:appendContent');

      this.target = em.editor;
      this.listenTo(this.target, 'component:toggled', this.toggleSm);
    }
    this.toggleSm();
  },

  /**
   * Toggle Style Manager visibility
   * @private
   */
  toggleSm() {
    const { target, sender } = this;
    if (sender && sender.get && !sender.get('active')) return;
    const { componentFirst } = target.get('SelectorManager').getConfig();
    const selectedAll = target.getSelectedAll().length;

    if (selectedAll === 1 || (selectedAll > 1 && componentFirst)) {
      this.$cn2.show();
      this.$header.hide();
    } else {
      this.$cn2.hide();
      this.$header.show();
    }
  },

  stop() {
    // Hide secondary container if exists
    if (this.$cn2) this.$cn2.hide();

    // Hide header container if exists
    if (this.$header) this.$header.hide();
  }
};<commit_msg>Fix default rendering of StyleManager. Closes #3835<commit_after>import Backbone from 'backbone';
const $ = Backbone.$;

export default {
  run(em, sender) {
    this.sender = sender;

    if (!this.$cn) {
      const config = em.getConfig();
      const panels = em.Panels;
      const trgEvCnt = 'change:appendContent';
      this.$cn = $('<div></div>');
      this.$cn2 = $('<div></div>');
      this.$cn.append(this.$cn2);

      // Device Manager
      const dvm = em.DeviceManager;
      if (dvm && config.showDevices) {
        const devicePanel = panels.addPanel({ id: 'devices-c' });
        const dvEl = dvm.render();
        devicePanel.set('appendContent', dvEl).trigger(trgEvCnt);
      }

      // Class Manager container
      const slm = em.SelectorManager;
      const slmConfig = slm.getConfig();
      if (!slmConfig.appendTo) {
        this.$cn2.append(slm.render([]));
      }

      // Style Manager
      const sm = em.StyleManager;
      const smConfig = sm.getConfig();
      if (!smConfig.appendTo) {
        this.$cn2.append(sm.render());
        const pfx = smConfig.stylePrefix;
        this.$header = $(
          `<div class="${pfx}header">${em.t('styleManager.empty')}</div>`
        );
        this.$cn.append(this.$header);
      }

      // Create panel if not exists
      const pnCnt = 'views-container';
      this.panel = panels.getPanel(pnCnt);
      if (!this.panel) this.panel = panels.addPanel({ id: pnCnt });

      // Add all containers to the panel
      this.panel.set('appendContent', this.$cn).trigger(trgEvCnt);

      this.target = em.editor;
      this.listenTo(this.target, 'component:toggled', this.toggleSm);
    }

    this.toggleSm();
  },

  /**
   * Toggle Style Manager visibility
   * @private
   */
  toggleSm() {
    const { target, sender } = this;
    if (sender && sender.get && !sender.get('active')) return;
    const { componentFirst } = target.get('SelectorManager').getConfig();
    const selectedAll = target.getSelectedAll().length;

    if (selectedAll === 1 || (selectedAll > 1 && componentFirst)) {
      this.$cn2 && this.$cn2.show();
      this.$header && this.$header.hide();
    } else {
      this.$cn2 && this.$cn2.hide();
      this.$header && this.$header.show();
    }
  },

  stop() {
    this.$cn2 && this.$cn2.hide();
    this.$header && this.$header.hide();
  }
};
{'fraction_non_alphanumeric': 0.16996735582154515, 'fraction_numerical': 0.0056583242655059846, 'mean_word_length': 2.481818181818182, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7134394', 'n_tokens_mistral': 1447, 'n_tokens_neox': 1418, 'n_words': 297}