Skip to content

Instantly share code, notes, and snippets.

@nekman
Created February 3, 2014 00:13
Show Gist options
  • Save nekman/8777065 to your computer and use it in GitHub Desktop.
Save nekman/8777065 to your computer and use it in GitHub Desktop.
require({
paths: {
jquery: '//code.jquery.com/jquery-2.0.3.min',
lodash: '//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash',
backbone: '//cdn.jsdelivr.net/backbonejs/1.0.0/backbone-min',
handlebars: '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min',
listjs: '//cdnjs.cloudflare.com/ajax/libs/list.js/1.0.2/list.min'
},
shim: {
backbone: {
deps: ['jquery', 'lodash'],
exports: 'Backbone'
},
handlebars: {
exports: 'Handlebars'
},
lodash: {
exports: '_'
}
}
}, ['app'], function(app) {
app.start();
});
/**
* Quick and dirty "proof of concept" hack for displaying
* a spreedsheet from Google Docs...with automatic syncing
* that gets paused if the user moves the mouse/types in the input field.
* The polling could also be turned on/off, by pressing the poll button.
*
* Uses:
* > Require.js
* > LoDash
* > Backbone.js
* > Handlebars.js (template)
* > List.js (sorting and filtering)
* > jQuery 2.0.3
*
* Needs some refactoring...
*
*/
define([
'jquery',
'./models/SpreedSheetModel',
'./views/SpreedSheetView'
],
function($, SpreedSheetModel, SpreedSheetView) {
'use strict';
var setup = function() {
var parts = window.location.hash.substr(1).split('/'),
modelOptions = {
key: parts[0] || 'o13394135408524254648.240766968415752635',
name: unescape(parts[1] || 'No name')
};
new SpreedSheetView({
poll: parts[2],
// Adds CSS-class to cells with '1'/'0' values ... could of course be removed
cssConverter: {
'1': 'alert alert-success',
'0': 'alert alert-danger'
},
// Replace '1'/'0' values to 'Done/Missing'... could of course be removed
valueConverter: {
'1': 'OK',
'0': ':('
},
model: new SpreedSheetModel(modelOptions)
});
};
return {
start: function() {
$(document).ready(setup);
}
};
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google SpreedSheet</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<style>
.alert { margin-bottom: 0px; padding: 2px; text-align: center; }
</style>
<script id="sheet-template" type="text/x-handlebars-template">
<h2>{{name}}</h2>
<div style="width: 300px;">
<input type="text" class="search form-control" placeholder="Filtrera..." />
</div>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr style="cursor: pointer;">
{{#each viewModel.headerRows}}
<th class="sort" data-sort="{{column}}">
<a title="Sort by '{{text}}'">{{text}}</a>
</th>
{{/each}}
</tr>
</thead>
<tbody class="list">
{{#each viewModel.bodyRows}}
<tr>
{{#each .}}
<td class="{{column}}">
<div class="{{css}}">{{ text }}</div>
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</div>
</script>
</head>
<body>
<div class="container" style="margin-top: 10px;">
<div id="loading" class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
Loading spreedsheet...
</div>
</div>
<div id="error" class="alert alert-danger hide"></div>
<button type="button" title="Pause/Continue polling" id="btnSync" class="hide toggle btn btn-default" data-toggle="button">
<i id="icon" class="glyphicon glyphicon-pause"></i> Poll
</button>
<div id="container"></div>
</div>
<script data-main="app.config" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment