Category: javascript

Fullcalendar supports an eventContent and numerous other callbacks letting us to define custom templates for event UI and etc…
There is a wrapper library called @fullcalendar/angular, it provides a way to define custom event template in angular style and it renders into the correct spot the calendar.

<full-calendar [options]="calendarOptions()">
  <ng-template #eventContent let-arg>
    I am an event with {{ binding }} and {{ arg.event.title }}
  </ng-template>
</full-calendar>

My question: How actually this library makes it work? Fullcalendar in a nutshell is just a javascript library and I expect there is somewhere eventContent callback is called and this library does a trick by taking the template and creating a DOM element out of it. Can you tell me what technique is used for that? I can rephrase a question: how to dynamically generate a DOM Element, a template of which is managed by Angular. I even fine if change detection will not work automatically (it probably won’t).
I pulled a source repo and it’s content is very strange to me. I see how the eventContent is read from @contentChildren but nothing happens with it after.

I need the get a token returned from a self executed js function:

 const mytoken = (async () => {
        const getCookieToken = Cookies.get("clIntegrationToken");
        if (!getCookieToken || getCookieToken === "undefined") {
            const auth = await authenticate('client_credentials', {
                clientId: 'vuuLuWnTGhUayS4....',
                clientSecret: '8O9ft8X...'
            })
            token = auth.accessToken;
            Cookies.set("clIntegrationToken", token, {
                expires: auth.expires
            });
        } else {
            token = getCookieToken || "";
        }
        return token;
    })();

    let **abc**=mytoken.then((token) => {
        return token;
    });

abc is a promise. I need the token:

let abc=mytoken.then((token) => {
        return token;
    });

I made a WordPress website and I installed a plugin. But that plugin always shows a “successful” JavaScript popup that I don’t want. How I can remove this with css or another way. I can’t edit the plugin js file. If there is any way please share.

1 simple way to remove or disable JavaScript popup

I have 2 list of objects. One is the data and the other is the include conditions. I would want to device a filter in such a way that if the list that include conditions, has more properties added, it should still work.

const a = [{name:'John',age:38,role:'Dad'},{name:'Jane',age:38,role:'Mom'},{name:'Patricia',age:11,role:'Daughter'},{name:'Mike',age:6,role:'Son'}]
const b = [{age:38}]

let d = a.filter( (x) => {
  if (b.some( (y) => 
     y.age == x.age )  ) {
        return true
     } else return false
})
console.log(d)

Above code will give me

[{name:'John',age:38,role:'Dad'},{name:'Jane',age:38,role:'Mom'}]

but if i add another criteria to variable b

const b = [{age:38}, {role:'Son'}]

I need the result to be

[{name:'John',age:38,role:'Dad'},{name:'Jane',age:38,role:'Mom'},{name:'Mike',age:6,role:'Son'}]

The include condition can keep growing. Is it possible to device a filter condition to handle this?

Thanks
Sikkandhar

According to the react-spring documentation, their “imperative API” provides methods for stopping and starting springs using start and stop methods, respectively. Thus, it should be possible to write two springs, the first triggering the second:

  const [blueSpring, blueSpringAPI] = useSpring(
    () => ({
      from: { x: 0 },
      to: { x: 100 },
      config: { duration: 3000 },
      onRest: () => {
        pinkSpringAPI.start();
      },
    }),
    []
  );

  const [pinkSpring, pinkSpringAPI] = useSpring(
    () => ({
      from: { y: 100 },
      to: { y: 200 },
      config: { duration: 3000 },
    }),
    []
  );

  pinkSpringAPI.stop();

Of course, stopping the second spring so we can tell when the first one triggers it.

However, this code does NOT work as expected. The springs run simultaneously. Am I doing something wrong with my usage of the springref API?

codesandbox: https://codesandbox.io/p/sandbox/dpv9yf

I would like to post the solution just in case some needs it. The sample code converts the Devx Grid Filters and make a group of object to build the query.

I’ve written my own JavaScript class (for a custom web component). It raises a couple of events. For instance: TagChanged

To listen to this event, I (obviously) do this:

myObject.addEventListener('TagChanged'), (e) => doSomething());

But is it possible to have something like:

myObject.onTagChanged = (e) => doSomething();

The default DOM elements have things like onClick and onKeyDown. Are they using some other architecture?

I am using Wagmi with RainbowKit in my next.js app and want to use phantomWallet connector.

When I open my app on desktop Chrome, I am able to see the Phantom wallet option after downloading an extension to Chrome, but when I visit my website on mobile, I cannot see it on mobile iOS Chrome as an option after clicking on the @rainbow-me/rainbowkit Connect button. I tried download Phantom App and create an account there but did not help.

import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import {
  phantomWallet,
} from '@rainbow-me/rainbowkit/wallets';
import { createConfig, http, webSocket } from '@wagmi/core';

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [phantomWallet],
    },
  ],
  {
    appName,
    projectId,
  }
);

const wagmiConfig = createConfig({
  connectors,
  ssr: false,
  chains: [
    arbitrumSepolia,
  ],
  transports: {
    [arbitrumSepolia.id]: fallback([
      http('https://sepolia-rollup.arbitrum.io/rpc'),
    ]),
  },
});


// for openning the modal am using:
import { ConnectButton } from '@rainbow-me/rainbowkit';

I have an embed that needs to be updated and then a reply should trigger afterwards. The code takes about 5 seconds to complete so to prevent UnknownInteraction error, I added deferReply(). However, I can’t get it to work.

Here’s the exact flow:

1. Click button on an embed message from bot
2. The Embed should update
3. A new message shows confirming the click

I used update on #2 step, and editReply or followUp on #3 but to no avail.

I’m receiving Error [InteractionAlreadyReplied]: The reply to this interaction has already been sent or deferred. error on these 2 attempts:

Attempt 1

await interaction.deferReply();
await wait(5_000);
embed1 = embed1content;
embed2 = embed2content;
await interaction.update({ embeds: [embed1] });
interaction.followUp({ embeds: [embed2] });

Attempt 2

await interaction.deferReply();
await wait(5_000);
embed1 = embed1content;
embed2 = embed2content;
await interaction.update({ embeds: [embed1] });
interaction.editReply({ embeds: [embed2] });

I’m researching ways to validate that a password has been pwned or not. Part of the process is to get the SHA-1 hash of the password (I know – not secure – but this is just a first crude attempt at a larger project). I ran across the SubtleCrypto page that covers the digest() method and I am getting values from it – sort of – but am stuck-ish at a particular part.

async function digestMessage(message) {
            const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
            const hashBuffer = await window.crypto.subtle.digest("SHA-1", msgUint8); // hash the message
            const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
            const hashHex = hashArray
            .map((b) => b.toString(16).padStart(2, "0"))
            .join(""); // convert bytes to hex string
            return hashHex;
        }
digestMessage(password).then((digestHex) => console.log(digestHex));

The last line is where the trouble is. I’m using JS (executed by some very simple HTML), and I can set the value of an HTML element to see the result (by replacing console.log(digestHex) with document.getElementById(“name”).innerHTML = digestHex), but what I would prefer to do is to set digestHex (what I am assuming is holding the result) to a variable. I’ve tried different methods:

const output = "";

//take 1
digestMessage(password).then((digestHext) => output = digestHex);

//take 2
output = digestMessage(password).then((digestHex) => digestHex);

//take 3
digestMessage(password).then((digestHex) => { output = digestHex });

But I can’t seem to set digestHex to a variable, even though setting the value of an HTML element works fine – I either get nothing in the variable or it’s set to a promise object. I’m very very new to promises and am super rusty with JS, so any help would be appreciated. I’m sure the solution is simple, but I am at a loss lol

TIA!

I’m developing a simple react app with the following pages:

export default class App extends Component {
...

render(){
    return (
      <Router>
        <Navbar.../>
        <Switch>
           ...
          <Route
            exact
            path="/project"
            render={(props) => (
              <Project .../>
            )}
          />)
        }
}

I want to detect everytime a user exits the project component, to do some logic. I’ve tried to use the componentWillUnmount method as follow:

class Project extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
    };
  }

  componentWillUnmount(){
    console.log("hello, world!")
  }
...
}

Problem is, that method is never called: when I try to refresh the page, change url ecc, any hints?

react version: ^18.3.1
react router version: 5.2.0

Thanks

I am starting to play around with Astro(https://astro.build/) and I am super happy so far.

I am trying to build a multi-tenant website with 80+ different designs for one site. Markup should be mostly the same just the static files like logo.svg, favicon.ico, CSS and JS should alterate over the diverent sites.

As I was playing around I started to put my static files (.scss, .ico, .svg) in the /asset folder and wanted to reference them in the astro-components in the /pages folder. My folder structure looks like this right now:

I think its very useful to use the import at the — Block at the beginning of the component because all the static files will be minified, cachebusted, etc automatically by vite. This is quiete nice and I want to use this feature for sure.

But unfortunately I didnt find a solution yet to reference this static-files dynamically dependend on the incoming Request-Params. I was thinking about something like: If client X requests use this logo, css, etc., if client Y requests use another one.

I tried to use this import-Statements to add static files in my astro-comoponents:

---
import "../../assets/client1/css/_variables.scss";
import Header from "../../components/HeaderWhiteWidow.astro";
import headerLogo from "../../assets/client1/images/logo.svg";
import HtmlMeta from "../../components/HtmlMeta.astro";
import favicon from "../../assets/client1/images/favicon.ico";
import AuthorLayout from '../../pagesBase/Author.astro';
---

<AuthorLayout>
    <HtmlMeta slot="html-meta" faviconHref={favicon} />
    <Header slot="header" logo={headerLogo.src}/>
</AuthorLayout>

I already tried to find a way by saving some client-identifier from Request in the locals-contenxt and parameterize the import-statemate like this: import logo from ../assets/${clientName}/logo.svg . But as the components are pre-built it is not possible like this.

I started to build for each client its own page in the /pages folder which is super redundant and I want to prevent:

Is there a way to generate the path to static files dynamically, depending on the url and still have the benefit of using the static-files optimization in build?

Maybe there is also another approach for achieving a multi-client setup as described?

I’m having an issue using filter() (ln 19 below) extract only the emails in data (please see
data) of the user’s whose first and last name match the selected users from the last col and row of eList (these are the selected users, please see attached eList). Right now filter() is returning all emails. Can someone please explain what I’m doing wrong?

Here is the function:

//Extracts emails from data of selected users
function getEmailAddresses(e) {
  // Get the responses from the form.
  const responses = SpreadsheetApp.openById("SHEET_ID").getSheetByName("Form Responses 2");
  
  // Extract the selected names from the checkboxes.
  const eList = responses.getRange(responses.getLastRow(),2,1, 1).getValues();
  Logger.log("eListn" + eList);

  // Get the spreadsheet and sheet.
  const ss = SpreadsheetApp.openById("SHEET_ID");
  const shet = ss.getSheetByName('ECI');

  const data = shet.getRange(2, 1, shet.getLastRow() - 1, 3).getValues();

  Logger.log("Datan" + data);

  // Filter the data based on selected names and extract email addresses.
    const emailAddresses = data.map((row) => row[2] || false).filter(Boolean); // Filter() is not returning the emails of the selected users only, returns all emails
  Logger.log("Emailsn" + emailAddresses);

  // Return the email addresses as a comma-separated string.
  return emailAddresses.join(',');
}

// Populates Name in the Form onOpen(e)
function popFormList() {
  var sheet = SpreadsheetApp.openById('SHEET_ID').getSheetByName("ECI");
  var form = FormApp.getActiveForm();

  // Populates values for eList
  var siteValues = sheet.getRange(2, 1, sheet.getLastRow() - 1, 2),
    values = siteValues.getValues();

  values.sort();
  Logger.log(values);

  /* Populates eList with Names from ECI sheet */
  var siteItem = form.getItems(FormApp.ItemType.CHECKBOX)
    .filter(function (siteItem) {
      return siteItem.getTitle() === "Name";
    })[0].asCheckboxItem();
  siteItem.setChoiceValues(values);

}
// Runs when form is submitted with selected users to extract the emails of users for comms    
function main(e) {
  var formResponses = e.response,
    itemResponses = formResponses.getItemResponses(),
    body = "",
    emails = "";

  for (x = 0; x < itemResponses.length; x++) {
    if (itemResponses[x].getResponse() === "") {
      continue;
    }
    else {
      body += itemResponses[x].getItem().getTitle() + ": " + itemResponses[x].getResponse() + "n";
    }
  }
  emails = getEmailAddresses(e);
  subject = "ECI Request"
  Logger.log(emails);
  Logger.log(body);

  try {
    // GmailApp.sendEmail(emails, subject, body, { noReply: true});
  }
  catch (e) {
    Logger.log('Error: There was a problem please see belown' + e);
  }
}

I have a web application using CKEditor Version 4.16. We use most of CKEditor’s features, including the indent feature in our implementation. This is done with the “Increase Indent” button on the CKEditor toolbar. One issue we’ve seen is the “Increase Indent” button works only once when indenting text paragraphs. The button remains selectable, but clicking it additional times does not increase the size of the left margin. Users can manually increase the left margin size/width by manually updating the HTML, but many users are non-technical who may have difficulty doing that. Is allowing only a single indent one of CKEditor’s built-in limitations? Or do we need to add another plugin to fix this?

Our CKEditor implementation uses a plugin “indentblockdec”. I’ve traced our supporting customizations, but based on this tracing it isn’t clear if this plugin is actually used to support paragraph indentation.

I am working on a project to visualise weather forecasts using Shiny for Python and Folium. The objective is to allow users to interact with a slider to select the forecasted time, and display the corresponding weather data on a map.

The problem I’m encountering:
Every time the user changes the forecasted time using the slider, the map resets to the initial zoom level and center position. Ideally, I would like the map to retain the current zoom and center, even when switching the displayed layer (i.e., forecasted time).

I’ve tried to implement custom JavaScript in the app to capture the zoom and center changes and reapply them after the slider update, but it doesn’t seem to work as expected. The zoom and center are always reset to the initial values defined when the map is first created. Upon inspecting the web app’s source code, it looks like my JavaScript might not be correctly integrated with the rest of the application.

My setup:
Shiny for Python for the web app structure.
Folium for rendering the map and adding the weather data as layers.
A slider for selecting different forecasted time steps.
Attempted to use JavaScript to capture and restore the map’s view settings (zoom level and center) when changing the slider.

Question:
Is it possible to retain the zoom level and map center across updates when changing the forecast time using my current stack (probably similar to In shiny, how to fix (lock) leaflet map view zoom and center?, just in Python and not in R)? If so, how can I properly include JavaScript to achieve this? I would appreciate any ideas, solutions, or guidance on this!

This is the shortest version still exhibiting the problem:

from shiny import App, render, ui
import folium

# Define the Shiny UI
app_ui = ui.page_fluid(
    ui.h2("Dynamic Folium Map with Layer Switching"),
    ui.input_slider("layer_slider", "Choose Layer (1 = Marker, 2 = Circle)", min=1, max=2, value=1),
    ui.output_text_verbatim("slider_value"),
    ui.output_ui("map")  # Output container for the map
)

# Define the Shiny server
def server(input, output, session):
    
    # Display the slider value
    @output
    @render.text
    def slider_value():
        return f"Layer selected: {input.layer_slider()}"
    
    # Generate and display the map dynamically
    @output
    @render.ui
    def map():
        
        # Create a base map centered on Germany
        m = folium.Map(location=[51.1657, 10.4515], zoom_start=6)
        
        # Add layers depending on the slider value
        if input.layer_slider() == 1:
            folium.Marker([51.1657, 10.4515], popup="Marker in Germany").add_to(m)
        elif input.layer_slider() == 2:
            folium.Circle([51.1657, 10.4515], radius=50000, color='blue', popup="Circle Layer").add_to(m)

        # Return the map as an HTML string
        map_html = m._repr_html_()
        
        # Add custom JavaScript to preserve zoom level and map center
        custom_js = """
        <script>
        let mapZoom = 6;
        let mapCenter = [51.1657, 10.4515];

        // Function to capture map's zoom and center
        function captureMapState() {
            mapZoom = map.getZoom();
            mapCenter = map.getCenter();
        }

        // Function to restore map's zoom and center
        function restoreMapState() {
            map.setView(mapCenter, mapZoom);
        }

        // Capture state after zoom or move events
        map.on('zoomend', captureMapState);
        map.on('moveend', captureMapState);

        // Restore the view after the map is updated
        document.addEventListener('DOMContentLoaded', function() {
            restoreMapState();
        });
        </script>
        """
        
        # Embed the map and attach the custom JavaScript
        return ui.HTML(f"""
        <div style="width:100%; height:500px;">
            {map_html}
        </div>
        {custom_js}
        """)

# Create the Shiny app
app = App(app_ui, server)

# Run the app
app.run(port=8000)