javascript – Page 32 – Blancer.com Tutorials and projects

Is possible to skip one scroll context for a position sticky element?

There is a way in css to specify relative to which scroll context a position sticky element should be floating?

<div class="main">
  <div class="row">
    <div class="cell">(0, 0)</div> <!-- I want this to be sticky -->
    <div class="cell">(0, 1)</div>
    <div class="cell">(0, 2)</div>
    ...
    <div class="subtable">
      <div class="somtehing">
        <div class="row">
          <div class="cell">(0, 0)</div> <!-- I also want this one to be sticky to the .main tag -->
          <div class="cell">(0, 1)</div>
          <div class="cell">(0, 2)</div>
          ...

check this codepen example

The first column of the nested table rows, despite of how many tags deep is inside the DOM tree always uses the .main div as it’s scroll context because is its the first one that it found going up in the tree.

// this makes the subtables less annoying enforcing a scroll
// but makes the sticky to be relative to .subtable
.subtable
  height: 100px
  overflow-y: auto

check this other codepen example

If I enforce a height and a scroll-y auto to the .subtable div, then the stickyness of the cells in the subtable are applied to this scroll context since is the first one they found in their way up.

I would like to ignore that first one scroll context and tell to the sticky columns to be aware of the second scroll context in their way up of the tree. Or maybe to specify directly to which tag is supoused to listen.

How to reuse common localization texts for a specific domain in JSON files?

I have multiple JSON files for localization in my Next.js/React project. Some texts and phrases are shared within a specific domain, like product or order.

I don’t want to put these texts into a global commonText.json because:

It would become too large and messy.
These texts are only relevant to a specific domain.

I also don’t want to duplicate them in each JSON file for the pages of that domain.

My idea is to create a separate JSON file for each domain, e.g., OrderCommonText.json, define the shared texts there, and then reference or import them where needed.

Question:
What is the best way to structure and reuse domain-specific common texts in JSON for localization?
Is there a better approach than creating a separate JSON per domain?

I tried creating separate JSON files for each domain (like OrderCommonText.json) and importing or merging them in the page files.

I expected to be able to reuse the shared texts across multiple pages without duplicating them, and keep the localization files organized per domain.

Currently, the solution works with manual imports and merges, but I am looking for a cleaner, more scalable approach that might work directly with JSON or some preprocessing, ideally also compatible with client-side rendering in Next.js.

Why is my filter returning all data values?

I’m accessing a firestore db via vanilla js. The filter I’ve setup is returning all values in the db instead of the single matching value.
Here is a screenshot of the filtered data item:
Screenshot showing title stored as string vs a number.

Here is my code:

import { initializeApp } from 'firebase/app'
import {
    getFirestore, collection, getDocs,
    addDoc, deleteDoc, doc,
    onSnapshot,
    query, where
} from 'firebase/firestore'

const firebaseConfig = {
    // data removed for posting
}

initializeApp(firebaseConfig)
const db = getFirestore()
const colRef = collection(db, 'books')
// query
const q = query(colRef, where("title", "==", "1984"))

// real time data collection listener
onSnapshot(q, (snapshot) => {
    let books = []
    snapshot.docs.forEach((doc) => {
        books.push({ ...doc.data(), id: doc.id })
    })
    console.log(books)
})

Any feedback is greatly appreciated! Thank you.

A bundle.js exported from Canvas LMS runs on local machine but all the links cannot be found on remote machine

I have a bundle.js file that Canvas generated for a course export. Browsing the index.html:

<body onunload="function noop(){}">
  <div id="app">
  </div>
  <script src="viewer/course-data.js"></script>
  <script src="viewer/bundle.js"></script>
</body>

Works perfectly navigating around all the links on my local machine. But when posted up on a webserver, it gives 404 no page found. The bundle.js is very convoluted and over 2 Million characters long, and I don’t know if there is something in there that could be preventing it from running remotely.

I have tried running it on my machine from Firefox and it works fine on Windows 11:
file:///C:

But when running remotely, it will load the index.html page, but all the links are broken.

Get parent’s data attribute in jQuery

A topic already discussed in several previous questions…but I’m not able to figured out to fix it.
In my page there is a pictures gallery, dynamically appended after an AJAX call. Each picture has a menu, the user can click on eah menu item.
When the user click on item menu I need to get a data attribute of the UL container.
Below the html menu code, appended in DOM by the jQuery script:

<ul class="dropdown-menu dropdown-menu-end picture-menu" data-imgid="${data.pictures[i].imgid}">
    <li>
    ${(() => {
        if (data.pictures[i].status == '1'){
        return `<a href="javascript:void(0);" class="dropdown-item unpublish-item-btn"><i class="ri-camera-off-line align-bottom me-2 text-muted"></i> Unpublish</a>`
        } else {
        return `<a href="javascript:void(0);" class="dropdown-item publish-item-btn"><i class="ri-camera-line align-bottom me-2 text-muted"></i> Publish</a>`
        }
    })()}
    </li>
    <li>
    ${(() => {
        if (data.pictures[i].listed == '1'){
        return `<a href="javascript:void(0);" class="dropdown-item delist-item-btn"><i class="ri-chat-delete-line align-bottom me-2 text-muted"></i> Delist</a>`
        } else {
        return `<a href="javascript:void(0);" class="dropdown-item list-item-btn"><i class="ri-chat-new-line align-bottom me-2 text-muted"></i> List</a>`
        }
    })()}
    </li>
    <li>
        <a href="javascript:void(0);" class="dropdown-item download-item-btn">
            <i class="ri-file-download-line align-bottom me-2 text-muted"></i> Download
        </a>
    </li>
    <li>
        <a href="javascript:void(0);" class="dropdown-item move-item-btn">
            <i class="ri-drag-move-2-line align-bottom me-2 text-muted"></i> Move
        </a>
    </li>   
    <li>
        <a href="javascript:void(0);" class="dropdown-item delete-item-btn">
            <i class="ri-delete-bin-line align-bottom me-2 text-muted"></i> Delete
        </a>
    </li>
</ul>

Below the code in jQuery file to get the UL data-imgid attribute when the user click on the LI anchor item:

$("body").on("click",".dropdown-item",function(e){
    e.preventDefault;
    
    $(this).closest('ul.dropdown-menu').css({"color":"red", "border":"2px solid red"});
    let imgid = $(this).parents('ul.picture-menu').data('imgid');
    console.log(`Pictur imgid is ${imgid}`);
    
});

I’m not able to get the imgid data…I always get undefined.
I did some test…for example using the following code:

$(this).parents('ul.dropdown-menu').css({"color":"red", "border":"2px solid red"});

I correctly see the border red sorroundng the menu…so I’m not able to understand why the attribute is not correctly grabbed.

Any help to fix the issue? Thanks a lot

Assistance regarding Python projects [closed]

Hello I am new to stack Overflow, I am a beginner and started to learn python, i need assistance in Pytho project. Could you please help me out where to start and suggest me some topics which can improve my knowledge.

I had gained knowledge and devloped some basic projects like Calc, Todo list, now need some assitance with Flask and Django

Mouse Event Propagation in SvelteUI

My Svelte app (SvelteUI) displays a series of elements in grid rows. When you click on a row, it expands using the CSS display property. Some rows have controls that are visible whether or not the row is expanded — buttons, sliders, etc. The issue arises when a mousedown occurs on a control and mouseup occurs outside the control (clicking on a button and releasing outside the button). The button properly ignores the event, but the event causes the containing row to expand/collapse (which I don’t want). I know this is a common issue with mouse events, but with SvelteUI there is a wrinkle because of the way it handles click events. This is also exacerbated by the structure of the app. If someone can point me to a dup that actually has an answer that works, I will happily delete this question.

An MRE is tough because of the size of the proprietary project, but here’s the gist.

buttonGroup.svelte

<script lang='ts'>
    import {Button, Group} from '@svelteuidev/core';  // SvelteUI `<Button>` not html `<button>`
</script>

<div>
    <Group>
        <Button on:click={() => {"do stuff"}>
            My Button
        </Button>
    </Group>
</div>

objectRows.svelte

<script lang='ts'>
  import Grid from '@svelteuidev/core';
  import buttonGroup from "./buttonGroup.svelte";
  import anotherGroup from "./anotherGroup.svelte";

  function toggleVisibility() {
    if (myElement.style.display === '') {
      myElement.style.display = 'none';
    } else {
      myElement.style.display = '';
    }
  }
</script>

<div>
    <Grid>
        <div class="list" on:click={() => {toggleVisibility(); open = !open}} on:keydown={() => ""}>
        <Grid.Col>
            Stuff
        </Grid.Col>
        <Grid.Col>
            <div id="controls">
                <div class="button-group">
                    <buttonGroup bind:deviceStore bind:objectStore />
                </div>
                <div class="another-group">
                    <anotherGroup bind:deviceStore bind:objectStore />
                </div>
                ...
            </div>
        </Grid.Col>
    </Grid>
</div>

So when I click on My Button and drag out before release, it toggles visibility of class list.

What I’ve Tried

Stop Propagation:
SvelteUI does not honor stopPropagation when you try to use it on SvelteUI components — on:click|stopPropagation — doesn’t work, so I tried wrapping the Button in a div and tried to capture and stop propagation there. That didn’t work either.
Handling Mouse Events:
I’ve tried adding a series of mouse event handlers to successive divs up the food chain. Didn’t work.
Ignoring Mouse Events:
I’ve tried adding dummy functions to mouse events to have them go nowhere like on:mouseup={() => {}}. Didn’t work.

What I Think is Happening

I think the enclosing grid row is seeing the release event as a unique click event which is causing the visibility prop to toggle.

What I Want to Happen

I want to stop the mouse release event from causing

the parent grid row from expanding unless the mouse event originated there. Or,
anything to happen unless the mouse release event occurs within the button (control) SvelteUI component.

AnyChart candlestick data dissapearing at certain zooms

I am having an issue using anychart when loading large amounts of data into a stock (candlestick) chart and applying a zoom.

For example, loading ~60 hours of m1 data, the chart is loading showing no data, however if I expand and condense the zoomed area of the chart the data suddenly appears and disappears.

I have uploaded a vid showing the issue: https://imgur.com/a/4cdtrcD

the code that is responsible for drawing the chart:

const chart = anychart.stock();
    chart.background().fill("#131821");
    var table = anychart.data.table();
    var plot = chart.plot(0);

    this.chart = chart;
    this.plot = plot;

    plot.legend().enabled(false);

    table.addData(parsedJsonData.chart_data);
    var mapping = table.mapAs();

    mapping.addField('open', 1);
    mapping.addField('high', 2);
    mapping.addField('low', 3);
    mapping.addField('close', 4);
    mapping.addField('volume', 5);

    plot.candlestick(mapping);

    plot.yGrid().enabled(true);
    plot.yGrid().stroke({
        color: "rgba(255,255,255,0.125)", 
        thickness: 1,
        dash: "3 5"
    });
    plot.xGrid().enabled(true); 
    plot.xGrid().stroke({
        color: "rgba(255,255,255,0.125)",
        thickness: 1, 
        dash: "3 5"
    });
    
    // Minor grid lines
    plot.yMinorGrid().enabled(true);
    plot.yMinorGrid().stroke({
        color: "rgba(255,255,255,0.095)", 
        thickness: 1,
        dash: "1 3"
    });
    plot.xMinorGrid().enabled(true);
    plot.xMinorGrid().stroke({
        color: "rgba(255,255,255,0.095)",
        thickness: 1, 
        dash: "1 3"
    });

    chart.selectRange(parsedJsonData.zoom_start, parsedJsonData.zoom_end);

    chart.contextMenu().itemsFormatter(function(items) {
      delete items["save-data-as"];
      return items;
    });

    chart.title().fontColor("#000000").fontSize(16).fontFamily("Arial, sans-serif");

    document.querySelector(`#chart-container-${this.orderIdValue}`).innerHTML = '';

    chart.container(`chart-container-${this.orderIdValue}`);

    chart.draw();

Is it possible to handle multipart form data fields first then file? [closed]

So I was trying to handle the multipart form data.

The expected workflow:

Incoming multipart form data. (2 files, 5 text fields)
If a field is missing, reject the request.
If all fields exist, save files.

The assumption is listed below:

Assume the fields and files order are random
File sizes are big (>1 GB)

The frameworks I tried are FastAPI, Express.js (Multer, Busboy), Crow.cpp.

Both of them seem to block and wait for the file saving to be done and perform a checking on fields, which is time-consuming if the requst is bad.

How to prevent browser’s default reload confirmation popup and show custom modal in React (Next.js)? [duplicate]

I’m building a React (Next.js) application with a form. When the user tries to reload the page (e.g., pressing F5, Ctrl+R, or clicking refresh), I want to disable the browser’s default confirmation popup and instead show my own custom modal with OK and Cancel buttons.

I tried using the beforeunload / onbeforeunload events:

useEffect(() => {
  window.addEventListener("beforeunload", (e) => {
    e.preventDefault();
    e.returnValue = ""; // triggers default popup
  });
}, []);

Is there a way to detect that the browser is being reloaded so I can cancel it and show my own custom popup instead of the default one?

Java-Script for indesign that reminds me to check everything

Im very bad at Java but need a Script for InDesign that creates a popup-window, where every time i want to close a document it asks me if i checked everything. Then if i click “yes” it can close, but if i click “no”, it has to stay open. This also needs to work if i open the document through something like woodwing studio, where the files are saved on a website.

I found one here that works with normal documents but still closes them when i opened them through the browser, which is kinda dumb since i want it to work all the time.

How to prevent browser’s default reload confirmation popup and show custom modal in React (Next.js)?

I tried using the beforeunload / onbeforeunload events:

useEffect(() => {
  window.addEventListener("beforeunload", (e) => {
    e.preventDefault();
    e.returnValue = ""; // triggers default popup
  });
}, []);

Is there a way to detect that the browser is being reloaded so I can cancel it and show my own custom popup instead of the default one?

I can’t seem to center a text in a prime react dropdown input

So I’m trying to center the text from this dropdown by Primereact, but I’ve been struggling with the css theme for quite long now and Still have no clue…enter image description here

I’ll share just the dropdown and the css from the theme attached to the dropdown, I hope it’s enough to get the context and fix it.

the dropdown component is close after the return statement:

                <div className='mr-55'>
                  <Dropdown
                    value={lazyState.rows}
                    onChange={({ value }) =>
                      setLazyState(prev => ({ ...prev, page: 0, rows: value }))
                    }
                    options={[
                      { label: '20 per page', value: 20 },
                      { label: '30 per page', value: 30 },
                      { label: '50 per page', value: 50 },
                      { label: '100 per page', value: 100 },
                      { label: '200 per page', value: 200 },
                    ]}
                  />
                </div>

// core
.p-dropdown {
  display: inline-flex;
  cursor: pointer;
  position: relative;
  user-select: none;
  height: 32px;
  width: 148px;
}

.p-dropdown-clear-icon {
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
}

.p-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.p-dropdown-label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  flex: 1 1 auto;
  width: 1%;
  text-overflow: ellipsis;
  cursor: pointer;
  height: 100%;
}

.p-dropdown-label-empty {
  overflow: hidden;
  opacity: 0;
}

input.p-dropdown-label {
  cursor: default;
}

.p-dropdown .p-dropdown-panel {
  min-width: 100%;
}

.p-dropdown-panel {
  position: absolute;
  top: 0;
  left: 0;
}

.p-dropdown-items-wrapper {
  max-height: 40px;
  overflow-y: auto;
}

.p-dropdown-item {
  cursor: pointer;
  font-weight: normal;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.p-dropdown-item-group {
  cursor: auto;
}

.p-dropdown-items {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.p-dropdown-filter {
  width: 100%;
}

.p-dropdown-filter-container {
  position: relative;
}

.p-dropdown-filter-icon {
  position: absolute;
  top: 50%;
  margin-top: -0.5rem;
}

.p-fluid .p-dropdown {
  display: flex;
}

.p-fluid .p-dropdown .p-dropdown-label {
  width: 1%;
}

// theme
.p-dropdown {
  background: $inputBg;
  border: $inputBorder;
  transition: $formElementTransition;
  border-radius: $borderRadius;
  outline-color: transparent;

  &:not(.p-disabled):hover {
    border-color: $inputHoverBorderColor;
  }

  &:not(.p-disabled).p-focus {
    @include focused-input();
  }

  &.p-variant-filled {
    background: $inputFilledBg;

    &:not(.p-disabled):hover {
      background-color: $inputFilledHoverBg;
    }

    &:not(.p-disabled).p-focus {
      background-color: $inputFilledFocusBg;

      .p-inputtext {
        background-color: transparent;
      }
    }
  }

  &.p-dropdown-clearable {
    .p-dropdown-label {
      padding-right: nth($inputPadding, 2) + $primeIconFontSize;
    }
  }

  .p-dropdown-label {
    background: transparent;
    border: 0 none;

    &.p-placeholder {
      color: $inputPlaceholderTextColor;
    }

    &:focus,
    &:enabled:focus {
      outline: 0 none;
      box-shadow: none;
    }
  }

  .p-dropdown-trigger {
    background: transparent;
    color: $inputIconColor;
    width: $inputGroupAddOnMinWidth;
    border-top-right-radius: $borderRadius;
    border-bottom-right-radius: $borderRadius;
    height: 100%;
  }

  .p-dropdown-clear-icon {
    color: $inputIconColor;
    right: $inputGroupAddOnMinWidth;
  }

  &.p-invalid.p-component {
    @include invalid-input();
  }
}

.p-dropdown-panel {
  background: $inputOverlayBg;
  color: $inputListTextColor;
  border: $inputOverlayBorder;
  border-radius: $borderRadius;
  box-shadow: $inputOverlayShadow;

  .custom-dropdown {
    max-height: 300px;
    overflow-y: auto;
  }

  .p-dropdown-header {
    padding: $inputListHeaderPadding;
    border-bottom: $inputListHeaderBorder;
    color: $inputListHeaderTextColor;
    background: $inputOverlayHeaderBg;
    margin: $inputListHeaderMargin;
    border-top-right-radius: $borderRadius;
    border-top-left-radius: $borderRadius;

    .p-dropdown-filter {
      padding-right: nth($inputPadding, 2) + $primeIconFontSize;
      margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
    }

    .p-dropdown-filter-icon {
      right: nth($inputPadding, 2);
      color: $inputIconColor;
    }
  }

  .p-dropdown-items {
    padding: $inputListPadding;

    .p-dropdown-item {
      margin: $inputListItemMargin;
      padding: $inputListItemPadding;
      border: $inputListItemBorder;
      color: $inputListItemTextColor;
      background: $inputListItemBg;
      transition: $listItemTransition;
      border-radius: $inputListItemBorderRadius;

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }

      &.p-highlight {
        color: $highlightTextColor;
        background: $highlightBg;

        &.p-focus {
          background: $highlightFocusBg;
        }
      }

      &:not(.p-highlight):not(.p-disabled) {
        &.p-focus {
          color: $inputListItemTextHoverColor;
          background: $inputListItemHoverBg;
        }
      }

      .p-dropdown-check-icon {
        position: relative;
        margin-left: -1 * $inlineSpacing;
        margin-right: $inlineSpacing;
      }
    }

    .p-dropdown-item-group {
      margin: $submenuHeaderMargin;
      padding: $submenuHeaderPadding;
      color: $submenuHeaderTextColor;
      background: $submenuHeaderBg;
      font-weight: $submenuHeaderFontWeight;
    }

    .p-dropdown-empty-message {
      padding: $inputListItemPadding;
      color: $inputListItemTextColor;
      background: $inputListItemBg;
    }
  }
}

scheduleatfixedrate sseemitter but the front end only get message once [duplicate]

I use scheduleatfixedrate and sseemitter, but the front end only get message once.
my backend code is like this

 var scheduledFuture =
        sseExecutor.scheduleAtFixedRate(
            () -> {
              try {
                SseEmitter.SseEventBuilder event =
                    SseEmitter.event()
                        .data("SSE MVC - " + LocalTime.now())
                        .id(String.valueOf(System.currentTimeMillis()))
                        .name("sse event - mvc");

                emitter.send(event);
                log.info("Sent SSE message at {}", LocalTime.now());
              } catch (Exception ex) {
                log.error("SSE error: {}", ex.getMessage(), ex);
                emitter.completeWithError(ex);
              }
            },
            0,
            5,
            TimeUnit.SECONDS);

and I can get the message from the curl as below

but from the browser chrome, it only get the first message after 5s, instead of keeping on push message to the browser

js code is like this

 response = await fetch(sseUrl, {
          method: 'GET',
          headers: {
            Accept: 'text/event-stream',
            'Content-Type': 'application/json',
            Authorization: `Bearer ${token}`,
            'Cache-Control': 'no-cache',
          },
          signal: abortController.signal,
        })

Debugging Mindmap Extension — Reference Duplication Issue [closed]

This project is a Chrome extension that is kind of like a project that you can edit your history tab, add nodes from there, make nodes, make searchable nodes, drag the nodes, create new pages, delete them, send them to the back, front etc, save project, load project.

We start by clicking the M for Mindmap Tabs:
Once clicked this is what we get:
However once we right click on this node we get a lot of options:

To get to the main problem that I wanted to ask you about, I need to show a couple of functionalities of this extension.

When we right click on the node we see an option pop up that says New Project which is supposed to create new project:
Once Clicked we get this option to name our file and this is our Custom Name:
Once we press ok then we get this message:
Then we get this node pretty much the same as when we started earlier:

One of the first prerequisite concepts that we have to understand is that extension is supposed to be able create pages within this particular project that we created as you see here that we called 20TestParent. And Pay attention that it says 1/1 because once we press create page it is suppose to say 1/2 on the first page an 2/2 on the second.

Once we created a page it’s just blank for now:
Now we have 2/2 because we created a page and the total there are now is 2 and we are on the second page. So second prerequisite is that this extension is suppose to add nodes and be able to make a child and parent node links.
We have to add a new node first so we press the add node option:
We see that the node is added & we see we are on the second page so we want to rename just for reference for right now
We want to call this ChildLINK because we want to make a link between the nodes and it will make sense in the next couple of pictures.
So we click Create Child Link option
and we get this as an Alert
Now when we press Prev page
We get to the 1st page and also it is here that we want to click the create parent link option:
Once we clicked create parent we can click select or double click on the node and we will appear at the child node’s location:
Once we click the select this is what we get:
and once we press ok we are back at the child node:
Also when you right click on the child you can go back to the parent by pressing go to root node as in here:
We get the dialogue box again:
We are right where we started:

This same concept is supposed to work across pages however it doesn’t work. We added a new node and press the Make Parent Option:

We get the dialogue box:

however when we create a new project completely or load an existing project from the loads:

and when we click the Make Child Project From Selected option:

It says New Node is the entry for this newly made child project however it should say the ParentNodeForProject is the entry point for this newly child project also there should be go to Parent Node For project option here too that sends you back to that node and similarly that that node from that project can send you back here to this child project and back and forth.

So the code is in the bottom and hopefully the problem and expected result makes sense I made two video also that explain in video style more about this problem and the other features of the extension.

Debugging Mindmap Extension — Reference Duplication Issue (Official) (Summarized/Short – 10:56 min.)
Debugging Mindmap Extension — Reference Duplication Issue (Full – 28:11 min.)

Full project on GitHub