ludbud/index.html at master · michielbdejong/ludbud · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ludbud.js example</title>
  </head>
  <body>
    <a href="https://github.com/michielbdejong/ludbud">Let user data be user data</a>

<!-- ownCloud support depends on https://github.com/owncloud/core/issues/10415#issuecomment-76533629
    <h2>ownCloud</h2><p>
      <button onclick="connect('owncloud', document.getElementById('host').value, document.getElementById('user').value, document.getElementById('pass').value);">Connect to your ownCloud:</button>
      <input id="host" placeholder="host" value="demo.owncloud.org" />
      <input id="user" placeholder="user" value="test" />
      <input id="pass" placeholder="pass" type="password" value="test" />
    </p>
-->
    <h2>remoteStorage</h2><p>
      <button onclick="connect('remotestorage', document.getElementById('remotestorage-host').value, document.getElementById('remotestorage-user').value);">Connect to your remoteStorage:</button>
      <input id="remotestorage-user" placeholder="user" value="michiel2" />
      @
      <input id="remotestorage-host" placeholder="provider.com" value="5apps.com" />
    </p>
<!--
    <h2>Hoodie</h2><p>
      <button onclick="connect('hoodie', document.getElementById('hoodie-host').value, document.getElementById('hoodie-user').value, document.getElementById('hoodie-pass').value);">Connect to your Hoodie:</button>
      <input id="hoodie-host" placeholder="host" value="demo.hood.ie" />
      <input id="hoodie-user" placeholder="user" value="test" />
      <input id="hoodie-pass" placeholder="pass" type="password" value="test" />
    </p>
    <h2>Dropbox</h2><p>
      <button onclick="connect('dropbox');">Connect to Dropbox!</button>
    </p>
    <h2>Google Drive</h2><p>
      <button onclick="connect('googledrive');">Connect to Google Drive!</button>
    </p>
-->
    <h2>Disconnect</h2><p>
      <button onclick="reset();">Disconnect!</button>
    </p>
  </body>
  <script src="./localforage.min.js"></script>
  <script src="./hoodie.min.js"></script>
  <script src="./ludbud.js"></script>
  <script>
    function getUserDataCredentials(callback) {
      var harvest = Ludbud.fromWindowLocation();
      if (harvest) {
        console.log('setting harvest into localforage, then reloading page', harvest);
        localforage.setItem('userDataCredentials', harvest, function(err) {
          Ludbud.restoreWindowLocation();
          //now the page will be reloaded, after which harvest will be undefined
        });
      } else {
        localforage.getItem('userDataCredentials', callback);
      }
    }
    function connect(platform, host, user, pass) {
      console.log('connect', platform, host, user, pass);
      if (platform === 'owncloud' || platform === 'hoodie') {
        //ownCloud and hoodie use direct credentials:
        var userDataCredentials = Ludbud.createCredentials(platform, host, user, pass);
        localforage.setItem('userDataCredentials', userDataCredentials, function(err) {
          go(err, userDataCredentials);
        });
      } else if (platform === 'remotestorage') {
        //remoteStorage uses webfinger discovery + OAuth:
        Ludbud.oauth(platform, user+'@'+host, 'ludbud:rw');
      } else {
        //Dropbox, and Google Drive use OAuth to centralized end-point:
        Ludbud.oauth(platform);
      }
    }
    function go(err, userDataCredentials) {
      if (err) {
        console.log('error getting user data credentials', err);
      } else if (userDataCredentials) {
        ludbud = new Ludbud(userDataCredentials);
        console.log('now we can use the ludbud object to access the user\'s data');
        // go to first step of crud example:
        create();
      } else {
        console.log('No user data credentials yet. Please click one of the buttons');
      }
    }
    function reset() {
      localforage.clear(function() {
        window.location = window.location.href;
      });
    }

    // C.R.U.D. example usage:

    var etag1, etag2;
    function create() {
      ludbud.create('/ludbud/test.txt', 'asdf', 'text/plain; charset=utf-8', function(err, etag) {
        console.log('C.reate:', err, etag);
        etag1 = etag;
        readInfo();
      });
    }
    function readInfo() {
      ludbud.getInfo('/ludbud/test.txt', function(err, info) {
        console.log('R.ead info:', err, info);
        readFolder();
      });
    }
    function readFolder() {
      ludbud.getFolder('/ludbud/', function(err, items) {
        console.log('R.ead folder /ludbud/:', err, items);
        readBody();
      });
    }
    function readBody() {
      ludbud.getDocument('/ludbud/test.txt', function(err, data) {
        console.log('R.ead body (ArrayBuffer)', err, data.body);
        //see if we can interpret that as utf-8:
        try {
          var fileReader = new FileReader();
          fileReader.addEventListener('loadend', function (evt) {
            console.log('R.ead body (as utf-8)', evt.target.result);
          });
          fileReader.readAsText(new Blob([data.body], { type: 'text/plain;charset=utf-8'}));
        } catch(e) {
          console.log('Could not read ArrayBuffer as utf-8', e);
        }
        update();
      });
    }
    function update() {
      ludbud.update('/ludbud/test.txt', 'qwer', 'text/plain', etag1, function(err, newETag) {
        console.log('U.pdate:', err, newETag);
        etag2 = newETag;
        remove();
      });
    }
    function remove() {
      ludbud.remove('/ludbud/test.txt', etag2, function(err) {
        console.log('D.elete:', err);
      });
    }


    //... on page load:

    var ludbud;
    Ludbud.setPlatformCredentials('dropbox', 'cybbbiarf4dkrce');
    Ludbud.setPlatformCredentials('googledrive', '709507725318-3mt4ke1d4tvkc7ktbjvru3csif4nsk67.apps.googleusercontent.com');
    getUserDataCredentials(go);
  </script>
</html>