TypeScript Css.setAll方法代码示例

const takeoverViewport = function (toolbarHeight, height, viewport) {
  const oldViewportStyle = Attr.get(viewport, 'style');

  Scrollable.register(viewport);
  Css.setAll(viewport, {
    position: 'absolute',
    // I think there a class that does this overflow scrolling touch part
    height: height + 'px',
    width: '100%',
    top: toolbarHeight + 'px'
  });

  Attr.set(viewport, yFixedData, toolbarHeight + 'px');
  Attr.set(viewport, yScrollingData, 'true');
  Attr.set(viewport, yFixedProperty, 'top');

  const restore = function () {
    Scrollable.deregister(viewport);
    Attr.set(viewport, 'style', oldViewportStyle || '');
    Attr.remove(viewport, yFixedData);
    Attr.remove(viewport, yScrollingData);
    Attr.remove(viewport, yFixedProperty);
  };

  return {
    restore
  };
};

 const make = function (rectangle) {
   const span = Element.fromTag('span');
   Classes.add(span, [ Styles.resolve('layer-editor'), Styles.resolve('unfocused-selection') ]);
   Css.setAll(span, {
     left: rectangle.left() + 'px',
     top: rectangle.top() + 'px',
     width: rectangle.width() + 'px',
     height: rectangle.height() + 'px'
   });
   return span;
 };

  const setChromePosition = (toolbar) => {
    // We need to always recalculate the toolbar's position so Docking switches between fixed and
    // absolute correctly. Only recalculating when position: absolute breaks transition on window
    // resize behaviour (chrome gets stuck fixed to the top of the viewport).
    const offset = split ? toolbar.fold(() => 0, (tbar) => {
      // If we have an overflow toolbar, we need to offset the positioning by the height of the overflow toolbar
      return tbar.components().length > 1 ? Height.get(tbar.components()[1].element()) : 0;
    }) : 0;
    Css.setAll(floatContainer.element(), calcPosition(offset));

    // Let Docking handle fixed <-> absolute transitions, etc.
    Docking.refresh(floatContainer);
  };

const input = function (parent, operation) {
  // to capture focus allowing the keyboard to remain open with no 'real' selection
  const input = Element.fromTag('input');
  Css.setAll(input, {
    opacity: '0',
    position: 'absolute',
    top: '-1000px',
    left: '-1000px'
  });
  Insert.append(parent, input);

  Focus.focus(input);
  operation(input);
  Remove.remove(input);
};

const createContainer = function () {
  const container = Element.fromTag('div');

  Css.setAll(container, {
    position: 'static',
    height: '0',
    width: '0',
    padding: '0',
    margin: '0',
    border: '0'
  });

  Insert.append(Body.body(), container);

  return container;
};

    memContainer.getOpt(anyInSystem).each((panel) => {
      const zoom = zoomState.get();

      const panelW = Width.get(panel.element());
      const panelH = Height.get(panel.element());
      const width = img.dom().naturalWidth * zoom;
      const height = img.dom().naturalHeight * zoom;
      const left = Math.max(0, panelW / 2 - width / 2);
      const top = Math.max(0, panelH / 2 - height / 2);

      const css = {
        left: left.toString() + 'px',
        top: top.toString() + 'px',
        width: width.toString() + 'px',
        height: height.toString() + 'px',
        position: 'absolute'
      };

      Css.setAll(img, css);
      memBg.getOpt(panel).each((bg) => {
        Css.setAll(bg.element(), css);
      });

      cropRect.get().each((cRect) => {
        const rect = rectState.get();
        cRect.setRect({
          x: rect.x * zoom + left,
          y: rect.y * zoom + top,
          w: rect.w * zoom,
          h: rect.h * zoom
        });
        cRect.setClampRect({
          x: left,
          y: top,
          w: width,
          h: height
        });
        cRect.setViewPortRect({
          x: 0,
          y: 0,
          w: panelW,
          h: panelH
        });
      });
    });

const createIframeElement = function (id, title, height, customAttrs) {
  const iframe = Element.fromTag('iframe');

  Attr.setAll(iframe, customAttrs);

  Attr.setAll(iframe, {
    id: id + '_ifr',
    frameBorder: '0',
    allowTransparency: 'true',
    title
  });

  Css.setAll(iframe, {
    width: '100%',
    height: normalizeHeight(height),
    display: 'block' // Important for Gecko to render the iframe correctly
  });

  return iframe;
};

const createIframeElement = function (id, title, height, customAttrs) {
  const iframe = Element.fromTag('iframe');

  Attr.setAll(iframe, customAttrs);

  // Workaround WebKit regression in which findFrameNamed: no longer works to find the TinyMCE editor frame by it's ID,
  // because the frame's name is only considered to be set by the name attribute. See: https://bugs.webkit.org/show_bug.cgi?id=187937
  // Need to define "name" below to accommodate it.
  Attr.setAll(iframe, {
    id: id + '_ifr',
    name: id + '_ifr',
    frameBorder: '0',
    allowTransparency: 'true',
    title
  });

  Css.setAll(iframe, {
    width: '100%',
    height: normalizeHeight(height),
    display: 'block' // Important for Gecko to render the iframe correctly
  });

  return iframe;
};