From 6ddb1aeb5bbcb8df382920831b56b60f299c9bb6 Mon Sep 17 00:00:00 2001
From: GitHub Action <github-action@users.noreply.github.com>
Date: Fri, 3 Jun 2022 13:49:36 +0000
Subject: [PATCH] Update content of files

---
 .../css/webappdemo.css                        | 248 ++++++++++++++++++
 .../js/webappdemo.js                          | 224 ++++++++++++++++
 2 files changed, 472 insertions(+)
 create mode 100644 data/web/webappcontent.telegram.org/css/webappdemo.css
 create mode 100644 data/web/webappcontent.telegram.org/js/webappdemo.js

diff --git a/data/web/webappcontent.telegram.org/css/webappdemo.css b/data/web/webappcontent.telegram.org/css/webappdemo.css
new file mode 100644
index 0000000000..8b288a8a7f
--- /dev/null
+++ b/data/web/webappcontent.telegram.org/css/webappdemo.css
@@ -0,0 +1,248 @@
+body {
+  font-family: sans-serif;
+  background-color: var(--tg-theme-bg-color, #fff);
+  color: var(--tg-theme-text-color, #222);
+  font-size: 14px;
+  margin: 0;
+  padding: 0;
+  color-scheme: var(--tg-color-scheme);
+}
+body.gray {
+  background-color: var(--tg-theme-secondary-bg-color, #efefef);
+}
+a {
+  color: var(--tg-theme-link-color, #2678b6);
+}
+.btn {
+  font-size: 14px;
+  padding: 10px 17px;
+}
+.btn-primary {
+  background-color: var(--tg-theme-button-color, #50a8eb);
+  color: var(--tg-theme-button-text-color, #fff);
+  border: none;
+}
+.main-container {
+  padding: 15px;
+}
+.list-header {
+  text-transform: uppercase;
+  font-size: .92em;
+  color: var(--tg-theme-hint-color, #ccc);
+  margin: 0 0 10px;
+}
+a.list-group-item,
+button.list-group-item {
+  color: var(--tg-theme-text-color, #222);
+}
+.main-container p {
+  margin: 0 0 10px;
+}
+.main-container pre,
+.main-container > .btn {
+  margin: 0 0 7px;
+}
+.main-container pre + .hint,
+.main-container > .btn + .hint {
+  text-align: center;
+  margin: 0 0 15px;
+}
+
+button {
+  display: block;
+  width: 100%;
+  font-size: 14px;
+  margin: 15px 0;
+  padding: 12px 20px;
+  border:  none;
+  border-radius: 4px;
+  background-color: var(--tg-theme-button-color, #50a8eb);
+  color: var(--tg-theme-button-text-color, #fff);
+  cursor: pointer;
+}
+button[disabled] {
+  opacity: 0.6;
+  cursor: auto;
+  pointer-events: none;
+}
+button.close_btn {
+  /*position: fixed;*/
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 0;
+  margin: 0;
+  padding: 16px 20px;
+  text-transform: uppercase;
+}
+input[type="text"],
+.input[contenteditable] {
+  display: block;
+  box-sizing: border-box;
+  font-size: 14px;
+  width: 100%;
+  padding: 12px 20px;
+  margin: 15px 0;
+  border: 1px solid var(--tg-theme-link-color, #000);
+  background-color: var(--tg-theme-bg-color, #ffffff);
+  border-radius: 4px;
+  color: var(--tg-theme-text-color, #222222);
+  text-align: start;
+}
+input[type="text"]::-webkit-input-placeholder {
+  color: var(--tg-theme-hint-color, #ccc);
+}
+input[type="text"]::-moz-placeholder {
+  color: var(--tg-theme-hint-color, #ccc);
+}
+input[type="text"]:-ms-input-placeholder {
+  color: var(--tg-theme-hint-color, #ccc);
+}
+.input[data-placeholder] {
+  position: relative;
+}
+.input[data-placeholder]:empty:before {
+  position: absolute;
+  left: 0;
+  right: 0;
+  content: attr(data-placeholder);
+  color: var(--tg-theme-hint-color, #ccc);
+  padding: 0 20px;
+  font-weight: normal;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+}
+section {
+  padding: 15px;
+  text-align: center;
+  background-color: var(--tg-theme-bg-color, #ffffff);
+}
+section.gray {
+  background-color: var(--tg-theme-secondary-bg-color, #efefef);
+}
+section + section {
+  padding: 0 15px 65px;
+}
+p {
+  margin: 40px 0 15px;
+}
+ul {
+  text-align: left;
+}
+li {
+  color: var(--tg-theme-hint-color, #a8a8a8);
+}
+textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 7px;
+}
+pre {
+  background: rgba(0, 0, 0, .07);
+  color: var(--tg-theme-text-color, #222);
+  font-size: 12px;
+  border: none;
+  border-radius: 4px;
+  padding: 8px;
+  margin: 7px 0;
+  word-break: break-all;
+  word-break: break-word;
+  white-space: pre-wrap;
+  text-align: left;
+}
+.dark pre {
+  background: rgba(255, 255, 255, .15);
+}
+.chat_img {
+  width: 30px;
+  border-radius: 15px;
+  margin-right: 10px;
+}
+.hint {
+  font-size: .8em;
+  color: var(--tg-theme-hint-color, #a8a8a8);
+}
+.ok {
+  color: green;
+}
+.err {
+  color: red;
+}
+.status_need {
+  display: none;
+}
+#fixed_wrap {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  transform: translateY(100vh);
+}
+.viewport-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: var(--tg-viewport-stable-height, 100vh);
+  transition: height .2s ease;
+}
+.viewport-container .main-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.viewport-container .main-container button {
+  width: auto;
+}
+.viewport-border,
+.viewport-stable_border {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: var(--tg-viewport-height, 100vh);
+  pointer-events: none;
+}
+.viewport-stable_border {
+  height: var(--tg-viewport-stable-height, 100vh);
+}
+.viewport-border:before,
+.viewport-stable_border:before {
+  content: attr(text);
+  display: inline-block;
+  position: absolute;
+  background: gray;
+  right: 0;
+  top: 0;
+  font-size: 7px;
+  padding: 2px 4px;
+  vertical-align: top;
+}
+.viewport-stable_border:before {
+  background: green;
+  left: 0;
+  right: auto;
+}
+.viewport-border:after,
+.viewport-stable_border:after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border: 2px dashed gray;
+}
+.viewport-stable_border:after {
+  border-color: green;
+}
\ No newline at end of file
diff --git a/data/web/webappcontent.telegram.org/js/webappdemo.js b/data/web/webappcontent.telegram.org/js/webappdemo.js
new file mode 100644
index 0000000000..792df4b9bb
--- /dev/null
+++ b/data/web/webappcontent.telegram.org/js/webappdemo.js
@@ -0,0 +1,224 @@
+var DemoApp = {
+  initData: Telegram.WebApp.initData || '',
+  initDataUnsafe: Telegram.WebApp.initDataUnsafe || {},
+  MainButton: Telegram.WebApp.MainButton,
+
+  init: function(options) {
+    $('body').css('visibility', '');
+    Telegram.WebApp.ready();
+    Telegram.WebApp.MainButton.setParams({
+      text: 'CLOSE WEBVIEW',
+      is_visible: true
+    }).onClick(DemoApp.close);
+  },
+  expand: function() {
+    Telegram.WebApp.expand();
+  },
+  close: function() {
+    Telegram.WebApp.close();
+  },
+  sendMessage: function(msg_id, with_webview) {
+    if (!DemoApp.initDataUnsafe.query_id) {
+      alert('WebViewQueryId not defined');
+      return;
+    }
+    $('button').prop('disabled', true);
+    $('#btn_status').text('Sending...').removeClass('ok err').show();
+    DemoApp.apiRequest('sendMessage', {
+      msg_id: msg_id || '',
+      with_webview: !DemoApp.initDataUnsafe.receiver && with_webview ? 1 : 0
+    }, function(result) {
+      $('button').prop('disabled', false);
+      if (result.response) {
+        if (result.response.ok) {
+          $('#btn_status').html('Message sent successfully!').addClass('ok').show();
+        } else {
+          $('#btn_status').text(result.response.description).addClass('err').show();
+          alert(result.response.description);
+        }
+      } else if (result.error) {
+        $('#btn_status').text(result.error).addClass('err').show();
+        alert(result.error);
+      } else {
+        $('#btn_status').text('Unknown error').addClass('err').show();
+        alert('Unknown error');
+      }
+    });
+  },
+  changeMenuButton: function(close) {
+    $('button').prop('disabled', true);
+    $('#btn_status').text('Changing button...').removeClass('ok err').show();
+    DemoApp.apiRequest('changeMenuButton', {}, function(result) {
+      $('button').prop('disabled', false);
+      if (result.response) {
+        if (result.response.ok) {
+          $('#btn_status').html('Button changed!').addClass('ok').show();
+          Telegram.WebApp.close();
+        } else {
+          $('#btn_status').text(result.response.description).addClass('err').show();
+          alert(result.response.description);
+        }
+      } else if (result.error) {
+        $('#btn_status').text(result.error).addClass('err').show();
+        alert(result.error);
+      } else {
+        $('#btn_status').text('Unknown error').addClass('err').show();
+        alert('Unknown error');
+      }
+    });
+    if (close) {
+      setTimeout(function() {
+        Telegram.WebApp.close();
+      }, 50);
+    }
+  },
+  checkInitData: function() {
+    if (DemoApp.initDataUnsafe.query_id &&
+        DemoApp.initData &&
+        $('#webview_data_status').hasClass('status_need')) {
+      $('#webview_data_status').removeClass('status_need');
+      DemoApp.apiRequest('checkInitData', {}, function(result) {
+        if (result.ok) {
+          $('#webview_data_status').html('Hash is correct (async)').addClass('ok');
+        } else {
+          $('#webview_data_status').html(result.error + ' (async)').addClass('err');
+        }
+      });
+    }
+  },
+
+  sendText: function(spam) {
+    var text = $('#text_field').val();
+    if (!text.length) {
+      return $('#text_field').focus();
+    }
+    if (byteLength(text) > 4096) {
+      return alert('Text is too long');
+    }
+    var repeat = spam ? 10 : 1;
+    for (var i = 0; i < repeat; i++) {
+      Telegram.WebApp.sendData(text);
+    }
+  },
+  sendTime: function(spam) {
+    var repeat = spam ? 10 : 1;
+    for (var i = 0; i < repeat; i++) {
+      Telegram.WebApp.sendData(new Date().toString());
+    }
+  },
+  requestLocation: function(el) {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(function (position) {
+        $(el).next('span').html('(' + position.coords.latitude + ', ' + position.coords.longitude + ')').attr('class', 'ok');
+      });
+    } else {
+      $(el).next('span').html('Geolocation is not supported in this browser.').attr('class', 'err');
+    }
+    return false;
+  },
+  requestVideo: function(el) {
+    if (navigator.mediaDevices) {
+      navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(function(stream) {
+        $(el).next('span').html('(Access granted)').attr('class', 'ok');
+      });
+    } else {
+      $(el).next('span').html('Media devices is not supported in this browser.').attr('class', 'err');
+    }
+    return false;
+  },
+  requestAudio: function(el) {
+    if (navigator.mediaDevices) {
+      navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function(stream) {
+        $(el).next('span').html('(Access granted)').attr('class', 'ok');
+      });
+    } else {
+      $(el).next('span').html('Media devices is not supported in this browser.').attr('class', 'err');
+    }
+    return false;
+  },
+  toggleMainButton: function(el) {
+    if (DemoApp.MainButton.isVisible) {
+      DemoApp.MainButton.hide();
+      el.innerHTML = 'Show Main Button';
+    } else {
+      DemoApp.MainButton.show();
+      el.innerHTML = 'Hide Main Button';
+    }
+  },
+
+  apiRequest: function(method, data, onCallback) {
+    var authData = DemoApp.initData || '';
+    $.ajax('/demo/api', {
+      type: 'POST',
+      data: $.extend(data, {_auth: authData, method: method}),
+      dataType: 'json',
+      xhrFields: {
+        withCredentials: true
+      },
+      success: function(result) {
+        onCallback && onCallback(result);
+      },
+      error: function(xhr) {
+        onCallback && onCallback({error: 'Server error'});
+      }
+    });
+  }
+};
+
+var DemoAppMenu = {
+  init: function() {
+    DemoApp.init();
+    $('body').addClass('gray');
+    Telegram.WebApp.setHeaderColor('secondary_bg_color');
+  }
+};
+
+var DemoAppInitData = {
+  init: function() {
+    DemoApp.init();
+    // $('body').addClass('gray');
+    // Telegram.WebApp.setHeaderColor('secondary_bg_color');
+
+    Telegram.WebApp.onEvent('themeChanged', function() {
+      $('#theme_data').html(JSON.stringify(Telegram.WebApp.themeParams, null, 2));
+    });
+    $('#webview_data').html(JSON.stringify(DemoApp.initDataUnsafe, null, 2));
+    $('#theme_data').html(JSON.stringify(Telegram.WebApp.themeParams, null, 2));
+    DemoApp.checkInitData();
+
+
+  }
+};
+
+var DemoAppViewport = {
+  init: function() {
+    DemoApp.init();
+    // $('body').addClass('gray');
+    // Telegram.WebApp.setHeaderColor('secondary_bg_color');
+    Telegram.WebApp.onEvent('viewportChanged', DemoAppViewport.setData);
+    DemoAppViewport.setData();
+  },
+  setData: function() {
+    $('.viewport-border').attr('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportHeight, 2));
+    $('.viewport-stable_border').attr('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportStableHeight, 2) + ' | is_expanded: ' + (Telegram.WebApp.isExpanded ? 'true' : 'false'));
+  }
+};
+
+function byteLength(str) {
+  if (window.Blob) {
+    try { return new Blob([str]).size; } catch (e) {}
+  }
+  var s = str.length;
+  for (var i=str.length-1; i>=0; i--) {
+    var code = str.charCodeAt(i);
+    if (code > 0x7f && code <= 0x7ff) s++;
+    else if (code > 0x7ff && code <= 0xffff) s+=2;
+    if (code >= 0xDC00 && code <= 0xDFFF) i--;
+  }
+  return s;
+}
+
+function round(val, d) {
+  var k = Math.pow(10, d || 0);
+  return Math.round(val * k) / k;
+}