diff --git a/data/web/corefork.telegram.org/api/gifs.html b/data/web/corefork.telegram.org/api/gifs.html index a8c5417d3a..7f90d1b421 100644 --- a/data/web/corefork.telegram.org/api/gifs.html +++ b/data/web/corefork.telegram.org/api/gifs.html @@ -39,7 +39,7 @@
-
+

Working with GIFs

diff --git a/data/web/fragment.com/css/auction.css b/data/web/fragment.com/css/auction.css index ad26c15845..01a70f305e 100644 --- a/data/web/fragment.com/css/auction.css +++ b/data/web/fragment.com/css/auction.css @@ -52,7 +52,8 @@ --popup-border-radius: 12px; --bg-rgb: 26, 32, 38; --bg-color: rgb(var(--bg-rgb)); - --header-bg-color: rgba(33, 42, 51, .9); + --header-bg-rgb: 33, 42, 51; + --header-bg-color: rgba(var(--header-bg-rgb), .9); --bg-hover-color: #212a33; --def-transition-duration: .2s; --def-transition: var(--def-transition-duration) ease; @@ -104,6 +105,10 @@ a:focus { color: var(--accent-color); } +.mini-frac { + font-size: 80%; +} + .link-text { color: var(--accent-color); cursor: pointer; @@ -295,19 +300,38 @@ i.icon { margin-bottom: 20px; } .tm-main-form-link-wrap { - font-size: 15px; + font-size: 13px; line-height: 19px; - margin-top: 30px; + margin-top: 20px; text-align: center; } -.tm-form-radio-item { +.tm-form-radio-items { + margin: -4px 0; +} +.tm-form-radio-item, +.tm-form-radio-item-more { display: block; position: relative; + padding: 4px 0; margin-bottom: 0; cursor: pointer; } -.tm-form-radio-item + .tm-form-radio-item { - margin-top: 8px; +.icon-options-more:after { + width: 20px; + height: 20px; + background-image: var(--image-url-options-more-icon); +} +.tm-form-radio-item-wrap { + padding: 0 3px; + margin: 0 -3px; + height: 56px; + transition: all var(--def-transition); + overflow: hidden; +} +.options-expanded .tm-form-radio-item-wrap.tm-more-options, +.options-collapsed .tm-form-radio-item-wrap.tm-second-option { + visibility: hidden; + height: 0; } .tm-form-radio-item input.radio { position: absolute; @@ -327,6 +351,9 @@ i.icon { position: relative; overflow: hidden; } +.tm-form-radio-label svg { + color: var(--field-bg-color); +} .tm-form-radio-item input.radio ~ .tm-form-radio-label:before { display: inline-block; flex-shrink: 0; @@ -339,7 +366,7 @@ i.icon { background-color: var(--accent-color); box-shadow: inset 0 0 0 20px var(--field-bg-color); transition: border-color var(--def-transition), box-shadow var(--def-transition); - margin-right: 19px; + margin-right: 14px; } .tm-form-radio-item input.radio:checked ~ .tm-form-radio-label { box-shadow: 0 0 0 2px var(--accent-color); @@ -348,6 +375,11 @@ i.icon { box-shadow: inset 0 0 0 2px var(--field-bg-color); border-color: var(--accent-color); } +.tm-form-radio-item-more .tm-form-radio-label { + display: block; + text-align: center; + color: var(--accent-color); +} .tm-form-radio-label .tm-radio-label { flex-grow: 1; } @@ -366,12 +398,17 @@ i.icon { .tm-form-radio-label .tm-value { width: 70px; } +.tm-stars-price .tm-value.icon-ton:before, .tm-form-radio-label .tm-value.icon-ton:before { width: 15px; height: 19px; margin-left: -1px; margin-right: 4px; } +.tm-stars-options .tm-form-radio-label .tm-value { + width: 100px; + text-align: right; +} .tm-form-radio-label .tm-radio-desc { font-weight: normal; text-align: right; @@ -689,7 +726,8 @@ i.icon { margin-right: 10px; } -.icon-telegram-premium { +.icon-telegram-premium, +.icon-telegram-stars { width: 22px; height: 30px; margin-left: 6px; @@ -697,6 +735,9 @@ i.icon { i.icon-telegram-premium { background-image: var(--image-url-telegram-premium); } +i.icon-telegram-stars { + background-image: var(--image-url-stars-icon); +} svg.icon-telegram-premium use { fill: var(--field-accent-color); scale: 0.833; @@ -710,6 +751,25 @@ svg.icon-telegram-premium use { fill: currentColor; scale: 0.9444; } +.tm-qr-code-label svg.icon-telegram-stars { + width: 20px; + height: 20px; + scale: 1.2; + margin: 4px 2px; +} +.tm-qr-code-label svg.icon-telegram-stars use { + transition: var(--def-transition) opacity; +} +.tm-qr-code-label svg.icon-telegram-stars use.icon-bg { + fill: currentColor; + opacity: 0; +} +.qr-inactive .tm-qr-code-label svg.icon-telegram-stars use.icon-main { + opacity: 0; +} +.qr-inactive .tm-qr-code-label svg.icon-telegram-stars use.icon-bg { + opacity: 1; +} .icon-ton-qr { width: 24px; @@ -717,13 +777,49 @@ svg.icon-telegram-premium use { margin-right: 2px; } -.tm-header-tabs { - display: flex; +.tm-header-tabs-wrap { position: absolute; left: 0; right: 0; top: 48px; +} +.tm-header-tabs { + display: flex; padding: 0 17px; + overflow-x: auto; +} +.tm-header-tabs::-webkit-scrollbar { + display: none; +} +.tm-header-tabs { + --shadow-gradient: rgba(var(--header-bg-rgb), 0) 0%, rgba(var(--header-bg-rgb), 1) 70%; + -ms-overflow-style: none; + scrollbar-width: none; +} +.tm-header-tabs:before, +.tm-header-tabs:after { + content: ''; + display: block; + position: absolute; + pointer-events: none; + width: 24px; + left: 0; + top: 0; + bottom: 0; + background: linear-gradient(-90deg, var(--shadow-gradient)); + transition: transform var(--def-transition); + transform: translateX(-10px); + z-index: 2; +} +.tm-header-tabs:after { + background: linear-gradient(90deg, var(--shadow-gradient)); + transform: translateX(10px); + right: 0; + left: auto; +} +.tm-header-tabs.leftscroll:before, +.tm-header-tabs.rightscroll:after { + transform: translateX(0); } .tm-header-tab, .tm-section-tab, @@ -771,7 +867,7 @@ a.tm-pagination-item.active:focus { border-radius: 3px 3px 0 0; } .tm-header-tab + .tm-header-tab { - margin-left: 26px; + margin-left: 17px; } .tm-label-new, .tm-label-soon { @@ -1424,7 +1520,7 @@ a.tm-menu-link:focus { /*left: 4px;*/ padding: 12px; cursor: pointer; - transition: all var(--def-transition); + transition: visibility var(--def-transition), opacity var(--def-transition); } .tm-search-loading { visibility: hidden; @@ -1436,6 +1532,7 @@ a.tm-menu-link:focus { /*left: auto;*/ /*right: 0;*/ } +.tm-input:placeholder-shown ~ .tm-search-clear, .tm-search-input:placeholder-shown ~ .tm-search-clear { visibility: hidden; opacity: 0; @@ -3379,6 +3476,29 @@ a.tm-table-action-link:hover { .tm-premium-boost-label.icon-boost:before { margin-right: 4px; } +.tm-stars-price { + position: absolute; + top: 0; + right: 0; + display: inline-flex; + font-size: 15px; + line-height: 20px; + padding: 11px 7px; + margin-right: 42px; + font-weight: bold; + transition: visibility var(--def-transition), opacity var(--def-transition); + color: #fff; +} +.tm-stars-price .tm-radio-desc { + font-weight: normal; + text-align: right; + color: var(--dropdown-secondary-color); + margin-left: 20px; +} +.tm-input:focus ~ .tm-stars-price { + visibility: hidden; + opacity: 0; +} .processing-popup-container .popup-body { width: 348px; @@ -3591,13 +3711,23 @@ a.tm-table-action-link:hover { .tm-header-actions { display: flex; } - .tm-header-tabs { + .tm-header-tabs-wrap { position: static; + } + .tm-header-tabs { padding: 0; + overflow-x: visible; + } + .tm-header-tabs:before, + .tm-header-tabs:after { + visibility: hidden; } .tm-header-tab { padding: 19px 0; } + .tm-header-tab + .tm-header-tab { + margin-left: 26px; + } .tm-header-menu-button { padding: 19px; } @@ -3719,7 +3849,8 @@ a.tm-table-action-link:hover { width: 10px; height: 19px; } - .icon-telegram-premium { + .icon-telegram-premium, + .icon-telegram-stars { width: 26px; height: 36px; margin-left: 7px; @@ -3790,9 +3921,9 @@ a.tm-table-action-link:hover { padding-left: 52px; } .tm-main-premium .tm-main-search-form .form-control-wrap.tm-coin-field:before { - width: 16px; + width: 20px; height: 20px; - margin: 14px 18px 14px 19px; + margin: 14px 16px 14px 17px; } .tm-main-premium .tm-main-search-form .tm-search-input, .tm-main-premium .tm-main-search-form .tm-search-prefix { @@ -3801,6 +3932,11 @@ a.tm-table-action-link:hover { .tm-main-form-group { margin-bottom: 28px; } + .tm-main-form-link-wrap { + font-size: 15px; + line-height: 19px; + margin-top: 30px; + } .tm-main-form-label-badge { font-size: 13px; line-height: 17px; @@ -4039,6 +4175,14 @@ a.tm-table-action-link:hover { margin-bottom: 23px; } + .tm-stars-price { + padding: 14px 7px; + margin-right: 48px; + } + .tm-form-radio-item input.radio ~ .tm-form-radio-label:before { + margin-right: 19px; + } + .tm-auction-section .tm-section-header-text { font-size: 28px; justify-content: start; @@ -4116,6 +4260,10 @@ a.tm-table-action-link:hover { .tm-form-radio-label .tm-value { width: 90px; } + .tm-stars-options .tm-form-radio-label .tm-value { + width: 110px; + text-align: left; + } .tm-form-radio-label .tm-radio-desc { width: 70px; } @@ -4203,7 +4351,7 @@ a.tm-table-action-link:hover { --image-url-ton-text-icon: url('data:image/svg+xml,%3Csvg%20height%3D%2220%22%20viewBox%3D%220%200%2016%2020%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m2.68%205h10.63c.22%200%20.4.18.4.41%200%20.07-.01.14-.05.2l-5.04%209.08c-.22.4-.72.54-1.11.32-.14-.08-.25-.19-.32-.33l-4.87-9.08c-.1-.2-.03-.45.17-.55.06-.03.12-.05.19-.05zm5.32%209.78v-9.78z%22%20fill%3D%22none%22%20stroke%3D%22%238c9aa9%22%20stroke-width%3D%221.39%22%2F%3E%3C%2Fsvg%3E'); - --image-url-stars-icon: url('data:image/svg+xml,%3Csvg%20height%3D%2245%22%20viewBox%3D%220%200%2046%2045%22%20width%3D%2246%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%2225%25%22%20x2%3D%2274.92%25%22%20y1%3D%22.825%25%22%20y2%3D%22107.86%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd951%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb222%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%2299.795%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e58f0d%22%2F%3E%3Cstop%20offset%3D%22.99963%22%20stop-color%3D%22%23eb7915%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20id%3D%22c%22%20d%3D%22m15.45%2013.17%205.29-10.61c.61-1.22%202.09-1.71%203.3-1.09.47.24.86.63%201.09%201.11l5%2010.23c.41.83%201.21%201.4%202.12%201.51l10.47%201.27c1.42.17%202.43%201.47%202.26%202.91-.07.59-.34%201.14-.76%201.56l-8.27%208.2c-.33.33-.49.8-.44%201.27l1.38%2011.08c.2%201.59-.92%203.04-2.49%203.23-.59.08-1.19-.04-1.72-.32l-8.74-4.81c-.63-.35-1.39-.36-2.03-.03l-9.06%204.68c-1.27.66-2.83.14-3.48-1.14-.25-.49-.34-1.03-.26-1.57l.72-5.08c.36-2.49%201.89-4.64%204.1-5.78l10.06-5.17c.27-.14.37-.47.24-.74-.11-.21-.34-.33-.57-.29l-12.3%201.77c-1.88.27-3.78-.27-5.26-1.48l-4.09-3.36c-1.17-.96-1.35-2.7-.4-3.88.44-.55%201.08-.9%201.77-.99l10.5-1.36c.68-.09%201.26-.51%201.57-1.12z%22%2F%3E%3Cfilter%20id%3D%22d%22%20height%3D%22111.7%25%22%20width%3D%22111.4%25%22%20x%3D%22-5.7%25%22%20y%3D%22-5.9%25%22%3E%3CfeOffset%20dx%3D%222%22%20dy%3D%223%22%20in%3D%22SourceAlpha%22%20result%3D%22shadowOffsetInner1%22%2F%3E%3CfeComposite%20in%3D%22shadowOffsetInner1%22%20in2%3D%22SourceAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%20result%3D%22shadowInnerInner1%22%2F%3E%3CfeColorMatrix%20in%3D%22shadowInnerInner1%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%20%20%200%200%200%200%201%20%20%200%200%200%200%201%20%200%200%200%200.65667938%200%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cuse%20fill%3D%22url%28%23a%29%22%20fill-rule%3D%22evenodd%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3Cuse%20fill%3D%22%23000%22%20filter%3D%22url%28%23d%29%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3Cuse%20stroke%3D%22url%28%23b%29%22%20stroke-width%3D%222%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); + --image-url-stars-icon: url('data:image/svg+xml,%3Csvg%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cpath%20id%3D%22a%22%20d%3D%22m6.02%204.99%202.21-4.42c.25-.51.86-.72%201.37-.46.2.1.36.27.46.47l2.08%204.26c.17.34.5.58.88.63l4.36.52c.59.08%201.02.62.95%201.22-.03.24-.14.47-.32.65l-3.45%203.42c-.14.13-.2.33-.18.53l.57%204.61c.09.66-.38%201.27-1.03%201.35-.25.03-.5-.02-.72-.14l-3.64-2c-.26-.14-.58-.15-.85-.01l-3.77%201.95c-.53.27-1.18.06-1.45-.48-.11-.2-.14-.43-.11-.65l.3-2.12c.15-1.04.79-1.93%201.71-2.41l4.19-2.15c.11-.06.15-.2.1-.31-.05-.09-.14-.14-.24-.12l-5.12.74c-.78.11-1.58-.11-2.19-.62l-1.71-1.4c-.49-.4-.56-1.12-.17-1.62.19-.22.45-.37.74-.41l4.38-.57c.28-.03.52-.21.65-.46z%22%2F%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%2225%25%22%20x2%3D%2274.92%25%22%20y1%3D%22.825%25%22%20y2%3D%22107.86%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd951%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb222%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%2299.8%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e58f0d%22%2F%3E%3Cstop%20offset%3D%22.9996%22%20stop-color%3D%22%23eb7915%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22d%22%20height%3D%22110.6%25%22%20width%3D%22110.3%25%22%20x%3D%22-5.2%25%22%20y%3D%22-5.3%25%22%3E%3CfeOffset%20dx%3D%221%22%20dy%3D%221%22%20in%3D%22SourceAlpha%22%20result%3D%22shadowOffsetInner1%22%2F%3E%3CfeComposite%20in%3D%22shadowOffsetInner1%22%20in2%3D%22SourceAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%20result%3D%22shadowInnerInner1%22%2F%3E%3CfeColorMatrix%20in%3D%22shadowInnerInner1%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.657%200%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%281.389%201.389%29%22%3E%3Cuse%20fill%3D%22url%28%23b%29%22%20fill-rule%3D%22evenodd%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3Cuse%20fill%3D%22%23000%22%20filter%3D%22url%28%23d%29%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3Cuse%20stroke%3D%22url%28%23c%29%22%20stroke-width%3D%22.89%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); --image-url-support-bots-icon: url('data:image/svg+xml,%3Csvg%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%234db2ff%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%28.67%202%29%22%3E%3Cpath%20d%3D%22m7.33%200c2.58%200%204.67%202.09%204.67%204.67v4.56c0%201.28-1.04%202.33-2.33%202.33h-4.68c-1.28%200-2.32-1.05-2.32-2.33v-4.56c0-2.58%202.09-4.67%204.66-4.67zm0%201.11c-1.96%200-3.55%201.59-3.55%203.56v.44c0%20.74.59%201.33%201.33%201.33h4.45c.73%200%201.33-.59%201.33-1.33v-.44c0-1.97-1.59-3.56-3.56-3.56z%22%2F%3E%3Crect%20height%3D%224.89%22%20rx%3D%22.89%22%20width%3D%221.78%22%20x%3D%2212.89%22%20y%3D%224.89%22%2F%3E%3Crect%20height%3D%224.89%22%20rx%3D%22.89%22%20width%3D%221.78%22%20y%3D%224.89%22%2F%3E%3Cellipse%20cx%3D%228.89%22%20cy%3D%224.22%22%20rx%3D%221%22%20ry%3D%221%22%2F%3E%3Cellipse%20cx%3D%225.78%22%20cy%3D%224.22%22%20rx%3D%221%22%20ry%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); @@ -4232,4 +4380,6 @@ a.tm-table-action-link:hover { --image-url-boost-icon: url('data:image/svg+xml,%3Csvg%20height%3D%2218%22%20viewBox%3D%220%200%2011%2018%22%20width%3D%2211%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m5.84.14-5.74%206.53c-.15.17-.13.43.04.58.07.07.17.1.27.1h2.14c.23%200%20.41.19.41.41%200%20.03%200%20.05-.01.07l-.83%204.94c-.04.22.11.43.34.47.14.03.28-.03.38-.14l5.75-6.71c.15-.17.13-.43-.04-.58-.08-.06-.17-.1-.27-.1h-2.02c-.23%200-.41-.18-.41-.41%200-.02%200-.04%200-.06l.71-4.77c.03-.22-.13-.43-.35-.47-.14-.02-.28.04-.37.14z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%281.1555%202.3794%29%22%2F%3E%3C%2Fsvg%3E'); --image-url-app-more-icon: url('data:image/svg+xml,%3Csvg%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%20width%3D%2226%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20opacity%3D%22.07%22%20r%3D%2213%22%2F%3E%3Cg%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2213%22%20r%3D%221.67%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%221.67%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2213%22%20r%3D%221.67%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); + + --image-url-options-more-icon: url('data:image/svg+xml,%3Csvg%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m4.5%208.2%205.1%205.1c.2.2.5.2.7%200l5.2-5.1%22%20fill%3D%22none%22%20stroke%3D%22%234db2ff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E'); } diff --git a/data/web/fragment.com/js/auction.js b/data/web/fragment.com/js/auction.js index ff18605a58..dd5664eda0 100644 --- a/data/web/fragment.com/js/auction.js +++ b/data/web/fragment.com/js/auction.js @@ -33,9 +33,12 @@ var Main = { state.$mainSearchForm.field('query').on('input', Main.eMainSearchInput); state.mainSearchCache = {}; $('.js-form-clear', state.$mainSearchForm).on('click', Main.eMainSearchClear); + $('.js-x-scrollable').on('scroll', Main.eXScrollableUpdate); + $(window).on('resize', Main.eXScrollablesUpdate); Main.updateTime(); Main.initViewport(); Main.initLogo(); + Main.eXScrollablesUpdate(); }); Aj.onUnload(function(state) { clearTimeout(Aj.state.searchTimeout); @@ -46,6 +49,8 @@ var Main = { state.$mainSearchForm.off('submit', Main.eMainSearchSubmit); state.$mainSearchForm.field('query').off('input', Main.eMainSearchInput); $('.js-form-clear', state.$mainSearchForm).off('click', Main.eMainSearchClear); + $('.js-x-scrollable').off('scroll', Main.eXScrollableUpdate); + $(window).off('resize', Main.eXScrollablesUpdate); }); }, initForm: function(form) { @@ -237,6 +242,15 @@ var Main = { e.preventDefault(); closePopup(Aj.state.$headerMenu); }, + eXScrollableUpdate: function() { + $(this).toggleClass('leftscroll', this.scrollLeft > 0); + $(this).toggleClass('rightscroll', this.scrollLeft < this.scrollWidth - this.clientWidth); + }, + eXScrollablesUpdate: function() { + $('.js-x-scrollable').each(function() { + Main.eXScrollableUpdate.apply(this); + }); + }, openSimplePopup: function($popup) { var onEnterPress = function(e) { if (e.keyCode == Keys.RETURN) { @@ -1909,7 +1923,7 @@ var Premium = { var $field = Aj.state.$premiumSearchField; var $btn = Aj.state.$giftPremiumBtn; $form.field('recipient').value(''); - $form.field('query').value('').prop('disabled', false); + $form.field('query').value('').prop('disabled', false).focus(); $form.removeClass('myself'); $btn.prop('disabled', true); $field.removeClass('found'); @@ -2196,7 +2210,7 @@ var PremiumGiveaway = { var $field = Aj.state.$premiumSearchField; var $btn = Aj.state.$giveawayPremiumBtn; $form.field('recipient').value(''); - $form.field('query').value('').prop('disabled', false); + $form.field('query').value('').prop('disabled', false).focus(); $btn.prop('disabled', true); $field.removeClass('found'); $('.js-search-field-error').html(''); @@ -2647,6 +2661,351 @@ var Ads = { }; var Stars = { + init: function() { + Aj.onLoad(function(state) { + var cont = Aj.ajContainer; + $(cont).on('click.curPage', '.js-myself-link', Stars.eBuyForMyself); + $(cont).on('click.curPage', '.js-more-stars-btn', Stars.eBuyMoreStats); + $(cont).on('click.curPage', '.js-stars-buy-btn', Stars.eBuyStars); + $(cont).on('click.curPage', '.js-more-options', Stars.eShowMoreOptions); + state.$starsBuyPopup = $('.js-buy-stars-popup'); + $(cont).on('submit.curPage', '.js-buy-stars-form', Stars.eBuyStarsSubmit); + state.$starsBuyForm = $('.js-buy-stars-form'); + state.$starsSearchField = $('.js-stars-search-field'); + state.$starsSearchForm = $('.js-stars-form'); + state.$starsSearchForm.on('submit', Stars.eSearchSubmit); + state.$starsSearchForm.field('query').on('input', Stars.eSearchInput); + state.$starsSearchForm.field('query').on('change', Stars.eSearchChange); + $('.js-form-clear', state.$starsSearchForm).on('click', Stars.eSearchClear); + state.$starsQuantityField = $('.js-stars-quantity-field'); + $(cont).on('click.curPage', '.js-quantity-clear', Stars.eQuantityClear); + state.$starsSearchForm.field('quantity').on('change', Stars.eQuantityChanged); + state.$starsSearchForm.on('change', '.js-stars-options input.radio', Stars.eRadioChanged); + state.$starsBuyForm.on('change', 'input.checkbox', Stars.eCheckboxChanged); + state.$starsBuyBtn = $('.js-stars-buy-btn'); + state.curQuantity = state.$starsSearchForm.field('quantity').value(); + state.curStars = state.$starsSearchForm.field('stars').value(); + state.updLastReq = +Date.now(); + if (state.needUpdate) { + state.updStateTo = setTimeout(Stars.updateState, Main.UPDATE_PERIOD); + } + $(cont).on('click.curPage', '.js-preview-sticker', function() { + RLottie.playUntilEnd(this); + }); + $('.js-preview-sticker').each(function() { + RLottie.init(this, {playUntilEnd: true}); + }); + RLottie.init(); + }); + Aj.onUnload(function(state) { + clearTimeout(state.updStateTo); + state.needUpdate = false; + Main.destroyForm(state.$starsSearchForm); + state.$starsSearchForm.off('submit', Stars.eSearchSubmit); + state.$starsSearchForm.field('query').off('input', Stars.eSearchInput); + state.$starsSearchForm.field('query').off('change', Stars.eSearchChange); + $('.js-form-clear', state.$starsSearchForm).off('click', Stars.eSearchClear); + state.$starsSearchForm.field('quantity').off('change', Stars.eQuantityChanged); + state.$starsSearchForm.off('change', '.js-stars-options input.radio', Stars.eRadioChanged); + state.$starsBuyForm.off('change', 'input.checkbox', Stars.eCheckboxChanged); + $('.js-preview-sticker').each(function() { + RLottie.destroy(this); + }); + }); + }, + updateState: function(force) { + var now = +Date.now(); + if (document.hasFocus() || force || + Aj.state.updLastReq && (now - Aj.state.updLastReq) > Main.FORCE_UPDATE_PERIOD) { + Aj.state.updLastReq = now; + Aj.apiRequest('updateStarsBuyState', { + mode: Aj.state.mode, + lv: Aj.state.lastVer, + dh: Aj.state.lastDh + }, function(result) { + if (result.mode) { + Aj.state.mode = result.mode; + } + if (result.html) { + Stars.updateContent(result.html); + } else { + if (result.history_html) { + Stars.updateHistory(result.history_html); + } + if (result.options_html) { + Stars.updateOptions(result.options_html); + } + } + if (result.lv) { + Aj.state.lastVer = result.lv; + if (Aj.state.$sentPopup) { + closePopup(Aj.state.$sentPopup); + } + } + if (result.dh) { + Aj.state.lastDh = result.dh; + } + if (Aj.state.needUpdate && result.need_update) { + Aj.state.updStateTo = setTimeout(Stars.updateState, Main.UPDATE_PERIOD); + } + }); + } else { + if (Aj.state.needUpdate) { + Aj.state.updStateTo = setTimeout(Stars.updateState, Main.CHECK_PERIOD); + } + } + }, + eSearchInput: function(e) { + var $field = Aj.state.$starsSearchForm; + $('.js-search-field-error').html(''); + $field.removeClass('error'); + }, + eSearchChange: function(e) { + Stars.searchSubmit(); + }, + eSearchClear: function(e) { + var $form = Aj.state.$starsSearchForm; + var $field = Aj.state.$starsSearchField; + var $btn = Aj.state.$starsBuyBtn; + $form.field('recipient').value(''); + $form.field('query').value('').prop('disabled', false).focus(); + $form.removeClass('myself'); + $btn.prop('disabled', true); + $field.removeClass('found'); + $('.js-search-field-error').html(''); + $field.removeClass('error'); + Stars.updateUrl(); + }, + eQuantityClear: function() { + Stars.clearQuantity(true); + }, + clearQuantity: function(need_focus) { + var $form = Aj.state.$starsSearchForm; + var $field = $form.field('quantity'); + $field.value(''); + if (need_focus) { + $field.focus(); + } + Aj.state.curQuantity = 0; + $('.js-quantity-field-error').html(''); + $('.js-cur-price').html(''); + Stars.updateButton(); + Stars.updateUrl(); + }, + eQuantityChanged: function() { + var $form = Aj.state.$starsSearchForm; + var stars = +$form.field('stars').value(); + var quantity = +$form.field('quantity').value(); + $('.js-cur-price').html(''); + Aj.state.$starsQuantityField.addClass('loading').removeClass('play').redraw().addClass('play'); + Aj.apiRequest('updateStarsPrices', { + stars: stars, + quantity: quantity + }, function(result) { + if (result.error) { + $('.js-quantity-field-error').html(result.error); + quantity = 0; + } else { + $('.js-quantity-field-error').html(''); + } + $('.js-cur-price').html(result.cur_price); + if (result.options_html) { + Stars.updateOptions(result.options_html); + } + if (result.dh) { + Aj.state.lastDh = result.dh; + } + Aj.state.curQuantity = quantity; + Aj.state.$starsQuantityField.removeClass('loading'); + Aj.state.curStars = 0; + $('.js-stars-options input.radio:checked').prop('checked', false); + Stars.updateButton(); + Stars.updateUrl(); + }); + }, + eBuyForMyself: function(e) { + e.preventDefault(); + Stars.updateResult(Aj.state.myselfResult); + }, + eShowMoreOptions: function(e) { + e.preventDefault(); + Stars.toggleOptions(true); + }, + toggleOptions: function(expand) { + Aj.state.$starsSearchForm.toggleClass('options-expanded', expand).toggleClass('options-collapsed', !expand); + }, + eRadioChanged: function() { + Stars.clearQuantity(); + Aj.state.curStars = this.value; + Stars.updateButton(); + Stars.updateUrl(); + }, + eCheckboxChanged: function() { + var $form = Aj.state.$starsBuyForm; + var show_sender = $form.field('show_sender').prop('checked'); + Aj.state.$starsBuyPopup.toggleClass('show-sender', show_sender); + }, + updateButton: function() { + var $form = Aj.state.$starsSearchForm; + var quantity = Aj.state.curQuantity || Aj.state.curStars; + var btn_label = l('WEB_BUY_N_TELEGRAM_STARS_BUTTON', {n: quantity || 0, __format_number: true}); + $('.js-stars-btn-label').html(btn_label); + Aj.state.$starsBuyBtn.prop('disabled', !quantity || !$form.field('recipient').value()); + }, + eSearchSubmit: function(e) { + e.preventDefault(); + Stars.searchSubmit(); + }, + searchSubmit: function() { + var $form = Aj.state.$starsSearchForm; + var recipient = $form.field('recipient').value(); + var quantity = $form.field('quantity').value(); + var query = $form.field('query').value(); + if (!query.length) { + $form.field('query').focus(); + return; + } + Aj.state.$starsSearchField.addClass('loading').removeClass('play').redraw().addClass('play'); + Aj.showProgress(); + Aj.apiRequest('searchStarsRecipient', { + query: recipient || query, + quantity: quantity + }, function(result) { + Aj.hideProgress(); + Stars.updateResult(result); + Aj.state.$starsSearchField.removeClass('loading'); + }); + }, + updateResult: function(result) { + var $form = Aj.state.$starsSearchForm; + var $field = Aj.state.$starsSearchField; + var $btn = Aj.state.$starsBuyBtn; + if (result.error) { + $('.js-search-field-error').html(result.error); + $field.addClass('error').removeClass('found'); + $form.field('query').prop('disabled', false); + } else { + $('.js-search-field-error').html(''); + $field.removeClass('error'); + if (result.found) { + if (result.found.photo) { + $('.js-stars-search-photo', $field).html(result.found.photo); + } + if (result.found.name) { + var $form = Aj.state.$starsSearchForm; + $form.field('query').value(uncleanHTML(result.found.name)); + } + $form.toggleClass('myself', result.found.myself); + $form.field('recipient').value(result.found.recipient); + $field.addClass('found'); + $form.field('query').prop('disabled', true); + } else { + $form.removeClass('myself'); + $form.field('recipient').value(''); + $field.removeClass('found'); + $form.field('query').prop('disabled', false); + } + Stars.updateButton(); + } + Stars.updateUrl(); + }, + updateUrl: function() { + var new_url = ''; + var $form = Aj.state.$starsSearchForm; + var recipient = $form.field('recipient').value(); + var stars = $form.field('stars').value(); + var quantity = Aj.state.curQuantity || stars; + if (recipient) { + new_url += '&recipient=' + encodeURIComponent(recipient); + } + if (quantity) { + new_url += '&quantity=' + encodeURIComponent(quantity); + } + if (new_url) { + new_url = '?' + new_url.substr(1); + } + var loc = Aj.location(), path = loc.pathname + loc.search; + Aj.setLocation(new_url, path != '/stars'); + }, + updateOptions: function(html) { + var $form = Aj.state.$starsSearchForm; + var stars = $form.field('stars').value(); + $('.js-premium-options').replaceWith(html); + $form.field('stars').value(stars); + }, + eBuyStars: function(e) { + e.stopImmediatePropagation(); + e.preventDefault(); + var $form = Aj.state.$starsSearchForm; + var recipient = $form.field('recipient').value(); + var quantity = $form.field('quantity').value(); + var stars = $form.field('stars').value(); + Aj.apiRequest('initBuyStarsRequest', { + recipient: recipient, + quantity: quantity || stars + }, function(result) { + if (result.error) { + return showAlert(result.error); + } + $('.js-buy-stars-content', Aj.state.$starsBuyPopup).html(result.content); + $('.js-buy-stars-button', Aj.state.$starsBuyPopup).html(result.button); + Aj.state.$starsBuyPopup.toggleClass('iam-sender', result.myself); + Aj.state.starsPrice = result.amount; + Aj.state.itemTitle = result.item_title; + Aj.state.$starsBuyForm.field('id').value(result.req_id); + RLottie.WORKERS_LIMIT = 1; + openPopup(Aj.state.$starsBuyPopup, { + onOpen: function() { + $('.js-preview-sticker').each(function() { + RLottie.init(this, {playUntilEnd: true}); + }); + }, + onClose: function() { + $('.js-preview-sticker').each(function() { + RLottie.destroy(this); + }); + } + }); + }); + }, + eBuyStarsSubmit: function(e) { + e.preventDefault(); + var $form = $(this); + var item_title = Aj.state.itemTitle; + var req_id = $form.field('id').value(); + var show_sender = $form.field('show_sender').prop('checked'); + closePopup(Aj.state.$starsBuyPopup); + Wallet.sendTransaction({ + request: { + method: 'getBuyStarsLink', + params: { + id: req_id, + show_sender: show_sender ? 1 : 0 + } + }, + title: l('WEB_POPUP_QR_STARS_HEADER'), + description: l('WEB_POPUP_QR_STARS_TEXT', { + amount: '' + Aj.state.starsPrice + '' + }), + qr_label: item_title, + tk_label: l('WEB_POPUP_QR_STARS_TK_BUTTON'), + terms_label: l('WEB_POPUP_QR_PROCEED_TERMS'), + onConfirm: function(by_server) { + Stars.updateState(true); + } + }); + Aj.state.needUpdate = true; + }, + eBuyMoreStats: function(e) { + e.preventDefault(); + e.stopImmediatePropagation(); + Aj.apiRequest('repeatStars', {}, function(result) { + if (result.error) { + return showAlert(result.error); + } + Aj.location('/stars'); + }); + }, initWithdraw: function() { Aj.onLoad(function(state) { var cont = Aj.ajContainer;