Skip to content

Commit 21f1957

Browse files
bramsesbramses
committed
examples + flow
1 parent 1c4fc0e commit 21f1957

File tree

23 files changed

+363
-0
lines changed

23 files changed

+363
-0
lines changed

Diff for: ‎examples/commits/app.js

+16
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,32 @@ new Vue({
2525
},
2626

2727
filters: {
28+
/*
29+
This code is taking the first line of a string and returning it.
30+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
31+
*/
2832
truncate: function (v) {
2933
var newline = v.indexOf('\n')
3034
return newline > 0 ? v.slice(0, newline) : v
3135
},
36+
/*
37+
This code is taking the string T or Z and replacing it with a space
38+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
39+
*/
3240
formatDate: function (v) {
3341
return v.replace(/T|Z/g, ' ')
3442
}
3543
},
3644

3745
methods: {
46+
/*
47+
This code is getting the commits from the API and storing them in a variable called
48+
commits The first line of code checks to see if we are running on Phantom JS. If
49+
so it will use mocks instead of making an actual request. If not it will make a request
50+
for the data using XML Http Request. The second line sets up an anonymous function
51+
that calls another function when loaded(`onload`)
52+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
53+
*/
3854
fetchData: function () {
3955
var self = this
4056
if (navigator.userAgent.indexOf('PhantomJS') > -1) {

Diff for: ‎examples/commits/index.html

+8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
<!DOCTYPE html>
2+
<!--
3+
This code is fetching the latest commits from github and displaying them in a list
4+
The code uses Vue to create an instance of a component called commitlist This component
5+
has two properties one for the current branch name current Branch and another for
6+
the array of commit objects commits The branches property is set to an empty array
7+
initially
8+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
9+
-->
210
<html>
311
<head>
412
<title>Vue.js github commits example</title>

Diff for: ‎examples/elastic-header/index.html

+5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
<!DOCTYPE html>
2+
<!--
3+
This code is a Vue js component that uses the dynamics js library to animate the
4+
elastic header effect when dragging it up and down
5+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
6+
-->
27
<html lang="en">
38
<head>
49
<meta charset="utf-8">

Diff for: ‎examples/firebase/app.js

+22
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,22 @@ var app = new Vue({
2828
},
2929
// computed property for form validation state
3030
computed: {
31+
/*
32+
This code is checking to see if the user has entered a name and an email address.
33+
If they have, it will return true for both of these conditions.
34+
If either condition fails, then false will be returned.
35+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
36+
*/
3137
validation: function () {
3238
return {
3339
name: !!this.newUser.name.trim(),
3440
email: emailRE.test(this.newUser.email)
3541
}
3642
},
43+
/*
44+
This code is checking if all the keys in the validation object are true.
45+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
46+
*/
3747
isValid: function () {
3848
var validation = this.validation
3949
return Object.keys(validation).every(function (key) {
@@ -43,13 +53,25 @@ var app = new Vue({
4353
},
4454
// methods
4555
methods: {
56+
/*
57+
This code is pushing the new user to the database.
58+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
59+
*/
4660
addUser: function () {
4761
if (this.isValid) {
4862
usersRef.push(this.newUser)
4963
this.newUser.name = ''
5064
this.newUser.email = ''
5165
}
5266
},
67+
/*
68+
This code is removing the user from the database
69+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
70+
*/
71+
/*
72+
This code is removing the user from the database.
73+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
74+
*/
5375
removeUser: function (user) {
5476
usersRef.child(user['.key']).remove()
5577
}

Diff for: ‎examples/firebase/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
<!DOCTYPE html>
2+
<!--
3+
This code is using the Vue Fire library to connect to a Firebase database. It uses
4+
the vfor directive and an array of users as its data source. The key attribute is
5+
used for unique keys in the list which are required by Vue JS.
6+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
7+
-->
28
<html lang="en">
39
<head>
410
<title>Vue.js firebase + validation example</title>

Diff for: ‎examples/grid/grid.js

+20
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ Vue.component('demo-grid', {
77
columns: Array,
88
filterKey: String
99
},
10+
/*
11+
This code is setting up the sortOrders object.
12+
The key of each property in this object will be a column name, and the value will be 1.
13+
This code then sets the sortKey to an empty string, which means that no sorting has been done yet.
14+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
15+
*/
1016
data: function () {
1117
var sortOrders = {}
1218
this.columns.forEach(function (key) {
@@ -18,6 +24,12 @@ Vue.component('demo-grid', {
1824
}
1925
},
2026
computed: {
27+
/*
28+
This code is doing the following.
29+
It's filtering out all rows that don't contain the filterKey in any of their keys.
30+
Then it sorts them by sortKey, and then reverses the order if sortOrders[sortKey] is 1 (descending).
31+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
32+
*/
2133
filteredData: function () {
2234
var sortKey = this.sortKey
2335
var filterKey = this.filterKey && this.filterKey.toLowerCase()
@@ -41,11 +53,19 @@ Vue.component('demo-grid', {
4153
}
4254
},
4355
filters: {
56+
/*
57+
This code is taking the first character of a string and making it uppercase
58+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
59+
*/
4460
capitalize: function (str) {
4561
return str.charAt(0).toUpperCase() + str.slice(1)
4662
}
4763
},
4864
methods: {
65+
/*
66+
This code is setting the sortKey to key and then changing the value of sortOrders[key] by multiplying it by 1.
67+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
68+
*/
4969
sortBy: function (key) {
5070
this.sortKey = key
5171
this.sortOrders[key] = this.sortOrders[key] * -1

Diff for: ‎examples/grid/index.html

+8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
<!DOCTYPE html>
2+
<!--
3+
This code is a Vue.js component that uses the grid data and columns to display the table.
4+
The code also has an event listener for when the user types in their search query, which updates
5+
the filteredData array with only those entries that match the search query. The filteredData array
6+
is then used by Vue to render out each row of data from our grid data based on whether or not it matches
7+
the search query.
8+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
9+
-->
210
<html lang="en">
311
<head>
412
<meta charset="utf-8">

Diff for: ‎examples/markdown/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<!DOCTYPE html>
2+
<!--
3+
This code is using the [Marked.js library] to convert markdown into HTML, and then uses Vue to bind it to an element in the DOM.
4+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
5+
-->
26
<html lang="en">
37
<head>
48
<meta charset="utf-8">

Diff for: ‎examples/modal/index.html

+5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
<!DOCTYPE html>
2+
<!--
3+
This code is creating a modal component. The template for the modal component is in the `#modaltemplate` element.
4+
The `@close` event handler will set the showModal property to false, which closes the modal window.
5+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
6+
-->
27
<html lang="en">
38
<head>
49
<meta charset="utf-8">

Diff for: ‎examples/move-animations/index.html

+7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
<!DOCTYPE html>
2+
<!--
3+
This code is doing the following.
4+
It declares a transition group with name "fade" and tag "ul".
5+
The fade transition group will contain an item component for each element in the items array.
6+
Each item component has a prop called msg that contains the value of its corresponding index in the items array.
7+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
8+
-->
29
<html lang="en">
310
<head>
411
<meta charset="utf-8">

Diff for: ‎examples/select2/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
<!DOCTYPE html>
2+
<!--
3+
This code is creating a new Vue instance. The `el` property specifies the DOM element to mount this component on.
4+
The template contains an HTML string that will be used as the template for this component.
5+
The data object contains two properties, selected and options. The selected property holds the value of the currently selected option in our select2 control, and options holds an array of objects representing each option in our select2 control (see below).
6+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
7+
-->
28
<html lang="en">
39
<head>
410
<meta charset="utf-8">

Diff for: ‎examples/svg/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
<!DOCTYPE html>
2+
<!--
3+
This code is creating a new component called `polygraph` that will be used to create the SVG graph. The component has two properties, `stats` and `points`.
4+
The stats property contains an array of objects with label and value properties. The points property contains an array of x,y coordinates for each point on the polygon.
5+
The code then creates a template for this component using Vue's builtin template compiler (vuetemplatecompiler).
6+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
7+
-->
28
<html lang="en">
39
<head>
410
<meta charset="utf-8">

Diff for: ‎examples/svg/svg.js

+37
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,15 @@ Vue.component('polygraph', {
1414
template: '#polygraph-template',
1515
computed: {
1616
// a computed property for the polygon's points
17+
/*
18+
This code is mapping the value of each stat to a point on the graph.
19+
The x coordinate is mapped by dividing the index of that stat by the total number of stats,
20+
and multiplying it by 100%.
21+
The y coordinate is mapped by using `valueToPoint` function which takes in two parameters
22+
(the value, and its index). It returns an object with x and y coordinates.
23+
The return statement then joins those coordinates into a string separated by commas.
24+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
25+
*/
1726
points: function () {
1827
var total = this.stats.length
1928
return this.stats.map(function (stat, i) {
@@ -32,6 +41,14 @@ Vue.component('polygraph', {
3241
},
3342
template: '#axis-label-template',
3443
computed: {
44+
/*
45+
This code is converting the value of each stat to a point on the graph.
46+
The first argument is the value of that stat, which we are adding 10 to so it's not 0.
47+
The second argument is the index of that stat in our array,
48+
which starts at 0 and increments by 1 for every element in our array.
49+
This allows us to know what position this particular stat will be placed on our graph.
50+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
51+
*/
3552
point: function () {
3653
return valueToPoint(
3754
+this.stat.value + 10,
@@ -45,6 +62,14 @@ Vue.component('polygraph', {
4562
})
4663

4764
// math helper...
65+
/*
66+
This code is converting the value of each data point to a coordinate on the graph.
67+
The x and y coordinates are calculated using trigonometry,
68+
which means that they're based off of an angle.
69+
The total number of points in our dataset is stored in `total`.
70+
The index (`index`) represents the position of each data point within our array.
71+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
72+
*/
4873
function valueToPoint (value, index, total) {
4974
var x = 0
5075
var y = -value * 0.8
@@ -67,6 +92,12 @@ new Vue({
6792
stats: stats
6893
},
6994
methods: {
95+
/*
96+
This code is adding a new object to the stats array.
97+
The label property of this object will be set to the value of the newLabel variable,
98+
and its value property will be set to 100.
99+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
100+
*/
70101
add: function (e) {
71102
e.preventDefault()
72103
if (!this.newLabel) return
@@ -76,6 +107,12 @@ new Vue({
76107
})
77108
this.newLabel = ''
78109
},
110+
/*
111+
This code is removing the stat from the array.
112+
If there are more than 3 stats, it will remove one of them.
113+
If there are less than 3 stats, it will alert that you can't delete any more.
114+
- generated by stenography autopilot [ 🚗👩‍✈️ ]
115+
*/
79116
remove: function (stat) {
80117
if (this.stats.length > 3) {
81118
this.stats.splice(this.stats.indexOf(stat), 1)

0 commit comments

Comments
 (0)