Refactor subscribe_widget

This commit is contained in:
Omar Roth 2019-05-05 08:35:54 -05:00
parent 0cf86974dd
commit 0099a9822e
No known key found for this signature in database
GPG key ID: B8254FB7EC3D37F2
5 changed files with 36 additions and 38 deletions

View file

@ -1,31 +1,33 @@
subscribe_button = document.getElementById('subscribe'); var subscribe_button = document.getElementById('subscribe');
subscribe_button.parentNode['action'] = 'javascript:void(0)';
if (subscribe_button.getAttribute('onclick')) { if (subscribe_button.getAttribute('data-type') === 'subscribe') {
subscribe_button['href'] = 'javascript:void(0)'; subscribe_button.onclick = subscribe;
} else {
subscribe_button.onclick = unsubscribe;
} }
function subscribe(timeouts = 0) { function subscribe(timeouts = 0) {
subscribe_button = document.getElementById('subscribe');
if (timeouts > 10) { if (timeouts > 10) {
console.log('Failed to subscribe.'); console.log('Failed to subscribe.');
return; return;
} }
var url = '/subscription_ajax?action_create_subscription_to_channel=1&redirect=false' + var url = '/subscription_ajax?action_create_subscription_to_channel=1&redirect=false' +
'&c=<%= ucid %>&referer=<%= env.get("current_page") %>'; '&c=' + subscribe_data.ucid +
'&referer=' + location.pathname + location.search;
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.responseType = 'json'; xhr.responseType = 'json';
xhr.timeout = 20000; xhr.timeout = 20000;
xhr.open('POST', url, true); xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>'); xhr.send('csrf_token=' + subscribe_data.csrf_token);
var fallback = subscribe_button.innerHTML; var fallback = subscribe_button.innerHTML;
subscribe_button.onclick = unsubscribe; subscribe_button.onclick = unsubscribe;
subscribe_button.innerHTML = '<b><%= translate(locale, "Unsubscribe").gsub("'", "\\'") %> | <%= sub_count_text %></b>'; subscribe_button.innerHTML = '<b>' + subscribe_data.unsubscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>';
xhr.onreadystatechange = function() { xhr.onreadystatechange = function () {
if (xhr.readyState == 4) { if (xhr.readyState == 4) {
if (xhr.status != 200) { if (xhr.status != 200) {
subscribe_button.onclick = subscribe; subscribe_button.onclick = subscribe;
@ -34,34 +36,33 @@ function subscribe(timeouts = 0) {
} }
} }
xhr.ontimeout = function() { xhr.ontimeout = function () {
console.log('Subscribing timed out.'); console.log('Subscribing timed out.');
subscribe(timeouts + 1); subscribe(timeouts + 1);
}; };
} }
function unsubscribe(timeouts = 0) { function unsubscribe(timeouts = 0) {
subscribe_button = document.getElementById('subscribe');
if (timeouts > 10) { if (timeouts > 10) {
console.log('Failed to subscribe'); console.log('Failed to subscribe');
return; return;
} }
var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' + var url = '/subscription_ajax?action_remove_subscriptions=1&redirect=false' +
'&c=<%= ucid %>&referer=<%= env.get("current_page") %>'; '&c=' + subscribe_data.ucid +
'&referer=' + location.pathname + location.search;
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.responseType = 'json'; xhr.responseType = 'json';
xhr.timeout = 20000; xhr.timeout = 20000;
xhr.open('POST', url, true); xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>'); xhr.send('csrf_token=' + subscribe_data.csrf_token);
var fallback = subscribe_button.innerHTML; var fallback = subscribe_button.innerHTML;
subscribe_button.onclick = subscribe; subscribe_button.onclick = subscribe;
subscribe_button.innerHTML = '<b><%= translate(locale, "Subscribe").gsub("'", "\\'") %> | <%= sub_count_text %></b>'; subscribe_button.innerHTML = '<b>' + subscribe_data.subscribe_text + ' | ' + subscribe_data.sub_count_text + '</b>';
xhr.onreadystatechange = function() { xhr.onreadystatechange = function () {
if (xhr.readyState == 4) { if (xhr.readyState == 4) {
if (xhr.status != 200) { if (xhr.status != 200) {
subscribe_button.onclick = unsubscribe; subscribe_button.onclick = unsubscribe;
@ -70,7 +71,7 @@ function unsubscribe(timeouts = 0) {
} }
} }
xhr.ontimeout = function() { xhr.ontimeout = function () {
console.log('Unsubscribing timed out.'); console.log('Unsubscribing timed out.');
unsubscribe(timeouts + 1); unsubscribe(timeouts + 1);
}; };

View file

@ -82,8 +82,3 @@
<% end %> <% end %>
</div> </div>
</div> </div>
<script>
<% sub_count_text = number_to_short_text(sub_count) %>
<%= rendered "components/subscribe_widget_script" %>
</script>

View file

@ -1,23 +1,35 @@
<% if user %> <% if user %>
<% if subscriptions.includes? ucid %> <% if subscriptions.includes? ucid %>
<p> <p>
<form onsubmit="return false" action="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post"> <form action="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post">
<input type="hidden" name="csrf_token" value="<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>"> <input type="hidden" name="csrf_token" value="<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<a id="subscribe" onclick="unsubscribe()" class="pure-button pure-button-primary" href="#"> <button data-type="unsubscribe" id="subscribe" class="pure-button pure-button-primary">
<b><input style="all:unset" type="submit" value="<%= translate(locale, "Unsubscribe") %> | <%= sub_count_text %>"></b> <b><input style="all:unset" type="submit" value="<%= translate(locale, "Unsubscribe") %> | <%= sub_count_text %>"></b>
</a> </button>
</form> </form>
</p> </p>
<% else %> <% else %>
<p> <p>
<form onsubmit="return false" action="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post"> <form action="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post">
<input type="hidden" name="csrf_token" value="<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>"> <input type="hidden" name="csrf_token" value="<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<a id="subscribe" onclick="subscribe()" class="pure-button pure-button-primary" href="#"> <button data-type="subscribe" id="subscribe" class="pure-button pure-button-primary">
<b><input style="all:unset" type="submit" value="<%= translate(locale, "Subscribe") %> | <%= sub_count_text %>"></b> <b><input style="all:unset" type="submit" value="<%= translate(locale, "Subscribe") %> | <%= sub_count_text %>"></b>
</a> </button>
</form> </form>
</p> </p>
<% end %> <% end %>
<script>
var subscribe_data = {
ucid: '<%= ucid %>',
author: '<%= author %>',
sub_count_text: '<%= sub_count_text %>',
csrf_token: '<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>',
subscribe_text: '<%= translate(locale, "Subscribe").gsub("'", "\\'") %>',
unsubscribe_text: '<%= translate(locale, "Unsubscribe").gsub("'", "\\'") %>'
}
</script>
<script src="/js/subscribe_widget.js"></script>
<% else %> <% else %>
<p> <p>
<a id="subscribe" class="pure-button pure-button-primary" <a id="subscribe" class="pure-button pure-button-primary"

View file

@ -72,8 +72,3 @@
<% end %> <% end %>
</div> </div>
</div> </div>
<script>
<% sub_count_text = number_to_short_text(sub_count) %>
<%= rendered "components/subscribe_widget_script" %>
</script>

View file

@ -276,11 +276,6 @@ function number_with_separator(val) {
return val; return val;
} }
<% ucid = video.ucid %>
<% author = video.author %>
<% sub_count_text = video.sub_count_text %>
<%= rendered "components/subscribe_widget_script" %>
<% if plid %> <% if plid %>
function get_playlist(plid, timeouts = 0) { function get_playlist(plid, timeouts = 0) {
playlist = document.getElementById('playlist'); playlist = document.getElementById('playlist');