Category: javascript

I am seeing inconsistent behavior where the UI does not update correctly for certain values written to a field bound to [ngModel].

My template:

<input
  type="number"
  [ngModel]="displayValue"
  (ngModelChange)="updateValue($event)"
/>

TS file:

export class HelloComponent {
  displayValue = 0;

  public updateValue(displayValue: number) {
    const validatedValue = this.constrainValue(displayValue);
    this.displayValue = validatedValue;
  }

  private constrainValue(value: number) {
    return (value > 100) ? 100 : value;
  }
}

• If I enter a 3 digit number over 100 (ie: 230), constrainValue adjusts it to 100 and they UI updates as expected.
• If I enter a 6 digit number (ie: 23456), constrainValue adjusts it to 100 but the UI only updates the first 3 numbers so I get 10056.

Stackblitz: https://stackblitz.com/edit/angular-ivy-eleb1u?file=src%2Fapp%2Fhello.component.ts

For two days I tried to solve this problem.
It displays nothing and writes – “You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.”

I am using this code to grab a static PNG, jpg and png image with file-loader, but it still doesn’t work, I lost all hope

module.exports = {
  module: {
    rules: [
      {
        test: /.(jpg|PNG|png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

and also

<template>
  <img :src="checkUri"/>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true,
    }
  },
///
  computed: {
    checkUri() {
      return require('../assets/image/items/' + this.item.img)
    }
  }
}
</script>

in my component

I tried to change site setting via selenium and I found answer to allow ads and pop_up for specific website
the answer was:

self.driver.get(f'chrome://settings/content/siteDetails?site={link}')

        temp= self.driver.execute_script(
            "return document.querySelector('settings-ui').shadowRoot.querySelector('settings-main#main').shadowRoot.querySelector('settings-basic-page')")
        rules = self.driver.execute_script(
            "return arguments[0].shadowRoot.querySelector('settings-privacy-page').shadowRoot.querySelector('settings-animated-pages#pages settings-subpage site-details').shadowRoot.querySelector('div.list-frame:not(div>div.list-frame)')", temp)
        Ads = self.driver.execute_script(
            "return arguments[0].querySelector('site-details-permission[label="Ads"]').shadowRoot.querySelector('#permission')", rules)
        Pop_ups =  self.driver.execute_script(
            "return arguments[0].querySelector('site-details-permission[label="Pop-ups and redirects"]').shadowRoot.querySelector('#permission')", rules)
        Ads.click()
        Ads.find_element_by_id("allow").click()
        Pop_ups.click()
        Pop_ups.find_element_by_id('allow').click()

but when I tried it with --headless as chrome driver option didn’t work
and this is the error:

Exception has occurred: JavascriptException
Message: javascript error: Cannot read properties of null (reading 'shadowRoot')
  (Session info: headless chrome=96.0.4664.110)

how did I use this code with headless option?
there is another Solution if I want to allow ads and popups?

I have a Svelte component displaying modal dialog with “edit” type of form. The dialog is not displayed by default. User can open it by clicking on an “edit” button on the page. This shows the form. Once the form is submitted, it disappears (Svelte prop is set to false). This is all OK. The problem is that although the form was submitted with new values and everything was properly updated on the backend, if the user reopens the dialog/form again, input fields contain the old/original values. Any hints what I have to do to get the already submitted values also there?

So i am working o an ecommerce website and i am using redux to manage state of my cart . as i add items to the cart is is stored in my redux slice . when i console.log this state.items
i see an array of items added to my cart . once i refesh my check out page , all my items added to the cart dissappears . here is the code belew
REDUX SLICE

import { createSlice } from "@reduxjs/toolkit";
import Items from "../app/Items";

const initialState = {
  items: [],
};


export const basketSlice = createSlice({
  name: "basket",
  initialState,
  reducers: {
    addToBasket: (state, action) => {


      state.items = [...state.items, action.payload]
 state.items

    },

    removeFromBasket:(state, action) =>{
       console.log(action , "jhj");
      let newBasket = state.items.filter(({id}) => id != action.payload.id);

      state.items = newBasket;
    }
  },
});

export const { addToBasket, removeFromBasket } = basketSlice.actions;

// Selectors - This is how we pull information from the Global store slice
export const selectItems = (state) => state.basket.items;
export const selectTotal = (state) => state.basket.items.reduce((total, item) =>
  total + item.price, 0);

export default basketSlice.reducer;

CHECKOUT CART
On refesh the state clears up

import { useSelector } from "react-redux";
import Header from "../components/Header";
import CheckoutProduct from "../components/CheckoutProduct";
import { selectItems, selectTotal } from "../slices/basketSlice";
import Currency from "react-currency-formatter";
import { signIn, signOut, useSession } from "next-auth/client"



function Checkout() {
    const items = useSelector(selectItems);
    const total = useSelector(selectTotal)
    const [session] = useSession();

    // {!session ? 'Sign in to checkout' : "Proceed to checkOut"}

    return (
        <div >
            <Header />
            <main >

                <h1 className="text-center">YOUR LUXURY WEAR CART</h1>

                <div className="grid grid-flow-row-dense md:grid-cols-2 lg:grid-cols-3">
                    {items.map((item, id) => (
                        <CheckoutProduct
                            id={id}
                            key={id}
                            name={item.name}
                            price={item.price}
                            size={item.size}
                            image={item.image}
                        />
                    ))}
                </div>
                <br/>
                <br/>
                <br/>

                <div className="flex sub  ml-16 items-center bg-white shadow-md">
                    {items.length > 0 && (
                        <>
                            <h2>Subtotal
                                (  {items.length} items)

                                <span>
                                    <Currency quantity={total} currency="GBP" /> </span> </h2>


                            <button role="link"
                                onClick={signIn} className={`button mt-2  font-semibold pl-5 pr-5 `}>
                                    SIGN IN
                            </button>
                            <button
                                disabled={!session} className={`button mt-2 ${!session && 'from-gray-300 to-gray-500 border-gray-200 text-gray-300 cursor cursor-not-allowed'}`}
                            >
                                {!session ? "signin to checkout" : "Pay with card"}


                            </button>
                        </>
                    )}
                </div>
            </main>
        </div>
    )
}

export default Checkout

Script is functioning as expected on a PC, but nothing happens in the mobile version.

How do I get it working so that a swipe left or right moves the div accordinly?

More stuff here so I can actually submit all the code.

document.addEventListener("touchstart", touchStart, false);
document.addEventListener("touchend", touchEnd, false);
document.addEventListener("mousedown", touchStart, false);
document.addEventListener("mouseup", touchEnd, false);
var xDown = null;
var yDown = null;
function touchStart(event)
{
    xDown = event.clientX;
    yDown = event.clientY;
} 
function touchEnd(event)
{
    var currentPlayerPosition = parseInt(window.getComputedStyle(playerModel, null).getPropertyValue('left'));
    if ( ! xDown || ! yDown ) {
        return;
    }
    var xUp = event.clientX;                                    
    var yUp = event.clientY;
    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;                                                                     
    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
        if ( xDiff > 0 ) {
            if(currentPlayerPosition <= "25")
            {
                return;
            }                document.getElementById("playerModel").style.left = currentPlayerPosition - 25 + "px";
        } else {
            if(currentPlayerPosition >= "230")
            {
                return;
            }               document.getElementById("playerModel").style.left = currentPlayerPosition + 25 + "px";
        }                       
    } else {
        if ( yDiff > 0 ) {
        } else { 
        }                                                                 
    }
    xDown = null;
    yDown = null;       
}

Hi I want he data model once with the data from all three requests in Ui5, heres my Code, right under my code is my Solution Test but it didnt worked.

The Code:

onInit: function () {

            const tabletUrl = '/api/tablets?limit=1000&offset=0';

            fetch(tabletUrl).then(res => res.json()).then(res => {
                const dataModel = new JSONModel();
                dataModel.setData({
                    items: res
                });
                this.getView().setModel(dataModel, "aribadevices")

            })

            const notebookUrl = '/api/notebooks?limit=1000&offset=0';

            fetch(notebookUrl).then(res => res.json()).then(res => {
                const dataModel = new JSONModel();
                dataModel.setData({
                    items: res
                });
                this.getView().setModel(dataModel, "aribadevices")

            })

            const smartphonesUrl = '/api/smartphones?limit=1000&offset=0';

            fetch(smartphonesUrl).then(res => res.json()).then(res => {
                const dataModel = new JSONModel();
                dataModel.setData({
                    items: res
                });
                this.getView().setModel(dataModel, "aribadevices")

            })

I also tried this but it didnt worked:

const tabletUrl = '/api/tablets?limit=1000&offset=0';
const notebookUrl = '/api/notebooks?limit=1000&offset=0';
const smartphonesUrl = '/api/smartphones?limit=1000&offset=0';

Promise.all([fetch(tabletUrl), fetch(notebookUrl), fetch(smartphonesUrl)]).then(res => {
    const dataModel = new JSONModel();
    dataModel.setData({
        items: res.flat()
    });
    this.getView().setModel(dataModel, "aribadevices");
});

Quisiera saber si es posible ocultar la opción “camara” al momento de accionar un input type file que solo accepte imagenes, con la finalidad que solo pueda subir imagenes desde la galería.

Esta duda surge a partir de que el atributo capture permite abrir directamente la camara, pense que existiría algo que hiciera lo mismo pero con la galería o archivos en el dispositivo

EJ:
1.- Input que debería abrir directamente la galería
<input [id]=”question.id + ‘fileInput'” type=”file”
(change)=”onFileChange($event)” style=”display: none;” accept=”image/“>
2.- Input que abré la camara
<input [id]=”question.id + ‘CameraInput'” type=”file” capture=”environment” (change)=”onFileChange($event)” style=”display: none;” accept=”image/“>

good night, dear colleagues!
I am trying to create a drawing application using fabric.js and socket.io. My task is

1. create the most primitive draw app.js for the frontend. Here is the code for this application(client.js):

var canvas = new fabric.Canvas(document.getElementById('canvasId'));
//var socket = io();

canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = '#00aeff';

canvas.on('path:created', function(e) 
{  
  e.path.set();
  canvas.renderAll();
  //socket.emit('json_to_board', JSON.stringify(canvas));
  console.log(JSON.stringify(canvas));
});

canvas 
{
  border: 1px solid red;
}

<canvas id="canvasId" width="600" height="600"></canvas>
<script src="https://unpkg.com/[email protected]/dist/fabric.js"></script>  
<script src="/socket.io/socket.io.js"></script>

2)the next step is to create socket.io. I try to send json from client to sever with server.js:

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);


app.get('/', (req, res) => 
{
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => 
{
    socket.on('json_to_board', (msg) => 
    {
      console.log('message: ' + msg);
    });
});



server.listen(3000, () => 
{
  console.log('listening on *:3000');
});

and the code send nothing from client to server. How should I solve this problem?

I have a data model that I am hydrating through a process I control, so I can update its schema and properties if required:

results:

{
  pizza: [
    { source: '2', symbol: 'pizza', id: '2.pizza', cost: '0.00' },
    { source: '4', symbol: 'pizza', id: '4.pizza', cost: '0.00' }
  ],
  apple: [
    { source: '3', symbol: 'apple', id: '3.apple', cost: '0.00' },
    { source: '4', symbol: 'apple', id: '4.apple', cost: '0.00' },
    { source: '4', symbol: 'apple', id: '4b.apple', cost: '0.00' }
  ]
}

For the view, using React, I will want to display this data in a table that will update each result’s totalAmount, updating the table cell for that row. However, more importantly for now is how to update the model.

Now that we have the initial data model, I need to add event listeners (after we have the model) to each source object, each with their own unique endpoint to execute a function. I can subscribe to a source event that fires whenever that source has a change. When there is a change, I want to update that source’s cost, add all costs for that result and update that result’s totalAmount amount but not update any other totalAmounts (but we can, but not as elegant).

First question is how to add an object listener only to each source object and not update all sources in the model? For this, I have tried the following from here but haven’t gotten it to work on testing, and not sure how I would add something like this to my objects.

var MyVar = {
  _prop1: 0,
  get prop1() { return this._prop1; },
  set prop1(value) { this._prop1 = value; /*Listener code can go here*/ }
};

Secondly, once a change is detected, the callback should do something like results["pizza"].totalAmount = {sum of all costs for this object}. This would add a totalAmount property. However would it be better to create an empty property to fill in later?

{ source: '2', symbol: 'pizza', id: '2.pizza', cost: '0.00' }, <== change detected, cost changed to 5.00.

The resulting model for this object would then be:

{
  pizza: [
    { source: '2', symbol: 'pizza', id: '2.pizza', cost: '0.00' },
    { source: '4', symbol: 'pizza', id: '4.pizza', cost: '0.00' },
    totalAmount: '5.00'
  ], ...

And the table updated with the new values.

I’m trying to achieve a section which, when in view, becomes a horizontal scroller until the items in the scroller (in my case, images) are finished, at which point, it becomes a vertical scroller again.

I’ve seen and adapted my approach on the following demos:

• Horizontal Scroll with GSAP
• ScrollTrigger – Horizontal Scrolling

The asthetic I’m trying to achieve is to show two images by default, then scroll to see rest. See below for a mockup:

Here is my current approach:

$(function() {

  let scroll_tl = gsap.timeline({
    scrollTrigger: {
      trigger: '.horizontalScroller__images',
      start: "top center",
      // pin: true,
      scrub: true,
      end: "+=300",
      // markers: true,
    }
  });

  var images = document.querySelectorAll('.horizontalScroller__item');

  scroll_tl.to('.horizontalScroller__intro', {
    duration: 1,
    ease: "slow"
  });

  scroll_tl.to(images, {
    xPercent: -85 * (images.length - 1),
    scrollTrigger: {
      trigger: ".horizontalScroller__images",
      start: "center center",
      pin: true,
      // horizontal: true,
      // pinSpacing:false,
      markers: true,
      scrub: 1,
      snap: 1 / (images.length - 1),
      // end: () => `+=4320`
    }
  });

});

.horizontalScroller {
  padding: 114px 0 80px 0;
  height: 100vh;
  position: relative;
  background-color: #5d209f;
}
.horizontalScroller__intro {
  margin-bottom: 25px;
  color: #FFFFFF;
}
.horizontalScroller__header {
  margin-bottom: 17px;
}
.horizontalScroller__images {
  display: flex;
  justify-content: center;
  align-items: center;
}
.horizontalScroller__scroll {
  position: relative;
  overflow: hidden;
  padding: 60px 0;
}
/* .horizontalScroller__item {
  width: 25vw;
} */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<section class="horizontalScroller">

  <div class="container">
    <div class="row">
      <div class="col-12 col-md-8 col-xl-6">
        <div class="horizontalScroller__intro">
          <h2 class="horizontalScroller__header">This is the header</h2>
          <p class="horizontalScroller__standfirst mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="horizontalScroller__scroll">

    <div class="horizontalScroller__images" id="horizontal-scroll">
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
      <div class="horizontalScroller__item">
        <img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
      </div>
    </div>

  </div>

</section>

In my above demo, you can see that when scrolling in that section, the images move down (not intended) and then they start moving towards the left (whereas the horizontal scroll should move to the right).

Also, to show the two cards initially, I’ve tried to set a width to the .horizontalScroller__item, but it just messes it up even more.

Unsure why my code is performing the way it is, any ideas?

Sorry for the long winded title. Basically I am writing a calculator in JS and have got onto a point where I want it to do multiple operations in a row; I believe the problem lies in the storeVariable(); when I try to do a third calculation (e.g. 2 x 3 – 2) the calculator gets stuck on the multiplication operator and so does 2 x 3 x 2. Any help with this would be appreciated.

(tried pasting my code but couldn’t figure it out so the github link is here https://github.com/KingClouderton6/calculator)

In Chrome Dev Tools, the following logs NaN rather than the desired 526.

const nums = [7,2,11,4,9,0,1,7,14,3];
const sumSquares = nums.map((element)=>{Math.pow(element, 2)}).reduce((a, b)=>a + b, 0);
console.log(sumSquares);
// console logs `NaN`

The issue appears to lie with the formatting of .map‘s arrow function. Here I have used parenthesis and curly braces, when neither was necessary. However, I wouldn’t expect this to break my function. When removing the parenthesis and curly braces, the console logs 526, as desired:

const nums = [7,2,11,4,9,0,1,7,14,3];
const sumSquares = nums.map((element)=>Math.pow(element, 2)).reduce((a, b)=>a + b, 0);
console.log(sumSquares);
// console logs `526`

Why do curly braces change the output here?

Hello wonderful developers! MY website has been so non-functional after I finished creating my website and I decided to uninstall plugins that I considered redundant and I mistakenly deleted tophive core wordpress functionality plugin on my metafans theme website and reinstalled it back but not remembering how I configured it again, my sign in and sign up button are no longer working, my menu icon is no longer popping up my menu items on mobile screen. I checked my console log this was the error I saw:

    at Tophive.setupMobileItemAnimations (theme.min.js?ver=2.2.0:496)
    at Tophive.init (theme.min.js?ver=2.2.0:813)
    at new Tophive (theme.min.js?ver=2.2.0:136)
    at theme.min.js?ver=2.2.0:886
    at theme.min.js?ver=2.2.0:911```.

I’m in desperate need of some help to extend the plugin of the title to suit my needs in a way that I’ll explain below:

So I have two variation filters (color and size) and I would like to make the plugin swap variation images once just the color filter changes (which makes sense anyway, since variation images usually show the same product in different colors, whereas size doesn’t usually differentiate a product’s appearance; a T-shirt in size M looks identical to the same T-shirt in size L)… I know that’s how WooCommerce works, and it’s been criticized in the past for this behavior but nothing has changed yet…

So I’ve come up with the piece of code below that for any selected color, it extracts a variation of that color and a random size (it’s not random actually; it’s the last size in the array of variations) and assigns it to a variable named variation. So all that’s needed is a way to call the function showVariationImage(variation) in frontend.js of the plugin to do the images swap… But the function, as well as all other functions in the file, are declared anonymously, so I can’t call them from within my hook (unless I’m missing something, as JS isn’t exactly my cup of tea)… Can someone please advise me on how to achieve what I need – if that’s even possible?

So this is my code:

add_action('woocommerce_after_single_product', 'swap_variation_images_after_color_selection');
function swap_variation_images_after_color_selection()
{
?>
<script type="text/javascript">
(function($) {
    $(window).load(function() {
        $("a.filter-item").click(function() {
            var attribute = $(this).attr('data-value');

            console.log("Attribute: ---> " + attribute);

            var variations = $('form.variations_form').data('product_variations');

            console.log("Variations: ---> " + Object.values(variations));

            var variation_id = '';
            var variation;

            for (var i = 0; i < variations.length; i++) {
                if (variations[i].attributes.attribute_pa_color == attribute) {
                    variation_id = variations[i].variation_id;
                    variation = variations[i];
                }
            }

            if (variation_id != '') {
                console.log("Images: ---> " + Object.values(variation.variation_gallery_images));
               
                // ALL OF THE LINES BELOW ARE MY ATTEMPTS TO CALL THE APPROPRIATE FUNCTION... ALL FAILED MISERABLY...
                $.fn['WooVariationGallery'].variation = variation;
                $.fn['WooVariationGallery'].images = variation.variation_gallery_images;
              
                $('.woo-variation-gallery-wrapper').WooVariationGallery['galleryInit'];
             //   $('.woo-variation-gallery-wrapper').WooVariationGallery['showVariationImage'];//(variation.variation_gallery_images);
                //$('.woo-variation-gallery-wrapper').trigger('woo_variation_gallery_variation_images', variation.variation_gallery_images);
                //$('.woo-variation-gallery-wrapper').trigger('before_woo_variation_gallery_init', variation.variation_gallery_images);
                //$('.woo-variation-gallery-wrapper').trigger('woo_variation_gallery_init', variation.variation_gallery_images);
                // UP TO HERE...
            }
        });
    })
})(jQuery);
</script>
<?php
}

And this is the content of file frontend.js of the plugin, that does all the images preloading/swapping, etc…

Hope someone can help me. TIA.