forked from HubSpot/messenger
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
403 lines (355 loc) · 13.9 KB
/
index.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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Messenger : Alerts for the 21st century" />
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/location-sel.css">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/theme-sel.css">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/demo.css">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="build/css/messenger.css">
<link rel="stylesheet" type="text/css" media="screen" href="build/css/messenger-theme-block.css">
<link rel="stylesheet" type="text/css" media="screen" href="build/css/messenger-theme-future.css">
<link rel="stylesheet" type="text/css" media="screen" href="build/css/messenger-theme-air.css">
<link rel="stylesheet" type="text/css" media="screen" href="build/css/messenger-theme-ice.css">
<link rel="stylesheet" type="text/css" media="screen" href="lib/executr/build/css/executr.css">
<link rel="stylesheet" type="text/css" media="screen" href="lib/executr/lib/CodeMirror/codemirror.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
<script type="text/javascript" src="build/js/messenger.js"></script>
<script type="text/javascript" src="build/js/messenger-theme-future.js"></script>
<script type="text/javascript" src="javascripts/location-sel.js"></script>
<script type="text/javascript" src="javascripts/theme-sel.js"></script>
<script type="text/javascript" src="javascripts/demo.js"></script>
<script type="text/javascript" src="lib/executr/lib/CodeMirror/codemirror.js"></script>
<script type="text/javascript" src="lib/executr/lib/CodeMirror/mode/coffeescript/coffeescript.js"></script>
<script type="text/javascript" src="lib/executr/lib/CodeMirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="lib/executr/build/js/executr.js"></script>
<script type="text/javascript" src="lib/executr/lib/coffee-script.js"></script>
<script type="text/javascript">
$(function(){
$('body').executr();
});
</script>
<title>Messenger - Alerts for the 21st Century</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/HubSpot/messenger">View on GitHub</a>
<div class="social">
<iframe src="http://ghbtns.com/github-btn.html?user=HubSpot&repo=messenger&type=watch"
allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="HubSpotDev" data-count="none" data-url="http://github.hubspot.com/messenger/">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<h1 id="project_title">Messenger</h1>
<h2 id="project_tagline">Alerts for the 21st century</h2>
<section id="downloads">
<a class="zip_download_link" href="https://github.com/HubSpot/messenger/zipball/master">Download this project as a .zip file</a>
<a class="tar_download_link" href="https://github.com/HubSpot/messenger/tarball/master">Download this project as a tar.gz file</a>
</section>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<h1>HubSpot Messaging Library</h1>
<ul>
<li>Show transactional messages in your app.
<li>Wrap AJAX requests with progress, success and error messages.
<li>Add action links to your messages.
<li>4kb minified and compressed.
<li>Works in everything modern, and IE7 and above.
</ul>
<h2>Requires</h2>
<ul>
<li>jQuery</li>
<li>Plays well with, but doesn't require, Bootstrap</ul>
<h2>Including</h2>
<h3>JS</h3>
<pre><code>/build/js/messenger.min.js
/build/js/messenger-theme-future.js
</code></pre>
<h3>CSS</h3>
<pre><code>/build/css/messenger.css
/build/css/messenger-theme-future.css
</code></pre>
<p>
Also available as a <a href="https://github.com/benjis/messengerjs-rails">Rails gem</a> and on <a href="http://cdnjs.com/">cdnjs</a>.
</p>
<h2>Really Quick Usage</h2>
<pre>
<code executable>
# Replace:
$.ajax
url: "/some-url"
success: ->
# With:
Messenger().run
errorMessage: "This did not go well."
,
url: "/some-url"
success: ->
</code>
</pre>
<h2>Usage <span class="subtitle">Click Code to Edit</span></h2>
<div class='controls'>
<div>
<h4>Change Location</h4>
<div class='location-selector'></div>
</div>
<div>
<h4>Change Theme</h4>
<ul class='theme-selector'></ul>
</div>
<div>
<h4>Change Language</h4>
<ul class='selector'>
<li class="executr-switch" data-code-type="javascript"/>JavaScript</li>
<li class="executr-switch" data-code-type="coffeescript"/>CoffeeScript</li>
</ul>
</div>
<hr class="clear"></hr>
<pre><code><output></output></code></pre>
</div>
<pre>
<code executable>
Messenger().post "Your request has succeded!"
</code><code executable>
Messenger().post
message: 'There was an explosion while processing your request.'
type: 'error'
showCloseButton: true
</code><code executable>
msg = Messenger().post "My Message"
msg.update "I changed my mind, this is my message"
msg.hide()
</code><code executable>
# Want to put actions at the end of your messages?
msg = Messenger().post
message: 'Launching thermonuclear war...'
type: 'info'
actions:
cancel:
label: 'cancel launch'
action: ->
msg.update
message: 'Thermonuclear war averted'
type: 'success'
actions: false
</code><code executable>
# This guy will 500 a few times, then succeed
i = 0
Messenger().run
errorMessage: 'Error destroying alien planet'
successMessage: 'Alien planet destroyed!'
action: (opts) ->
if (++i < 3)
opts.error({status: 500, readyState: 0, responseText: 0})
else
opts.success()
</code><code executable>
# Have an error? How about auto retrys with a Gmail-style countdown
# (hidden in the future theme)?:
msg = Messenger().post
message: "I'm sorry Hal, I just can't do that."
actions:
retry:
label: 'retry now'
phrase: 'Retrying TIME'
auto: true
delay: 10
action: ->
# Do some retrying...
cancel:
action: ->
do msg.cancel
</code><code executable>
# You can bind to action events as well:
msg.on 'action:retry', ->
alert('Hey, you retried!')
</code><code executable>
# Need more control? You can bind events backbone-style based
# on the type of message.
msg.update
events:
'success click': ->
# Will fire when the user clicks the message
# in a success state.
'error click a.awesome-class': ->
# Rock on
</code><code executable>
# Need your message to hide after a while, or when the Backbone
# router changes the page?
Messenger().post
message: "Weeeeee"
hideAfter: 10
hideOnNavigate: true
</code><code executable>
# You can use the id property to ensure that only one
# instance of a message will appear on the page at a time
# (the older message will be hidden).
Messenger().post
message: "Only one at a time!"
id: "Only-one-message"
</code><code executable>
# When you add the singleton attribute, it ensures that no
# other messages with that id will ever be shown again
# (the newer message will be hidden).
Messenger().post
message: "It's just me!"
id: '4'
singleton: true
Messenger().post
message: "You'll never see me"
id: '4'
singleton: true
</code><code executable>
# Rather than hiding and showing multiple messages
# you can also maintain a single message between
# requests.
msg = Messenger().run()
Messenger().run({messageInstance: msg})
</code><code executable>
# Don't want your message hidden on a long page? (Not necessary
# if you're using the default fixed positioning)
msg = Messenger().post
message: "You'll see me!"
scrollTo: true
# Requires jQuery scrollTo plugin
</code><code executable>
msg.scrollTo() # also works
</code><code executable>
# Lazy/smart? How about messenger does it all for you? All the
# retry magic comes with.
Messenger().run
successMessage: 'Data saved.'
errorMessage: 'Error saving data'
progressMessage: 'Saving data' # Don't include messages you
# don't want to appear.
# Any standard message opts can go here
,
# All the standard jQuery ajax options here
url: '/data'
</code><code executable>
# Need to override the messages based on the response?
Messenger().run
errorMessage: 'Oops'
,
url: '/data'
error: (xhr) ->
# Whatever you return from your handlers will replace
# the default messages
if xhr?.status is 404
return "Data not found"
# Return true or undefined for your predefined message
# Return false to not show any message
return true
</code><code executable>
# Sometimes you only want to show the success message when a
# retry succeeds, not if a retry wasen't required:
Messenger().run
successMessage: 'Successfully saved.'
errorMessage: 'Error saving'
showSuccessWithoutError: false
,
url: '/data'
</code><code executable>
# You don't have to use $.ajax as your action, messenger works
# great for any async process:
Messenger().run
successMessage: 'Bomb defused successfully'
action: defuseBomb
# You can put options for defuseBomb here
# It will be passed success and error callbacks
</code><code executable>
# Need to hide all messages?
Messenger().hideAll()
</code><code executable>
# If your action responds with a promise-like thing, its
# methods will be copied onto the message:
Messenger().run({}, {url: 'a'}).fail(-> alert "Uh oh")
</code><code executable>
# Do you use Backbone? Hook all backbone calls:
Messenger().hookBackboneAjax()
# By default, there will be no error message (just background
# retries), return an error message from your backbone error handler,
# or add an errorMessage to the messenger opts to set one.
# You can override these options by passing them into
# hookBackboneAjax, or adding a {'messenger': } hash to your
# fetch call.
</code><code executable>
# You don't have to use the global messenger
$('div#message-container').messenger().post "My message"
</code><code executable>
# By default, the global messenger will create an ActionMessenger
# instance fixed to the bottom-right corner of the screen.
</code><code executable>
# You can pass an instance of messenger into globalMessenger
# to override the default position.
myAwesomeMessenger = $('.mess').messenger()
Messenger({instance: myAwesomeMessenger});
Messenger() # <-- Will return your messenger
</code><code executable>
Messenger({'parentLocations': ['.page', 'body']});
# Will try to insert the messenger into the el matching
# .page before inserting it into the page.
# This can be important if you're not using fixed positioning.
</code><code executable>
# All the options for globalMessenger and their defaults:
{
'parentLocations': ['body'],
'maxMessages': 9,
'extraClasses': 'messenger-fixed messenger-on-right messenger-on-bottom messenger-theme-future',
'instance': undefined,
'messageDefaults': {
# Default message options
}
}
</code><code executable>
# You can also set default options on the Messenger.options object.
Messenger.options = {'extraClasses': 'messenger-fixed messenger-on-left'}
</code>
</pre>
<h1>Contributing</h1>
<p>We welcome contributors!</p>
<p>
The build process requires nodejs and <a href="http://gruntjs.com/getting-started" target="_blank">grunt-cli</a>.
You can build the output files by running <code>grunt</code>.
The automated tests can be run by opening SpecRunner.html in a browser.
</p>
<p>
There is plenty to be done, pick an <a href="https://github.com/HubSpot/messenger/issues?state=open">issue</a> and start hacking!
</p>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">
Messenger maintained by <a href="https://github.com/HubSpot">HubSpot</a>
-
<a href="http://dev.hubspot.com/jobs?utm_campaign=os&utm_source=referral">We're Hiring</a>
</p>
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
<p>Documentation powered by <a href="https://github.com/Hubspot/executr">Executr</a></p>
</footer>
</div>
<!-- Start of Async HubSpot Analytics Code -->
<script type="text/javascript">
(function(d,s,i,r) {
if (d.getElementById(i)){return;}
var n=d.createElement(s),e=d.getElementsByTagName(s)[0];
n.id=i;n.src='//js.hubspot.com/analytics/'+(Math.ceil(new Date()/r)*r)+'/51294.js';
e.parentNode.insertBefore(n, e);
})(document,"script","hs-analytics",300000);
</script>
<!-- End of Async HubSpot Analytics Code -->
</body>
</html>