Category: javascript

Hey everyone i’m trying to add custom html css and js code to specific location in my page, and i’m using Gutenberg basic pagebuilder with plugin called stackable, the code is simple it contains click to copy button and give the word copy, but this only works in the first top block any html block below that it won’t word icheck the code multiple time and it’s all right so i don’t know whta could be the problem!

I tried to verify my theory and lifted one of the below buttons and it worked like fine.
Button image

I am not having much success trying to find the name of the node.js based audio and DSP library.

I have tried various Google searches but without much success. My apologies in advance for such a relatively stupid question.

I am working on a wordpress plugin which is made in vue js and using element ui framwork. I want to add few customization controls in it so that user can easily customize the whole plugin typography and other styles. I have added a color picker to change the colors of my plugin according to the user needs. now i want to add typography control but as i look into the element ui documentation there is no field for typography there is a component named as typography but we cannot use it.
I want to make it like the one in elementor which is a typography controls which has other controls as line height, letter spacing etc.I also have tried to make it custom but that does not working. it does not show any control in my panel.

I really need help in this one.

I tried to make it custom with vue js but it is not working. here is the vue code.

<template>
    <div class="typography-control">
        <!-- Font Family -->
        <div class="typography-control-section">
            <label for="font-family">Font Family</label>
            <el-select v-model="typography.font_family" placeholder="Select Font Family">
                <el-option v-for="font in fonts" :key="font" :value="font">
                    {{ font }}
                </el-option>
            </el-select>
        </div>

        <!-- Font Size -->
        <div class="typography-control-section">
            <label for="font-size">Font Size</label>
            <div class="size-unit-input">
                <el-input-number v-model="typography.font_size.size" :min="0" :precision="1"></el-input-number>
                <el-select v-model="typography.font_size.unit">
                    <el-option v-for="unit in units" :key="unit" :value="unit">
                        {{ unit }}
                    </el-option>
                </el-select>
            </div>
        </div>

        <!-- Font Weight -->
        <div class="typography-control-section">
            <label for="font-weight">Font Weight</label>
            <el-select v-model="typography.font_weight">
                <el-option v-for="(label, value) in fontWeights" :key="value" :value="value">
                    {{ label }}
                </el-option>
            </el-select>
        </div>

        <!-- Text Transform -->
        <div class="typography-control-section">
            <label for="text-transform">Text Transform</label>
            <el-select v-model="typography.text_transform">
                <el-option v-for="(label, value) in textTransforms" :key="value" :value="value">
                    {{ label }}
                </el-option>
            </el-select>
        </div>

        <!-- Font Style -->
        <div class="typography-control-section">
            <label for="font-style">Font Style</label>
            <el-select v-model="typography.font_style">
                <el-option v-for="(label, value) in fontStyles" :key="value" :value="value">
                    {{ label }}
                </el-option>
            </el-select>
        </div>

        <!-- Line Height -->
        <div class="typography-control-section">
            <label for="line-height">Line Height</label>
            <div class="size-unit-input">
                <el-input-number v-model="typography.line_height.size" :min="0" :precision="1"></el-input-number>
                <el-select v-model="typography.line_height.unit">
                    <el-option v-for="unit in units" :key="unit" :value="unit">
                        {{ unit }}
                    </el-option>
                </el-select>
            </div>
        </div>

        <!-- Letter Spacing -->
        <div class="typography-control-section">
            <label for="letter-spacing">Letter Spacing</label>
            <div class="size-unit-input">
                <el-input-number v-model="typography.letter_spacing.size" :min="0" :precision="1"></el-input-number>
                <el-select v-model="typography.letter_spacing.unit">
                    <el-option v-for="unit in units" :key="unit" :value="unit">
                        {{ unit }}
                    </el-option>
                </el-select>
            </div>
        </div>

        <!-- Color Picker -->
        <div class="typography-control-section">
            <label for="color">Text Color</label>
            <el-color-picker v-model="typography.color"></el-color-picker>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: Object,
            default: () => ({}),
        },
        default: {
            type: Object,
            default: () => ({
                font_family: 'Arial',
                font_size: { size: 16, unit: 'px' },
                font_weight: '400',
                text_transform: '',
                font_style: 'normal',
                line_height: { size: 1.5, unit: '' },
                letter_spacing: { size: 0, unit: 'px' },
                color: '#000000',
            }),
        },
    },
    data() {
        return {
            typography: { ...this.default, ...this.value },
            fonts: ['Arial', 'Helvetica', 'Times New Roman', 'Verdana', 'Georgia', 'Tahoma', 'Courier New', 'Impact'],
            units: ['px', 'em', 'rem', '%'],
            fontWeights: {
                '': 'Default',
                '100': 'Thin (100)',
                '200': 'Extra Light (200)',
                '300': 'Light (300)',
                '400': 'Normal (400)',
                '500': 'Medium (500)',
                '600': 'Semi Bold (600)',
                '700': 'Bold (700)',
                '800': 'Extra Bold (800)',
                '900': 'Black (900)',
            },
            textTransforms: {
                '': 'Default',
                'uppercase': 'UPPERCASE',
                'lowercase': 'lowercase',
                'capitalize': 'Capitalize',
            },
            fontStyles: {
                '': 'Default',
                'normal': 'Normal',
                'italic': 'Italic',
                'oblique': 'Oblique',
            },
        };
    },
    watch: {
        value: {
            deep: true,
            immediate: true,
            handler(newVal) {
                this.typography = { ...this.default, ...newVal };
            },
        },
        typography: {
            deep: true,
            handler(newVal) {
                this.$emit('input', newVal);
            },
        },
    },
};
</script>

and here is the php code:

<?php

namespace WebinaneCommerceFields;

use WebinaneCommerceFieldsField;

class Typography extends Field
{
    /**
     * The field's component.
     *
     * @var string
     */
    public $component = 'typography-control';

    /**
     * Default typography settings.
     *
     * @var array
     */
    protected $defaultSettings = [
        'font_family' => '',
        'font_size' => [
            'unit' => 'px',
            'size' => null
        ],
        'font_weight' => '',
        'text_transform' => '',
        'font_style' => '',
        'line_height' => [
            'unit' => 'px',
            'size' => null
        ],
        'letter_spacing' => [
            'unit' => 'px',
            'size' => null
        ],
        'color' => ''
    ];

    /**
     * Available font units.
     *
     * @var array
     */
    protected $units = ['px', 'em', 'rem', '%'];

    /**
     * Available font weights.
     *
     * @var array
     */
    protected $fontWeights = [
        '' => 'Default',
        '100' => 'Thin (100)',
        '200' => 'Extra Light (200)',
        '300' => 'Light (300)',
        '400' => 'Normal (400)',
        '500' => 'Medium (500)',
        '600' => 'Semi Bold (600)',
        '700' => 'Bold (700)',
        '800' => 'Extra Bold (800)',
        '900' => 'Black (900)'
    ];

    /**
     * Available text transforms.
     *
     * @var array
     */
    protected $textTransforms = [
        '' => 'Default',
        'uppercase' => 'UPPERCASE',
        'lowercase' => 'lowercase',
        'capitalize' => 'Capitalize'
    ];

    /**
     * Available font styles.
     *
     * @var array
     */
    protected $fontStyles = [
        '' => 'Default',
        'normal' => 'Normal',
        'italic' => 'Italic',
        'oblique' => 'Oblique'
    ];

    /**
     * Set default typography settings.
     *
     * @param array|null $settings
     * @return $this
     */
    public function default($settings = null)
    {
        // If settings is null or not an array, use the current default settings
        if ($settings === null || !is_array($settings)) {
            return $this->withMeta(['default' => $this->defaultSettings]);
        }

        // Merge the provided settings with the default settings
        $mergedSettings = array_merge($this->defaultSettings, $settings);
        
        return $this->withMeta(['default' => $mergedSettings]);
    }

    /**
     * Get available font units.
     *
     * @return array
     */
    public function getUnits()
    {
        return $this->units;
    }

    /**
     * Get available font weights.
     *
     * @return array
     */
    public function getFontWeights()
    {
        return $this->fontWeights;
    }

    /**
     * Get available text transforms.
     *
     * @return array
     */
    public function getTextTransforms()
    {
        return $this->textTransforms;
    }

    /**
     * Get available font styles.
     *
     * @return array
     */
    public function getFontStyles()
    {
        return $this->fontStyles;
    }

    public function saveTypographySettings($settings) {
        update_option('lifeline_donation_pro_typography', $settings);
    }
    
    public function getTypographySettings() {
        return get_option('lifeline_donation_pro_typography', $this->defaultSettings);
    }
    

    /**
     * Prepare the element for JSON serialization.
     *
     * @return array
     */
    public function jsonSerialize()
    {
        return array_merge(parent::jsonSerialize(), [
            'defaultSettings' => $this->defaultSettings,
            'units' => $this->getUnits(),
            'fontWeights' => $this->getFontWeights(),
            'textTransforms' => $this->getTextTransforms(),
            'fontStyles' => $this->getFontStyles(),
        ]);
    }
}

Is it possible to create a fantasy map (without geospecific data) using leaflet?

I’m trying to create a fantasy map (not geospecific) using leaflet in wordpress as a custom plugin (php and js).But while trying, without geospecific, co-ordinates the map image itself not rendering.

// Navigation.js
import React, { useState } from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { useSelector } from 'react-redux';
import { LoginPage } from '../src/Screens/Auth/Login';
import { TeamBoard } from '../src/Screens/TeamBoard/index';
import { BoardDetails } from '../src/Screens/TeamBoard/BoardDetails';
import Sidebar from '../src/Screens/Components/Sidebar';
import { colors } from '../src/Config/colors';
import { IconButton, Menu, Provider } from 'react-native-paper';
import { Modal, Text, TouchableOpacity, View } from 'react-native';
import { BoardDetailsNav } from '../src/Screens/Components/BoardDetailsNav';
import { AddCard } from '../src/Screens/Components/AddCard';
import { ArchiveTask } from '../src/Screens/Components/ArchiveTask';
import { EditCard } from '../src/Screens/Components/EditCard';
import EvilIcons from 'react-native-vector-icons/EvilIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { PersonalBoard } from '../src/Screens/PersonalBoard';
import { PersonalBoardNav } from '../src/Screens/Components/PersonalBoardNav';
import { AddPersonalCard } from '../src/Screens/Components/AddPersonalCard';
import { EditPersonalCard } from '../src/Screens/Components/EditPersonalCard';
import { TaskCalendar } from '../src/Screens/Calendar';
const Root = createNativeStackNavigator();
const Auth = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
const Stack = createNativeStackNavigator();
import { DrawerActions, useNavigation } from '@react-navigation/native';

export const AuthStack = () => {
  console.log("AuthStack Call");
  return (
    <Auth.Navigator
      headerMode="screen"
      initialRouteName="Login"
      screenOptions={{
        headerShown: false,
      }}>
      <Auth.Screen name="Login" component={LoginPage} />
    </Auth.Navigator>
  );
};
const BoardDetailsStack = () => {
  return (
    <Provider>
      <Stack.Navigator>
        <Stack.Screen
          name="BoardDetails"
          component={BoardDetails}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="AddCard"
          component={AddCard}
          options={{
            headerStyle: {
              backgroundColor: colors.background_color,
            },
            headerTitleStyle: {
              fontFamily: 'Montserrat-Bold',
              color: colors.grey,
              fontSize: 16,
            },
            headerTintColor: colors.grey
          }}
        />
        <Stack.Screen
          name="EditCard"
          component={EditCard}
          options={{
            headerStyle: {
              backgroundColor: colors.background_color,
            },
            headerTitleStyle: {
              fontFamily: 'Montserrat-Bold',
              color: colors.grey,
              fontSize: 16,
            },
            headerTintColor: colors.grey
          }}
        />
        <Stack.Screen
          name="ArchiveTask"
          component={ArchiveTask}
          options={{
            headerStyle: {
              backgroundColor: colors.background_color,
            },
            headerTitleStyle: {
              fontFamily: 'Montserrat-Bold',
              color: colors.grey,
              fontSize: 16,
            },
            headerTintColor: colors.grey
          }}
        />
      </Stack.Navigator>
    </Provider>
  );
};

const PersonalBoardDetailsStack = () => {
  const navigation = useNavigation();
  return (
    <Provider>
      <Stack.Navigator>
        <Stack.Screen
          name="PersonalBoard"
          component={PersonalBoard}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="addPersonalCard"
          component={AddPersonalCard}
          options={({ navigation }) => ({
            headerStyle: {
              backgroundColor: colors.background_color,
            },
            headerTitleStyle: {
              fontFamily: 'Montserrat-Bold',
              color: colors.grey,
              fontSize: 16,
            },
            headerTintColor: colors.grey,
          })}
        />
        <Stack.Screen
          name="editPersonalCard"
          component={EditPersonalCard}
          options={({ navigation }) => ({
            headerStyle: {
              backgroundColor: colors.background_color,
            },
            headerTitleStyle: {
              fontFamily: 'Montserrat-Bold',
              color: colors.grey,
              fontSize: 16,
            },
            headerTintColor: colors.grey,
          })}
        />
      </Stack.Navigator>
    </Provider>
  );
};

export const AppStack = () => {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <Sidebar {...props} />}
      initialRouteName="Boards"
      screenOptions={{
        drawerStyle: {
          padding: 0,
        },
        headerStyle: {
          backgroundColor: colors.background_color,
        },
        headerTintColor: colors.grey,
        headerTitleStyle: {
          fontFamily: 'Montserrat-Bold',
        },
      }}
    >
      <Drawer.Screen
        name="Boards"
        component={TeamBoard}
        options={{ title: 'Boards' }}
      />

      <Drawer.Screen
        name="Calendar"
        component={TaskCalendar}
        options={{ title: 'Calendar' }}
      />

      <Drawer.Screen
        name="PersonalBoardDetailsStack"
        component={PersonalBoardDetailsStack}
        options={{ headerShown: false }}
      />

      <Drawer.Screen
        name="BoardDetailsStack"
        component={BoardDetailsStack}
        options={{ headerShown: false }}
      />
    </Drawer.Navigator>
  );
};



export const RootStack = () => {
  const token = useSelector(state => state?.authReducer?.token);
  console.log("token : ", token);
  return (
    <Root.Navigator screenOptions={{ headerShown: false }}>
      {token ? (
        <Root.Screen name="AppStack" component={AppStack} />
      ) : (
        <Root.Screen name="AuthStack" component={AuthStack} />
      )}
    </Root.Navigator>
  );
};

// Sidebar.js
const Sidebar = props => {
  const user = useSelector(state => state.authReducer.auth);

  const isRouteActive = routeName => {
    return props.state?.routeNames[props.state.index] === routeName;
  };


  const navigateToScreen = (routeName, params = {}) => {
    props.navigation.dispatch(
      CommonActions.navigate({
        name: routeName,
        params: params,
      })
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.userInfo}>
        <Text
          style={{
            backgroundColor: getColor(user.name[0]),
            color: colors.grey,
            width: 80,
            height: 80,
            marginBottom: 10,
            textAlign: 'center',
            lineHeight: 80,
            borderRadius: 50,
            fontSize: 20,
            fontFamily: 'Montserrat-Bold',
            borderWidth: 1,
            borderColor: colors.grey,
          }}>
          {getInitials(user.name)}
        </Text>
        <Text style={styles.name}>{user.name}</Text>
        <Text style={styles.email}>{user.email}</Text>
      </View>

      <DrawerContentScrollView
        {...props}
        contentContainerStyle={{flex: 1, paddingStart: 10}}>
        <DrawerItem
          label="Boards"
          icon={({size}) => (
            <Icon name="dashboard" color={colors.grey} size={size} />
          )}
          labelStyle={styles.drawerItemLabel}
          focused={isRouteActive('Boards')}
          onPress={() => navigateToScreen('Boards')}
        />
        <DrawerItem
          label="Personalboard"
          icon={({size}) => (
            <Icon name="space-dashboard" color={colors.grey} size={size} />
          )}
          labelStyle={styles.drawerItemLabel}
          focused={isRouteActive('PersonalBoardDetailsStack')}
          onPress={() => navigateToScreen('PersonalBoardDetailsStack', {
            screen: 'PersonalBoard',
          })}
        />
        <DrawerItem
          label="Calendar"
          labelStyle={styles.drawerItemLabel}
          icon={({size}) => (
            <Entypo name="calendar" color={colors.grey} size={size} />
          )}
          focused={isRouteActive('Calendar')}
          onPress={() => navigateToScreen('Calendar')}
        />
      </DrawerContentScrollView>
    </View>
  );
};

I have created a navigation drawer for my app using react – navigation but when I tried to customize my drawer I faced issue related to navigation.
I have created a custom drawer component in order to create a fully customized drawer.But as soon as I tried to provide navigation functionality like “props.navigation”
or my “navigateToScreen()” method, it doesn’t move to another screen and also no errors were generated which gave me difficulty to debug the code. Here is my code for more details.
I have done a lot of search for this problem but didn’t got the proper answer.how can i resolve this issue

enter image description here

How can I insert a comma , into this box?
I want to have Comma in this counter. I used the code from this website https://github.com/MikhaelGerbet/jquery-incremental-counter
But I can’t make it have Comma. Please help me. Thanks.

/*
 Plugin Name: jQuery plugin incremental counter
 Plugin URI: https://github.com/MikhaelGerbet/jquery-incremental-counter
 Description: jQuery plugin incremental counter is a simple counter animated
 Author: GERBET Mikhael
 Author URI: https://github.com/MikhaelGerbet
 License: MIT
 */

(function($){
    $.fn.incrementalCounter = function(options){
        //default options
        var defauts = {
                "digits": 4
            },
            pad = function(n, width, z) {
                z = z || '0';
                n = n + '';
                return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
            },
            start = function(element){

                var current_value = parseInt($(element).data('current_value')),
                    end_value = parseInt($(element).data('end_value')),
                    current_speed = 20;

                if(end_value === 0) {
                    return false;
                }


                if (end_value - current_value < 5){
                    current_speed = 200;
                    current_value += 1;
                } else if(end_value - current_value < 15){
                    current_speed = 50;
                    current_value += 1
                } else if(end_value - current_value < 50){
                    current_speed = 25;
                    current_value += 3
                } else{
                    current_speed = 25;
                    current_value += parseInt((end_value - current_value)/24)
                }

                $(element).data({
                    current_value:current_value
                });

                if(current_speed){
                    setTimeout(function(){
                        display($(element),current_value);
                    },current_speed);
                }else{
                    display($(element),current_value);
                }
            },
            display = function(element,value){
                var padedNumber = pad(value, element.data('digits')),
                    exp = padedNumber.split(""),
                    end_value = $(element).data('end_value'),
                    nums = $(element).find('.num');
                $(exp).each(function(i,e){
                    $(nums[i]).text(exp[i]);
                });

                if(end_value != value){
                    start(element);
                }
            },
            //merge options
            options = $.extend(defauts, options);

        this.each(function(index, element){

            var default_digits = options.digits ,
                digits =  element.getAttribute('data-digits') ?  element.getAttribute('data-digits') : default_digits ,
                end_value = parseInt( element.getAttribute('data-value'));

            digits = digits === 'auto' || digits < String(end_value).length ? String(end_value).length : digits;

            //get value
            $(element).data({
                current_value : 0,
                end_value : end_value,
                digits : digits,
                current_speed : 0
            });

            //add number container
            for(var i=0 ; i < digits ; i++){
                $(element).append('<div class="num">0</div>');
            }

            start($(element));

        });
        return this;
    };
})(jQuery);

How can I insert a comma , into this box?

I want to have commas according to the positions in the image.

Hello ChartJS community!

I am hoping someone has figured out how to properly sort “datasets” within their clusters in a ChartJS Bar chart. Below is an example of a bar chart in ChartJS with multiple “datasets”, each with their own label that corresponds with a color/item in the legend.

Here is an image of what the original chart looks like (descending in each cluster)
Chart.JS Bar Example PNG

What I want to do is retain the X-Axis (which is sorted by “Reporting Period”), while having the data points within each X-Axis interval or group be sorted either ascending or descending.

Approaches I have attempted:

1. restructuring the data property in each dataset to match the object structure option
2. using a singular data object and “parsing” properties in each dataset in the datasets array
3. manipulating the datasets array to isolate datapoints across numerous dataset objects with the same label

What I have found with the first two attempts is that with those approaches, the position of each bar associated with each “dataset” will always follow the ordering (i.e. the datasetIndex) of each dataset in the datasets array within its group…

I found that the third attempt achieved the desired sorting, but that manipulation causes redundant legend labels.

Here is an image of what the desired sorting looks like (ascending in each cluster)

chart clusters sorted

Here is what the “original” display data looks like
Chart Data

{
  "datasets": [
    {
      "label": "Respondent 1",
      "data": [
        750,
        null,
        null,
        null
      ],
      "borderRadius": 5,
      "backgroundColor": "#1E81D3",
      "borderColor": "#ccc",
      "spanGaps": true,
      "order": 0
    },
    {
      "label": "Respondent 2",
      "data": [
        null,
        33921,
        100001,
        3999
      ],
      "borderRadius": 5,
      "backgroundColor": "#063F84",
      "borderColor": "#ccc",
      "spanGaps": true,
      "order": 1
    },
    {
      "label": "Respondent 3",
      "data": [
        null,
        419,
        21583,
        488
      ],
      "borderRadius": 5,
      "backgroundColor": "#0D5AB7",
      "borderColor": "#ccc",
      "spanGaps": true,
      "order": 2
    }
  ],
  "labels": [
    "2017 Fiscal Year (Jul-Jun) - H2",
    "2022 Fiscal Year (Jan-Dec) - H2",
    "2023 Fiscal Year (Jan-Dec) - H1",
    "2023 Fiscal Year (Jan-Dec) - H2"
  ],
  "yAxisLabel": "Cubic Meters"
}

here is what the data looks like after resorting (3rd attempt outlined above)

{
  "datasets": [
    {
      "label": "Respondent 1",
      "data": [
        750,
        null,
        null,
        null
      ],
      "backgroundColor": "#1E81D3",
      "borderColor": "#ccc",
      "borderRadius": 5
    },
    {
      "label": "Respondent 3",
      "data": [
        null,
        419,
        null,
        null
      ],
      "backgroundColor": "#0D5AB7",
      "borderColor": "#ccc",
      "borderRadius": 5
    },
    {
      "label": "Respondent 2",
      "data": [
        null,
        33921,
        null,
        null
      ],
      "backgroundColor": "#063F84",
      "borderColor": "#ccc",
      "borderRadius": 5
    },
    {
      "label": "Respondent 3",
      "data": [
        null,
        null,
        21583,
        null
      ],
      "backgroundColor": "#0D5AB7",
      "borderColor": "#ccc",
      "borderRadius": 5
    },
    {
      "label": "Respondent 2",
      "data": [
        null,
        null,
        100001,
        null
      ],
      "backgroundColor": "#063F84",
      "borderColor": "#ccc",
      "borderRadius": 5
    },
    {
      "label": "Respondent 3",
      "data": [
        null,
        null,
        null,
        488
      ],
      "backgroundColor": "#0D5AB7",
      "borderColor": "#ccc",
      "borderRadius": 5
    },
    {
      "label": "Respondent 2",
      "data": [
        null,
        null,
        null,
        3999
      ],
      "backgroundColor": "#063F84",
      "borderColor": "#ccc",
      "borderRadius": 5
    }
  ],
  "labels": [
    "2017 Fiscal Year (Jul-Jun) - H2",
    "2022 Fiscal Year (Jan-Dec) - H2",
    "2023 Fiscal Year (Jan-Dec) - H1",
    "2023 Fiscal Year (Jan-Dec) - H2"
  ],
  "yAxisLabel": "Cubic Meters"
}

After all that, I thought there must be a better way…

I have a Java application where the user can write (mostly simple) JavaScripts to define how to calculate certain numbers. In Java those numbers are BigDecimal to avoid floating point inaccuracies.
I want to mimic the behaviour of BigDecimal in JavaScript without the user having to know anything about it.
Ideally I want a simple scipt which is evaluated in GraalJS that looks like this

var x = 0.1;
var y = 0.2;
var z = x + y;
z;

to return 0.3 (and not 0.3000000004) and not having to change the syntax.

I tried using BigDecimals themself to mitigate the inaccuracies, which works fine but requires to change the syntax.
In addition to that I used operator overloading which at least simplified the calculation part, but the variables would still need to be explicitly created as BigDecimal (with Operator Overloading):

var x = new BigDecimalWithOperatorOverloading(0.1);
var y = new BigDecimalWithOperatorOverloading(0.2);
var z = x + y;
z;


=> returns 0.3

Next I looked into defining a proxy for number, which did not work:

const globalProxy = new Proxy(globalThis, {
    set(target, prop, value) {
        if (typeof value === "number") {
            value = new BigDecimalWithOperatorOverloading(value);
        }
        target[prop] = value;
        return true;
    },
    get(target, prop) {
        return target[prop];
    }
});


const originalPrototype = Object.getPrototypeOf(globalThis);

var x = 0.1;

=> typeof x is number (should be BigDecimalWithOperatorOverloading)

jenkins@71d539d1d825:/tmp/tmp/exchange-h5$ head -1  dist/assets/details-BKMtEiDY.js 
/* Bundle Time: Mon Dec 16 2024 10:03:35 GMT+0000 (Coordinated Universal Time) */
jenkins@71d539d1d825:/tmp/tmp/exchange-h5$ date
Mon Dec 16 18:15:27 CST 2024

Why the time zone of the js file is inconsistent with the system time zone, I want to know where the time zone of the js file comes from, I can provide more information if necessary，thanks

My command is (sh)

export NVM_DIR="/var/jenkins_home/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
nvm use 20
npm config set registry https://registry.npmmirror.com
npm install
npm run build:test

I have no clue because I don’t know enough about npm. I hope the js file can use the system time zone or the time zone I specify.

I have a use case (in my NodeJS app) where I want to allow the users to input the URL of a public folder on OneDrive and Dropbox and doing that should let them choose and download the images that they want saved.

For now, I am doing that with any website where they can input the link and I scrape that site, get all the images and let them download those. This is being done through socket and here’s a snippet of the code that does this:

        socket.on('scrapeURL', async (targetUrl: string) => {
          try {
            if (!targetUrl) {
              socket.emit('scrapeError', 'Target URL not found.')
              return
            }


            if (targetUrl.startsWith("http://")) {
              socket.emit('scrapeError', 'Invalid Target URL.')
              return
            }

            if (!targetUrl.startsWith("https://")) {
              targetUrl = "https://" + targetUrl;
            }

            const svgs: any = []
            const images: any = []
            const tempSvgs: any = []
            const tempImages: any = []

            socket.emit('scrapeProgress', `Fetching ${targetUrl}.`)

            let response;
            try {
              response = await axios.get(targetUrl, {
                headers: {
                  'Content-Type': 'application/json',
                  'User-Agent': 'myapp-backend-server',
                  Accept: '*/*',
                  Connection: 'keep-alive'
                }
              })
            } catch (error) {

              socket.emit('scrapeError', 'Unable to fetch the target URL.')
              return
            }

            const html = response?.data || undefined

            if (!html) {
              socket.emit('scrapeError', 'Unable to fetch the target URL.')
              return
            }

            socket.emit('scrapeProgress', 'Loading data to Cheerio.')

            // Load HTML content into Cheerio
            const $ = cheerio.load(html)

            socket.emit('scrapeProgress', 'Getting images details.')

            // Extracting images
            $('img').each((index, element) => {
              const imageUrl = $(element).attr('src')
              const lazyImageUrl = $(element).attr('data-lazy-src')
              const imgUrl = lazyImageUrl || imageUrl || null

              if (imgUrl) {
                tempImages.push(url.resolve(targetUrl, imgUrl))
              }
            })

            // Extracting background images
            $('[style]').each((index, element) => {
              const style = $(element).attr('style')
              if (style && style.includes('background-image')) {
                const regex = /url(['"]?(.*?)['"]?)/
                const match = regex.exec(style)
                if (match && match[1]) {
                  tempImages.push(match[1])
                }
              }
            })

            socket.emit('scrapeProgress', 'Getting SVGs details.')

            // Extracting SVGs
            $('svg').each((index, element) => {
              const svgContent = $.html(element)
              tempSvgs.push(
                `data:image/svg+xml,${encodeURIComponent(svgContent)}`
              )
            })

            for (const image of tempImages) {
              if (await this.isImageValid(image)) {
                images.push(image)
              }
            }

            for (const svg of tempSvgs) {
              if (await this.isImageValid(svg)) {
                svgs.push(svg)
              }
            }

            socket.emit('scrapeResult', {
              fonts,
              images,
              svgs,
              colors,
              allFonts: fonts?.length ?? 0,
              allImages: images?.length ?? 0,
              allSvgs: svgs?.length ?? 0,
            })
          } catch (error: any) {
            if (error?.message && error.message.includes('ENOTFOUND')) {
              socket.emit('scrapeError', Err.notFound('Target URL not found.'))
            } else {
              socket.emit('scrapeError', `Target URL not found.`)
            }
          }
        })

What I want to do now is let the people input a URL of Dropbox or OneDrive that is a public folder and they can select which images (I would like a thumbnail of those images so they can select them) they would like to choose. Whichever they choose, are downloaded.

How can I accomplish this? Any help or guidance would be greatly appreciated.

Thank you.

I am doing one research to check, is it possible to convert large html to pdf using javascript ?

I have sample html placed in assest folder of project and added one button which will convert the html to pdf using jsPdf.

index.html

<!DOCTYPE html>
<html lang="en">

<head>

    <!-- html2canvas library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <!-- jsPDF library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

    <script src="app.js"></script>

    <link rel="stylesheet" type="text/css" href="index_files/style.css" />
    </head>

<body>

    <!-- Trigger button -->
    <button onclick="Convert_HTML_To_PDF();">Convert HTML to PDF</button>

    <!-- HTML content for PDF creation -->
    <div id="contentToPrint">
        <div class="stl_view">
                    <div class="stl_05 stl_06">
                        <div class="stl_01" style="left:21.2717em;top:3.4123em;"><span class="stl_10 stl_08 stl_11" style="word-spacing:0.0001em;">Intermediate report &nbsp;</span></div>
                        <div class="stl_01" style="left:17.0383em;top:14.3364em;"><span class="stl_22 stl_08 stl_11" style="word-spacing:0.0004em;">This page is intentionally left blank. &nbsp;</span></div>
                    </div>
         </div>
    </div>
</body>
</html>

app.js

window.jsPDF = window.jspdf.jsPDF;

// Convert HTML content to PDF
function Convert_HTML_To_PDF() {
    var doc = new jsPDF();
    
    // Source HTMLElement or a string containing HTML.
    var elementHTML = document.querySelector("#contentToPrint");

    doc.html(elementHTML, {
        callback: function(doc) {
            // Save the PDF
            doc.save('document.pdf');
        },
        margin: [10, 10, 10, 10],
        autoPaging: 'text',
        x: 0,
        y: 0,
        width: 190, //target width in the PDF document
        windowWidth: 675, //window width in CSS pixels
    });
}

here is my code i tried in stackblitz

issue is: downloaded pdf is not correctly formatted/aligned with html.

what is the issue ? can someone help me to find where i am making mistake ?

Thanks in advance!

Subject

if I install important libraries (ex: react) used by projects in the workspace at the root level, will they be automatically included in the bundle when building?

Description

i’m setting up a monorepo using lerna v8.

i don’t know exactthe relationship between the dependencies installed at root-level and the dependencies of projects in the workspace.

i experimented and found that both dev and build were possible as long as the workspace project’s package.json contained a library (like react) at the root level.

in some articles it says to declare peerDependencies. But isn’t this just a warning?

Conclusion

i want to know how exactly to structure dependencies in a monorepo environment.

i was trying to run a command inside a spawned command prompt from my electronJs App(using nodeJs) for application update:

        const exeFile = `Setup_3.4.2.exe`;
        const exeFullPath = path.join(targetPath, exeFile);
        log.info("exeFullPath",exeFullPath);
        const command = `timeout /t 8 /nobreak && "${exeFullPath}"`;
        log.info("executing command", command);

        const child = spawn('cmd.exe', ['/C',command], {
          cwd: targetPath,
          detached: true,
          stdio: 'ignore',
        });
        child.unref();
        app.exit(0);
        child.on('error', (err) => {
          console.error('Failed to start process:', err);
        });

        child.on('exit', (code) => {
          console.log(`Process exited with code ${code}`);
        });

The problem here is that the cmd spawns successfully and the countdown happens as well but the exe doesn’t open. When i am running the same command on a separately opened cmd it works.
the logs are as follows:

13:22:41.296 > exeFullPath C:UsersAdminAppDataRoamingMy-AppSetup_3.4.2.exe
13:22:41.298 > executing command timeout /t 8 /nobreak && "C:UsersAdminAppDataRoamingMy-AppSetup_3.4.2.exe"

I am aware that instead of cmd.exe i can directly pass the path to installer but that won’t work in my case since a process of my app is running when the installer opens without any delay and hinders the installation as it shows an instance of app is already running, thus i am trying to add delay so that my app can exit meanwhile and the cmd.exe spawns my installer instead.

I recently started a strapi v5 project, and faced the same issue as in my other strapi projects, that at some point I must populate queried data with the id of the current user.

More precisely, I want to create an instance of “Team” which has a FK to the users-permissions-user which I want to set to the current user making the request.

And in v5 as in the versions before this seems to be unnecessarily complicated. As of v5 strapi recommends using lifecycle hooks instead of the entityService to create this relation. I’ve tried variations of the following:

const {data} = ctx.request.body;
    const userId = ctx.state.user?.id;

    if (!userId) {
      return ctx.badRequest("User not authenticated");
    }

    const response = await strapi.entityService.create(
      "api::team.team",
      {
        data: {
          ...data,
          user: userId
        }
      }
    );

    return {response};

also this:

let team = await strapi.documents('api::team.team').create({
      data: {
        teamName: 'asdasd',
        members: ['asdasd', 'asasd'],
        user: 11 // should be the userid, hardcoded for debugging purposes
      }
    });

Can anyone help me achieving this?

Greetz
DeM

I use elementor pro with besa thembay theme. My issue was: Using tabs widget, inside every tab i had a loop carousel with custom product loop item using cta widget.

First tab loop item links was working (hovering animations and link)
The other loop items in the other tabs wasnt reacting at all (no hover animations and no link) till the slider moves to the next slides. After this they worked. This issue was happening in every tab except the first.

Someone said on the GitHub forum that this issue was fixed in a previous version of Elementor, but apparently the error is back now.