diff --git a/data/webappcontent.telegram.org/cafe.html b/data/webappcontent.telegram.org/cafe.html new file mode 100644 index 0000000000..07942de9e4 --- /dev/null +++ b/data/webappcontent.telegram.org/cafe.html @@ -0,0 +1,448 @@ + + + + + DurgerKingBot + + + + + + + + + + + +
+
+
1
+
+ + + + +
+
+ Burger + $4.99 +
+
+ + +
+
+
1
+
+ + + + +
+
+ Fries + $1.49 +
+
+ + +
+
+
1
+
+ + + + +
+
+ Hotdog + $3.49 +
+
+ + +
+
+
1
+
+ + + + +
+
+ Tako + $3.99 +
+
+ + +
+
+
1
+
+ + + + +
+
+ Pizza + $7.99 +
+
+ + +
+
+
1
+
+ + + + +
+
+ Donut + $1.49 +
+
+ + +
+
+
1
+
+ + + + +
+
+ Popcorn + $1.99 +
+
+ + +
+
+
1
+
+ + + + +
+
+ Coke + $1.49 +
+
+ + +
+
+
1
+
+ + + + +
+
+ Cake + $10.99 +
+
+ + +
+
+
1
+
+ + + + +
+
+ Icecream + $5.99 +
+
+ + +
+
+
1
+
+ + + + +
+
+ Cookie + $3.99 +
+
+ + +
+
+
1
+
+ + + + +
+
+ Flan + $7.99 +
+
+ + +
+
+
+
+
+
+

Your Order

+ Edit +
+
+
+
+ + + + +
+
+
Burger 1x
+
Meat™
+
+
$4.99
+
+
+ + + + +
+
+
Fries 1x
+
Po-ta-toes
+
+
$1.49
+
+
+ + + + +
+
+
Hotdog 1x
+
0% dog, 100% hot
+
+
$3.49
+
+
+ + + + +
+
+
Tako 1x
+
Mucho más
+
+
$3.99
+
+
+ + + + +
+
+
Pizza 1x
+
That’s amore
+
+
$7.99
+
+
+ + + + +
+
+
Donut 1x
+
Hole included
+
+
$1.49
+
+
+ + + + +
+
+
Popcorn 1x
+
Lights, camera, corn
+
+
$1.99
+
+
+ + + + +
+
+
Coke 1x
+
The liquid kind
+
+
$1.49
+
+
+ + + + +
+
+
Cake 1x
+
Bread substitute
+
+
$10.99
+
+
+ + + + +
+
+
Icecream 1x
+
Cone of shame
+
+
$5.99
+
+
+ + + + +
+
+
Cookie 1x
+
Milk’s favorite
+
+
$3.99
+
+
+ + + + +
+
+
Flan 1x
+
Flan-tastic
+
+
$7.99
+
+
+
+
+ +
+ Any special requests, details, final wishes etc. +
+
+
+
+
+
+ + + + + + + diff --git a/data/webappcontent.telegram.org/css/cafe.css b/data/webappcontent.telegram.org/css/cafe.css new file mode 100644 index 0000000000..ee95782875 --- /dev/null +++ b/data/webappcontent.telegram.org/css/cafe.css @@ -0,0 +1,566 @@ +@font-face { + font-display: swap; + font-family: 'SF-Pro-Rounded'; + src: local('SF Pro Rounded Medium'), + url('fonts/SF-Pro-Rounded-Medium.otf') format('opentype'); + font-weight: 500; +} +@font-face { + font-display: swap; + font-family: 'SF-Pro-Rounded'; + src: local('SF Pro Rounded Bold'), + url('fonts/SF-Pro-Rounded-Bold.otf') format('opentype'); + font-weight: 700; +} + +body { + font-family: 'SF-Pro-Rounded', sans-serif; + font-size: 13px; + line-height: 16px; + font-weight: 500; + background-color: var(--block-bg-color); + color: var(--text-color); + color-scheme: var(--tg-theme-color-scheme); + margin: 0; + padding: 0; + width: 1px; + min-width: 100%; + + --block-bg-color: var(--tg-theme-bg-color); + --bg-color: #ebedf0; + --animation: .15s ease; + --page-animation: .3s ease; + --status-height: 48px; + --accent-color: #31b545; + --main-color: #f8a917; + --text-color: #222; + --page-hint-color: #83878a; + --hint-color: #74787a; + --placeholder-color: #999da1; + --ripple-duration: .45s; + --ripple-end-duration: .3s; + -webkit-user-select: none; + user-select: none; + cursor: default; +} +html.dark body { + --block-bg-color: var(--tg-theme-bg-color); + --bg-color: #0f0f0f; + --text-color: #fff; + --page-hint-color: #9b9ba1; + --hint-color: #64666d; + --placeholder-color: #5d6163; +} +body.order-mode { + background-color: var(--bg-color); +} + +* { + -webkit-tap-highlight-color: transparent; +} + +.cafe-page { + transition: filter var(--animation); +} +body.closed .cafe-page { + filter: grayscale(1) opacity(0.7); +} + +.cafe-block { + background-color: var(--block-bg-color); + -webkit-box-shadow: 0 0.5px rgba(0, 0, 0, .07); + box-shadow: 0 0.5px rgba(0, 0, 0, .07); +} + +.cafe-items { + display: flex; + flex-wrap: wrap; + margin: 0 auto; + max-width: 480px; + justify-content: space-around; + align-content: flex-end; + transition: -webkit-filter var(--animation), max-height var(--page-animation); + background-color: var(--block-bg-color); +} +body.order-mode .cafe-items { + max-height: 0 !important; +} +.cafe-items:after { + content: ''; + flex-grow: 2; +} +.cafe-item, +.cafe-item-shadow { + position: relative; + width: 120px; + height: 144px; + padding: 4px 5px 6px; + margin-bottom: 15px; + box-sizing: border-box; + text-align: center; +} +.cafe-item-shadow { + height: 0; + padding: 0; + margin: 0; +} +.cafe-item-photo { + position: relative; + height: 78px; +} +.cafe-item-photo .cafe-item-emoji { + font-size: 70px; + line-height: 78px; +} +.cafe-item-lottie { + display: inline-block; + vertical-align: top; + position: relative; + margin: 0 auto; +} +.cafe-item-photo .cafe-item-lottie { + width: 74px; +} +.cafe-item-lottie:before { + content: ''; + display: block; + padding-top: 100%; +} +.cafe-item-lottie img, +.cafe-item-lottie canvas { + position: absolute; + top: 0; bottom: 0; + left: 0; right: 0; + width: 100%; + height: 100%; +} +.cafe-item-label { + display: flex; + justify-content: center; +} +.cafe-item-price { + font-weight: 700; + white-space: nowrap; +} +.cafe-item-price:before { + display: inline-block; + vertical-align: top; + content: ''; + width: 2px; + height: 2px; + border-radius: 2px; + background-color: currentColor; + margin: 7px 4px; +} +.cafe-item-buttons { + display: flex; + width: 80px; + justify-content: space-between; + margin: 10px auto 0; + position: relative; + transition: all var(--animation); +} +button { + cursor: pointer; +} +button, +.cafe-item-counter { + display: inline-block; + font-family: 'SF-Pro-Rounded', sans-serif; + font-weight: 700; + font-size: 14px; + line-height: 18px; + padding: 6px 16px; + height: 30px; + border-radius: 7px; + box-sizing: border-box; + background-color: var(--main-color); + text-transform: uppercase; + color: #fff; + outline: none; + border: none; +} +.cafe-item-counter { + position: absolute; + right: 0; + top: 0; + min-width: 22px; + height: 22px; + padding: 2px 6px; + margin: 4px 6px; + border-radius: 11px; + transform: scale3d(0, 0, 1); + animation: var(--animation) both; + pointer-events: none; + z-index: 3; +} +.cafe-item-incr-button { + position: absolute !important; + top: 0; + right: 0; + transition: width var(--animation); + width: 80px; +} +.selected .cafe-item-incr-button { + width: 38px; +} +.cafe-item-decr-button { + position: relative; + width: 38px; +} +.cafe-item-decr-button { + background-color: #e64d44; + pointer-events: none; + transform: scale3d(0.9, 0.9, 1); + transition: transform var(--animation), visibility var(--animation); + visibility: hidden; +} +.selected .cafe-item-decr-button { + pointer-events: auto; + transform: scale3d(1, 1, 1); + visibility: visible; +} +.cafe-item-incr-button:before, +.cafe-item-incr-button:after, +.cafe-item-decr-button:before { + display: inline-block; + position: absolute; + content: ''; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + width: 14px; + height: 3px; + background-color: #fff; + border-radius: 1px; + z-index: 1; +} +.cafe-item-incr-button:before, +.cafe-item-incr-button:after { + background-color: rgba(255, 255, 255, 0); + transition: background-color var(--animation); +} +.selected .cafe-item-incr-button:before, +.selected .cafe-item-incr-button:after { + background-color: #fff; +} +.cafe-item-incr-button .button-item-label { + transition: transform var(--animation); +} +.selected .cafe-item-incr-button .button-item-label { + transform: scale3d(0.4, 0, 1); +} +.cafe-item-incr-button:after { + width: 3px; + height: 14px; +} + +.cafe-status { + position: fixed; + bottom: 0; + left: 0; + right: 0; + display: block; + width: 100%; + padding: 8px 20px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 0; + background-color: #e64d44; + box-shadow: 0 var(--status-height) #e64d44; + color: #fff; + height: var(--status-height); + transition: transform var(--animation), visibility var(--animation); + transform: translateY(var(--status-height)); + box-sizing: border-box; + pointer-events: none; + visibility: hidden; + z-index: 11; +} +.cafe-status.shown { + pointer-events: auto; + visibility: visible; + transform: translateY(0); +} + +.cafe-order-overview { + display: none; /*temp*/ + font-family: 'SF-Pro-Rounded', sans-serif; + background-color: var(--bg-color); + transition: opacity var(--page-animation); + opacity: 0; +} +body.order-mode .cafe-order-overview { + opacity: 1; +} +.cafe-order-header-wrap { + padding: 21px 20px 14px; + display: flex; + align-items: center; +} +.cafe-order-header { + font-size: 17px; + line-height: 21px; + text-transform: uppercase; + flex-grow: 1; + padding: 0; + margin: 0; +} +.cafe-order-edit { + font-size: 15px; + line-height: 18px; + font-weight: 500; + color: var(--accent-color); +} +.cafe-order-item { + display: none; + padding: 5px 20px 5px 14px; +} +.cafe-order-item.selected { + display: flex; +} +.cafe-order-item-label { + flex-grow: 1; +} +.cafe-order-item-photo { + text-align: center; + width: 50px; + height: 50px; + margin-right: 11px; +} +.cafe-order-item-photo .cafe-item-emoji { + font-size: 38px; + line-height: 50px; +} +.cafe-order-item-photo .cafe-item-lottie { + width: 40px; + margin: 4px 0; +} +.cafe-order-item-title { + font-size: 15px; + line-height: 18px; + font-weight: 700; + padding: 3px 0; +} +.cafe-order-item-counter { + color: var(--main-color); +} +.cafe-order-item-description { + font-size: 14px; + line-height: 17px; + font-weight: 500; + -webkit-font-smoothing: antialiased; + color: var(--page-hint-color); + padding: 2px 0; +} +.cafe-order-item-price { + font-size: 14px; + line-height: 17px; + font-weight: 500; + padding: 4px 0; +} + +.cafe-text-field-wrap { + margin-top: 14px; +} +.cafe-text-field { + font-family: 'SF-Pro-Rounded', sans-serif; + font-size: 17px; + line-height: 21px; + font-weight: 500; + -webkit-font-smoothing: antialiased; + padding: 12px 20px 13px; + box-sizing: border-box; + display: block; + outline: none; + border: none; + border-radius: 0; + resize: none; + color: var(--text-color); + -webkit-user-select: auto; + user-select: auto; + cursor: auto; + width: 100%; +} +.cafe-text-field::-webkit-input-placeholder { + transition: color var(--animation); + color: var(--placeholder-color); + text-overflow: ellipsis; +} +.cafe-text-field::-moz-placeholder { + transition: color var(--animation); + color: var(--placeholder-color); + text-overflow: ellipsis; +} +.cafe-text-field:-ms-input-placeholder { + transition: color var(--animation); + color: var(--placeholder-color); + text-overflow: ellipsis; +} +.cafe-text-field::placeholder { + text-overflow: ellipsis; +} +.cafe-text-field-hint { + font-family: 'SF-Pro-Rounded', sans-serif; + font-size: 14px; + line-height: 18px; + font-weight: 500; + -webkit-font-smoothing: antialiased; + padding: 10px 20px 14px; + color: var(--hint-color); +} + + +.button-item.ripple-handler { + position: relative; +} +.ripple-mask { + position: absolute; + left: 0; right: 0; + top: 0; bottom: 0; + transform: translateZ(0); + overflow: hidden; + pointer-events: none; +} +.button-item .ripple-mask { + border-radius: inherit; +} +.button-item .ripple { + position: absolute; + width: 200%; + left: 50%; top: 50%; + margin: -100% 0 0 -100%; + padding-top: 200%; + border-radius: 50%; + background-color: rgba(0, 0, 0, 0.07); + transition: + transform var(--ripple-duration) ease-out, + opacity var(--ripple-duration) ease-out, + background-color var(--ripple-duration) ease-out; + opacity: 0; +} +.button-item-label { + display: inline-block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + position: relative; + z-index: 1; +} + +.cafe-item-add-button .ripple, +.cafe-item-incr-button .ripple { + background-color: #ed960b; +} +.cafe-item-decr-button .ripple { + background-color: #d3362d; +} + + +.loading-icon { + position: absolute; + top: 0; + right: 0; + pointer-events: none; + transform: scale(0); + visibility: hidden; + opacity: 0.2; + transform-origin: 50%; + transition: all var(--animation); +} +body.loading .loading-icon { + transition-delay: .4s; + transform: scale(1); + visibility: visible; + opacity: 1; +} +.loading-icon-circle { + stroke: #fff; + stroke-width: 2.25px; + stroke-linecap: round; + fill: transparent; + transform: rotateZ(-90deg); + transform-origin: 50%; + animation: rotate-circle linear 1.5s infinite, resize-circle linear 360s infinite; + stroke-dasharray: calc(var(--radius) * 6.28); + r: var(--radius); + --radius: 9px; +} + +@-webkit-keyframes rotate-circle { + from { transform: rotateZ(-90deg); } + to { transform: rotateZ(630deg); } +} +@keyframes rotate-circle { + from { transform: rotateZ(-90deg); } + to { transform: rotateZ(630deg); } +} + +@-webkit-keyframes resize-circle { + from { stroke-dashoffset: 0; } + to { stroke-dashoffset: 12500px; } +} +@keyframes resize-circle { + from { stroke-dashoffset: 0; } + to { stroke-dashoffset: 12500px; } +} + +@-webkit-keyframes badge-incr { + from, to { transform: scale3d(1, 1, 1); } + 40% { transform: scale3d(1.2, 1.2, 1); } +} +@keyframes badge-incr { + from, to { transform: scale3d(1, 1, 1); } + 40% { transform: scale3d(1.2, 1.2, 1); } +} + +@-webkit-keyframes badge-incr2 { + from, to { transform: scale3d(1, 1, 1); } + 40% { transform: scale3d(1.2, 1.2, 1); } +} +@keyframes badge-incr2 { + from, to { transform: scale3d(1, 1, 1); } + 40% { transform: scale3d(1.2, 1.2, 1); } +} + +@-webkit-keyframes badge-decr { + from, to { transform: scale3d(1, 1, 1); } + 40% { transform: scale3d(0.8, 0.8, 1); } +} +@keyframes badge-decr { + from, to { transform: scale3d(1, 1, 1); } + 40% { transform: scale3d(0.8, 0.8, 1); } +} + +@-webkit-keyframes badge-decr2 { + from, to { transform: scale3d(1, 1, 1); } + 40% { transform: scale3d(0.8, 0.8, 1); } +} +@keyframes badge-decr2 { + from, to { transform: scale3d(1, 1, 1); } + 40% { transform: scale3d(0.8, 0.8, 1); } +} + +@-webkit-keyframes badge-show { + from { transform: scale3d(0.5, 0.5, 1); opacity: 0; visibility: hidden; } + 30% { transform: scale3d(1.2, 1.2, 1); } + to { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; } +} +@keyframes badge-show { + from { transform: scale3d(0.5, 0.5, 1); opacity: 0; visibility: hidden; } + 30% { transform: scale3d(1.2, 1.2, 1); } + to { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; } +} + +@-webkit-keyframes badge-hide { + from { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; } + to { transform: scale3d(0.5, 0.5, 1); opacity: 0; visibility: hidden; } +} +@keyframes badge-hide { + from { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; } + to { transform: scale3d(0.5, 0.5, 1); opacity: 0; visibility: hidden; } +} diff --git a/data/webappcontent.telegram.org/js/cafe.js b/data/webappcontent.telegram.org/js/cafe.js new file mode 100644 index 0000000000..f2727a8366 --- /dev/null +++ b/data/webappcontent.telegram.org/js/cafe.js @@ -0,0 +1,347 @@ +(function($) { + $.fn.redraw = function() { + return this.map(function(){ this.offsetTop; return this; }); + }; +})(jQuery); + +var Cafe = { + canPay: false, + modeOrder: false, + totalPrice: 0, + + init: function(options) { + Telegram.WebApp.ready(); + Cafe.apiUrl = options.apiUrl; + Cafe.userId = options.userId; + Cafe.userHash = options.userHash; + Cafe.initLotties(); + var userId = Telegram.WebApp.initData && Telegram.WebApp.initData.user && Telegram.WebApp.initData.user.id || Cafe.userId; + $('body').show(); + if (!userId) { + Cafe.isClosed = true; + $('body').addClass('closed'); + Cafe.showStatus('Cafe is temporarily closed'); + return; + } + $('.js-item-lottie').on('click', Cafe.eLottieClicked); + $('.js-item-incr-btn').on('click', Cafe.eIncrClicked); + $('.js-item-decr-btn').on('click', Cafe.eDecrClicked); + $('.js-order-edit').on('click', Cafe.eEditClicked); + $('.js-status').on('click', Cafe.eStatusClicked); + $('.js-order-comment-field').each(function() { + autosize(this); + }); + Telegram.WebApp.MainButton.setParams({ + text_color: '#fff' + }).onClick(Cafe.mainBtnClicked); + initRipple(); + }, + initLotties: function() { + $('.js-item-lottie').each(function() { + RLottie.init(this, { + maxDeviceRatio: 2, + cachingModulo: 3, + noAutoPlay: true + }); + }); + }, + eLottieClicked: function(e) { + if (Cafe.isClosed) { + return false; + } + RLottie.playOnce(this); + }, + eIncrClicked: function(e) { + e.preventDefault(); + var itemEl = $(this).parents('.js-item'); + Cafe.incrClicked(itemEl, 1); + }, + eDecrClicked: function(e) { + e.preventDefault(); + var itemEl = $(this).parents('.js-item'); + Cafe.incrClicked(itemEl, -1); + }, + eEditClicked: function(e) { + e.preventDefault(); + Cafe.toggleMode(false); + }, + getOrderItem: function(itemEl) { + var id = itemEl.data('item-id'); + return $('.js-order-item').filter(function() { + return ($(this).data('item-id') == id); + }); + }, + updateItem: function(itemEl, delta) { + var price = +itemEl.data('item-price'); + var count = +itemEl.data('item-count') || 0; + var counterEl = $('.js-item-counter', itemEl); + counterEl.text(count ? count : 1); + var isSelected = itemEl.hasClass('selected'); + if (!isSelected && count > 0) { + $('.js-item-lottie', itemEl).each(function() { + RLottie.playOnce(this); + }); + } + var anim_name = isSelected ? (delta > 0 ? 'badge-incr' : (count > 0 ? 'badge-decr' : 'badge-hide')) : 'badge-show'; + var cur_anim_name = counterEl.css('animation-name'); + if ((anim_name == 'badge-incr' || anim_name == 'badge-decr') && anim_name == cur_anim_name) { + anim_name += '2'; + } + counterEl.css('animation-name', anim_name); + itemEl.toggleClass('selected', count > 0); + + var orderItemEl = Cafe.getOrderItem(itemEl); + var orderCounterEl = $('.js-order-item-counter', orderItemEl); + orderCounterEl.text(count ? count : 1); + orderItemEl.toggleClass('selected', count > 0); + var orderPriceEl = $('.js-order-item-price', orderItemEl); + var item_price = count * price; + orderPriceEl.text(Cafe.formatPrice(item_price)); + + Cafe.updateTotalPrice(); + }, + incrClicked: function(itemEl, delta) { + if (Cafe.isLoading || Cafe.isClosed) { + return false; + } + var count = +itemEl.data('item-count') || 0; + count += delta; + if (count < 0) { + count = 0; + } + itemEl.data('item-count', count); + Cafe.updateItem(itemEl, delta); + }, + formatPrice: function(price) { + return '$' + Cafe.formatNumber(price / 1000, 2, '.', ','); + }, + formatNumber: function(number, decimals, decPoint, thousandsSep) { + number = (number + '').replace(/[^0-9+\-Ee.]/g, '') + var n = !isFinite(+number) ? 0 : +number + var prec = !isFinite(+decimals) ? 0 : Math.abs(decimals) + var sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep + var dec = (typeof decPoint === 'undefined') ? '.' : decPoint + var s = '' + var toFixedFix = function (n, prec) { + if (('' + n).indexOf('e') === -1) { + return +(Math.round(n + 'e+' + prec) + 'e-' + prec) + } else { + var arr = ('' + n).split('e') + var sig = '' + if (+arr[1] + prec > 0) { + sig = '+' + } + return (+(Math.round(+arr[0] + 'e' + sig + (+arr[1] + prec)) + 'e-' + prec)).toFixed(prec) + } + } + s = (prec ? toFixedFix(n, prec).toString() : '' + Math.round(n)).split('.') + if (s[0].length > 3) { + s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep) + } + if ((s[1] || '').length < prec) { + s[1] = s[1] || '' + s[1] += new Array(prec - s[1].length + 1).join('0') + } + return s.join(dec) + }, + updateMainButton: function() { + var mainButton = Telegram.WebApp.MainButton; + if (Cafe.modeOrder) { + if (Cafe.isLoading) { + mainButton.setParams({ + is_visible: true, + color: '#65c36d' + }).showProgress(); + } else { + mainButton.setParams({ + is_visible: !!Cafe.canPay, + text: 'PAY ' + Cafe.formatPrice(Cafe.totalPrice), + color: '#31b545' + }).hideProgress(); + } + } else { + mainButton.setParams({ + is_visible: !!Cafe.canPay, + text: 'VIEW ORDER', + color: '#31b545' + }).hideProgress(); + } + }, + updateTotalPrice: function() { + var total_price = 0; + $('.js-item').each(function() { + var itemEl = $(this) + var price = +itemEl.data('item-price'); + var count = +itemEl.data('item-count') || 0; + total_price += price * count; + }); + Cafe.canPay = total_price > 0; + Cafe.totalPrice = total_price; + Cafe.updateMainButton(); + }, + getOrderData: function() { + var order_data = []; + $('.js-item').each(function() { + var itemEl = $(this) + var id = itemEl.data('item-id'); + var count = +itemEl.data('item-count') || 0; + if (count > 0) { + order_data.push({id: id, count: count}); + } + }); + return JSON.stringify(order_data); + }, + toggleMode: function(mode_order) { + Cafe.modeOrder = mode_order; + if (mode_order) { + var height = $('.cafe-items').height(); + $('.cafe-order-overview').show(); + $('.cafe-items').css('maxHeight', height).redraw(); + $('body').addClass('order-mode'); + $('.js-order-comment-field').each(function() { + autosize.update(this); + }); + Telegram.WebApp.expand(); + } else { + $('body').removeClass('order-mode'); + setTimeout(function() { + $('.cafe-items').css('maxHeight', ''); + $('.cafe-order-overview').hide(); + }, 400); + } + Cafe.updateMainButton(); + }, + toggleLoading: function(loading) { + Cafe.isLoading = loading; + Cafe.updateMainButton(); + $('body').toggleClass('loading', !!Cafe.isLoading); + Cafe.updateTotalPrice(); + }, + mainBtnClicked: function() { + if (!Cafe.canPay || Cafe.isLoading || Cafe.isClosed) { + return false; + } + if (Cafe.modeOrder) { + var comment = $('.js-order-comment-field').val(); + var params = { + order_data: Cafe.getOrderData(), + comment: comment + }; + if (!Telegram.WebApp.initData || + !Telegram.WebApp.initData.user || + !Telegram.WebApp.initData.user.id) { + params.user_id = Cafe.userId; + params.user_hash = Cafe.userHash; + } + Cafe.toggleLoading(true); + Cafe.apiRequest('makeOrder', params, function(result) { + Cafe.toggleLoading(false); + if (result.ok) { + Telegram.WebApp.close(); + } + if (result.error) { + Cafe.showStatus(result.error); + } + }); + } else { + Cafe.toggleMode(true); + } + }, + eStatusClicked: function() { + Cafe.hideStatus(); + }, + showStatus: function(text) { + clearTimeout(Cafe.statusTo); + $('.js-status').text(text).addClass('shown'); + if (!Cafe.isClosed) { + Cafe.statusTo = setTimeout(function(){ Cafe.hideStatus(); }, 2500); + } + }, + hideStatus: function() { + clearTimeout(Cafe.statusTo); + $('.js-status').removeClass('shown'); + }, + apiRequest: function(method, data, onCallback) { + var authData = Telegram.WebApp.initDataRaw || ''; + $.ajax(Cafe.apiUrl, { + 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'}); + } + }); + } +}; + +/*! + Autosize 3.0.20 + license: MIT + http://www.jacklmoore.com/autosize +*/ +!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var n={exports:{}};t(n.exports,n),e.autosize=n.exports}}(this,function(e,t){"use strict";function n(e){function t(){var t=window.getComputedStyle(e,null);"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),s="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(s)&&(s=0),l()}function n(t){var n=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=n,e.style.overflowY=t}function o(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}function r(){var t=e.style.height,n=o(e),r=document.documentElement&&document.documentElement.scrollTop;e.style.height="auto";var i=e.scrollHeight+s;return 0===e.scrollHeight?void(e.style.height=t):(e.style.height=i+"px",u=e.clientWidth,n.forEach(function(e){e.node.scrollTop=e.scrollTop}),void(r&&(document.documentElement.scrollTop=r)))}function l(){r();var t=Math.round(parseFloat(e.style.height)),o=window.getComputedStyle(e,null),i=Math.round(parseFloat(o.height));if(i!==t?"visible"!==o.overflowY&&(n("visible"),r(),i=Math.round(parseFloat(window.getComputedStyle(e,null).height))):"hidden"!==o.overflowY&&(n("hidden"),r(),i=Math.round(parseFloat(window.getComputedStyle(e,null).height))),a!==i){a=i;var l=d("autosize:resized");try{e.dispatchEvent(l)}catch(e){}}}if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!i.has(e)){var s=null,u=e.clientWidth,a=null,p=function(){e.clientWidth!==u&&l()},c=function(t){window.removeEventListener("resize",p,!1),e.removeEventListener("input",l,!1),e.removeEventListener("keyup",l,!1),e.removeEventListener("autosize:destroy",c,!1),e.removeEventListener("autosize:update",l,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),i.delete(e)}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",c,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",l,!1),window.addEventListener("resize",p,!1),e.addEventListener("input",l,!1),e.addEventListener("autosize:update",l,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",i.set(e,{destroy:c,update:l}),t()}}function o(e){var t=i.get(e);t&&t.destroy()}function r(e){var t=i.get(e);t&&t.update()}var i="function"==typeof Map?new Map:function(){var e=[],t=[];return{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){e.indexOf(n)===-1&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}}(),d=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){d=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?(l=function(e){return e},l.destroy=function(e){return e},l.update=function(e){return e}):(l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return n(e,t)}),e},l.destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e}),t.exports=l}); + +/* Ripple */ + +function initRipple() { + if (!document.querySelectorAll) return; + var rippleHandlers = document.querySelectorAll('.ripple-handler'); + var redraw = function(el) { el.offsetTop + 1; } + var isTouch = ('ontouchstart' in window); + for (var i = 0; i < rippleHandlers.length; i++) { + (function(rippleHandler) { + function onRippleStart(e) { + var rippleMask = rippleHandler.querySelector('.ripple-mask'); + if (!rippleMask) return; + var rect = rippleMask.getBoundingClientRect(); + if (e.type == 'touchstart') { + var clientX = e.targetTouches[0].clientX; + var clientY = e.targetTouches[0].clientY; + } else { + var clientX = e.clientX; + var clientY = e.clientY; + } + var rippleX = (clientX - rect.left) - rippleMask.offsetWidth / 2; + var rippleY = (clientY - rect.top) - rippleMask.offsetHeight / 2; + var ripple = rippleHandler.querySelector('.ripple'); + ripple.style.transition = 'none'; + redraw(ripple); + ripple.style.transform = 'translate3d(' + rippleX + 'px, ' + rippleY + 'px, 0) scale3d(0.2, 0.2, 1)'; + ripple.style.opacity = 1; + redraw(ripple); + ripple.style.transform = 'translate3d(' + rippleX + 'px, ' + rippleY + 'px, 0) scale3d(1, 1, 1)'; + ripple.style.transition = ''; + + function onRippleEnd(e) { + ripple.style.transitionDuration = 'var(--ripple-end-duration, .2s)'; + ripple.style.opacity = 0; + if (isTouch) { + document.removeEventListener('touchend', onRippleEnd); + document.removeEventListener('touchcancel', onRippleEnd); + } else { + document.removeEventListener('mouseup', onRippleEnd); + } + } + if (isTouch) { + document.addEventListener('touchend', onRippleEnd); + document.addEventListener('touchcancel', onRippleEnd); + } else { + document.addEventListener('mouseup', onRippleEnd); + } + } + if (isTouch) { + rippleHandler.removeEventListener('touchstart', onRippleStart); + rippleHandler.addEventListener('touchstart', onRippleStart); + } else { + rippleHandler.removeEventListener('mousedown', onRippleStart); + rippleHandler.addEventListener('mousedown', onRippleStart); + } + })(rippleHandlers[i]); + } +}