Update content of files

data/web/telegram.org/js/telegram-web-app.js

@@ -975,7 +975,7 @@
     cloudStorage.getItem = function(key, callback) {
       return cloudStorage.getItems([key], callback ? function(err, res) {
         if (err) callback(err);
-        else callback(res[key]);
+        else callback(null, res[key]);
       } : null);
     };
     cloudStorage.getItems = function(keys, callback) {

data/web/webappcontent.telegram.org/css/webappdemo.css

@@ -77,6 +77,17 @@ button.close_btn {
   padding: 16px 20px;
   text-transform: uppercase;
 }
+table.table-condensed button {
+  display: inline-block;
+  width: auto;
+  font-size: 12px;
+  margin: 0 2px 2px 0;
+  padding: 2px 7px;
+}
+.table-bordered>tfoot>tr>th,
+.table-bordered>tfoot>tr>td {
+  border-top-width: 2px;
+}
 input[type="text"],
 .input[contenteditable] {
   display: block;
@@ -117,6 +128,12 @@ input[type="text"]:-ms-input-placeholder {
   pointer-events: none;
   z-index: -1;
 }
+table.table-condensed input[type="text"] {
+  font-size: 12px;
+  padding: 5px;
+  margin: 0;
+  border-color: #eee;
+}
 section {
   padding: 15px;
   text-align: center;

data/web/webappcontent.telegram.org/js/webappdemo.js

@@ -199,6 +199,87 @@ var DemoApp = {
       }
     });
   },
+  cloudStorageKeys: {},
+  cloudStorageItems: {},
+  editCloudRow: function(el, event) {
+    event.preventDefault();
+    var values = DemoApp.cloudStorageItems;
+    var key = $(el).parents('tr').attr('data-key');
+    el.form.reset();
+    el.form.key.value = key;
+    el.form.value.value = values[key];
+  },
+  deleteCloudRow: function(el, event) {
+    event.preventDefault();
+    var key = $(el).parents('tr').attr('data-key');
+    Telegram.WebApp.CloudStorage.removeItem(key, function(err, deleted) {
+      if (err) {
+        DemoApp.showAlert('Error: ' + err);
+      } else {
+        if (deleted) {
+          var index = DemoApp.cloudStorageKeys.indexOf(key);
+          if (index >= 0) {
+            DemoApp.cloudStorageKeys.splice(index, 1);
+          }
+          delete DemoApp.cloudStorageItems[key];
+        }
+        el.form.reset();
+        DemoApp.updateCloudRows();
+      }
+    });
+  },
+  saveCloudForm: function(form, event) {
+    event.preventDefault();
+    var key = form.key.value;
+    var value = form.value.value;
+    Telegram.WebApp.CloudStorage.setItem(key, value, function(err, saved) {
+      if (err) {
+        DemoApp.showAlert('Error: ' + err);
+      } else {
+        if (saved) {
+          if (typeof DemoApp.cloudStorageItems[key] === 'undefined') {
+            DemoApp.cloudStorageKeys.push(key);
+          }
+          DemoApp.cloudStorageItems[key] = value;
+        }
+        form.reset();
+        DemoApp.updateCloudRows();
+      }
+    });
+  },
+  updateCloudRows: function() {
+    var html = '';
+    var keys = DemoApp.cloudStorageKeys;
+    var values = DemoApp.cloudStorageItems;
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+      html += '<tr data-key="'+cleanHTML(key)+'"><td>'+cleanHTML(key)+'</td><td>'+cleanHTML(values[key])+'</td><td><button onclick="DemoApp.editCloudRow(this, event);">Edit</button><button onclick="DemoApp.deleteCloudRow(this, event);">Delete</button></td></tr>';
+    }
+    $('#cloud_rows').html(html);
+  },
+  loadCloudKeys: function(el) {
+    Telegram.WebApp.CloudStorage.getKeys(function(err, keys) {
+      if (err) {
+        DemoApp.showAlert('Error: ' + err);
+      } else {
+        if (keys.length > 0) {
+          Telegram.WebApp.CloudStorage.getItems(keys, function(err, values) {
+            if (err) {
+              DemoApp.showAlert('Error: ' + err);
+            } else {
+              DemoApp.cloudStorageKeys = keys;
+              DemoApp.cloudStorageItems = {};
+              for (var i = 0; i < keys.length; i++) {
+                var key = keys[i];
+                DemoApp.cloudStorageItems[key] = values[key];
+              }
+              DemoApp.updateCloudRows();
+            }
+          });
+        }
+      }
+    });
+  },
   toggleMainButton: function(el) {
     if (DemoApp.MainButton.isVisible) {
       DemoApp.MainButton.hide();
@@ -309,6 +390,10 @@ var DemoAppViewport = {
   }
 };
 
+function cleanHTML(value) {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/\n/g, '<br/>');
+}
+
 function byteLength(str) {
   if (window.Blob) {
     try { return new Blob([str]).size; } catch (e) {}