Category: javascript

Using AmCharts 5 in react application to display the US geographic. I can able to view the states in US Geography, but unable to add the state name to the map. But on hovering of the state, i can able to display the state name in the tooltip. Is there a way to add the state name to any Geographic in amCharts5

import React, { useEffect } from 'react';
import * as am5 from '@amcharts/amcharts5';
import * as am5maps from '@amcharts/amcharts5/map';
import usaHigh from "@amcharts/amcharts5-geodata/usaHigh";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

const MapChart = () => {
  useEffect(() => {
    // Create root element
    let root = am5.Root.new("mapDiv");

    // Set themes
    root.setThemes([am5themes_Animated.new(root)]);

    let chart = root.container.children.push(
        am5maps.MapChart.new(root, {
          projection: am5maps.geoAlbersUsa(),
          maxZoomLevel: 16,
          minZoomLevel: 1,
          zoomStep: 1.2,
        })
      );
    const polygonSeries = chart.series.push(
      am5maps.MapPolygonSeries.new(root, {
        geoJSON: usaHigh
      })
    );

    polygonSeries.mapPolygons.template.setAll({
      tooltipText: "{name}",
      templateField: "polygonSettings",
    });
     }, []);

return <div  id="mapDiv" style={{ width: "100%", height: "500px" }}></div>;
};

I am trying to build a script that automatically looks for low float items on steam community market and if it was found for the specified amount make that purchase. I have seen some NPM packages for using steam but it wasn’t exactly what I was trying to do. If you have any ideas where to start and what can be done to achieve this please let me know.

I tried searching for some packages that would do similar things, but I couldn’t find any.

The footer briefly flashes or collapses when switching routes, but only if the page is scrolled down to somewhere around the middle of a page. If I’m at the top of the page, the route transition works fine. This issue is more noticeable on high refresh rate monitors (e.g., 144-240+Hz). I’m not sure if this is a bug with the Nuxt layout or something else.

Here’s the layout:

<template>
  <div>
    <AppHeader />

    <div>
      <slot />
    </div>

    <AppFooter />
  </div>
</template>

Reproduction:
https://stackblitz.com/edit/nuxt-starter-pr83oe?file=app%2Fcomponents%2FAppHeader.vue

Looking for a possible solution.

I am using Vitest for testing and would like it to fail fast upon first error. The reason is that I’m using it within git bisect and don’t need to waste time on the whole test run once there is an error.

I haven’t found an equivalent in Vitest. How can I configure Vitest or work around this to achieve similar functionality?

I am on Next.js 14 and want to block a very specific cookie example coming from origin example.xyz.

Surprisingly, I did not find anything online about this, but I am certain I should be able to block such cookie from being sent to my users?

Thanks!

I have this very odd issue I’ve come across on my WordPress site. First of I should mention that I am using mmenus.js, geotargetingwp and lscache as a combination. On the site I use geotargeting to display different content for different countries.

This works well in general and I have never experienced any issues. For example, visiting from UK, Canada, Germany, Norway, Finland and so on, all works well and it geotargets as it should.

However, when visiting from France, I’ve noticed that:

A) it doesn’t always geotarget properly (for example, it will display elements that should not be displayed) and it happens randomly on different pages.

B) randomly, some pages will have the login and register buttons missing from the menu.

With some help from the plugin author of geotargetingwp, at least I think we got problem A fixed by adding this code to functions.php:

//disable bot detection geot
add_filter(‘geot/enable_crawl_detection’,’__return_false’);

His idea was that bots visiting from France might be causing the issue.

Problem B still persists. When I clear cache, it all looks good for the day. However, on the next day, the problem appears again.

To me it seems to be a caching issue as clearing cache or deactivating cache temporarily fixes the problem, but I am baffled as to why it would only happen when visiting from France.

I have checked the console on Chrome and Firefox and see no direct issues or particular errors that would be causing this.

We’re all completely lost as to why this is happening. I tried searching Stack Overflow and the closest thing I could find was this and something about crone job: WordPress Nav Menu page items disappearing randomly

At this point, I am not sure what to try except for clearing cache or deactivating it. However, this is only a temporary solution.

The plugin authors of both geotargetingwp and lscache are both unable to pinpoint the issue.

There’s the variable containerdom with a DIV inside which my widget is rendered. I attach a callback function to the widget’s “render” event. In the callback I call containerdom.querySelector() to get the widget element that was just rendered.

Sometimes, usually after restarting Firefox, querySelector() returns null, but if I add a conditional breakpoint when it’s null and re-inspect containerdom and call querySelector() again it returns the element this time.

    treetabledom = containerdom.querySelector('.widget-treetable-wrapper');
    if (!treetabledom) {
        console.info(containerdom.outerHTML); // missing
        debugger;
        console.info(containerdom.outerHTML); // present
        var treetabledom2 = containerdom.querySelector('.widget-treetable-wrapper');
        treetabledom = treetabledom2;
    }

What’s causing it and how to fix this?

export const timerWorker = () => {
    let timerStart = false;
    let intervalId = null;
    let timeLeft = 0;
    
    self.onmessage = (e) => {
        const { data = {} } = e;
        const { action, payload } = data;
        
        switch (action) {
            case 'start':
                start(payload);
                break;
            case 'stop':
                stop();
                break;
            default:
                self.postMessage('please pass a valid action');
                break;
        }
    };

    function start(payload) {
        const { interval = 1000, duration = 0 } = payload;
        stop();
        timeLeft = duration;
        if (duration >= 0) self.postMessage(timeLeft);
        intervalId = setInterval(function () {
            timeLeft -= interval;
            if (timeLeft <= 0) {
                stop();
            } else {
                self.postMessage(timeLeft);
            }
        }, interval);
        timerStart = true;
    }

    function stop() {
        clearInterval(intervalId);
        timerStart = false;
        timeLeft = 0;
        self.postMessage(timeLeft);
    }
};

// Create a Blob URL for the worker script
let code = timerWorker.toString();
code = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'));

const blob =
    typeof Blob !== 'undefined'
        ? new Blob([code], { type: 'application/javascript' })
        : {};

const worker_script =
    typeof Blob !== 'undefined' ? URL.createObjectURL(blob) : {};

// Export the blob URL as the worker script and the timerWorker function for testing
export { worker_script };

The above code contains the start stop functions for a timer countdown to tell the time left for the event to happen.

I am getting the error :

This is probably due to the self.on message being used. I am confused as to how I could write the code to test this timerworker.js file. I am not sure what targetOrigin means in this context. The fact that I am testing the worker and using its instance to post and listen to messages, I am not quite sure what targetOrigin has to be in the postmessage.

TypeError: 'postMessage' requires 2 arguments: 'message' and 'targetOrigin'

          timerStart = false;
          timeLeft = 0;
          self.postMessage(timeLeft);

In my sveltekit app I have a “add to order” button in a product page. When the user clicks on it there is a cookie set with the product code, then the user is sent to the order page.

On the order page there is a form where the user can change product, on submit it will refresh the cookie updating its value.

The problem is that when I set a cookie from the order page, it won’t be updated if I try to create a new order, it will be updated only if I change product in the order page or if I manually delete the cookie. I’ve set the same path but it looks like server side cookies have the priority.

+layout.svelte

  function handleClickOrderButton() {
    const currentProduct = $page.params.product_id;
    document.cookie = `orderSelectedProduct=; Max-Age=0; path=/; SameSite=None; Secure`;

    try {
      if(currentProduct){
        document.cookie = `orderSelectedProduct=${currentProduct}; Max-Age=604800; path=/; SameSite=None; Secure`;
      }
    } catch (error) {
      console.log(error)
    } finally {
      goto(`/${$page.params.database_id}/new-order`);
    }
  }

Form action

export const actions = {
  changeSelectedProduct: async ({cookies, url, locals, request}) => {
    if (!locals.user) {
      return redirect(302, `/login`);
    } else {
      const userId = locals.user.id;
      const formData = await request.formData();
      const selectedProduct = formData.get("product");

      try {
        cookies.set("orderSelectedProduct", selectedProduct, {
          path: "/",
          maxAge: 604800,
          sameSite: "None",
          secure: true,
        });
      } catch (error) {
        console.log(error);
      }
    }
  }
};

I am using a for loop to render multiple text boxes to the canvas. This is the code inside that loop to draw the elements:

ctx.strokeRect(choiceStartPositionX - 3, choiceStartPositionY - 5, textLength.width + 6, lineHeight + 5);
ctx.fillText(textDescription, choiceStartPositionX, choiceStartPositionY);

But next I want to let the user click and drag the individual text boxes to move them.

I assume the rectangle and text drawn to the canvas need to be associated in some way (some kind of identifier to match them?), as well as to not have the same identifier as the other text boxes so that they don’t get dragged.

Could someone please help by showing how to do that, or a more suitable approach?

I need a library to create paths inside shopping centers that allows even several floors. In principle I had seen MapboxGL but being in principle only for a centre I do not know if it is worth it or better to look for something simpler, besides MapBoxGL I see something complex from my current knowledge, I have worked with Leaflet and d3 but so far little more related to maps. I’ve done a search on the internet but I don’t see any other options. What I need is to create a web page that allows to navigate inside a shopping centre, to be able to filter the shops by type and to create the paths to get from one shop to another or at least to show them from some predefined data. Here is an example:

It should be a library that allows you to navigate by moving the cursor around the map, change floors if possible, generate paths… Starting from OpenStreetsMaps, any suggestion is welcome, thanks.

I have lottie animations as json, and I’m using react-lottie to animate them in my page.

I have 4 items which goes like:

 const items = [
        {
            animationData: layer1Animation,
            title: 'social gaming experiences',
            description: 'we develop entertaining engagement formats on the best social gaming platforms. We are platform agnostic, being able to build experiences on Roblox, Fortnite, Minecraft as well as custom proprietary solutions using Unreal Engine and Unity',
        },
        // and others
 ];

and I have state called activeIndex to update the index after every 3 seconds:

    const [activeIndex, setActiveIndex] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setActiveIndex((prevIndex) => (prevIndex + 1) % items.length);
        }, 4000);
        return () => clearInterval(interval);
    }, [items.length]);

and the defaultOptions object for Lottie:

    const defaultOptions = {
        loop: false,
        autoplay: true,
        animationData: items[activeIndex].animationData,
        rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice',
        },
    };

and lastly I’m rendering the jsx as:

<div className={styles.container}>
            <h3>but what are our actual solutions?</h3>
            <div className={styles.cart_items}>
                {items.map((item, index) => (
                    <div
                        key={index}
                        className={`${styles.cart_item} ${index === activeIndex ? styles.active : styles.inactive}`}
                    >
                        <div className={styles.image_container}>
                            <Lottie options={defaultOptions} />
                        </div>
                        <div className={styles.content}>
                            <p>{item.title}</p>
                            <span>{item.description}</span>
                        </div>
                    </div>
                ))}
            </div>
            <div className={styles.animation_slider}>
                {items.map((_, index) => (
                    <div
                        key={index}
                        onClick={() => setActiveIndex(index)}
                        className={index === activeIndex ? styles.active : styles.inactive}
                    ></div>
                ))}
            </div>
        </div>

The problem is that it does not work as I expect, the animation is a bit off, so it does not start (or change to next animation) when index changes.

How it should be:

You can also check the code at this codesandbox.

I’m trying to use either filter or find to be able to get a card, and these cards have unique id because they’re all generated from a particular card.

In the context of what I want is that, upon selecting a card from the addBtn (the main source of the cards), I want to get a pop-up option that I can select what type of card I want. For example, ‘Personal’ and ‘Work’. If I select ‘work’ the card that appears is solely linked to work, same as the personal. When it is saved it appears in ‘work’ and there is another button where both ‘personal’ and ‘work’ is called ‘All’ and when it’s clicked both personal and work appears on the same page.

I tried these codes. The trash works, addBtn works but the personal and work doesn’t

let recentCardIds = []; let personalCardIds = []; let workCardIds = []; let trashCardIds = []; sidebars.forEach((sidebar) => { sidebar.addEventListener(“click”, () => { document.querySelectorAll(“.active”)?.classList.remove(“active”); sidebar.classList.add(“active”); }); }); const renderCards = (cardsToRender, filter = null) => { // cardsToRender = cards.filter((card) => card.isDeleted === false); let arr = cardsToRender; if (filter) { // cardsToRender = cardsToRender.filter((card) => { switch (filter) { case “recentItems”: arr = cardsToRender.filter((card) => card.isDeleted === false); break; case “personalItems”: arr = cardsToRender.filter((card) => card.isDeleted === false); break; case “workItems”:your text arr = cardsToRender.filter((card) => card.isDeleted === false); break; case “trashItems”: arr = cardsToRender.filter((card) => card.isDeleted === true); break; default: arr = cardsToRender.filter((card) => card.isDeleted === false); } // }); } else { arr = cardsToRender.filter((card) => card.isDeleted === false); } console.log(arr); cr.innerHTML = arr.map((item, indx) => { personal work }); renderCards(cards, “recentItems”); const recent = document .getElementById(“recentBtn”) .addEventListener(“click”, () => renderCards(cards, “recentItems”)); const personal = document .getElementById(“personalBtn”) .addEventListener(“click”, () => renderCards(cards, “personalItems”)); const work = document .getElementById(“workBtn”) .addEventListener(“click”, () => renderCards(cards, “workItems”)); const trash = document .getElementById(“trashBtn”) .addEventListener(“click”, () => { renderCards(cards, “trashItems”}); `

How to make the box on the right? I used depthTest false on the box and its outline to make it always on top of other mesh but the outline is now ignoring the box depth.

Here is the sample code the display the image on the left
https://jsfiddle.net/icesnake/t6no2a84/13/

    var camera, scene, renderer;
    var geometry, material, greenMesh;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
        camera.position.z = 5;

        scene = new THREE.Scene();

        geometry = new THREE.BoxGeometry( 1, 1, 1 );
        material = new THREE.MeshBasicMaterial({color: 0x00ff00,side:THREE.DoubleSide});
            material.depthTest = false;
        material.transparent = false;
        material.opacity = 1;
        greenMesh = new THREE.Mesh( geometry, material );
        var edgeMaterial = new THREE.LineBasicMaterial({
          color: 'black',
          depthTest: false,
          depthWrite: false,
        });
        var edges = new THREE.EdgesGeometry(geometry);
        var wireframe = new THREE.LineSegments(edges, edgeMaterial);
        wireframe.renderOrder = 1;
        greenMesh.add(wireframe);
        greenMesh.renderOrder = 1;
        
        scene.add(greenMesh);
        
        material3 = new THREE.MeshStandardMaterial({emissive: 0x00ffff,side:THREE.DoubleSide});
        
        geometry3 = new THREE.BoxGeometry( 1,1,1 );

        blueMesh = new THREE.Mesh( geometry3, material3 );
        blueMesh.position.z = 0.5;
       
        scene.add(blueMesh);

        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        requestAnimationFrame( animate );

        greenMesh.rotation.x += 0.01;
        greenMesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }

I tried different combinations of depthTest, depthWrite and renderOrder and I cannot seem to make the output I desire.

I’m working on implementing web push notifications and have encountered an issue where Notification.permission returns ‘denied’ in Firefox, even though notifications were previously allowed.

Here’s the relevant code I’m using to request notification permissions:

if ('Notification' in window) {
    Notification.requestPermission().then(function(permission) {
        console.log('Notification permission:', permission);
    }).catch(function(error) {
        console.error('Error requesting notification permission:', error);
    });
} else {
    console.log('Notifications are not supported in this browser.');
}```

Browser Version: Firefox [specific version]
OS: [your operating system]
Framework: [if applicable]
What I’ve Tried:

Checked and cleared permissions in Firefox settings.
Tested in a new Firefox profile.
Ensured the code runs after user interaction.
Verified that the site uses HTTPS.
Error Message: When running the code, the console logs 'denied' even though I’ve previously allowed notifications for this site.

Does anyone know why this might be happening or how I can resolve this issue?