So when it comes to url changes everyone on Stackoverflow seems to suggest using 'onhashchange', but no one even speaks about the fact that this event is - like it name says - only triggered if you use hashes. And I don't want to use random hashes in my URL.
So I am looking for a way to watch window.location.pathname to detect any change there. But Vue seems to only be able to watch its own properties. So how do I do this? Thank you!
Could try this: (should work only on history mode, will not work on hash mode)
mouted () {
window.addEventListener(
'popstate', this.handleHistoryChange
)
},
destroyed () {
window.removeEventListener(
'popstate', this.handleHistoryChange
)
}
Related
So I have such a weird question and I don't know if this is possible, but I will give it a shot anyways.
We have implemented OneTrust, which is a third-party cookie consent vendor and it works great and all, but we have one small hiccup that we are trying to resolve.
So within the below function:
toggleVideo: function (videoWrapper, src, cover, type, element) {
var videoElement = video.buildVideo(src, type);
// We build out video-player element
videoWrapper.html(videoElement);
// We define our variables
let onetrust = window.OneTrust;
let onetrust_obj = window.ONETRUST_MODULE;
let target = videoWrapper.html(videoElement).children('iframe');
console.log(onetrust.Close());
// Now we wait and observe for a src attribute and then show the video.
onetrust_obj.src_observer(target, function() {
video.toggle_show(videoWrapper, cover);
});
},
We have an <iframe> element that when clicked play, will wait for consent to execute - The problem is that it needs to "refresh" OneTrust so that it can change the data-src to src attribute (This is all handled using OneTrust JS, so I have no control).
When I add in the console.log(onetrust.Close());, it works just as intended and resumes playing the video when consent is given, the downfall is that it outputs an error in the console. If I remove it, the videos will not play after consent is given.
I don't want to actually execute the onetrust.Close() method as it will close the banner.
OneTrust doesn't have a proper way to "Refresh" their initialization, the techs told me that this was a one-off case, where they don't even know how to handle it.
My questions:
Is there a way that I can properly call onetrust.Close() (Seems to be the only call that actually engages the video to play after) without actually executing it?
If not, is there a way that I can somehow similarly log it, but not actually log it in the console?
Thanks all!
Strange one, may be a race-condition issue so making your code run in the next procedural iteration may resolve the issue - this can be done by adding a setTimeout with no timer value.
setTimeout(() => {
onetrust_obj.src_observer(target, function() {
video.toggle_show(videoWrapper, cover);
});
});
Alternatively, it may be worth digging into the onetrust.Close() method to see if there are any public utilities that may help 'refresh' the context you are working in.
Another idea would be to see what happens after if you ran the onetrust_obj.src_observer code block again.
EDIT: I would like to be clear that I'm just trying to help resolve debugging this, without seeing a working environment it's difficult to offer suggestions 😄
I have a single page, single class Vaadin project. In this project, I might change the layout to make it seem as if a new page has been entered. But since no new link/page is approached, I cannot figure out how to allow users to "return" to the previous element.
For a bit, I thought I could change the url, and then catch whether people used the forward or backward buttons. I have found hashChange events, but I cannot make sense of it or make it work. Vaadin has a HistoryChangeEventHandler, but it does not listen for hashChanges, and as such my solution would not work.
I am coming up short with regards to solving this. I found this thread from 2019, which seems to be a solution to my issue, but I cannot make the code work. I suppose I am trying to pass a wrong element to the javaScript execution.
So, I have a simple mainview that extends a div. In this div, I have the following code:
History history = UI.getCurrent().getPage().getHistory();
TextField textField = new TextField();
add(textField);
Button button = new Button();
button.setText("New link");
button.addClickListener(e-> history.pushState(null, "#"+textField.getValue()));
add(button);
Button button1 = new Button();
button1.setText("Go back");
button1.addClickListener(e-> history.back());
add(button1);
getElement().executeJs(
"const serverCallback = element.$server.onHashChange; this.window.addEventListener('hashchange', function () {serverCallback(location.hash);}, false);"
);
#ClientCallable
public void onHashChange(String hash) {
System.out.print("test "+hash);
}
I expected that the onHashChange method would be called. But I am getting a javascript error saying: (ReferenceError) : element is not defined.
Working solution:
getElement().executeJs("const serverCallback = $0.$server.onHashChange;" +
"window.addEventListener('hashchange', function () {serverCallback(location.hash);}, false);", getElement());
My getElement() is the extended div, I guess. And here is my onHashChange method.
#ClientCallable
public void onHashChange(String location) {
System.out.println("Current location is: " + location);
}
Also, if you ever wanted to just call a java method from vaadin. You can do the following:
getElement().executeJs("$0.$server.onHashChange(\"It works\");", getElement());
Good luck! And thank you Erik for taking the time to help out.
Looking at the JavaDoc for executeJs, it says:
* Asynchronously runs the given JavaScript expression in the browser in the
* context of this element.
* ...
* This element will be available to the expression as <code>this</code>.
So try replacing element.$server with this.$server.
Does the Electron application framework have built-in text search?
The quick-start application doesn't provide any apparent search functionality (e.g. using Ctrl-F or from the menu options). I would have expected this to be a BrowserWindow option (or an option of its WebContents), but I don't see anything helpful in the docs.
I know this is an old thread, but might still be relevant for people out there.
Had the same problem, and first fixed by using electron-in-page-search, but this component doesn't work properly with Electron 2 or greater.
Then finally found electron-find resolved my problem. Using with Electron 4.
You just add the component to your project:
npm install electron-find --save
Add a global shortcut in your Electron main process to send an event to the renderer in a ctrl+f:
globalShortcut.register('CommandOrControl+F', () => {
window.webContents.send('on-find');
});
And then you can add this to your page (the renderer process)
const remote = require('electron').remote;
const FindInPage = require('electron-find').FindInPage;
let findInPage = new FindInPage(remote.getCurrentWebContents());
ipcRenderer.on('on-find', (e, args) => {
findInPage.openFindWindow()
})
Hope that helps.
Try webContents.findInPage just added in the latest version.
There is an issue with the solution Robson Hermes offered. globalShortcut is, by definition, global, so the shortcut will be detected even when the app is not focused. This will result in the Ctrl+F shortcut being "stolen" from everywhere else.
I have found no ideal solution (see this issue on the electron repository), but a hacky one can be achieved by doing what Robson said and adding
win.on('focus', () => {
globalShortcut.register('CommandOrControl+F', () => windows.main.send('on-find'))
})
win.on('blur', () => {
globalShortcut.unregister('CommandOrControl+F')
}
Note that as seen here, this is not ideal and can lead to several issues:
Other applications can get a lock on the shortcut when you lose focus, i.e. the shortcut will magically stop working when you switch back to the app later.
Some apps can appear on screen without taking focus (spotlight I believe has this behavior) and during the app's appearance the shortcuts will still be captured by your application.
There's also gonna be those weird one in a thousand situations where somehow you switch focus and the shortcut is not removed.
Instead of using global shortcuts , use Accelerators ( normal Keyboard shortcut )
{
label : 'help',
click : function(){.
electron.shell.openExternal('http://....').
},
accelerator : 'CmdOrCtrl+ Shift + H'
}
The above shown is just an example of How to use accelerator
Is it possible to change the location path in Angular.js without triggering the associated route. Perhaps something like the following (not working code):
$location.path("/booking/1234/", {silent: true})
You can set reloadOnSearch to false in your router, and you can change the "search" part of the url.
The idea is that you should design your URL scheme such that if the base url changes, it represents a different resource and should reload. If the search part changes (the part after the ?, you might just be changing a filter, or a sort order or something).
Here is the solution, compiled in angular module — https://github.com/garakh/ngSilent
just add the module and then use this way:
$ngSilentLocation.silent('/new/path/');
Yes it is possible using a workaround.
var off = $scope.$on('$stateChangeStart', function (e) {
e.preventDefault();
off();
});
$location.path("/booking/1234/");
The way it works is - it is caching the next state change event - make him not happen (by calling "preventDefault", and then calling itself to deregister this eventhandler).
Tested only on Chrome.
Saw it in this post: https://github.com/angular-ui/ui-router/issues/64
Hope it helps
I know that I can connect onClicked event like this:
myMouseAreaID.clicked.connect(someJavaScriptFunction)
But I am unable to find anything similar for events onPressed and onReleased...
Anyone can help me with this?
myMouseArea.released.connect(fun) works as expected, but the pressed signal is shadowed by a Boolean property with the same name indicating whether a button is currently pressed. Therefore it is currently impossible to connect this signal dynamically.
This is actually a known bug, see QTBUG-24477. All you can do right now is to redesign your application that way it won't depend on that particular feature.
I have found workaround in meantime:
MouseArea
{
id: ma
signal onPressedState
onPressed: onPressedState()
}
so later in JavaScript it can be used like this:
function someFunction()
{
ma.onPressedState.connect(someOtherFunction)
}
This works :)
Another option is to use the more declarative Connections type to handle the press:
Connections {
target: myMouseAreaID
onPressed: myPressedFunc()
}