Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 90c39be

Browse files
paulpflugpaulpflug
committed
added scroll management
1 parent dba2898 commit 90c39be

File tree

4 files changed

+120
-88
lines changed

4 files changed

+120
-88
lines changed

‎README.md

+42-33
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
# vue-overlay
22

3-
To mask out the background when a dialog / modal or similar is opened, a overlay is needed.
3+
> To mask out the background when a dialog / modal or similar is opened, a overlay is needed.
44
55
### [Demo](https://vue-comps.github.io/vue-overlay)
66

7+
### Features
8+
- singleton & z-index management to allow stacking
9+
- background doesn't move when scroll gets disabled
10+
711
### Used in
812
- [side-nav](https://vue-comps.github.io/vue-side-nav)
913
- [modal](https://vue-comps.github.io/vue-comps-modal)
@@ -17,31 +21,44 @@ or include `build/bundle.js`.
1721

1822
## Usage
1923
```coffee
20-
# overlay is a singleton and is designed
21-
# to be used in different places simultaniously
2224
overlay = require("vue-overlay")(Vue)
2325
# or, when using bundle.js
2426
overlay = window.vueComps.overlay
27+
```
28+
For examples see [`dev/`](dev/).
29+
If you need to reliable get the `Vue` instance, see [vue-mixins/vue](https://github.com/paulpflug/vue-mixins#vue)
30+
31+
{zIndex, close} = overlay.open(options)
32+
---
33+
- `zIndex` - the z-index of the opened overlay - will be raised by 5 for each overlay
34+
- `close(callHooks=true)` - shortcut for `overlay.close(options,callHooks)` - options will be the same instance used for opening
35+
- `Options`
36+
37+
| Name | type | default | description |
38+
| ---:| --- | ---| --- |
39+
| opacity | Number | 0.5 | opacity of the overlay |
40+
| dismissable | Boolean | true | is the overlay dismissable by click or ESC? |
41+
| onBeforeOpen | Function | null | hook before open animation |
42+
| onOpened | Function | null | hook after open animation |
43+
| onBeforeClose | Function | null | hook before close animation |
44+
| onClosed | Function | null | hook after close animation |
45+
| allowScroll | Boolean | false | don't set `overflow:hidden` on body |
46+
| color | String | "black" | background-color of the overlay |
47+
48+
overlay.close(options=lastOverlay, callHooks=true)
49+
---
50+
- `options` the options object which was used to open a overlay
51+
- `callHooks` set to `false` to suppress the calls of `onBeforeClose` and `onClosed` of that overlay
2552

26-
# returns the z-index of the overlay + 1 (starts with 1001)
27-
# and a function to close this specific overlay
28-
{zIndex,close} = overlay.open(options)
29-
overlay.open() # z-index will raise by 5
30-
31-
# close hooks of the first options object will be called
32-
# and z-index will be lowered by 5
33-
overlay.close()
34-
overlay.close() # overlay really closes
35-
36-
# To close a specific overlay you can use
37-
overlay.close(options) # where options must be the same object which is used to open
38-
# or use the result from open
39-
{close} = overlay.open()
40-
close()
41-
42-
# the overlay comes without animation, but you can easily set them up,
43-
# for example with velocity.js:
44-
Velocity = require("velocity-animate")
53+
overlay.fade({el,opacity,cb})
54+
---
55+
overwrite to add a animation
56+
- `el` the `div` element of the overlay
57+
- `opacity` the target opacity of the opening/closing
58+
- `cb` a function which must be called when finished
59+
60+
example:
61+
```coffee
4562
overlay.fade = ({el,opacity,cb}) ->
4663
Velocity el, {opacity: opacity},
4764
{
@@ -52,17 +69,9 @@ overlay.fade = ({el,opacity,cb}) ->
5269
}
5370
```
5471

55-
For examples see [`dev/`](dev/).
56-
#### Options
57-
| Name | type | default | description |
58-
| ---:| --- | ---| --- |
59-
| opacity | Number | 0.5 | opacity of the overlay |
60-
| dissmissible | Boolean | true | is the overlay dissmissible by click or ESC? |
61-
| onBeforeOpen | Function | null | hook before open animation |
62-
| onOpened | Function | null | hook after open animation |
63-
| onBeforeClose | Function | null | hook before close animation |
64-
| onClosed | Function | null | hook after close animation |
65-
| allowScroll | Boolean | false | don't set `overflow:hidden` on body |
72+
73+
74+
6675

6776
# Development
6877
Clone repository

‎dev/basic.vue

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<template lang="jade">
22
.container
33
button(@click="openOverlay") Open Overlay
4-
button(@click.prevent="openSecondOverlay",v-if="firstOpened",:style="buttonStyle") Open another Overlay
4+
button(@click.prevent="openSecondOverlay",v-if="firstOpened",:style="buttonStyle") Open blue Overlay
55
button(@click.prevent="closeFirstOverlay",v-if="firstOpened && secondOpened",:style="button2Style") Close bottom Overlay first
6+
br
7+
button(@click.prevent="openScrollOverlay") Overlay with allowScroll
68
a(href="https://github.com/vue-comps/vue-overlay/blob/master/dev/basic.vue") source
9+
div(style="margin:auto;text-align:center;height:2000px") something centered (shouldn't move)
710
</template>
811

912
<script lang="coffee">
@@ -32,12 +35,15 @@ module.exports =
3235
openSecondOverlay: (cb) ->
3336
result = @overlay.open
3437
opacity:0.6
38+
color: "blue"
3539
onBeforeOpen: =>
3640
@secondOpened = true
3741
onBeforeClose: =>
3842
@secondOpened = false
3943
onOpened:cb
4044
@button2Style.zIndex = result.zIndex
45+
openScrollOverlay: ->
46+
@overlay.open allowScroll:true
4147
closeFirstOverlay: ->
4248
@result.close()
4349
compiled: ->

‎package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@
1717
"node": "*"
1818
},
1919
"dependencies": {
20-
"vue-filters": "^0.1.6",
21-
"vue-mixins": "^0.2.4"
20+
"vue-mixins": "^0.2.6"
2221
},
2322
"devDependencies": {
2423
"babel-core": "^6.7.6",

‎src/overlay-component.vue

+70-52
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// out: ..
22
<template lang="jade">
3-
div#overlay(
4-
v-bind:style="style"
5-
@click="dismiss | notPrevented | prevent"
6-
@keyup.esc="dismiss | notPrevented | prevent"
3+
div(
4+
style="opacity:0;position:fixed;top:-10px;left:0;right:0;height:120vh;willChange:opacity",
5+
:style="{zIndex:zIndex,backgroundColor:color}",
6+
@click="dismiss"
77
)
88
</template>
99

@@ -12,72 +12,90 @@ module.exports =
1212
1313
mixins:[
1414
require("vue-mixins/setCss")
15+
require("vue-mixins/onDocument")
16+
require("vue-mixins/getViewportSize")
1517
]
16-
props:
17-
"fade":
18-
type: Function
19-
default: ({el,opacity,cb}) ->
20-
@style.opacity = opacity
21-
cb()
22-
filters:
23-
notPrevented: require("vue-filters/notPrevented")
24-
prevent: require("vue-filters/prevent")
2518
26-
data: ->
27-
style:
28-
opacity: 0
29-
zIndex: 995
30-
position: "fixed"
31-
top: "-10px"
32-
left: 0
33-
right: 0
34-
height: "120vh"
35-
backgroundColor: "black"
36-
willChange: "opacity"
19+
computed:
20+
zIndex: ->
21+
if @lastItem?
22+
return @lastItem.zIndex
23+
return 995
24+
color: ->
25+
if @lastItem? and @lastItem.color
26+
return @lastItem.color
27+
return "black"
28+
opacity: ->
29+
if @lastItem?
30+
return @lastItem.opacity if @lastItem.opacity?
31+
return 0.5
32+
return 0
33+
dismissable: ->
34+
if @lastItem? and @lastItem.dismissable?
35+
return @lastItem.dismissable
36+
return true
37+
lastItem: ->
38+
if @stack.length > 0
39+
li = @stack[@stack.length-1]
40+
@updateScroll(li)
41+
@updateKeyListener(true)
42+
return li
43+
@updateScroll()
44+
@updateKeyListener()
45+
return null
3746
47+
data: ->
48+
stack: []
3849
3950
el: -> document.createElement "div"
4051
41-
compiled: ->
42-
@stack = []
43-
4452
methods:
4553
46-
dismiss: (e) -> @close() if @stack[@stack.length-1].dissmissible
54+
fade: ({el,opacity,cb}) ->
55+
@setCss(el,"opacity",opacity)
56+
cb()
4757
48-
setScroll: (options) ->
49-
if options.allowScroll
50-
@setCss(document.body,"overflow")
58+
dismiss: (e) ->
59+
unless e.defaultPrevented
60+
if @dismissable
61+
return null if e.type=="keyup" and e.which != 27
62+
@close()
63+
e.preventDefault()
64+
65+
updateKeyListener: (set) ->
66+
if set and not @removeListener
67+
@removeListener = @onDocument "keyup", @dismiss unless @removeListener
5168
else
52-
@setCss(document.body,"overflow","hidden")
69+
@removeListener?()
70+
@removeListener = null
71+
72+
73+
updateScroll: (options) ->
74+
style = {o:null,m:null}
75+
if options and not options.allowScroll
76+
return null if @scrollDisabled
77+
style.o = "hidden"
78+
style.m = @getViewportSize().width - document.documentElement.clientWidth + "px"
79+
@scrollDisabled = true
80+
else
81+
@scrollDisabled = false
82+
@setCss(document.documentElement,"overflow",style.o)
83+
@setCss(document.documentElement,"margin-right",style.m)
5384
5485
open: (options={}) ->
5586
if @stack.length == 0
5687
@$appendTo('body')
57-
@setScroll(options)
58-
options.opacity ?= 0.5
59-
options.dissmissible ?= true
60-
@stack.push options
6188
options.onBeforeOpen?()
62-
@style.zIndex += 5
63-
options.zIndex = @style.zIndex
64-
@fade el:@$el, opacity:options.opacity, cb: -> options.onOpened?()
65-
return {zIndex: @style.zIndex+1, close: (callCbs=false) => @close(options,callCbs)}
89+
options.zIndex = @zIndex + 5
90+
@stack.push options
91+
@fade el:@$el, opacity:@opacity, cb: -> options.onOpened?()
92+
return {zIndex: @zIndex+1, close: (callCbs=true) => @close(options,callCbs)}
6693
67-
close: (options=@stack[@stack.length-1],callCbs=true) ->
68-
if options? and (index = @stack.indexOf(options)) >-1
94+
close: (options=@lastItem,callCbs=true) ->
95+
if (index = @stack.indexOf(options)) >-1
6996
@stack.splice(index,1)
70-
if @stack.length == 0
71-
@setScroll(allowScroll:true)
72-
opacity = 0
73-
@style.zIndex = 995
74-
else
75-
lastItem = @stack[@stack.length-1]
76-
@setScroll(lastItem)
77-
opacity = lastItem.opacity
78-
@style.zIndex = lastItem.zIndex
7997
options.onBeforeClose?() if callCbs
80-
@fade el:@$el, opacity:opacity, cb: =>
98+
@fade el:@$el, opacity:@opacity, cb: =>
8199
options.onClosed?() if callCbs
82100
@$remove() if @stack.length == 0
83101
</script>

0 commit comments

Comments
 (0)