cloud-storage/example/example.html at master · lurchmath/cloud-storage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!--
A page for testing the cloud storage module defined in this repository.
-->
<html>
    <head>
        <!-- Import the cloud storage module. -->
        <script src='https://cdn.jsdelivr.net/gh/lurchmath/cloud-storage@v2.1/release/cloud-storage.js'></script>
        <!-- Developers testing cloud-storage updates can use this line: -->
        <!--
        <script src='../release/cloud-storage.js'></script>
        -->
        <!-- We aim to test the Dropbox backend, so we need its SDK. -->
        <script src='https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js'>
        </script>
        <!-- Now that Dropbox is defined, import the Dropbox back end. -->
        <script src='https://cdn.jsdelivr.net/gh/lurchmath/cloud-storage@v2/release/dropbox-backend.js'></script>
        <!-- Import the LocalStorage back end. -->
        <script src='https://cdn.jsdelivr.net/gh/lurchmath/cloud-storage@v2/release/localstorage-backend.js'></script>
    </head>
    <body>
        <!--
        Users will click the following buttons to test the appliaction.
        "Use JSON file system" creates a simple JSON-based example
        filesystem.
        "Use Dropbox file system" chooses a filesystem that require the
        user to log in to his/her Dropbox.
        "Use LocalStorage file system" uses a flat (root folder only)
        filesystem that contains no files (at first, though the user may
        save some there, and they persist).
        "Test opening a file" loads a file from the chosen filesystem into
        the left of two text areas, showing success/failure messages in the
        other text area.
        "Test saving a file" saves the contents of the left text area into
        the filesystem, putting success/failure messages in the other text
        area.
        -->
        <p>
            <input type='button' value='Use JSON file system'
                   onclick='setFileSystem(JSONFS);alert("Using JSON file system.");'/>
            <input type='button' value='Use Dropbox file system'
                   onclick='setFileSystem(dropboxFS);alert("Using Dropbox file system.");'/>
            <input type='button' value='Use LocalStorage file system'
                   onclick='setFileSystem(LSFS);alert("Using LocalStorage file system.");'/>
            <input type='button' value='Test opening a file'
                   onclick='testOpenFile();'/>
            <input type='button' value='Test saving a file'
                   onclick='testSaveFile();'/>
            <input type='button' value='Test re-saving the same file'
                   onclick='testResaveFile();'/>
        </p>

        <!--
        The two text areas:
        -->
        <textarea id='fileContents' rows=10 cols=40
        >If you open a file, its text will go here.

Text you type here will be saved when you choose to save a file.</textarea>

        <textarea id='messagesPane' rows=10 cols=40 readonly
        >Success or failure messages will go here.</textarea>

        <p>
            <input type='button' value='Use dialog built into page'
                   onclick='toggleDialog();'/>
        </p>
        <iframe id='testIFrame' style='display:none;'></iframe>

        <!--
        Event handler scripts supporting all the controls above, with some
        global variable initializations first.
        -->
        <script>
            // Define a JSON filesystem for use when testing.
            var JSONFS = JSONFileSystem( {
                type : 'folder',
                contents : {
                    'example.txt' : {
                        type : 'file',
                        contents : 'This\nis\nexample\ntext.'
                    },
                    'example.py' : {
                        type : 'file',
                        contents : 'print( "Hello world." )'
                    },
                    'example folder' : {
                        type : 'folder',
                        contents : {
                            'to do list.txt' : {
                                type : 'file',
                                contents : 'Wash dishes\nClean garage'
                            }
                        }
                    }
                }
            } );
            // Define a Dropbox filesystem for use when testing.  The
            // constructor requires the app key.  The code below includes
            // one of my app keys.  You should use yours, since my app will
            // not permit redirection to your site.
            var dropboxFS = new DropboxFileSystem( '7mfyk58haigi2c4' );
            // Define a LocalStorage filesystem for use when testing.  The
            // constructor requires no parameters, so this is easy.
            var LSFS = new LocalStorageFileSystem();

            // When the page loads, initialize the filesystem to the
            // Dropbox one.  Change this code if you want to test the JSON
            // filesystem instead.
            window.onload = function () { setFileSystem( JSONFS ); }

            // Convenience functions for reading and writing to the two
            // text areas in the app.
            function getEditor () {
                return document.getElementById( 'fileContents' ).value;
            }
            function setEditor ( content ) {
                document.getElementById( 'fileContents' ).value = content;
            }
            function setMessages ( heading, resultType, data ) {
                document.getElementById( 'messagesPane' ).value =
                    ( heading ? heading + '\n\n' : '' )
                  + ( resultType ? resultType + ':\n\n' : '' )
                  + ( data ? JSON.stringify( data, null, 4 ) : '' );
            }

            // Show or hide the built-in dialog, so the user can decide
            // whether to test openFile()/saveFile() using a provided dialog
            // or to make those functions create their own dialogs.
            function getDialog () {
                return document.getElementById( 'testIFrame' );
            }
            function toggleDialog () {
                var dialog = getDialog();
                if ( dialog.style.display == 'none' )
                    dialog.setAttribute( 'src', 'about:blank' );
                dialog.style.display = ( dialog.style.display == 'none' ) ?
                    'block' : 'none';
            }
            // Get the dialog if and only if it's visible, otherwise yield
            // null so that the test functions below will know to create
            // their own dialogs.
            function dialogIfVisible () {
                var dialog = getDialog();
                return ( dialog.style.display == 'block' ) ? dialog : null;
            }

            // Global variable used to store the last result of a success
            // callback from any of the functions below.  Necessary to
            // implement the "re-save the same file" feature.
            var lastFileObject = null;
            // Event handler when the user clicks "Test opening a file."
            // In the various success and failure callbacks, populate one or
            // both of the two textareas with the results.
            function testOpenFile () {
                openFile( function ( chosenFile ) {
                    lastFileObject = chosenFile;
                    chosenFile.get( function ( content ) {
                        setMessages( 'User chose: ' + chosenFile.path, null,
                                     'File loaded successfully' );
                        setEditor( content );
                        if ( dialogIfVisible() ) toggleDialog();
                    }, function ( error ) {
                        setMessages( 'User chose: ' + chosenFile.path,
                                     'Error', error );
                        if ( dialogIfVisible() ) toggleDialog();
                    } );
                }, function ( error ) {
                    lastFileObject = null;
                    setMessages( null, 'Error', error );
                    if ( dialogIfVisible() ) toggleDialog();
                }, dialogIfVisible() );
            }
            // Event handler when the user clicks "Test saving a file."
            // In the various success and failure callbacks, populate one or
            // both of the two textareas with the results.
            function testSaveFile () {
                saveFile( function ( destination ) {
                    lastFileObject = destination;
                    destination.update( getEditor(), function ( result ) {
                        setMessages( 'Destination: ' + destination.path,
                                     'Success', result );
                        if ( dialogIfVisible() ) toggleDialog();
                    }, function ( error ) {
                        setMessages( 'Destination: ' + destination.path,
                                     'Error', error );
                        if ( dialogIfVisible() ) toggleDialog();
                    } );
                }, function ( error ) {
                    lastFileObject = null;
                    setMessages( null, 'Error', error );
                    if ( dialogIfVisible() ) toggleDialog();
                }, dialogIfVisible() );
            }
            // Event handler when the user clicks "Test re-saving the same
            // file."  In the various success and failure callbacks,
            // populate one or both of the two textareas with the results.
            function testResaveFile () {
                if ( !lastFileObject ) {
                    setMessages( null, 'Error',
                        'You have not yet successfully opened or saved a '
                      + ' file, and so you cannot re-save to the "same" '
                      + ' location.' );
                } else {
                    lastFileObject.update( getEditor(),
                        function ( result ) {
                            setMessages( 'Destination: '
                                       + lastFileObject.path,
                                         'Success', result );
                            if ( dialogIfVisible() ) toggleDialog();
                        }, function ( error ) {
                            setMessages( 'Destination: '
                                       + lastFileObject.path,
                                         'Error', error );
                            if ( dialogIfVisible() ) toggleDialog();
                        }
                    );
                }
            }
        </script>
    </body>
</html>