diff --git a/data/web/telegram.org/js/telegram-web-app.js b/data/web/telegram.org/js/telegram-web-app.js index 5603701d90..ba4e68ef9e 100644 --- a/data/web/telegram.org/js/telegram-web-app.js +++ b/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) { diff --git a/data/web/webappcontent.telegram.org/css/webappdemo.css b/data/web/webappcontent.telegram.org/css/webappdemo.css index 4132c320a7..580adc4e57 100644 --- a/data/web/webappcontent.telegram.org/css/webappdemo.css +++ b/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; diff --git a/data/web/webappcontent.telegram.org/js/webappdemo.js b/data/web/webappcontent.telegram.org/js/webappdemo.js index c9945f8b9b..25f522e5f6 100644 --- a/data/web/webappcontent.telegram.org/js/webappdemo.js +++ b/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 += '