Category: javascript

Here is the usage of “new L.Routing.Control()“:

Leaflet Routing Machine – Usage of options

I copied the code and then modify it by adding two “routingControl_1” and “routingControl_2“:

var routingControl_1 = new L.Routing.Control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    show: false
}).addTo(map);

var routingControl_2 = new L.Routing.Control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    show: false
}).addTo(map);

But the two “L.Routing.Control()“s have the same icon “leaflet.routing.icons.png” in the UI.

Here is the source code related to “leaflet.routing.icons.png”:
(I downloaded this project and then search all files contains the keyword “leaflet.routing.icons.png“)

https://github.com/perliedman/leaflet-routing-machine/blob/master/dist/leaflet-routing-machine.css

.leaflet-routing-icon {
  background-image: url('leaflet.routing.icons.png');
  -webkit-background-size: 240px 20px;
  background-size: 240px 20px;
  background-repeat: no-repeat;
  margin: 0;
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
}

https://github.com/perliedman/leaflet-routing-machine/blob/master/src/itinerary-builder.js

createStep: function(text, distance, icon, steps) {
  var row = L.DomUtil.create('tr', '', steps),
    span,
    td;
  td = L.DomUtil.create('td', '', row);
  span = L.DomUtil.create('span', 'leaflet-routing-icon leaflet-routing-icon-'+icon, td);
  td.appendChild(span);
  td = L.DomUtil.create('td', '', row);
  td.appendChild(document.createTextNode(text));
  td = L.DomUtil.create('td', '', row);
  td.appendChild(document.createTextNode(distance));
  return row;
}

The “createStep: function(text, distance, icon, steps)” has an icon argument, but I don’t know how to set it when creating the “new L.Routing.Control()“.

# Here is the dummy code.

var routingControl_1 = new L.Routing.Control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    show: false,
    custom_icon: /path/to/my_icon_1.png
}).addTo(map);

var routingControl_2 = new L.Routing.Control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    show: false,
    custom_icon: /path/to/my_icon_2.png
}).addTo(map);

How to set the custom icon for L.Routing.Control?

There are two headings defined as below:

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At risus viverra adipiscing at in tellus integer feugiat. Eu lobortis elementum nibh tellus molestie nunc. Sagittis purus sit amet volutpat. Facilisis leo vel fringilla est. Luctus venenatis lectus magna fringilla urna. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae. Amet consectetur adipiscing elit ut aliquam. Commodo ullamcorper a lacus vestibulum sed arcu non odio. Gravida cum sociis natoque penatibus et magnis dis. Sit amet venenatis urna cursus eget nunc scelerisque. Mollis aliquam ut porttitor leo a diam. Vestibulum mattis ullamcorper velit sed. Tellus rutrum tellus pellentesque eu tincidunt.</h1>

<h1>{text}</h1>

First one respects defined width as aqua:

Second one doesn’t respect defined width and destroys the whole layout:

text is updated by JavaScript after both of headlines are rendered. At render time the length of h1 content is zero (text = '') and heading renders correctly. I assume after JS starts to change it the h1 doesn’t know the actual length of content and it can’t compute the wrap correctly.

I tried to give width and max-width properties to the second h1. There were no changes in behaviour but I confirmed it goes out of width as red:

What should be the correct approach that second headline respects the width?

I am trying to improve the script injection in chrome extension. As per the previous implementation written using manifest version 2, a function string was coming in the response of an API call and then the function string is again wrapped inside another function string and then passed to the executeScript function to do it’s task.

For Ex:
Let say API call send the below function string in the response:

function() {perform_login(doc)};

Now, it is again processed and converted to the below function string

const script = “function() {” + execTag + “n perform_login(document); }”;

Where execTag is the variable holding the value of API response function string. And the inject function is called as below

chrome.tabs.executeScript(tabId, {code, run_at: “document_end”}, executeCallback);

where

code = “(” + someWrapperFn + “)” + “(” + script + “)”;

and executeCallback is some other function that will execute during the process.

Now, as per the manifest version 3 executeScript docs – The format of executeScript is changed and now there is no code object.

How can I change the current implementation so that it injects scripts properly. How can I convert the function strings to normal functions.

P.S. I tried using the eval() to convert the string to normal function but chrome extension is not allowing it stating content security policy violation.

following these docs https://mukulsib.readme.io/reference/sendwhatsappmessage

i wrote this code:

import axios from 'axios';

const API_KEY = '/i got api key from brevo SMTP & API page/';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { phoneNumbers, Message } = req.body;

    for (const phone of phoneNumbers) {
        const options = {
            method: 'POST',
            headers: {
              accept: 'application/json',
              'content-type': 'application/json',
              'api-key': API_KEY,
            },
            body: JSON.stringify({
                senderNumber: '123456789', 
                text: Message, 
                contactNumbers: [phone,]
            })
        };

            try {
                const response = await axios.request(options);
                console.log(`Message sent successfully to ${phone}`);
                console.log('Response data:', response.data);
            } catch (error) {
                console.error(`Error sending message to ${phone}:`, error.message);
            }
        }
    
            res.status(200).json({ message: 'Messages sent' });
        } else {
            res.status(405).json({ error: 'Method not allowed' });
        }
    }

and when i try it on the docs page i get this error:
{“code”: “permission_denied”, “message”: “Your account is not registered”}

This is the App.jsx file

import { Canvas } from "@react-three/fiber"
import Experience from "./components/Experience"
function App() {
  return (
    <Canvas>
      <Experience />
    </Canvas>
  )
}

export default App

This is Experience.jsx file I add boxBufferGeometry and it is not workink

const Experience = () => {
    return (
        <mesh>
            <boxBufferGeometry />
            <meshNormalMaterial />
        </mesh>
    )
}

export default Experience

We are currently modifying the code that changes the amount according to each option.

However, I would like to modify the ‘value’ of option 2 and ‘value’ of option 3 to change according to option 1.

For example, if option 1-1 is selected, the amount of 2-2 is -1, but if option 1-2 is selected, the amount of 2-2 is -2.

I would like the amount of the final TOTAL to be revised according to the revised value value.

$('.form-item input').on('change', function() {
  // addition and subtraction here
  var $this;
  var sum = 0;

  $('.form-item input').each(function() {
    $this = $(this);

    if ($this[0].checked == true) {
      sum += parseInt($this.val());
    }

    $('.total span').html(sum.toLocaleString('en-US'));
  })
});

.form-wrap {
  display: block;
  margin: 0 auto;
  width: 480px;
}

.form-text {
  text-align: left;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 15px;
  color: #bbb;
  padding: 0 5px;
}

#fm-title {
  color: #444;
  font-weight: 600;
}

#op-title {
  font-weight: 600;
  font-size: 20px;
  color: #444;
}

.form-item {
  margin-bottom: 5px;
}

.form-item input[type=radio] {
  display: none;
}

.form-type-radio {
  text-align: center;
  margin-bottom: 35px;
}

.form-item input[type=radio]+label {
  display: inline-block;
  cursor: pointer;
  height: 115px;
  width: 480px;
  border: 2px solid #ddd;
  line-height: 1.5;
  text-align: left;
  font-weight: 400;
  font-size: 16px;
  padding: 26px 45px;
  border-radius: 20px;
}

.form-item input[type=radio]+label {
  background-color: #fff;
  color: #bbb;
  font-weight: 400;
}

.form-item input[type=radio]:checked+label {
  background-color: #fff;
  color: #bbb;
  border-color: #444;
}

.total {
  font-size: 22px;
  font-weight: 600;
  height: 65px;
  padding: 15px 15px;
  text-align: center;
  color: #555;
}

#bm-text {
  font-size: 18px;
  width: 100%;
  font-weight: 400;
  color: #555;
  padding: 0 5px;
  margin-bottom: 40px;
}

#bm-text p {
  margin-bottom: 20px;
}

@media (max-width: 991px) {
  .form-wrap {
    width: 100%;
  }
  .form-item input[type=radio]+label {
    width: 100%;
    height: 70px;
    line-height: 1.4;
    padding: 17px 25px;
    font-size: 12px;
    border: 1px solid #ddd;
  }
  .form-text {
    font-size: 14px;
    margin-bottom: 10px;
  }
  #op-title {
    font-size: 13px;
  }
  .form-item {
    margin-bottom: 1px;
  }
  .form-type-radio {
    margin-bottom: 20px;
  }
  .total {
    font-size: 17px;
    font-weight: 500;
    padding: 10px 10px;
    color: #444;
  }
  #bm-text {
    font-size: 12px;
    margin-bottom: 20px;
  }
  #bm-text p {
    margin-bottom: 15px;
  }
}

<div class="form-wrap">
  <div class="form-type-radio">
    <div class="form-text">OPTION 1</div>
    <div class="form-item">
      <input type="radio" id="radio-1" name="samename" value="1800000" class="form-radio" checked="checked">
      <label class="option" for="radio-1"><span id="op-title">1-1</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-2" name="samename" value="2500000" class="form-radio">
      <label class="option" for="radio-2"><span id="op-title">1-2</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-3" name="samename" value="6000000" class="form-radio">
      <label class="option" for="radio-3"><span id="op-title">1-3</span></label>
    </div>
  </div>

  <div class="form-type-radio">
    <div class="form-text">OPTION 2</div>
    <div class="form-item">
      <input type="radio" id="radio-4" name="samename1" value="0" class="form-radio" checked="checked">
      <label class="option" for="radio-4"><span id="op-title">2-1</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-5" name="samename1" value="-700000" class="form-radio">
      <label class="option" for="radio-5"><span id="op-title">2-2</span></label>
    </div>
  </div>
  <div class="form-type-radio">
    <div class="form-text">OPTION 3</div>
    <div class="form-item">
      <input type="radio" id="radio-6" name="samename2" value="0" class="form-radio" checked="checked">
      <label class="option" for="radio-6"><span id="op-title">3-1</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-7" name="samename2" value="2000000" class="form-radio">
      <label class="option" for="radio-7"><span id="op-title">3-2</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-8" name="samename2" value="-1300000" class="form-radio">
      <label class="option" for="radio-8"><span id="op-title">3-3</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-9" name="samename2" value="-600000" class="form-radio">
      <label class="option" for="radio-9"><span id="op-title">3-4</span></label>
    </div>
  </div>

  <div class="form-type-radio">
    <div class="form-text">OPTION 4</div>
    <div class="form-item">
      <input type="radio" id="radio-10" name="samename3" value="0" class="form-radio" checked="checked">
      <label class="option" for="radio-10"><span id="op-title">4-1</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-11" name="samename3" value="100000" class="form-radio">
      <label class="option" for="radio-11"><span id="op-title">4-2</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-12" name="samename3" value="300000" class="form-radio">
      <label class="option" for="radio-12"><span id="op-title">4-3</span></label>
    </div>
  </div>

  <div class="form-type-radio">
    <div class="form-text">OPTION 5</div>
    <div class="form-item">
      <input type="radio" id="radio-13" name="samename4" value="0" class="form-radio" checked="checked">
      <label class="option" for="radio-13"><span id="op-title">5-1</span></label>
    </div>

    <div class="form-item">
      <input type="radio" id="radio-14" name="samename4" value="300000" class="form-radio">
      <label class="option" for="radio-14"><span id="op-title">5-2</span></label>
    </div>
  </div>
  <div class="total">TOTAL <span>0</span></div>
</div>

In the picture below you can see a line-chart (created with Chart.js). I just have one item with different values from time to time. This item have a reference range.

As example:

• Reference range is: 80 – 110
• Item values are: [100, 110, 99, ….]

Now I would like to display this reference range without data points in the chart, that the user can see if a value is out of the reference range.

My question is how I can do that. I’ve already looked for possible ways to do that, but haven’t found a solution.

I have this error when I upload my GitHub proyect to Vercel:

Error: Please install mysql2 package manually
at ConnectionManager._loadDialectModule (/var/task/node_modules/sequelize/lib/dialects/abstract/connection-manager.js:55:15)
at new ConnectionManager (/var/task/node_modules/sequelize/lib/dialects/mysql/connection-manager.js:30:21)
at new MysqlDialect (/var/task/node_modules/sequelize/lib/dialects/mysql/index.js:13:30)
at new Sequelize (/var/task/node_modules/sequelize/lib/sequelize.js:194:20)
at Object. (/var/task/database/models/index.js:16:15)
at Module._compile (node:internal/modules/cjs/loader:1356:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
at Module.load (node:internal/modules/cjs/loader:1197:32)
at Module._load (node:internal/modules/cjs/loader:1013:12)
at exports.b (/var/task/___vc/__launcher/chunk-5UAC7W5H.js:1:1142)
INIT_REPORT Init Duration: 790.86 ms Phase: invoke Status: error Error Type: Runtime.ExitError
Error: Runtime exited with error: exit status 1
Runtime.ExitError

This is my index.js

// -------------------- REQUIREMENTS --------------------

const express = require("express")
const mainRouter = require("./src/routers/mainRouter")
const methodOverride = require("method-override");
const session = require ('express-session');

// ---------- MIDDLEWARES ----------

const error404Middleware = require("./src/middlewares/error404Middleware")
const sessionExists = require("./src/middlewares/sessionExists")

// -------------------- APP --------------------

const app = express()

// -------------------- CORS --------------------

const cors = require("cors");
app.use(
    cors(
        (corsOptions = {
        origin: "*",
        })
    )
);

// -------------------- SETTINGS --------------------

app.set("view engine", "ejs")
app.set("views", __dirname + "/src/views")

// -------------------- USES --------------------

app.use(express.static(__dirname + "/public"))
app.use(methodOverride("_method"))
app.use(
    session({
        secret:"sessionGeneral",
        resave:false,
        saveUninitialized:false,
    })
)
app.use(express.urlencoded({extended: false}))
app.use(sessionExists)

// -------------------- ROUTERS --------------------

app.use(mainRouter)
app.use(error404Middleware)

// -------------------- SERVER --------------------

const PORT = process.env.PORT || 3024
app.listen(PORT, () => console.log(`running server on port ${PORT}`))

I tried to reinstall mysql2 and exempt mysql2 folder from node_modules on .gitignore file but still I have the same error.
I expect to remove the error to upload this proyect to Vercel.

I am building an Electron application with Vue, Tailwind, and Flowbite for components. However, I am encountering an issue when using Flowbite components that rely on JavaScript. I have followed the documentation and installed Flowbite in the project, importing it as follows:

src/main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { initFlowbite } from 'flowbite';

import 'flowbite/dist/flowbite.min.css';

import './assets/css/imports.css'

const app = createApp(App)
app.use(initFlowbite)
app.use(router)
app.mount('#app')

./assets/css/imports.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('animations.css');
@import url('fonts.css');
@import url('reset.css');

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/flowbite/**/*.js"
  ],
  darkMode: true,
  theme: {
    extend: {
      colors: {
        'syer-primary': '#8B5FED',
        'syer-secondary': '#3F88D3',
      },
    },
  },
  plugins: [
    require('flowbite/plugin')
  ]
}

Within this setup, when I run the project, the visual aspects and CSS of the components work normally. However, components requiring JavaScript, such as a modal, do not function as expected. Interestingly, if I make a change and save the src/main.js file, triggering a Vue server reload, the Flowbite JavaScript seems to be imported, and the components work correctly.

I have attempted the following solutions to address the issue:

• Import modules separately

import { initFlowbite, /* other necessary modules */ } from 'flowbite';

• Import Flowbite JS via CDN in public/index.html

<script src="https://cdn.jsdelivr.net/npm/flowbite@latest/dist/flowbite.min.js"></script>

• Directly import Flowbite JS in the component

import 'flowbite/dist/flowbite.min.js';

• Create middleware to import Flowbite on all routes when called

// Sample middleware implementation
const flowbiteMiddleware = (to, from, next) => {
  import('flowbite/dist/flowbite.min.js').then(() => {
    // Continue navigation
    next();
  }).catch((error) => {
    console.error('Failed to load Flowbite:', error);
    // Handle error and proceed with navigation
    next();
  });
};

//Vue router middleware implementation
router.beforeEach(flowbiteMiddleware);

None of the above solutions have resolved the issue for me.

I have used the following JSFIDDLE gauge chart. I am looking for to add new plotBand at spesific range of (from ,to).

But, when i add new plotBand, by the followind command:

chart.yAxis[0].addPlotBand({
                from: 0,
                to: 100,
                color: "#E0E0E0",
                thickness: "10%",
            });

the new added plotBand does not completely cover the old plotBand and the old one’s border is visible!. How can hide completely the old one?
I must say that, using addPlotBand function is my only approach to add plotband.

I noticed a strange bug (or a shortcoming) of the JavaScript Range API. Once attached, the range object cannot be released manually in any way. There is a detach() method, but according to the docs it does nothing and is left for compatibility.

The issue becomes apparent when you try attaching large quantities of ranges to nodes (easily observable on 10000+ nodes). Subsequent removals of any node from the DOM suffer from more than 50% increases of processing times for removal methods, such as setting innerHTML, using removeChild(),replaceChildren() etc.

With no way to release the range objects, is there any way to remedy this slow down of node removal? Or am I better suited opening an issue report for Chromium and Firefox?

// Create test nodes
let html = "";
for (let i = 0; i < 50000; i++) {
  html += "<p>Test paragraph</p>";
}

document.body.innerHTML += html;

// Attach ranges
for (const paragraph of document.querySelectorAll("p")) {
  let range = new Range();
  range.setStart(paragraph.childNodes[0], 0);
  range.setEnd(paragraph.childNodes[0], 2);
}

// Log the performance result of trying to delete nodes after attaching a range

document.querySelector("button").onclick = () => {
  console.log("beginning delete...");
  console.time("perftest");
  document.body.innerHTML = "";
  console.timeEnd("perftest");
};

<button>Click me to delete</button>

What I mean by that is if Im scrolling down, my character will move along the path, but the view will ALWAYS show him in the center of my view. I need this to see upcoming obstacles in my way.

Here is my code (html):

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div style="height: 175px"></div>
    <div class="container">
      <div style="position: relative">
        <img
          class="crossLine"
          src="/public/pngegg.png"
          width="580"
          height="1500"
          alt=""
        />
        <svg
          width="540"
          height="2990"
          viewBox="0 0 540 2990"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="middlePath"
        >
          <defs>
            <path
              id="Path_440"
              d="M253.744 2C253.744 2 8.36236 68.4995 17.2435 261C26.1246 453.5 380.243 311.5 380.243 531C380.243 750.5 15.2436 631.5 2.24357 826C-10.7564 1020.5 500.798 1091 535.244 1258.5C569.689 1426 296.243 1473 279.744 1460.5"
              stroke="#F39029"
              stroke-width="4"
            />
          </defs>
          <use href="#Path_440" stroke-dasharray="20 10" />
          <use id="theFill" href="#Path_440" />
        </svg>
        <svg
          id="pathIcon"
          viewBox="0 0 100 191"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <rect width="100" height="191" fill="url(#pattern0)" />
          <defs>
            <pattern
              id="pattern0"
              patternContentUnits="objectBoundingBox"
              width="1"
              height="1"
            >
              <use
                xlink:href="#image0_126_965"
                transform="matrix(0.00376726 0 0 0.00197239 -0.00104536 0)"
              />
            </pattern>
            <image
              id="image0_126_965"
              width="266"
              height="507"
              xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUh"
            />
          </defs>
        </svg>
      </div>
    </div>
  </body>
</html>

Here is my code (css):

height: 500vh;
background: #f1f1f1;
}
.container {
display: flex;
justify-content: center;
}
#pathIcon {
position: absolute;
inset: 0;
width: 100px;
height: 100px;
offset-rotate: 0rad;
}
.middlePath {
position: absolute;
}
.crossLine {
position: absolute;
}

Here is my code (js):

pathIcon.style.offsetPath = `path('${Path_440.getAttribute("d")}')`;
const pathLength = Path_440.getTotalLength();

      function clamp(min, val, max) {
        return Math.min(Math.max(min, val), max);
      }
    
      function updatePath() {
        const docElt = document.documentElement;
        const pathBox = theFill.getBoundingClientRect();
        // calculates scroll progress based on viewport progress
        const scrollProgress = clamp(
          0,
          -pathBox.y / (pathBox.height - docElt.clientHeight),
          1
        );
    
        pathIcon.style.offsetDistance = `${scrollProgress * 100}%`;
    
        // These lines fill in the dashes as you scroll down.
        const drawLength = pathLength * scrollProgress;
        const rest = pathLength - drawLength;
        theFill.style.strokeDasharray = `${drawLength}px ${rest}px`;
      }
    
      updatePath();
      window.addEventListener("scroll", () => updatePath());

I want to see the character move center of viewport but alway move along the path. Please help me

i have my text area initalized in a form.after submiting the data in the form i want to empty the text area which has ck editor plugin.my issue here is when i try to empty it using this code i get an error in the console log Uncaught ReferenceError: CKEDITOR is not defined

here is my ajax code where am trying to empty the data in the textarea.

    $.ajax({
            url: 'create-book',
            method: 'POST',
            processData: false,
            contentType: false,
            data: formdata,
            success: function(response) {
               CKEDITOR.instances['bookDesc'].setData('')
            }
      });

already i have intitalized the editor this way when loading the page

    $(document).ready(function() {
        let theEditor;
        ClassicEditor.create( document.querySelector( '#bookDesc' ),
        {
            toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote','|',
                    'undo', 'redo',]
        })
        .then(editor => {
            theEditor = editor;
        })

        .catch( error => {
            console.error( error );
        });
    });

in the layout file i have placed the links this way

   <script src="{{ asset('assets/jquery/jquery-3.7.1.min.js') }}"></script>
   <script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
    <script src="{{ asset('assets/admin_js/script.js') }}"></script>```

i have tried a couple of solutions but none is working.which part might i be missing the point here

Is there any way to prevent browser from searching inside a specific input/textarea during CTRL+F search?

I have a simple JSON parser (enter data on the left in a textarea and it get’s beautified on the right) and I want to search some string only on the right beautified side, not in the textarea too. I can think of some hacks (hiding the textarea/text after parse), but I don’t want any of that, I want the textarea to remain visible and with my text so I can dynamically update it

How to disconnec the db connection in node js