JavaScript

Re: A button at html to trigger an autoplay audio at exact time

28-Jun-21 4:06

Two obvious problems here:

1) Playing audio or video except as a direct result of user interaction is generally blocked. This includes playing the audio some time after the user has clicked a button - whilst some browsers might give you a small amount of leeway, playing audio minutes after the user clicked the button is likely to be blocked.

2) Javascript timers are not guaranteed to fire at a precise time. The setInterval callback will not be called more than once per second, but there is no guarantee that it will be called at least once per second. This is particularly problematic if your page is in the background, where the timer resolution will be decreased to conserve power.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Member 1526543828-Jun-21 22:11

Member 15265438

28-Jun-21 22:11

thanks for the explaining.
So can you give any advise that would make it happen?
What I want to do sounds simple: when people go to the website and audio will auto-played at a specific time…
I understand browser will have restrictions on this but will there any ways could make it happen?
thanks

Re: A button at html to trigger an autoplay audio at exact time

Richard Deeming28-Jun-21 22:25

How to merge to javascripts to test in console?

28-Jun-21 22:25

If you can convince the users to change their settings for your site to allow it to auto-play audio without user interaction, then you might be able to get close. You would need to change your test to see if the current time was greater than or equal to the desired time, rather than checking that it's precisely equal to the desired time. Once the desired time has passed, clear the timer to stop it from checking every second.

JavaScript

const playAudio = function(){
    const audio = document.querySelector("audio");
    audio.style.display = "block";
    audio.play();
};

const shouldPlayAudio = function(){
    const now = new Date();
    
    const h = now.getHours();
    if (h > 16) { return true; }
    if (h < 16) { return false; }
    
    const m = now.getMinutes();
    if (m > 25) { return true; }
    if (m < 25) { return false; }
    
    const s = now.getSeconds();
    return s >= 1;
};

let autoPlayTimer = null;

const playAtTime = function(){
    if (shouldPlayAudio()) {
        clearInterval(autoPlayTimer);
        autoPlayTimer = null;
        playAudio();
    }
};

autoPlayTimer = setInterval(playAtTime, 1000);

Demo[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

ajaszin18-Jun-21 14:52

ajaszin

18-Jun-21 14:52

Hi,
I am new to js and might be a silly question. sorry for that as I started to learn JS.

I have made 2 scripts. 1 for autoclick buttons and another 1 for autoclick nextpage button.
How to merge both codes to one after one. also I need to set 5 seconds delay between both this scripts.

Script 1:

var buttons = document.getElementsByClassName('Polaris-Button');

    for(var i = 0; i <= buttons.length; i++)  
       buttons[i].click();

Script 2:

var btn = document.getElementsByClassName('ant-pagination-next');

    for(var s = 0; s <= btn.length; s++)  
       btn[s].click();

Thanks in advance.

Re: How to merge to javascripts to test in console?

Richard Deeming20-Jun-21 23:45

Document.querySelectorAll() - Web APIs | MDN[^]
NodeList.prototype.forEach() - Web APIs | MDN[^]

20-Jun-21 23:45

Try:

JavaScript

document.querySelectorAll(".Polaris-Button, .ant-pagination-next").forEach(btn => btn.click());

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: How to merge to javascripts to test in console?

DerekT-P21-Jun-21 9:22

DerekT-P

21-Jun-21 9:22

Where there are multiple CSS selectors, in what order is the result list? (I know, I should experiment and find out!). But for the OP, I suspect this may not be the required solution, since he's wanting all the buttons of one class clicked before the other. Also, it doesn't include the 5 second delay he's after.

So: simply wrap the first block of code in a function ('ClickPolaris') and the second block in another function ('ClickPagination'). To run one, then the other, simply:

JavaScript

ClickPolaris();
ClickPagination();

To implement a five-second delay, you'll need a timer interval:

JavaScript

ClickPolaris();
setTimeout(function() {ClickPolaris();}, 5000);

Of course you can then refine it to use a single parameterised function, called twice with the different class names:

JavaScript

function ClickButtons(classname) {
  var buttons = document.getElementsByClassName(classname);
  for(var i = 0; i <= buttons.length; i++) { 
    buttons[i].click();
  }
}

ClickButtons('Polaris-Button');
setTimeout(function() {ClickButtons('ant-pagination-next');}, 5000);

and further simplify using Richard's suggested syntax:

JavaScript

function ClickButtons(classname) {
document.querySelectorAll(classname).forEach(btn => btn.click());
}

ClickButtons('.Polaris-Button');
setTimeout(function() {ClickButtons('.ant-pagination-next');}, 5000);

Note that in this syntax you need to include the . to indicate you're selecting by class name.

Re: How to merge to javascripts to test in console?

Richard Deeming21-Jun-21 21:49

Re: How to merge to javascripts to test in console?

21-Jun-21 21:49

DerekT-P wrote:
Where there are multiple CSS selectors, in what order is the result list?

The matching elements will be returned in document order:

Selectors API Level 1[^]:
The querySelectorAll() ... must return a NodeList containing all of the matching Element nodes within the subtrees of the context node, in document order.

So given:

HTML

<input id="btn1" type="submit" class="ant-pagination-next">
<button id="btn2" class="Polaris-Button"></button>
<button id="btn3" class="ant-pagination-next"></button>
<button id="btn4" class="Polaris-Button ant-pagination-next"></button>

then querySelectorAll(".Polaris-Button, .ant-pagination-next") will return [btn1, btn2, btn3, btn4].

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

DerekT-P21-Jun-21 22:50

DerekT-P

21-Jun-21 22:50

Thanks Richard - I probably ought to have known that!

AddEventListener in vanilla Javascript

jkirkerx16-Jun-21 14:52

16-Jun-21 14:52

I feel I'm pretty close here. I have like 5 phone number inputs, and instead of adding a event attribute in the input element, I thought I would just use a class called phoneNumber and loop all the element to ad an event listener. I'm close, just missing the glue to pass on the element value to the phone number function I stole off the internet and tweaked a bit.

I've done this before in typescript. But I've been really deep in this PHP project I've been working on. I can see the value of using inspector in the event, but PHP Storm isn't suggesting anything for it.

On my for loop, must examples used the index type loop, but I wanted to be a little more ES6 with it. Not sure if it's a good idea or not.

document.addEventListener("DOMContentLoaded",() => {

    const phoneInputs = document.getElementsByClassName('phoneNumber');
    for (phoneInput of phoneInputs) {
        phoneInput.addEventListener('keydown', (e) => {
            console.log(e.id);

            formatPhoneNumber(e.value) // Value is the phone number in the textbox
        });
    }

});

If it ain't broke don't fix it
Discover my world at jkirkerx.com

jkirkerx17-Jun-21 11:16

17-Jun-21 11:16

After some more reading, some articles said that this will be available within addEventListener. So I'm just going with it, should work. I have to wait for my DEV server to become available again to test it.

document.addEventListener("DOMContentLoaded",() => {

    const phoneInputs = document.getElementsByClassName('phoneNumber');
    for (let phoneInput of phoneInputs) {
        phoneInput.addEventListener('keydown', () => {
            formatPhoneNumber12(this.value)
        });
    }

});

If it ain't broke don't fix it
Discover my world at jkirkerx.com

jkirkerx19-Jun-21 11:24

19-Jun-21 11:24

That didn't work at all. Fiddled with it for about 30 minutes on the DEV test server this time and came up with this that works for me in this format xxx-xxx-xxxx

JavaScript

document.addEventListener("DOMContentLoaded",() => {
    const phoneInputs = document.getElementsByClassName('form-control phoneNumber');
    for (let phoneInput of phoneInputs) {
        phoneInput.addEventListener('keydown', event => {
            event.target.value = formatPhoneNumber12(event.target.value);
        });
    }
});

function formatPhoneNumber12(value) {    
    if (!value) return value;    
    const phoneNumber = value.replace(/[^\d]/g, "");    
    const phoneNumberLength = phoneNumber.length;    
    if (phoneNumberLength < 4) return phoneNumber;    
    if (phoneNumberLength < 7) {
        return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(3)}`;
    }    
    return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(
        3,
        6
    )}-${phoneNumber.slice(6, 9)}`;
}

If it ain't broke don't fix it
Discover my world at jkirkerx.com

Richard Deeming20-Jun-21 23:42

20-Jun-21 23:42

NB: This will only add the event handler to matching elements which exist at the point when your code is run. If you modify the document at any point to add new matching elements, they will not have the event handler attached.

You would probably be better off using event delegation[^]. Since you'd only have a single event handler, it can even be more efficient.

JavaScript

document.addEventListener("keydown", (e) => {
    const el = e.target;
    if (el.classList.contains("phoneNumber")) {
        console.debug(el.id, el.value);
        el.value = formatPhoneNumber(el.value);
    }
});

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

jkirkerx21-Jun-21 6:26

21-Jun-21 6:26

I wasn't thinking of that situation when I composed it. It's a customer form, with their home, office, cell phone numbers. I just needed to make sure that the user followed the format of xxx-xxx-xxxx.

So your saying that I don't have to wait until the Dom is loaded to add the keypress event?
I just thought it was the right thing to do. I'll give it a try.

If it ain't broke don't fix it
Discover my world at jkirkerx.com

Richard Deeming21-Jun-21 6:31

21-Jun-21 6:31

Are you only dealing with people from one country? Don't forget phone number formats will vary for other countries. Smile | :)

If you need international support, this might be useful:
GitHub - google/libphonenumber: Google's common Java, C++ and JavaScript library for parsing, formatting, and validating international phone numbers.[^]
There are ports for other languages as well.

And don't forget there's a specific input type for phone numbers:
<input type="tel"> - HTML: HyperText Markup Language | MDN[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

jkirkerx21-Jun-21 6:41

21-Jun-21 6:41

Right now the company, only has offices in California, a single state. So I did add all 50 states at least. And I did use type="tel" as well, standard procedure for me over the last 3 years. My options are limited on this project, because I'm using the existing database created in 2003. This project is a reimagination of code , or the existing project to bring it up to PHP 8 and modern browsers in 2021.

I just tried your suggestion, and I don't have to wait for the DOM to load before adding the listeners. I also thought I had to iterate the HTML Collection to hit each phone input, which is not the case. That's pretty slick Richard.

If it ain't broke don't fix it
Discover my world at jkirkerx.com

jkirkerx21-Jun-21 6:58

how to limit the draggable area in snap.svg?

21-Jun-21 6:58

I just read the link reference, and now I get what your suggesting. What a radical concept! I guess I was on the right track by changing my design to not use an element attr for the event. But I was still thinking on a individual element level, and not a unlimited collection as a whole. Too bad the customer won't appreciate it.

If it ain't broke don't fix it
Discover my world at jkirkerx.com

Member 1269897212-Jun-21 20:45

Member 12698972

12-Jun-21 20:45

<br> I am working on a `puzzle game`  and I use `snap.svg` and javascript to move the elements of the game . But the problem is that any user can drag the element of svg anywhere on the screen, including out of the droppable area. I want to prevent it , I found some resources on internet about snap.svg but it doesn't like i want

I share the code here :
https://jsfiddle.net/j058aoyn/2/

I am getting the following error while trying to run ./watch for my Ember JS application

simpledeveloper1-Jun-21 19:44

simpledeveloper

1-Jun-21 19:44

I changed to a new machine and from Visual Studio 2017 to Visual Studio 2019 I started getting the following errors when I was running watch command as below, which I used to do from the beginning

PS C:\GitSrsCodes\IMS\IMS.Ember> ./watch
    npm WARN file-loader@4.2.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN less-loader@5.0.0 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN sass-loader@8.0.0 requires a peer of webpack@^4.36.0 but none is installed. You must install peer dependencies yourself.
    npm WARN style-loader@1.0.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN uglifyjs-webpack-plugin@2.2.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN webpack-cli@3.3.10 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.
    npm WARN ims-ember@1.0.0 No description
    npm WARN ims-ember@1.0.0 No repository field.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    
    updated 2 packages and audited 2375 packages in 14.249s
    
    18 packages are looking for funding
      run `npm fund` for details
    
    found 348 vulnerabilities (17 low, 1 moderate, 330 high)
      run `npm audit fix` to fix them, or `npm audit` for details
    
    webpack is watching the files…
    
    (node:14388) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
    (Use `node --trace-deprecation ...` to show where the warning was created)
    assets by chunk 1.37 MiB (auxiliary name: app)
      assets by path *.png 4.17 KiB 5 assets
      assets by path *.svg 540 KiB 2 assets
      assets by path *.eot 182 KiB 2 assets
      assets by path *.ttf 206 KiB 2 assets
      assets by path *.woff 119 KiB 2 assets
      assets by path *.woff2 93 KiB 2 assets
      asset login-bg.jpg 248 KiB [compared for emit] (auxiliary name: app)
      asset loading.gif 8.28 KiB [compared for emit] (auxiliary name: app)
    assets by path *.js 23.9 MiB
      asset libs.js 9.98 MiB [compared for emit] (name: libs)
      asset app.js 6.73 MiB [compared for emit] (name: app)
      asset templates.js 6.48 MiB [compared for emit] (name: templates)
      asset polyfill.js 681 KiB [compared for emit] (name: polyfill)
    runtime modules 3.13 KiB 15 modules
    modules by path ./app/ 3.05 MiB 584 modules
    modules by path ./node_modules/ 4.6 MiB 495 modules
    modules by path ./helpers/ember/*.js 49.7 KiB 37 modules
    modules by path ./CSS/ 869 KiB
      modules by path ./CSS/lightbox2/images/ 176 bytes 4 modules
      modules by path ./CSS/*.less 869 KiB 2 modules
      modules by path ./CSS/chosen/*.png 107 bytes 2 modules
      ./CSS/img/login-bg.jpg 47 bytes [built] [code generated]
    modules by path ./.webpack/*.js 57.2 KiB 6 modules
    
    WARNING in ./node_modules/handlebars/lib/index.js 22:38-56
    require.extensions is not supported by webpack. Use a loader instead.
     @ ./app/request/details/DetailsController.js 5:0-35
     @ ./.webpack/webpack-results.js 3:11112-11163
     @ ./.webpack/webpack-app.js 1:0-30
    
    WARNING in ./node_modules/handlebars/lib/index.js 23:2-20
    require.extensions is not supported by webpack. Use a loader instead.
     @ ./app/request/details/DetailsController.js 5:0-35
     @ ./.webpack/webpack-results.js 3:11112-11163
     @ ./.webpack/webpack-app.js 1:0-30
    
    WARNING in ./node_modules/handlebars/lib/index.js 24:2-20
    require.extensions is not supported by webpack. Use a loader instead.
     @ ./app/request/details/DetailsController.js 5:0-35
     @ ./.webpack/webpack-results.js 3:11112-11163
     @ ./.webpack/webpack-app.js 1:0-30
    
    ERROR in ./app/application/ApplicationController.js 5:0-42
    Module not found: Error: Can't resolve 'constants' in 'C:\GitSrsCodes\IMS\IMS.Ember\app\application'
    
    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.
    
    If you want to include a polyfill, you need to:
            - add a fallback 'resolve.fallback: { "constants": require.resolve("constants-browserify") }'
            - install 'constants-browserify'
    If you don't want to include a polyfill, you can use an empty module like this:
            resolve.fallback: { "constants": false }
     @ ./.webpack/webpack-results.js 3:46-97
     @ ./.webpack/webpack-app.js 1:0-30
    
    ERROR in ./app/components/tuts-tests/tuts-tests.js 5:0-30
    Module not found: Error: Can't resolve 'os' in 'C:\GitSrsCodes\IMS\IMS.Ember\app\components\tuts-tests'
    
    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.
    
    If you want to include a polyfill, you need to:
            - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
            - install 'os-browserify'
    If you don't want to include a polyfill, you can use an empty module like this:
            resolve.fallback: { "os": false }
     @ ./.webpack/webpack-results.js 3:9632-9682
     @ ./.webpack/webpack-app.js 1:0-30
    
    ERROR in ./node_modules/ember-source/dist/ember.debug.js 6498:16-37
    Module not found: Error: Can't resolve 'url' in 'C:\GitSrsCodes\IMS\IMS.Ember\node_modules\ember-source\dist'
    
    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.
    
    If you want to include a polyfill, you need to:
            - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
            - install 'url'
    If you don't want to include a polyfill, you can use an empty module like this:
            resolve.fallback: { "url": false }
     @ ./.webpack/webpack-entry-dev.js 5:0-39
    
    3 errors have detailed information that is not shown.
    Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
    
    webpack 5.38.1 compiled with 3 errors and 3 warnings in 23239 ms

Any help please if possible?

Re: I am getting the following error while trying to run ./watch for my Ember JS application

jkirkerx16-Jun-21 14:58