h5peditor-list-editor.js

/* global ns */
H5PEditor.ListEditor = (function ($) {

  /**
   * Draws the list.
   *
   * @class
   * @param {List} list
   */
  function ListEditor(list) {
    var self = this;

    var entity = list.getEntity();
    // Create list html
    var $list = $('<ul/>', {
      id: list.getId(),
      'aria-describedby': list.getDescriptionId(),
      'class': 'h5p-ul'
    });

    /**
     * Add group collapse functionality to list editor if items are groups.
     */
    const addGroupCollapseFunctionality = () => {
      if (
        list.field?.field?.type === 'group' &&
        (list.getValue() ?? []).length
      ) {
        self.addGroupCollapseListener();
        self.addCollapseButtons();
      }
    };

    /**
     * Find closest parent list.
     * @param {object} library H5PEditor field instance.
     * @returns {object|boolean} Closest parent list or false if none found.
     */
    const findClosestParentList = (library) => {
      const parent = library?.parent;
      if (!parent) {
        return false;
      }

      if (!parent.field?.type) {
        return false;
      }

      if (parent.field.type === 'list') {
        return parent;
      }

      return findClosestParentList(parent);
    };

    /**
     * Set width of collapse button.
     *
     * The width of the button should not change when the label is changed,
     * so the button is rendered offsite with both labels and the longest one
     * is used to determine the button width.
     */
    const setcollapseButtonMainWidth = () => {
      if (!this.collapseButtonMain) {
        return; // Button not available
      }

      // The width should not need to be computed more than once
      if (this.fixedMainButtonWidth) {
        this.collapseButtonMain.style.width = `${this.fixedMainButtonWidth}px`;
        return;
      }

      const offsiteH5PEditorDOM = document.createElement('div');
      offsiteH5PEditorDOM.classList.add('h5peditor', 'offsite');

      const offsiteH5PEditorFlexWrapper = document.createElement('div');
      offsiteH5PEditorFlexWrapper.classList.add('h5p-editor-flex-wrapper');
      offsiteH5PEditorDOM.append(offsiteH5PEditorFlexWrapper);

      const offsiteButton1 = document.createElement('button');
      offsiteButton1.classList.add(
        'h5peditor-button',
        'h5peditor-button-textual',
        'h5peditor-button-collapse',
        'collapsed'
      );
      offsiteH5PEditorFlexWrapper.append(offsiteButton1);

      const offsiteIcon1 = document.createElement('span');
      offsiteIcon1.classList.add('icon');
      offsiteButton1.append(offsiteIcon1);

      const offsiteLabel1 = document.createElement('div');
      offsiteLabel1.classList.add('label');
      offsiteLabel1.innerText = H5PEditor.t('core', 'expandAllContent');
      offsiteButton1.append(offsiteLabel1);

      const offsiteButton2 = document.createElement('button');
      offsiteButton2.classList.add(
        'h5peditor-button',
        'h5peditor-button-textual',
        'h5peditor-button-collapse'
      );
      offsiteH5PEditorFlexWrapper.append(offsiteButton2);

      const offsiteIcon2 = document.createElement('span');
      offsiteIcon2.classList.add('icon');
      offsiteButton2.append(offsiteIcon2);

      const offsiteLabel2 = document.createElement('div');
      offsiteLabel2.classList.add('label');
      offsiteLabel2.innerText = H5PEditor.t('core', 'collapseAllContent');
      offsiteButton2.append(offsiteLabel2);

      document.body.append(offsiteH5PEditorDOM);

      // FontFaceSet API is used to ensure font of icon is loaded
      document.fonts.ready.then(() => {
        const width1 = offsiteButton1.getBoundingClientRect().width;
        const width2 = offsiteButton2.getBoundingClientRect().width;

        this.fixedMainButtonWidth = Math.ceil(Math.max(width1, width2));

        this.collapseButtonMain.style.width = `${this.fixedMainButtonWidth}px`;

        offsiteH5PEditorDOM?.remove();
      });
    };

    /**
     * Determine whether list should get a collapse button.
     *
     * List should get a collapse button if it's the topmost list only - or if
     * its on the 2nd leven and the parent list has a VerticalTabs widget.
     * @returns {boolean} True if list should get a collapse button. Else false.
     */
    shouldListGetCollapseButtonMain = (list) => {
      const closestParentList = findClosestParentList(list);
      if (!closestParentList) {
        return true; // Is topmost list
      }

      /*
       * Note: Currently, the only widget that changes the list editor
       * appearance to not make the collapse button suitable is the
       * VerticalTabs widget. In the future, this might change as other list
       * widgets get developed so the following exception may not suffice then.
       * There's no good way to determine this automatically, however.
       */
      return (
        // Second level list, but VerticalTabs widget
        !findClosestParentList(closestParentList) &&
          H5PEditor.VerticalTabs &&
          closestParentList.widget instanceof H5PEditor.VerticalTabs
      );
    };

    /**
     * Determine whether widget has expand/collapse capabilities.
     * @returns {boolean} True if widget has collapse capabilities. Else false.
     */
    self.hasCollapseCapabilities = () => {
      return (
        this.container?.parentNode.firstChild.querySelector(
          '.h5p-editor-flex-wrapper .h5peditor-button-collapse'
        ) instanceof HTMLElement ||
        this.container?.parentNode.firstChild.querySelector(
          '.h5peditor-label-button'
        ) instanceof HTMLElement
      );
    };

    /**
     * Toggle collapse button main label visibility.
     * @param {boolean} visible True to show label. False to hide.
     */
    self.toggleCollapseButtonMainLabel = (visible) => {
      if (typeof visible !== 'boolean') {
        return;
      }

      if (!visible) {
        this.collapseButtonMain.style.width = '';
      }
      else {
        setcollapseButtonMainWidth();
      }

      this.collapseButtonMain.classList.toggle('no-label', !visible);
    }

    /**
     * Resize handler.
     */
    self.handleResize = () => {
      /*
       * When the two buttons for collapsing/expanding groups are in the same
       * container and the horizontal space does not suffice, first the main
       * button should loose its label. If there's still not enough space, the
       * list button label will wrap.
       * Can't be done in CSS alone, unfortunately, because the main button
       * needs a fixed width.
       */
      const wrapperRect = this.collapseButtonsWrapper.getBoundingClientRect();
      if (wrapperRect.width === 0) {
        return; // Not visible
      }

      this.collapseButtonsGap = this.collapseButtonsGap ?? parseFloat(
        window.getComputedStyle(this.collapseButtonsWrapper).gap ?? 0
      );

      const listButtonRect = this.collapseButtonList.getBoundingClientRect();

      const hasSpaceForBothButtons =
        wrapperRect.width - listButtonRect.width - this.collapseButtonsGap >=
        this.fixedMainButtonWidth;

      this.toggleCollapseButtonMainLabel(hasSpaceForBothButtons);
    };
    self.handleResize = self.handleResize.bind(self);

    /**
     * Set toggle button collapsed state.
     * @param {boolean} shouldBeCollapsed True for collapsed state.
     */
    self.setButtonsCollapsed = (shouldBeCollapsed) => {
      if (typeof shouldBeCollapsed !== 'boolean') {
        return; // Invalid type
      }

      const ariaActionText = shouldBeCollapsed ?
        H5PEditor.t('core', 'expandAllContent') :
        H5PEditor.t('core', 'collapseAllContent');

      if (this.collapseButtonList) {
        this.collapseButtonList.classList.toggle(
          'collapsed', shouldBeCollapsed
        );

        this.collapseButtonList.setAttribute(
          'aria-label',
          `${this.collapseButtonList.innerText}. ${ariaActionText}`
        );
      }

      if (this.collapseButtonMain) {
        this.collapseButtonMain.classList.toggle(
          'collapsed', shouldBeCollapsed
        );

        this.collapseButtonMainLabel.innerText = ariaActionText;
      }
    };

    /**
     * Add group collapse listener.
     */
    self.addGroupCollapseListener = () => {
      if (this.hasCollapseCapabilities()) {
        return; // Don't add extra listener
      }

      list.on('groupCollapsedStateChanged', (event) => {
        this.setButtonsCollapsed(event.data.allGroupsCollapsed);
      });

      /*
       * Note: This is a workaround. It determines the element to focus
       * by finding the first contained error message and then choosing the
       * first element with the `.error` class that is commonly used by H5P
       * editor widgets. This may fail if an editor widget does not put the
       * `.error` class on the element however. If no such element is found,
       * the error message will at least be scrolled into view.
       * Ideally, every widget would have a method to return fields that do
       * not validate, but that would require to change every widget and should
       * be documented in the H5P core API.
       */
      list.on('cannotCollapseAll', () => {
        const errorMessageDOM =
          [... this.container.querySelectorAll('.h5p-errors')]
            .filter((error) => error.innerHTML.length > 0)
            .shift();

        if (!errorMessageDOM) {
          return;
        }

        let errorDOM;
        let parentNode = errorMessageDOM.parentNode;

        while (!errorDOM && parentNode) {
          errorDOM = parentNode.querySelector('.error');
          parentNode = parentNode.parentNode;
        }

        if (errorDOM) {
          errorDOM?.focus();
        }
        else {
          errorMessageDOM.scrollIntoView();
        }
      });
    };

    /**
     * Add toggle buttons for collapsing/expanding groups to container.
     *
     * There's a main button for the topmost list with groups and a button that
     * replaces the original list title for all other lists.
     */
    self.addCollapseButtons = () => {
      if (this.hasCollapseCapabilities()) {
        return; // Don't add extra buttons
      }

      /*
       * Adding the same flex-wrapper approach that's used for the content title
       * label and the metadata button, so the "collapse/expand" button can be
       * aligned as required.
       */
      this.collapseButtonsWrapper = document.createElement('div');
      this.collapseButtonsWrapper.classList.add(
        'h5p-editor-flex-wrapper', 'has-button-collapse'
      );

      /*
       * Move original label offsite, because it is used as a <label> for screen
       * readers and display list title collapse button instead.
       */
      this.originalLabel =
        this.container.parentNode?.querySelector('.h5peditor-label');
      this.originalLabel.classList.add('offsite');

      this.collapseButtonList = document.createElement('button');
      this.collapseButtonList.classList.add('h5peditor-label-button');

      const icon = document.createElement('div');
      icon.classList.add('icon');
      this.collapseButtonList.append(icon);

      const label = document.createElement('div');
      label.classList.add('label', 'h5peditor-required');
      label.innerText = this.originalLabel.innerText;
      this.collapseButtonList.append(label);

      this.collapseButtonList.setAttribute(
        'aria-label',
        `${this.collapseButtonList.innerText}. ${H5PEditor.t('core', 'collapseAllContent')}`
      );

      this.collapseButtonList.addEventListener('click', () => {
        list.toggleItemCollapsed();
      });

      /*
       * If label is directly before the list editor container, put it next to
       * the button. Otherwise, e. g. when there are list widgets, use button
       * alone on top of those and leave the "label" where it was.
       */
      const bothsButtonsInSameContainer =
        self.container.previousSibling === this.originalLabel;

      if (bothsButtonsInSameContainer) {
        this.collapseButtonsWrapper.classList.add('has-label');
        this.collapseButtonsWrapper.append(this.collapseButtonList);
      }
      else {
        self.container.previousSibling.parentNode?.insertBefore(
          this.collapseButtonList, self.container.previousSibling
        );
      }

      if (shouldListGetCollapseButtonMain(list)) {
        this.collapseButtonMain = document.createElement('button');
        this.collapseButtonMain.classList.add(
          'h5peditor-button',
          'h5peditor-button-textual',
          'h5peditor-button-collapse'
        );

        // Icon fixed left aligned
        const icon = document.createElement('div');
        icon.classList.add('icon');
        this.collapseButtonMain.append(icon);

        // Label centered in remaining space
        this.collapseButtonMainLabel = document.createElement('div');
        this.collapseButtonMainLabel.classList.add('label');
        this.collapseButtonMain.append(this.collapseButtonMainLabel);

        this.collapseButtonMainLabel.innerText =
          H5PEditor.t('core', 'collapseAllContent');

        // Longest label should fit inside button
        setcollapseButtonMainWidth();

        this.collapseButtonMain.addEventListener('click', () => {
          list.toggleItemCollapsed();
        });

        this.collapseButtonsWrapper.append(this.collapseButtonMain);

        if (bothsButtonsInSameContainer) {
          // We may need to hide the main button's label
          H5P.$window.get(0).addEventListener('resize', self.handleResize);
        }
      }

      self.container.parentNode?.prepend(this.collapseButtonsWrapper);
    };

    // Create add button
    var $button = ns.createButton(
      list.getImportance(),
      H5PEditor.t('core', 'addEntity', { ':entity': entity }),
      () => {
        list.addItem();

        if (!this.hasCollapseCapabilities()) {
          addGroupCollapseFunctionality();
        }
      },
      true
    );

    // Used when dragging items around
    var adjustX, adjustY, marginTop, formOffset;

    /**
     * @private
     * @param {jQuery} $item
     * @param {jQuery} $placeholder
     * @param {Number} x
     * @param {Number} y
     */
    var moveItem = function ($item, $placeholder, x, y) {
      var currentIndex;

      // Adjust so the mouse is placed on top of the icon.
      x = x - adjustX;
      y = y - adjustY;
      $item.css({
        top: y - marginTop - formOffset.top,
        left: x - formOffset.left
      });

      // Try to move up.
      var $prev = $item.prev().prev();
      if ($prev.length && y < $prev.offset().top + ($prev.height() / 2)) {
        $prev.insertAfter($item);

        currentIndex = $item.index();
        list.moveItem(currentIndex, currentIndex - 1);

        return;
      }

      // Try to move down.
      var $next = $item.next();
      if (
        $next.length && y + $item.height() >
          $next.offset().top + ($next.height() / 2)
      ) {
        $next.insertBefore($placeholder);

        currentIndex = $item.index() - 2;
        list.moveItem(currentIndex, currentIndex + 1);
      }
    };

    /**
     * Default confirm handler.
     *
     * @param {Object} item Content parameters
     * @param {number} id Index of element being removed
     * @param {Object} buttonOffset Delete button offset, useful for positioning dialog
     * @param {function} confirm Run to confirm delete
     */
    self.defaultConfirmHandler = function (item, id, buttonOffset, confirm) {
      // Create default confirmation dialog for removing list item
      const confirmRemovalDialog = new H5P.ConfirmationDialog({
        dialogText: H5PEditor.t('core', 'confirmRemoval', { ':type': entity })
      }).appendTo(document.body);

      // Remove list item on confirmation
      confirmRemovalDialog.on('confirmed', confirm);
      confirmRemovalDialog.show(buttonOffset.top);
    };

    // Use the default confirmation handler by default
    let confirmHandler = self.defaultConfirmHandler;

    /**
     * Set custom confirmation handler callback (instead of the default dialog)
     *
     * @public
     * @param {function} confirmHandler
     */
    self.setConfirmHandler = function (handler) {
      confirmHandler = handler;
    };

    /**
     * Adds UI items to the widget.
     *
     * @public
     * @param {Object} item
     */
    self.addItem = function (item) {
      var $placeholder, mouseDownAt;
      var $item = $('<li/>', {
        'class' : 'h5p-li',
      });

      /**
       * Mouse move callback
       *
       * @private
       * @param {Object} event
       */
      var move = function (event) {
        if (mouseDownAt) {
          // Have not started moving yet

          if (! (
            event.pageX > mouseDownAt.x + 5 ||
            event.pageX < mouseDownAt.x - 5 ||
            event.pageY > mouseDownAt.y + 5 ||
            event.pageY < mouseDownAt.y - 5
          )) {
            return; // Not ready to start moving
          }

          // Prevent wysiwyg becoming unresponsive
          H5PEditor.Html.removeWysiwyg();

          // Prepare to start moving
          mouseDownAt = null;

          var offset = $item.offset();
          adjustX = event.pageX - offset.left;
          adjustY = event.pageY - offset.top;
          marginTop = parseInt($item.css('marginTop'));
          formOffset = $list.offsetParent().offset();
          // TODO: Couldn't formOffset and margin be added?

          var width = $item.width();
          var height = $item.height();

          $item.addClass('moving').css({
            width: width,
            height: height
          });
          $placeholder = $('<li/>', {
            'class': 'placeholder h5p-li',
            css: {
              width: width,
              height: height
            }
          }).insertBefore($item);
        }

        moveItem($item, $placeholder, event.pageX, event.pageY);
      };

      /**
       * Mouse button release callback
       *
       * @private
       */
      var up = function () {

        // Stop listening for mouse move events
        H5P.$window
          .unbind('mousemove', move)
          .unbind('mouseup', up);

        // Enable text select again
        H5P.$body
          .css({
            '-moz-user-select': '',
            '-webkit-user-select': '',
            'user-select': '',
            '-ms-user-select': ''
          })
          .attr('unselectable', 'off')[0]
          .onselectstart = H5P.$body[0].ondragstart = null;

        if (!mouseDownAt) {
          // Not your regular click, we have been moving
          $item.removeClass('moving').css({
            width: 'auto',
            height: 'auto'
          });
          $placeholder.remove();

          if (item instanceof H5PEditor.Group) {
            // Avoid groups expand/collapse toggling
            item.preventToggle = true;
          }
        }
      };

      /**
       * Mouse button down callback
       *
       * @private
       */
      var down = function (event) {
        if (event.which !== 1) {
          return; // Only allow left mouse button
        }

        mouseDownAt = {
          x: event.pageX,
          y: event.pageY
        };

        // Start listening for mouse move events
        H5P.$window
          .mousemove(move)
          .mouseup(up);

        // Prevent text select
        H5P.$body
          .css({
            '-moz-user-select': 'none',
            '-webkit-user-select': 'none',
            'user-select': 'none',
            '-ms-user-select': 'none'
          })
          .attr('unselectable', 'on')[0]
          .onselectstart = H5P.$body[0].ondragstart = () => {
            return false;
          };
      };

      /**
       * Order current list item up
       *
       * @private
       */
      var moveItemUp = function () {
        var $prev = $item.prev();
        if (!$prev.length) {
          return; // Cannot move item further up
        }

        // Prevent wysiwyg becoming unresponsive
        H5PEditor.Html.removeWysiwyg();

        var currentIndex = $item.index();
        $prev.insertAfter($item);
        list.moveItem(currentIndex, currentIndex - 1);
      };

      /**
       * Order current ist item down
       *
       * @private
       */
      var moveItemDown = function () {
        var $next = $item.next();
        if (!$next.length) {
          return; // Cannot move item further down
        }

        // Prevent wysiwyg becoming unresponsive
        H5PEditor.Html.removeWysiwyg();

        var currentIndex = $item.index();
        $next.insertBefore($item);
        list.moveItem(currentIndex, currentIndex + 1);
      };

      // List item title bar
      var $titleBar = $('<div/>', {
        'class': 'list-item-title-bar',
        appendTo: $item
      });

      // Container for list actions
      var $listActions = $('<div/>', {
        class: 'list-actions',
        appendTo: $titleBar
      });

      // Append order button
      var $orderGroup = $('<div/>', {
        class : 'order-group',
        appendTo: $listActions
      });

      H5PEditor.createButton(
        'order-up', H5PEditor.t('core', 'orderItemUp'), moveItemUp
      ).appendTo($orderGroup);
      H5PEditor.createButton(
        'order-down', H5PEditor.t('core', 'orderItemDown'), moveItemDown
      ).appendTo($orderGroup);

      H5PEditor.createButton(
        'remove', H5PEditor.t('core', 'removeItem'), function () {
          confirmHandler(item, $item.index(), $(this).offset(), function () {
            list.removeItem($item.index());
            $item.remove();

            if (!(list.getValue() ?? []).length) {
              self.removeCollapseButtons();
            }
          });
        }
      ).appendTo($listActions);

      // Append new field item to content wrapper
      if (item instanceof H5PEditor.Group) {
        // Append to item
        item.appendTo($item);
        $item.addClass('listgroup');
        $titleBar.addClass(list.getImportance());

        // Move label
        $item
          .children('.field').children('.title')
          .appendTo($titleBar).addClass('h5peditor-label');

        // Handle expand and collapse
        item.on('expanded', function () {
          $item.addClass('expanded').removeClass('collapsed');
        });
        item.on('collapsed', function () {
          $item.removeClass('expanded').addClass('collapsed');
        });
      }
      else {
        // Append content wrapper
        var $content = $('<div/>', {
          'class' : 'content'
        }).appendTo($item);

        // Add importance to items not in groups
        $titleBar.addClass(list.getImportance());

        // Append field
        item.appendTo($content);

        if (item.field.label !== 0) {
          // Try to find and move the label to the title bar
          const $label =
            $content.children('.field').find('.h5peditor-label:first');

          if ($label.length !== 0) {
            $titleBar.append($('<label/>', {
              'class': 'h5peditor-label',
              'for': $label.parent().attr('for'),
              html: $label.html()
            }));

            $label.hide();
          }
        }
      }

      // Append item to list
      $item.appendTo($list);

      if (item instanceof H5PEditor.Group && item.field.expanded !== false) {
        /*
         * Good UX: automatically expand groups if not explicitly disabled by
         * semantics
         */
        item.expand();
      }

      $titleBar.children('.h5peditor-label').mousedown(down);
    };

    /**
     * Determine if child is a text field
     *
     * @param {Object} child
     * @returns {boolean} True if child is a text field
     */
    self.isTextField = function (child) {
      var widget = ns.getWidgetName(child.field);
      return widget === 'html' || widget === 'text';
    };

    /**
     * Puts this widget at the end of the given container.
     *
     * @public
     * @param {jQuery} $container
     */
    self.appendTo = function ($container) {
      self.container = $container[0];

      addGroupCollapseFunctionality();

      $list.appendTo($container);
      $button.appendTo($container);
    };

    /**
     * Remove this widget from the editor DOM.
     *
     * @public
     */
    self.remove = function () {
      this.removeCollapseButtons();
      $list.remove();
      $button.remove();
    };

    /**
     * Remove collapse buttons from container.
     */
    self.removeCollapseButtons = () => {
      this.originalLabel?.classList.remove('offsite');
      this.collapseButtonList?.remove();
      this.collapseButtonMain?.remove();
      this.collapseButtonsWrapper?.remove();
      H5P.$window.get(0).removeEventListener('resize', self.handleResize);
    };
  }

  return ListEditor;
})(H5P.jQuery);