Listener onBlur works when i click on header of any tab, but event doesn't fire when I click on icon of another sidebar extension or when I close sidebar
opr.sidebarAction.onBlur.addListener(function(w) {
console.log('on blur event');
});
Seems like doubtful feature in Opera extensions API...
Listener onBlur must be on background page of the extension.
Related
I have svg icons that are conditionally rendered on vue component. The idea is to change the colour of the icon when the mouse hover over the icon, the icons are exactly the same except for colour.
I have built vue3 SPA project with cli, both svg icons are stored in assets folder of the src file.
Here is the code for conditionally rendering icons.
<div
class="icons"
v-on:mouseover="hoverMenu = true"
v-on:mouseout="hoverMenu = false"
>
<img
v-if="!hoverMenu"
title="Menu"
src="../assets/help_outline_24px.svg"
alt="icon"
/>
<img
v-else-if="hoverMenu"
title="Menu"
src="../assets/help_24px.svg"
alt="icon"
/>
</div>
Data binding
export default {
data: function () {
return {
hoverMenu: null,
}
},
}
The code runs and the icons change when hover over icons however the are two issues.
The first time user hover over the icon it takes longer to load the icon, there is a split or few seconds before the icon changes, by that time it is substituted by alt element text.
Sometimes the icons don't change when the mouse hover over icons repeatedly, e.g when mouse hover over icon it changes then it does't change back when mouse is out of icon as if the condition has not changed at all.
Please assist with the issues above, I'm still new to front-end and vue.
Thanks in advance.
I'm building a Vue.js web application. I'm using CKEditor in a form that is placed inside a modal window. By design, the user's focus is "trapped" in the modal. In CKEditor, when user clicks the "Link" icon in toolbar, the editor opens a dialog box and attaches the new DOM element to 'document.body'. With respect to the DOM, the "Link" dialog is now outside of trapped focus. The user cannot click or tab his way to the "Link" dialog input.
I dug into the ckeditor5-ui source and found relevant code in balloonpanelview.js. I've unsuccessfully tried to configure CKEditor based on https://ckeditor.com/docs/ckeditor5/latest/api/module_utils_dom_position-Options.html
In my Vue.js component, I have:
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
...
data: () => ({
editor: ClassicEditor,
editorConfig: {
toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'link'],
},
...
})
...
I want the CKEditor "Link" dialog DOM element to be attached to a DOM element id that I specify.
In Vuetify dialog component is required to disable retain-focus
<v-dialog :retain-focus="false" />
There may be much time since you opened the issue. However... This issue was happening to me too. This is happening because Bootstrap modal trap the focus in the active modal. If you're using bootstrap-vue, do this.
In your <b-modal> add the prop no-enforce-focus.
no-enforce-focus is reactive. To properly apply this workaround you can use this prop with a variable, that detects when your CKeditor have focus. If have focus, disable the enforce focus. If doesn't have, restore it. You can apply it by the following way:
<template>
<b-modal
...
:no-enforce-focus="editorFocus">
<ckeditor
...
#focus="toggleEditorFocus(true)"
#blur="toggleEditorFocus(false)"
/>
</b-modal>
</template>
<script>
export default {
...
data () {
return {
editorFocus: false
}
},
methods: {
toggleEditorFocus (val = !this.editorFocus) {
setTimeout(() => {
this.editorFocus = val
}, 10)
}
}
}
</script>
I know the setTimeout is a tricky method, but at least is working now for me.
I am creating a custom dropdown component in React Native. I want to close it contents, when user presses screen outside of the component on any other part of the application.
However, I cannot know if user pressed outside the component. Is there a global OnPress event that can accessed or some other way, kindly let me know.
Edited:
add a logic when you click dropdown it should create a transparent view covering wholescreen in a absolute position.
Do it Like this:
// inside render
<Fragment>
<Nested>
<DropDown/>
</Nested>
{isDrop &&
<View style={styles.container} // height:'100%', width:'100%', backgroundColor:transparent , position: 'absolute'
//Trigger for pressing outside DropDown
onResponderStart={() => { condition for dropdown}}
//Required to start interacting with touches
onStartShouldSetResponder={(e) => {return true}}/>}
</Fragment>
DropDown component and view with touch must be the same level
I'm trying to use a Quill.js editor inside a Vuetify v-dialog, but the toolbar dropdowns are not closed when the user clicks outside the current opened dropdown.
I made a js Fiddle:
https://jsfiddle.net/6d7bef5n/
<div id="app">
<v-app>
<quill-editor v-model="content"></quill-editor>
<v-dialog v-model="dialog">
<quill-editor v-model="contentKo"></quill-editor>
</v-dialog>
<v-btn #click.stop="dialog = !dialog">Open Quill in a Modal</v-btn>
</v-app>
</div>
Vue.use(VueQuillEditor)
Vue.use(VueQuillEditor)
new Vue({
el: "#app",
data() {
return {
content: "I'm OK",
contentKo: "I'm Wrong, Toolbar dropdowns are not closing on blur",
dialog: false
}
}
});
It seems that the v-dialog component does something wrong on the events inside his content slot, probably for the open/close behavior, but didn't found what.
Thanks
As #MarlburroW pointed out Vuetify's VDialog components stops the propagation of the click event when the user clicks inside of the dialog.
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDialog/VDialog.js#L284
In my case I had a custom directive which detects clicks outside of the target element, for example for a dropdown component. This worked, but if you used such a component inside of Vuetify's dialog the custom directive would not work, because the VDialog stopped propagation of the click event.
Vuetify has its own outside click directive which they use for menus, selects...etc. It does not suffer from this issue.
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/directives/click-outside.ts
I had a look at the differences between Vuetify's directive and my own and the reason it works is that they use capturing instead of bubbling for the event listener.
The following codepen demonstrates it:
https://codepen.io/geersch/pen/LoLgYK
onClick = function (e) { console.log('The click event bubbled up.'); };
document.body.addEventListener('click', onClick, { capture: true });
// document.body.addEventListener('click', onClick, { capture: false });
dialog = document.querySelector('#dialog');
dialog.addEventListener('click', function (e) {
e.stopPropagation();
});
So I just changed my directive to use capturing too.
.quill-editor {
user-select: auto !important;
-moz-user-select: auto !important;
-webkit-user-select: auto !important;
-ms-user-select: auto !important;
}
Try it. It works for me.
I have an issue with Bootstrap Modal. I am using Bootstrap3.x for Modal and BootstrapWizard for custom navigation wizard. So both the libraries are necessary. When I click on Modal it disappears automatically. Can anyone help me on this?
I found the solution to this problem. My initial HTML code looks like this
<button class="btn-default" data-toggle="modal" data-target="#addPostModal" data-backdrop="static" data-keyboard="false">Add Posts</button>
But I modified this to
<button class="btn-default" id="myButton">Add Posts</button>
and wrote a jQuery function to handle onclick action
$(document).ready(function()
{
$("#myButton").click(function()
{
$("#addPostModal").modal("toggle");
});
});
In brief, I removed the toggle functionality from HTML and added toggle method. We can also remove "toggle" from onclick() function, it doesn't make any difference.
$(document).ready(function()
{
$("#myButton").click(function()
{
$("#addPostModal").modal();
});
});