window resize & resize observer

window resize & resize observer

https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event

https://drafts.csswg.org/resize-observer-1/

<canvas id="elipse" style="display:block"></canvas>
<div id="menu" style="display:block;width:100px">
    <img src="hamburger.jpg" style="width:24px;height:24px">
    <p class="title">menu title</p>
</div>

// In response to resize, elipse paints an elipse inside a canvas
document.querySelector('#elipse').handleResize = entry => {
    entry.target.width = entry.borderBoxSize.inlineSize;
    entry.target.height = entry.borderBoxSize.blockSize;
    let rx = Math.floor(entry.target.width / 2);
    let ry = Math.floor(entry.target.height / 2);
    let ctx = entry.target.getContext('2d');
    ctx.beginPath();
    ctx.ellipse(rx, ry, rx, ry, 0, 0, 2 * Math.PI);
    ctx.stroke();
}
// In response to resize, change title visibility depending on width
document.querySelector('#menu').handleResize = entry => {
    let title = entry.target.querySelector(".title")
    if (entry.borderBoxSize.inlineSize < 40)
        title.style.display = "none";
    else
        title.style.display = "inline-block";
}

var ro = new ResizeObserver( entries => {
  for (let entry of entries) {
    let cs = window.getComputedStyle(entry.target);
    console.log('watching element:', entry.target);
    console.log(entry.contentRect.top,' is ', cs.paddingTop);
    console.log(entry.contentRect.left,' is ', cs.paddingLeft);
    console.log(entry.borderBoxSize.inlineSize,' is ', cs.width);
    console.log(entry.borderBoxSize.blockSize,' is ', cs.height);
    if (entry.target.handleResize)
        entry.target.handleResize(entry);
  }
});
ro.observe(document.querySelector('#elipse'));
ro.observe(document.querySelector('#menu'));

css resize

https://developer.mozilla.org/en-US/docs/Web/CSS/resize

js resize

https://codepen.io/xgqfrms/pen/dyyWrWb

react demo

import React, {
  useState,
  useEffect,
} from 'react';

import "./index.css";

import ChartTooltip from "./ChartTooltip";
import ChartBar from "./ChartBar";
import ChartPercentage from "./ChartPercentage";

const ChartBox = (props) => {
  const {
    isFirst,
    data,
    refClick,
  } = props;
  const barClick = () => {
    const width = refClick();
    console.log(`click width`, width);
    setWidth(width);
  };
  const [width, setWidth] = useState(0);
  useEffect(() => {
    let width = refClick();
    setWidth(width);
    function reportWindowSize() {
      console.log(`reszie`);
      let width = refClick();
      setWidth(width);
    }
    window.onresize = reportWindowSize;
  }, [refClick]);

  return(
    <>
     <div className="funnel-chart-box" onClick={() => barClick()}>
       <ChartTooltip data={data}>
          <ChartBar
            data={data}
            isBase={isFirst}
            base={width}
            // base={barWidth}
          />
          <ChartPercentage data={data} />
        </ChartTooltip>
        {/* <ChartBar
          data={data}
          isBase={isFirst}
          base={width}
          // base={barWidth}
        />
        <ChartPercentage data={data} /> */}
     </div>
    </>
  );
};

export default ChartBox;

Mutation Observer

https://javascript.ruanyifeng.com/dom/mutationobserver.html

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

https://codepen.io/xgqfrms/pen/eYYRwRM

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---