vex-js
Version:
Beautiful, functional dialogs in vanilla JavaScript
545 lines (499 loc) • 22.3 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>vex – Beautiful, functional, modal dialogs in Javascript</title>
<meta name="description" content="vex is a Javascript and CSS library for creating beautiful and functional modal dialogs. It is free and open source and was developed by HubSpot developers Adam Schwartz (@adamfschwartz) and Zack Bloom (@zackbloom).">
<link rel="icon" href="http://static.hubspot.com/favicon.ico">
<script type="text/javascript" src="//use.typekit.net/jbn8qxr.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/vex/dist/js/vex.combined.js"></script>
<link href="/vex/dist/css/vex.css" rel="stylesheet" />
<link href="/vex/dist/css/vex-theme-default.css" rel="stylesheet" />
<link href="/vex/dist/css/vex-theme-os.css" rel="stylesheet" />
<link href="/vex/dist/css/vex-theme-plain.css" rel="stylesheet" />
<link href="/vex/dist/css/vex-theme-flat-attack.css" rel="stylesheet" />
<link href="/vex/dist/css/vex-theme-wireframe.css" rel="stylesheet" />
</head>
<body>
<style>
html, body {
overflow: hidden;
margin: 0;
}
body.demo-start .page, body.page-intro .page {
opacity: 0;
z-index: 0;
}
.page {
color: #000;
font-family: "proxima-nova", "Helvetica Neue", sans-serif;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
text-align: center;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
width: 40em;
max-width: 100%;
height: 36em;
z-index: 50;
}
.page h1 {
font-size: 110px;
font-weight: 100;
margin: 40px 0;
}
.page h2 {
font-size: 2.5em;
font-weight: 100;
margin: 1em 0;
}
.page p {
margin: 1em 0;
}
.page a {
display: inline-block;
border: 2px solid #000;
color: #000;
padding: 1em 1.25em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 3px;
text-decoration: none;
cursor: pointer;
width: 150px;
line-height: 1.3em;
}
.page a.demo-link {
margin-left: 20px;
border-color: transparent;
background: #000;
color: #fff;
font-weight: 700;
}
.stack {
color: #000;
font-family: "proxima-nova", "Helvetica Neue", sans-serif;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
text-align: center;
-webkit-perspective: 700px;
-webkit-perspective-origin: 320px 700px;
margin: 0 auto;
height: 850px;
width: 640px;
max-width: 100%;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 9999;
pointer-events: none;
}
@-moz-document url-prefix() {
.stack {
height: 640px;
}
}
.vex.vex-theme-flat-attack.vex-theme-flat-attack-demo {
overflow: hidden;
}
.vex.vex-theme-flat-attack.vex-theme-flat-attack-demo .vex-content {
font-family: "proxima-nova", "Helvetica Neue", sans-serif;
font-weight: 400;
}
.vex.vex-theme-flat-attack.vex-theme-flat-attack-demo .vex-dialog-form .vex-dialog-buttons {
padding-top: 1em;
margin-bottom: -2em;
margin-left: -2em;
margin-right: -1em;
}
.vex.vex-theme-flat-attack.vex-theme-flat-attack-demo .vex-content h1 {
font-weight: 100;
font-size: 60px;
line-height: 1.2em;
margin: 0;
}
.vex.vex-theme-flat-attack.vex-theme-flat-attack-demo .vex-content h2 {
font-weight: 100;
font-size: 40px;
line-height: 1.2em;
margin: 0;
}
.vex.vex-theme-flat-attack.vex-theme-flat-attack-demo .vex-content h2 u {
text-decoration: none;
font-weight: 300;
}
.vex.vex-theme-flat-attack.vex-theme-flat-attack-demo .vex-dialog-form .vex-dialog-buttons .vex-dialog-button {
font-family: "proxima-nova", "Helvetica Neue", sans-serif;
font-size: 2em;
font-weight: 300;
}
.vex.vex-theme-stack-demo {
overflow: hidden;
}
.vex.vex-theme-stack-demo.vex-theme-os .vex-dialog-message {
padding: 1em;
}
.vex.vex-theme-stack-demo.vex-theme-wireframe .vex-overlay, .vex.vex-theme-stack-demo.vex-theme-os .vex-overlay {
display: none;
}
.vex.vex-theme-stack-demo.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-overlay {
display: block;
background: #34b989;
top: 80px;
bottom: 270px;
}
.vex.vex-theme-stack-demo .vex-content {
font-family: "proxima-nova", "Helvetica Neue", sans-serif;
font-weight: 400;
width: 600px;
}
.vex.vex-theme-stack-demo .vex-dialog-message {
padding-top: 1em;
text-align: left;
height: 320px;
}
.vex.vex-theme-stack-demo .vex-dialog-message h1 {
line-height: 1.3em;
}
.vex.vex-theme-stack-demo.vex-closing {
-webkit-transform: translate3d(0px, 200px, 200px);
}
.stack > .vex {
pointer-events: all;
-webkit-transition: -webkit-transform 0.7s;
}
.stack > .v0 { -webkit-transform: translate3d(0px, 0px, 0px); }
.stack > .v1 { -webkit-transform: translate3d(0px, -200px, -200px); }
.stack > .v2 { -webkit-transform: translate3d(0px, -400px, -400px); }
.stack > .v3 { -webkit-transform: translate3d(0px, -600px, -600px); }
.stack > .v4 { -webkit-transform: translate3d(0px, -800px, -800px); }
@media (max-width: 568px) {
.stack {
display: none;
}
body.demo-start .page, body.page-intro .page {
opacity: 1;
}
.page h2 {
font-size: 20px;
}
.page a {
width: 100px;
font-size: 10px;
}
.page h1 {
padding-top: .5em;
}
.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons .vex-dialog-button:focus {
animation: none;
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
}
}
.vex.example {
z-index: 9999;
}
.examples a {
background: #3288e6;
color: #fff;
padding: 8px 18px 6px;
cursor: pointer;
margin: 0 20px 20px 0;
border-radius: 3px;
display: inline-block;
}
.themes a {
background: #34b989;
color: #fff;
padding: 8px 18px 6px;
cursor: pointer;
margin: 0 20px 20px 0;
display: inline-block;
}
.themes a.selected {
background: #2B755B;
}
.button {
text-decoration: none;
background: #000;
color: #fff;
padding: 8px 18px 6px;
cursor: pointer;
margin: 0 20px 20px 0;
display: inline-block;
}
</style>
<script>
var demo = {};
demo.className = 'vex-theme-flat-attack vex-theme-flat-attack-demo';
vex.defaultOptions.className = 'vex-theme-flat-attack';
vex.dialog.defaultOptions.showCloseButton = true;
demo.loadInitialDialogs = function(){
$('body').addClass('page-intro');
demo.initialDialogsClassName = 'vex-theme-wireframe vex-theme-stack-demo'
for (var i = 4; i > -1; i--) {
vex.dialog.alert({
appendLocation: '.stack',
unsafeMessage: $('.stack-templates > div:nth-child(' + (i + 1) + ')').html(),
className: demo.initialDialogsClassName,
buttons: [
$.extend({}, vex.dialog.buttons.YES, { text: '►' })
],
callback: function(value) {
setTimeout(function(){
demo.advanceDemoDialogs();
}, 0);
}
});
}
demo.advanceDemoDialogs();
};
demo.advanceDemoDialogs = function() {
var $remaining = $('.stack > .vex:not(".vex-closing")');
$('.stack').show();
$.each($remaining.removeClass('v0 v1 v2 v3 v4').toArray().reverse(), function(i, item){
$(item).addClass('v' + i);
});
$('.stack > .v0:not(".vex-closing") button[type="submit"]').focus();
if ($remaining.length === 3) {
$('.vex:not(".vex-closing")').removeClass('vex-theme-wireframe').addClass('vex-theme-os');
var examples = {
alert: function() {
vex.dialog.alert({ className: 'vex-theme-os example', message: 'This is an alert.' });
},
confirm: function() {
vex.dialog.confirm({ className: 'vex-theme-os example', message: 'Confirm this for me.', callback: function(){} });
},
prompt: function() {
vex.dialog.prompt({ className: 'vex-theme-os example', message: 'Prompt:', callback: function(){} });
},
login: function() {
vex.dialog.open({
className: 'vex-theme-os example',
message: 'Enter your username and password:',
input: '' +
'<input name="username" type="text" placeholder="Username" required />' +
'<input name="password" type="password" placeholder="Password" required />' +
'',
buttons: [
$.extend({}, vex.dialog.buttons.YES, { text: 'Login' }),
$.extend({}, vex.dialog.buttons.NO, { text: 'Back' })
],
callback: function (data) {
if (console && console.log) {
console.log('Username: ' + data.username + ', Password: ' + data.password);
}
}
});
}
};
$('.vex:not(".vex-closing")').find('[data-example]').each(function(){
$(this).click(function(){
examples[$(this).data('example')]();
});
});
}
if ($remaining.length === 2) {
$('.vex:not(".vex-closing")').removeClass('vex-theme-os').addClass('vex-theme-wireframe');
$('.vex.v0:not(".vex-closing")').removeClass('vex-theme-wireframe').addClass('vex-theme-flat-attack vex-theme-flat-attack-green');
}
if ($remaining.length === 0) {
$('body').removeClass('page-intro');
setTimeout(function(){
$('.stack').hide();
}, 600);
}
}
</script>
<div class="page">
<h1>vex</h1>
<h2>Dialogs for the 21st century.</h2>
<p>
<a href="http://github.com/hubspot/vex">★ On Github</a>
<a class="demo-link">Demo</a>
</p>
</div>
<div class="stack-templates" style="display: none">
<div>
<h1>Tired of having no control over your dialogs?</h1>
<div class="reveal">
<p>With vex, you can customize everything:</p>
<ul>
<li>Styling of all UI elements</li>
<li>Themes</li>
<li>Behaviors and timing</li>
<li>Animations and effects</li>
</ul>
<p>All options can be configured for all dialogs<br/>or on a per-dialog basis.</p>
</div>
</div>
<div>
<h1>When opening a vex, you can assign your own class names to everything.</h1>
<div class="reveal">
<p>This dialog is using the "Wireframe" theme by simply passing the option <code>cssClass: "vex-theme-wireframe"</code>.</p>
<p>Click the arrow to see the "Operating System" theme.</p>
</div>
</div>
<div>
<h1>Operating System Theme — Examples</h1>
<div class="reveal">
<p>This theme is great when using vex to replace <code>alert</code>, <code>confirm</code>, and <code>prompt</code>.</p>
<p class="examples">
<a data-example="alert">Alert</a>
<a data-example="confirm">Confirm</a>
<a data-example="prompt">Prompt</a>
<a data-example="login">Login</a>
</p>
</div>
</div>
<div>
<h1>Need to customize animations, overlay styles, and more?</h1>
<div class="reveal">
<h2>vex has you covered.</h2>
</div>
</div>
<div>
<h1>All of this under 7kb with a simple and elegant API.</h1>
<div class="reveal">
<p>Help us spread the word:</p>
<a class="button" href="http://github.com/hubspot/vex" target="_blank">Star vex on GitHub</a>
<a class="button" href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fgithub.hubspot.com%2Fvex%2Fdocs%2Fwelcome&text=Check%20out%20vex%2C%20a%20modern%20UI%20library%20for%20creating%20beautiful%20and%20functional%20dialogs.&tw_p=tweetbutton&url=http%3A%2F%2Fgithub.hubspot.com%2Fvex&via=HubSpotDev" target="_blank">Tweet vex</a>
</div>
</div>
</div>
<style>
.reveal {
-webkit-transition: opacity 1s 0.3s;
-moz-transition: opacity 1s 0.3s;
-o-transition: opacity 1s 0.3s;
transition: opacity 1s 0.3s;
opacity: 0;
}
.vex.v0 .reveal {
opacity: 1;
}
</style>
<div class="stack"></div>
<script>
$('.demo-link').click(function(){
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || $(window).width() <= 568) {
vex.dialog.alert({
className: 'vex-theme-default',
message: 'This is a vex dialog.'
});
} else {
demo.loadInitialDialogs();
}
});
</script>
<style>
#retweet_button {
position: fixed;
bottom: 30px;
left: 50%;
width: 100px;
margin-left: -90px;
-webkit-filter: grayscale(1) contrast(1.3);
-webkit-transform: translateZ(0);
}
#retweet_button:hover {
-webkit-filter: none;
}
credits {
font-family: "proxima-nova", "Helvetica Neue", sans-serif;
position: fixed;
bottom: 35px;
left: 50%;
width: 130px;
margin-left: 20px;
font-size: 13px;
color: #aaa;
}
credits a, credits a:link, credits a:visited {
color: #aaa;
text-decoration: none;
}
credits a:hover {
text-decoration: underline;
color: #444;
}
.documentation-link {
font-family: "proxima-nova", "Helvetica Neue", sans-serif;
position: fixed;
bottom: 75px;
left: 50%;
width: 200px;
margin-left: -100px;
text-align: center;
font-size: 16px;
}
.documentation-link, .documentation-link:link, .documentation-link:visited {
color: #000;
text-decoration: none;
}
.documentation-link:hover {
text-decoration: underline;
color: #000;
}
#retweet_button, credits, .documentation-link {
transition: opacity 200ms;
opacity: 1;
z-index: 99;
point-events: all;
}
body.demo-start #retweet_button, body.demo-start credits, body.demo-start .documentation-link,
body.page-intro #retweet_button, body.page-intro credits, body.page-intro .documentation-link {
opacity: 0;
pointer-events: none;
}
</style>
<!-- Share -->
<div id="retweet_button">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://github.hubspot.com/vex/docs/welcome" data-text="Check out vex, a modern UI library for creating beautiful and functional dialogs." data-count="horizontal" data-via="HubSpotDev">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<a class="documentation-link" href="http://github.hubspot.com/vex" target="_blank">
vex Documentation
</a>
<credits>
By <a href="http://dev.hubspot.com" target="_blank">HubSpot</a>
</credits>
<!-- 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>
<!-- Force 3d acceleration always and forever :) -->
<div style="-webkit-transform: translateZ(0)"></div>
</body>
</html>