remove inline js from profile
This commit is contained in:
parent
868e2e25a7
commit
9141ce0d8b
5 changed files with 154 additions and 133 deletions
73
resources/assets/typescript/Yuuno/Image.ts
Normal file
73
resources/assets/typescript/Yuuno/Image.ts
Normal 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 + ")";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
73
resources/assets/typescript/Yuuno/Profile.ts
Normal file
73
resources/assets/typescript/Yuuno/Profile.ts
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
Reference in a new issue