Skip to content

Commit 393beb5

Browse files
nathancarternathancarter
committed
Moving to a build process, big change
1 parent 2663db7 commit 393beb5

18 files changed

+2307
-12
lines changed

‎README.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,28 @@ need a different toolkit.
1313
Import the relevant files into your page. You can use a CDN, like so:
1414
```html
1515
<!-- The main file, essential: -->
16-
<script src='https://cdn.jsdelivr.net/gh/lurchmath/cloud-storage@v1/cloud-storage.js'></script>
16+
<script src='https://cdn.jsdelivr.net/gh/lurchmath/cloud-storage@v2/release/cloud-storage.js'></script>
1717
<!-- If you want the Dropbox backend, which you probably do: -->
1818
<script src='https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js'></script>
19-
<script src='https://cdn.jsdelivr.net/gh/lurchmath/cloud-storage@v1/dropbox-backend.js'></script>
19+
<script src='https://cdn.jsdelivr.net/gh/lurchmath/cloud-storage@v2/release/dropbox-backend.js'></script>
2020
<!-- If you want the LocalStorage backend also: -->
21-
<script src='https://cdn.jsdelivr.net/gh/lurchmath/cloud-storage@v1/localstorage-backend.js'></script>
21+
<script src='https://cdn.jsdelivr.net/gh/lurchmath/cloud-storage@v2/release/localstorage-backend.js'></script>
2222
```
2323

2424
Call `openFile()` or `saveFile()`. That's it! Obviously, you'll want to
2525
pass parameters to those functions to customize what to save or what to do
2626
with opened files, so you should see the example in the next section, or the
2727
documented source code for those two functions, about half way through
28-
[cloud-storage.js](https://github.com/lurchmath/cloud-storage/blob/master/cloud-storage.js).
28+
[cloud-storage.js](https://github.com/lurchmath/cloud-storage/blob/master/source/cloud-storage.js).
2929

3030
## Example
3131

32-
See the [simple test
33-
page](http://lurchmath.github.io/cloud-storage/test.html) for an example of
34-
how the various storage options and functions work.
32+
See the [simple example
33+
page](http://lurchmath.github.io/cloud-storage/example/example.html) for an
34+
example of how the various storage options and functions work.
3535

3636
The source code for that page [is documented with
37-
comments](https://github.com/lurchmath/cloud-storage/blob/master/test.html).
37+
comments](https://github.com/lurchmath/cloud-storage/blob/master/example/example.html).
3838

3939
## Status
4040

@@ -51,7 +51,7 @@ Right now three data storage backends are supported.
5151
keeping the API here very simple.)
5252

5353
To add a new backend, mimic the work done in
54-
[dropbox-backend.js](https://github.com/lurchmath/cloud-storage/blob/master/dropbox-backend.js) and create your own backend.
54+
[dropbox-backend.js](https://github.com/lurchmath/cloud-storage/blob/master/source/dropbox-backend.js) and create your own backend.
5555
Cloud storage providers besides Dropbox are welcome!
5656

5757
There are other things that could be improved about this project.

‎example/dropbox-login.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<html><head><script src="https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js"></script><script>function parseQueryString(e){var a=Object.create(null);return"string"!=typeof e?a:(e=e.trim().replace(/^(\?|#|&)/,""))?(e.split("&").forEach(function(e){var t=e.replace(/\+/g," ").split("="),n=t.shift(),o=t.length>0?t.join("="):void 0;n=decodeURIComponent(n),o=void 0===o?null:decodeURIComponent(o),void 0===a[n]?a[n]=o:Array.isArray(a[n])?a[n].push(o):a[n]=[a[n],o]}),a):a}window.addEventListener("message",function(e){if("setClientID"==e.data[0]){var a=new Dropbox({clientId:e.data[1]});window.location.href=a.getAuthenticationUrl(window.location.href)}});var hashData=parseQueryString(window.location.hash);(hashData.access_token||hashData.error)&&window.opener.postMessage(JSON.stringify(["dialogLogin",hashData]),"*")</script></head><body></body></html>

test.html renamed to example/example.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
<html>
55
<head>
66
<!-- Import the cloud storage module. -->
7-
<script src='./cloud-storage.js'></script>
7+
<script src='https://cdn.jsdelivr.net/gh/lurchmath/cloud-storage@v2/release/cloud-storage.js'></script>
88
<!-- We aim to test the Dropbox backend, so we need its SDK. -->
99
<script src='https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js'>
1010
</script>
1111
<!-- Now that Dropbox is defined, import the Dropbox back end. -->
12-
<script src='./dropbox-backend.js'></script>
12+
<script src='https://cdn.jsdelivr.net/gh/lurchmath/cloud-storage@v2/release/dropbox-backend.js'></script>
1313
<!-- Import the LocalStorage back end. -->
14-
<script src='./localstorage-backend.js'></script>
14+
<script src='https://cdn.jsdelivr.net/gh/lurchmath/cloud-storage@v2/release/localstorage-backend.js'></script>
1515
</head>
1616
<body>
1717
<!--

‎gulpfile.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
2+
/*
3+
* This file is the build process for this repository.
4+
*
5+
* It begins by importing all the gulp modules needed to do the tasks below.
6+
*/
7+
var gulp = require( 'gulp' );
8+
var htmlmin = require( 'gulp-htmlmin' );
9+
var embed = require( 'gulp-embed' );
10+
var uglify = require( 'gulp-uglify' );
11+
var each = require( 'gulp-each' );
12+
var rename = require( 'gulp-rename' );
13+
var concat = require( 'gulp-concat' );
14+
var addsrc = require( 'gulp-add-src' );
15+
16+
/*
17+
* Any client will need to import our scripts. The main one is the
18+
* cloud-storage.js file itself, which we compile here, from the source
19+
* folder to the release folder.
20+
*
21+
* This is a simple minification of the source file, with one additional
22+
* step. We embed the entire dialog.{html,css,js} content as a single,
23+
* base64-encoded string at the top of the compiled file, so that it can be
24+
* used programmatically to fill an iframe, without the need for those three
25+
* files to be present in the same folder.
26+
*/
27+
gulp.task( 'build-main-script', function () {
28+
return gulp.src( 'source/dialog.html' )
29+
// embed dialog.{js,css} into dialog.html, then minify
30+
.pipe( embed() )
31+
.pipe( htmlmin( { collapseWhitespace : true,
32+
removeComments : true,
33+
minifyJS : true,
34+
minifyCSS : true } ) )
35+
// manually base64 encode the result as a JS string variable
36+
.pipe( each( function ( content, file, callback ) {
37+
callback( null,
38+
'var dialogHTML = "data:text/html;base64,' +
39+
( new Buffer( content ).toString( 'base64' ) ) +
40+
'";' );
41+
} ) )
42+
// prepend this onto cloud-storage.js and make it use the var
43+
.pipe( addsrc.append( 'source/cloud-storage.js' ) )
44+
.pipe( concat( 'cloud-storage.js' ) )
45+
.pipe( each( function ( content, file, callback ) {
46+
callback( null,
47+
content.replace( "'./dialog.html'", "dialogHTML" ) );
48+
} ) )
49+
// minify and output
50+
.pipe( uglify() )
51+
.pipe( gulp.dest( 'release/' ) );
52+
} );
53+
54+
/*
55+
* Any client will need to import our scripts. In addition to the
56+
* cloud-storage.js file built by the process above, there are also a
57+
* handful of "backends" that reside in their own .js files, so that clients
58+
* can import exactly the subset they need, and no more. We compile those
59+
* here, also from the source folder to the release folder.
60+
*/
61+
gulp.task( 'minify-backends', function () {
62+
return gulp.src( 'source/*-backend.js' )
63+
.pipe( uglify() )
64+
.pipe( gulp.dest( 'release/' ) );
65+
} );
66+
67+
/*
68+
* A client who chooses to use the Dropbox backend will need a page in their
69+
* own web space to which to direct the Dropbox login procedure. We provide
70+
* the file dropbox-login.html that receives that redirection from Dropbox
71+
* and emits the messages that the scripts in dropbox-backend.js need to
72+
* access the user's Dropbox. The user will need a copy of thta file in
73+
* the same folder as the page importing cloud-storage.js.
74+
*
75+
* This build task just copies the dropbox-login.html page to the release
76+
* folder, from which clients who need it can download it. But while we're
77+
* at it, we might as well minify its contents.
78+
*/
79+
gulp.task( 'minify-login-page', function () {
80+
return gulp.src( 'source/dropbox-login.html' )
81+
.pipe( htmlmin( { collapseWhitespace : true,
82+
removeComments : true,
83+
minifyJS : true } ) )
84+
.pipe( gulp.dest( 'release/' ) );
85+
} );
86+
87+
/*
88+
* This repository contains an example/ folder to show how to use the tools
89+
* provided. This task just copies the minified login page from the release
90+
* folder to the example folder.
91+
*/
92+
gulp.task( 'build-example', [ 'minify-login-page' ], function () {
93+
return gulp.src( 'release/dropbox-login.html' )
94+
.pipe( gulp.dest( 'example/' ) );
95+
} );
96+
97+
/*
98+
* The default build task is to do everything.
99+
*/
100+
gulp.task( 'default', [ 'build-main-script',
101+
'minify-backends',
102+
'minify-login-page',
103+
'build-example' ] );

0 commit comments

Comments
 (0)