Source: src/js/views/accordion/AccordionView.js

  1. define([
  2.   "jquery",
  3.   "backbone",
  4.   "semantic",
  5.   "views/accordion/AccordionItemView",
  6.   "models/accordion/Accordion",
  7. ], ($, Backbone, Semantic, AccordionItemView, AccordionModel) => {
  8.   // The base class for the view
  9.   const BASE_CLASS = "accordion-view";
  11.   /**
  12.    * @class AccordionView
  13.    * @classdesc An extension of the Semantic UI accordion that allows for
  14.    * defining contents with a Backbone model, and adds tooltips and other
  15.    * features.
  16.    * @classcategory Views/Accordion
  17.    * @augments Backbone.View
  18.    * @class
  19.    * @since 2.31.0
  20.    * @screenshot views/accordion/AccordionView.png
  21.    */
  22.   const AccordionView = Backbone.View.extend(
  23.     /** @lends AccordionView.prototype */
  24.     {
  25.       /** @inheritdoc */
  26.       type: "AccordionView",
  28.       /** @inheritdoc */
  29.       className: BASE_CLASS,
  31.       /** @inheritdoc */
  32.       tagName: "div",
  34.       /**
  35.        * Initializes the AccordionView with the model and listens for changes
  36.        * to the items collection.
  37.        * @param {object} options - Options for the view
  38.        * @param {Accordion} [options.model] - The Accordion model for the view. If
  39.        * not provided, a new Accordion model will be created.
  40.        * @param {object} [options.modelData] - Optional data to initialize the
  41.        * Accordion model with. Only used if options.model is not provided.
  42.        */
  43.       initialize(options) {
  44.         // Set the model to the provided model or create a new one
  45.         this.model = options?.model || new AccordionModel(options?.modelData);
  47.         this.listenTo(this.model.get("items"), "add", this.addNewItem);
  48.         this.listenTo(this.model.get("items"), "remove", this.removeItem);
  49.       },
  51.       /** @inheritdoc */
  52.       render() {
  53.         this.initializeAccordion();
  55.         // Start rendering the root, and then the children will be rendered
  56.         // recursively
  57.         const rootItems = this.model.getRootItems();
  58.         const rootAccordion = this.createAccordion(rootItems);
  59.         this.rootAccordion = rootAccordion;
  61.         this.$el.append(rootAccordion);
  63.         return this;
  64.       },
  66.       /**
  67.        * Initializes the Semantic UI accordion module with the settings from the
  68.        * model. The module handles applying accordion behavior to the view and
  69.        * any new DOM elements that are added.
  70.        */
  71.       initializeAccordion() {
  72.         const view = this;
  74.         // Gather all the necessary settings from the model
  75.         const modelJSON = this.model.toJSON();
  76.         const settings = Object.fromEntries(
  77.           Object.entries(modelJSON).filter(([key, _]) =>
  78.             Semantic.ACCORDION_SETTINGS_KEYS.includes(key),
  79.           ),
  80.         );
  82.         // Pass the associated model and view to the callback functions instead
  83.         // only having access to the DOM element as the context
  84.         const createCallback = (callbackName) => {
  85.           const originalCallback = this.model.get(callbackName);
  86.           if (originalCallback) {
  87.             return function callbackWrapper() {
  88.               const contentEl = this[0];
  89.               const itemView = view.viewFromContentEl(contentEl);
  90.               const itemModel = itemView.model;
  91.               originalCallback(itemModel, itemView);
  92.             };
  93.           }
  94.           return null;
  95.         };
  96.         Semantic.ACCORDION_CALLBACKS.forEach((callbackName) => {
  97.           const callback = createCallback(callbackName);
  98.           if (callback) {
  99.             settings[callbackName] = callback;
  100.           } else {
  101.             delete settings[callbackName];
  102.           }
  103.         });
  105.         // Initialize the accordion with the specified settings
  106.         this.$el.accordion(settings);
  107.       },
  109.       /**
  110.        * @param {HTMLElement} contentEl A content element from an item
  111.        * @returns {AccordionItemView} The view associated with the item
  112.        */
  113.       viewFromContentEl(contentEl) {
  114.         const views = Object.values(this.itemViews);
  115.         return views.find((view) => view.contentContainer === contentEl);
  116.       },
  118.       /**
  119.        * Creates a container for the accordion with the necessary classes for
  120.        * Semantic UI and renders any items belonging to the accordion. This can
  121.        * be used to create the root accordion or nested accordions.
  122.        * @param {AccordionItem[]} items - An array of AccordionItem models
  123.        * @returns {HTMLElement} The container element for the accordion
  124.        */
  125.       createAccordion(items) {
  126.         const accordionContainer = this.createContainer();
  127.         if (items?.length) this.addItems(items, accordionContainer);
  128.         return accordionContainer;
  129.       },
  131.       /**
  132.        * Creates a container element for the accordion with the necessary
  133.        * classes
  134.        * @returns {HTMLElement} The container element for the accordion
  135.        */
  136.       createContainer() {
  137.         const container = document.createElement("div");
  138.         container.classList.add(
  139.           Semantic.CLASS_NAMES.accordion.container,
  140.           Semantic.CLASS_NAMES.base,
  141.         );
  142.         container.style.marginTop = 0;
  144.         // Add optional class names based on model properties
  145.         const optionalClasses = ["fluid", "styled", "inverted"];
  146.         optionalClasses.forEach((className) => {
  147.           if (this.model.get(className)) {
  148.             container.classList.add(Semantic.CLASS_NAMES.variations[className]);
  149.           }
  150.         });
  152.         return container;
  153.       },
  155.       /**
  156.        * Adds items to the container element for the accordion
  157.        * @param {AccordionItem[]} models - An array of AccordionItem models
  158.        * @param {HTMLElement} container - The container element for the
  159.        * accordion
  160.        */
  161.       addItems(models, container) {
  162.         models.forEach((model) => {
  163.           this.addItem(model, container);
  164.         });
  165.       },
  167.       /**
  168.        * Adds an item to the container element for the accordion
  169.        * @param {AccordionItem} model - An AccordionItem model
  170.        * @param {HTMLElement} container - The container element for the
  171.        * accordion
  172.        */
  173.       addItem(model, container) {
  174.         const itemView = new AccordionItemView({ model }).render();
  176.         // Semantic UI expects the title and content to be direct children of
  177.         // the accordion container, important for correct application of CSS
  178.         container.appendChild(itemView.titleContainer);
  179.         container.appendChild(itemView.contentContainer);
  181.         if (!this.itemViews) this.itemViews = {};
  183.         const id = model.get("itemId");
  184.         this.itemViews[id] = itemView;
  185.         // Add children if they exist, otherwise just re-adds the content
  186.         this.refreshContent(id);
  187.       },
  189.       /**
  190.        * Refreshes the content of an item in the accordion. If the item has
  191.        * children, it will create a new accordion with the children. Otherwise,
  192.        * it will update the content with the item's model content attribute.
  193.        * @param {string} itemId - The model itemId for the item
  194.        */
  195.       refreshContent(itemId) {
  196.         // Check if there are children for the given item
  197.         const children = this.model.getChildren(itemId);
  198.         const itemView = this.itemViews?.[itemId];
  199.         if (!itemView) return;
  200.         if (children?.length) {
  201.           const subAccordion = this.createAccordion(children);
  202.           itemView.updateContent(subAccordion);
  203.         } else {
  204.           itemView.updateContent(itemView.model.get("content"));
  205.         }
  206.       },
  208.       /**
  209.        * Handles adding a new item to the accordion when the items collection
  210.        * has new models added to it.
  211.        * @param {AccordionItem} model - The new AccordionItem model
  212.        */
  213.       addNewItem(model) {
  214.         const parent = model.get("parent");
  215.         if (parent) {
  216.           this.refreshContent(parent);
  217.         } else {
  218.           this.addItem(model, this.rootAccordion);
  219.         }
  220.       },
  222.       /**
  223.        * Handles removing an item from the accordion when the items collection
  224.        * has models removed from it.
  225.        * @param {AccordionItem} model - The removed AccordionItem model
  226.        */
  227.       removeItem(model) {
  228.         const id = model.get("itemId") || model.cid;
  229.         const itemView = this.itemViews[id];
  230.         // remove the item view from the itemViews object
  231.         delete this.itemViews[id];
  232.         itemView?.remove();
  233.       },
  235.       /**
  236.        * Removes all items from the accordion and clears the itemViews object.
  237.        */
  238.       clearAllItems() {
  239.         Object.entries(this.itemViews).forEach(([id, view]) => {
  240.           view.remove();
  241.           delete this.itemViews[id];
  242.         });
  243.       },
  244.     },
  245.   );
  247.   return AccordionView;
  248. });