-
-
-
-
+
', Utils::$context['member']['avatar']['choice'] == 'external' ? '
' : '', '
+
';
}
// If the user is able to upload avatars to the server show them an upload box.
if (!empty(Utils::$context['member']['avatar']['allow_upload'])) {
echo '
- ', Lang::getTxt('avatar_by_url', file: 'Profile'), '
', !empty(Config::$modSettings['avatar_action_too_large']) && Config::$modSettings['avatar_action_too_large'] == 'option_download_and_resize' ? template_max_size('external') : '', '
- +
+
', Utils::$context['member']['avatar']['choice'] == 'upload' ? '' : '', '
- ', template_max_size('upload'), '
+ ', template_max_size('upload'), '
', (!empty(Utils::$context['member']['avatar']['id_attach']) ? '
' : ''), '
';
}
@@ -3082,7 +3078,7 @@ function template_profile_avatar_select()
// if the user is able to use Gravatar avatars show then the image preview
if (!empty(Utils::$context['member']['avatar']['allow_gravatar'])) {
echo '
- ' : ''), '
+
', Utils::$context['member']['avatar']['choice'] == 'gravatar' ? '' : '';
if (empty(Config::$modSettings['gravatarAllowExtraEmail'])) {
@@ -3105,51 +3101,6 @@ function template_profile_avatar_select()
}
echo '
-
';
}
diff --git a/Themes/default/scripts/profile.js b/Themes/default/scripts/profile.js
index e72465db71..9e43d78278 100644
--- a/Themes/default/scripts/profile.js
+++ b/Themes/default/scripts/profile.js
@@ -162,67 +162,85 @@ function ajax_getSignaturePreview (showPreview)
return false;
}
-function changeSel(selected)
+/*
+ * The avatar picker. Which panel is on show follows the radio buttons, and
+ * every panel says which choice it belongs to with data-avatar-choice, so
+ * nothing here has to be told which ones the forum allows.
+ */
+document.addEventListener('DOMContentLoaded', function ()
{
- if (cat.selectedIndex == -1)
+ var panels = document.querySelectorAll('[data-avatar-choice]');
+
+ if (!panels.length)
return;
- if (cat.options[cat.selectedIndex].value.indexOf("/") > 0)
- {
- var i;
- var count = 0;
+ var form = panels[0].closest('form'),
+ choices = form.avatar_choice;
- file.style.display = "inline";
- file.disabled = false;
+ var showPanel = function () {
+ var chosen = form.avatar_choice.value;
- for (i = file.length; i >= 0; i = i - 1)
- file.options[i] = null;
+ for (var i = 0; i < panels.length; i++)
+ panels[i].style.display = panels[i].dataset.avatarChoice == chosen ? '' : 'none';
- for (i = 0; i < files.length; i++)
- if (files[i].indexOf(cat.options[cat.selectedIndex].value) == 0)
- {
- var filename = files[i].substr(files[i].indexOf("/") + 1);
- var showFilename = filename.substr(0, filename.lastIndexOf("."));
- showFilename = showFilename.replace(/[_]/g, " ");
+ // Switching to Gravatar throws away an address that came from one of
+ // the other choices, since it would not be an address at all.
+ var gravatar = document.getElementById('avatar_gravatar');
- file.options[count] = new Option(showFilename, files[i]);
+ if (chosen == 'gravatar' && gravatar && 'clearEmail' in gravatar.dataset && document.getElementById('gravatarEmail'))
+ document.getElementById('gravatarEmail').value = '';
+ };
- if (filename == selected)
- {
- if (file.options.defaultSelected)
- file.options[count].defaultSelected = true;
- else
- file.options[count].selected = true;
- }
+ for (var i = 0; i < choices.length; i++)
+ choices[i].addEventListener('change', showPanel);
- count++;
- }
+ showPanel();
- if (file.selectedIndex == -1 && file.options[0])
- file.options[0].selected = true;
+ // Touching anything inside a panel picks that panel's radio, which is what
+ // the onfocus attributes on each field used to do.
+ for (var i = 0; i < panels.length; i++)
+ panels[i].addEventListener('focusin', function () {
+ selectRadioByName(form.avatar_choice, this.dataset.avatarChoice);
+ showPanel();
+ });
- showAvatar();
- }
- else
+ var gallery = document.getElementById('cat');
+
+ if (gallery)
{
- file.style.display = "none";
- file.disabled = true;
- document.getElementById("avatar").src = avatardir + cat.options[cat.selectedIndex].value;
- document.getElementById("avatar").style.width = "";
- document.getElementById("avatar").style.height = "";
+ gallery.addEventListener('change', showAvatar);
+ showAvatar.call(gallery);
}
-}
+ var external = form.userpicpersonal;
+
+ if (external)
+ external.addEventListener('change', function () {
+ previewExternalAvatar(this.value);
+ });
+
+ var upload = document.getElementById('avatar_upload_box');
+
+ if (upload)
+ upload.addEventListener('change', function () {
+ readfromUpload(this);
+ });
+});
+
+// Shows whichever avatar the gallery is pointing at.
function showAvatar()
{
- if (file.selectedIndex == -1)
+ var chosen = this.options[this.selectedIndex];
+
+ if (!chosen || chosen.value == '')
return;
- document.getElementById("avatar").src = avatardir + file.options[file.selectedIndex].value;
- document.getElementById("avatar").alt = file.options[file.selectedIndex].text;
- document.getElementById("avatar").alt += file.options[file.selectedIndex].text == size ? "!" : "";
- document.getElementById("avatar").style.width = "";
- document.getElementById("avatar").style.height = "";
+ var preview = document.getElementById('avatar');
+
+ preview.src = this.dataset.avatardir + chosen.value;
+ preview.alt = chosen.text;
+ preview.style.width = '';
+ preview.style.height = '';
}
function previewExternalAvatar(src)