Category: javascript

I work on an enterprise application that has a mix of AngularJS (v1) and NGX (v2+) pages. We employ Kendo UI to construct Grids for list pages in the app.

Recently, we updated the the NGX portion of our application to Angular 12 via these update steps. After doing so however, the “items per page” text that usually appears at the bottom of the Kendo Grid next to the page size drop down disappeared from grids that are on AngularJS pages.

I’ve tried reverting the i18n migration step in the Angular upgrade guide which changes message IDs (“items per page” is one of the messages in messages.xlf) but this didn’t help.

I also tried modifying the $scope‘s gridOptions that set the messages on the grid based on these docs i.e.

pageable: {
   .
   .
   .
   messages: {
      itemsPerPage: "items per page"
   }
}

but this also didn’t work.

What’s interesting is that if I modify the display or empty properties in messages, I do actually end up seeing a change. It’s itemsPerPage (among other properties) whose updates can’t be seen on the front-end. This might be a symptom of the same issue.

Anyone have ideas as to why this might be happening? Are there any incompatibility issues with certain versions of @progress/kendo-angular-<package_name> with version 12 of Angular?

I am having trouble creating a JavaScript timer using. I have tried to implement things from other stack overflow questions and haven’t had any success.

When I click the play button, “0-8:0-46” is displayed instead of the actual timer. And it does not count down.

Link to codepen: https://codepen.io/Jamece/pen/jOazYvQ

My Code thus far is below. I am trying to troubleshoot the sessionTimer function right now.

const minTime = 1;
const maxTime = 60;
class Application extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breakLength: 5,
      sessionLength: 25,
      started: false,
      mode: "Session"
    };
    this.breakIncrement = this.breakIncrement.bind(this);
    this.breakDecrement = this.breakDecrement.bind(this);
    this.sessionIncrement = this.sessionIncrement.bind(this);
    this.sessionDecrement = this.sessionDecrement.bind(this);
    this.beginTimer = this.beginTimer.bind(this);
    this.sessionTimer = this.sessionTimer.bind(this);
    this.breakTimer = this.breakTimer.bind(this);
    this.pauseTimer = this.pauseTimer.bind(this);
  }

  breakIncrement() {
    if (!this.state.started) {
      if (this.state.breakLength !== maxTime) {
        this.setState((state) => ({
          breakLength: state.breakLength + 1
        }));
      }
    }
  }

  breakDecrement() {
    if (!this.state.started) {
      if (this.state.breakLength !== minTime) {
        this.setState((state) => ({
          breakLength: state.breakLength - 1
        }));
      }
    }
  }

  sessionIncrement() {
    if (!this.state.started) {
      if (this.state.sessionLength !== maxTime) {
        this.setState((state) => ({
          sessionLength: state.sessionLength + 1
        }));
      }
    }
  }

  sessionDecrement() {
    if (!this.state.started) {
      if (this.state.sessionLength !== minTime) {
        this.setState((state) => ({
          sessionLength: state.sessionLength - 1
        }));
      }
    }
  }

  beginTimer() {
    this.setState({ started: !this.state.started });
    if (this.state.started) {
      if (this.state.mode == "Session") {
        this.sessionTimer();
      } else {
        this.breakTimer();
      }
    } else {
      this.pauseTimer();
    }
  }
  sessionTimer() {
    var start = new Date().getTime();
    const sessionTime = setTimeout(() => {
      const distance = this.state.sessionLength - start;
      var minutes = Math.floor(distance / (1000 * 60) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60 * 60)) / 1000);
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      const sessionClock = (document.getElementById("time-left").innerHTML =
        minutes + ":" + seconds);

      if (distance <= 0) {
        clearTimeout(sessionTime);
      }
    }, 1000);
  }

  breakTimer() {}

  pauseTimer() {}

  render() {
    let pausePlayStyle = this.state.started
      ? "fa-solid fa-pause"
      : "fa-solid fa-play";
    return (
      <div className="container-fluid px-0">
        <div className="main d-flex justify-content-center align-items-center">
          <div className="d-flex flex-column align-items-center">
            <div className="heading">25 + 5 Clock</div>
            <div className="d-flex">
              <div className="d-flex flex-column break align-items-center">
                <div id="break-label" className="mb-3 h3">
                  Break Length
                </div>
                <div className="d-flex flex-row">
                  <button
                    className="btn btn-top"
                    id="break-increment"
                    onClick={this.breakIncrement}
                  >
                    <i class="fa-solid fa-arrow-up"></i>
                  </button>
                  <div className="mx-3 h3" id="break-length">
                    {this.state.breakLength}
                  </div>
                  <button
                    className="btn btn-top"
                    id="break-decrement"
                    onClick={this.breakDecrement}
                  >
                    <i class="fa-solid fa-arrow-down"></i>
                  </button>
                </div>
              </div>
              <div className="d-flex flex-column align-items-center session">
                <div id="session-label" className="mb-3 h3">
                  Session Length
                </div>
                <div className="d-flex flex-row">
                  <button
                    className="btn btn-top"
                    id="session-increment"
                    onClick={this.sessionIncrement}
                  >
                    <i class="fa-solid fa-arrow-up"></i>
                  </button>
                  <div className="h3 mx-3" id="session-length">
                    {this.state.sessionLength}
                  </div>
                  <button
                    className="btn btn-top"
                    id="session-decrement"
                    onClick={this.sessionDecrement}
                  >
                    <i class="fa-solid fa-arrow-down"></i>
                  </button>
                </div>
              </div>
            </div>
            <div className="d-flex flex-column align-items-center timer-border">
              <div className="h2 mb-3 session" id="timer-label">
                {this.state.mode}
              </div>
              <div className="display-1 timer mb-4" id="time-left"></div>
              <div className="d-flex flex-row">
                <button
                  className="btn btn-bottom"
                  id="start_stop"
                  onClick={this.sessionTimer}
                >
                  <i className={pausePlayStyle}></i>
                </button>
                <button className="btn btn-bottom" id="reset">
                  <i className="fa-solid fa-rotate"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<Application />, document.getElementById("root"));

i’m using v-select and i’m trying to have a multiple select through which to select one or more cities, suggested by google … does anyone know if it can be done?
I don’t even find examples
https://vue-select.org/

In an Adobe Animate HTML5/JavaScript Canvas movie, I have a draggable Movie Clip symbol being added to another Movie Clip symbol on hitBox.hitTest.

function onMouseUp(evt){
    var item = evt.currentTarget;
    item.drag = false;
    var pt = item.localToLocal(item.dot.x, item.dot.y, item.LFLensHolder.hitBox);
    if(item.LFLensHolder.hitBox.hitTest(pt.x, pt.y) ){
        item.x = item.LFLensHolder.x;
        item.y = item.LFLensHolder.y;
        item.lensParentLeft.addChild(item);
        console.log(item.parent);
    }   
}

In this instance, the item symbol instance name is ConcaveSphereLens…

However, the draggable item disappears on hitBox.hitTest, that is, when the drggable item snaps to position, it just disappears. Very odd.

Looking at browser console on hitTest with console.log(item.parent); I can see that the draggable item has a parent of lensParentLeft which it should have.

I can also see that the draggable item, now a child of lensParentLeft has properties which indicate it is on stage and visible.

I’m not sure what is going wrong. Any ideas?

and the properties in console for the dragged child item…

With the puppeteer library, I click on a div in the dom, and a modal appears with a list of divs, and then I try to click on one of the divs I need from that modal, but the “page” variable doesn’t find the div

I click on the div element as follows and then when the modal appears I try to select the div I need.

 const browser = await puppeteer.launch({headless: false});
 const page = await browser.newPage();
 await page.setDefaultNavigationTimeout(0);

  
 await page.goto(`https://www.page.com`);

 await page.evaluate(() => {
     document.querySelector('div.css-bt1pje').click();
 })

 await page.waitForTimeout(10000);

 await page.evaluate(() => {
     document.querySelector('[data-title=content]').click();
 })/* here it stays thinking and never finds the element

The following code runs on every one of my requests and I’m afraid that it’s trying to launch the browser every time and causing server issues on Heroku. I want to launch puppeteer like a Singleton instance where I only launch it once and then after that my requests will just trigger browser.newPage(). I’m not experienced in JS to resolve this.

 (async () => {
      const browser = await puppeteer.launch({ headless: true});
      const page = await browser.newPage();    

      await page.on('response', interceptedResponse =>{
        let status = interceptedResponse.status();
        interceptedResponse.text()
          .then((text) => {          
            handleResponse(text)
            browser.close();
          })
          .catch(err => {
            console.error(`interceptedResponse error: ${err}`)
            browser.close();
          });
      });

      await page.goto(url);
    })();

I’m using laravel-mix-workbox to bundle and create a service worker. The service worker is running as expected, but there is apparently no precache files because it doesn’t work offline (no content when offline after a reload).

Stack: Laravel 8, Vue 2, Workbox 6, Laravel-mix 6

// webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-workbox');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps(false)
    .generateSW()

here’s what I tried:

// app.js
if ('serviceWorker' in navigator) {
    const wb = new Workbox('/service-worker.js')

    wb.addEventListener('install', (event) => {
        event.waitUntil(caches.open('v1').then(cache => {
            return cache.addAll([
                '/',
                '/index.html',
                '/favicon.ico',
                '/img/app_bar_text.jpg',
 //             (etc...)
            ])
        }))
    })

    wb.addEventListener('fetch', event => {
        event.respondWith(caches.match(event.request).then(response => {
            if (response)
                return response;
            return fetch(event.request)
        }))
    })

    window.addEventListener('load', async () => {
        await wb.register('service-worker.js')
    })
}

But, the generated service worker does not include any files I specify and no content when offline.

Do I have to explicitly list every offline file? Should this list of cached files (urls) go in app.js or webpack.mix.js? If webpack.mix.js, then how?

I am trying to get “POST” method form data from HTML form using app.post method but I can catch anything to req.body. What am I doing wrong?

My html form –

                <div id="input-area">
                    <textarea id="title" name="title" rows="1" cols="75" placeholder="Title" onkeyup="instance.tweaker()"></textarea>
                    <textarea rows="10" type="text" cols="75" placeholder="Description" name="description"></textarea>
                    <div id="calender"><input id="dater" type="date" value=""></div>
                    <button type="submit" value="Submit"  id="buton">Add Task</button>
                </div>
                </form>
<script src="backend2.js" defer></script>

my js code

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.listen(3308,() =>{
    console.log('My server is running');
})

const jsonParser = bodyParser.json();

//

const urlencodedParser = bodyParser.urlencoded({ extended: false })

app.post('/success.html', urlencodedParser , function (req, res) {
    console.log(req.body.title);
})

So I want to launch my JavaScript code from VS-Code to Firefox but cant figure out how to setup the launch.json file.

Terminal:
Terminal view when I run: npm run dev

Debug URL option:
When I hover over “local: http://localhost:3000/”

Error:
Error message that pops up when I try “Debug URL”

launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "firefox",
            "request": "attach",
            "name": "Attach"
        },
        {
            "type": "firefox",
            "request": "launch",
            "reAttach": true,            
            "name": "Launch Firefox against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "program": "C:\Program Files (x86)\Mozilla Firefox\firefox.exe"
        },

        {
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "reloadOnAttach": true,
            "name": "Launch index.html",
            "file": "${workspaceFolder}/index.html"
        },
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\Project 3 Three.js\main.js"
        }
    ]
}

I’m trying to use the onClick function to make a button play an audio file and then disable after a specified length of time (to line up with the end of the audio file). Basically I’m trying to set up a Mission Impossible-esque thing where, when the button is clicked, the audio file plays and at the end of the recording the button disables (the message “self-destructing”). I can get the file to play but I can’t figure out how to get the button to disable using the script code. This is what I’ve got so far. I tried both document.getElementById("briefingButton").this.disabled="true" and document.getElementById("briefingButton").style.display="none" and neither works.

<p id="briefingButton"><input type="button" value="Click for briefing" onclick="playMusic(); disableButton()" />


<script>
function playMusic(){
  var music = new Audio('/Users/devonhunt/Documents/ADVENTURE WEDDING/Mission briefings/dom mk1.mp3');
  music.play();
  }

setTimeout(function disableButton() {
  document.getElementById("briefingButton").this.disabled="true";
}, 1080)

</script></p>

I want to directly assign a variable to a method of a returned promise. I’m wondering if theres a cleaner looking solution to this?

const data = ( await db.collection('x').doc('y').get(); ).data();

const data = await db.collection('x').doc('y').get().then( ({data}) => { return data; } );

I create a JS file that I named airConditions, its array of objects and each object contain some property like status for check conditions and have an src property for use in src of img

[
    {
        "id":800,
        "fa":"آسمان صاف",
        "en":"clear sky",
        "status": "clean",
        "icon": require("../../../assets/images/weather4/clean-day.png").default,
    },
    {
        "id":801,
        "fa":"کمی ابری",
        "en":"few clouds: 11-25%",
        "status": "haze",
        "icon": require("../../../assets/images/weather4/haze-day.png").default,
    },
    { 
        .
        .
        .
    }

]

I use this js file for use icon in src of img tag

<img
  className="weather-icon-png"
  src={this.state.iconSrc}
  alt={this.state.weatherDescription}
/>

but when I import the js file (airConditions)before everything it throws an error ===> ./src/json/module.js Module not found: You attempted to import ../../../assets/images/weather4/clean-day.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

before everything please see this question too. ===> stackoverflow

I’m using okta login with Express. When I run it on a server, it does call the loginCallback function that I specify on new ExpressOIDC config. But when I use the same okta app on another server, it’s not being called, instead after login it shows a 404 saying that loginCallback path does not exist. I create a loginCallback to handle the redirect, but then I have no access to req.userContext.

const oidc = new ExpressOIDC({
    issuer: "{issuer}",
    client_id: "{client_id}",
    client_secret: "{client_secret}",
    appBaseUrl: "http://localhost:3000",
    redirect_uri: "http://localhost:3000/loginCallback",
    scope: "openid email profile",
    routes: {
      loginCallback: {
        path: "/loginCallback",
        handler: (req, res, next) => {
          console.log("req", req.userContext.tokens);
          res.redirect("/");
        },
      }
    }
  });

Above code is not running in a server but it’s on the other.

server.get('/loginCallback', async (req, res, next) => {
    console.log("here!", req)
});

this does get called but can’t access the userContext obj.

Trying to get an if statement based on data from a form submission to work with a countdown. I’m not getting any errors but this obviously isn’t working, it never redirects after the countdown no matter if I select yes or no. I’ve used wiki urls because I haven’t set up the 2 actual calendar urls yet. I realize this may have been a completely incorrect way to even attempt this, but I’m not well versed in java at all. Any and all help is appreciated.

 
   // Total seconds to wait
    var seconds = 10;
        function countdown() {
        seconds = seconds - 1;
        if (seconds < 0) {
            window.addEventListener('message', event => {
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {

    for (item in event.data.data) {
      if (event.data.data[item]["name"] == "would_you_like_to_schedule_a_device_demo_") {

        if (event.data.data[item]["value"] == "Yes") {
          window.location = "https://en.wikipedia.org/wiki/Apple";
        }
      if (event.data.data[item]["value"] == "No") {
          window.location = "https://en.wikipedia.org/wiki/Banana";
        }
   
      }
    }

  }
});
         
        } else {
            // Update remaining seconds
            document.getElementById("countdown").innerHTML = seconds;
            // Count down using javascript
            window.setTimeout("countdown()", 1000);
                        }
    }
    
    // Run countdown function
    countdown();

I have index.ts and inside of it I have something like:

const start = () => {...}

Now I have app.ts that looks like this:

const dotenv = require('dotenv');
dotenv.config();
const express = require('express');
const app = express();
const server = require('http').createServer(app);

const PORT = 4001 || process.env.PORT;

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
  // I want to import and call start like this : start()
});

My package.json looks like this:

{
  "name": "...",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "node app.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    ...
  }
}

and tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
    "checkJs": true,
    "outDir": "./built",
    "allowSyntheticDefaultImports": true,
    "module": "CommonJS"
  }
}

The thing is, I can’t use import directive at all with this setup, so I guess I am doing something wrong.

How to import this function in app.ts from index.ts?