Category: javascript

I have animations in my webpage and when published online, the animations play before the whole bg image is loaded.
Could anyone please help me.
Thanks.

I tried using animation-play-pause state but do not when to play the animation

How can I set up my checkout page so it opens in a new tab while still maintaining the regular WooCommerce behavior when the user presses the confirm purchase button?
I want to add a new method to the WooCommerce button so it opens a new tab.

I tried this in a Elementor HTML block:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var abrirContratoButton = document.getElementById('place_order');
    if (abrirContratoButton) {
        abrirContratoButton.addEventListener('click', function(event) {
            //event.preventDefault();

          
            var firstName = document.getElementById('billing_first_name').value;
            var lastName = document.getElementById('billing_last_name').value;
            var cpfCnpj = document.getElementById('billing_cpf_cnpj').value;

            
            localStorage.setItem('billing_first_name', firstName);
            localStorage.setItem('billing_last_name', lastName);
            localStorage.setItem('billing_cpf_cnpj', cpfCnpj);

            
            window.location.href = abrirContratoButton.getAttribute('href');
        });
    }
});
</script>

How can I pass this to js module

home.cshtml

<p id="timer" end-date="2030.12.31."

Presently sadly the cshtml file does not notice that the end-date is a variable.
I tried to set up there as
@{var end-date = …..}

But it did not really want to work out.

How can I send the date value to the js. And how do I code in the js file this.

thanks a lot

im new to react native so i really don’t know why this issue is coming up. if u need any additional info feel free to ask. im trying to build a navigation system similar to windows phone where we can swipe to the next screen.

here is my code

import { StyleSheet, Text, View, FlatList, TouchableOpacity, Dimensions } from 'react-native'
import React , {useState,useRef} from 'react'

const allData = [
    {name:'Explore',id:'1'},
    {name:'Trending',id:'2'},
    {name:'Post',id:'3'},
    {name:'Messages',id:'4'},
    {name:'Marketplace',id:'5'}
]
const reff = useRef()
const [index,setIndex] = useState(2)
const spacing = 10;


export default function topDynamicBar() {
  return (
    <View style ={styles.container}>
      <FlatList
      ref={reff}
      initialScrollIndex={index}
      keyExtractor={(item)=>item.id}
      data={allData}  
      renderItem={({item, index: findex})=>(<Text style={styles.items}>{item.name}</Text>)}
      horizontal
      showsHorizontalScrollIndicator={false}
      />
    </View>
  )
}

const styles = StyleSheet.create({
    container:{
        backgroundColor:'#000000'
    },
    items:{
        padding:2,
        fontSize:30,
        height: "auto",
        margin:10,
        borderColor:'#fff',
        borderWidth:2,
        borderRadius: spacing
        

    }

})

The JavaScript library Handsontable has the ‘dropdownMenu’ option, which allows displaying an icon in the column headers and opening a dropdown menu with various options.

I know this can be achieved using JavaScript, but my knowledge of JavaScript is practically nonexistent. How can this option be included using the ‘rhandsontable’ package in Shiny?

I am using recoil for state management, for a very basic todo app for practice, but my todolist.tsx is not showing the updated username and I need to refresh everytime to see the updated username and todos change as soon as the username changes. I can’t figure out the issue.

This is my authState

import { atom } from 'recoil';

export const authState = atom({
    key: 'authState',
    default: { token: null, username: null },
});

and this is the iniital State

function InitState() {
  const setAuth = useSetRecoilState(authState);
  const navigate = useNavigate();

  const init = async () => {
    const token = localStorage.getItem("token");
    try {
      const response = await fetch('http://localhost:3000/auth/me', {
        headers: { Authorization: `Bearer ${token}` }
      });
      const data = await response.json();
      console.log(data);
      console.log(data.username);
      if (data.username) {
        setAuth({ token: data.token, username: data.username });
        navigate("/todos");
      } else {
        navigate("/login");
      }
    } catch (e) {
      navigate("/login");
    }
  }

  useEffect(() => {
    init();
  }, [])

and inside my todolist.tsx , I am using authStata like this :

  const authStateValue = useRecoilValue(authState);

and the username is not updating until I refresh and reload the page, todos fetched are the updated ones but the username is not updating until page is reloaded

 return (
        <div>
            <div style={{ display: "flex" }}>
                <h2>Welcome {authStateValue.username}</h2>
                <div style={{ marginTop: 25, marginLeft: 20 }}>
                    <button onClick={() => {
                        localStorage.removeItem("token");
                        navigate("/login");
                    }}>Logout</button>
                </div>
            </div>
            <h2>Todo List</h2>
            <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
            <input type="text" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Description" />
            <button onClick={addTodo}>Add a new Todo</button>
            {todos.map((todo) => (
                <div key={todo._id}>
                    <h3>{todo.title}</h3>
                    <p>{todo.description}</p>
                    <button onClick={() => markDone(todo._id)} >{todo.done ? 'Done' : 'Mark as Done'}</button>
                </div>
            ))}
        </div>
    )
};

export default TodoList

The username should also update as the todolist component re-renders , but except username everythign is fetching is being displayed fine. I can’t figure out the issue, I am just starting out to use typescript with recoil

I’m following this https://www.youtube.com/watch?v=MpGLUVbqoYQ webpack tutorial precisely, and have gotten to the part of the video where he talks about content hashing. On the video he does:

    const path = require("path");
    module.exports = {
      mode: "development",
      entry: "./src/index.js",
      output: {
        filename: "main.[contentHash].js",
        path: path.resolve(__dirnamem, "dist")
      },
      module: {
        rules: [
          {
            test: /.scss$/,
            use: [
              "style-loader",
              "css-loader",
              "sass-loader"
            ]
          }
        ]
      }
    };

I have done:

const path = require("path");

module.exports =  {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "main.[contentHash].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /.scss$/,
                use: [
                    "style-loader", // 3. Injects styles into DOM
                    "css-loader",  // 2. Turns css into commonjs
                    "sass-loader" // 1. Turns sass into css
                ]
            }
        ]
    }
};

On the video this code works and appends a content hash where indicated, but when I ran npm start, I got this:

How can I create a global state that can be accessed or modified from these pages?

import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import './index.css'

import Home from './pages/Home.jsx'
import Login from './pages/Login.jsx'
import SignUp from './pages/SignUp.jsx'

const router = createBrowserRouter([
  {path: '/', element: <Home />},
  {path: '/login', element: <Login />},
  {path: '/register', element: <SignUp />},
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

I have a brush overlay that tracks zoom events. it is stretched over the entire graph area and is drawn first, and then the graph lines. This is done so that I can process click events, mouseover, mouseout separately, for example, to highlight the graph. At the same time, I want to maintain the ability to zoom while being above the graph line, but my brush is lost, how can I fix this?

I thought about sending the event to the overlay using dispatchEvent, but I don’t understand how to create brush events.
Or maybe you need to somehow reactivate the brush?

How can I open next tab upon closing existing tab? The main thing here is I have a continuasly reloading pages in executingFunctions and as soon as one of the pages has proper html, puppeteer starts to interact with it, closes it and opens a new one. But what if I don’t want this page to be interacted and I want to close it.

concurrentOrders.js

export default async function concurrentOrders(limit, links) {
  const executingFunctions = [];

  let currentIndex = 0;

  while (currentIndex < links.length) {
    while (executingFunctions.length < limit && currentIndex < links.length) {
      const link = links[currentIndex];
      currentIndex++;

      const promise = createBuyOrderPromise(...link).finally(() => {
        const index = executingFunctions.indexOf(promise);
        if (index !== -1) executingFunctions .splice(index, 1);
      });
      executingFunctions.push(promise);
    }

    await Promise.race(executingFunctions);
  }
}

createBuyOrderPromise.js

export default async function createBuyOrderPromise(link) {
  return new Promise(async (resolve, reject) => {
    try {
      const page = await makeConnection();  // launch in existing browser using puppeteer (via webSocketUrl)
      await gotoMarketItemPage(page, link);
      await closeTabPage(page);     // closing tab
      resolve();
    } catch () {
      reject();
    }
  });
}

gotoMarketItemPage.js

export default async function gotoMarketItemPage(page) {
  try {
    await page.goto(page,
      {
        waitUntil: "domcontentloaded",
        timeout: 0,
      }
    );

    const image = await page.$(itemImageSelector);

    if (image) elementFound = true;
    if (!image) await page.reload();
  }
}

Tried to implement puppeteer’s

     await page.on("close", () => {
       reject();
     });

with passing reject function to gotoMarketItemPage

in gotoMarketItemPage.js but it made it work like:
if I close one of html loaded pages without the content that I need, this action stops reloding other pages in process in addition to that it stops adding up a page to the stack.

P.S. That is not full version of code for the sake of understanding. Sorry for bad explanation. Let me know if I can clarify this.

Firebase = has their own database that’s why I don’t like it because it creates their dependency and it is super hard to migrate from Firebase.

Supbase = It is good but it does not have MongoDB support and their auto-generated APIs are not that much feature-rich.

• And for custom business logic, anyway need to create separate backend projects and need to use supabase sdk.

I want something that is self-hosted and should be super easy and free/open source and feature-rich also.

I am facing a strange problem in my Nuxt 3 application. I do want to add my first middleware to my project called auth.ts. This middleware should protect certain pages from users who are not logged in. Basically it should grant access to the requested page to those who are logged in and navigate those who are not logged in to the login page. Quite simple and straight forward.

However, my to and from variables in my middleware are always the same. This results in an infinite redirection in a navigation guard.

This is my middleware:

export default defineNuxtRouteMiddleware((to, from) => {
    const userStore = useUserStore();

    console.log('From auth middleware')
    console.log('to', to)
    console.log('from', from)
    console.log('authenticated', userStore.authenticated)

    // If the user is authenticated, continue to the requested route
    if (userStore.authenticated === true) {
        return navigateTo(to.fullPath);
    }

    // If the user is not authenticated, redirect to the login page
        return navigateTo('/login');
    })

The authenticated variable comes from my Pinia store.

This is how I add the middleware to my /profile page:

definePageMeta({ middleware: ["auth"] });

This is the error I get:

[Vue Router warn]: Detected a possibly infinite redirection in a navigation guard when going from "/profile" to "/profile". Aborting to avoid a Stack Overflow. Are you always returning a new location within a navigation guard? That would lead to this error. Only return when redirecting or aborting, that should fix this. This might break in production if not fixed.

This is the console log I get from my auth.ts middleware:

From auth middleware auth.ts:4:9

to Object { fullPath: "/profile", hash: "", query: {}, name: "profile", path: "/profile", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: {…}, href: "/profile" } auth.ts:5:9

from Object { fullPath: "/profile ", path: "/profile", query: {}, hash: "", name: "profile", params: {}, matched: (1) […], meta: {…}, redirectedFrom: undefined, href: "/profile " } auth.ts:6:9

authenticated true

When the user is not authenticated it successfully navigates the user to the /login page. But when the user is logged in I always get the error. It would make sense to me if I am already on the profile page and then refresh the page.

But I get this error as well when I am at / and navigate to the /profile page. But how can the from variable be /profile when I navigate from the / page to the /profile page?

Kind regards

I’ve come across several good looking ChartJS line charts that have just a small and fading shading under each line. However, I’m not able to implement that for myself, nor have I found any good example code on the internet that does the thing with React/NextJS. Below is a picture of my desired state and the current component which adds a shadow to the line chart but does not make it more transparent to the outside. Any ideas or solutions to that?

import React, { useEffect } from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);
Chart.defaults.borderColor = "#434343";
Chart.defaults.color = "#bfbfbf";
Chart.defaults.font.family = 'Inter, sans-serif'; 
Chart.defaults.font.size = 12;

const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        y: {
            type: 'linear',
            display: true,
            position: 'left',
            grid:{
                display:false,
                drawOnCharArea: false,
            }
        },
        y1: {
            type: 'linear',
            display: true,
            position: 'right',
            grid:{
                display:false,
                drawOnCharArea: false,
            }
        },
        x : {
            display: true,
            beginAtZero:true,
            grid:{
                display:false,
                drawOnCharArea: false,
            }
        }
    },
    plugins:{
    }, 
};

export default function OverviewSalesLine({ data }) {

    // Custom shadow for chart
    useEffect(() => {
        Chart.register({
        id: 'customShadow',
        beforeDraw: (chart) => {
            const ctx = chart.ctx;
            ctx.save();

            const originalLineDraw = ctx.stroke;
            ctx.stroke = function () {
            ctx.save();
            ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 4;
            ctx.shadowOffsetY = 4;
            originalLineDraw.apply(this, arguments);
            ctx.restore();
            };
        }
        });
    }, []);

    const chartData = {
        type: 'customShadow',
        labels: data.map(item => item.interval_start),
        datasets: [

            {
                label: 'Gross Sales',
                data: data.map(item => item.total_sales),
                borderColor: 'rgba(143, 143, 143, 1)', 
                backgroundColor:  'rgba(143, 143, 143, 0.2)',
                yAxisID: 'y',
                fill: true,
                tension:0.4,
            },

            {
                label: 'Items Sold',
                data: data.map(item => item.total_items_sold),
                borderColor: 'rgba(119, 111, 252, 1)', 
                backgroundColor: 'rgba(119, 111, 252, 0.2)', 
                yAxisID: 'y1',
                fill: true,
                tension:0.4,
            },

        ],
    };


    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', width: "100%" }}>
            {!data || data.length == 0 ?<div> No data available </div> : <Line options={chartOptions} data={chartData} />}
         </div>
    ) 

I would like to test the following code:

// DocRepo.ts
export class DocRepo {
    constructor() {}

    async fetchDocs(id: String) {
        return Promise.resolve([])
    }
}

// Person.ts
import {DocRepo} from "./DocRepo";

export default class Person {
   let docRepo;

    constructor() {
       docRepo = new DocRepo();
    }

     async findDocs(){
        return docRepo.fetchDocs()
    }
}

I came up with the following test cases:

import Person from "./Person";
import { DocRepo } from "./DocRepo";

jest.mock("./DocRepo");

describe("Person", () => {

  it("should fetch documents", async () => {

    const mockFetchDocs = jest.fn().mockResolvedValue([]);

    DocRepo.prototype.fetchDocs = mockFetchDocs; // bad practice?

    const person = new Person();
    await person.findDocs();

    expect(mockFetchDocs).toHaveBeenCalledTimes(1);
  });
});

Is it bad practice to override the function prototype like DocRepo.prototype.fetchDocs = mockFetchDocs? If yes, please suggest the correct way to test this code ( WITHOUT changing the constructors).

I’ having a little trouble between load order of my CSS and JavaScript.

Basically, what is happening, is that I have a div with blue background, and my css applies a “cut” on it, slicing it diagonally. When the page first loads (or when CTRL+SHIFT+R), the “cut” is not there for a very short but noticeable duration, and then appears after the JavaScript loads.

I have this CSS

.banner-bottom-fx 
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 0 solid transparent; /* changes via JavaScript */
    border-right: 0 solid white; /* changes via JavaScript */
}

Where border-top and border-right values change via this JavaScript

function UpdateBannerFx()
{
    const banner = document.querySelector('.banner-bottom-fx');

    const borderRightWidth = window.innerWidth;
    const borderTopWidth = borderRightWidth / 30;

    banner.style.borderRightWidth = borderRightWidth + 'px';
    banner.style.borderTopWidth = borderTopWidth + 'px';
}

document.addEventListener("DOMContentLoaded", function() 
{
    UpdateBannerFx();
    // Update border widths when window is resized
    window.addEventListener('resize', UpdateBannerFx);
});

I know the “flicker” is due to my CSS styles.css, which loads in my header, and then the JavaScript which loads from main.js in the footer. Is there any way to prevent said flicker?