Category: javascript

Category Added in a WPeMatico Campaign

Performant way to generate username AdjectiveAnimalNumber

Our current new users are automatically given a username like Guest1, Guest99.
It would be great if we could change this to generate a username that follows this format ${Adjective}${Animal}${Number}.

An example would be Guest1 would be given AwesomePanther1

We currently have a express backend, with react.

I have tidied a list of animal words to use currently in a .txt and was thinking of reading the local text file something like:

    let fr = new FileReader();
    fr.onload = function () {
        document.getElementById('output').textContent = fr.result;
    }
    fr.readAsText("/animalsWordList.txt");

animalsWordList.txt contents would look like:

dog(enter)
cat(enter)
fish(enter)

The same would be done with a 2nd text file for adjective, then just concat the 3 substrings together.

Is this the most performant way of reading text for this use case? Especially if the lists get really long, maybe 700 animal words, and 1000-2000 adjectives?

Would it be better to format the data as a .js file that exports a JSON containing two arrays with this data?
In this case, we would use an import statement.

To clarify, we’re not worried about uniqueness of the username right now – so, no querying databases is needed to check if PinkPanda3 is taken at this part of the user flow.

I have tried the JSON export method to bring in large arrays for another feature in this project so we know this implementation works. Our main question is which will be more performant.

Fetch data from sharepoint list using google apps script community connector

I have a requirement to use google apps script and fetch data from sharepoint list. I am a database person who works in BigQuery. I am not familiar with JavaScript as apps script uses javaScript. I will need some help to build custom connector. I will need some help particularly in the getconfig section in the apps script section.

I have searched everywhere and there is so little info available.

Kindly help!

Is this a thing in JS?

if (window.matchMedia("(min-aspect-ratio: 3/4)")) {
 slides = igImages.length * 2;
 } else if (window.matchMedia("(min-aspect-ratio: 16/9)")) {
 slides = igImages.length * 3;
 } else {
 slides = igImages.length;
};

I was hoping it would work like
let mql = window.matchMedia("(max-width: 600px)");

Larvale 10 with vite and vue-plugin does not show rendered component

I have a very basic installation of laravel 10 with vite und vue-plugin. Problem is, the vue-part of the page does render, but is not shown in browser, only the empty vue-block:

rendered output:

<div id="app_button" data-v-app=""><!----></div>

Here are my settings and the code:

package.conf

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^5.0.4",
        "autoprefixer": "^10.4.17",
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0.0",
        "postcss": "^8.4.35",
        "sass": "^1.71.0",
        "tailwindcss": "^3.4.1",
        "vite": "^5.0.0"
    }
}

app.js

import './bootstrap';

import { createApp, ref } from 'vue'
createApp({
    setup() {
        return {
            count: ref(0)
        }
    }
}).mount('#app_button')

blade-view

<head>
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
  <div id="app_button">
    <button @click="count++">
        Count is: @{{ count }}
    </button>
  </div>
</body>

vite.conf

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
                'resources/css/app.css'
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

What am I missing herer? Thanks for any hint!

Resizing a grid

so i have this grid, and i want to make it resizable horizontally

<div id="grid">
        <div class="editor-container" id="editor-container">
            <!-- Ensure each textarea has a unique ID -->
            <textarea class="editor" id="htmlEditor"><!--Your initial HTML content here-->
            <b>Hello World!</b></textarea>
            <textarea class="editor" id="jsEditor" style="display: none;"><!--Your initial JS content here--></textarea>
            <textarea class="editor" id="cssEditor" style="display: none;">  body, html {
                height: 100%;
                margin: 0;
                font-family:'Helvetica Neue', sans-serif;
            }
            </textarea>
        </div>
        <div id="divider"> </div>
        <div class="output-container">
            <iframe id="output"></iframe>
        </div>
    </div>

how do i make it resizable so that i can drag the divider and have it resize and be responsive?

i tried to use mouse down events but it would only work when dragging to the left, and when i dragged to the right it would disconnect unless i dragged VERY slowly

Dynamic labels on Y axis are getting overlapped

Created a bar graph using chart js
on x axis count
on Y axis showing names of the doctors

scales: {
                x: {  // Switch to x-axis
                    stacked: true,
                    beginAtZero: true,
                    ticks: {
                        align: 'start', // Set the alignment to 'start' for left
                        autoSkip: false,

                    },
                    position:'top'
                },
                y: {  // Switch to y-axis
                    stacked: true,
                    beginAtZero: true,
                    ticks: {
                        align: 'start',
                        autoSkip: false
                ,
                    },
                                        
                }
            },

This is the scale part in my code.

How I can add the space between this bars or labels?

merge two different package typescript definition files into one

i have two typescript definition packages @types/package-a @types/package-b and want to merge two definitions into one definition. is there a way?

package-a.d.ts [export package-a {...}]
package-b.d.ts [exports package-b {...}]

package-mine.d.ts 
[ export newtype { ...package-a-objecttype, ...package-b-objecttype } ]

i have looked at the below and this is not what i am looking for.
Combine multiple typescript files into one typescript definition file

why change in array is not reflecting in the page

I am trying to add data in the array on clicking the button and its happening too and I am using loop over array to show data on the page from array but when the data is added to array is does not on the page.
Change is not reflecting on the page.

If you anyone have any solution kindly provide. Thanks in advance.

const ob = ["first", "second", "third"];

for (let i = 0; i < ob.length; i++) {
  const nametag = `<p>${ob[i]}</p>`;
  document.querySelector(".name-list").insertAdjacentHTML("beforeend", nametag);
}
function add() {
  const value = document.querySelector("textarea").value;
  ob.push(value);
}
document.querySelector(".add").addEventListener("click", () => add());
<div class="name-list"></div>
<textarea placeholder="enter name"></textarea><br>
<button class="add">Add Name</button>

openLayers does not work on earlier ios versions

I used react 17.0.1 framework to import openlayers map to create a web page. The map doesn’t work on ios11 and 12, clicking and swiping doesn’t work. The ol version is 6.3.1. May I ask what problem needs to be solved? I still don’t understand

I would like to be able to work with older ios versions or do something else

Conversion of length in threejs to screen length

How to calculate the length of 100px on the screen in the canvas when using Orthographic camera in Threejs
camera.position.set(0, 0, z);
camera.lookAt(0, 0, 0);
The value of z will change according to mouse scrolling

const viewWidth = camera.right – camera.left;

const viewHeight = camera.top – camera.bottom;

const canvasWidth = renderer.domElement.width;

const canvasHeight = renderer.domElement.height;

const widthScale = viewWidth / canvasWidth;

const heightScale = viewHeight / canvasHeight;

const rectWorldWidth = 100 * widthScale;

const rectWorldHeight = 100 * heightScale;

When I modify the position.z of the camera, the width and height do not change in real time

React Select MUI Onclose event not getting triggered for multiple selection from dropdown

After selecting mutilple values from dropdown and click outside, the dropdown is getting closed but onClose event is not getting triggered. I need to filter data based on the selection from drop down.

For example, from below image I need to show data only for batch 1 and batch 2. However, as Onclose is not getting triggered from Select MUI, my code is not getting executed inside handleClose.

Any help is greatly appreciated.

(https://i.stack.imgur.com/wu1vU.png)

Here is the code snippet

import React from 'react';
import PropTypes from 'prop-types';
import Input, { InputLabel } from 'material-ui/Input';
import MenuItem from '@material-ui/core/MenuItem';
import Chip from '@material-ui/core/Chip';
import FormControl from "@material-ui/core/FormControl";
import Select from '@material-ui/core/Select';
import { withStyles } from 'material-ui/styles';
import {multiSelectorStyles} from '../../componentStyles';
import Checkbox from '@material-ui/core/Checkbox';



class MultiSelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      selectedItems : [],
    };
  }

  handleChange(event) {
    this.props.onChange(event.target.value);
  }

  handleSelectedItems = (event) => {
    const {
      target: { value },
    } = event;
    this.setState({
      selectedItems: typeof value === 'string' ? value.split(',') : value,
    })

  };

  handleClose = () => {
     console.log("--Onclose event triggered---");
    //const { selectedItems} = this.state;
    //const { pendingKey } = this.props;
    //this.props.applyFilter(selectedItems, pendingKey)
  };

  render() {
    const { selectedItems} = this.state;
    const options =this.props.suggestions.map((suggestion,index) => (
      <option key={index} value={suggestion.key || suggestion}>{suggestion.name || suggestion}</option>
    ));

    return (
      this.props.useInputDataList ?
        <span>
          <input
            list="datalist"
            value={this.props.value}
            onChange={(event) => this.handleChange(event)}/>
          <datalist id="datalist">{options}</datalist>
        </span>
        :
        <span>{this.props.selectorLabel}
          <FormControl>
            <Select
              multiple
              value={selectedItems}
              onChange={(event) => this.handleSelectedItems(event)}
              onClose= {this.handleClose}
              input={<Input />}
              renderValue={selected => (
                <div style={{overflow: 'scroll'}}>
                  {selected.map(value => (
                    <Chip key={value} label={value} />
                  ))}
                </div>
              )}
            >
              {this.props.suggestions.map((suggestion,index) => (
                <MenuItem key={index} value={suggestion.key || suggestion.name}>
                  <Checkbox checked={selectedItems.indexOf(suggestion.key) > -1}/>
                  {suggestion.name}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </span>
    );
  }
}

MultiSelector.propTypes = {
  classes: PropTypes.object,
  suggestions: PropTypes.array,
  onChange : PropTypes.func,
  value: PropTypes.array,
  label: PropTypes.string,
  selectorLabel:PropTypes.string,
  useInputDataList: PropTypes.bool,
};


export default (withStyles(multiSelectorStyles)(MultiSelector));

Convert HTML String to base64 and then show as padf

I have a following HTML string and I want to convert it into base64 and then I have a view button to show it as pdf in a new tab. How I can achieve this using React.js?

"<!DOCTYPE html>n<html lang="en">n<head>n<meta charset="UTF-8">n<meta name="viewport" content="width=device-width, initial-scale=1.0">n<title></title>n</head>n<body>n<p>This is an editor</p>n</body>n</html>"

Is there any library or method that I can use?

How to animate the custom tab indicator in custom tab in react native

I want to make a custom tab and animate while changing the tab. The real design for that is
Tab image for reference

How can i achieve that ?

My code what i have done till now is

const UNDERLINE_WIDTH = 60;

const getWidth = (e) => e.nativeEvent.layout.width;

const getInputRange = (routes) => routes.map((_, idx) => idx);

const getOutputRange = ({ inputRange, layout }) => {
  const outputRange = inputRange.map((value, idx) => {
    const itemWidth = parseNumber(layout[idx], 0);
    const sumLeft = sum(layout.slice(0, value));

    const diff = itemWidth - UNDERLINE_WIDTH;
    const offset = Math.abs(Math.floor(diff / 2 + sumLeft));

    return parseNumber(offset, 0);
  });

  if (I18nManager.isRTL) {
    return getArrComplement(outputRange);
  }

  return outputRange;
};

const CustomTab = ({
  index,
  routesOrder,
  onChange,
  ignoreSafeArea = false
}) => {
  const [width, setWidth] = useState(0);
  const [layout, setLayout] = useState(new Array(routesOrder.length).fill(0));
  const [leftValue] = useState(new Animated.Value(index));

  const inputRange = useMemo(() => getInputRange(routesOrder), [routesOrder]);
  const outputRange = useMemo(
    () => getOutputRange({ inputRange, layout }),
    [inputRange, layout]
  );

  const setRowLayout = (e) => setWidth(getWidth(e));
  const setItemLayout = ({ idx, e }) => {
    if (layout[idx]) {
      return;
    }
    const newLayout = [...layout];
    newLayout[idx] = getWidth(e);
    setLayout(newLayout);
  };

  useEffect(() => {
    Animated.spring(leftValue, {
      toValue: index,
      bounciness: 5,
      useNativeDriver: true
    }).start();
  }, [index, leftValue]);

  const underlineStyle = [
    {
      height: 6,
      backgroundColor: '#000',
      width: UNDERLINE_WIDTH,
      transform: [
        {
          translateX: leftValue.interpolate({
            inputRange,
            outputRange
          })
        }
      ]
    }
  ];

  const Wrapper = ignoreSafeArea ? Column : SafeAreaView;

  return (
    <Wrapper>
      <Column
        height={HEIGHT}
        borderBottomColor={Colors.gray2}
        borderBottomWidth={0.5}
      >
        <Row justifyContent='center' onLayout={setRowLayout}>
          {routesOrder.map((route, idx) => {
            const { routeKey, label, subroutes } = route;
            const isSelected = idx === index;
            return (
              <Touchable
               
                testID='header-tab-button'
                isSelected={isSelected}
                //  flex={1}
                marginHorizontal={10}
                key={`${routeKey}_${idx}`}
                paddingHorizontal={HORIZONTAL_PADDING}
                onLayout={(e) => setItemLayout({ idx, e })}
                onPress={() =>
                  onChange({
                    index: idx,
                    key: subroutes.length ? subroutes[0].routeKey : routeKey
                  })
                }
              >
                <Column paddingVertical={18} center>
                  <H6
                    testID='header-tab-button-text'
                    isSelected={isSelected}
                    uppercase
                    bold={isSelected}
                  >
                    {label}
                  </H6>
                </Column>
              </Touchable>
            );
          })}
          {!!width && (
            <Float bottom={0}>
              <Animated.View style={underlineStyle} />
            </Float>
          )}
        </Row>
      </Column>
    </Wrapper>
  );
};

But i am not able to achieve same .

Is there any other way to achieve?
Kindly correct the above code or help me with new code please

I tried the code provide and expecting to correct the provided code or help me with new code

How JS files are available in browser in dev tools when bundler have merged them into one

How JS files are available in browser in dev tools when bundler have merged them into one. I read that webpack uses bundler to merge all imported files into one , which comes as bundle.js i brower but still we have JS files also available when we debug them in browser. My question is how browser is able to give us debug functionality when it is using bundle.js

I tried https://legacy.reactjs.org/docs/code-splitting.html to understand things but did not got far enough