Update content of files

data/web/fragment.com/css/auction.css

@@ -1310,8 +1310,8 @@ a.tm-menu-link:focus {
 
 .tm-main {
   margin: 0 auto;
-  width: auto;
+  width: 480px;
-  max-width: 480px;
+  max-width: 100%;
   padding-bottom: 70px;
   flex-grow: 1;
 }
@@ -3463,22 +3463,41 @@ a.tm-table-action-link:hover {
   margin-top: 8px;
   color: var(--text-color);
 }
+.tm-main-premium-option-text.short {
+  margin-left: 15px;
+  margin-right: 15px;
+}
 .tm-main-premium-option-button {
   margin: 30px 0 21px;
 }
 .tm-premium-boost-label {
-  position: absolute;
-  top: 0;
-  right: 0;
   display: inline-block;
   font-size: 14px;
   line-height: 18px;
   padding: 3px 6px;
-  margin: 9px 10px;
   font-weight: bold;
   background-color: #9f53ff;
   color: #fff;
   border-radius: 6px;
+  margin: 9px 10px;
+}
+.tm-stars-per-user-label {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: normal;
+  text-align: right;
+  color: var(--dropdown-secondary-color);
+  margin-right: 10px;
+}
+.tm-stars-per-user-label svg.icon {
+  transform: scale(0.85) translateX(1px);
+}
+.tm-search-rbox,
+.tm-premium-boost-label.tm-search-rlabel {
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 .icon-boost:before {
   width: 11px;
@@ -3828,7 +3847,7 @@ a.tm-table-action-link:hover {
   }
 
   .tm-main {
-    max-width: 720px;
+    width: 720px;
     box-sizing: content-box;
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
@@ -3945,6 +3964,10 @@ a.tm-table-action-link:hover {
   .tm-main-premium .tm-main-search-form .tm-search-prefix {
     padding: 12px 54px 12px 52px;
   }
+  .tm-stars-per-user-label {
+    font-size: 15px;
+    margin-right: 20px;
+  }
   .tm-main-form-group {
     margin-bottom: 28px;
   }

data/web/fragment.com/js/auction.js

@@ -2729,9 +2729,6 @@ var Stars = {
         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);
           }
@@ -2932,6 +2929,7 @@ var Stars = {
     var stars = $form.field('stars').value();
     $('.js-stars-options').replaceWith(html);
     $form.field('stars').value(stars);
+    $('.js-stars-options .tm-second-option:has(input:checked)').removeClass('tm-second-option');
   },
   eBuyStars: function(e) {
     e.stopImmediatePropagation();
@@ -3112,6 +3110,343 @@ var Stars = {
   }
 };
 
+var StarsGiveaway = {
+  init: function() {
+    Aj.onLoad(function(state) {
+      var cont = Aj.ajContainer;
+      $(cont).on('click.curPage', '.js-another-giveaway-btn', StarsGiveaway.eMoreGiveawayStars);
+      $(cont).on('click.curPage', '.js-giveaway-stars-btn', StarsGiveaway.eGiveawayStars);
+      $(cont).on('click.curPage', '.js-more-options', StarsGiveaway.eShowMoreOptions);
+      state.$giveawayStarsPopup = $('.js-giveaway-stars-popup');
+      $(cont).on('submit.curPage', '.js-giveaway-stars-form', StarsGiveaway.eGiveawayStarsSubmit);
+      state.$giveawayStarsForm = $('.js-giveaway-stars-form');
+      state.$starsSearchField = $('.js-stars-search-field');
+      state.$starsSearchForm = $('.js-stars-form');
+      state.$starsSearchForm.on('submit', StarsGiveaway.eSearchSubmit);
+      state.$starsSearchForm.field('query').on('input', StarsGiveaway.eSearchInput);
+      state.$starsSearchForm.field('query').on('change', StarsGiveaway.eSearchChange);
+      $('.js-form-clear', state.$starsSearchForm).on('click', StarsGiveaway.eSearchClear);
+      state.$starsQuantityField = $('.js-stars-quantity-field');
+      state.$starsSearchForm.field('quantity').on('change', StarsGiveaway.eQuantityChanged);
+      state.$starsSearchForm.on('change', '.js-stars-options input.radio', StarsGiveaway.eRadioChanged);
+      state.$giveawayStarsBtn = $('.js-giveaway-stars-btn');
+      state.$starsBuyBtn = $('.js-stars-buy-btn');
+      state.curQuantity = state.$starsSearchForm.field('quantity').value();
+      state.updLastReq = +Date.now();
+      if (state.needUpdate) {
+        state.updStateTo = setTimeout(StarsGiveaway.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.$giveawayStarsForm);
+      state.$starsSearchForm.off('submit', StarsGiveaway.eSearchSubmit);
+      state.$starsSearchForm.field('query').off('input', StarsGiveaway.eSearchInput);
+      state.$starsSearchForm.field('query').off('change', StarsGiveaway.eSearchChange);
+      $('.js-form-clear', state.$starsSearchForm).off('click', StarsGiveaway.eSearchClear);
+      state.$starsSearchForm.field('quantity').off('change', StarsGiveaway.eQuantityChanged);
+      state.$starsSearchForm.off('change', '.js-stars-options input.radio', StarsGiveaway.eRadioChanged);
+      state.$giveawayStarsForm.off('change', 'input.checkbox', StarsGiveaway.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('updateStarsGiveawayState', {
+        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) {
+          StarsGiveaway.updateContent(result.html);
+        } else {
+          if (result.options_html) {
+            StarsGiveaway.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(StarsGiveaway.updateState, Main.UPDATE_PERIOD);
+        }
+      });
+    } else {
+      if (Aj.state.needUpdate) {
+        Aj.state.updStateTo = setTimeout(StarsGiveaway.updateState, Main.CHECK_PERIOD);
+      }
+    }
+  },
+  eShowMoreOptions: function(e) {
+    e.preventDefault();
+    StarsGiveaway.toggleOptions(true);
+  },
+  toggleOptions: function(expand) {
+    Aj.state.$starsSearchForm.toggleClass('options-expanded', expand).toggleClass('options-collapsed', !expand);
+  },
+  eSearchInput: function(e) {
+    var $field = Aj.state.$starsSearchField;
+    $('.js-search-field-error').html('');
+    $field.removeClass('error');
+  },
+  eSearchChange: function(e) {
+    StarsGiveaway.searchSubmit();
+  },
+  eSearchClear: function(e) {
+    var $form = Aj.state.$starsSearchForm;
+    var $field = Aj.state.$starsSearchField;
+    var $btn   = Aj.state.$giveawayStarsBtn;
+    $form.field('recipient').value('');
+    $form.field('query').value('').prop('disabled', false).focus();
+    $btn.prop('disabled', true);
+    $field.removeClass('found');
+    $('.js-search-field-error').html('');
+    $field.removeClass('error');
+    StarsGiveaway.updateUrl();
+  },
+  eQuantityChanged: function() {
+    var $form  = Aj.state.$starsSearchForm;
+    var stars  = $form.field('stars').value();
+    var quantity = +$form.field('quantity').value();
+    Aj.state.$starsQuantityField.addClass('loading').removeClass('play').redraw().addClass('play');
+    Aj.apiRequest('updateStarsGiveawayPrices', {
+      quantity: quantity,
+      stars: stars
+    }, function(result) {
+      var $form  = Aj.state.$starsSearchForm;
+      var $field = Aj.state.$starsQuantityField;
+      var $btn   = Aj.state.$giveawayStarsBtn;
+      if (result.error) {
+        $('.js-quantity-field-error').html(result.error);
+        $field.addClass('error').removeClass('found');
+        quantity = 0;
+      } else {
+        $('.js-quantity-field-error').html('');
+        $field.removeClass('error');
+      }
+      $('.js-per-user-value').html(result.per_user);
+      if (result.placeholder) {
+        $form.field('quantity').attr('placeholder', result.placeholder);
+      }
+      if (result.options_html) {
+        StarsGiveaway.updateOptions(result.options_html);
+      }
+      if (result.dh) {
+        Aj.state.lastDh = result.dh;
+      }
+      if (quantity > 0 && $form.field('recipient').value()) {
+        $btn.prop('disabled', false);
+      } else {
+        $btn.prop('disabled', true);
+      }
+      Aj.state.curQuantity = quantity;
+      StarsGiveaway.updateButton();
+      StarsGiveaway.updateUrl();
+      Aj.state.$starsQuantityField.removeClass('loading');
+    });
+  },
+  eRadioChanged: function(e) {
+    var boosts = $(e.target).attr('data-boosts');
+    $('.js-boost-value').html(boosts);
+    StarsGiveaway.eQuantityChanged();
+    StarsGiveaway.updateButton();
+    StarsGiveaway.updateUrl();
+  },
+  updateButton: function() {
+    var $form    = Aj.state.$starsSearchForm;
+    var stars    = $form.field('stars').value();
+    var quantity = Aj.state.curQuantity;
+    var btn_label = l('WEB_BUY_N_STARS_FOR_GIVEAWAY_BUTTON', {n: stars || 0, __format_number: true});
+    $('.js-stars-btn-label').html(btn_label);
+    Aj.state.$starsBuyBtn.prop('disabled', !quantity || !stars || !$form.field('recipient').value());
+  },
+  eSearchSubmit: function(e) {
+    e.preventDefault();
+    StarsGiveaway.searchSubmit();
+  },
+  searchSubmit: function() {
+    var $form  = Aj.state.$starsSearchForm;
+    var recipient = $form.field('recipient').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('searchStarsGiveawayRecipient', {
+      query: recipient || query
+    }, function(result) {
+      Aj.hideProgress();
+      StarsGiveaway.updateResult(result);
+      Aj.state.$starsSearchField.removeClass('loading');
+    });
+  },
+  updateResult: function(result) {
+    var $form  = Aj.state.$starsSearchForm;
+    var $field = Aj.state.$starsSearchField;
+    var $btn   = Aj.state.$giveawayStarsBtn;
+    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.field('recipient').value(result.found.recipient);
+        $field.addClass('found');
+        $form.field('query').prop('disabled', true);
+        if (Aj.state.curQuantity > 0) {
+          $btn.prop('disabled', false);
+        } else {
+          $btn.prop('disabled', true);
+        }
+      } else {
+        $form.field('recipient').value('');
+        $field.removeClass('found');
+        $form.field('query').prop('disabled', false);
+        $btn.prop('disabled', true);
+      }
+      StarsGiveaway.updateButton();
+    }
+    StarsGiveaway.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;
+    if (recipient) {
+      new_url += '&recipient=' + encodeURIComponent(recipient);
+    }
+    if (quantity) {
+      new_url += '&quantity=' + encodeURIComponent(quantity);
+    }
+    if (stars) {
+      new_url += '&stars=' + encodeURIComponent(stars);
+    }
+    if (new_url) {
+      new_url = '?' + new_url.substr(1);
+    }
+    var loc = Aj.location(), path = loc.pathname + loc.search;
+    Aj.setLocation(new_url, path != '/stars/giveaway');
+  },
+  updateOptions: function(html) {
+    var $form  = Aj.state.$starsSearchForm;
+    var stars = $form.field('stars').value();
+    $('.js-stars-options').replaceWith(html);
+    $form.field('stars').value(stars);
+    $('.js-stars-options .tm-second-option:has(input:checked)').removeClass('tm-second-option');
+  },
+  updateContent: function(html) {
+    $('.js-main-content').html(html).find('.js-preview-sticker').each(function() {
+      RLottie.init(this, {playUntilEnd: true});
+    });
+  },
+  eGiveawayStars: 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('initGiveawayStarsRequest', {
+      recipient: recipient,
+      quantity: quantity,
+      stars: stars
+    }, function(result) {
+      if (result.error) {
+        return showAlert(result.error);
+      }
+      $('.js-giveaway-stars-content', Aj.state.$giveawayStarsPopup).html(result.content);
+      $('.js-giveaway-stars-button', Aj.state.$giveawayStarsPopup).html(result.button);
+      Aj.state.giveawayPrice = result.amount;
+      Aj.state.itemTitle = result.item_title;
+      Aj.state.$giveawayStarsForm.field('id').value(result.req_id);
+      RLottie.WORKERS_LIMIT = 1;
+      openPopup(Aj.state.$giveawayStarsPopup, {
+        onOpen: function() {
+          $('.js-preview-sticker').each(function() {
+            RLottie.init(this, {playUntilEnd: true});
+          });
+        },
+        onClose: function() {
+          $('.js-preview-sticker').each(function() {
+            RLottie.destroy(this);
+          });
+        }
+      });
+    });
+  },
+  eGiveawayStarsSubmit: function(e) {
+    e.preventDefault();
+    var $form = $(this);
+    var item_title = Aj.state.itemTitle;
+    var req_id = $form.field('id').value();
+    closePopup(Aj.state.$giveawayStarsPopup);
+    Wallet.sendTransaction({
+      request: {
+        method: 'getGiveawayStarsLink',
+        params: {
+          id: req_id
+        }
+      },
+      title: l('WEB_POPUP_QR_STARS_GIVEAWAY_HEADER'),
+      description: l('WEB_POPUP_QR_STARS_GIVEAWAY_TEXT', {
+        amount: '<span class="icon-before icon-ton-text js-amount_fee">' + Aj.state.giveawayPrice + '</span>'
+      }),
+      qr_label: item_title,
+      tk_label: l('WEB_POPUP_QR_STARS_GIVEAWAY_TK_BUTTON'),
+      terms_label: l('WEB_POPUP_QR_PROCEED_TERMS'),
+      onConfirm: function(by_server) {
+        StarsGiveaway.updateState(true);
+      }
+    });
+    Aj.state.needUpdate = true;
+  },
+  eMoreGiveawayStars: function(e) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    Aj.apiRequest('repeatStarsGiveaway', {}, function(result) {
+      if (result.error) {
+        return showAlert(result.error);
+      }
+      Aj.location('/stars/giveaway');
+    });
+  }
+};
+
 var Gateway = {
   init: function() {
     Aj.onLoad(function(state) {