Category: javascript

I have an element that is clickable and focusable but it is not a button.

I have used the tabindex="0" attribute so it can be tab focused.

For buttons, if you tab focus onto them and hit Enter/Space, it is effectively the same as clicking it.

I want to replicate the exact same behaviour with my element.

I assume there is a built-in way of doing this besides using a keydown event listener but I can’t find a solution.

I am trying to make a progress bar and need to use an EventListener to get the fileSize from an Object, only that I am being told that addEventListener is not a function.

Here is my js code:

function progressBar(){

    const file = document.getElementById("fileList").value;
    file.addEventListener("change", () => console.log("Progress started"));

    fetch(`/application/${file}/lines`,{

        method: 'GET'

    }).then(response => {

        const reader = response.body.getReader();
        const totalSize = Number(response.headers.keys('content-lenght'))
        let totalProgress = 0;

        function readData(){

            return reader.read().then(result => {

                if(result.value){

                    totalProgress += result.value.length;
                    const percentage = Math.floor((totalProgress / totalSize) * 100);

                    console.log(`${totalProgress} / ${totalSize} (${percentage})`)

                }

            })

        }

        return readData();

    })

}

I want to make a custom lookup in material-table to look like this multiple select seen in the material-ui documentation

The problem is that a Select field with the multiple prop requires that value is an array, which I cant get to work. Is there any way to get around this?

This code is just for a basic Select field under the filterComponent.

filterComponent: ({ columnDef, onFilterChanged }) => (
    <Select
        value={[columnDef.tableData.filterValue]}
        variant={"standard"}
        multiple
        onChange={(e) => {
            onFilterChanged(columnDef.tableData.id, e.target.value);
        }}
    >
        <MenuItem key={"New"} value={"New"}>
            New
        </MenuItem>
        <MenuItem key={"In Progress"} value={"In Progress"}>
            In Progress
        </MenuItem>
        <MenuItem key={"Completed"} value={"Completed"}>
            Completed
        </MenuItem>
    </Select>
),

What’s the best way to allow user to easily crop an image on my mobile Web app?

For example, I have this original image:

I want to allow user to be able to select certain areas of the image in order to indicate the area they want to crop, while maintaining good user experience on mobile. One way I thought of is to allow user to highlight/color the image such as the following:

Finally, the user should press a button that process the image such that only the extreme edges of the highlighted area would be the crop coordinates. And the desired output image would be something like this.

Unfortunately, I do not know how to achieve the above. Appreciate any code example or guide to help me along.

I also thought of using bounding boxes on html canvas to allow users to drag to size and there’s multiple code examples that I found online for this. However, the user experience on mobile is horrible. Hence I decided to drop the idea.

Thanks in advance!

Could you help me ?

I have array of objects:

[
  { 
    position: {x: 2, y: 3}
    ...
  },
  { 
    position: {x: 5, y: 5}
    ...
  },
  { 
    position: {x: 5, y: 5}
    ...
  }
]

I need a function that will change the coordinates so that elements with the same position move down the y-axis

For exampple

[
  { 
    position: {x: 2, y: 3}
    ...
  },
  { 
    position: {x: 5, y: 5}
    ...
  },
  { 
    position: {x: 5, y: 6} <= changed
    ...
  }
]

The main difficulty for me is that when the element is shifted down along the y-axis, the position may again coincide with some other element

[
  { 
    position: {x: 2, y: 3}
    ...
  },
  { 
    position: {x: 5, y: 5}
    ...
  },
  { 
    position: {x: 5, y: 6}
    ...
  }
  ...
  { 
    position: {x: 5, y: 6} <= not again !
    ...
  }
]

There is a code that should get a list of COM ports, and then go through each port and get the value returned by the device connected to the port

let portsPathes = [];

SerialPort.SerialPort.list().then((ports)=>{
    ports.forEach(port=>{
        portsPathes.push(port.path);
    });
    ports.close();
});
let datas = [];
portsPathes.forEach(portPath=>{
    let port = new SerialPort.SerialPort({
        path: portPath,
    baudRate: 9600,
    dataBits: 8,
    parity: 'none',
    stopBits: 1,
    flowControl: false
    });
    //port.close();
    //port.setMaxListeners(10000);
    //port.pipe(new ReadlineParser.ReadlineParser({delimiter: 'rn'}));
    //parser.once('data', data=>{console.log(data);});
});

When executing this code, I get an error

node:internal/process/promises:288
           triggerUncaughtException(err, true /* fromPromise */);
           ^

Error: Opening COM9: Access denied
Emitted 'error' event on SerialPort instance at:
    at SerialPort._error (C:Users1Desktopneftandurino-callbacknode_modules
@serialportstreamdistindex.js:78:18)
    at C:Users1Desktopneftandurino-callbacknode_modules@serialportstream
distindex.js:111:18

The same thing happens if you transfer the creation of SerialPort to forEach in the SerialPort.list()

I have an express nodejs endpoint where im able to upload a file.pdf,xls,txt.

Locally anything works fine but when I host it on my VPS which is running on a reverse proxy with a different origin, im getting a cors error

BUT only if file size is larger than ~15kb, when my file is smaller anything works fine.

I allowed any cors on my nginx

`

location / {

    add_header 'Access-Control-Allow-Origin' '*';

    return 301 https://$server_name$request_uri;

}`

And set my express server the same

As a recruiter , I should be able to see the resume in a separate tab in a candidate record without downloading the same from the Files related list.

As a recruiter , when I navigate to the candidate record page , I should be able to see a resume Tab , which should display the entire resume of the candidate , irrespective of the resume File format ( PDF or Word) attached under the related Files related list.

i created lightning web component i need html & js code

I have a simple react component defined as such:

export function ClickableContainer({onClick, children}) {
  return <div onClick={(event) => {
    onClick(event);
  }>{ children }</div>
}

Sometimes I might want to have clickable things inside this component:

export function Page() {
  return <ClickableContainer onClick={() => alert("stop poking me")}>
    <button onClick={() => alert("me like that")}>Please Click</button>
  </ClickableContainer>
}

I want to find a way to modify ClickableContainer such that clicks on its children don’t also register as clicks on the parent element.

Let me make it clear, I am aware I could do:

export function Page() {
  return <ClickableContainer onClick={() => alert("stop poking me")}>
    <button onClick={(event) => {
      event.stopPropagation();
      alert("me like that");
    }}>Please Click</button>
  </ClickableContainer>
}

But I DO NOT want to do this. I would rather save the users of my component the cognitive load and handle it inside the parent.

I have tried:

export function ClickableContainer({onClick, children}) {
  return <div onClick={(event) => {
    if (event.eventPhase !== 3) onClick(event);
  }>{ children }</div>
}

and

export function ClickableContainer({onClick, children}) {
  return <div onClick={(event) => {
    if (event.currentTarget == event.target) onClick(event);
  }>{ children }</div>
}

But these prevent clicks from registering altogteher.

It doesn’t have to be simple or pretty, is there any way to tell if an event has already been handled by a child component?

I’m trying to write a page where there must be a header and a footer with a body, all with unknown heights.

There must be a full scroll bar, which should shrink between the header and the footer whenever they’re visible.

I’ve written a jsfiddle to demonstrate the issue.

https://jsfiddle.net/solidshook/xej43g0c/4/

I’ve made something close to what I need with a flexbox, which looks good but isn’t quite what I want:

<div class='header'>
  i am the header
</div>
<div class='body'>
  <div class='sidebar'>
    <div class='sidebar-top'>
     top of sidebar
    </div>
    <div class='sidebar-bottom'>
     bottom of sidebar
    </div>
  </div>
  <div class='content'>
    i am the content
  </div>
</div>
<div class="footer">
  i am the footer
</div>

 .body {
   display: flex;
 }

.content {
  width: 50%;
  height: 1000px;
  align-self: flex-start;
}

.sidebar {
  width: 20%;
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-top {
   position:absolute;
   top: 0;
}

.sidebar-bottom {
  position: absolute;
  bottom: 0;
}

.header, .footer {
  width: 100%;
  background-color: pink;
 }
 
}

I would really prefer to do this entirely with CSS, but if there’s anything else to be done I’d be happy to see

Does anyone know how I could achieve this?

Thanks!

I have a page where I call the locators and import it into my test file.

selector inside cy.contains

The above image, I tried to replace the highlighted one into like loginpage.getErrorMessage()

This is where I store my locator in the different file
ERR_MSG_LOCATOR: ‘[class=”alert”]’

but I am getting an error on that one.

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[twoDigitDecimaNumberDirective]'
})
export class TwoDigitDecimaNumberDirective {
  // Allow decimal numbers and negative values
  //private regex: RegExp = new RegExp(/^d*.?d{0,2}$/g);
  // Allow key codes for special events. Reflect :
  // Backspace, tab, end, home
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];
  constructor(private el: ElementRef) {
  }
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }
    const current: string = this.el.nativeElement.value;
    const position = this.el.nativeElement.selectionStart;
    const next: string = [current.slice(0, position), event.key === 'Decimal' ? '.' : event.key, current.slice(position)].join('');
    if ((!(/^d{1,2}(.$|.d{1,2}$|$)/).test(next)) ) {
      event.preventDefault();
    }
  }
}

<input type="text" twoDigitDecimaNumberDirective>

Accepted Input
12,
12.23,
12.21,
01.12,
-12,
-12.23,
-12.21,
-01.12,

Not Accepted
123,
-123,
123.23,
12.234,
-123.23,
-12.234,

Help me out. thanks in advance

After the mousedown event there is no onclick event
but if we don’t press the key and just click the event happens.

How can this be done?

example in which this is implemented https://showroom.littleworkshop.fr/

document.addEventListener('mousedown', function(event) {
  
 });

 document.addEventListener('mouseup', function(event) {
    
 });


 document.addEventListener('click', function(event) {

 

 });

I have registered the popstate event as a listener in JS, but only in Safari on My Mac it does not fire when the back button is pressed; in Chrome and Firefox it fires.

My Safari version is 16.3 (18614.4.6.1.5).

Here is the code

            window.history.pushState(null, null, null);

            window.addEventListener('popstate', (event) => {
                console.log('fire!')
            });

How can I get back button event detection in Safari?

I have a problem with my code, I have a form that contains data and images that can be resized from the cropper library. My problem is that when I submit the form without selecting an image, my ajax call does not work properly.