tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-shuttle.ts

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {Listener, Phase} from "./tobago-listener";
import {DomUtils} from "./tobago-utils";

class SelectManyShuttle {

  static init = function (element: HTMLElement) {
    for (const shuttle of DomUtils.selfOrQuerySelectorAll(
        element, ".tobago-selectManyShuttle:not(.tobago-selectManyShuttle-disabled)")) {

      shuttle.querySelector(".tobago-selectManyShuttle-unselected").addEventListener(
          "dblclick", (event: Event) => {
            SelectManyShuttle.moveSelectedItems(event, true, false);
          });

      shuttle.querySelector(".tobago-selectManyShuttle-selected").addEventListener(
          "dblclick", (event: Event) => {
            SelectManyShuttle.moveSelectedItems(event, false, false);
          });

      shuttle.querySelector(".tobago-selectManyShuttle-addAll").addEventListener(
          "click", (event: Event) => {
            SelectManyShuttle.moveSelectedItems(event, true, true);
          });

      shuttle.querySelector(".tobago-selectManyShuttle-add").addEventListener(
          "click", (event: Event) => {
            SelectManyShuttle.moveSelectedItems(event, true, false);
          });

      shuttle.querySelector(".tobago-selectManyShuttle-removeAll").addEventListener(
          "click", (event: Event) => {
            SelectManyShuttle.moveSelectedItems(event, false, true);
          });

      shuttle.querySelector(".tobago-selectManyShuttle-remove").addEventListener(
          "click", (event: Event) => {
            SelectManyShuttle.moveSelectedItems(event, false, false);
          });
    }
  };

  static moveSelectedItems = function (event: Event, direction: boolean, all: boolean) {
    const currentTarget = event.currentTarget as HTMLElement;
    const shuttle = currentTarget.closest(".tobago-selectManyShuttle");
    const unselected = shuttle.querySelector(".tobago-selectManyShuttle-unselected");
    const selected = shuttle.querySelector(".tobago-selectManyShuttle-selected");
    var oldCount = selected.childElementCount;
    const source = direction ? unselected : selected;
    const target = direction ? selected : unselected;
    const options = source.querySelectorAll(all ? "option:not(:disabled)" : "option:checked");
    var hidden = shuttle.querySelector(".tobago-selectManyShuttle-hidden");
    var hiddenOptions = hidden.querySelectorAll("option");
    for (const option of options as NodeListOf<HTMLOptionElement>) {
      source.removeChild(option);
      target.appendChild(option);
      for (const hiddenOption of hiddenOptions) {
        if (hiddenOption.value === option.value) {
          hiddenOption.selected = direction;
        }
      }
    }

    if (oldCount !== selected.childElementCount) {
      hidden.dispatchEvent(new Event("change"));
    }
  };
}

Listener.register(SelectManyShuttle.init, Phase.DOCUMENT_READY);
Listener.register(SelectManyShuttle.init, Phase.AFTER_UPDATE);