Skip to content

Commit e570c5e

Browse files
sschandisschandi
committed
Doc demo work + overlay no longer transitions
1 parent 48cb890 commit e570c5e

File tree

5 files changed

+266
-6
lines changed

5 files changed

+266
-6
lines changed

‎docs/.vuepress/components/Demo.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div>
3+
<ClientOnly>
4+
<h1>Testing custom component</h1>
5+
<p page-guide="hello" page-guide-placement="bottom">{{ msg }}</p>
6+
<button @click="showGuide = !showGuide">Show Guide</button>
7+
<PageGuide v-model="showGuide"/>
8+
</ClientOnly>
9+
</div>
10+
</template>
11+
12+
<script>
13+
// Do to directives not working well with VuePress 0.x, This Demo is not
14+
// using the v-page-guide directive/plugin and will just manually import
15+
// and assign the attributes for the same effect
16+
import Popper from 'popper.js'
17+
import PageGuide from './VPageGuide'
18+
19+
export default {
20+
components: {
21+
PageGuide,
22+
},
23+
data() {
24+
return {
25+
msg: 'Wow Message',
26+
showGuide: false,
27+
}
28+
},
29+
}
30+
</script>
31+
32+
<style>
33+
34+
</style>

‎docs/.vuepress/components/VPageGuide.vue

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<template>
2+
<div class="v-page-guide">
3+
<div
4+
v-if="value"
5+
class="v-page-guide__overlay"
6+
:style="{ backgroundColor: overlayColor }"
7+
@click="$emit('input', false)"
8+
/>
9+
<transition :name="transitionClass">
10+
<div v-show="value">
11+
<div
12+
v-for="(item, index) in elements"
13+
:ref="`vpageguide${item.id}`"
14+
:key="index"
15+
:class="guideClass"
16+
>
17+
<slot name="content" :content="item">
18+
<p
19+
:style="{ color: textColor }"
20+
class="v-page-guide__text"
21+
>
22+
{{ item.text }}
23+
</p>
24+
</slot>
25+
</div>
26+
</div>
27+
</transition>
28+
</div>
29+
</template>
30+
31+
<script>
32+
import Popper from 'popper.js'
33+
34+
export default {
35+
props: {
36+
value: { type: Boolean, default: null },
37+
guideClass: { type: String, default: 'v-page-guide__tooltip' },
38+
transitionClass: { type: String, default: 'v-page-guide__fade' },
39+
overlayColor: { type: String, default: 'rgba(0,0,0,0.4)' },
40+
textColor: { type: String, default: '#2c3e50'},
41+
elementBackgroundColor: { type: String, default: '' },
42+
elementDisplay: {
43+
type: Object,
44+
default: () => {
45+
return {}
46+
}
47+
}
48+
},
49+
data() {
50+
return {
51+
elements: [],
52+
}
53+
},
54+
watch: {
55+
value() {
56+
// Allow refs population
57+
setTimeout(() => {
58+
this.setUpElements()
59+
}, 1)
60+
}
61+
},
62+
mounted() {
63+
this.setUpElements()
64+
},
65+
methods: {
66+
getText(item) {
67+
return item.getAttribute('page-guide')
68+
},
69+
setUpElements() {
70+
this.elements = []
71+
const elms = document.querySelectorAll('[page-guide]')
72+
let id = 0
73+
elms.forEach(el => {
74+
this.elements.push({
75+
el: el,
76+
id: id,
77+
text: el.getAttribute('page-guide'),
78+
popper: null,
79+
placement: el.getAttribute('page-guide-placement') || 'auto'
80+
})
81+
id++
82+
})
83+
// Allow refs population
84+
setTimeout(() => {
85+
this.setGuides()
86+
}, 1)
87+
},
88+
setGuides() {
89+
this.elements.forEach(element => {
90+
if (this.value) {
91+
const elPosition = this.getPropValue(element.el, 'position')
92+
if (elPosition !== 'absolute' && elPosition !== 'relative' && elPosition !== 'fixed') {
93+
element.el.style.position = 'relative'
94+
}
95+
element.el.style.zIndex = '100'
96+
for (let property in this.elementDisplay) {
97+
element.el.style[property] = this.elementDisplay[property]
98+
}
99+
element.popper = new Popper(
100+
element.el,
101+
this.$refs[`vpageguide${element.id}`][0],
102+
{ placement: element.placement })
103+
} else {
104+
// Reset el properties
105+
element.el.style.position = ''
106+
element.el.style.zIndex = ''
107+
for (let property in this.elementDisplay) {
108+
element.el.style[property] = ''
109+
}
110+
}
111+
})
112+
},
113+
/**
114+
* Get an element CSS property on the page
115+
* Thanks to JavaScript Kit: http://www.javascriptkit.com/dhtmltutors/dhtmlcascade4.shtml
116+
* and intro.js https://github.com/usablica/intro.js/ where I found it
117+
*/
118+
getPropValue(element, propName) {
119+
var propValue = ''
120+
if (element.currentStyle) { //IE
121+
propValue = element.currentStyle[propName]
122+
} else if (document.defaultView && document.defaultView.getComputedStyle) { //Others
123+
propValue = document.defaultView.getComputedStyle(element, null).getPropertyValue(propName)
124+
}
125+
126+
//Prevent exception in IE
127+
if (propValue && propValue.toLowerCase) {
128+
return propValue.toLowerCase()
129+
} else {
130+
return propValue;
131+
}
132+
}
133+
}
134+
}
135+
</script>
136+
137+
<style>
138+
.v-page-guide__overlay {
139+
position: fixed;
140+
top: 0;
141+
left: 0;
142+
width: 100%;
143+
height: 100%;
144+
z-index: 99;
145+
}
146+
.v-page-guide__tooltip {
147+
position: relative;
148+
background-color: #fff;
149+
border-radius: 3px;
150+
margin: 15px;
151+
padding: 10px;
152+
z-index: 100;
153+
-webkit-filter: drop-shadow(0 10px 20px rgba(0,0,0,0.19)) drop-shadow( 0 6px 6px rgba(0,0,0,0.23));
154+
filter: drop-shadow(0 10px 20px rgba(0,0,0,0.19)) drop-shadow( 0 6px 6px rgba(0,0,0,0.23));
155+
}
156+
.v-page-guide__tooltip[x-placement^="bottom"]:after{
157+
bottom: 100%;
158+
left: 50%;
159+
border: solid transparent;
160+
content: " ";
161+
height: 0;
162+
width: 0;
163+
position: absolute;
164+
pointer-events: none;
165+
border-bottom-color: #fff;
166+
border-width: 10px;
167+
margin-left: -10px;
168+
}
169+
.v-page-guide__tooltip[x-placement^="top"]:after{
170+
top: 100%;
171+
left: 50%;
172+
border: solid transparent;
173+
content: " ";
174+
height: 0;
175+
width: 0;
176+
position: absolute;
177+
pointer-events: none;
178+
border-top-color: #fff;
179+
border-width: 10px;
180+
margin-left: -10px;
181+
}
182+
.v-page-guide__tooltip[x-placement^="left"]:after{
183+
left: 100%;
184+
top: 50%;
185+
border: solid transparent;
186+
content: " ";
187+
height: 0;
188+
width: 0;
189+
position: absolute;
190+
pointer-events: none;
191+
border-left-color: #fff;
192+
border-width: 10px;
193+
margin-top: -10px;
194+
}
195+
.v-page-guide__tooltip[x-placement^="right"]:after{
196+
right: 100%;
197+
top: 50%;
198+
border: solid transparent;
199+
content: " ";
200+
height: 0;
201+
width: 0;
202+
position: absolute;
203+
pointer-events: none;
204+
border-right-color: #fff;
205+
border-width: 10px;
206+
margin-top: -10px;
207+
}
208+
.v-page-guide__text {
209+
margin: 0;
210+
}
211+
.v-page-guide__fade-enter-active, .v-page-guide__fade-leave-active {
212+
transition: opacity 0.10s ease-in-out;
213+
}
214+
.v-page-guide__fade-enter, .v-page-guide__fade-leave-to {
215+
opacity: 0;
216+
}
217+
</style>

‎docs/.vuepress/config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ module.exports = {
33
description: 'Simple page guide plugin for Vue projects',
44
base: '/vue-page-guide/',
55
themeConfig: {
6+
nav: [
7+
{ text: 'Documentation', link: '/guide/' },
8+
{ text: 'Demo', link: '/demo/'},
9+
{ text: 'Github', link: 'https://github.com/sschandi/vue-page-guide' },
10+
],
611
sidebar: {
712
'/guide/': [
813
{

‎docs/demo/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
layout: Demo
3+
---

‎src/components/VPageGuide.vue

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<template>
22
<div class="v-page-guide">
3+
<div
4+
v-if="value"
5+
class="v-page-guide__overlay"
6+
:style="{ backgroundColor: overlayColor }"
7+
@click="$emit('input', false)"
8+
/>
39
<transition :name="transitionClass">
410
<div v-show="value">
5-
<div
6-
class="v-page-guide__overlay"
7-
:style="{ backgroundColor: overlayColor }"
8-
@click="$emit('input', false)"
9-
/>
1011
<div
1112
v-for="(item, index) in elements"
1213
:ref="`vpageguide${item.id}`"
@@ -208,7 +209,7 @@ export default {
208209
margin: 0;
209210
}
210211
.v-page-guide__fade-enter-active, .v-page-guide__fade-leave-active {
211-
transition: opacity 0.25s ease-out;
212+
transition: opacity 0.10s ease-out;
212213
}
213214
.v-page-guide__fade-enter, .v-page-guide__fade-leave-to {
214215
opacity: 0;

0 commit comments

Comments
 (0)