-
Notifications
You must be signed in to change notification settings - Fork 2
/
options.html
138 lines (126 loc) · 7.03 KB
/
options.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="dependencies/bootstrap.min.css">
</link>
</head>
<style>
/* Chrome opens the options page in a smaller window unless we specify the min-width */
@supports not (-moz-appearance: none) {
html {
min-width: 768px;
}
}
</style>
<template id="message-template">
<div class="message-template card pt-2 px-2 mb-3 bg-light">
<div class="form-row">
<div class="col">
<input type="text" class="form-control message-template-label"
placeholder="Message Label (e.g. Didn't Get Through Message, More Info, etc.)" />
</div>
<div class="col-auto">
<button type="button btn-sm align-middle" class="close" aria-label="Delete message template">
<svg width=".8em" height=".8em" viewBox="0 0 16 16" class="bi bi-trash-fill" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z" />
</svg>
</button>
</div>
</div>
<textarea class="form-control message-template-message" rows="4" placeholder="Message Contents
(for example: Hi [Their Name], this is [Your Name] from...)"></textarea>
<div class="form-group form-check form-check-inline">
<input type="checkbox" class="form-check-input message-template-result-texted" />
<label class="form-check-label">Select <code>Texted</code> result code and load next contact after
sending?
</label>
</div>
</div>
</template>
<body>
<div class="container container-md py-3">
<form id="settings">
<div class="row align-items-center mb-4">
<div class="col">
<h4>Text Message Settings</h4>
</div>
<div class="col text-right">
<a id="share-settings" class="btn btn-primary ml-auto" target="_blank">
<svg class="mr-1 mb-1" width="1em" height="1em" viewBox="0 0 16 16"
class="bi bi-box-arrow-up-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z" />
<path fill-rule="evenodd"
d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z" />
</svg>
Share Settings
</a>
</div>
</div>
<p>Create one or more message templates below to enable 2-click texting.
<br>
A button to send each message will appear on TurboVPB
on your phone.</p>
<h5 class="mt-4">Automatic Text Replacement</h5>
<p>TurboVPB will automatically replace the following keywords (including the brackets) in the message
templates with the value on the right:</p>
<table class="table">
<tbody>
<tr>
<td class="align-middle text-center"><code>[Your Name]</code></td>
<td class="align-middle text-center">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10.146 4.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 8l-2.647-2.646a.5.5 0 0 1 0-.708z" />
<path fill-rule="evenodd"
d="M2 8a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8z" />
</svg>
</td>
<td class="align-middle text-center">
<input type="text" class="form-control" id="yourName" placeholder="Your first name" />
</td>
</tr>
<tr class="align-middle text-center">
<td class="align-middle text-center"><code>[Their Name]</code></td>
<td class="align-middle text-center">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10.146 4.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 8l-2.647-2.646a.5.5 0 0 1 0-.708z" />
<path fill-rule="evenodd"
d="M2 8a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8z" />
</svg>
</td>
<td class="align-middle text-center">
<input type="text" class="form-control" placeholder="(Contact's first name)" disabled />
</td>
</tr>
</tbody>
</table>
<p>
<span class="badge badge-secondary">New in v0.9.0</span>
Fields from the <b>Additional Info</b> panel in VAN or the <b>About {{Name}}</b> sidebar in OpenVPB can
also be automatically
inserted. For example, <code>[County]</code> will be replaced with the
contact's county if that field is set to be displayed in the phone bank.
</p>
<br>
<h5>Message Templates</h5>
<div id="text-replacement-warning" class="alert alert-warning" hidden>
Note: To use TurboVPB's Automatic
Text Replacement, you need to include the field name and the brackets (for example, "Hi [Their
Name]...") so that TurboVPB knows where
to insert the appropriate values.</div>
<div id="messages"></div>
<button class="btn btn-primary" id="add-message-template">Add Another Message Template</button>
</form>
<p class="text-muted mt-5"><small>Settings are saved automatically.</small></p>
</div>
<script src="dependencies/browser-polyfill.js"></script>
<script src="options.js"></script>
</body>
</html>