• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Script work in a specific area

altrikx

New Coder
Hi, I'm not a programmer, so I need help, I will be very grateful!
There is a script and you need it to work only in a certain part of the page. This site is built on the readymag constructor, where the creation of a new page is attached vertically to the previous one and creates a longread. So I need the script to work only on https://readymag.com/u893338465/3151584/2/. I already tried to add data id to it, but it didn't work out very well. The constructor has a restriction on the use of code, I can only insert code into sections like </body>, so a ready-made solution is needed. Many thanks for the help!
If its possible only this area to cover
Снимок экрана 2021-10-09 в 22.33.34.png
My version of script ( doesn't work well)
Code:
<script>
let renderContainer, canvas, context, container;
 
const updateContextSize = () => {
  if (canvas) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
};
document.addEventListener("DOMContentLoaded", () => {
  setTimeout(() => {
    if (RM.viewerRouter && RM.viewerRouter.mag.getMagViewport() === "default") {
      renderTorch();
    } else if (RM.constructorRouter) {
      RM.constructorRouter.on("previewMag:load:success", (preview) => {
        if (preview.mag.getMagViewport() === "default") {
          renderTorch();
        }
      });
    }
    window.addEventListener("resize", updateContextSize);
  }, 1000);
});
const renderTorch = () => {
  // parameters
  const radius = 150;
  const backgroundColor = "rgba(0,0,0,0.8)";
  let x = -200,
    y = -200;
  //tanded
  container = document.querySelector(
    "div[data-id='615ee0fc7c076700144a2f25']"
  );
  container.style.position = "absolute";
  //end tanded
  // init
  renderContainer = document.createElement("div");
  renderContainer.setAttribute("id", "render-container");
  renderContainer.setAttribute(
    "style",
    "pointer-events: none; position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent;" //pos absoliute
  );
  container.appendChild(renderContainer);
  canvas = document.createElement("canvas");
  canvas.setAttribute("id", "render-canvas");
  renderContainer.appendChild(canvas);
  context = canvas.getContext("2d");
  context.canvas.width = window.innerWidth;
  context.canvas.height = window.innerHeight;
  // Fill bg
  context.fillStyle = backgroundColor;
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  // Mouse event
  container.addEventListener("mousemove", (event) => {
    x = event.clientX;
    y = event.clientY;
  });
  const draw = () => {
    requestAnimationFrame(draw);
    // first reset the gCO
    context.globalCompositeOperation = "source-over";
    // Fill bg
    context.fillStyle = backgroundColor;
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.beginPath();
    radialGradient = context.createRadialGradient(x, y, 1, x, y, radius);
    radialGradient.addColorStop(0, "rgba(255,255,255,1)");
    radialGradient.addColorStop(1, "rgba(0,0,0,0)");
    context.globalCompositeOperation = "destination-out";
    context.fillStyle = radialGradient;
    context.arc(x, y, radius, 0, Math.PI * 2, false);
    context.fill();
    context.closePath();
  };
  requestAnimationFrame(draw);
};
  </script>

Original version

Code:
<script>
let renderContainer, canvas, context;
const updateContextSize = () => {
  if (canvas) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
};
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    if (RM.viewerRouter && RM.viewerRouter.mag.getMagViewport() === 'default') {
      renderTorch();
    } else if (RM.constructorRouter) {
      RM.constructorRouter.on('previewMag:load:success', (preview) => {
        if (preview.mag.getMagViewport() === 'default') {
            renderTorch();
        }
      });
    }
    window.addEventListener('resize', updateContextSize);
  }, 1000);
});
const renderTorch = () => {
  // parameters
  const radius = 150;
  const backgroundColor = 'rgba(0,0,0,0.8)';
  let x = -200, y = -200;
  // init
  renderContainer = document.createElement('div');
  renderContainer.setAttribute('id', 'render-container');
  renderContainer.setAttribute("style", "pointer-events: none; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent;");
  document.body.appendChild(renderContainer);
  canvas = document.createElement('canvas');
  canvas.setAttribute('id', 'render-canvas');
  renderContainer.appendChild(canvas);
  context = canvas.getContext('2d');
  context.canvas.width = window.innerWidth;
  context.canvas.height = window.innerHeight;
  // Fill bg
  context.fillStyle = backgroundColor;
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  // Mouse event
  document.addEventListener('mousemove', (event) => {
    x = event.clientX;
    y = event.clientY;
  });
  const draw = () => {
    requestAnimationFrame(draw);
    // first reset the gCO
    context.globalCompositeOperation = 'source-over';
    // Fill bg
    context.fillStyle = backgroundColor;
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.beginPath();
    radialGradient = context.createRadialGradient(x, y, 1, x, y, radius);
    radialGradient.addColorStop(0, 'rgba(255,255,255,1)');
    radialGradient.addColorStop(1, 'rgba(0,0,0,0)');
    context.globalCompositeOperation = 'destination-out';
    context.fillStyle = radialGradient;
    context.arc(x, y, radius, 0, Math.PI * 2, false);
    context.fill();
    context.closePath();
  };
  requestAnimationFrame(draw);
};
</script>
 

Top