OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:40:48 AM	rwxr-xr-x
📄 ComponentApi.ts	2.18 KB	02/20/2020 06:37:43 AM	rw-r--r--
📄 ComposingConfigs.ts	970 bytes	02/20/2020 06:37:43 AM	rw-r--r--
📄 DialogTabHeight.ts	5.23 KB	02/20/2020 06:37:45 AM	rw-r--r--
📄 DisablingConfigs.ts	678 bytes	02/20/2020 06:37:45 AM	rw-r--r--
📄 FieldLabeller.ts	1.87 KB	02/20/2020 06:37:46 AM	rw-r--r--
📄 FlatgridAutodetect.ts	1.16 KB	02/20/2020 06:37:46 AM	rw-r--r--
📄 RepresentingConfigs.ts	2.39 KB	02/20/2020 06:37:47 AM	rw-r--r--
📄 SimpleBehaviours.ts	700 bytes	02/20/2020 06:37:47 AM	rw-r--r--

Editing: DialogTabHeight.ts

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */

import { AlloyComponent, AlloyEvents, Replacing, SystemEvents, TabSection } from '@ephox/alloy';
import { document, window } from '@ephox/dom-globals';
import { Arr, Cell, Option } from '@ephox/katamari';
import { Css, Element, Focus, SelectorFind } from '@ephox/sugar';
import Delay from 'tinymce/core/api/util/Delay';
import { formResizeEvent } from '../general/FormEvents';

const measureHeights = (allTabs, tabview, tabviewComp): number[] => {
  return Arr.map(allTabs, (tab, i) => {
    Replacing.set(tabviewComp, allTabs[i].view());
    const rect = tabview.dom().getBoundingClientRect();
    Replacing.set(tabviewComp, [ ]);
    return rect.height;
  });
};

const showTab = (allTabs, comp: AlloyComponent) => {
  Arr.head(allTabs).each((tab) => TabSection.showTab(comp, tab.value));
};

const setMode = (allTabs) => {
  const smartTabHeight = (() => {
    const maxTabHeight = Cell<Option<number>>(Option.none());

const extraEvents = [
      AlloyEvents.runOnAttached((comp) => {
        SelectorFind.descendant(comp.element(), '[role="tabpanel"]').each((tabview) => {
          Css.set(tabview, 'visibility', 'hidden');

// Determine the maximum heights of each tab
          comp.getSystem().getByDom(tabview).toOption().each((tabviewComp) => {
            const heights = measureHeights(allTabs, tabview, tabviewComp);

// Calculate the maximum tab height and store it
            const maxTabHeightOpt = getMaxHeight(heights);
            maxTabHeight.set(maxTabHeightOpt);
          });

// Set an initial height, based on the current size
          updateTabviewHeight(comp.element(), tabview, maxTabHeight);

// Show the tabs
          Css.remove(tabview, 'visibility');
          showTab(allTabs, comp);

// Use a delay here and recalculate the height, as we need all the components attached
          // to be able to properly calculate the max height
          Delay.requestAnimationFrame(() => {
            updateTabviewHeight(comp.element(), tabview, maxTabHeight);
          });
        });
      }),
      AlloyEvents.run(SystemEvents.windowResize(), (comp) => {
        SelectorFind.descendant(comp.element(), '[role="tabpanel"]').each((tabview) => {
          updateTabviewHeight(comp.element(), tabview, maxTabHeight);
        });
      }),
      AlloyEvents.run(formResizeEvent, (comp, se) => {
        SelectorFind.descendant(comp.element(), '[role="tabpanel"]').each((tabview) => {
          const oldFocus = Focus.active();
          Css.set(tabview, 'visibility', 'hidden');
          const oldHeight = Css.getRaw(tabview, 'height').map((h) => parseInt(h, 10));
          Css.remove(tabview, 'height');
          const newHeight = tabview.dom().getBoundingClientRect().height;
          const hasGrown = oldHeight.forall((h) => newHeight > h);

if (hasGrown) {
            maxTabHeight.set(Option.from(newHeight));
            updateTabviewHeight(comp.element(), tabview, maxTabHeight);
          } else {
            oldHeight.each((h) => {
              Css.set(tabview, 'height', `${h}px`);
            });
          }

Css.remove(tabview, 'visibility');
          oldFocus.each(Focus.focus);
        });
      })
    ];

const selectFirst = false;

return {
      extraEvents,
      selectFirst
    };
  })();

// Set tab heights within a dialog to vary according to their contents
  const naiveTabHeight = (() => {
    const extraEvents = [ ];

const selectFirst = true;

return {
      extraEvents,
      selectFirst
    };
  })();

return {
    smartTabHeight,
    naiveTabHeight
  };

};

export {
  setMode
};