doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
255 lines (225 loc) • 5.99 kB
HTML
<html lang="en">
<head>
<title>Pause Example</title>
<style type='text/css'>
body {
font-family: verdana
}
.tabs {
padding: 0px;
margin: 0px;
}
.tabs li {
float: left;
padding: 10px;
background-color: #F6F6F6;
list-style: none;
margin-left: 10px;
}
.tabs li a {
color: #1C94C4;
font-weight: bold;
text-decoration: none;
}
.tabs li.active a {
color: #F6A828;
cursor: default;
}
.tab {
border: solid 2px #F6A828;
width: 360px;
height: 100px;
padding: 20px;
}
.dirty {
border: solid 2px red;
}
/* clearfix from jQueryUI */
.ui-helper-clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.ui-helper-clearfix {
display: inline-block;
}
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix {
height: 1%;
}
.ui-helper-clearfix {
display: block;
}
/* end clearfix */
#modal {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
display: none;
}
#background {
background-color: gray;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
opacity: 0.5;
}
#box {
position: absolute;
margin: -55px 0px 0px -105px;
top: 50%;
left: 50%;
border: solid 1px gray;
background-color: white;
opacity: 1;
width: 200px;
height: 100px;
padding: 10px;
}
span {
color: Red;
}
label {
display: block;
}
</style>
</head>
<body>
<div id="demo-html">
<ul id="tabs" class="ui-helper-clearfix">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="panels">
<form id="tab1" class="tab">
<label>Name:</label> <input name="name"/>
<label>Age:</label> <select name="age"><option>10</option><option>20</option></select>
</form>
<form id="tab2" class="tab">
<label>Yard:</label> <select name="yard"><option>1</option><option>2</option></select>
<label>Team:</label> <input name="team"/>
</form>
<form id="tab3" class="tab">
<label>Price:</label> <input name="price"/>
<label>Comment:</label> <textarea name="comment"></textarea>
</form>
</div>
</div>
<div id="modal">
<div id="background"></div>
<div id="box"><p>Do you wish to save?</p>
<a href="javascript://" id="yes">Yes</a>
<a href="javascript://" id="no">No</a>
<a href="javascript://" id="cancel">Cancel</a>
</div>
</div>
<script type='text/javascript' src='../../node_modules/steal/steal.js' main='@empty'></script>
<script type='text/javascript' id="demo-source">
steal('jquerypp/event/pause','jquerypp/event/default',function(){
// create a widget listens for change and marks as dirty
$.fn.dirtybit = function(){
this.each(function(){
var element = $(this);
element.data('formData', element.serialize());
var check = function(){
if (element.serialize() == element.data('formData')) {
element.removeClass('dirty');
} else {
element.addClass('dirty');
}
};
element.bind("change keyup click", check)
.bind("set", function(){
element.data('formData', element.serialize())
.removeClass('dirty');
});
});
};
$.fn.tabs = function(){
this.addClass("tabs")
this.each(function(){
var element = $(this);
var el = element;
var tab = function (li) {
return $(li.find("a").attr("href").match(/#.*/)[0]);
};
$(el).children("li:first").addClass('active');
element.children("li:gt(0)").each(function () {
tab($(this)).hide();
});
el.on("click","li", function(ev){
var el = $(this);
ev.preventDefault();
var active = element.find('.active'),
old = tab(active),
cur = tab(el);
old.triggerAsync('hide', function () {
active.removeClass('active')
old.slideUp(function () {
el.addClass('active')
cur.slideDown()
});
});
});
});
};
$.fn.modal = function(options){
this.show();
this.each(function(){
var element = $(this);
element.on("click","a", function(){
var a = $(this);
element.hide();
options[a.attr('id')]();
element.off("click","a", arguments.callee);
});
});
};
$.fn.saver = function(){
this.each(function(){
var el = $(this);
el.bind("hide", function(ev){
if (el.hasClass('dirty')) {
ev.pause();
$('#modal').modal({
yes : function () {
var save = $('<span>Saving</span>').appendTo(el);
$.post("/update", el.serialize(), function () {
save.remove();
el.trigger('set');
ev.resume();
});
},
no : function () {
ev.resume();
},
cancel : function () {
ev.preventDefault();
ev.resume();
}
});
};
});
});
};
$('#tabs').tabs();
$("#panels .tab").each(function() {
$(this).dirtybit();
$(this).saver();
});
// a fake post method
$.post = function (url, data, success) {
setTimeout(success, 500);
};
});
</script>
</body>
</html>