When using the following code:
mainWindow.loadURL(`http://www.google.com/`);
I am not able to make a custom titlebar with css/html as i am not using an index.html as i would be able to if i was using this code:
loaderWindow.loadURL(`file:///${__dirname}/loader.html`);
Ive tried custom npm packages like electron-titlebar-windows & custom-electron-titlebar. Nothing seems to work when im displaying an external page from loadURL.
Here is my current implementation of custom-electron-titlebar, in the renderer process:
let MyTitleBar = new customTitlebar.Titlebar({
backgroundColor: customTitlebar.Color.fromHex('#03a9f4')
});
MyTitleBar.updateTitle('Test Title');
You should be able to use setTitle Documentation
mainWindow.webContents.on('did-finish-load', () => {
mainWindow.setTitle('Test Title');
});
Related
I'm using JS classes in Cordova application like:
`
class CustomerController {
constructor() {
this.cs = new CustomerServices();
this.customerModelObj = new CustomerModel();
}
}
Then, I called the customerController.js as <script src="customerController.js"></script> in myindex.html`. Then I instantiated the class
`try{
var customerObj = new CustomerController()
}catch(error){
alert(error);
}`
I'm getting an error which is CustomerController is undefined when I build and run the android app.
What I have tried also, I used the crosswalk plugin to replace the original webview as I read it's by chromium and supporting new JS features with no luck.
I have upgraded Cordova to the latest version, created a new project, migrated my project files to the new project and installed ionic-webview plugin. Worked like a charm!
You might face some UI issues and need to put some efforts on it.
The following service will show an error. missing using reference
services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName)
.AddChakraCore();
Install the following NuGet Packages
JavaScriptEngineSwitcher.ChakraCore
JavaScriptEngineSwitcher.Extensions.MsDependencyInjection
JavaScriptEngineSwitcher.Core
Then attach the following in starup.cs
using JavaScriptEngineSwitcher.ChakraCore;
using JavaScriptEngineSwitcher.Core;
using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;
I'm trying to get Stripe working with my Vue.js 2 application. For PCI-DSS reasons, Stripe requires that their Javascript is always loaded from js.stripe.com. I've followed the instructions in:
How to add external JS scripts to VueJS Components
How to include a CDN to VueJS CLI without NPM or Webpack?
but I get a 'Stripe' is not defined error when I try to use the library. These solutions seemed to be aimed at merely getting a <script> tag into the output HTML (e.g. for analytics), not actually consuming the functions and objects in that script.
Here's what my component Javascript looks like:
<script>
export default {
name: "PaymentPage",
mounted() {
let stripeScript = document.createElement('script');
stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
document.head.appendChild(stripeScript);
let s = Stripe('pk_test_Fooo');
console.log(s);
}
}
</script>
I also tried adding the script tag to my public/index.html file instead, but I get the same outcome. This would probably be my preferred route, since Stripe encourages developers to import their script on all pages on the site.
<!DOCTYPE html>
<html lang="en">
<head>
// ...
<script src="https://js.stripe.com/v3/"></script>
</head>
How can I pull a script from an external CDN and use it within my component's Javascript?
I'm aware of some libraries to integrate Vue.js with Stripe (e.g. matfish2/vue-stripe and jofftiquez/vue-stripe-checkout), but the former doesn't import properly for me (I'm hitting issue #24) and the latter is built against the older Stripe API and the new version is still in beta.
You aren't giving the script time to load before checking if Stripe is there. What you need is something like this:
<script>
export default {
name: "PaymentPage",
mounted() {
let stripeScript = document.createElement('script');
stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
stripeScript.onload = () => {
let s = Stripe('pk_test_Fooo');
console.log(s);
};
document.head.appendChild(stripeScript);
}
}
</script>
Thanks to yuriy636's comment, I realised that errors were only from the linter, which presumably can't statically figure out what I'm up to.
I opted to put the script into index.html, then ensured I squashed linter errors with:
// eslint-disable-next-line no-undef
let s = Stripe('pk_test_Fooo');
In my case, I still had errors calling functions of the specific script. So it was required to specify the ¨window¨ scope. Also, if you need to access any Vue element inside the ¨onload¨function, you need a new variable for the ¨this¨ instance.
<script>
export default {
name: "PaymentPage",
mounted() {
let stripeScript = document.createElement('script');
// new variable for Vue elements.
let self = this;
stripeScript.onload = () => {
// call a script function using 'window' scope.
window.Stripe('pk_test_Fooo');
// call other Vue elements
self.otherVueMethod();
};
stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
document.head.appendChild(stripeScript);
}
}
I worked with this on Vue 2.6.
Just install the npm package npm install #stripe/stripe-js and use it like a regular import
import { loadStripe } from "#stripe/stripe-js";
export default {
async mounted() {
// init stripe
const stripe = await loadStripe('your_stripe_key_here');
this.stripe = stripe; // store the stripe instance
// access the stripe instance in your methods or where you want to use them
},
}
It's working as of 6th Jan 2022.
I'm trying to do a very simple app just to test the Uppy file uploader. I've followed the Uppy's documentation, but it just worked with the library links (CDN).
I've already tried npm install #uppy/core (and the same command for the additional plugins). I've already tried to put the code inside my coffee file (I'm using ruby on rails). And other things too, but no results.
Here's my code:
import '#uppy/core/dist/style.css'
import '#uppy/dashboard/dist/style.css'
Uppy = require('uppy/lib/core')
Dashboard = require('uppy/lib/plugins/Dashboard')
uppy = Uppy({ autoProceed: false })
uppy.use(Dashboard, { target: '#drag-drop-area', inline: true })
This is actually throwing no errors, just doesn't appear on the screen.
I just found the answer. It happens that you actually need to use a bundler in order to make the 'require' works in the browser. This is not explicit in uppy's documentation, but I guess I should already know it. Thanks!
In my case I had to add the new keyword when initializing Uppy.
This is from the documentation .
So instead uppy = Uppy({ autoProceed: false }) it should be const uppy = new Uppy({autoProceed: false})
Hope that helps.
P.s I think that is for the new versions of Uppy.
So I've been learning react, and wanted to make a basic firepad instance. My current setup is having one container div in my index.html, and having all of my react components rendering through that div. My current attempts and the code I'm showing with this have been in an environment with gulp and browserify, but I'm also playing around with ES6 and webpack. So I'm pretty flexible about getting this working as I learn. Here's the code:
"use strict"
var React = require('react')
, Firebase = require('firebase')
, fbRoot = 'myURL'
, CodeMirror = require('codemirror')
, Firepad = require('firepad')
, firepadRef = new Firebase(fbRoot + 'session/')
, myCodeMirror = CodeMirror(document.getElementById('firepad'), {lineWrapping: true})
, myFirePad = Firepad.fromCodeMirror(firepadRef, myCodeMirror, { richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!'});
var WritePage = React.createClass({
render: function(){
return (
<div>
<div id="firepad"></div>
</div>
);
}
});
module.exports = WritePage;
The first error I was getting was that it couldn't find the codemirror.js file. Although CodeMirror was being correctly defined in Chrome's dev tools, I moved that from requiring the npm package to just linking the 2 needed codemirror files to my html. It then gave me an error about not being able to take .replaceChild of undefined. I then tried moving all of the dependency files over to my index.html, but still had the same .replaceChild error. Anyone have any experience with react and firepad? I read in the reactfire docs that it's one way binding from firebase to my site, which for my case making a read-only firepad would be fine. Like I said, I'm flexible all of this stuff is new to me.
From the link that Michael provided.
The problem is that you are trying to reference a DOM element before React has rendered your component.
, myCodeMirror = CodeMirror(document.getElementById('firepad'),{lineWrapping: true})
, myFirePad = Firepad.fromCodeMirror(firepadRef, myCodeMirror, {richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!'});
By moving this code into componentDidMount(), it runs after the CodeMirror DOM element has been constructed and you'll be able to reference the DOM node. You will also probably find it easier to use the React ref attribute instead of document.getElementById().
Use these npm packages - brace, react-ace, firebase, firepad.
Since firepad needs aceto be present globally, assign brace to global var
like(not the best way, but works) before importing firepad
import firebase from 'firebase/app';
import 'firebase/database';
import brace from 'brace';
global.ace = brace;
global.ace.require = global.ace.acequire;
import Firepad from 'firepad';
Use ref to get instance of ReactAce and initialize it in componentDidMount using:
new Firepad.fromACE(this.firepadRef, this.aceInstance.editor, options);
Similarly for CodeMirror editor.
Hoping, this would be of some help.