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 %}
|
{% block content %}
|
||||||
{% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeBackground) or user.perms.manageProfileImages %}
|
{% 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') }}
|
{{ profile_image_changer(route('user.background', profile.id), '.container') }}
|
||||||
|
|
@ -193,4 +189,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<script>
|
||||||
|
Yuuno.Profile.Load(
|
||||||
|
{{ profile.userPage|length > 1 }},
|
||||||
|
{{ profile.lastfm ? ("'" ~ route('user.nowplaying', profile.id) ~ "'")|raw : 'null' }}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
{% endblock %}
|
{% 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) %}
|
{% macro profile_image_changer(url, query) %}
|
||||||
<div class="uploader">
|
<div class="uploader">
|
||||||
<label class="uploader__button uploader__button--change fa fa-edit">
|
<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>
|
</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>
|
</div>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
|
||||||
Reference in a new issue