-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpointer-04-plugin.html
169 lines (141 loc) · 4.47 KB
/
pointer-04-plugin.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
<title>Demo 4 - Using a Plugin - Strategies for Extending Vue</title>
<!-- A webfont to make the app a little prettier -->
<link href="https://fonts.googleapis.com/css?family=Muli:300,400" rel="stylesheet">
<!-- An external stylesheet -->
<link rel="stylesheet" href="pointer-style.css">
<!-- A local copy of the PointerTracker code
See: https://github.com/Rapid-Application-Development-JS/Pointer -->
<script type="text/javascript" src="pointer.min.js"></script>
<!-- A local copy of Vue (2.0.3)
See: https://github.com/vuejs/vue -->
<script type="text/javascript" src="vue.js"></script>
<!-- CHANGE
This is our pointer events plugin. -->
<script type="text/javascript" src="vue-pointer.js"></script>
</head>
<!--
The body of our app is pretty unremarkable. In the first few
examples our app will insert a single instance of our component,
and in the latter examples it will insert two, side-by-side. The
header is just a binch of links to get around our example pages.
-->
<body>
<header>
<h1>Strategies for Extending Vue</h1>
<h2>Demo 4: Using a Plugin</h2>
<nav>
<ol>
<li><a href="pointer-01-basic.html">Basic</a></li>
<li><a href="pointer-02-mixin.html">Mixin</a></li>
<li><a href="pointer-03-extension.html">Extend</a></li>
<li><a href="pointer-04-plugin.html">Plugin</a></li>
<li><a href="pointer-05-bonus.html">Bonus Demo</a></li>
<li><a href="https://benjaminlistwon.com/strategies-for-extending-vue/">Read the article</a></li>
</ol>
</nav>
</header>
<div id="app" class="row">
<div class="col">
<pointer-demo></pointer-demo>
</div>
<div class="col">
<pointer-demo></pointer-demo>
</div>
</div>
</body>
<!--
These are our templates
-->
<!-- This template represents an instance of a source and log -->
<script type="text/x-template" id="pointer-demo-template">
<div>
<pointer-canvas></pointer-canvas>
<pointer-log></pointer-log>
</div>
</script>
<!-- This template is where our events come from -->
<!--
CHANGE
With our plugin in place, we can now use our custom directive!
-->
<script type="text/x-template" id="pointer-canvas-template">
<div class="event-source" v-pointer:pointermove="handlePointerMove">
<p>Click and drag in here.</p>
</div>
</script>
<!-- This template is where our events get logged -->
<script type="text/x-template" id="pointer-log-template">
<div class="event-log">
<ul>
<li v-for="event in eventLog">{{ event }}</li>
</ul>
</div>
</script>
<!--
These are our components
-->
<script>
// CHANGE
// Now that all of our functionality has been made available as
// a global custom directive, we don't need to extend, use a mixin,
// or anything special in our component. The binding takes place
// directly on the template above.
var PointerCanvas = Vue.extend({
// This is the template reference
template: '#pointer-canvas-template',
// This pushes events to the parent's log
// See also: the pointer-demo component
methods: {
handlePointerMove: function (ev) {
this.$parent.$data.eventLog.push(ev);
}
}
});
// This is the component where we log Pointer events
var PointerLog = Vue.extend({
// This is the template reference
template: '#pointer-log-template',
// Get the list of logged events from the parent
// See also: the pointer-demo component
computed: {
eventLog: function() {
return this.$parent.$data.eventLog;
}
}
});
// This is the component where we pair a source and a log
Vue.component('pointer-demo', {
// This is the template reference
template: '#pointer-demo-template',
// One big reason we have a wrapper component (this one) is so
// the child components have access to a shared data source.
//
// If we placed it in the root Vue instance, events from any source
// would either trample each other, or all log in one long list.
//
// If we kept it in the log component, we'd have to tightly couple
// the logic of a source component with the log. That sibling-level
// communication is a bad idea.
//
// We are basically standing in for vuex here, in lieu of adding
// more dependencies to this demo
data: function() {
return {
eventLog: [],
}
},
// References to our components
components: {
'pointer-canvas': PointerCanvas,
'pointer-log': PointerLog
}
});
// Kick off the app!
var demoApp = new Vue({
el: '#app'
})
</script>
</html>