first commit
This commit is contained in:
Senad Uka
440
public/bower_components/messenger/docs/welcome/index.html
vendored
Executable file
440
public/bower_components/messenger/docs/welcome/index.html
vendored
Executable file
@@ -0,0 +1,440 @@
|
||||
<!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="../../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="../../build/css/messenger-theme-flat.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="../../build/js/messenger-theme-flat.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>Demo</h2>
|
||||
|
||||
<style>
|
||||
.iframe-demo {
|
||||
height: 240px;
|
||||
width: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: 5px solid #f5f5f5;
|
||||
border-top-width: 40px;
|
||||
-webkit-box-shadow: 0 0 0 1px #ccc, 0 0 10px rgba(0, 0, 0 ,.1);
|
||||
-moz-box-shadow: 0 0 0 1px #ccc, 0 0 10px rgba(0, 0, 0 ,.1);
|
||||
box-shadow: 0 0 0 1px #ccc, 0 0 10px rgba(0, 0, 0 ,.1);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
<iframe class="iframe-demo" src="iframe-demo.html"></iframe>
|
||||
|
||||
<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
|
||||
hideAfter: 10,
|
||||
scroll: true,
|
||||
closeButtonText: "×",
|
||||
escapeText: false
|
||||
}
|
||||
}
|
||||
</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 -->
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-45159009-1', 'hubspot.com');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user