remove inline js from profile

This commit is contained in:
flash 2016-12-23 20:18:02 +01:00
parent 868e2e25a7
commit 9141ce0d8b
5 changed files with 154 additions and 133 deletions

View file

@ -0,0 +1,73 @@
namespace Yuuno
{
export class Image
{
private static Client: Sakura.AJAX = new Sakura.AJAX;
public static Set(file: File, url: string, selector: string): void {
var formData: FormData = new FormData;
formData.append('session', Sakura.Config.SessionId);
formData.append('file', file, file.name);
this.Client.SetFormData(formData);
this.Client.SetUrl(url);
this.Client.AddCallback(0, Image.Error);
this.Client.AddCallback(200, (ajax: Sakura.AJAX) => {
var result: any = ajax.JSON();
if (result.error) {
Image.Error(result.error);
} else {
Image.Reload(url, selector);
}
ajax.RemoveCallback(200);
});
this.Client.Start(Sakura.HTTPMethod.POST);
}
public static Delete(url: string, selector: string): void {
this.Client.SetUrl(url + "?session=" + Sakura.Config.SessionId);
this.Client.AddCallback(0, () => {
Image.Reload(url, selector);
});
var confirm: Sakura.Dialogue = new Sakura.Dialogue;
confirm.SetType(Sakura.DialogueType.ConfirmNegative);
confirm.Title = "Deleting image";
confirm.Text = "Are you sure?";
confirm.AddCallback(Sakura.DialogueButton.Yes, () => {
Image.Client.Start(Sakura.HTTPMethod.DELETE);
confirm.Close();
});
confirm.Display();
}
private static Error(msg: string = null): void {
var diag: Sakura.Dialogue = new Sakura.Dialogue;
diag.Title = "Upload error!";
diag.Text = msg ? msg : "Something happened!";
diag.Display();
}
private static Reload(url: string, selector: string): void {
var elements = Sakura.DOM.Query(selector);
for (var i = 0; i < elements.length; i++) {
var element = elements[i],
url = url + "?" + Date.now();
if (element.tagName === "IMG") {
(<HTMLImageElement>element).src = url;
} else {
(<HTMLElement>element).style.backgroundImage = "url('" + url + ")";
}
}
}
}
}

View file

@ -0,0 +1,73 @@
namespace Yuuno
{
export class Profile
{
// now playing
private static NPClient: Sakura.AJAX;
private static NPInterval: number;
public static Load(userpage: boolean, npUrl: string = null): void {
window.addEventListener("hashchange", () => {
this.Mode(location.hash.slice(1));
});
if (location.hash) {
location.hash = location.hash.slice(1);
} else {
location.hash = userpage ? 'userpage' : 'comments';
}
if (npUrl !== null) {
this.NPStart(npUrl);
}
}
public static Mode(id: string): void {
// Get other active modes and fetch the new element
var current = document.getElementsByClassName('profile-mode-current'),
newMode = document.getElementById('profile-mode-' + id);
// Check if the new mode exists
if (!newMode) {
return;
}
// Check if there's any active and hide them
if (current) {
for (var i in current) {
current[i].className = 'hidden';
}
}
newMode.className = 'profile-mode-current';
}
private static NPStart(url: string): void {
this.NPClient = new Sakura.AJAX;
this.NPClient.SetUrl(url);
this.NPClient.AddCallback(200, () => {
var data: any = this.NPClient.JSON(),
artist = <HTMLLinkElement>Sakura.DOM.ID('np-artist'),
track = <HTMLLinkElement>Sakura.DOM.ID('np-track'),
state = Sakura.DOM.ID('np-state'),
by = Sakura.DOM.ID('np-by');
artist.href = data.artist_url;
artist.textContent = data.artist;
track.href = data.track_url;
track.textContent = data.track;
state.className = 'fa ' + (data.listening ? 'fa-play-circle' : 'fa-history');
by.className = data.track === '' || data.artist === '' ? 'hidden' : '';
});
this.NPUpdate();
}
private static NPUpdate(): void {
if (!Profile.NPInterval) {
Profile.NPInterval = setInterval(Profile.NPUpdate, 20000);
}
Profile.NPClient.Start(Sakura.HTTPMethod.GET);
}
}
}

View file

@ -105,10 +105,6 @@
},
} %}
{% block js %}
{% include 'user/profile_javascript.twig' %}
{% endblock %}
{% block content %}
{% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeBackground) or user.perms.manageProfileImages %}
{{ profile_image_changer(route('user.background', profile.id), '.container') }}
@ -193,4 +189,10 @@
</div>
</div>
</div>
<script>
Yuuno.Profile.Load(
{{ profile.userPage|length > 1 }},
{{ profile.lastfm ? ("'" ~ route('user.nowplaying', profile.id) ~ "'")|raw : 'null' }}
);
</script>
{% endblock %}

View file

@ -1,127 +0,0 @@
<script type="text/javascript">
window.addEventListener('load', function () {
{% if profile.lastfm %}
var np = new Sakura.AJAX();
np.SetUrl("{{ route('user.nowplaying', profile.id) }}");
np.AddCallback(200, function () {
var data = np.JSON(),
artist = Sakura.DOM.ID('np-artist'),
track = Sakura.DOM.ID('np-track'),
state = Sakura.DOM.ID('np-state'),
by = Sakura.DOM.ID('np-by');
artist.href = data.artist_url;
artist.textContent = data.artist;
track.href = data.track_url;
track.textContent = data.track;
state.className = 'fa ' + (data.listening ? 'fa-play-circle' : 'fa-history');
by.className = data.track === '' || data.artist === '' ? 'hidden' : '';
});
setInterval(function () { np.Start(Sakura.HTTPMethod.GET); }, 20000);
np.Start(Sakura.HTTPMethod.GET);
{% endif %}
// Check if location.hash is set
if (location.hash) {
var open = location.hash.slice(1);
// Check if the element exists
if (document.getElementById('profile-mode-' + open)) {
profileMode(open);
return;
}
}
var profileUserpage = document.getElementById('profile-mode-userpage');
location.hash = profileUserpage.children[0].innerHTML.trim().length ? 'userpage' : 'comments';
});
window.addEventListener("hashchange", function () {
profileMode(location.hash.slice(1));
});
// Switch to a different mode
function profileMode(id) {
// Get other active modes and fetch the new element
var current = document.getElementsByClassName('profile-mode-current'),
newMode = document.getElementById('profile-mode-' + id);
// Check if the new mode exists
if (!newMode) {
return;
}
// Check if there's any active
if (current) {
// Hide them all
for (i in current) {
current[i].className = 'hidden';
}
}
// Set the new to active
newMode.className = 'profile-mode-current';
}
function handleImageChange(file, url, query) {
var ajax = new Sakura.AJAX,
formData = new FormData;
formData.append('session', Sakura.Config.SessionId);
formData.append('file', file, file.name);
ajax.SetFormData(formData);
ajax.SetUrl(url);
ajax.AddCallback(200, function () {
var result = ajax.JSON();
if (result.error) {
var diag = new Sakura.Dialogue;
diag.Title = "Error";
diag.Text = result.error;
diag.Display();
} else {
refreshImage(url, query);
}
});
ajax.Start(Sakura.HTTPMethod.POST);
}
function handleImageDelete(url, query) {
var confirm = new Sakura.Dialogue;
confirm.SetType(Sakura.DialogueType.ConfirmNegative);
confirm.Title = "Deleting image";
confirm.Text = "Are you sure?";
confirm.AddCallback(Sakura.DialogueButton.Yes, function () {
var client = new Sakura.AJAX;
client.SetUrl(url + "?session=" + Sakura.Config.SessionId);
client.AddCallback(200, function () {
refreshImage(url, query);
});
client.Start(Sakura.HTTPMethod.DELETE);
this.Close();
});
confirm.Display();
}
function refreshImage(url, query) {
var elements = document.querySelectorAll(query);
for (var i = 0; i < elements.length; i++) {
var element = elements[i],
url = url + "?" + Date.now();
if (element.tagName === "IMG") {
element.src = url;
} else {
element.style.backgroundImage = "url('" + url + ")";
}
}
}
</script>

View file

@ -1,8 +1,8 @@
{% macro profile_image_changer(url, query) %}
<div class="uploader">
<label class="uploader__button uploader__button--change fa fa-edit">
<input type="file" class="uploader__change" onchange="handleImageChange(this.files[0], '{{ url }}', '{{ query }}')">
<input type="file" class="uploader__change" onchange="Yuuno.Image.Set(this.files[0], '{{ url }}', '{{ query }}')">
</label>
<button class="uploader__button uploader__button--delete fa fa-trash" onclick="handleImageDelete('{{ url }}', '{{ query }}')"></button>
<button class="uploader__button uploader__button--delete fa fa-trash" onclick="Yuuno.Image.Delete('{{ url }}', '{{ query }}')"></button>
</div>
{% endmacro %}