TypeScript Css.set方法代码示例

  const setEditorSize = (elm) => {
    // Set height and width if they were given, though height only applies to iframe mode
    const DOM = DOMUtils.DOM;

    const baseWidth = editor.getParam('width', DOM.getStyle(elm, 'width'));
    const baseHeight = getHeightSetting(editor);
    const minWidth = getMinWidthSetting(editor);
    const minHeight = getMinHeightSetting(editor);

    const parsedWidth = Utils.parseToInt(baseWidth).bind((w) => {
      return Utils.numToPx(minWidth.map((mw) => Math.max(w, mw)));
    }).getOr(Utils.numToPx(baseWidth));

    const parsedHeight = Utils.parseToInt(baseHeight).bind((h) => {
      return minHeight.map((mh) => Math.max(h, mh));
    }).getOr(baseHeight);

    const stringWidth = Utils.numToPx(parsedWidth);
    if (Css.isValidValue('div', 'width', stringWidth)) {
      Css.set(outerContainer.element(), 'width', stringWidth);
    }

    if (!editor.inline) {
      const stringHeight = Utils.numToPx(parsedHeight);
      if (Css.isValidValue('div', 'height', stringHeight)) {
        Css.set(outerContainer.element(), 'height', stringHeight);
      } else {
        Css.set(outerContainer.element(), 'height', '200px');
      }
    }

    return parsedHeight;
  };

  const refresh = function () {
    if (isActive) {
      const newToolbarHeight = Height.get(toolbar);
      const dropupHeight = Height.get(dropup);
      const newHeight = deriveViewportHeight(viewport, newToolbarHeight, dropupHeight);
      Attr.set(viewport, yFixedData, newToolbarHeight + 'px');
      Css.set(viewport, 'height', newHeight + 'px');

      Css.set(dropup, 'bottom', -(newToolbarHeight + newHeight + dropupHeight) + 'px');
      DeviceZones.updatePadding(contentBody, viewport, dropup);
    }
  };

        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);
          });
        });

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');
};

 return SelectorFind.descendant(Util.getBody(editor), 'table[data-mce-id="__mce"]').map((table) => {
   if (isPixelsForced(editor)) {
     Css.set(table, 'width', Css.get(table, 'width'));
   }
   Attr.remove(table, 'data-mce-id');
   fireEvents(editor, table);
   selectFirstCellInTable(editor, table);
   return table.dom();
 }).getOr(null);

const populateSegments = (segments: Segment[], entry: Entry): void => {
  for (let i = 0; i < segments.length - 1; i++) {
    Css.set(segments[i].item, 'list-style-type', 'none');
  }
  Arr.last(segments).each((segment) => {
    Attr.setAll(segment.list, entry.listAttributes);
    Attr.setAll(segment.item, entry.itemAttributes);
    InsertAll.append(segment.item, entry.content);
  });
};

const toggleThrobber = (comp: AlloyComponent, state: boolean, providerBackstage: UiFactoryBackstageProviders) => {
  const element = comp.element();
  if (state === true) {
    Replacing.set(comp, [ renderSpinner(providerBackstage) ]);
    Css.remove(element, 'display');
    Attr.remove(element, 'aria-hidden');
  } else {
    Replacing.set(comp, [ ]);
    Css.set(element, 'display', 'none');
    Attr.set(element, 'aria-hidden', 'true');
  }
};

const produce = function (raw: {any}): MobileWebApp {
  const mobile = ValueSchema.asRawOrDie(
    'Getting IosWebapp schema',
    MobileSchema,
    raw
  );

  /* Make the toolbar */
  Css.set(mobile.toolstrip, 'width', '100%');
  Css.set(mobile.container, 'position', 'relative');

  const onView = function () {
    mobile.setReadOnly(mobile.readOnlyOnInit());
    mode.enter();
  };

  const mask = GuiFactory.build(
    TapToEditMask.sketch(onView, mobile.translate)
  );

  mobile.alloy.add(mask);
  const maskApi = {
    show () {
      mobile.alloy.add(mask);
    },
    hide () {
      mobile.alloy.remove(mask);
    }
  };

  const mode = IosMode.create(mobile, maskApi);

  return {
    setReadOnly: mobile.setReadOnly,
    refreshStructure: mode.refreshStructure,
    enter: mode.enter,
    exit: mode.exit,
    destroy: Fun.noop  // TODO: lifecycle hookup
  };
};

 lastAnchor.get().each((anchor) => {
   const elem = lastElement.get().getOr(editor.selection.getNode());
   const nodeBounds = elem.getBoundingClientRect();
   const contentAreaBounds = editor.contentAreaContainer.getBoundingClientRect();
   const aboveEditor = nodeBounds.bottom < 0;
   const belowEditor = nodeBounds.top > contentAreaBounds.height;
   if (aboveEditor || belowEditor) {
     Css.set(contextbar.element(), 'display', 'none');
   } else {
     Css.remove(contextbar.element(), 'display');
     Positioning.positionWithin(sink, anchor, contextbar, getBoxElement());
   }
 });

 const hide = () => {
   if (uiComponents.outerContainer) {
     Css.set(uiComponents.outerContainer.element(), 'display', 'none');
     DOM.removeClass(editor.getBody(), 'mce-edit-focus');
     if (floating) {
       const toolbar = OuterContainer.getToolbar(uiComponents.outerContainer);
       toolbar.each((tb) => {
         const overflow = SplitToolbar.getOverflow(tb);
         overflow.each((overf) => {
           Class.add(overf.element(), 'tox-toolbar__overflow--closed');
         });
       });
     }
   }
 };