[MOD] Edit-Avatar FB Style

[netkingZ]

Nome MOD:
Edit-Avatar FB Style

Tipologia Codice:
JavaScript+HTML

Descrizione:
MOD per aggiungere la possibilità di modificare immediatamente l'immagina dell'Avatar come utilizzato su FaceBook

Salve mi sono dilettato nel modificare alcune parti del codice sorgente per creare l'effetto sopra descritto . Per il momento il codice che vi fornisco l'ho testato solo in locale e solo con la Skin "Baisik" , ma vi invito a riportarmi qui di seguito le vostre impressioni e suggerimenti. Grazie.

Procedura:
ACP-->Aspetto-->Template-->sidebar_visitor_panel

In sidebar_visitor_panel dopo:

<xen:if is="{$visitor.user_id}">

Inserisci il presente codice:

<!-- EDUARDESIGNER MOD-->
<script >
function mostra() {
  document.getElementById("xxx").style.display="block";
}
 
function nascondi() {
document.getElementById("xxx").style.display="none";
}
 
function apri() {
  document.getElementById("xxy").style.display="block";
}
 
function chiudi() {
  document.getElementById("xxy").style.display="none";
}
</script>
<!-- EDUARDESIGNER MOD-->

In sidebar_visitor_panel sostituisci:

<xen:avatar user="$visitor" size="m" img="true" />

con il presente codice:

<xen:avatar user="$visitor" size="m" img="true" onmouseover="JavaScript:mostra()" onmouseout="JavaScript:nascondi()"  />
     
<!-- EDUARDESIGNER MOD-->
 
          <div  id="xxx" onclickt="JavaScript:apri()" style="background-color:#fff;border:1px solid #111;height:20px;width:155px;color:#111;margin-left:-125px; position:fixed; display:none ; margin-top:20px" onmouseover="JavaScript:mostra()" onmouseout="JavaScript:nascondi()">
            <input type="button" value="Modifica immagine del profilo." style="background-color:#fff;border:1px solid transparent;height:20px;width:155px;color:#111;" onclick="JavaScript:apri()" >
          </div>
 
 
          <div id="xxy" class="xenOverlay avatarEditor" style="z-index: 9999; top: 88.5px; left: 462.5px; position: fixed; display: none; ">
          <xen:title>{xen:phrase avatar_editor}</xen:title>
 
        <xen:navigation>
    <xen:breadcrumb href="{xen:link 'full:account/personal-details'}">{xen:phrase personal_details}</xen:breadcrumb>
        </xen:navigation>
 
        <xen:require css="account_avatar_overlay.css" />
        <xen:require JavaScript="JavaScript/xenforo/avatar_editor.JavaScript" />
 
        <form action="{xen:link account/avatar-upload}" method="post" enctype="multipart/form-data"
    class="AvatarEditor AutoInlineUploader formOverlay"
    data-overlayClass="avatarEditor"
    data-maxWidth="{$maxWidth}">
 
    <div class="currentAvatar">
        <label for="ctrl_avatar" class="avatar NoOverlay Av{$visitor.user_id}l"><img src="{xen:helper avatar, $visitor, l}" alt="{xen:phrase current_avatar}" /></label>
    </div>
 
    <ul class="modifyControls">
 
        <li class="avatarOption">
            <div class="avatarCropper avatarLabel" style="width: {$maxWidth}px; height: {$maxWidth}px">
                <label for="ctrl_useGravatar_0" class="AvatarCropControl avatar NoOverlay Av{$visitor.user_id}l" style="width: {$maxWidth}px; height: {$maxWidth}px">
                    <img src="{xen:helper avatar, $visitor, l, custom}" style="{$maxDimension}: {$maxWidth}px" alt="{xen:phrase avatar}" />
                </label>
            </div>
 
            <input type="radio" name="use_gravatar" value="0" class="Disabler radioOption" id="ctrl_useGravatar_0"{xen:checked '!{$visitor.gravatar}'} />
 
            <div class="labelText" id="ctrl_useGravatar_0_Disabler">
                <label for="ctrl_useGravatar_0" id="ExistingCustom">
                    {xen:phrase use_custom_avatar}
                    <span class="explain faint">
                        {xen:phrase drag_image_to_crop_then_click_okay_or_upload_new_avatar}
                    </span>
                </label>
 
                <label for="ctrl_avatar" class="ClickProxy" rel="#ctrl_useGravatar_0" data-allowDefault="1">{xen:phrase upload_new_custom_avatar}:</label>
                <input type="file" name="avatar" class="textCtrl" onchange="this.blur()" id="ctrl_avatar" title="{xen:phrase supported_formats_jpeg_png_gif}" />
                <div class="explain faint">{xen:phrase it_is_recommended_that_you_use_image_that_is_at_least_200x200_pixels}</div>
            </div>
        </li>
 
        <xen:if is="{$xenOptions.gravatarEnable}">
            <li class="avatarOption">
                <label for="ctrl_useGravatar_1" class="avatarLabel avatar">
                    <img src="{$gravatarUrl}" class="Gravatar" alt="{xen:phrase gravatar}" width="{$maxWidth}" height="{$maxWidth}" id="GravatarImg" />
                </label>
 
                <input type="radio" name="use_gravatar" value="1" class="Disabler radioOption" id="ctrl_useGravatar_1"{xen:checked '{$visitor.gravatar}'} />
 
                <div class="labelText" id="ctrl_useGravatar_1_Disabler">
                    <label for="ctrl_useGravatar_1">{xen:phrase use_gravatar}</label>
 
                    <input type="email" name="gravatar" value="{$gravatarEmail}" class="textCtrl" id="GravatarEmail" placeholder="{xen:phrase gravatar_email_address}" />
                    <input type="button" class="button" id="Gravatar{xen:phrase test}" value="{xen:phrase test}"
                        data-testUrl="{xen:link account/gravatar-test}"
                        data-testSrc="#GravatarEmail"
                        data-testImg="#GravatarImg"
                        data-testErr="#GravatarError" />
 
                    <p class="explain faint">
                        <label for="ctrl_useGravatar_1"><span id="GravatarError"></span> {xen:phrase enter_email_address_of_gravatar_you_want_to_use}</label>
                        <a class="hint" href="http://gravatar.com" rel="nofollow" target="_blank">{xen:phrase whats_gravatar}</a>
                    </p>
                </div>
            </li>
        </xen:if>
 
        <li class="submitUnit saveDeleteControls">
            <label for="DeleteAvatar" class="deleteCtrl"><input type="checkbox" name="delete" value="1" id="DeleteAvatar" /> {xen:phrase delete_current_avatar_question}</label>
            <span class="buttons">
                <input type="submit" value="{xen:phrase okay}" class="button primary" accesskey="s" id="ctrl_save" />
                <input type="reset" value="{xen:phrase close}" class="button OverlayCloser overlayOnly" accesskey="d" onclick="JavaScript:chiudi()" />
            </span>
        </li>
    </ul>
 
 
    <input type="hidden" name="avatar_date" value="{$visitor.avatar_date}" />
    <input type="hidden" name="avatar_crop_x" value="{$cropX}" />
    <input type="hidden" name="avatar_crop_y" value="{$cropY}" />
    <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
 
</form>
</div>
 
<!-- EDUARDESIGNER MOD-->

Il codice è molto semplice , ma spero risulti utile a chi come me ne aveva bisogno.

Screen:

Funzionamento:

Quando il mouse passa sull'Avatar esce la scritta "Modifica immagine del profilo" , quando ne esce scompare , invece se si clicca viene aperto il sistema di Editing dell'Avatar. Cliccando sul pulsante Chiudi si ritorna alla pagina presente.