How to use the @ephox/sugar.Css.remove 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
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);

          // 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(dialog, tabview, maxTabHeight);
          });
        });
      }),
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / alien / DialogTabHeight.ts View on Github external
const setTabviewHeight = (tabview: Element, height: number) => {
  // Set both height and flex-basis as some browsers don't support flex-basis. However don't set it on
  // IE 11 since it incorrectly includes margins in the flex-basis calculations so it can't be relied on.
  Css.set(tabview, 'height', height + 'px');
  if (!PlatformDetection.detect().browser.isIE()) {
    Css.set(tabview, 'flex-basis', height + 'px');
  } else {
    Css.remove(tabview, 'flex-basis');
  }
};
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / modes / Inline.ts View on Github external
const show = () => {
    Css.set(uiComponents.outerContainer.element(), 'display', 'flex');
    DOM.addClass(editor.getBody(), 'mce-edit-focus');
    Css.remove(uiComponents.uiMothership.element(), 'display');
    updateChromeUi();
  };
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / header / StickyHeader.ts View on Github external
Traverse.parent(elm).each((parentElem: Element) => {
    if (Docking.isDocked(header)) {
      const parentWidth = Width.get(parentElem);
      Css.set(elm, 'width', parentWidth + 'px');
      const headerHeight = Height.getOuter(elm);
      Css.set(parentElem, 'padding-top', headerHeight + 'px');
    } else {
      Css.remove(elm, 'width');
      Css.remove(parentElem, 'padding-top');
    }
  });
};
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / header / StickyHeader.ts View on Github external
Traverse.parent(elm).each((parentElem: Element) => {
    if (Docking.isDocked(header)) {
      const parentWidth = Width.get(parentElem);
      Css.set(elm, 'width', parentWidth + 'px');
      const headerHeight = Height.getOuter(elm);
      Css.set(parentElem, 'padding-top', headerHeight + 'px');
    } else {
      Css.remove(elm, 'width');
      Css.remove(parentElem, 'padding-top');
    }
  });
};
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 / alloy / src / main / ts / ephox / alloy / behaviour / docking / DockingApis.ts View on Github external
  Arr.each([ 'left', 'top', 'position' ], (prop) => Css.remove(component.element(), prop));
  config.onUndocked(component);
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / alien / DialogTabHeight.ts View on Github external
getTabview(dialog).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');
          Css.remove(tabview, 'flex-basis');
          const newHeight = tabview.dom().getBoundingClientRect().height;
          const hasGrown = oldHeight.forall((h) => newHeight > h);

          if (hasGrown) {
            maxTabHeight.set(Option.from(newHeight));
            updateTabviewHeight(dialog, tabview, maxTabHeight);
          } else {
            oldHeight.each((h) => {
              setTabviewHeight(tabview, h);
            });
          }

          Css.remove(tabview, 'visibility');
          oldFocus.each(Focus.focus);
        });
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / alien / DialogTabHeight.ts View on Github external
getTabview(dialog).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');
          Css.remove(tabview, 'flex-basis');
          const newHeight = tabview.dom().getBoundingClientRect().height;
          const hasGrown = oldHeight.forall((h) => newHeight > h);

          if (hasGrown) {
            maxTabHeight.set(Option.from(newHeight));
            updateTabviewHeight(dialog, tabview, maxTabHeight);
          } else {
            oldHeight.each((h) => {
              setTabviewHeight(tabview, h);
            });
          }

          Css.remove(tabview, 'visibility');
          oldFocus.each(Focus.focus);
        });
      })
github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ContextToolbar.ts View on Github external
lastAnchor.get().each((anchor) => {
      const contextBarEle = contextbar.element();
      Css.remove(contextBarEle, 'display');
      if (shouldContextToolbarHide()) {
        Css.set(contextBarEle, 'display', 'none');
      } else {
        Positioning.positionWithinBounds(sink, anchor, contextbar, Option.some(getBounds()));
      }
    });
  };