Skip to content

Instantly share code, notes, and snippets.

@michael

michael/app.js

Last active August 9, 2017 10:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save michael/1a31b520f085204ddd5a76792e9224fa to your computer and use it in GitHub Desktop.
Save michael/1a31b520f085204ddd5a76792e9224fa to your computer and use it in GitHub Desktop.
Download ZIP
Scrolling is a fun
Raw
app.js
const { Component } = window.substance
window.onload = function() {
SpreadsheetComponent.mount(document.querySelector('.spreadsheet-widget'))
}
class SpreadsheetComponent extends Component {
getInitialState() {
let cells = new Array(100)
for (let i = 0; i<100; i++) {
cells[i] = new Array(20)
for (let j = 0; j<20; j++) {
cells[i][j] = `${i}/${j}`
}
}
return {
// scrollX: 0,
// scrollY: 0,
startCol: 0,
startRow: 0,
contentHeight: 3000,
contentWidth: 4000,
cells: cells
}
}
render($$) {
let el = $$('div').addClass('sc-spreadsheet')
let content = $$('div').addClass('se-content').ref('content')
content.css({
'left': (-this.state.scrollX)+'px',
'top': (-this.state.scrollY)+'px'
})
content.append(
this._renderContent($$)
// $$('img').ref('leImage').attr({
// width: this.state.contentWidth,
// src: 'http://www.catsaroundtheglobe.com/wp-content/uploads/leopard.jpg'
// })
)
el.on('wheel', this._onWheel)
el.append(content)
return el
}
_renderContent($$) {
let table = $$('table')
let numRows = this.state.cells.length
let startRow = this.state.startRow
let endRow = Math.min(startRow+50, numRows)
let numCols = this.state.cells[0].length
let startCol = this.state.startCol
let endCol = Math.min(startCol+10, numCols)
for (let i = startRow; i < endRow ; i++) {
let tr = $$('tr')
for (let j = startCol; j < endCol; j++) {
let cellValue = this.state.cells[i][j]
tr.append(
$$('td').text(cellValue)
)
}
table.append(tr)
}
return table
}
_onWheel(e) {
console.log('le wheeeeeel', e)
let newStartCol = Math.max(0, this.state.startCol + Math.sign(e.deltaX))
let newStartRow = Math.max(0, this.state.startRow + Math.sign(e.deltaY))
this.extendState({
startCol: newStartCol,
startRow: newStartRow
})
e.stopPropagation()
e.preventDefault()
}
_getContainerHeight() {
return this.el.getHeight()
}
_getContainerWidth() {
return this.el.getWidth()
}
}
Raw
scroll-is-fun.html
<!DOCTYPE html>
<html>
<head>
<title>Spreadsheet Component Styles</title>
<meta charset="UTF-8">
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
</style>
<style>
/* Integration */
.article {
width: 700px;
margin: 0 auto;
}
.spreadsheet-widget {
height: 300px;
border: 2px solid #ccc;
}
.sc-spreadsheet {
position: relative;
background: #fff;
height: 100%;
overflow: hidden;
}
.sc-spreadsheet > .se-content {
position: absolute;
top: 0px;
left: 0px;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 400px;
}
/* SpreadsheetCell Component */
td {
width: 100px;
white-space: pre-wrap;
overflow-wrap: break-word;
border: 1px solid #ddd;
position: relative;
padding: 10px;
}
p {
margin: 20px 0;
}
</style>
<script src="substance.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="article">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut massa a nulla scelerisque mollis. Integer aliquet turpis ut nunc mattis, blandit molestie orci finibus. Proin sem enim, laoreet id tempor eget, pretium sit amet est. Aliquam pharetra varius risus, viverra sagittis libero tincidunt in. Aliquam lobortis metus vitae suscipit finibus. Maecenas interdum ipsum nisl, sed tincidunt risus fringilla nec. Praesent at ex enim. Vivamus euismod nec orci ac cursus. Mauris vel volutpat urna.</p>
<p>Aenean convallis nunc odio, nec facilisis nisi mattis et. Nulla lobortis sollicitudin orci quis auctor. Nulla facilisi. Donec bibendum posuere odio id ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin suscipit aliquam massa nec convallis. Ut rhoncus sem quam, at viverra sem consectetur nec. Proin vel justo ac quam accumsan commodo in et neque. Suspendisse id massa lectus. Suspendisse posuere scelerisque auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Donec tortor diam, posuere a libero ut, pulvinar eleifend ligula. Sed pharetra rhoncus dignissim. Aenean consequat ut ex ac sagittis. Phasellus sed tempus velit. Morbi hendrerit sem vitae arcu semper congue. Pellentesque auctor in massa sit amet sodales. Nulla accumsan ex nulla, non volutpat elit euismod id. Aenean egestas suscipit elit. Cras justo enim, faucibus ut aliquam a, tempus sed tortor. Quisque pharetra tempor orci in ullamcorper. Quisque volutpat turpis ut lobortis venenatis.</p>
<p>Aliquam facilisis ipsum eget risus cursus, eget elementum justo rutrum. Aliquam sed sapien vitae nisi semper dignissim non porta leo. Vivamus fringilla iaculis convallis. Curabitur in libero vitae quam vestibulum volutpat. Praesent sit amet ex blandit, finibus massa non, interdum libero. Proin varius, risus id venenatis lobortis, dolor urna convallis sapien, vel scelerisque lacus tellus nec nunc. Duis aliquet risus sit amet sem pretium feugiat. Integer tempor dui tortor, eu molestie odio semper eget. Donec et sapien eu velit lobortis placerat. Integer fringilla volutpat libero eget facilisis. Proin odio diam, posuere a ornare id, facilisis at odio. Morbi cursus neque at varius molestie. Aenean pharetra ante ac arcu porttitor, at lacinia ipsum ullamcorper.</p>
<div class="spreadsheet-widget">
</div>
<p>In blandit facilisis ante sed interdum. Nullam finibus lacus eu consectetur vulputate. Curabitur eu laoreet tellus. Proin mattis tellus nec ipsum eleifend finibus. Maecenas nec massa nec elit eleifend tincidunt. Etiam hendrerit ultrices ligula sed volutpat. Sed sit amet volutpat turpis. Sed efficitur erat urna, sed semper nisi tempus quis. In fringilla nulla arcu, eget suscipit dui mattis eget. Donec at felis diam. In auctor mauris eget faucibus iaculis. Donec rhoncus mauris id nibh vulputate, vel tincidunt quam posuere. Phasellus varius velit nec enim lacinia, a pretium ex elementum. Quisque mattis sit amet leo eget porttitor. Quisque elementum tempus vestibulum.</p>
<p>Nullam nec velit ac libero mollis eleifend. Proin tincidunt, nisi sed auctor pharetra, ipsum nulla ultricies purus, ac maximus massa augue ac odio. Integer a magna sit amet nulla convallis lobortis et vel sapien. Sed ac quam ut nisl vehicula sollicitudin non dapibus diam. Praesent laoreet lorem ac libero cursus, eget feugiat odio venenatis. Donec cursus, massa id tincidunt tincidunt, tellus leo ornare nisi, sed imperdiet massa tellus quis purus. Suspendisse finibus blandit nibh id dignissim. Aliquam lacinia, arcu sed suscipit gravida, tortor neque sollicitudin est, ut dapibus nisl magna nec ante. Ut purus turpis, tristique eu fringilla quis, aliquet et sapien. Nunc posuere varius dui vel mattis. Sed nisi orci, malesuada et urna placerat, auctor finibus dolor. Quisque non molestie sem, quis eleifend orci. Pellentesque vel nisi magna. Proin vestibulum lacus lacus, ut condimentum ligula pellentesque vel. Cras bibendum consequat interdum. Integer vel sagittis neque.</p>
<p>Curabitur vitae purus posuere, blandit magna vel, pellentesque massa. Donec ultricies consequat magna at malesuada. Nunc cursus nisl sit amet aliquet placerat. Vestibulum quis erat vitae leo sollicitudin pulvinar. Suspendisse in fringilla metus. Donec sed risus id nisl laoreet ultrices ut a orci. Duis suscipit ex tortor, et efficitur dui consequat at. Praesent convallis urna sed urna aliquet pretium. Mauris quis faucibus neque. Nullam semper mattis cursus. Donec lacinia eleifend turpis sit amet pulvinar. Nulla facilisi. Vestibulum congue interdum enim vel mollis.</p>
<p>Nam ac dictum ligula. Morbi vestibulum, libero non aliquam vestibulum, ligula nulla blandit ante, hendrerit commodo felis quam id odio. Nulla eu risus eget ex consequat blandit eu vel leo. In quis diam lobortis, tristique felis sit amet, facilisis erat. Duis elit felis, hendrerit et lectus vitae, tincidunt consequat diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc tincidunt arcu elit, non mattis ligula consectetur vehicula. Nulla sem leo, laoreet a iaculis eget, iaculis a mauris. Mauris et lectus vel enim gravida venenatis ac sit amet ex. In hac habitasse platea dictumst. Mauris egestas lobortis euismod. Morbi dictum, tortor vel luctus efficitur, quam nisi luctus nunc, vitae maximus massa turpis nec nibh.</p>
<p>Duis sollicitudin egestas neque, nec placerat libero consectetur eget. Duis rhoncus, arcu a convallis rutrum, tortor sapien semper ipsum, nec aliquet velit enim at nisl. Integer pulvinar urna nibh, vitae tincidunt arcu mattis id. Ut tortor velit, consectetur varius hendrerit vitae, porta at purus. Etiam vel dictum sapien. Nullam id ornare nisl. Pellentesque augue velit, lobortis eu lacinia id, fringilla vel elit.</p>
<p>Vestibulum nec ultricies dui. Quisque eget mi ultrices, laoreet ante a, suscipit velit. Mauris a magna in nisl egestas vehicula a non nulla. Suspendisse imperdiet neque porttitor efficitur venenatis. Ut magna velit, semper ac placerat ut, sagittis eu arcu. Vestibulum nec nulla arcu. Suspendisse placerat, lacus volutpat feugiat ultrices, urna lorem rutrum dui, sit amet laoreet sapien quam at lorem. Nam scelerisque ornare laoreet. Pellentesque feugiat dolor eu mollis tempus. Morbi ac ex metus. Aliquam blandit lobortis pulvinar. Nunc id commodo libero. Morbi et metus hendrerit, rutrum tortor non, ultricies libero. Vivamus commodo dictum mauris vel molestie. Vivamus id nunc nec arcu suscipit ullamcorper ut eleifend elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment