Category: javascript

Category Added in a WPeMatico Campaign

Remove indices from object of array? [duplicate]

st obj = {
  0: {
    name: 'item1',
    slug: 'slug1',
    price: 64,
    featured_image: null,
    onSale: undefined,
    // ...
  },
  1: {
   name: 'item2',
    slug: 'slug2',
    price: 64,
    featured_image: null,
    onSale: undefined,
    // ...
  },
  2: {
      name: 'item3',
    slug: 'slug3',
    price: 64,
    featured_image: null,
    onSale: undefined,
    // ...
  }
};

I cannot get ride of the index of each element of the array in order to map the function properly, any help would be appreaciate it.

i tried with Object.values but still

Thymeleaf inline JavaScript is completely ignored

I’m trying to include a basic vanilla JS script into a Thymeleaf view but it seems to be completely ignored – I don’t even see it when I inspect the page. I assume the issue is related with the fact that the view is part of a layout template but I cannot figure out where the problem is.

The View:

<!doctype html>
<html th:replace="~{fragments/layout :: layout(~{::title}, ~{}, ~{}, ~{::main})}">
    <head>
        <title>Reports Page</title>
    </head>     
    <body>
        <main role="main" class="flex-shrink-0">
            <!-- some HTML code here -->
            <select class="form-select" id="year" aria-label="Year dropdown" th:onchange="reloadPage()">
                <option 
                    th:each="yearRow : ${years}" 
                    th:value="${yearRow}" 
                    th:selected="(${yearRow} == ${year})"
                    th:text="${yearRow}">
                </option>
            </select>
            <!-- other HTML code here -->
        </main>

        <script th:inline="javascript" type="text/javascript">
            function reloadPage() {
                alert("You selected a year");
            }
        </script>
    </body>
</html>

The Layout fragment:

<!DOCTYPE html>
<html class="h-100" th:fragment="layout (title, css_assets, js_assets, content)" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Usual head stuff - meta tags, links to Bootstrap CSS & fonts libraries etc -->
    <!-- Common CSS Styles -->
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    
    <!-- Per-page placeholder for additional links -->
    <th:block th:replace="${css_assets}" />
        
    <title th:replace="${title}">Layout Title</title>
</head>
<body class="d-flex flex-column h-100">
    <header th:replace="~{fragments/header :: header}"></header>
   
    <div th:replace="${content}">
        <p>Layout content</p>
    </div>
       
    <footer th:replace="~{fragments/footer :: footer}"></footer>
    
    <!-- Common scripts -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    
    <!-- Per-page placeholder for additional scripts -->
    <th:block th:replace="${js_assets}" />
</body>
</html>

Inspecting the code, I don’t see the inline script:

enter image description here

Of course, probably I can use the ${js_assets} to inject my JS function from an external JS file but it bothers me why is it not working why the inline syntax. Am I missing something?

I’m pretty new to Spring Boot and Thymeleaf so please be understanding. Thanks!

Why are my dynamically added Javascript elements disappearing after refreshing my website?

I am currently coding the grades display page for my application for a school project. The code is supposed to dynamically add the overallGWA, maxGWA, and the Latin honor titles to the page. It works during the first run but after I refresh it, the elements will appear for only about a second then disappear immediately.

I am supposed to get the grade values from a database but I am using dummy values for now in the variables overallGWA and maxGWA and my code is still not working. I have read about local or session storage but I don’t believe that it is the solution to my problem since I am not dealing with input values. However, I still tried implementing it in my code and it hasn’t worked. I am unsure though if I had implemented it correctly.

Here is my code (without the CSS):

<main>
    <div class="title">
        <h1>Grades</h1>
    </div>
    <div class="GWA">
        <div style="background-color: #e28f60; color: #ffffff">
            <p class="titleGWA">Overall GWA</p>
            <p class="numberGWA" id="overallGWA"></p>
        </div>
        <div style="background-color: #ffd9c3; color: #9b5f3d">
            <p class="titleGWA">Max. Attainable GWA</p>
            <p class="numberGWA" id="maxGWA"></p>
        </div>
    </div>
    <div class="academicStatus">
        <h3>Academic Status</h3>
        <p style="float: left;">On track for</p>
        <ul id="onTrackFor"></ul>
        <p>Can still attain</p>
    </div>

    <script>
        let overallGWA = 1.00; // change later on
        let maxGWA = 1.00; // change later on
        overallGWA = overallGWA.toFixed(2);
        maxGWA = maxGWA.toFixed(2);
        document.getElementById("overallGWA").innerHTML = overallGWA;
        document.getElementById("maxGWA").innerHTML = maxGWA;
        
        let onTrackFor = [];
        let canStillAttain = [];
        if (overallGWA < 1.25) {
            onTrackFor[onTrackFor.length] = "Summa Cum Laude";
            onTrackFor[onTrackFor.length] = "Magna Cum Laude";
            onTrackFor[onTrackFor.length] = "Cum Laude";
        }
        for (var i=0; i<onTrackFor.length; i++) {
            if (i == onTrackFor.length - 1) {
                document.getElementById("onTrackFor").innerHTML += "<li class='status'>" + onTrackFor[i] + "</li>";
            }
            document.getElementById("onTrackFor").innerHTML += "<li class='status' style='float: left;'>" + onTrackFor[i] + "</li>";
        }
    </script>
</main>

How to handle thrown errors and rejected promises side by side in a javascript catch block?

Javascript in a webbrowser.

There is an async event handler. Inside this event handler a try/catch is used. Inside the try block both synchronous functions are called and asynchoronous functions are called synchronously with await. The async functions are called with await for two reasons:

  1. No need to define callbacks for .then(), .catch() and .finally() (no callbacks at all in the try block).
  2. All exception handling can be done in the catch block of the event handler.

Inside the catch block the caught data is processed (a plain object with information about the caught data is created and sent to the server for logging). Since catch( xcp ) can catch anything that was thrown inside the try block but also a rejected Promise, there is a check if a Promise was caught. If a Promise was caught, it is handled in a specific way to retrieve the reject data. A subscription to the .then() of the Promise is made and the data received inside the callback is processed.

Code:

async function handleEvent( event )
{
    try
    {
        //async function called synchronously
        await doSomethingAsync( event );
        
        //function called synchronously
        doSomethingSync( event );
        
        //async function called asynchronously (fire and forget)
        doSoemthingDifferentAsync( event );
    }
    catch( xcp )
    {
        if( xcp instanceof Promise )
        {
            xcp.then(function( rejectData )
            {
                processAndUploadCatchData( rejectData );
            });
        }
        else
        {
            processAndUploadCatchData( xcp );
        }
        console.error( xcp );
    }
}

Sidenote1: The function doSomethingAsync() specifically uses Promise.reject( new Error() ) and not throw new Error() but nothing is received when subscribing to .catch of the Promise. Only when subscribing to .then(). I am still scratching my head about this.

Sidenote2: When xcp is an instance of Promise, logging it in the browser console gives all the usefull information, but it is not possible to access the underlying reject data programatically – except by subscribing to .then().

Initially I did not check if xcp is an instance of Promise and had to learn the hard way, that also a settled Promise does not reveal the data it was rejected with. The Promise does not reveal any properties which can be used for this.

The above code works. But I am unsure of it. I need a robust way of handling errors and rejected promises side by side.

Change Div label not working in iPhone webview using jQuery or JS

I am working on a small project for which I have created a web page that needs to be displayed in web view of the Apps (Apps aren’t created at my end). My page is working fine as I tested it on chrome (device tool bar for testing) and also the functionality is working fine in Android. It contains a small plugin
[Custom Dropdown](https://codepen.io/Gibbu/pen/gNdMXY)

as my client wanted to have custom background on the dropdown options. For a different feature, I added URLs on each option of the dropdown connected with a confirm box.

If a user press “Ok” in confirm box, they are redirected to the URL added, but if they don’t I need to reset the dropdown’s default selection. The code is very simple and works on web browser as well as on Android. But doesn’t work on iPhone webview and I am not sure why iPhone is rejecting the code.

Here's gimps of my code [Custom Dropdown Updated with my code](https://codepen.io/iHemant/pen/oNPPEPa)

On Cancel, I am simply renaming the dropdown’s label to default.

paged.js works on web version but not when printed with wkhtmltopdf

We use wkhtmltopdf (aka ‘wk’, in this question) to generate pdf documents from web pages.
Version number is wkhtmltopdf 0.12.6 (with patched qt)

It’s a good workflow normally because you can carry on working on the web version till you’re happy with it, in the usual way, and then just pass the url of that page to wkhtmltopdf to generate the pdf version.

We’re now trying to add page numbering, using https://github.com/pagedjs/pagedjs – the polyfill version.

The page numbering appears on the web page version, but I can’t get it to come through in the pdf that wk makes. In fact none of the paged.js stuff seems to happen in the wk version – it does large margins too by default which are easy to spot. (ultimately we don’t actually want the page numbering or any paged.js stuff on the web version, i’ve just got it turned on while i try to solve this wk problem.

I’ve got a static web page that i’m using to try to crack this, which looks like this:

<html>
  <head>
    <title>TEST PAGE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <script src="https://unpkg.com/[email protected]/dist/paged.polyfill.js"></script>
    <style media="print">
      @page {
        @bottom-left {
          content: 'page ' counter(page);
        }
      }
    </style>
  </head>
  <body>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar eros nec quam euismod tempus. Mauris sem diam, vulputate interdum sollic

    ...... lots of p tags full of lorem

    congue turpis eu augue auctor, vitae convallis ante consectetur. Mauris vestibulum non arcu vitae laoreet.
  </p>
  </body>
</html>

Using the --debug-javascript option, i get this output:

$ /usr/local/bin/wkhtmltopdf --debug-javascript --page-size "Letter" "https://local.example.com/page_test.html" "/tmp/page_test.pdf"
Loading pages (1/6)
Warning: https://unpkg.com/[email protected]/dist/paged.polyfill.js:337 SyntaxError: Parse error
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
Done

If I look up the line the warning refers to, https://unpkg.com/[email protected]/dist/paged.polyfill.js:337, it’s the class Hook line below:

     * Functions may return a promise if they are asycn.
     * From epubjs/src/utils/hooks
     * @param {any} context scope of this
     * @example this.content = new Hook(this);
     */
    class Hook { 
        constructor(context){
            this.context = context || this;
            this.hooks = [];
        }

I’ve got a local copy of paged.polyfill.js, and in that I tried changing that javascript line to

    const Hook = class {
 ```

but get the same error.

My javascript knowledge is pretty basic, can anyone see why it might be complaining about that?  Or have any other ideas?  thanks

Pure JS with safelink redirect another site feed

I try to a lot step to change feed it’s doesn’t work it

<script>/*<![CDATA[*//* Safelink */ function _0x4001(){var r=["indexOf","fromCharCode","248082FnFLPu","2dyVCwX","851934NCaRZc","1464344UJimDR","255DsMQPg","13242QFkwLe","472829bEwnSk","24WKgyRt","3319965YzkqUw","10ZsypoO","875633sYiivu","MNBVCXZLKJHGFDSAPOIUYTREWQmnbvcxzlkjhgfdsapoiuytrewq0987654321+/=","_utf8_enc","charCodeAt","_keyStr","charAt","replace","length"];return(_0x4001=function(){return r})()}function _0x2f39a2(r,n){return _0x3fd0(r-544,n)}function _0x3fd0(r,n){var t=_0x4001();return(_0x3fd0=function(r,n){return t[r=+r]})(r,n)}!function(){function r(r,n){return _0x3fd0(n-107,r)}var n=_0x4001();function t(r,n){return _0x3fd0(n-241,r)}for(;;)try{if(213392==+parseInt(r(105,107))*(-parseInt(r(107,108))/2)+-parseInt(r(99,109))/3+parseInt(r(116,110))/4+parseInt(r(116,111))/5*(-parseInt(t(255,246))/6)+parseInt(t(249,247))/7*(parseInt(r(109,114))/8)+parseInt(t(258,249))/9+parseInt(t(245,250))/10*(-parseInt(r(113,117))/11))break;n.push(n.shift())}catch(r){n.push(n.shift())}}();var b64={_keyStr:_0x2f39a2(555,551),enc:function(r){function n(r,n){return _0x3fd0(r- -600,n)}var t,e,f,i,u,c,a="",o=0;function d(r,n){return _0x3fd0(r- -100,n)}for(r=b64[n(-588,-592)](r);o<r.length;)f=(c=r.charCodeAt(o++))>>2,i=(3&c)<<4|(t=r[d(-87,-84)](o++))>>4,u=(15&t)<<2|(e=r[d(-87,-97)](o++))>>6,c=63&e,isNaN(t)?u=c=64:isNaN(e)&&(c=64),a=a+this[d(-86,-93)][d(-85,-83)](f)+this[n(-586,-579)].charAt(i)+this[d(-86,-88)][n(-585,-583)](u)+this._keyStr[n(-585,-579)](c);return a},dec:function(r){function n(r,n){return _0x3fd0(r-70,n)}function t(r,n){return _0x3fd0(r-457,n)}var e,f,i,u,c,a="",o=0;for(r=r[t(473,474)](/[^A-Za-z0-9+/=]/g,"");o<r[t(474,475)];)e=this._keyStr[n(88,89)](r[t(472,474)](o++))<<2|(i=this[n(84,91)].indexOf(r.charAt(o++)))>>4,f=(15&i)<<4|(u=this[n(84,91)].indexOf(r[n(85,83)](o++)))>>2,i=(3&u)<<6|(c=this[t(471,471)].indexOf(r[n(85,93)](o++))),a+=String[n(89,97)](e),64!=u&&(a+=String.fromCharCode(f)),64!=c&&(a+=String[n(89,95)](i));return allql._utf8_dec(a)},_utf8_enc:function(r){function n(r,n){return _0x3fd0(r-954,n)}r=r[n(970,962)](/rn/g,"n");for(var t="",e=0;e<r[n(971,973)];e++){var f=r[n(967,972)](e);f<128?t+=String[n(973,983)](f):(127<f&&f<2048?t+=String[i(659,662)](f>>6|192):(t+=String.fromCharCode(f>>12|224),t+=String.fromCharCode(f>>6&63|128)),t+=String[i(671,662)](63&f|128))}function i(r,n){return _0x3fd0(n-643,r)}return t},_utf8_dec:function(r){function n(r,n){return _0x3fd0(r-515,n)}for(var t="",e=0,f=c1=c2=0;e<r[n(532,525)];)(f=r[i(391,387)](e))<128?(t+=String[n(534,526)](f),e++):191<f&&f<224?(c2=r.charCodeAt(e+1),t+=String[n(534,543)]((31&f)<<6|63&c2),e+=2):(c2=r.charCodeAt(e+1),c3=r[i(391,388)](e+2),t+=String.fromCharCode((15&f)<<12|(63&c2)<<6|63&c3),e+=3);function i(r,n){return _0x3fd0(r-378,n)}return t}}; /*]]>*/</script>
<script>/*<![CDATA[*/
/* Safelink Settings */ var aSl={par:"url",hcd:5000,gcd:15000,nwt:false,sby:"published",mxr:20,pwt:"Getting your link..."};
/* Safelink */ function _0x1541(t,n){var e=_0x4a4c();return(_0x1541=function(t,n){return e[t=+t]})(t,n)}function _0x4a4c(){var t=[".safeL","location","hash","includes","split","get","length","click","preventDefault","target","getAttribute","href","par","nwt","open","_blank","dec","replace","https://www.blogger.com/feeds/7505906645408828742/posts/summary/-/Car?alt=json-in-script","&max-results=","sSS","toString","indexOf","history","replaceState","title","feed","entry","floor","random","alternate","link","hmVrfy","hidden","#hmVrfy .pstL","alt","No post was found","SAFE_L","true","gSS","gcd",".safeGoL","setAttribute","vsbl","innerHTML","pwt","rSS"];return(_0x4a4c=function(){return t})()}!function(){var t=224,n=230,e=255,r=236,a=229,l=240,i=246,u=257,o=249,s=236,c=94,S=263,d=242,f=243,x=225,_=244,h=245,v=103,g=89,w=239,p=246,b=81,m=88,L=248,q=96,y=86,C=275,P=261,A=73,E=72,M=264,k=261,T=252,G=71,N=70,U=233,j=235,F=237,I=81,O=69,V=108,B=102,D=68,H=218,J=231,R=329,W=66,z=278,K=52,Q=440,X=462,Y=223,Z=439,$=462,tt=926,nt=916,et=416,rt=249,at=238,lt=418,it=724,ut=737,ot=35,st=53,ct=736,St=755,dt=735,ft=777,xt=757,_t=741,ht=757,vt=38,gt=45,wt=751,pt=732,bt=752,mt=731,Lt=739,qt=730,yt=729,Ct=22,Pt=8,At=763,Et=770,Mt=754,kt=747,Tt=112,Gt=116,Nt=758,Ut=753,jt=499,Ft=477,It=504,Ot=514,Vt=224,Bt=111;function Dt(t,n){return _0x1541(n- -Bt,t)}function Ht(t,n){return _0x1541(n-Vt,t)}var Jt,Rt,Wt,zt,Kt=qSell(Ht(208,t));function Qt(t){var e=498;const n=window[r(jt,Ft)][r(500,483)];function r(t,n){return _0x1541(t-e,n)}if(n&&n[r(501,It)]("=")&&n[r(502,518)](/=(.*)/s)[0]=="#?"+t&&""!=n.split(/=(.*)/s)[1])return window[r(499,Ot)].hash.split(/=(.*)/s)[1]}function Xt(t){var n=window[_0x1541(Gt-115,Tt)].search;const e=new URLSearchParams(n);return e.has(t)?e[_0x1541(Nt-753,Ut)](t):void 0}0<Kt[Ht(245,n)]&&Kt.forEach(t=>{var a=448,l=449,i=447,u=427,o=160,s=144,c=138,S=422,d=147,f=134,x=454,_=441,h=465,v=455,g=456;t.addEventListener(_0x1541(Mt-kt,Et),function(t){function n(t,n){return _0x1541(n- -147,t)}function e(t,n){return _0x1541(t- -g,n)}t[e(-a,-l)]();var r=t[e(-i,-u)][n(-158,-137)](n(-o,-136)),t=t[n(-s,-c)].getAttribute("data-href");null!=(t=null!=r&&"/"!=r&&"#"!=r&&""!=r?r:null!=t&&"#"!=t&&""!=t?t:void 0)&&(t=b64.enc(t),t=blogUrl+"#?"+aSl[e(-444,-S)]+"="+t,1==aSl[n(-d,-f)]?window[e(-442,-x)](t,e(-_,-h)):window.location[e(-445,-v)]=t)})}),null==Qt(aSl[Ht(e,r)])&&null==Xt(aSl.par)||(Kt=null!=Qt(aSl[Dt(-98,-99)])?b64[Ht(a,l)](Qt(aSl[Ht(i,r)])):b64[Ht(u,l)](Xt(aSl[Ht(o,s)])),Jt=blogUrl[Dt(-92,-c)](/.*?:///g,"//")+Ht(S,d)+aSl.sby+Ht(S,f)+aSl.mxr,Pu[Ht(x,_)]("SAFE_L",Kt),0<(Kt=window[Dt(-129,-110)][Ht(t,h)]())[Dt(-v,-g)]("#")&&(Kt=Kt.substring(0,Kt[Ht(w,p)]("#")),window[Dt(-b,-m)][Ht(242,L)]({},document[Dt(-q,-y)],Kt)),Pu.gAj({url:Jt,async:!0,success:function(t){var n=956,e=713;function r(t,n){return _0x1541(n- -At,t)}function a(t,n){return _0x1541(t-Pt,n)}if((t=JSON.parse(t)[r(-it,-ut)]).entry&&0!==t[a(ot,st)].length){for(var l,i,u=(t=t[r(-725,-ct)])[Math[r(-St,-dt)](Math[a(37,49)]()*t[r(-ft,-xt)])],o=0,s=u.link[r(-_t,-ht)];o<s;o++)a(vt,gt)==(i=u[r(-wt,-pt)][o]).rel&&(l=i.href);remCt(getid(r(-bt,-mt)),r(-Lt,-qt)),qSel(r(-749,-yt)).href=l,setTimeout(function(){addCt(getid(_0x1541(-961- -993,-n)),_0x1541(-678- -e,-657))},aSl.hcd)}else toastNotif(a(44,Ct))}})),null!=Pu.gSS(Ht(C,P))&&Dt(-69,-A)==isPost&&(Jt=Pu[Dt(-60,-E)](Ht(M,k)),Rt=Math[Ht(239,T)](aSl[Dt(-E,-G)]/1e3),Wt=Rt,qSel(Dt(-74,-N))[Ht(U,j)]=Jt,1==aSl[Ht(243,F)]&&qSel(".safeGoL")[Dt(-I,-O)](Dt(-V,-B),Ht(t,239)),addCt(getid("aSlCnt"),Dt(-49,-D)),zt=setInterval(function(){var t=193,n=246,e=--Wt/Rt*100;function r(t,n){return _0x1541(n-lt,t)}qSel(".aSlW").style.width=100-e+"%",qSel(".aSlCd")[r(Q,X)]=Math[_0x1541(-218- -n,-Y)](Wt),Wt<=0&&(clearInterval(zt),qSel(".aSlCd")[r(Z,$)]="0",setTimeout(()=>{qSel(".aSlC")[_0x1541(et-372,396)]=aSl[_0x1541(at-t,rt)]},1e3),setTimeout(()=>{var t=959;addCt(qSel(".aSlB"),_0x1541(-nt- -t,-tt)),addCt(getid("aSlCnt"),"alt")},4e3))},1e3),qSel(".safeGoL").addEventListener(Ht(H,J),function(){Pu[_0x1541(324-z,R)](_0x1541(89-K,W))}))}(); if(qSel('.aScr')!==null){qSel('.aScr').addEventListener('click', () =>{setTimeout(() =>{qSel('.safeGoL').scrollIntoView({behaviour:'smooth', block:'center', inline:'center'})},200)})}
 /*]]>*/</script>

I need change the script to safw link with another feed

stop an infinite loop and restart it

I have created an infinite loop to check if a certain time is met and change my interface accordingly.

function infiniteloop(){
    let now = moment();
    start = moment(myStartTime);
    end = moment(myEndTime);
    if (now.isBetween(start, end)) {
        console.log('This is happening now')
    } else  {
        console.log('This is not happening now')
    }
    setTimeout(infiniteloop, 5000);
}

infiniteloop() is called when my page renders. As the variables myStartTimsand myEndTimemay change, it is necessary to call that function again when they change. But then it runs multiple times.

So I tried to call it with

clearTimeout(infiniteloop);
infiniteloop();

But that doesn’t do the Trick. How can I ensure the loop is stopped and called again?

Cypress code coverage not running against all files

We’ve recently implemented Cypress tests, and I’m trying to set up code coverage reports to ensure we can track coverage of new code. I’ve followed the steps outlined here, however when I run my cypress tests the only file showing as tested in my report is cypress/support/e2e.js, rather than the actual files in my repo.

My folder structure for my repo is as follows:

|/src
| /api
   /tennis
    /player.js
     ... 
|/cypress
| /e2e
   /tennis
    /player.cy.js
     ...
| /support
   /e2e.js
|/coverage
| /lcov-report
   /index.html
     ...

And we’ve added the following cypress.config.js:

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:8080',
    supportFile: 'cypress/support/e2e.js',
    screenshotOnRunFailure: false,
    video: false,
    reporter: "cypress-multi-reporters",
    reporterOptions: {
      configFile: "./cypress/cypress-reporters.json"
    },
    setupNodeEvents(on, config) {
      require('@cypress/code-coverage/task')(on, config)
      on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
      return config
    },
  }
})

My cypress/support/e2e.js file has the following:

import '@cypress/code-coverage/support'

And my .babelrc file imports “istanbul” for instrumentation.

When I run my cypress tests, I can see the logs for the expected before / afterEach / after functions associated with cypress tests, and I’ve attached an image of what console.log(window.__coverage__) displays: console

At the end of my tests, however, .nyc_output/out.json is an empty object, and the html coverage report just shows coverage report

Does anyone know where I’m going wrong with my setup to display the full cypress coverage reports? Please let me know if you need any info in addition to the above.

Thanks in advance

avoid back-navigation and recover user 404s in SvelteKit

How to make a navigation sequences stronger in SvelteKit in gaming context ?

I have a complex navigation in my app, given this brief of folder structure:

src/routes/
    welcome/
    help-and-guides/
        pages.../
    game/
        +layout.svelte  # holds the arena board components
        splash/         # modal, timeout 3s --> then goto main-menu
        main-menu/      # modal, overlaps game layout (and board)
        create-game/    # modal, overlaps game layout
        join-game/      # modal, overlaps game layout
        turn-ready/
        move-type-a/
        move-type-b/
        move-type-c/
        move-type-d/
        move-type-pass-turn/
        turn-complete/
        game-over/       # modal, timeout 5s --> then goto splash

Of course this is simplified.. Real-world example is 30 pages long !

I place the board compos directly in the layout so modal pages such as main-menu can be easily displayed; stacked on top of them.

I trigger navigations between screens programmatically and I would be able to write a component and an assocuated store “GotoView” to allow easy navigating when clicking on UI buttons or after a timeout.

I just fear about two user behaviors:

  • mobile: accidental tap on “back navigation button”
  • desktop: manually rewriting URL bar (cheating)

… both could make inconsitencies in game state, and resumting with unecesary loss of state, then crash.

Is it possible block bak navigation or recover from a 404 page due to users mistakes ?

Regards.

How can I render a LIT web component that contains a slot into the document body?

How can I maintain the Shadow DOM behavior when using createRenderRoot to render a component in document.body and using slots?

In my current implementation, I am using createRenderRoot to set where my component should render, specifically in document.body. However, when I use slots, the component no longer behaves as expected, possibly because it is no longer using the Shadow DOM.

Is there a way to maintain the Shadow DOM behavior while using createRenderRoot?

Here is a playground to demonstrate the issue.
Lit Playground

Server rejected transaction for clicking on slot ${slot}, on window with id ${window?.id}

I am trying to click on the window in the minecraft server menu, but when I try to do this I get an error:

throw new Error(`Server rejected transaction for clicking on slot ${slot}, on window with id ${window?.id}.`)

I think this is due to the fact that the server is constantly updating the menu, because everything works with a static menu (the bot clicks only 1 time and on the right slot)

Here is part of my code:

bot.setQuickBarSlot(0)
bot.activateItem()
setTimeout(() => bot.simpleClick.rightMouse(10), 1000)

A gif showing how the server changes the menu:

A gif showing how the server changes the menu:

I tried adding delays between clicks and removing them, but nothing helped

Await Promise in Electron ipcRenderer.invoke via context bridge

I am having a hard time to apply the Invoke Method from the Electron Documentation via Context Bridge to my project.

From renderer.js I need to trigger an async function in main.js and wait for the response in renderer.js.

My code below successfully triggers an action in main.js. However, the response in renderer.js is undefined.

I tried several different modifications but it keeps getting worse. Please point out what I’m doing wrong here!

preload.js

contextBridge.exposeInMainWorld(
    "api", {

        doInvoke: (channel, func) => {
            let validChannels = ["some-channel"];
            if (validChannels.includes(channel)) {
                ipcRenderer.invoke(channel, data).then((result) => {return result})
            }
        },
    }
);

renderer.js

$(document).on('keyup','input', async function(e){
    let response = await window.api.doInvoke(channel='some-channel', data='test-string')
    console.log(response) //--> logs undefined
})

main.js

ipcMain.handle('some-channel', async (event, data) => {
  const result = await doSomeWork(data)
  return result
})

async function doSomeWork(data){
  console.log(data)  //--> logs 'test-string'
  return data + 's'
}

How do I avoid tags wrapping and display the tags in one line using jQuery select2 plugin?

I want to avoid tags wrapping and display the tags in one line using jQuery TagIt plugin.

Here is my preview:
enter image description here

But I want it to display all the tags in a single line without wrapping instead of scrolling vertically and maybe use a horizontal scroll bar instead. Also the input element at the end of the tags should be on the same line.

Minimal reproduceable example: 

<!doctype html>
<html lang="en" class="h-100">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $("#token-ids").select2({
            theme: "bootstrap-5",
            placeholder: "Enter Values Here",
            tags: true,
            tokenSeparators: [',', ' '],
        });
    });
</script>
</head>
<body>
<select class="form-control" id="token-ids" name="token-ids[]" multiple="multiple"></select>
</body>
</html>

Como utilizar uma função jQuery através de um botão que está dentro da DataTable? [closed]

Bom dia, pessoal. Estou com um dúvida no jQuery, talvez algum de vocês possa me ajudar. Eu estou começando com JS agora e sei que é bem fácil ativar uma função utilizando jQuery. Até fiz esse exemplo aqui para testar:

enter image description here

Toda vez que eu clico no botão cujo id é “Editar” o sistema retorna o alert certinho.

enter image description here

O problema é, quando esse botão está dentro de uma DataTable, não acontece nada. Vocês saberiam me informar se é possível ativar uma função utilizando jQuery atravez de um clique em um botão que está sendo dentro de uma DataTable sendo retornado via mRender? Segue abaixo o código do botão.

{“mRender”: function ( data, type, row )
{
return ‘ ‘ +
”+
”+
”
}
}

enter image description here

enter image description here

Desde já, agradeço por qualquer ajuda ou dica. Vocês são show!

Eu já tentei várias formas para ativar a função.