I'm trying to make a simple close button for my electron application.
But for some reason document.querySelector('*') doesn't work for the top bar of my application..
And even if I manage to select specifically the div that is in charge of the close button, the click event listen doesn't fire..
here is my main.js:
const path = require('path')
require('electron-reload')(__dirname);
const createWindow = () =>{
const win = new BrowserWindow({
width: 400, // width = 400
height: 600, // height = 600
frame: false,
opacity: 0.98,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
//win.webContents.openDevTools();
win.setResizable(false);
win.loadFile('index.html')
// add button check
ipcMain.on('exit-app', () => {
console.log('clicked on something')
})
}
app.whenReady().then(() => {
createWindow()
})
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') app.quit()
})
here is my index.html:
<link rel="stylesheet" href="./styles.css">
<html>
<div class="titlebar">
<div class="buttons">
<p id="text">Omer's Electron Application</p>
<div id="close"> </div>
<div id="minimize"> </div>
</div>
</div>
<head>
<title>
Omer's Electron Application
</title>
</head>
<script src="./index.js"></script>
</html>
here is my preload.js:
const {ipcRenderer} = require('electron')
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('*').addEventListener('click', ()=>{
ipcRenderer.send('exit-app')
})
})
here is my styles.css:
#import url('https://fonts.googleapis.com/css2?family=Roboto+Serif');
* {
background-color: #525252;
margin: 0;
padding: 0;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
font-size: 18px;
font-family: 'Roboto Serif', serif;
}
.titlebar *{
background-color: #414141;
height: 40px;
-webkit-app-region: drag;
position: fixed;
}
#text{
position: fixed;
left: 50px;
top: 10px;
height: 10px;
color: #e0e0e0;
}
.buttons > div {
width: 25px;
height: 25px;
border-radius: 50%;
text-align: center;
position: fixed;
left: 370px;
top: 7px;
}
.buttons > #close{
background-color: #eb5a55;
}
.buttons > #minimize{
background-color: #f4bb40;
position: fixed;
left: 340px;
}
I bumped into this thread randomly and found the answer I was looking for !
Change Cursor on Draggable region in Electron
Unfortunately setting -webkit-app-region: drag; disables all click and mouse events because it's treated as a title-bar so you can't change the cursor.
I would include where I read that but I can't find it anymore.
See:
#1354 -webkit-app-region: drag eats all click events
#8730 Frameless Electron App not work css cursor:pointer
So apparently after removing -webkit-app-region: drag the issue was fixed and all mouse events worked like magic !
Related
The aside element is a modal popup with multiple a href links inside, none of which are working. I can right click and go to the link but clicking on it does nothing. The open modal is triggered by Javascript. There are no external libraries, plugins etc that could be causing conflict.
What am I missing here?
const overlay = document.querySelector(".overlay");
const card = document.querySelectorAll(".card");
card.forEach((card) => {
card.addEventListener("click", () => {
const cardId = card.getAttribute("data-card");
const modal = document.getElementById(`${cardId}`);
modal.classList.remove("hidden");
overlay.classList.remove("hidden");
const vScrollPos = window.scrollY;
document.body.style.position = "fixed";
document.body.style.top = `-${vScrollPos}px`;
const closeModal = function() {
modal.classList.add("hidden");
overlay.classList.add("hidden");
const scrollY = document.body.style.top;
document.body.style.position = "";
document.body.style.top = "";
window.scrollTo(0, parseInt(scrollY || "0") * -1);
};
const modalCloseBtn = modal.querySelector(".close-modal");
modalCloseBtn.addEventListener("click", () => {
closeModal();
});
overlay.addEventListener("click", closeModal);
document.addEventListener("keydown", function(e) {
if (e.key === "Escape" && !modal.classList.contains("hidden")) {
closeModal();
}
});
});
});
.hidden {
display: none;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100vw - 16rem);
overflow-y: scroll;
max-height: calc(100vh - 16rem);
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 10;
pointer-events: all;
cursor: pointer;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
overflow-y: scroll;
z-index: 5;
}
.modal-title {
font-size: 2.4rem;
margin-bottom: 3rem;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
<article class="card" data-card="modal1">
<img class="card-img" src="img/card-thumb/cardImg.jpg" alt="card image">
<p class="card-title">open card modal</p>
</article>
<aside class="modal hidden" id="modal1">
<button class="close-modal">×</button>
<h5 class="modal-title">
<a href='https://www.google.com/' target='_blank' rel='noreferrer noopener nofollow'>WHY IS THIS LINK NOT OPENING?</a>
<h5>
</aside>
Ok. issue has been found and fixed.
I was using scrollIntoView to handle page nav and smooth scrolling and I imprecisely targeted all "a" elements before I wrote the code for this current section with "a" elements inside of modal containers. Solved issue by giving the page nav a's an additional class then targeting that class only for that section of JS code! Doooooh.
By the way, this is coming from a beginner coder, so don't expect any great amount of organization. I may have missed something obvious.
I couldn't get it to work here as a snippet (for security reasons, it won't allow images to be loaded, not even showing the failing to load icon), so I made a copy of it here.
The issue is that, while hovering over a folder, it works fine, but when I begin hovering over the menu that pops up while hovering over the folder, it starts flashing rapidly. Yes, the menu is supposed to delete itself when the user stops hovering over the folder and show when the user hovers over the folder.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Something</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
</head>
<body>
<!-- See CSS code for more explanation -->
<div class="sidebar">
<h1 style="padding: 1vw;">Todo</h1>
<div class="folder">
Folder 1
</div>
<div class="folder">
Folder 2
</div>
<div class="folder">
Folder 3
</div>
<div class="addBtn">+ Folder</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS code:
/* might have something to do with css; please read my hastily made comments */
/* self explanatory */
html,body {
height: 100%;
margin: 0px;
padding: 0px;
background-color: black;
}
/* sets some defaults */
* {
padding: 0px;
margin: 0px;
border: 0px;
overflow: hidden;
font-family: Poppins;
background-color: inherit;
}
/* sets text selection color to nothing */
*::selection {
background: inherit;
}
/* styling for the sidebar (the part that says "todo", shows folders, etc.) */
.sidebar {
background: #9caeb0;
display: inline-block;
width: calc(20% - 2vw);
height: 100vh;
padding: 1vw;
}
/* the text that says todo */
h1 {
font-size: 30px;
font-weight: 700;
}
/* a folder. */
.folder {
width: calc(15.4vw);
background-color: #8c9ca3;
padding: .6vw;
padding-left: 1.25vw;
padding-right: 1.25vw;
border-radius: 0px 5px 5px 0px;
font-weight: 200;
cursor: pointer;
transition: .45s;
margin: .6vw;
margin-left: -1vw;
margin-right: calc(0vw);
font-size: 15px;
position: relative;
}
/* uses css animations to change the folder upon hovering */
.folder:hover {
background-color: #75828a;
cursor: pointer;
margin-top: .8vw;
margin-bottom: .8vw;
margin-left: -2vw;
padding-left: 2.25vw;
width: 15.8vw;
font-size: 17px;
}
/* the add folder button */
.addBtn {
width: 15.4vw;
background-color: rgba(0,0,0,0);
padding: .6vw;
padding-left: 1.25vw;
padding-right: 1.25vw;
border-radius: 0px 5px 5px 0px;
font-weight: 200;
cursor: pointer;
transition: .45s;
margin-left: -1vw;
font-size: 15px;
border: 3px solid #8c9ca3;
border-left: 0;
/*position: absolute;
bottom: 4vh;*/
}
/* changes bg color upon hovering over add folder button */
.addBtn:hover {
background-color: #8c9ca3;
}
.smallMenu {
position: absolute;
height: 17px;
top: 50%;
width: 17px;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 0.5vw;
border-radius: 99px;
}
.menuBtn {
position: absolute;
height: 14px;
top: 1.5px;
left: 7px;
padding: 0px;
margin: 0px;
}
JS Code:
// probably can ignore these functions; scroll down to line 45; there's a lot of code here for purposes that I haven't quite finished yet
function inLocalStorage(item) {
if(!localStorage.getItem(item)) {
return false;
} else {
return true;
}
}
function lsAdd(label,value) {
localStorage.setItem(label, value);
}
function lsGet(item) {
return localStorage.getItem(item);
}
function lsClear() {
localStorage.clear();
}
function lsRemove(item) {
localStorage.removeItem(item);
}
var el;
var mouseOver = false;
// checks if the user has visited
if (!inLocalStorage('visited')) {
alert("Don't mind this alert");
lsAdd('visited','yes');
lsAdd('folders','1');
lsAdd('js','');
} else {
// load from local storage; execute stored JS
new Function(lsGet('js'))();
// upon mouseover of folder, show mini menu icon
for (let i = 0; i < document.getElementsByClassName("folder").length; i++) {
document.getElementsByClassName("folder")[i].addEventListener("click", function() {
console.log("You have clicked.");
});
// add menu upon mouseover
document.getElementsByClassName("folder")[i].addEventListener("mouseover", function() {
mouseOver = false;
el = document.createElement("div");
// this image obviously doesn't load but that's not important; the image is an svg with three vertical dots, and the image is transparent
el.innerHTML = '<div class="smallMenu"><img src="abc.svg" class="menuBtn" style="height:14px;"></div>';
el.setAttribute("id","menu");
document.getElementsByClassName('folder')[i].appendChild(el);
el = document.getElementsByClassName('smallMenu')[0];
el.addEventListener('mouseover', function() {
mouseOver = true;
console.log(mouseOver);
});
el.addEventListener('mouseout', function() {
mouseOver = false;
console.log(mouseOver);
});
});
// remove menu upon mouse out
document.getElementsByClassName("folder")[i].addEventListener("mouseout", function() {
if (mouseOver === false) {
el = document.getElementById("menu");
el.remove();
}
});
}
}
So basically I have problem wherein I try to make animation in my scroll animation using scrollMagic..My codes are written in reactjs but I don't know why it is not working like the same in normal html javascript and css.. Here is the codes.
import React, { useEffect, useLayoutEffect } from 'react'
import img from './images/Apple-Logo.png'
import ScrollTrigger from 'gsap/ScrollTrigger'
import ScrollMagic from 'scrollmagic'
import {Power3,gsap,TweenMax, TimelineMax} from 'gsap'
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
import a1 from './images/a1.jfif'
import a2 from './images/a2.jfif'
import a3 from './images/a3.jpg'
import a4 from './images/a4.jfif'
import a5 from './images/a5.jfif'
function Home() {
useLayoutEffect(() => {
ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax)
const controller = new ScrollMagic.Controller()
const tl = new TimelineMax()
tl.from('.box-screener',1,{opacity:0,x:"45%",ease:"none"})
tl.to('.box-screener',0.5,{opacity:1,x:"70%",ease:"none"})
const scene = new ScrollMagic.Scene({
triggerElement:".falling-categories-absolute",
triggerHook:"onLeave",
duration:"100%"
})
.setPin('.falling-categories-absolute')
.setTween(tl)
.addTo(controller)
},[])
return (
<div className='home'>
<div className="falling-categories-absolute">
<div className="products-title">
<h2> Products </h2>
</div>
<div className="box-screener"></div>
</div>
<div className="LowerBound">
</div>
</div>
)
}
export default Home
And for the css it is something like this
.home {
/* position: relative; */
/* overflow: hidden; */
display: block;
height: 100%;
}
.LowerBound {
width: 100%;
height: 100vh;
background: rgba(128, 128, 128, 0.233);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.falling-categories-absolute {
/* width: 100%; */
background: orange;
height: 100vh;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.products-title {
position: absolute;
top: 30%;
left: 20%;
z-index: 1000;
font-size: 45px;
font-style: italic;
}
.box-screener {
position: absolute;
width:200px;
height:200px;
background: black;
top: 45%;
left: 45%;
transition: all 0.5s ease-in-out;
}
The wrong about here is somewhere in my useLayoutEffect() in the part of setPin wherein I don't know why when I scroll down will not follow up the scroll..but only stop's when the scrolldown is done in that one section.
To point it out this is the thing that I'm following but it doesn't work properly in react and I don't know why T_T..This is really pain in my ass I've been troubling with scrollTrigger and scrollMagic because scrollTrigger don't have a scroll that will not move the section until the scroll is done on that part..Anyway this is the code in the part of normal html
var tl = new TimelineMax({onUpdate:updatePercentage});
var tl2 = new TimelineMax();
const controller = new ScrollMagic.Controller();
tl.from('blockquote', .5, {x:200, opacity: 0});
tl.from('span', 1, { width: 0}, "=-.5");
tl.from('#office', 1, {x:-200, opacity: 0,ease: Power2.easeInOut}, "=-1");
// tl.to('span', 1, { width: "50%"}, "=-.5");
tl.from('#building', 1, {x:200, opacity: 0, ease: Power2.easeInOut}, "=-.7");
tl2.from("#box", 1, {opacity: 0, scale: 0});
tl2.to("#box", .5, {left: "20%", scale: 1.3, borderColor: 'white', borderWidth: 12, boxShadow: '1px 1px 0px 0px rgba(0,0,0,0.09)'})
const scene = new ScrollMagic.Scene({
triggerElement: ".sticky",
triggerHook: "onLeave",
duration: "100%"
})
.setPin(".sticky")
.setTween(tl)
.addTo(controller);
const pogi = []
const scene2 = new ScrollMagic.Scene({
triggerElement: "blockquote"
})
.setTween(tl2)
.addTo(controller);
function updatePercentage() {
//percent.innerHTML = (tl.progress() *100 ).toFixed();
tl.progress();
console.log(tl.progress());
}
#import url("https://fonts.googleapis.com/css?family=Arapey");
body {
margin: 0;
font-family: "Arapey";
}
body h1 {
font-size: 2em;
text-align: center;
margin-top: 30%;
}
section {
padding: 3em;
height: 100vh;
position: relative;
box-sizing: border-box;
}
section blockquote {
font-size: 2.3em;
width: 30%;
margin-top: 17%;
position: absolute;
}
section blockquote span {
width: 100%;
background: red;
display: block;
height: 5px;
margin-top: 20px;
}
section img {
position: absolute;
}
section img:nth-of-type(1) {
width: 40%;
right: 0;
top: 20%;
}
section img:nth-of-type(2) {
width: 25%;
right: 40%;
top: 29%;
margin-top: 15%;
}
section:nth-child(odd) {
background: #f1f1f1;
}
.sticky {
background: white !important;
}
#box {
width: 100px;
height: 100px;
position: absolute;
border: 5px solid lightgray;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
<title>Document</title>
</head>
<body>
<section>
<h1>Scroll down</h1>
</section>
<section class="sticky">
<blockquote>"You should totally subscribe to my channel now"<span></span></blockquote>
<img id="office" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/office1.png">
<img id="building" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/sky.jpg">
<div id="box"></div>
</section>
<section>
<h1>Scroll up</h1>
</section>
<script src="./index.js"></script>
</body>
</html>
First of all
Please be sure to use the newest GSAP version (3+) - this looks like pretty old code
Second
If possible I strongly suggest using
https://greensock.com/docs/v3/Plugins/ScrollTrigger
Which is built to work with GSAP and does the same thing ScrollMagic does - this should eliminate all legacy related issues and will make your code bulletproof
Rather, I need help in creating a modal. Use this video for reference:
https://www.youtube.com/watch?v=gLWIYk0Sd38
I followed this tutorial but I can't make my button work. I do not know what is the problem and it is driving me crazy.
enter image description here
Do I need to put his javascript code in a particular location as for electron projects? Help
Javascript
const { app, BrowserWindow, Menu} = require('electron')
const path=require('path')
const url=require('url')
function createWindow () {
// Create the browser window.
const mainWin = new BrowserWindow({
width: 800,
height: 600,
resizable:false,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
mainWin.loadFile('index.html')
// Open the DevTools.
//win.webContents.openDevTools()
var menu = Menu.buildFromTemplate([
{
label: "Menu",
submenu: [
{label: 'Exit',
accelerator: process.platform == 'darwin' ? 'Command+Q' :
'Ctrl+Q',
click(){
app.quit();
}
}
]
},
{
label: 'Classes',
submenu: [
{label: 'Add Classes'},
{label: 'Manage Classes'}
]
},
{
label: 'Reply Slips',
submenu: [
{label: 'Add Reply Slips'},
{label: 'Manage Reply Slips'}
]
}
])
Menu.setApplicationMenu(menu);
document.getElementById('addcBtn').addEventListener('click', function(){
document.querySelector(".bg-modal").style.display = "flex";
});
document.querySelector('.close').addEventListener('click', function(){
document.querySelector(".bg-modal").style.display = "none";
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reply Slip Checker</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<link rel="stylesheet" href="C:\Users\Doreen Adolfo\Desktop\Personal Coding Projects\rs-checker\assets\css\main.css">
</head>
<body>
<div id="header">REPLY SLIP CHECKER</div>
<br/><br/><br/><br/><br/><br/>
<div class="alignBtn1">
ADD CLASSES
</div>
<div class="alignBtn2">
<button id="yourcBtn">MANAGE CLASSES</button>
</div>
<!-- Modal Section-->
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<form>
<input type="text" placeholder="Name">
<input type="text" placeholder="Name">
Submit
</form>
</div>
</div>
</body>
</html>
CSS:
body, div{ margin: 0;}
#header{
width:100%;
height:50px;
background:#1167b1;
color: white;
font-weight: bold;
font-size: 500;
font-family: lucida sans;
padding: 0px 0px;
text-align: center;
}
#addcBtn{
background-color:white;
font-size: 20px;
border-radius: 12px;
border: 2px solid #008CBA;
transition-duration: 0.25s;
width:200px;
height:250px;
}
#addcBtn:hover{
background-color: #008CBA;
color: white;
}
#yourcBtn{
background-color:white;
font-size: 20px;
border-radius: 12px;
border: 2px solid #008CBA;
transition-duration: 0.25s;
width:200px;
height:250px;
}
#yourcBtn:hover{
background-color: #008CBA;
color: white;
}
.alignBtn1{
text-align:center;
margin-left:100px;
float:left;
}
.alignBtn2{
text-align:center;
margin-right:100px;
float:right;
}
.bg-modal{
width:100%;
height:100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.modal-content{
width: 400px;
height: 300px;
background-color: white;
border-radius: 4px;
position: relative;
}
input{
width:50%;
display:block;
margin: 15px auto;
}
.close{
position: absolute;
top: 0;
right: 14px;
font-size: 42px;
transform: rotate(45deg);
font-weight: bold;
}
Refer to the javascript code that the video maker created. Is it possible to even use that code for electron projects?
An example of showing a dialog to select multiple files:
const { dialog } = require('electron')
console.log(dialog.showOpenDialog(
{ properties: ['openFile', 'multiSelections'] }))
The Dialog is opened from Electron's main thread. If you want to use the dialog object from a renderer process, remember to access it using the remote:
const { dialog } = require('electron').remote
console.log(dialog)
We are using iScroll in our project, and some elements in it's scroll area have mousedown event attached.
On newest build of Google Chrome(55.0.2883.95 (64-bit)) mousedown event is never triggered and the reason is pointerdown event registered by IScroll.
Is there any way around it? I could of course use pointerdown instead of mousedown, but it is not supported in Safari, therefore I would need some dirty browser check.
(function () {
var scroll = new IScroll('#scroller');
document.getElementById('testblock').addEventListener('mousedown', mousedownEventHandler);
function mousedownEventHandler(event) {
console.info(event.type, 'triggered.');
}
})();
body {
padding: 0;
margin: 0;
}
#scroller {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#content {
height: 5000px;
background: white;
}
#testblock {
position: fixed;
top: 0;
width: 100px;
height: 100px;
line-height: 100px;
background: silver;
border: 1px solid black;
cursor: pointer;
text-align: center;
}
<script src="https://rawgit.com/cubiq/iscroll/master/build/iscroll-probe.js"></script>
<div id="scroller">
<div id="content">
<div id="testblock">Click me</div>
</div>
</div>
You need to add the click parameter to the options object.
var scroll = new IScroll('#scroller', {
click: true
});