-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpointer-03-extension.html
182 lines (151 loc) · 4.68 KB
/
pointer-03-extension.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
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html>
<head>
<title>Demo 3 - Using extend to Inherit - 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>
</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 3: Using <code>extend</code> to Inherit</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 -->
<script type="text/x-template" id="pointer-canvas-template">
<div class="event-source" @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
// Define our pointer events "base class"
var PointerBase = Vue.extend({
// Retain an instance of PointerTracker
data: function() {
return {
pointerInstance: null
}
},
// When the component gets added to the DOM, start tracking events
mounted: function() {
this.pointerInstance = new PointerTracker(this.$el);
},
// Dismantle the PointerTracker when removed
beforeDestroy: function() {
this.pointerInstance = null;
}
});
// CHANGE
// We now extend PointerBase so we inherit its functionality
// This leaves our compnent pretty clean and free to focus on its
// own logic.
var PointerCanvas = PointerBase.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>