We have two Add-Ins that were developed with VB script, one each for word document and excel document. These Add-Ins do some background work to replace placeholders in the template with the corresponding values provided.

We have an Angular application where user selects a word or excel template, at that time, the above mentioned Add-In based on the template type needs to be added/attached to the template.

I know how to create Add-in through Angular code, however, I don’t know how to attach/add Add-in to the templates through Angular code.

Is it possible to attach an existing Add-in to the template in Angular application?

i want to make pause and resume function in the same button, but the error message indicate that the port was closed. i assume that the sendMessage failed to send a message to my background.js like the error literally said, or the speechSynthesis status like speaking, paused, etc only updated on readSelectedText() function.

here is my background.js:

let isPaused = false;
let currentUtterance = null;
   
function readSelectedText(text) {
  chrome.storage.sync.get(["selectedVoice", "selectedRate", "selectedVolume"], (data) => {
    if (speechSynthesis.speaking) {
      speechSynthesis.cancel(); 
      
      console.log("read text:", text, speechSynthesis.speaking);
    }

    let utterance = new SpeechSynthesisUtterance(text);
    let voices = speechSynthesis.getVoices();

    if (data.selectedVoice) {
      let selectedVoice = voices.find(v => v.name === data.selectedVoice);
      if (selectedVoice) {
        utterance.voice = selectedVoice;
      }
    }

    utterance.rate = data.selectedRate || 1.0;
    utterance.volume = data.selectedVolume !== undefined ? data.selectedVolume : 1.0;

    // Event listener for update status
    utterance.onstart = () => {
      isPaused = false;
      chrome.storage.sync.set({ isPaused: false, isSpeaking: true });
      console.log("im on start");
    };

    utterance.onpause = () => {
      isPaused = true;
      chrome.storage.sync.set({ isPaused: true });
      console.log("im onpause");
    };

    utterance.onresume = () => {
      isPaused = false;
      chrome.storage.sync.set({ isPaused: false });
      console.log("im onresume");
    };

    utterance.onend = () => {
      isPaused = false;
      chrome.storage.sync.set({ isPaused: false, isSpeaking: false });
      console.log("im onend");
    };

    speechSynthesis.speak(utterance);
    console.log("read text:", text, speechSynthesis.speaking);
  });
  
}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // console.log("reciving request action:", request.action);

  if (request.action === "pauseSpeech") {
      if (!speechSynthesis.paused) {
          // speechSynthesis.pause();
          speechSynthesis.pause();
          chrome.storage.sync.set({ isPaused: true });
          sendResponse({ status: "paused" }); 
          // return true;
      } else {
          console.log("on pause.");
          sendResponse({ status: "already_paused" });
          // return true;
      }
      
  } 
  else if (request.action === "resumeSpeech") {
      if (speechSynthesis.paused) {
          speechSynthesis.resume();
          chrome.storage.sync.set({ isPaused: false });
          sendResponse({ status: "resumed" }); 
          // return true;
      } else {
          console.log("playing.");
          sendResponse({ status: "already_playing" });
          // return true;
      }
  }
  
  return true; 
});

here is my voice.js:

  const pauseSpeech = document.getElementById("pauseSpeech");
  const status = document.getElementById("status");
  const data = document.getElementById("data");
  
  pauseSpeech.addEventListener("click", () => {
    console.log("aku paused click");
    // speechSynthesis.pause();
    chrome.storage.sync.get(["isPaused"], (result) => {
        if (!result.isPaused) {
            console.log("im if click");
            chrome.runtime.sendMessage({ action: "pauseSpeech" }, (response) => {
                if (chrome.runtime.lastError) {
                  data.innerText = `
                  Error sending message:, ${chrome.runtime.lastError.message}`;
                  return true;
                } else {
                    data.innerText = `Status: ${response.status}`;
                  return true;
                }
            });
        } else {
            // speechSynthesis.resume();
            chrome.runtime.sendMessage({ action: "resumeSpeech" }, (response) => {
                if (chrome.runtime.lastError) {
                  data.innerText = `
                  Error sending message:, ${chrome.runtime.lastError.message}`;
                  console.log("im else");
                  return true;
                } else {
                    data.innerText = `Status: ${response.status}`;
                    return true;
                }
            });
        }
        return true;
    });
});

what im expecting is when user right click the selected phrase then click contextMenu “read selected” the selcted text get readed with speechSynthesis and when user click pause button the speechSynthesis get paused and if the user click pause button again the speechSynthesis get resume.

i already tried giving speechSynthesis.pause() and resume directly in voices.js the pause function is working but not the resume, here’s what it’s like:

pauseSpeech.addEventListener("click", () => {
     console.log("pauseSpeech");
     if (!isPaused) {
         speechSynthesis.pause();
         isPaused = true;
         data.innerText = `
         Speaking: ${speechSynthesis.speaking},
         Paused: ${speechSynthesis.paused},
         Pending: ${speechSynthesis.pending}.`;
     } else{
         speechSynthesis.resume();
         isPaused = false;
         data.innerText = `
         Speaking: ${speechSynthesis.speaking},
         Paused: ${speechSynthesis.paused},
         Pending: ${speechSynthesis.pending}.`;
     }
 });

const flipCards = document.querySelectorAll('.flip-card');
const viewMoreButtons = document.querySelectorAll('#view-more-details-button');
const viewSummaryButtons = document.querySelectorAll('#view-summary-button');

// Loop through the buttons and add event listeners
viewMoreButtons.forEach((button) => {
  button.addEventListener('click', function() {
    // Get the flip-card-inner element that corresponds to the button clicked
    const flipCardInner = button.closest('.flip-card').querySelector('.flip-card-inner');

    // Toggle the 'flipped' class to trigger the flip effect
    flipCardInner.classList.toggle('flipped');
  });
});

viewSummaryButtons.forEach((button) => {
  button.addEventListener('click', function() {
    // Get the flip-card-inner element that corresponds to the button clicked
    const flipCardInner = button.closest('.flip-card').querySelector('.flip-card-inner');

    // Remove the 'flipped' class to trigger the flip effect
    flipCardInner.classList.remove('flipped');
  });
});

html,
body {
  margin: 0 0 200px 0;
  padding: 0;
}

body {
  background: white;
  overflow-x: hidden;
}

/* Nav Bar */

nav {
  font-size: 1.25rem;
  height: 5rem;
  z-index: 999;
  position: sticky;
  top: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: lightblue;
  padding: 0 6rem;
  width: 100vw;
  box-sizing: border-box;
}


#nav-logo {
  height: 40px;
  font-family: "Roboto";
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-grow: 1;
}

nav li {
  display: flex;
  align-items: center;
  padding: 0px 2rem;
}

nav a {
  text-decoration: none;
  transition: 0.2s ease;
}


#nav-name {
  font-size: 36px;
  font-weight: 800;
  font-family: "Roboto";
}

#contact-nav {
  color: white;
  padding: 1.1rem;
}



#card h1 {
  font-size: 3.5rem;
  margin: 4rem 0 4rem 0;
}

.style-card h1 {
  margin-top: 0 !important;
}

#card {
  width: 100vw;
  height: auto;
  background: white;
  margin-bottom: 5rem;
}

#card-grid {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  width: 90vw;
  grid-gap: 1px;
}

.style-card {
  background-color: transparent;
  /*#a2b1bd;*/
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 24%;
  aspect-ratio: 1/1.3;
}


#card h3 {
  margin: 0;
}

#card img {
  background-color: transparent;
  border-radius: 1rem;
  width: 96px;
  height: 96px;
}


.style-card ul {
  list-style-type: "> ";
  width: 60%;
  margin: 0;
}

.style-card li {
  padding: .55rem 0;
}

.style-card button {
  border: none;
  padding: 1rem 0;
  border-radius: 15rem;
  color: white;
  width: 60%;
  font-size: 1.01rem;
  background-color: black;
  transition: 0.2s ease;
}

.style-card button:hover {
  cursor: pointer;
  background-color: #2834b5;
}


.banner {
  width: 100%;
  margin: 0 !important;
  text-align: center;
  font-size: 1.2rem;
  color: white;
  border-radius: 16px 16px 0 0;
  margin: 0;
  padding: .5rem 0;
  margin-bottom: -1.25rem;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: transparent;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
}

#highlighted-banner {
  background-color: red;
  color: white;
}

.grow-box {
  flex-grow: 1;
}


/*card flip*/
.flip-card {
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flipped {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border-radius: 16px;
  z-index: 1;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: white;
  border: 1px #DDDDDD solid;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

<nav>
  <p id="nav-name">Logo Here</p>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a>
    <li><a href="">Blog</a></li>
    <li><a href="">FAQ</a></li>
  </ul>
  <button id="contact-nav">Contact</button>
</nav>

<div id="card" class="center-container">
  <h1>Displaying flippable cards</h1>
  <div id="card-grid">
    <div class="flip-card style-card hidden">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <p class="banner" id="highlighted-banner">Put the bottom edge of the blue nav bar half way over this banner to see effect</p>
          <img src="https://em-content.zobj.net/source/apple/391/high-voltage_26a1.png">
          <h3>Title</h3>
          <p>Front of Card</p>
          <ul>
            <li>Example 1</li>
            <li>Example 2</li>
            <li>Example 3</li>
            <li>Example 4</li>
            <li>Example 5</li>
            <li>Example 6</li>
            <li>Example 7</li>
            <li>Example 8</li>
          </ul>
          <div class="grow-box"></div>
          <button id="view-more-details-button">View More Details</button>
        </div>
        <div class="flip-card-back">
          <h1>John Doe</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
          <button id="view-summary-button">View Summary</button>
        </div>
      </div>
    </div>
  </div>
</div>

I am trying to implement this Card Flipping effect from W3Schools (https://www.w3schools.com/howto/howto_css_flip_card.asp) into my current project but I’m only having issues with the transition when the Card is under the Navigation Bar.

If you scroll the blue Navigation Bar so the bottom edge covers the Red Banner of the Card then press the button to start the animation, the top half of both sides of the Card will begin to flicker. If you cover the entire banner or none of the banner with the Navigation Bar then the transition on looks and works fine. Why does this happen and how would I go about fixing this?

I want to eagerly load a related aws-amplify gen 2 model and pass it on, but it seems to cause a typescript error no matter what I try. How do I do this without causing a typescript error?
For background, I’ve done JavaScript, Python and dabbled in others but I’m new to TypeScript and Amplify. I’m using the web/ChatGPT to figure it out but neither seemed to help with this question.

The Error

Types of property 'dataType' are incompatible.
        Type '{ name: string; isComplex: boolean; dataCategories: LazyLoader<{ name: string; addDefault: boolean; dataEntries: LazyLoader<{ category: LazyLoader<... | null, false>; dataCategoryId: string; ... 7 more ...; readonly updatedAt: string; } | null, true>; ... 9 more ...; readonly updatedAt: string; } | null, true>; note...' is not assignable to type 'LazyLoader<{ name: string; isComplex: boolean; dataCategories: LazyLoader<{ name: string; addDefault: boolean; dataEntries: LazyLoader<{ category: LazyLoader<... | null, false>; dataCategoryId: string; ... 7 more ...; readonly updatedAt: string; } | null, true>; ... 9 more ...; readonly updatedAt: string; } | null, ...'.
          Type 'undefined' is not assignable to type 'LazyLoader<{ name: string; isComplex: boolean; dataCategories: LazyLoader<{ name: string; addDefault: boolean; dataEntries: LazyLoader<{ category: LazyLoader<... | null, false>; dataCategoryId: string; ... 7 more ...; readonly updatedAt: string; } | null, true>; ... 9 more ...; readonly updatedAt: string; } | null, ...'.

The Set Up

api.ts

/**
 * Subscribe to real-time updates for data categories, including their data types.
 * @param {Function} callback - Function to update state with new data.
 * @returns {Function} Unsubscribe function.
 */
export function subscribeToDataCategories(
  callback: (items: Schema["DataCategory"]["type"][]) => void
): () => void {
  const sub = client.models.DataCategory.observeQuery().subscribe({
    next: async (result: { items?: Schema["DataCategory"]["type"][] }) => {
      console.log("Updating DataCategories:", result.items);

      if (!result.items) {
        callback([]);
        return;
      }

      const enrichedItems = await Promise.all(
        result.items.map(async (item) => {
          try {
            let dataType: Schema["DataType"]["type"] | undefined;

            if (item.dataType && typeof item.dataType === "function") {
              // Resolve LazyLoader
              const resolved = await item.dataType();
              dataType = resolved?.data ?? undefined;
            }

            return { ...item, dataType };
          } catch (error) {
            console.error(
              `Failed to fetch DataType for ID ${item.dataTypeId}:`,
              error
            );
            return { ...item };
          }
        })
      );

      console.log("Enriched Categories:", enrichedItems);

      callback(enrichedItems);
    },
    error: (error: unknown) => {
      console.error("Subscription error:", error);
    },
  });

  return () => sub.unsubscribe(); // Cleanup function
}

resources.ts

Here is my resources.ts file

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
import { postConfirmation } from "../auth/post-confirmation/resource";

const schema = a
  .schema({
    UserProfile: a
      .model({
        email: a.string().required(),
        profileOwner: a.string(),
      })
      .secondaryIndexes((index) => [index("email")])
      .authorization((allow) => [
        allow.owner(),
        allow.ownerDefinedIn("profileOwner"),
        allow.groups(["Admins"]).to(["read"]),
      ]),
    DataType: a
      .model({
        name: a.string().required(),
        note: a.string(),
        isComplex: a.boolean().required(),
        dataCategories: a.hasMany("DataCategory", "dataTypeId"),
      })
      .secondaryIndexes((index) => [index("name")])
      .authorization((allow) => [allow.authenticated(), allow.publicApiKey()]),
    DataCategory: a
      .model({
        name: a.string().required(),
        note: a.string(),
        addDefault: a.boolean().required(),
        defaultValue: a.string(),
        options: a.string().array(), // For future use with options of values
        dataEntries: a.hasMany("DataEntry", "dataCategoryId"),
        dataTypeId: a.id().required(), // ✅ Explicitly define the reference field
        dataType: a.belongsTo("DataType", "dataTypeId"),
        entryCount: a.integer().default(0),
      })
      .secondaryIndexes((index) => [index("name")])
      .authorization((allow) => [
        allow.owner(),
        allow.groups(["Admins"]).to(["read"]),
        allow.publicApiKey(), // TODO: Remove. FOR TESTING
      ]),
    DataEntry: a
      .model({
        note: a.string(),
        category: a.belongsTo("DataCategory", "dataCategoryId"),
        dataCategoryId: a.id().required(),
        date: a.date().required(),
        value: a.string().required(),
        dummy: a.integer().default(0),
      })
      .secondaryIndexes((index) => [
        index("dataCategoryId")
          .name("categoryEntriesByDate")
          .queryField("listCategoryEntries")
          .sortKeys(["date"]),
        index("dummy")
          .name("entriesByDate")
          .queryField("listByDate")
          .sortKeys(["date"]),
      ])
      // client.models.DataEntry.listDataentryByDataCategoryId({dataCategoryId: "ID"})
      .authorization((allow) => [
        allow.owner(),
        allow.groups(["Admins"]).to(["read"]),
        allow.publicApiKey(), // TODO: Remove. FOR TESTING
      ]),
  })
  .authorization((allow) => [allow.resource(postConfirmation)]);

export type Schema = ClientSchema<typeof schema>;

// export const schema = schema;
export { schema };

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "userPool", // Changed from public api key. https://docs.amplify.aws/react/build-a-backend/data/customize-authz/
    apiKeyAuthorizationMode: {
      expiresInDays: 30,
    },
  },
});

Attempts

Attempt 1

This time I tried partially custom types, still errored.

type ResolvedDataType = Omit<Schema["DataType"]["type"], "dataCategories"> & {
  dataCategories?: Schema["DataCategory"]["type"][];
};

type EnrichedDataCategory = Omit<Schema["DataCategory"]["type"], "dataType"> & {
  dataType?: ResolvedDataType;
};

export function subscribeToDataCategories(
  callback: (items: EnrichedDataCategory[]) => void
): () => void {

Attempt 2

Here I tried just adding DataType to the standard DataCategory type but it also errored.

export function subscribeToDataCategories(
  callback: (
    items: (Schema["DataCategory"]["type"] & {
      dataType?: Schema["DataType"]["type"];
    })[]
  ) => void
): () => void {

I have two grids which are in sync using alignedGrids property. I gave first two columns as flex:0 with minWidth and remaining n columns as flex:1 weith minWidth as 140.

When I resize the browser to small and back to large, first grid aligns fine but 2nd grid not aligning as expected, its stuck at minWidth at 140 and not flexing back to full width.

I’m looking for a solution in React

Endpoint:

[HttpGet("GetFileStream/{id}")]
[Produces("application/octet-stream")]
public async Task<Stream> GetFile(int id)
{
  Stream stream = await Services.FileStorage.GetFileStream(id, CurrentUserId);
  return stream;
}

 public async Task<Stream> GetFileStream(int id, string currentUserId)
 {
   FilePath filePath = await GetAsync(id);

   if (filePath == null)
   {
     return null;
   }

   if (File.Exists(filePath.fileName))
   {
     StreamContent stream = new StreamContent(File.Open(filePath.fileName, FileMode.Open));
     return await stream.ReadAsStreamAsync();
   }

   return null;

 }

The response contains the first chunk of bytes, but my pdf is blank of text and images don’t load correctly either.

const getFile = async (id, fileType) => {
  const url = Endpoints.fileStorage.getFile.replace("{id}", id);
  const response = await httpService.get(url, {
    responseType: 'application/octet-stream'
  });

  return response;
};

View code:

const renderFileContent = () => {
    if (!fileContent)
      return null;
    const { fileData, metaData, extension } = fileContent;
    if (filePathId) {
      //Stream file
      if (extension === "png" || extension === "jpg") {
        return (
          <div>
            <img src={`data:image/png;base64,${Buffer.from(fileData?.data, 'binary').toString('base64')}`} />
          </div>);
      }
      else if (extension === "pdf") {
        return (
          <div>
            <Document
              file={Buffer.from(fileData?.data, 'binary').buffer}
              onLoadSuccess={onDocumentLoadSuccess}>
              <Page pageNumber={pageNumber} />
            </Document>

            <p>
              Page {pageNumber} of {numPages}
            </p>
          </div>
        )
      }
    }

    else return null;
  };

With this code I get:
Warning: Invalid stream: “FormatError: Bad FCHECK in flate stream: 120, 253”

All of the Docs for streams in .net are for razer/blazor. Is there a way to parse in javascript?

I have tried many conversion methods, but I think the problem is I am not gathering all of the data from the stream. Because when I paste the bytes received into a base64 to pdf I get 12 blank pages as pdf.

I have also played around with returning different content-type headers, but none of them change the response, and ‘stream’ doesn’t work like nodejs.

I’m expecting to be able to constantly read from the endpoint or a reader but not sure what to return from my httpService function.

There is also this: https://github.com/dotnet/aspnetcore/pull/34817 but it’s unclear whether this will work using axios since there is a consumer? (I don’t know much about blazor)

Nav.jsx

<a href="#fee">Fee</a>
<a href="#proses">Proses rekber</a>

App.jsx

<section id="fee">
this is fee section
</section>
<section id="proses">
this is proses section
</section>

Problem :
when clicking the link for the first time didnt scroll down automatically and need to reload the page first to navigate to spesific id.

demo :

https://www.raijinshop.store/#fee

expected :
when click the link automatically scroll to spesific id section like this https://v5.reactrouter.com/web/api/Hooks/uselocation.

Below has the details , tried multiple updates, still no luck
works in VS code but not in gcp – cloud run
package.json

{
  "name": "whatsappendpoint-test2",
  "type" : "module",
  "engines": {
    "node": ">=14.0.0"
  },
  "version": "0.0.1",
  "dependencies": {
    "@google-cloud/functions-framework": "^3.0.0"
   
  }
}

Code

export function test(req, res) {
    import {MY_CONST} from './consts.js';
    console.log(test)
    res.send('Hello world');
};

BUILD ERROR

Running "node --check index.js"enter code here
/workspace/index.js:4
import {MY_CONST} from './consts.js'
^
SyntaxError: Unexpected token '{'
at checkSyntax (node:internal/main/check_syntax:74:5)
Node.js v22.14.0

We are using WordPress + Astra + Elementor on our site. Can someone help me achieve this scrolling and sticking sidebar ads effect on search engine journal site? If possible to do it on Elementor?

Please see the video here:
https://youtu.be/Asn50BE2WiI

I’ve tried using Elementor HTML Module with it to no avail. I can only do sticky sidebar ads.

What I would like to do

I’m trying to create a small extension for my own usage.
For this extension to work I need to execute a “local” js function call on a web page (that I do not own) and pass the result to my background service worker script.
So far I was either able to:

• Have a content_scripts be able to execute the “local” function (using “world”: “MAIN”), but this script can’t access chrome.runtime.sendMessage().

Uncaught (in promise) Error: Extension context invalidated.
or

• Have the content_scripts successfully send message to my background service worker but is not able to access the “local” function

main.js:4 Uncaught (in promise) ReferenceError: myFuncName is not defined

How do I do that?

What I tried

• In the following files, if I let them as is, I get a ReferenceError on the 4th line of main.js.
• If I comment this line an uncomment the 5th line it works (but is not what I want)
• If I add “world”: “MAIN” in the “content_scripts” section of the manifest.json, I get the Extension context invalidated on line 7 of main.js

manifest.json

{
  "manifest_version": 3,
  "name": "ExtName",
  "version": "0.0.1",
  "content_scripts": [
    {
      "matches": ["*://url/*"],
      "js": ["main.js"]
    }
  ],
  "host_permissions": [
        "*://*/*"
    ],
  "background": {
    "service_worker": "background.js"
  }
}

main.js

var intervalID = window.setInterval(checkValue, 1000);

function checkValue() {
    let value = getValue();
    // let value = "value";
    if (value) {
        const response = await chrome.runtime.sendMessage({status: value});
        console.log(response.text);
    }
};

background.js

function handleMessage(request, sender, sendResponse) {
    console.log(request.status);
    sendResponse({ text: "Received!" });
}

chrome.runtime.onMessage.addListener(handleMessage);

in the page script (that I do not control)

function getValue() {
    return "value";
}

I am using a WordPress child theme, and would like to add some additional functionality to my mobile submenus. Right now on mobile devices, I can only open the submenus by tapping the arrow. I am looking to style my submenu items to open on a tap of the parent menu item, not just by tapping the arrow.

I do not want to use a plugin. I was reading some information in google searches, saying that entering # in my parent item’s link field would set it to open the submenu, but that doesn’t work for me… maybe that was for a different situation. I found several related threads that didn’t answer my question. Not sure how developer-heavy this will be, or if it is something solved in the WordPress editor. Thanks

The page I need help with: https://ultraviolet.com/

I have already posted to WordPress forums, and they told me to reach out to my parent theme’s support, which was not helpful. I can hire them to do it if necessary but I feel this should be an easy fix. I am not knowledgeable with javascript but can get by if I know what code to put where.

One of our sub-offices uses a website where a logo banner appears when someone scrolls down. They were able to do this on a WordPress site using a plugin they don’t pay for, hence I cannot update it. Bit of a snag. It being a basicly static page I decided to mimic the site using html, css and javascript (ow… and bootstrap, come to think of it… not really sure why)

Anyway… I got stuck on the apearing banner. It appears just fine, but I cannot get it to just as wide as the other divs/rows with content. It either appears to wide or to narraw.

This is the html I came up with:

<div class="container">
  <div id="stayontop" class="row hide" align="center"><p>Stay on top</p></div>
  <div class="row short"><p>Nice and short</p></div>
  <div class="row long">
    <p>[A very long piece of tekst to force scrollbar. Snipper away for posting here]</p>
  </div>  
</div>

As you can see: just a container with 3 rows. The last 2 are visible by default and fill the width of the container. The first div has an id “stayontop” and a class “hide”.

This is the css:

#stayontop{
  position: fixed;
  z-index: 2
  width: 100%;
  background-color: red;
  opacity: 50%;
}
#stayontop.hide{
  display: none;
}
#stayontop.show{
  display: block;
}
.short { background-color: yellow;}
.long { background-color: green;}

The position and z-index are supposed to keep the div at the top of page while the rest scrolls underneath it. Seems to work.
The classes “hide” and “show” toggle the vissability. That to seams to work.

The class is toggled using javascript:

window.onscroll = function() { scrollFunction()};

function scrollFunction(){
  console.log(document.documentElement.scrollTop);
  if (document.documentElement.scrollTop > 100){
    console.log('groter');
    document.getElementById("stayontop").classList.add('show'); 
    document.getElementById("stayontop").classList.remove('hide');
  }else{
    console.log('kleiner')
    document.getElementById("stayontop").classList.remove('show'); 
    document.getElementById("stayontop").classList.add('hide');
  }
};

This changes the hide or show based on the number of pixels scrolled. Works as expected.

But I cannot understand why the div “stayontop” does not have the same width as the other divs.

Got a codepen to fiddle around in: https://codepen.io/peter-kaagman/pen/zxYRydL

The CreateStore type takes a function that returns an object. I need to extract all the properties from this object, remove the functions, and then select the keys of the remaining types and inline those types into the Listeners type.

In the code, there’s an example type tempFunc, and when passing the function directly, everything works, and it results in a type like ["isLoading", [() => ReactElement]]. However, when using generics in CreateStore, the types are lost and generalized to a plain string type.

I don’t know how to preserve inline types when passing them through CreateStore.

import { ReactElement } from "react";

type SetStateInternal<T> = {
    _(
        partial: T | Partial<T> | ((state: T) => T | Partial<T>),
        replace?: false,
    ): void;
    _(partial: T | ((state: T) => T), replace: true): void;
}["_"];

type StoreApi<T> = {
    setState: SetStateInternal<T>;
    getState: (
        partial: T,
        newListener: () => ReactElement,
    ) => { state: T; removeListener: () => void };
    getInitialState: () => T;
    subscribe: (partial: T, newListener: () => ReactElement) => () => void;
};

interface StoreState<T> {}

const func = (set) => ({
    isLoading: false,
    setIsLoading: (newIsLoading: boolean) => set({ isLoading: newIsLoading }),
});

type ExtractState<S> = S extends {
    getState: (...args: any) => { state: infer T };
}
    ? T
    : never;

type Get<T> = {
    [K in keyof T as T[K] extends (...args: any) => any ? never : K]: T[K];
};

type Listeners<T> = Map<T, Set<() => ReactElement>>;

type InitialListeners<T> = [keyof Get<T>, [() => ReactElement]] extends [
    infer K,
    [() => ReactElement],
]
    ? [K, [() => ReactElement]]
    : T;

type tempFunc = temp1<typeof func>;

type temp1<T> = T extends (...args: any) => any
    ? [keyof Get<ReturnType<T>>, [() => ReactElement]] extends [
          infer K,
          [() => ReactElement],
      ]
        ? [K, [() => ReactElement]]
        : never
    : never;

export type StateCreator<T> = (
    setState: StoreApi<T>["setState"],
    getState: StoreApi<T>["getState"],
    store: StoreApi<T>,
) => T;

export type CreateStore = {
    <T, U = T extends (...args: any) => any ? ReturnType<T> : T>(
        initializer: StateCreator<T>,
        initialListeners?: InitialListeners<U>,
    ): StoreApi<T>;

    <T, U = T extends (...args: any) => any ? ReturnType<T> : T>(): (
        initializer: StateCreator<T>,
        initialListeners?: InitialListeners<U>,
    ) => StoreApi<T>;
};

type CreateStoreInit = <
    T,
    U = T extends (...args: any) => any ? ReturnType<T> : T,
>(
    initializer: StateCreator<T>,
    initialListeners?: InitialListeners<U>,
) => StoreApi<T>;

const createStoreInit: CreateStoreInit = (createState, createListeners) => {
    type TState = ReturnType<typeof createState>;
    let state: TState;
    const listeners: Listeners<keyof Get<TState>> = new Map();
    
    ... 
    never mind
};

export const createStore: CreateStore = ((initialState, createListeners) =>
    initialState
        ? createStoreInit(initialState, createListeners)
        : createStoreInit) as CreateStore;

The below listed function is not giving captains in radius data while creating a ride with user. It is accepting the latitude and longitude. I tried to log the data at every step, whole code is working fine except getCaptainsInRadius function is returning an empty array. I thought maybe there can be an issue with how I defined location in the schema. Let me know what you guys think?

module.exports.getCaptainsInRadius = async (ltd, lng, radius) => {
  try {
    const captains = await captainModel.find({
      location: {
        $geoWithin: {
          $centerSphere: [[ltd, lng], radius / 6371],
        },
      },
    });
    console.log("Captains found:", captains);
    return captains;
  } catch (err) {
    console.error("Error fetching captains:", err);
    throw err;
  }

I defined location schema like this:

location: {
    ltd: {
      type: Number,
    },
    lng: {
      type: Number,
    },
  }.

Now this is the alternative suggested by Chatgpt, Github copilot and other AI bots as per the MongoDB defined schema:

location: {
  type: {
    type: String,
    enum: ["Point"], // Must be "Point" for GeoJSON
    required: true,
  },
  coordinates: {
    type: [Number], // Array of numbers: [longitude, latitude]
    required: true,
  },
},

I tried using this method too. Still getting no response just plain empty array

I am trying to create a beautiful chart to visualize the dynamics of school students’ performance.

I am using Angular version 17.3.0, ECharts version 5.5.1, and ngx-echarts version 17.2.0.

I have this config:

{
    grid: {
      left: 20,
      right: 25,
      top: 0,
      bottom: 40,
    },
    xAxis: {
      type: 'category',
      data: [
        '9 фев',
        '16 фев',
        '23 фев',
        '1 мар',
        '8 мар',
        '15 мар',
        '22 мар',
        '29 мар',
        '5 апр',
        '12 апр',
      ],
      boundaryGap: false,
      axisLabel: {
        interval: 0,
        overflow: 'truncate',
        color: '#86909C',
        fontSize: 14,
        fontWeight: 'normal',
        margin: 10,
        formatter: (value: string) => {
          const [day, month] = value.split(' ');
          return `{a|${day}}n{b|${month}}`;
        },
        rich: {
          a: {
            fontSize: 14,
            align: 'center',
          },
          b: {
            fontSize: 14,
            align: 'center',
          },
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    yAxis: {
      type: 'value',
      min: 1,
      max: 6,
      interval: 1,
      position: 'right',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
        },
      },
      axisLabel: {
        color: '#0B1F33',
        fontSize: 16,
        fontWeight: 'bold',
        margin: 12,
        formatter: (value: number) => {
          if (value < 2 || value > 5) {
            return '';
          } else {
            return value.toString();
          }
        },
      },
    },
    series: [
      {
        name: 'Test',
        type: 'line',
        smooth: true,
        data: [null, 4, null, null, 4.57, 5, 4],
        connectNulls: true,
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: '#0E69D5',
          borderColor: '#ffffff',
          borderWidth: 1,
        },
        lineStyle: {
          color: '#185AC5',
        },
        symbol: 'circle',
        symbolSize: 7,
        markLine: {
          symbol: 'none',
          tooltip: { show: false },
          label: { show: false },
          data: [
            {
              xAxis: 6,
              lineStyle: {
                color: '#0E69D5',
                width: 1,
                type: 'solid',
              },
              emphasis: {
                disabled: true,
              },
            },
          ],
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(192, 216, 253, 0.80)' },
              { offset: 1, color: 'rgba(237, 247, 255, 0.08)' },
            ],
          },
        },
      },
    ],
  }

This is how it looks:

Could you please tell me how I can change the type of the line marked in red to solid without affecting the other vertical lines?
And how can I make the horizontal lines extend beyond the boundaries of the chart as I’ve shown in green? Or is this impossible to do with ECharts? If it’s impossible, could you please recommend other libraries?