Category: javascript

I’m working on a real-time graph created with HTML, CSS, and JS. I’m showing the time label every 30 seconds. When zoomed in, I want the labels that are normally not visible to appear, but I couldn’t achieve this. I’m sharing the relevant code for the graph below, along with two example images, one without zoom and the other with zoom.

function formatTime(seconds) {
    if (seconds < 60) {
        if (seconds % 30 === 0) {
            return '0:' + ('0' + seconds).slice(-2); // Format as "0:SS"
        } else {
            return ''; // Format as "M:SS"
        }

    } else {
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = seconds % 60;
        if (remainingSeconds % 30 === 0 || remainingSeconds == 0) {
            return minutes + ':' + ('0' + remainingSeconds).slice(-2); // Format as "M:SS"
        } else {
            return ''; // Format as "M:SS"
        }

    }
}

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [], // Time labels or categories
        datasets: [{
            label: 'Giriş hava sıcaklığı',
            data: [], // Data points for the first dataset
            backgroundColor: 'rgba(0, 123, 255, 0.5)',
            borderColor: 'rgba(0, 123, 255, 1)',
            borderWidth: 1,
            fill: false,
            pointRadius: 0
        },
        {
            label: 'Hazne sıcaklığı',
            data: [], // Data points for the second dataset
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1,
            fill: false,
            pointRadius: 0
        },
        {
            label: 'İlk Çatlama',
            data: [], // Data points for the third dataset
            backgroundColor: 'rgba(0, 255, 0, 0.5)',
            borderColor: 'green',
            fill: true,
            pointRadius: 0
        }]
    },
    options: {
        scales: {
            y: [{
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Sıcaklık'
                },
                ticks: {
                    beginAtZero: true
                }
            }],
            x: [{
                type: 'time',
                time: {
                    parser: 'mm:ss',
                    unit: 'second',
                    stepSize: 30,
                    displayFormats: {
                        second: 'm:ss'
                    },
                    tooltipFormat: 'm:ss'
                },
                title: {
                    display: true,
                    text: 'Zaman (MM:SS)'
                },
                ticks: {
                    autoSkip: true,
                    maxTicksLimit: 20,
                    callback: function (value, index, values) {
                        const totalSeconds = moment.duration(value).asSeconds();
                        return formatTime(totalSeconds);
                    }
                }
            }]
        },
        plugins: {
            zoom: {
                pan: {
                    enabled: true,
                    mode: 'x'
                },
                zoom: {
                    wheel: {
                        enabled: true
                    },
                    pinch: {
                        enabled: true
                    },
                    mode: 'x'
                }
            }
        }
    }
});

is there any way to change the opacity of an image inside kmz?
i use https://github.com/Raruto/leaflet-kmz to load the kmz

markerLocation.on("click", () => {
  try {
    map.setView(markerLocation.getLatLng(), 10);

    const baseURL = `localhost`;
    const kmzFilePath = baseURL + kmz;
    if (!kmzLayerShown) {
      kmzLayer = new L.KMZLayer(kmzFilePath).addTo(map);
      kmzLayerShown = true;
    } else {
      map.removeLayer(kmzLayer);
      kmzLayerShown = false;
    }
  } catch (error) {
    console.error("Error:", error);
  }
});

i tried this, but not work

if (!kmzLayerShown) {
  kmzLayer = new L.KMZLayer(kmzFilePath).addTo(map);

  kmzLayer.on("load", function () {
    kmzLayer.eachLayer(function (layer) {
      if (layer instanceof L.ImageOverlay) {
        layer.setOpacity(0.5); // Set opacity to 50%
      }
    });
  });

  kmzLayerShown = true;
}

Ok so I have a file with:

module.exports = {
    some variables that i am exporting here,
    execute(message) {

    }
}

I would like to export the message parameter to a different file.

I have tried to use var msg outside the module.exports and then using msg = message inside the execute function but on exporting this (from outside the execute function just before module.exports closes) I get its value to always be undefined (when I console.log it from another file) despite this value being correct inside the execute block. Please help

https://jsfiddle.net/insin/cmewv/

This is the original JSfiddle

The original JSfiddle allows me to dynamically create a download button for the HTML table as excel format;
however it calls from a function.

I’d like to change this in an inline method so it doesn’t need to call the function
like so

https://jsfiddle.net/ekj40bLu/

Thank you for all the help in advance.

Somehow I can’t get the idea how to change URI as inline way, any help would be much appreciated

 <input type="button" onclick="(function(){

    content of javascript from the function
            
            return false;
        })();return false;
        " value="Export to Excel">

I am trying to import a type definition from a module in JSDoc into my SvelteKit application.

This is the TypeScript code I’m trying to implement as JS/JSDoc:

import type { PostgreSqlDriver } from '@mikro-orm/postgresql'; // or any other driver package

const orm = await MikroORM.init<PostgreSqlDriver>({
  entities: ['./dist/entities'], // path to our JS entities (dist), relative to `baseDir`
  entitiesTs: ['./src/entities'], // path to our TS entities (src), relative to `baseDir`
  dbName: 'my-db-name',
  type: 'postgresql',
});
console.log(orm.em); // access EntityManager via `em` property

(Taken from https://mikro-orm.io/docs/5.9/installation)

Here’s what I have so far, VS Code errors as inline comments

import { MikroORM } from '@mikro-orm/core';

/** @type {import("@mikro-orm/postgresql").PostgreSqlDriver } */

/** @type {PostgreSqlDriver } */ // Cannot find name 'PostgreSqlDriver'.ts(2304)
export const orm = await MikroORM.init({
    dbName: 'my-db-name',
    type: 'postgresql',
});

I have an sdk that needs to lazily load a component and its skeleton.So I implemented code like:

const lazySkeleton = React.lazy(() => import('@my-sdk/skeleton'));
const lazyComponent = React.lazy(() => import('@my-sdk/component'));

const skeletonWithFallback = <Suspense fallback={null}>
<lazySkeleton />
</Suspense>

<Suspense fallback={skeletonWithFallback}>
    <lazyComponent />
</Suspense>

But after going online, I received occasional errors: Minified React error #130, I’m not sure what went wrong and how to fix it.

Can anyone help me with that?

Currently, my pathIcon move follow the path-svg with center screen.

My issues: When i resize the screen, path-svg (notes: i set witdh and height of svg is vw unit to easy resize) has a new size and then the pathIcon dont move follow along the path-svg when i scroll down, but it moves along the old path instead.

What I want : i want to the pathicon always in the midline at the first time reload. And when i resize screen, the pathIcon always move along the path-svg.

  let svg = document.querySelector(".svg-path");
      let mPath = document.getElementById("Path_440");
      let strokePath = document.getElementById("theFill");
      let pathIcon = document.getElementById("pathIcon");

      // add offset path based on svg
      pathIcon.style.offsetPath = `path('${mPath.getAttribute("d")}')`;

      // steps for pathlength lookup
      let precision = 1000;

      // get transform matrix to translate svg units to screen coordinates
      let matrix = svg.getScreenCTM();

      function getLengthLookup(path, precision = 100) {
        //create pathlength lookup
        let pathLength = path.getTotalLength();
        let lengthLookup = {
          yArr: [],
          lengthArr: [],
          pathLength: pathLength,
        };

        // sample point to calculate Y at pathLengths
        let step = Math.floor(pathLength / precision);

        for (let l = 0; l < pathLength; l += step) {
          let pt = SVGToScreen(matrix, path.getPointAtLength(l));
          let y = pt.y;
          lengthLookup.yArr.push(y);
          lengthLookup.lengthArr.push(l);
        }
        return lengthLookup;
      }

      const lengthLookup = getLengthLookup(mPath, precision);
      const { lengthArr, yArr, pathLength } = lengthLookup;
      const maxHeight =
        document.documentElement.scrollHeight - window.innerHeight;

      window.addEventListener("scroll", (e) => {
        let scrollPosMid = getViewportMiddleY();
        midline.style.top = scrollPosMid + "px";

        // get y pos length
        let found = false;

        for (let i = 0; i < yArr.length && !found; i++) {
          // find next largest y in lookup
          let y = yArr[i];
          if (y >= scrollPosMid) {
            let length = lengthArr[i];

            // adjust length via interpolated approximation
            let yPrev = yArr[i - 1] ? yArr[i - 1] : yArr[i];
            let lengthPrev = lengthArr[i - 1] ? lengthArr[i - 1] : length;
            let ratioL = (1 / lengthArr[i]) * lengthPrev;
            let ratioY = (1 / y) * scrollPosMid;
            let ratio = Math.max(ratioL, ratioY);

            let dashLength = lengthArr[i] * ratio;

            // calculate offsetDistance
            let offsetDist = (100 / pathLength) * dashLength;
            pathIcon.style.offsetDistance = offsetDist + "%";

            // change dasharray
            strokePath.setAttribute(
              "stroke-dasharray",
              `${dashLength} ${pathLength}`
            );

            // stop loop
            found = true;
          }
        }
      });

      /**
       * Get the absolute center/middle y-coordinate
       * of the current scroll viewport
       */
      function getViewportMiddleY() {
        const viewportHeight = window.innerHeight;
        const scrollY = window.scrollY || window.pageYOffset;
        const element = document.documentElement;
        const elementOffsetTop = element.offsetTop;
        const middleY = scrollY + viewportHeight / 2 + elementOffsetTop;
        return middleY;
      }


      function SVGToScreen(matrix, pt) {
        let p = new DOMPoint(pt.x, pt.y);
        p = p.matrixTransform(matrix);
        return p;
      }

    .svg-path {
      overflow: visible;
      width: 93vw;
      height: 159vw;
    }

    #pathIcon {
      position: absolute;
      inset: 0;
      width: 100px;
      height: 200px;
      background-size: 25px;
      offset-rotate: 0rad;
      transition: 0.2s;
      offset-distance: 0%;
    }

    #Path_440 {
      stroke-width: 2;
      stroke: #001d36;
    }

    #midline {
      display: block;
      position: absolute;
      width: 100%;
      height: 1px;
      border-top: 1px solid orange;
    }

    <div style="height: 175px"></div>
    <div id="scrollDiv" style="position: relative">
      <svg class="svg-path" viewBox="0 0 1783 3038" fill="none">
        <defs>
          <path
            id="Path_440"
            d="M1292 1C1292 1 1276 75.4667 1196 92.5C1104.55 111.972 887.329 90.0678 771.5 99.5C544.5 99.5 301.61 124.941 278 294.5C267 373.5 264.112 418.83 267 502C269.888 585.17 268.896 644.646 304 740C345.771 853.462 769 837.5 1093.5 831C1365 841.5 1675.02 791 1765 1010C1802.18 1100.5 1765 1456.5 1765 1492.5C1765 1560 1695 1612.5 1617 1626.5C1464 1626.5 1187.11 1631.5 1002.5 1631.5C731.5 1631.5 368.526 1604.69 311 1716.5C270.612 1795 275 1919 275 1981C276.117 2073.28 271.553 2143.17 311 2257C338.857 2337.39 720.155 2323.5 980 2323.5C1296 2323.5 1676.34 2306.5 1738.5 2402.5C1792.57 2486 1771.73 2615.18 1771.73 2764C1771.73 2892 1769.73 2996.5 1651 3031C1611.67 3042.43 1236 3031 892 3031C404.5 3031 1 3029 1 3029"
            stroke="#020878"
            stroke-width="2"
            stroke-miterlimit="10"
            stroke-linecap="round"
            stroke-dasharray="20 20"
          />
        </defs>
        <use href="#Path_440" stroke-width="10" stroke-dasharray="20 10"></use>
        <use
          id="theFill"
          href="#Path_440"
          stroke-dasharray="1991.82, 9259.88"
          stroke-width="10"
          stroke="#4cacff"
        ></use>
      </svg>
      <svg
        id="pathIcon"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <rect width="100" height="200" fill="url(#pattern0)" />
        <defs>
          <pattern
            id="pattern0"
            patternContentUnits="objectBoundingBox"
            width="1"
            height="1"
          >
            <use
              xlink:href="#image0_873_8619"
              transform="scale(0.00353357 0.00176678)"
            />
          </pattern>
          <image
            id="image0_873_8619"
            width="283"
            height="566"
            xlink:href="data:image/png;base64,iVBORw0KGgoAAAA"
          />
        </defs>
      </svg>
    </div>

    <div id="midline"></div>

i tried to calculate new path-svg when i resize screen but it doesn’t exactly perform what I need. I’m not sure if the issue I identified is correct or not.

How can I catch JS Eror messages using the automatic driver that comes with Selenium 4? And in order to use this in all my tests, should I define the test in @AfterEach? Or can everything be recorded automatically with a test class we wrote? What do I need to do in Junit5 to store incoming reports?I am sharing the driver class I use with you in case it may contribute to the solution.enter image description here Thank you for all your help, good work

When I examined the previous answers to similar problems, I saw that these solutions were for before selenium4. For example, I know that there is no need to define drivers separately with Selenium4. I think that’s why I failed when I tried to apply the previous methods.When I examined the previous answers to similar problems, I saw that these solutions were for before selenium4. For example, I know that there is no need to define drivers separately with Selenium4. I think that’s why I failed when I tried to apply the previous methods.

For example, if a user input his name in the form field and click the submit button, then I can get from the library with the code:

$("#name")[0].value = 'Jack'; $("#submit")[0].click();

And this code should be runnable in the chrome console to reappear the user action.

we want to make some tools to help the team to do some automatic work with chrome extension, something like auto complete the form or else actions. However there are many different types of web pages and most of them are third party, if we manually write the js script one by one, that will bring us a lot of effort, we need to check every document element id and dispatch the event.

So we thought if there are some tools already implement this feature, we just need to do it once manually and we can get the code.

I have a plane in a three JS scene with a certain position and rotation.
I am sending a raycast towards this plane, and then I am in essence projecting an object towards it. It has worked great until I noticed that the projection gets turned upside down in firefox, but not in chromium.

This causes quite a lot of problems for me, and it seems like it boils down to a rounding error when the mesh is updating the matrix.

Here is an example that highlights the issue

const test = new THREE.Mesh(new THREE.PlaneGeometry(), new THREE.MeshBasicMaterial());
test.position.copy(new THREE.Vector3(-0.0800582263098657,0,-0.003907569688712309))
test.rotation.copy(new THREE.Euler(-1.5707963267948966,0,0, "XYZ"))
test.updateMatrix()
const asString = `[${test.matrix.elements.join(",")}]`
const chromeString = "[1,0,0,0,0,2.220446049250313e-16,-1,0,0,1,2.220446049250313e-16,0,-0.0800582263098657,0,-0.003907569688712309,1]"
console.log(`
${asString}
${chromeString}
${asString === chromeString ? "equal" : "not equal"}
`)

as you might assume, this prints equal for chromium, but not firefox.
The diff that I am seeing is for example that the fifth element changes sign on firefox… since it is e-16 it is not a large difference, but the sign change causes the projection to turn upside down.

I have tried setting the matrix manually (turning of the matrixAutoUpdate) to the chrome result, and that fixes the issue for firefox, so I am quite certain that it boils down to this calculation.

I guess the question is:
Can I change anything to make the calculations the same? I am OK with loosing some precision if I gain consistency across browsers

I’m trying to solve reCAPTCHA in Puppeteer using this free API https://rapidapi.com/Glavier/api/2captcha4. Can anyone please help me to do that? It’s not solving CAPTCHA and doesn’t give any error. I can’t find any straight docs to do that using this API.

const puppeteer = require('puppeteer');
const axios = require('axios');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto('https://www.google.com/recaptcha/api2/demo');

  await page.waitForSelector('.recaptcha-checkbox-border');

  await page.click('.recaptcha-checkbox-border');

  const siteKey = await page.evaluate(() => {
    const recaptchaScript = Array.from(document.querySelectorAll('script')).find(
      (script) => script.src.includes('recaptcha/__en')
    );
    const siteKeyMatch = recaptchaScript.src.match(/render=(.+)/);
    return siteKeyMatch[1];
  });


  const options = {
    method: 'GET',
    url: 'https://2captcha4.p.rapidapi.com/recaptcha/v2',
    params: {
      google_key: siteKey,
      page_url: page.url(),
    },
    headers: {
      'X-RapidAPI-Key': 'ffc385462amsh47a1a6592c60fc8p1436bejsnc0b892b3c306',
      'X-RapidAPI-Host': '2captcha4.p.rapidapi.com',
    },
  };

try {
    const response = await axios.request(options);
    const captchaResponse = response.data.captcha_response;

    await page.evaluate((captchaResponse) => {
      const recaptchaInput = document.getElementById('g-recaptcha-response');
      recaptchaInput.value = captchaResponse;
      const recaptchaSubmit = document.getElementById('recaptcha-submit');
      recaptchaSubmit.click();
    }, captchaResponse);

    console.log('reCAPTCHA solved!');
  } catch (error) {
    console.error(error);
  }

  await browser.close();
})();

I wanted to ask if it’s possible to prevent creation of multiple regions. My application works like this:

When a user creates a region by dragging using enableDragSelection() method, he clicks on it and then performs some action.
However, if he doesn’t click on it, I want the previous region to be removed (which wasn’t clicked on) and retaining only the new region which he created by dragging again.
One approach that I have thought of is, to set a couple of variable values to true/false, given that user creates a region using region-created event, but does not click on it (which can be found out using region-clicked event). I want to ensure that a user clicks on a region after creating it, and if he does not click on it and attempts to create another region, the previous region gets removed.
Hope that makes sense. Is there any way to do this?
Code:

let flag = false;
let currentRegion = null;
let previousRegion = null;

wsRegions.on('region-created', function(region) {
    // Set the current region
    currentRegion = region;

    // If there's a previous region, remove it
    if (previousRegion) {
        previousRegion.remove();
    }

    // Set the current region as the previous region for the next iteration
    previousRegion = currentRegion;
    if (flag == true) {
        // If region creation is not allowed, remove the last created region
        region.remove();
    }
});

wsRegions.on('region-clicked', (region) => {
    flag = true;
        // If the clicked region is not the current region, remove the current region
        if (region !== currentRegion) {
            currentRegion.remove();
        }
    
    currentRegion = region;
    showPopup(currentRegion);
    
});

this is a list of items each one contain an image i want to display the placeholder until the image in that card is loaded what is the condition in the @defer() to make it

@for (item of places; track $index) {
    @defer (){
    <div [routerLink]="['/place/'+item.id]" class="row item container-fluid py-2" style="cursor: pointer;">
        <div class="col-lg-4">
            <img style="height: 250px;" src="{{item.image}}" alt="">
        </div>
        <div class="col-lg-8 pt-4">
            <h4>{{item.name}}</h4>
            <h5 class="text-secondary">{{item.adress}}</h5>
            <h6 class="text-secondary">
                {{item.bio| truncate:200 }}

            </h6>
            <div class="d-flex align-items-center">
                <p class="fw-bold m-0 me-2">{{calculateAverageRate(item)| number:'1.1-1'}}/5</p>
                <div class="rating">
                    <input value="5" name="rating" id="star5" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=5? '#6f00ff' : '#acacac'" for="star5"></label>
                    <input value="4" name="rating" id="star4" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=4? '#6f00ff' : '#acacac'" for="star4"></label>
                    <input value="3" name="rating" id="star3" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=3? '#6f00ff' : '#acacac'" for="star3"></label>
                    <input value="2" name="rating" id="star2" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=2? '#6f00ff' : '#acacac'" for="star2"></label>
                    <input value="1" name="rating" id="star1" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=1? '#6f00ff' : '#acacac'" for="star1"></label>
                </div>
            </div>

        </div>
    </div>}
    @placeholder {
<div>placeholder </div>
    }

the defer condition is empty in my code what is the condition to fill it

I want to Export excel data which is containing words styles in columns or rows as same text color, strokes, text weight, background color like everything should be uploaded into my database, especially in salesforce through Visualforce page or Lwc Component.

I tried import a Excel js library, but i couldn’t giving result as expected.

I am learning React JS and new to it.
I have following code to integrate one tap sign in with phone (From Phone.Email) on my website.

<div id="pheIncludedContent"></div>
<script src="https://auth.phone.email/login_automated_v1_2.js"></script>
<script>
  var reqJson='{"success_url":"","client_id":"XXXXXXXXXXXXXXXXX","button_text":"Sign in with Phone","email_notification":"icon","button_position":"left"}';
log_in_with_phone(reqJson);
</script>

I am trying to convert it into React JS code and trying to integrate it on my website.
Following is my React JS component code

import React, { useEffect } from 'react';

const SigninPhone = () => {
  useEffect(() => {
    // Create a script element
    const script = document.createElement('script');
    
    // Set the src attribute to the external script URL
    script.src = 'https://auth.phone.email/login_automated_v1_2.js';
    
    // Append the script element to the document body
    document.body.appendChild(script);
    
    // Define the request JSON object
    const reqJson = {
      success_url: '',
      client_id: 'XXXXXXXXXXXXXXXXX',
      button_text: 'Sign in with Phone',
      email_notification: 'icon',
      button_position: 'left'
    };
    
    // Call the log_in_with_phone function with the request JSON object
    window.log_in_with_phone(JSON.stringify(reqJson));

    // Clean up function to remove the script element when the component unmounts
    return () => {
      document.body.removeChild(script);
    };
  }, []); // Empty dependency array to ensure useEffect runs only once

  return <div id="pheIncludedContent"></div>;
};

export default SigninPhone;

But I am getting error like “Uncaught TypeError: window.log_in_with_phone is not a function”
log_in_with_phone function is inside https://auth.phone.email/login_automated_v1_2.js this script.

Please help me to solve this problem