ajax shenanigans

This commit is contained in:
flash 2015-08-10 17:52:15 +02:00
parent 98beef09d0
commit 88256b32fb
4 changed files with 138 additions and 134 deletions

View file

@ -1921,6 +1921,26 @@
"type": "ADD",
"change": "Show person that made the change in the changelog.",
"user": "Flashwave"
},
{
"type": "UPD",
"change": "Make AJAX object generator more convenient.",
"user": "Flashwave"
},
{
"type": "FIX",
"change": "Fixed user actions showing up when logged out on viewtopic.",
"user": "Flashwave"
},
{
"type": "ADD",
"change": "Added AJAX friend actions on viewtopic.",
"user": "Flashwave"
},
{
"type": "FIX",
"change": "Fixed user actions showing up for deleted users.",
"user": "Flashwave"
}
]

View file

@ -9,24 +9,25 @@
<td class="userpanel">
{% if post.user.rank_main > 1 %}<a href="/u/{{ post.user.id }}" class="default username" style="color: {% if post.user.name_colour %}{{ post.user.name_colour }}{% else %}{{ post.rank.colour }}{% endif %};" title="Go to {{ post.user.username }}'s profile">{{ post.user.username }}</a>
<img src="/a/{{ post.user.id }}" alt="{{ post.user.username }}" class="avatar" style="box-shadow: 0 3px 7px #{% if post.is_online %}484{% else %}844{% endif %};" />
{% else %}
<a class="username">[deleted user]</a>
{% endif %}
<div class="userdata">
<div class="usertitle">{% if not post.user.usertitle %}{{ post.rank.title }}{% else %}{{ post.user.usertitle }}{% endif %}</div>
<img src="{{ sakura.content_path }}/images/tenshi.png" alt="Tenshi"{% if not post.is_premium %} style="opacity: 0;"{% endif %} /> <img src="{{ sakura.content_path }}/images/flags/{% if post.user.country|lower == 'eu' %}europeanunion{% else %}{{ post.user.country|lower }}{% endif %}.png" alt="{{ post.country }}" />
{% if user.checklogin %}
<div class="actions">
{% if user.data.id == post.user.id %}
<a class="fa fa-pencil-square-o" title="Edit this post" href="/forum/post/{{ post.post_id }}/edit"></a>
<a class="fa fa-trash" title="Delete this post" href="/forum/post/{{ post.post_id }}/delete"></a>
{% else %}
{% elseif post.user.rank_main > 1 %}
{% if post.is_friend != 0 %}<a class="fa fa-{% if post.is_friend == 2 %}heart{% else %}star{% endif %}" title="You are friends"></a>{% endif %}
<a class="fa fa-user-{% if post.is_friend == 0 %}plus{% else %}times{% endif %}" title="{% if post.is_friend == 0 %}Add {{ post.user.username }} as a friend{% else %}Remove friend{% endif %}" href="/friends?{% if post.is_friend == 0 %}add{% else %}remove{% endif %}={{ post.user.id }}&amp;session={{ php.sessionid }}&amp;time={{ php.time }}&amp;redirect=/forum/post/{{ post.post_id }}%23p{{ post.post_id }}&amp;direct=true"></a>
<a class="fa fa-user-{% if post.is_friend == 0 %}plus{% else %}times{% endif %} forum-friend-toggle" title="{% if post.is_friend == 0 %}Add {{ post.user.username }} as a friend{% else %}Remove friend{% endif %}" href="/friends?{% if post.is_friend == 0 %}add{% else %}remove{% endif %}={{ post.user.id }}&amp;session={{ php.sessionid }}&amp;time={{ php.time }}&amp;redirect=/forum/post/{{ post.post_id }}&amp;direct=true"></a>
<a class="fa fa-flag" title="Report {{ post.user.username }}" href="/u/{{ post.user.id }}/report"></a>
{% endif %}
{% else %}
<a class="username">[deleted user]</a>
<div class="actions">
{% endif %}
<a class="fa fa-reply" title="Quote this post" href="/forum/post/{{ post.post_id }}/quote"></a>
</div>
{% endif %}
</div>
</td>
<td class="post-content">

View file

@ -49,118 +49,57 @@
};
{% if not user.checklogin and not sakura.lockauth %}
// Setting the shit so clicking the login link doesn't redirect to /login
function initHeaderLoginForm() {
var headerLoginForm = document.getElementById('headerLoginForm');
var createInput = document.createElement('input');
var submit = headerLoginForm.querySelector('[type="submit"]');
createInput.setAttribute('name', 'ajax');
createInput.setAttribute('value', 'true');
createInput.setAttribute('type', 'hidden');
headerLoginForm.appendChild(createInput);
submit.setAttribute('type', 'button');
submit.setAttribute('onclick', 'submitPost(\'headerLoginForm\', true, \'Logging in...\');');
}
{% elseif user.checklogin %}
// Prepare header logout stuff
function initHeaderLoginForm() {
var headerLogoutLink = document.getElementById('headerLogoutLink');
headerLogoutLink.setAttribute('href', 'javascript:void(0);');
headerLogoutLink.setAttribute('onclick', 'doHeaderLogout();');
}
function doHeaderLogout() {
generateForm("headerLogoutForm", {
"class": "hidden",
"method": "post",
"action": "//{{ sakura.url_main }}/logout"
},
{
"mode": "logout",
"ajax": "true",
"time": "{{ php.time }}",
"session": "{{ php.sessionid }}",
"redirect": "{{ sakura.currentpage }}"
}, "contentwrapper");
setTimeout(function(){
submitPost("headerLogoutForm", true, "Logging out...")
}, 10);
}
{% endif %}
{% if php.self == '/profile.php' and user.checklogin and user.data.id != profile.user.id %}
// Prepare friend toggle
function initFriendToggle() {
var profileFriendToggle = document.getElementById('profileFriendToggle');
profileFriendToggle.setAttribute('href', 'javascript:void(0);');
profileFriendToggle.setAttribute('onclick', 'doFriendToggle();');
}
function doFriendToggle() {
generateForm("doFriendToggle", {
"class": "hidden",
"method": "post",
"action": "//{{ sakura.url_main }}/friends"
},
{
"{% if profile.friend == 0 %}add{% else %}remove{% endif %}": "{{ profile.user.id }}",
"ajax": "true",
"time": "{{ php.time }}",
"session": "{{ php.sessionid }}",
"redirect": "{{ sakura.currentpage }}"
}, "contentwrapper");
setTimeout(function(){
submitPost("doFriendToggle", true, "{% if profile.friend == 0 %}Adding{% else %}Removing{% endif %} friend...")
}, 10);
}
{% endif %}
// Space for things that need to happen onload
window.onload = function() {
window.addEventListener("load", function() {
// Alter the go to top button
var gotop = document.getElementById('gotop');
gotop.setAttribute('href', 'javascript:void(0);');
gotop.setAttribute('onclick', 'scrollToTop();');
// Login form under header and ajax logout
initHeaderLoginForm();
{% if user.checklogin %}
// Convert href to object in logout link
prepareAjaxLink('headerLogoutLink', 'submitPost', ', true, "Logging out..."');
{% elseif not sakura.lockauth and php.self != '/authenticate.php' %}
// Make the header login form dynamic
var headerLoginForm = document.getElementById('headerLoginForm');
var createInput = document.createElement('input');
var submit = headerLoginForm.querySelector('[type="submit"]');
createInput.setAttribute('name', 'ajax');
createInput.setAttribute('value', 'true');
createInput.setAttribute('type', 'hidden');
headerLoginForm.appendChild(createInput);
submit.setAttribute('type', 'button');
submit.setAttribute('onclick', 'submitPost(\''+ headerLoginForm.action +'\', formToObject(\'headerLoginForm\'), true, \'Logging in...\');');
{% endif %}
{% if user.checklogin %}
// Make notification requests (there's a seperate one to make it happen before the first 60 seconds)
notifyRequest('{{ php.sessionid }}');
setInterval(function(){notifyRequest('{{ php.sessionid }}');}, 60000);
// Create interval
setInterval(function() {
notifyRequest('{{ php.sessionid }}');
}, 60000);
{% endif %}
{% if php.self == '/profile.php' and user.checklogin and user.data.id != profile.user.id %}
initFriendToggle();
// Make friend button dynamic
prepareAjaxLink('profileFriendToggle', 'submitPost', ', true, "{% if profile.friend == 0 %}Adding{% else %}Removing{% endif %} friend..."');
{% endif %}
{% if php.self == '/viewtopic.php' and user.checklogin %}
var forumFriendToggles = document.querySelectorAll('.forum-friend-toggle');
for(var i in forumFriendToggles) {
prepareAjaxLink(forumFriendToggles[i], 'submitPost', ', true, "Please wait..."');
}
{% endif %}
{% if php.self == '/authenticate.php' and not sakura.lockauth %}
// AJAX Form Submission
// AJAX Form Submission
var forms = {
{% if not auth.changingPass %}
"loginForm": 'Logging in...',
@ -179,7 +118,7 @@
form.setAttribute('onkeydown', 'formEnterCatch(event, \''+ submit.id +'\');');
submit.setAttribute('href', 'javascript:void(0);');
submit.setAttribute('onclick', 'submitPost(\''+ i +'\', true, \''+ forms[i] +'\', '+ (i == 'registerForm' ? 'true' : 'false') +');');
submit.setAttribute('onclick', 'submitPost(\''+ form.action +'\', formToObject(\''+ i+ '\'), true, \''+ forms[i] +'\', '+ (i == 'registerForm' ? 'true' : 'false') +');');
submit.setAttribute('type', 'button');
var createInput = document.createElement('input');
@ -190,7 +129,7 @@
}
{% endif %}
};
});
</script>
</head>
<body>

View file

@ -426,6 +426,79 @@ function ajaxPost(url, data) {
}
// Convert href attribute to an object
function prepareAjaxLink(linkId, callback, attrs) {
// Get the elements
var link = typeof linkId === 'object' ? linkId : document.getElementById(linkId);
// Catch null
if(link == null) {
return;
}
// Get the href value
var hrefRaw = link.attributes.href.value;
// Get the action path
var action = hrefRaw.split('?')[0];
// Split the request variables
var variablesNotSplit = hrefRaw.split('?')[1].split('&');
// Create variables object
var variables = {};
// Split the name and values of the variables
for(var key in variablesNotSplit) {
// Split name and value
var newVar = variablesNotSplit[key].split('=');
// Push it into the object
variables[newVar[0]] = newVar[1];
}
// Add ajax=true
variables['ajax'] = true;
// Update link attributes
link.setAttribute('href', 'javascript:void(0);');
link.setAttribute('onclick', callback +'(\''+ action +'\', JSON.parse(\''+ JSON.stringify(variables) +'\')'+ (typeof attrs != 'undefined' ? attrs : '') +');');
}
// Convert form to an object
function formToObject(formId) {
// Get form data
var form = document.getElementById(formId);
// Make an object for the request parts
var requestParts = new Object();
// Get all children with a name attribute
var children = form.querySelectorAll('[name]');
// Sort children and make them ready for submission
for(var i in children) {
if(typeof children[i] == 'object') {
requestParts[children[i].name] = ((typeof children[i].type !== "undefined" && children[i].type.toLowerCase() == "checkbox") ? children[i].checked : children[i].value);
}
}
// Return the object
return requestParts;
}
// Quickly building a form for god knows what reason
function generateForm(formId, formAttr, formData, appendTo) {
@ -488,7 +561,7 @@ function formEnterCatch(key, id) {
}
// Submitting a form using an AJAX POST request
function submitPost(formId, busyView, msg, resetCaptchaOnFailure) {
function submitPost(action, requestParts, busyView, msg, resetCaptchaOnFailure) {
// If requested display the busy thing
if(busyView) {
@ -497,37 +570,8 @@ function submitPost(formId, busyView, msg, resetCaptchaOnFailure) {
}
// Get form data
var form = document.getElementById(formId);
// Make sure the form id was proper and if not report an error
if(form === null) {
if(busyView) {
ajaxBusyView(true, 'Invalid Form ID, contact the administrator.');
setTimeout(function(){ajaxBusyView(false);}, 2000);
}
return;
}
// Make an object for the request parts
var requestParts = new Object();
// Get all children with a name attribute
var children = form.querySelectorAll('[name]');
// Sort children and make them ready for submission
for(var i in children) {
if(typeof children[i] == 'object') {
requestParts[children[i].name] = ((typeof children[i].type !== "undefined" && children[i].type.toLowerCase() == "checkbox") ? children[i].checked : children[i].value);
}
}
// Submit the AJAX request
var request = ajaxPost(form.action, requestParts).split('|');
var request = ajaxPost(action, requestParts).split('|');
// If using the busy view thing update the text displayed to the return of the request
if(busyView) {