How to use the @ephox/sugar.Css.set function in @ephox/sugar

To help you get started, we’ve selected a few @ephox/sugar examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / alien / DialogTabHeight.ts View on Github external
getTabview(dialog).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(dialog, tabview, maxTabHeight);

          // Show the tabs
          Css.remove(tabview, 'visibility');
          showTab(allTabs, comp);
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / Render.ts View on Github external
const setEditorSize = () => {
    // Set height and width if they were given, though height only applies to iframe mode
    const parsedHeight = Utils.numToPx(EditorSize.getHeightWithFallback(editor));
    const parsedWidth = Utils.numToPx(EditorSize.getWidthWithFallback(editor));

    if (!editor.inline) {
      // Update the width
      if (Css.isValidValue('div', 'width', parsedWidth)) {
        Css.set(outerContainer.element(), 'width', parsedWidth);
      }

      // Update the height
      if (Css.isValidValue('div', 'height', parsedHeight)) {
        Css.set(outerContainer.element(), 'height', parsedHeight);
      } else {
        Css.set(outerContainer.element(), 'height', '200px');
      }
    }

    return parsedHeight;
  };
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / alien / DialogTabHeight.ts View on Github external
maxTabHeight.get().map((height) => {
        // Set the tab view height to 0, so we can calculate the max tabview height, without worrying about overflows
        Css.set(tabview, 'height', '0');
        Css.set(tabview, 'flex-basis', '0');
        return Math.min(height, getMaxTabviewHeight(dialog, tabview, tablist));
      }).each((height) => {
        setTabviewHeight(tabview, height);
github tinymce / tinymce / modules / tinymce / src / themes / mobile / main / ts / ios / view / DeviceZones.ts View on Github external
const updatePadding = function (contentBody, socket, dropup) {
  const greenzoneHeight = getGreenzone(socket, dropup);
  const deltaHeight = (Height.get(socket) + Height.get(dropup)) - greenzoneHeight;
  // TBIO-3878 Changed the element that was receiving the padding from the iframe to the body of the
  // iframe's document. The reasoning for this is that the syncHeight function of IosSetup.js relies on
  // the scrollHeight of the body to set the height of the iframe itself. If we don't set the
  // padding-bottom on the body, the scrollHeight is too short, effectively disappearing the content from view.
  Css.set(contentBody, 'padding-bottom', deltaHeight + 'px');
};
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / alien / DialogTabHeight.ts View on Github external
maxTabHeight.get().map((height) => {
        // Set the tab view height to 0, so we can calculate the max tabview height, without worrying about overflows
        Css.set(tabview, 'height', '0');
        Css.set(tabview, 'flex-basis', '0');
        return Math.min(height, getMaxTabviewHeight(dialog, tabview, tablist));
      }).each((height) => {
        setTabviewHeight(tabview, height);
github tinymce / tinymce / modules / tinymce / src / plugins / table / main / ts / actions / EnforceUnit.ts View on Github external
Arr.each(Traverse.children(tr), (td) => {
        Css.set(td, 'width', calculatePercentageWidth(td, tr));
      });
    });
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / selector / TableSelectorHandles.ts View on Github external
const showOrHideHandle = (selector: AlloyComponent, cell: Element, isAbove: (rect: ClientRect) => boolean, isBelow: (rect: ClientRect, viewportHeight: number) => boolean) => {
    const cellRect = cell.dom().getBoundingClientRect();
    Css.remove(selector.element(), 'display');
    const viewportHeight = Traverse.defaultView(Element.fromDom(editor.getBody())).dom().innerHeight;
    const aboveViewport = isAbove(cellRect);
    const belowViewport = isBelow(cellRect, viewportHeight);
    if (aboveViewport || belowViewport) {
      Css.set(selector.element(), 'display', 'none');
    }
  };
github tinymce / tinymce / modules / tinymce / src / themes / mobile / main / ts / ui / SerialisedDialog.ts View on Github external
Css.getRaw(parent, 'left').each(function (left) {
          const currentLeft = parseInt(left, 10);
          const w = Width.get(screens[0]);
          Css.set(parent, 'left', (currentLeft - (direction * w)) + 'px');
        });
        spec.state.currentScreen.set(spec.state.currentScreen.get() + direction);
github tinymce / tinymce / modules / tinymce / src / plugins / table / main / ts / actions / EnforceUnit.ts View on Github external
Traverse.parent(table).map((parent) => calculatePercentageWidth(table, parent)).each((tablePercentage) => {
    Css.set(table, 'width', tablePercentage);

    Arr.each(SelectorFilter.descendants(table, 'tr'), (tr) => {
      Arr.each(Traverse.children(tr), (td) => {
        Css.set(td, 'width', calculatePercentageWidth(td, tr));
      });
    });
  });
};
github tinymce / tinymce / modules / tinymce / src / themes / mobile / main / ts / ios / core / IosSetup.ts View on Github external
const syncHeight = function () {
    Css.set(contentElement, 'height', contentElement.dom().contentWindow.document.body.scrollHeight + 'px');
  };