Category: javascript

I am trying to visualize in an HTML5 video element a stream of frames I receive from a server. I have implemented it using a sourceBuffer according to this

The streaming works perfectly on Desktop (Edge, Chrome, Firefox) and on Android but on iOS the system throws an “InvalidState exception – Object is not in a valid state” each time I try to append a new frame to the buffer.

I have read around this can be a mimetype codec problem but even trying many of them it still does not work

I have tried using different codecs according to this

mimeCodec= 'video/mp4; codecs="avc1.64001F"

I have also checked the system support the used codec by adding this checkbut it alsways return true:

if (!('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec))) {
   reject('Unsupported MIME type or codec: ' + mimeCodec);
}

I’m a little stuck, I have developed a custom WordPress Theme with an OPTIONS PAGE where the client can update the headline and body copy of a pop up / modal.

I’ve used ACF to collect this data, for the FOOTER.PHP template file. Where i’ve added the html mark up.

And my Javascript for the modal is in my .js file enqueued by my FUNCTIONS.php (see the code below).

So far… I’ve managed to get the modal to window.onload (Open) and onclick (close) for a set period of time (using localStorage). Currently 20 000ms for testing purpose, but I will increase this to 3-4 hours after testing is complete.

So far – all good and everything is working.

However the client would also like the modal to re-appear straight after they alter the text in the WordPress Database. (eg. If the carpark was full – the modal would pop up to alert clients immediately – even if they’d recently closed the modal within the localStorage time allowance).

So I need a way for the browser to see that the HEADLINE or PARAGRAPH TEXT has changed and alter/reset the localStorage.

I am trying to add a MutationObserver, to handle this, but I am getting a little lost doing so. Is this the best approach and can anybody help please.

PHP

<?php
// Options Page Variables
$headline = get_field( 'modal_headline', 'options' );
$copy = get_field( 'modal_copy', 'options' );

if ( $headline && $copy ): { ?>
    <!-- Overlay -->
    <div class="modal-overlay" id="modalOverlay">
        <!-- Content -->
        <div class="modal">
            <!-- Headline -->
            <div class="modal-headline-wrapper">
                <h2><?php echo $headline; ?></h2>
            </div>
            <!-- Message -->
            <div class="modal-paragraph-wrapper">
                <p>Hello text <?php echo $copy; ?></p>
            </div>
            <!-- Close Modal -->
            <div class="modal-button-wrapper">
                <button class="centered-button" onclick="closeModal()">Close</button>
            </div>
        </div>
    </div>
   <?php } endif; ?>

CSS

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 100;
    animation: animated-modal-in 0.35s forwards;
}
.modal {
    @include flex-center();
    flex-direction: column;
    width: 90%;
    min-height: 25vh;
    max-width: 600px;
    background: #fff;
    padding: 50px 25px;
    text-align: center;
    animation: animated-modal-in 0.75s forwards;
}

JS

// To Open The Modal
function openModal() {
    document.getElementById('modalOverlay').style.display = 'flex';
}

// To Close The Modal
function closeModal() {
    document.getElementById('modalOverlay').style.display = 'none';
    // Store The Current Timestamp In LocalStorage When The Modal Closes
    var closedTimestamp = new Date().getTime();
    localStorage.setItem('modalClosedTimestamp', closedTimestamp);
}

// Check If The Modal Should Be Displayed On Page Load
window.onload = function () {
    // Retrieve The Stored Timestamp | When The Modal Was Closed
    var closedTimestamp = localStorage.getItem('modalClosedTimestamp');
    // If The Modal Hasn't Been Closed | Or It Has Been More Than Set Time
    if (!closedTimestamp || new Date().getTime() - closedTimestamp > 20000) {
        openModal();
    }
};

I am trying to implement a modal component (in Vue3) using TailwindCSS/Flowbite. I have read all the documentation provided by Flowbite, but I still cannot change the background color and show/hide the modal programmatically. Regarding the last part, I can hide the modal itself but not the background, which still remains visible. What am I doing wrong?

<script>
    import { initFlowbite } from 'flowbite';
    import { Modal } from 'flowbite';

    export default {
        name: 'VbModal',
        props:{
            id: String
        },
        data(){
            return{
                modal: null
            }
        },
        methods:{
            closeModal(){
                this.modal.hide();
            },

            showModal(){
                this.modal.show();
            }
        },
        mounted(){
            
            const modalElement = document.getElementById(this.id);
            const modalOptions = {
                placement: 'bottom-right',
                backdrop: 'dynamic',
                backdropClasses:
                    'bg-red-900/50 dark:bg-red-900/80 fixed inset-0 z-40',
                closable: true,
                onHide: () => {
                    console.log('modal is hidden');
                },
                onShow: () => {
                    console.log('modal is shown');
                },
                onToggle: () => {
                    console.log('modal has been toggled');
                },
            }

            const instanceOptions = {
                id: this.id,
                override: true
            };

            this.modal = new Modal(modalElement, modalOptions, instanceOptions);

        }
    }
</script>

<template>
    <div :id="id" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
        <div class="relative w-full max-w-lg max-h-full">
            <div class="relative rounded-lg shadow bg-ubotics-650 border border-ubotics-500">
                <slot/>
            </div>
        </div>
    </div>

</template>

<style lang="">
    
</style>

How to add emojies in vscode using debian linux?
I tried ctrl + . but its not working,
also I tried win+ . but not working, should i need to install external library, or some blugin in vscode to add emojies in my code ?

and what if i need to write it in terminal ?

I’m building a speech enabled web app using vue.js, so far it works perfectly on major browsers and devices like Chrome, Safari, Firefox, Opera, etc however if someone accesses the link from Facebook or Instagram using an Android, there are issues.

The facebook/Instagram inapp browser(webview) doesn’t let us ask for microphone permission.

I’m looking for a solution which forces the user to open the app in their main browser instead of staying in the Facebook/Instagram app.

Please assist me with this issue.

I have a problem with infinite loop in my code. I am trying set icons to my weather forecast list. But I am getting “Too many re-renders. React limits the number of renders to prevent an infinite loop.” error.

There is important information: I can’t using this method with useEffect. It cause any error about my loading screen.

I have imported these icons:

import ThunderIcon from '../Images/ThunderIcon.svg'
import SunnyIcon from '../Images/SunnyIcon.svg'
import SunnyCloud from '../Images/SunnyCloud.svg'
import SunnyRainIcon from '../Images/SunnyRainIcon.png'
import RainyIcon from '../Images/RainyIcon.svg'

There is my selectIcon function. I am setting icons with switch-case:

const selectIcon = (type) => {
    switch (type) {
      case "sunny":
        setWeatherIcon(SunnyIcon);
        break;
      
      case "rainy":
        setWeatherIcon(RainyIcon);
        break;

      case "sunny rainy":
        setWeatherIcon(SunnyRainIcon);
        break;

      case "thunder":
        setWeatherIcon(ThunderIcon);
        break;

      case "sunny cloudy":
        setWeatherIcon(SunnyCloud);
        break;
    }
  }

And I am trying implement this on JSX. I think reason of problem in here. But I can’t solve this problem. Here is my component:

return (
    <div className="WeeklyForecast">
      <div className="Prev-Btn">
        <button onClick={prevClick}>&lt;</button>
      </div>
      <div className="Forecast-List">

        {days.map((day) => (
          <div key={day}>
            <p>{day}</p>
            {selectIcon(selectedWeekData[day].type)}
            <img src={weatherIcon} alt="" />
            <p>{selectedWeekData[day].degree}°</p>
          </div>
        ))}
      </div>
      <div className="Next-Btn">
        <button onClick={nextClick}>&gt;</button>
      </div>
    </div>
  );

I am trying set icons to my weather forecast list. But I am getting “Too many re-renders. React limits the number of renders to prevent an infinite loop.” error.

I am trying to retrieve the prices from a website https://app.evimdekipsikolog.com/. The prices are within the “b” tag of the

class="appointment-info appointment-info-desktop"

WebElement. Locally it worked to access it, by

WebElement card = driver.findElement(By.className("appointment-info-desktop"));
String price = card.findElement(By.tagName("b")).getText();

But after deploying it to Heroku, this element cant be found, because all of these Elements are loaded through a script (I assume).

When printing the html file

System.out.println(driver.getPageSource());

locally, it included all of these Elements. But in Heroku they were not included.

I am now looking for a way to load these Elements, which I believe is done through executing the scripts on the page.

I tried

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("document.querySelectorAll('script').forEach(script => eval(script.innerHTML));");

, but it was still not loaded.

This screenshot :

demonstrates a common situation for me: I’m stepping in some js code in some site, looking at some variable defined at a previous location (in this case newChangedRegions). Hovering above it successfully shows the contents (1), but both adding it to ‘Watch’ (2) and trying to evaluate it at the console (3) show as if it is undefined.

What am I missing?

I’m encountering an issue while attempting to display the ‘renderHtml’ value instead of the ‘field’ value for the ‘anhaenge’ column in my Vue.js table component. Despite setting up the column definitions and the RenderHtml component, I’m still getting the ‘field’ value displayed in the table.

Here’s the relevant code:

Components Involved:

1. RenderHtml.vue: Renders HTML for each item in the data array.

RenderHtml.vue:

 <template>
        <div>
          <ul>
            <li v-for="anhang in data" :key="anhang.id">
              <span class="fa-li">
                <i
                  aria-hidden="true"
                  :class="'mdi mdi-' + iconForFilename(anhang.filename ?? '')"
                ></i>
              </span>
              <a
                :href="anhangUrl(anhang)"
                :title="encodeURIComponent(anhang.displayName)"
                target="_blank"
              >{{ anhang.bemerkung ? anhang.bemerkung : encodeURIComponent(anhang.displayName) }}</a>
            </li>
          </ul>
        </div>
      </template>
      
      <script setup lang="ts">
      import { IntranetPortalAnhang } from "@/data/IntranetPortalData"
      import { iconForFilename } from "@/transforms/IconTransform"
      
      const isIE11 = "MSInputMethodContext" in window && "documentMode" in document
      const anhangUrlFix = isIE11 && window.location.protocol === "file:"
      defineProps({
        data: {
          type: Array as () => Array<IntranetPortalAnhang>, 
          required: true,
        },
      })
      
      const anhangUrl = (anhang: IntranetPortalAnhang):string=> {
        return anhang.filename
          ? `./doc/${anhangUrlFix ? anhang.filename : encodeURIComponent(anhang.filename)}`
          : anhang.url
      }     
      </script>

2.columns.ts: Defines the column structure, including the ‘anhaenge’ column with ‘field’ and ‘renderHtml’ properties.

columns.ts:

 const anhaengeColumn = {
      label: "locationView.intranetView.attachments",
      field: (row: RowWithAnhang) => row.anhaenge.map((anhang) => anhang.displayName + ", " + anhang.bemerkung).join(", "),
      renderHtml: (row: RowWithAnhang) => {
        return {
          component: RenderHtml,      
          props: {
            data: row.anhaenge,
          },
        };
      },
      showForGroupParent: true,
      showForGroupChildren: true,
      sortable: false,
      whiteSpace: "normal",
      overflow: "ellipses",
      minWidth: 400,
      maxWidth: 500,
    };
    const columns = {
      gefStoffAnhaenge: anhaengeColumn, ....}
    
    export const columnDefinitions: Record<ColumnType, ColumnDefinition> = reduce(
      columns,
      (obj, column, columnName) => {
        const columnDefinition: ColumnDefinition = {
          align: "left",
          contentAlign: "left",
          sortable: true,
          ...column,      
          id: columnName,
          name: columnName,
             value: (item: any) => {
            if (item.gefStoff && "field" in column && column.field) {
              const fieldValue = column.field(item)
              if (fieldValue === null) {
                return undefined
              }
              return fieldValue
            }
            return undefined
          },
        }
        obj[columnName] = columnDefinition
        return obj
      },
      {} as any,
    )

3.table.vue: Uses a g-table component to display data, attempting to render ‘renderHtml’ content.

 <template>
        <v-table
        id="table"
        :headers="columns"
        :items="data"
        :filterable="showFilterUse"
        :filter-method="filterMethod"
        :sort-by="customSort"
        fixed-first-column
        pagination 
        grouped="grouped ? 'grouped-table' : undefined"
      >
      <template #[`item.gefStoffAnhaenge`]="{item}">
         <RenderHtml :data="item.gefStoffAnhaenge.renderedHtml" />
      </template>
      </v-table>
    </template>

Key Points:

1. In the RenderHtml.vue, I’m iterating through the ‘data’ array and rendering specific HTML content based on certain properties of each ‘anhang’ object.

2. The ‘columns.ts’ file defines the ‘anhaenge’ column with both ‘field’ and ‘renderHtml’ properties, aiming to display the rendered HTML content.

3. Within the table.vue, a template is set to use the ‘RenderHtml’ component for the ‘gefStoffAnhaenge’ column.

Problem:

• Despite setting up the ‘renderHtml’ property in the column definition and passing the ‘renderedHtml’ data to the ‘RenderHtml’ component in the table template, the table still displays the ‘field’ value instead of the expected ‘renderHtml’ content.

I am trying to initialise the commercetools category importer as per the JS example at the bottom of: https://commercetools.github.io/nodejs/cli/category-exporter.html (and also linked from https://docs.commercetools.com/import-export/overview)

My JS looks like this (almost identical to the example)

import CategoryExporter from '@commercetools/category-exporter'
import fs from 'fs'
import { options } from '../config/options.js';

const optionsImporter = {
  apiConfig: {
    apiUrl: options.apiURL,
    host: options.authURL,
    project_key: options.projectKey,
    credentials: {
      clientId: options.clientID,
      clientSecret: options.clientSecret
    }
  },
  accessToken: '123456xxxx0987654321',
  predicate: 'key="my-desired-key"'
};

const logger = {
  error: console.error,
  warn: console.warn,
  info: console.log,
  debug: console.debug,
};

const categoryExporter = new CategoryExporter(optionsImporter, logger);

// Register error listener
outputStream.on('error', errorHandler);

outputStream.on('finish', () => console.log('done with export'));

categoryExporter.run(outputStream);

Im my package.json I have added a command to run this from an npm shortcut.

"importer:test": "node ./src/import/categoryImporter.js",

When I run this I get the following error:

const categoryExporter = new CategoryExporter(optionsImporter, logger);
                         ^
TypeError: CategoryExporter is not a constructor

I have tried to rummage into the commerce-tools library, but it looks like it is exporting a class from the main.js

export default class CategoryExporter {

The library is here: https://github.com/commercetools/nodejs/blob/master/packages/category-exporter/src/main.js

And in my package.json I am using:

"@commercetools/category-exporter": "^4.0.0",

I did think I could try and downgrade the category-exporter version.

Another thing that crossed my mind it seems that commercetools uses a mixture of js and ts, and is using ts in a js file. But I assume that is separate to my bug.

I realise this is a lot of info and I don’t really want to tweak a node_module, but if anyone has any experience with this would like to hear from you.

the folowing code fired a multiple time, if the event on change is happens.

So it is possilbe that the javascript file with the function is also multiple included in the project. Change this is not possible yet. I also not sure that this could be the reason.

How can i find the reason why the function will called a multiple time and how i can stop this?

$(document).on("change", '.fileupload', function(e) {       
    alert("start upload");   
    e.preventDefault();  
    e.stopPropagation();    
    var formData = new FormData($('#fileuploadform')[0]);  
    get_ajaxcontent('url','FormData',formData,null);    
  });

I trie to play around with different thinks but nothing will help me to find the reason and find a way to run the function only one time.

Maybe its important to know, that the change belongs to a dropzone for a fileupload 🙂

The page is highly dynamically generated by a lot ajaxcalls and the current part is inside a modal – may it helps?

My content.js script wont work if it can’t run on the correct context, currently I have no idea how to change the context via js.

content.js

chrome.runtime.connect();

console.log("Loaded");

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  const p = request[0]
  UPunkte = p
  UKokku = p

  const t = request[1]
  tehteidTasemeti = [0, Math.round(t/5), Math.round(t/5), Math.round(t/5), Math.round(t/5), Math.round(t/5)]
  console.log("Set"); // gets outputted
}
);

I need to change the variables UPunkte, UKokku and tehteidTasemeti, but I can’t do so if I am not in the correct context.
The context I am trying to enter is called “sisufreim (nutimati.php)”

I have tried looking for similar topics, but the answers never really answered the question. I’ve also tried looking at documentations for the google API and the closest thing to what I think the solution is, is this thing called script injection.
I am quite new to js and web development related stuff so I don’t quite understand much of the vocabulary.

I am trying to implement drag and drop functionality using javscript and following code is working fine in my local but, it is not working in the server. Debug information is given below:

$(document).on("mousedown touchstart", "#canvas", function (evt) {
    //ClearCanvas();
    var canvasSide = isMobile ? 320 : 600;
    if ($("img").is(":animated") === false) {
      var iconSize = canvasSide / board.boardSize;
      var xCoord, yCoord;

      if (evt.type === "mousedown") {
        xCoord = evt.offsetX;
        yCoord = evt.offsetY;
      } else {console.log(evt.type);console.log(evt);
        xCoord =
          parseInt(evt.touches[0].clientX) -
          (parseInt(evt.target.offsetLeft) +
            parseInt(evt.target.offsetParent.offsetLeft));
        yCoord =
          parseInt(evt.touches[0].clientY) -
          (parseInt(evt.target.offsetTop) +
            parseInt(evt.target.offsetParent.offsetTop));
      }

      var col = Math.floor(xCoord / iconSize);
      var row = Math.floor(yCoord / iconSize);

      var img = document
        .querySelectorAll("[data-position='" + col + "-" + row + "']")
        .item(0);

      if (img != null) {
        $(img).css("z-index", 2);

        var top = parseInt($(img).css("top"));
        var left = parseInt($(img).css("left"));

        dragDropInfo = {
          candyImg: img,
          initCol: col,
          initRow: row,
          initTop: top,
          initLeft: left,
          initXCoord: xCoord,
          initYCoord: yCoord,
        };
      }
    }
});

Error is throwing at ‘evt.touches[0]’. Because evt does’t have touches information in server.

Local:

Server:

I’m working on a React app utilizing Redux as the state management system. In the app, I have a parent component that includes multiple instances of the same child component.

Now, I’m faced with a decision on how to efficiently access the same Redux state within all child components. I’ve identified two potential approaches:

Direct Access: Accessing the Redux state independently from each child component, resulting in multiple accesses to the state.

Indirect Access: Accessing the Redux state in the parent component and passing the value down to all child components to ensure the state is read only once.

Considering performance implications, what will be the more optimal approach? Are there any best practices or considerations that could help me make an informed decision in terms of performance and maintainability?

I am trying to have a simple Rich Text editor, I am trying to achieve that using Summernote. JQuery and Bootstrap are both imported. When i use the Summernote RTE in HTML it works perfectly. But now i need to create many dynamic RTEs using Javascript. I create the RTE using imperative JS and it shows up, i then initialize it and i looks like it should. It also saves like it should. But whenever you would try to lets say bold, or italic or change font color, it sends your cursor to the start of the line. If you then start typing it works, but i need to be able to highlight text and then apply the modifications.

This is my JS function for creating the RTE (it is later appended to the document) code:

    function createRTE(lang, field_name = 'description', required = true) {
        const rte_div = document.createElement('div');


        const rte = document.createElement('div');
        rte.setAttribute('name', 'content[' + global_counter + '][' + field_name +']['+lang+']');
        rte.setAttribute('class', 'summernote');
        rte.setAttribute('data-textarea', 'rte_' + global_counter + '_' + lang);

        const rte_textarea = document.createElement('textarea');
        rte_textarea.setAttribute('name', 'content[' + global_counter + '][' + field_name +']['+lang+']');
        rte_textarea.setAttribute('id', 'rte_' + global_counter + '_' + lang);
        rte_textarea.setAttribute('hidden', 'true');

        rte_div.appendChild(rte_textarea);
        rte_div.appendChild(rte);

        return rte_div;
    }

And this is my initialization:

    function initSummernote(selector = '.summernote') {
        if (!$.fn.summernote) {
            return;
        }

        const elems = document.querySelectorAll(selector);

        for (const elem of elems) {
            $(elem).summernote({
                dialogsFade: true,
                dialogsInBody: true,
                height: elem.dataset.height ?? 300,
                fontNames: [],
                maximumImageFileSize: 1024 * 1024,
                tableClassName: 'table table-hover table-bordered',
                toolbar: [
                    ['actions', ['undo', 'redo']],
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph', 'hr']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ],
                callbacks: {
                    onChange(contents) {
                        if (elem.dataset.textarea) {
                            document.getElementById(elem.dataset.textarea).value = $(elem).summernote('isEmpty') ? '' : contents.trim();
                        }
                    }
                }
            });
        }
    }