Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix/232 exclude iframes inside element from detectIframe mechanism #235

Merged
merged 4 commits into from
Sep 7, 2020
Merged

Fix/232 exclude iframes inside element from detectIframe mechanism #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9c786e0
bugfix: exclude iframes inside binding element from detection
renatodeleao Sep 3, 2020
e22831a
update: arguments order (ocd ⚠️)
renatodeleao Sep 3, 2020
d2d287f
update: examples with iframe within click outside element
renatodeleao Sep 3, 2020
029d0db
update: 🌈examples for easier debugging
renatodeleao Sep 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 30 additions & 4 deletions example/src/views/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@
<p>Click Outside Lime box</p>
</div>

<div class="blue-box" v-click-outside="onBlueClick">
<p>Click Outside blue box</p>
<iframe tabindex="1" class="iframe-button-example" src="/about" />
</div>

<iframe class="iframe" src="/about" width="100%" />
</div>
</div>
Expand Down Expand Up @@ -49,20 +54,28 @@ export default {

methods: {
onYellowClick(ev) {
console.log('Clicked outside Yellow!', ev)
console.log(
'%c Clicked outside Yellow!',
'color: yellow; background: black;',
ev,
)
},

onRedClick(ev) {
console.log('Clicked outside Red!', ev)
console.log('%c Clicked outside Red!', 'color: red', ev)
},

onRedClickMiddleware(ev) {
console.log('Middleware from click outside Red!', ev)
console.log('%c Middleware from click outside Red!', 'color: red', ev)
return true
},

onLimeClick(ev) {
console.log('Clicked outside Lime!', ev)
console.log('%cClicked outside Lime!', 'color: lime', ev)
},

onBlueClick(ev) {
console.log('%c Clicked outside Blue!', 'color: blue', ev)
},
},
}
Expand All @@ -85,6 +98,19 @@ export default {
height: 50px;
}

.blue-box {
background-color: blue;
color: white;
}

.iframe-button-example {
border: 2px solid white;
border-radius: 8px;
width: 200px;
height: 50px;
overflow: hidden;
}

.iframe {
border: 1px solid lightgrey;
margin-top: 1em;
Expand Down
9 changes: 5 additions & 4 deletions src/v-click-outside.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,13 @@ function execHandler({ event, handler, middleware }) {
}
}

function onFauxIframeClick({ event, handler, middleware }) {
function onFauxIframeClick({ el, event, handler, middleware }) {
// Note: on firefox clicking on iframe triggers blur, but only on
// next event loop it becomes document.activeElement
// https://stackoverflow.com/q/2381336#comment61192398_23231136
setTimeout(() => {
if (document.activeElement.tagName === 'IFRAME') {
const { activeElement } = document
if (activeElement.tagName === 'IFRAME' && !el.contains(activeElement)) {
execHandler({ event, handler, middleware })
}
}, 0)
Expand Down Expand Up @@ -73,14 +74,14 @@ function bind(el, { value }) {
el[HANDLERS_PROPERTY] = events.map((eventName) => ({
event: eventName,
srcTarget: document.documentElement,
handler: (event) => onEvent({ event, el, handler, middleware }),
handler: (event) => onEvent({ el, event, handler, middleware }),
}))

if (detectIframe) {
const detectIframeEvent = {
event: 'blur',
srcTarget: window,
handler: (event) => onFauxIframeClick({ event, handler, middleware }),
handler: (event) => onFauxIframeClick({ el, event, handler, middleware }),
}

el[HANDLERS_PROPERTY] = [...el[HANDLERS_PROPERTY], detectIframeEvent]
Expand Down