Skip to content

Instantly share code, notes, and snippets.

@sciolist

sciolist/waffles.html

Created March 15, 2012 16:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sciolist/2044976 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sciolist/2044976 to your computer and use it in GitHub Desktop.
Download ZIP
Waffles tests
Raw
waffles.html
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<base href="https://raw.github.com/sciolist/waffles.js/master/www/">
<script type="text/javascript" src="coffee-script.js"></script>
<script type="text/javascript" src="../out/waffles.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="scrolls.js"></script>
<script type="text/javascript" src="tableview.js"></script>
<script type="text/javascript">
$(function() {
var data = {
sheets: {
"Sheet1": {
/*sizes: {
x: { 0: 20, 1: 20, 2: 20, 3: 20, 4: 20, 5: 20, 6: 20 },
y: { 3: 40 }
}*/
}
}
};
var book = new Waffles.Book(data);
tbl = new TableView($(".waffles"), book);
});
</script>
<style type="text/css">
#container {
border: 7px solid #888;
border-top-color: #BBB;
border-bottom-color: #444;
width: 500px;
height: 250px;
position: relative;
}
#inputWrapper {
position: absolute;
}
#inputWrapper.hidden {
left: -1000px;
top: -1000px;
}
#input {
position: relative;
top: -1px;
left: -1px;
z-index: 100;
font-size: 13px;
background: #FFFFFF;
border: none;
padding: 0 1px 1px 0px;
text-indent: 3px;
margin: 0;
/*box-shadow: 0px 0px 3px #000;*/
}
td.data.selected div {
position: relative;
z-index: 10;
background: #FFFFFF;
}
td {
border: 1px solid #CECECE;
white-space: pre-wrap;
}
td div {
overflow: hidden;
white-space: nowrap;
pointer-events: none;
}
table {
table-layout: fixed;
position: absolute;
border-collapse: collapse;
cursor: default;
}
.waffles .scroll-corner {
z-index: 110;
}
.waffles .xscroll, #container .yscroll {
z-index: 100;
}
.waffles {
overflow: hidden;
border-top-color: #BBB;
border-bottom-color: #444;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.header.header-y, .header.header-xy {
border-left: none;
}
.header.header-x, .header.header-xy {
border-top: none;
}
.header.selected {
color: #dadada;
background-color: #626262;
box-shadow: inset 0 1px 4px #444444;
text-shadow: none;
}
.header {
font-family: verdana;
text-align: center;
background: #dadada;
border: 1px solid #969696;
box-shadow: inset 0 1px 0 #efefef;
color: #626262;
text-shadow: 0px -1px 0px #888888,
0px 1px 0px #FFFFFF;
}
.selectionWrapper {
display: none;
pointer-events: none;
background: rgba(60, 120, 200, 0.1);
}
.selection {
z-index: 100;
position: absolute;
left: -1px;
right: 0px;
top: -1px;
bottom: 0px;
border: 2px solid rgba(60, 120, 200, 1);
}
.selectionWrapper .drag {
pointer-events: auto;
position: absolute;
z-index: 100;
width: 7px;
height: 7px;
right: -2px;
bottom: -2px;
background: rgba(60, 120, 200, 1);
cursor: se-resize;
}
body {
font-family: verdana;
font-size: 12px;
}
#show-data {
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="waffles"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment