Category: javascript

I’m trying to make a simple toggle button for this script to change themes from light to dark but it doesn’t seem to work when toggling. The script I believe is done, but I can’t figure out how to create a button that toggles between light and dark mode.

JavaScript:

var toggle = document.getElementById("theme-toggle");

var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
if (storedTheme)
    document.documentElement.setAttribute('data-theme', storedTheme)


toggle.onclick = function() {
    var currentTheme = document.documentElement.getAttribute("data-theme");
    var targetTheme = "light";

    if (currentTheme === "light") {
        targetTheme = "dark";
    }

    document.documentElement.setAttribute('data-theme', targetTheme)
    localStorage.setItem('theme', targetTheme);
};

CSS:

html[data-theme='light'] {
    --background-color: #9ec8ff;
    --text-color: #000000d8;
    --link-color: #543fd7;
    --header-color:#7ab1ff;
    --headerborder-color: 0.5px solid rgb(0, 0, 0);
    --logo-color: invert(0);
    --button-color:#ffffff;
    --signinbutton-color:#ffffff;
    --buttonborder-color: 1.5px solid rgb(0, 0, 0);
    --profile-border: 3px solid black;
    --table-border: rgb(0, 0, 0);
    --social-login: antiquewhite;
    --social-border: 0px solid rgb(50, 51, 52);
}

html[data-theme='dark'] {
    --background-color: #000000;
    --text-color: #F7F8F8;
    --link-color: #82f7ff;
    --header-color:#1A1A1B;
    --headerborder-color: 1px solid rgb(50, 51, 52);
    --logo-color: invert(1);
    --button-color:#1A1A1B;
    --signinbutton-color:#000000;
    --buttonborder-color: 1.5px solid rgb(50, 51, 52);
    --profile-border: 3px solid rgb(50, 51, 52);
    --table-border: rgb(100,102,104);
    --social-login: #1A1A1B;
    --social-border: 1.5px solid rgb(50, 51, 52);

}

[data-theme='light'] .d-block-light,
[data-theme='dark'] .d-block-dark {
    display: block !important;
}

I am trying to delete a single object from the below object of arrays. I have tried with slice but sometimes it doesn’t work. That’s why I want to try different methods.

{
  id: "6252de4b27082fd83b94e3f4";
  options: [
    { title: "extra Tomato", price: 2 },
    { title: "ketchup", price: 1 },
    { title: "medium", price: 3 },
  ];
  price: 5.1;
  quantity: 1;
  title: "Carroll Montgomery";
}

suppose I want to delete medium object my expected output would be:

{
  id: "6252de4b27082fd83b94e3f4";
  options: [
    { title: "extra Tomato", price: 2 },
    { title: "ketchup", price: 1 },
  ];
  price: 5.1;
  quantity: 1;
  title: "Carroll Montgomery";
}

I am creating a script for Windows and MacOS.
How better I should create a script to run in different OS?

I wrote a function

function osCheck() {

var os = $.os;
var match = os.indexOf("Windows");

if(match !=-1){
    var userOS = "PC";
 } else {
     var userOS = "MAC";
    }
     return userOS;

}

but I think it will does not wor for my script.
My script creating a Bin and Sequence in Adobe Premiere Pro.

$.runDigital = {
digital: function() {

    var rootItem = app.project.rootItem
    var sequenceBin = rootItem.createBin('01_EDIT')

        app.enableQE();
        //create new seq for windows
        qe.project.newSequence("_EDIT_", "C:\Program Files\Adobe\Adobe Premiere Pro 2022\Settings\SequencePresets\DNxHD\1080p 25\DNX LB 1080p 25.sqpreset" );

        //create new seq for Mac
        qe.project.newSequence("_EDIT_", "/Applications/Adobe Premiere Pro 2022/Adobe Premiere Pro 2022/Contents/Settings/SequencePresets/DNxHD/1080p 25/DNX LB 1080p 25.sqpreset" );

        rootItem.children[1].moveBin(sequenceBin);

Following problem:
When you click on the sandwich/hamburger menu icon,a menu is opened. That works already.
What I am trying to achieve now is when you click on a menu item, the whole menu should close and reveal the site in the background.
The links load into a div via a script, so you won’t be leaving the actual site.

Important: this whole sandwich menu is done with a checkbox .. I tried copying some premade scripts that uncheck it but it just won’t work. Help would be appreciated.

komic.biz/new1.html <- Site

I have this code that defines structure of my navbar

const tabsStructure = [
    {name: "File",
        menu: [
            {
                name: "New",
                onClick: () => {/*Toggle component*/}
            },
            {name: "Save",
                menu: [
                    {
                        name: "Save to browser",
                        onClick: () => {/*Toggle component*/}
                    },
                    {
                        name: "Save JSON",
                        onClick: () => {/*Toggle component*/}
                    }
                ],
            },
            {
                name: "Load",
                onClick: () => {/*Toggle component*/}
            }
        ]
    },
    
    {name: "Edit",
        menu: [
            {
                name: "Resize",
                onClick: () => {/*Toggle component*/}
            }
        ]
    }
];

export default tabsStructure;

That array of objects is being imported to one of the React components which properly generates HTML structure. I would want to add some functions for toggling other components, to some of the menu items (as you can see in my code). I would do that through setting proper states of common parent of both, the menu item and the component I want to toggle. However, from the scope of this file I don’t have access to other components, their states etc.
My question is: what is the best way of dealing with it? Should I move tabsStructure to the state of App component? If so, would it be possible to still keep it in separate file?

Here’s structure that my code generates:
structure

For example, I would like to toggle DocumentCreator through clicking on “New” menu item.

I want to make sure that when you go to the addresses /admin-cp or its subpages /admin-cp/analytics or /admin-cp/users, access is checked and the corresponding page is displayed.

I did that when switching to /admin-cp opened loader.html with a js code that throws a request to the server with a token:

async function loadEdit(user) {
  const idToken = await user.getIdToken()
  const res = await fetch('/admin-cp/analytics',  { headers: { authorization: idToken },  redirect: 'follow' })
  /*.then(res => {
    if (res.redirected) {
        document.location = res.url;
    }
  })*/
  console.log(res);
  return res;
}

And the server checked the token and displayed the desired page:

app.get("/admin-cp", function (req, res) {
    res.sendFile(path.join(initial_path, "admin-cp/loader.html"));
});

app.get("/admin-cp/:page", function (req, res) {
    const idToken = req.headers.authorization;
    if (!idToken) return res.status(401).send("Unauthorized")

    const sessionCookie = req.cookies.session || "";
    
    admin
        .auth()
        .verifySessionCookie(sessionCookie, true  )
        .then((userData) => {
            console.log("Logged in:", userData.email)
            console.log('Авторизован. Доступ в админ панель открыт')


            admin
            .auth()
            .verifyIdToken(idToken)
            .then((claims) => 
            {  
                if (claims.admin === true) 
                {    
                    console.log('Зашёл с правами администратора', req.params.page);
                    if (req.params.page === 'analytics')
                    {
                        console.log("Open analytics");
                        res.sendFile(path.join(initial_path, "admin-cp/main-admin_cp.html"));
                    }
                } 
                else if (claims.admin === false)
                {
                    console.log('Зашёл без прав администратора');
                    res.sendFile(path.join(initial_path, "admin-cp/global_not_permission.html"));
                }
            });
            
            
        })
        .catch((error) => {
            console.log('Не авторизован. Ошибка', error, ' отсутвует userData')
            res.redirect("/login");
        });

});

But nothing happens. The token is verified, but the page is not displayed.

I have text animated in JavaScript and CSS but the problem is that text is repeated constantly. How I can stop repeating after is shown once and stay displayed.

Javascript code is:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>
    // Wrap every letter in a span
    var textWrapper = document.querySelector('.slogan');
    textWrapper.innerHTML = textWrapper.textContent.replace(/S/g, "<span class='letter'>$&</span>");

    anime.timeline({loop: true})
    .add({
        targets: '.slogan .letter',
        opacity: [0,1],
        easing: "easeInOutQuad",
        duration: 2250,
        delay: (el, i) => 150 * (i+1)
    }).add({
        targets: '.slogan',
        opacity: 0,
        duration: 1000,
        easing: "easeOutExpo",
        delay: 1000
    });
</script>

The final result that I need is an after-show slogan to stay like that till customers refresh the page and stop repeating after 1 time.

Thanks all

Suppose, right now it is 1:04 PM. First, 10 mins slot is 1:04 PM to 1:14 PM, the screenshot will be taken at any time randomly between 1:04 PM and 1:14 PM and once we reach 1:14 PM a new slot is from 1:14 PM to 1:24 PM and a random screenshot is taken between 1:14 PM and 1:24 PM. How do I achieve this, I am a beginner and struggling to build the logic required.

I want to make changes to setTimeout to make it execute randomly any time in a span of 10 minutes, just like how Upwork screen tracker works.

Here is my code.

const uploadFiles = (img) => {
 // logic
const storageRef = ref(storage, 
 `/screenshots/${uuidv4()}`);

uploadString(storageRef, img, 
 "data_url").then((snapshot) => {
   console.log("Uploaded a data_url string!");
 });
};
let newTimeoutId;
const screenshot = async () => {
    setTimeoutId(true);

const newTimeoutId = setTimeout(async () => {
  const screenshotData = await 
  ipcRenderer.invoke("capture");

const string = new 
 Buffer.from(screenshotData).toString("base64");

const img = `data:image/png;base64,${string}`;
  console.log(img);
  uploadFiles(img);
  screenshot();
 }, 600000);
};

const stopScreenshot = () => {
    setTimeoutId(false);
    clearTimeout(newTimeoutId);
  };

I’m trying to make an etch-a-sketch with HTML where I have a div container with lots of div elements in it, using grid display in CSS.

HTML: <div id="canvas"></div>

Then I use JS to add the div elements:

for(let i =1;i<=256;i++){
    let squareDiv = document.createElement("div");
    canvasElement.appendChild(squareDiv);
    canvasElement.setAttribute("draggable","false");}

The draggable attribute doesn’t work.

When I click and drag to draw something, it is dragging a faint image as below:

Is there an attribute I could use to disable this ?

I have API call, where I use pipe

getCountriesListNights(){
    const r = this.http.get<any>(this.APIUrl + "/WorldMapDataNights?&year=" + this.selectedYear + "&month=" + this.selectedMonth +"&gender=" + this.selectedGender + "&age="+this.selectedAge + "&quarter=" + this.selectedQuarter).pipe(map((res) => {return res.map((res: { id: any; countryName: any; value: any; year: any; name: string; multiPolygon: any[] }) =>({countryName: res.countryName,  id: res.id,  value: res.value, year: res.year, name: res.name, multiPolygon: res.multiPolygon  }))})).subscribe(res =>{
      this.renderMapObject(res);
    });
  };

It works good, I can change the output, but I want to divide value by other API’s value, when country name’s are same in both API’s. (I want to divide res.value by otherapi.value.)

what can I do now?

How to call data from this array??
I have to add two values from others urls.
enter image description here

<table id="sales_table">
               <thead>
                   <tr id="sales_item_title">
                    </tr>
               </thead>
               <tbody>
                   <tr id="sales_item"></tr>
                </tbody>
          </table>
          <script>
      async function init(){
      try{
          const results = await Promise.all([
            fetch('https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=PLN').then((response)=> response.json()),
            fetch('https://min-api.cryptocompare.com/data/all/coinlist').then((response)=> response.json()),
          ].map(promise=>promise.catch(error=>console.error)));
          console.log(results);
          document.querySelector('#sales_item').innerHTML = results.0.PLN
        }catch (error){
          console.error(error);
        }
      }
      init();


          </script>

How can we center the javascript popup on a single monitor setup? This is the piboard.in bookmarklet.

javascript:q=location.href;if(document.getSelection){d=document.getSelection();}else{d='';};p=document.title;void(open('https://pinboard.in/add?showtags=yes&url=%27+encodeURIComponent(q)+%27&description=%27+encodeURIComponent(d)+%27&title=%27+encodeURIComponent(p),%27Pinboard%27,%27toolbar=no,scrollbars=yes,width=750,height=700%27));

I know reduce is the function I need to use but I don’t know how to start. I want to group questions with the same sectionID. How can I manipulate this object?

[
  {
      "processUrlID": "9a0e6b48-4019-46ff-9513-eff55c8a0716",
      "processParent": "84050058-534d-4e60-92e6-95315786e360",
      "questions": [
          {
              "processTitle": "sdqf",
              "processType": "Question",
              __"DATAINS_TXTSIN_checklistSection": "sqd",
              "DATAINS_TXTSIN_checklistSectionID": "2d9c7bc3-c6f7-4204-a174-1fad80f206a7",__
              "DATAINS_TXTMUL_Info": null,
              "DATAINS_TXTSIN_choices": null,
              "DATAINS_TXTSIN_ResponseType": "YNA",
              "DATAINS_TXTSIN_language": null,
              "DATAINS_TXTSIN_checklistParent": null,
              __"processUrlID": "da65e3aa-def0-4b69-bbca-7b0c3fe44572",__
              "processParent": "9a0e6b48-4019-46ff-9513-eff55c8a0716",
              "dateModified": "2022-04-15T08:38:58.302Z"
          },
          {
              "processTitle": "qsdf",
              "processType": "Question",
              __"DATAINS_TXTSIN_checklistSection": "sqd",
              "DATAINS_TXTSIN_checklistSectionID": "2d9c7bc3-c6f7-4204-a174-1fad80f206a7",__
              "DATAINS_TXTMUL_Info": null,
              "DATAINS_TXTSIN_choices": null,
              "DATAINS_TXTSIN_ResponseType": "YNA",
              "DATAINS_TXTSIN_language": null,
              "DATAINS_TXTSIN_checklistParent": null,
              __"processUrlID": "0cca5b1d-d5d8-4d5b-9f4c-9cb6ff92e4c6",__
              "processParent": "9a0e6b48-4019-46ff-9513-eff55c8a0716",
              "dateModified": "2022-04-15T08:39:02.028Z"
          },
          {
              "processTitle": "qsdfsf",
              "processType": "Question",
              __"DATAINS_TXTSIN_checklistSection": "eazr",
              "DATAINS_TXTSIN_checklistSectionID": "a4bbde66-8ba0-4513-a64d-41fc34c7827c",__
              "DATAINS_TXTMUL_Info": null,
              "DATAINS_TXTSIN_choices": null,
              "DATAINS_TXTSIN_ResponseType": "NOKNA",
              "DATAINS_TXTSIN_language": null,
              "DATAINS_TXTSIN_checklistParent": null,
              __"processUrlID": "d2e70fc8-990b-4660-9d62-1ca0df0d64d3",__
              "processParent": "9a0e6b48-4019-46ff-9513-eff55c8a0716",
              "dateModified": "2022-04-15T08:45:37.973Z"
          }
      ],
      "sections": [
          {
              __"processUrlId": "2d9c7bc3-c6f7-4204-a174-1fad80f206a7",__
              "processParent": "84050058-534d-4e60-92e6-95315786e360",
              "name": "sqd",
              "language": null,
              "isDirty": true,
              "dateModified": "2022-04-15T08:38:57.211Z"
          },
          {
              __"processUrlId": "a4bbde66-8ba0-4513-a64d-41fc34c7827c",__
              "processParent": "84050058-534d-4e60-92e6-95315786e360",
              "name": "eazr",
              "language": null,
              "isDirty": false,
              "dateModified": "2022-04-15T08:45:36.103Z"
          }
      ]
  }
]

to become this object:

[
  {
    "section": "Section 1",
    "sectionID": "95f5c4c0-e66b-4bff-bdb1-63e5278bf71c",
    "questions": [
      "61d8bbbe-2105-4a23-b635-365fc63cca2a",
      "f0ba38ff-f6c5-44f5-b805-e3adff1706e6",
      "38ab4c01-f5bf-4da5-a350-861ff7697d7c",
      "2d35a051-833f-44f8-a94c-d386fb49aff5"
    ]
  },
  {
    "section": "Section 2",
    "sectionID": "351741fc-3ce0-4a01-885c-7815a73cae52",
    "questions": [
      "24889d1a-98e9-4107-8d69-d6681b03953f"
    ]
  }
]

I have html code, and I want to change the src value on the <img tag in server side. I was using node-html-parser library.
Here’s my code :

const root = HTMLParser.parse(templateContent);

let base64Image = root.querySelector('img').rawAttributes.src;
console.log('here');
root.getElementsByTagName('img')[0].rawAttributes.src.set_content('src:image');
console.log(root.toString())
process.exit()
...

But when I run the code above, the result is just print here, and the next line is not executed, even the process.exit().

Is there any mistake that I made ? I just want to change the src value inside the <img tag.
Please ask me for more information if it’s still not enough to solved it, Thankss

I’m using template adminpanel chain-responsive-bootstrap3-admin-template
When a parent menu is active it should have a class of active.

When a parent menu with sub menus is active and also in a dropdown active state the class should be parent active.

How to make the class change dynamically?

<ul class="nav nav-pills nav-stacked">
    <li><a href="{{ route('dashboard') }}"><i class="fa fa-home"></i> <span>Home</span></a></li>
    <li><a href="#"><i class="fa fa-suitcase"></i> <span>Orders</span></a></li>
    <li class="parent"><a href="#"><i class="fa fa-shopping-cart"></i> <span>Shop</span></a>
        <ul class="children">
            <li><a href="{{ route('category.index') }}">Categories</a></li>
            <li><a href="{{ route('product.index') }}">Products</a></li>
            <li><a href="{{ route('product-attribute.index') }}">Attributes</a></li>
            <li><a href="">filters</a></li>
            <li><a href="">Uploads</a></li>
            <li><a href="{{ route('page.index') }}">Pages</a></li>
        </ul>
    </li>
    <li class="parent"><a href="#"><i class="fa fa-share"></i> <span>Marketing</span></a>
        <ul class="children">
            <li><a href="{{ route('stock.index') }}">Stocks</a></li>
            <li><a href="{{ route('coupon.index') }}">Coupons</a></li>
        </ul>
    </li>
    <li class="parent"><a href="#"><i class="fa fa-users"></i> <span>Users and Roles</span></a>
        <ul class="children">
            <li><a href="{{ route('user.index') }}">Users</a></li>
            <li><a href="#">Roles</a></li>
        </ul>
    </li>
</ul>