Refactor watched_widget.js
This commit is contained in:
Omar Roth
parent
e119459411
commit
7d2e1f63b5
6 changed files with 120 additions and 80 deletions
|
|
@ -16,7 +16,8 @@ function toggle_parent(target) {
|
|||
}
|
||||
}
|
||||
|
||||
function toggle_comments(target) {
|
||||
function toggle_comments(event) {
|
||||
var target = event.target;
|
||||
body = target.parentNode.parentNode.parentNode.children[1];
|
||||
if (body.style.display === null || body.style.display === '') {
|
||||
target.innerHTML = '[ + ]';
|
||||
|
|
@ -27,28 +28,44 @@ function toggle_comments(target) {
|
|||
}
|
||||
}
|
||||
|
||||
function swap_comments(source) {
|
||||
if (source == 'youtube') {
|
||||
function swap_comments(event) {
|
||||
var source = event.target.getAttribute('data-comments');
|
||||
|
||||
if (source === 'youtube') {
|
||||
get_youtube_comments();
|
||||
} else if (source == 'reddit') {
|
||||
} else if (source === 'reddit') {
|
||||
get_reddit_comments();
|
||||
}
|
||||
}
|
||||
|
||||
function show_youtube_replies(target, inner_text, sub_text) {
|
||||
body = target.parentNode.parentNode.children[1];
|
||||
body.style.display = '';
|
||||
function hide_youtube_replies(event) {
|
||||
var target = event.target;
|
||||
|
||||
target.innerHTML = inner_text;
|
||||
target.setAttribute('onclick', "hide_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')");
|
||||
}
|
||||
sub_text = target.getAttribute('data-inner-text');
|
||||
inner_text = target.getAttribute('data-sub-text');
|
||||
|
||||
function hide_youtube_replies(target, inner_text, sub_text) {
|
||||
body = target.parentNode.parentNode.children[1];
|
||||
body.style.display = 'none';
|
||||
|
||||
target.innerHTML = sub_text;
|
||||
target.setAttribute('onclick', "show_youtube_replies(this, \'" + inner_text + "\', \'" + sub_text + "\')");
|
||||
target.onclick = show_youtube_replies;
|
||||
target.setAttribute('data-inner-text', inner_text);
|
||||
target.setAttribute('data-sub-text', sub_text);
|
||||
}
|
||||
|
||||
function show_youtube_replies(event) {
|
||||
var target = event.target;
|
||||
|
||||
sub_text = target.getAttribute('data-inner-text');
|
||||
inner_text = target.getAttribute('data-sub-text');
|
||||
|
||||
body = target.parentNode.parentNode.children[1];
|
||||
body.style.display = '';
|
||||
|
||||
target.innerHTML = sub_text;
|
||||
target.onclick = hide_youtube_replies;
|
||||
target.setAttribute('data-inner-text', inner_text);
|
||||
target.setAttribute('data-sub-text', sub_text);
|
||||
}
|
||||
|
||||
var continue_button = document.getElementById('continue');
|
||||
|
|
@ -186,12 +203,12 @@ function get_reddit_comments(timeouts = 0) {
|
|||
comments.innerHTML = ' \
|
||||
<div> \
|
||||
<h3> \
|
||||
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
|
||||
<a href="javascript:void(0)">[ - ]</a> \
|
||||
{title} \
|
||||
</h3> \
|
||||
<p> \
|
||||
<b> \
|
||||
<a href="javascript:void(0)" onclick="swap_comments(\'youtube\')"> \
|
||||
<a href="javascript:void(0)" data-comments="youtube"> \
|
||||
{youtubeCommentsText} \
|
||||
</a> \
|
||||
</b> \
|
||||
|
|
@ -208,6 +225,9 @@ function get_reddit_comments(timeouts = 0) {
|
|||
permalink: xhr.response.permalink,
|
||||
contentHtml: xhr.response.contentHtml
|
||||
});
|
||||
|
||||
comments.children[0].children[0].children[0].onclick = toggle_comments;
|
||||
comments.children[0].children[1].children[0].onclick = swap_comments;
|
||||
} else {
|
||||
if (video_data.preferences.comments[1] === 'youtube') {
|
||||
get_youtube_comments(timeouts + 1);
|
||||
|
|
@ -254,11 +274,11 @@ function get_youtube_comments(timeouts = 0) {
|
|||
comments.innerHTML = ' \
|
||||
<div> \
|
||||
<h3> \
|
||||
<a href="javascript:void(0)" onclick="toggle_comments(this)">[ - ]</a> \
|
||||
<a href="javascript:void(0)">[ - ]</a> \
|
||||
{commentsText} \
|
||||
</h3> \
|
||||
<b> \
|
||||
<a href="javascript:void(0)" onclick="swap_comments(\'reddit\')"> \
|
||||
<a href="javascript:void(0)" data-comments="reddit"> \
|
||||
{redditComments} \
|
||||
</a> \
|
||||
</b> \
|
||||
|
|
@ -271,6 +291,9 @@ function get_youtube_comments(timeouts = 0) {
|
|||
{ commentCount: number_with_separator(xhr.response.commentCount) }
|
||||
)
|
||||
});
|
||||
|
||||
comments.children[0].children[0].children[0].onclick = toggle_comments;
|
||||
comments.children[0].children[1].children[0].onclick = swap_comments;
|
||||
} else {
|
||||
comments.innerHTML = '';
|
||||
}
|
||||
|
|
@ -319,15 +342,23 @@ function get_youtube_replies(target, load_more) {
|
|||
body.removeChild(body.lastElementChild);
|
||||
body.innerHTML += xhr.response.contentHtml;
|
||||
} else {
|
||||
body.innerHTML = ' \
|
||||
<p><a href="javascript:void(0)" \
|
||||
onclick="hide_youtube_replies(this, \'{hideRepliesText}\', \'{showRepliesText}\')">{hideRepliesText} \
|
||||
</a></p> \
|
||||
<div>{contentHtml}</div>'.supplant({
|
||||
hideRepliesText: video_data.hide_replies_text,
|
||||
showRepliesText: video_data.show_replies_text,
|
||||
contentHtml: xhr.response.contentHtml
|
||||
});
|
||||
body.removeChild(body.lastElementChild);
|
||||
|
||||
var p = document.createElement('p');
|
||||
var a = document.createElement('a');
|
||||
p.appendChild(a);
|
||||
|
||||
a.href = 'javascript:void(0)';
|
||||
a.onclick = hide_youtube_replies;
|
||||
a.setAttribute('data-sub-text', video_data.hide_replies_text);
|
||||
a.setAttribute('data-inner-text', video_data.show_replies_text);
|
||||
a.innerText = video_data.hide_replies_text;
|
||||
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = xhr.response.contentHtml;
|
||||
|
||||
body.appendChild(p);
|
||||
body.appendChild(div);
|
||||
}
|
||||
} else {
|
||||
body.innerHTML = fallback;
|
||||
|
|
|
|||
46
assets/js/watched_widget.js
Normal file
46
assets/js/watched_widget.js
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
function mark_watched(target) {
|
||||
var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
|
||||
tile.style.display = 'none';
|
||||
|
||||
var url = '/watch_ajax?action_mark_watched=1&redirect=false' +
|
||||
'&id=' + target.getAttribute('data-id');
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.responseType = 'json';
|
||||
xhr.timeout = 20000;
|
||||
xhr.open('POST', url, true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
xhr.send('csrf_token=' + watched_data.csrf_token);
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState == 4) {
|
||||
if (xhr.status != 200) {
|
||||
tile.style.display = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function mark_unwatched(target) {
|
||||
var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
|
||||
tile.style.display = "none";
|
||||
var count = document.getElementById('count')
|
||||
count.innerText = count.innerText - 1;
|
||||
|
||||
var url = '/watch_ajax?action_mark_unwatched=1&redirect=false' +
|
||||
'&id=' + target.getAttribute('data-id');
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.responseType = 'json';
|
||||
xhr.timeout = 20000;
|
||||
xhr.open('POST', url, true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
xhr.send('csrf_token=' + watched_data.csrf_token);
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState == 4) {
|
||||
if (xhr.status != 200) {
|
||||
count.innerText = count.innerText - 1 + 2;
|
||||
tile.style.display = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
<form onsubmit="return false" action="/watch_ajax?action_mark_watched=1&id=<%= item.id %>&referer=<%= env.get("current_page") %>" method="post">
|
||||
<input type="hidden" name="csrf_token" value="<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>">
|
||||
<p class="watched">
|
||||
<a onclick="mark_watched(this)" data-id="<%= item.id %>" href="#">
|
||||
<a onclick="mark_watched(this)" data-id="<%= item.id %>" href="javascript:void(0)">
|
||||
<button type="submit" style="all:unset">
|
||||
<i onmouseenter='this.setAttribute("class", "icon ion-ios-eye-off")'
|
||||
onmouseleave='this.setAttribute("class", "icon ion-ios-eye")'
|
||||
|
|
|
|||
|
|
@ -18,6 +18,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var watched_data = {
|
||||
csrf_token: '<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>',
|
||||
}
|
||||
</script>
|
||||
<script src="/js/watched_widget.js"></script>
|
||||
|
||||
<div class="pure-g">
|
||||
<% watched.each_slice(4) do |slice| %>
|
||||
<% slice.each do |item| %>
|
||||
|
|
@ -27,10 +34,10 @@
|
|||
<% if !env.get("preferences").as(Preferences).thin_mode %>
|
||||
<div class="thumbnail">
|
||||
<img class="thumbnail" src="/vi/<%= item %>/mqdefault.jpg"/>
|
||||
<form onsubmit="return false;" action="/watch_ajax?action_mark_unwatched=1&id=<%= item %>&referer=<%= env.get("current_page") %>" method="post">
|
||||
<form onsubmit="return false" action="/watch_ajax?action_mark_unwatched=1&id=<%= item %>&referer=<%= env.get("current_page") %>" method="post">
|
||||
<input type="hidden" name="csrf_token" value="<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>">
|
||||
<p class="watched">
|
||||
<a onclick="mark_unwatched(this)" data-id="<%= item %>" href="#">
|
||||
<a onclick="mark_unwatched(this)" data-id="<%= item %>" href="javascript:void(0)">
|
||||
<button type="submit" style="all:unset">
|
||||
<i class="icon ion-md-trash"></i>
|
||||
</button>
|
||||
|
|
@ -47,33 +54,6 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function mark_unwatched(target) {
|
||||
var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
|
||||
tile.style.display = "none";
|
||||
var count = document.getElementById('count')
|
||||
count.innerText = count.innerText - 1;
|
||||
|
||||
var url = '/watch_ajax?action_mark_unwatched=1&redirect=false' +
|
||||
'&id=' + target.getAttribute('data-id');
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.responseType = 'json';
|
||||
xhr.timeout = 20000;
|
||||
xhr.open('POST', url, true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>');
|
||||
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState == 4) {
|
||||
if (xhr.status != 200) {
|
||||
count.innerText = count.innerText - 1 + 2;
|
||||
tile.style.display = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="pure-g h-box">
|
||||
<div class="pure-u-1 pure-u-lg-1-5">
|
||||
<% if page >= 2 %>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,13 @@
|
|||
<hr>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var watched_data = {
|
||||
csrf_token: '<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>',
|
||||
}
|
||||
</script>
|
||||
<script src="/js/watched_widget.js"></script>
|
||||
|
||||
<div class="pure-g">
|
||||
<% videos.each_slice(4) do |slice| %>
|
||||
<% slice.each do |item| %>
|
||||
|
|
@ -53,30 +60,6 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function mark_watched(target) {
|
||||
var tile = target.parentNode.parentNode.parentNode.parentNode.parentNode;
|
||||
tile.style.display = 'none';
|
||||
|
||||
var url = '/watch_ajax?action_mark_watched=1&redirect=false' +
|
||||
'&id=' + target.getAttribute('data-id');
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.responseType = 'json';
|
||||
xhr.timeout = 20000;
|
||||
xhr.open('POST', url, true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
xhr.send('csrf_token=<%= URI.escape(env.get?("csrf_token").try &.as(String) || "") %>');
|
||||
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState == 4) {
|
||||
if (xhr.status != 200) {
|
||||
tile.style.display = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="pure-g h-box">
|
||||
<div class="pure-u-1 pure-u-lg-1-5">
|
||||
<% if page >= 2 %>
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@ var video_data = {
|
|||
<div <% if plid %>style="display:none"<% end %>>
|
||||
<div class="pure-control-group">
|
||||
<label for="continue"><%= translate(locale, "Autoplay next video: ") %></label>
|
||||
<input name="continue" onclick="continue_autoplay(this)" id="continue" type="checkbox" <% if params.continue %>checked<% end %>>
|
||||
<input name="continue" id="continue" type="checkbox" <% if params.continue %>checked<% end %>>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue