Cloning the Spoiler Button on another part of the site?

[1im]

Me changing some of the class definitions?

I change all Spoiler to "Skill"

<div class="ToggleTriggerAnchor bbCodeSkillContainer">
            <button class="button bbCodeSkillButton ToggleTrigger Tooltip JsOnly" data-target="> .SkillTarget" title=""><span>Show Skills</span></button>
       
            <div class="SpoilerTarget bbCodeSkillText"><em class="userBanner bannerStaff wrapped" itemprop="title"><span class="before"></span><strong>Staff Member</strong><span class="after"></span></em>
<em class="userBanner bannerBlue wrapped" itemprop="title"><span class="before"></span><strong>PHP</strong><span class="after"></span></em>
<em class="userBanner bannerOrange wrapped" itemprop="title"><span class="before"></span><strong>Java</strong><span class="after"></span></em>
<em class="userBanner bannerGreen wrapped" itemprop="title"><span class="before"></span><strong>$iNewbie = true;</strong><span class="after"></span></em>
<em class="userBanner bannerYellow wrapped" itemprop="title"><span class="before"></span><strong>JavaScript</strong><span class="after"></span></em>
<em class="userBanner bannerGray wrapped" itemprop="title"><span class="before"></span><strong>Indie Developer</strong><span class="after"></span></em>
  </div>
</div>

So I copied some of design things from inspect element on the Spoilers in a thread and trying to convert it over to use in the user banners
library/XenForo/Template/Helper/Core.php Function: helperUserBanner



I am fully capable of getting the HTML the way I want since the output is the same that was in the spoiler tag but I ran into a few problems.

#1: The skills are already Shown when loading a page, They need to be a hiding like spoiler tag does.
#2: If I hoover over "Show Skills", they get hidden




After I hoover over "Show Skills"

<div class="SpoilerTarget bbCodeSkillText" style="display: none; position: absolute; top: 732px; left: 91.4375px;">

Once I click on "Show Skills" nothing happens. There is also no errors in my errorLog.

Second Attempt or maybe the original way I tried

<div class="ToggleTriggerAnchor bbCodeSpoilerContainer">
            <button class="button bbCodeSpoilerButton ToggleTrigger Tooltip JsOnly" data-target="> .SpoilerTarget" title=""><span>Show Skills</span></button>
       
            <div class="SpoilerTarget bbSpoilerSkillText"><em class="userBanner bannerStaff wrapped" itemprop="title"><span class="before"></span><strong>Staff Member</strong><span class="after"></span></em>
<em class="userBanner bannerBlue wrapped" itemprop="title"><span class="before"></span><strong>PHP</strong><span class="after"></span></em>
<em class="userBanner bannerOrange wrapped" itemprop="title"><span class="before"></span><strong>Java</strong><span class="after"></span></em>
  </div>
</div>

This one has the skills hidden from the start:


But they will not show once Show Skills is clicked..


Anyone got any ideas =)

 

[EQnoble]

To be completely honest, I would do something simple from scratch for that toggle but...first thing you should be doing is adding some css to hide your skill class elements because there is nothing you can click to show if it is already showing. (Clicking the show spoiler button adds display:block; to the element in question)

.hasJs .bbCodeSkillText {
display:none;
}

Try that first

 

[1im]

.hasJs .bbCodeSkillText {
display:none;
}

Try that first

I can't even find the spoiler css.. ;\

.hasJs .bbCodeSpoilerText {
display:none;
}

It was this at first,: <div class="SpoilerTarget bbCodeSpoilerText"> then I changed it SkillText

 

[1im]

Seems like I am making small progress. I still have not changed the CSS yet though.


This is the code after it gets clicked.

<div class="ToggleTriggerAnchor bbCodeSpoilerContainer">
            <button class="button bbCodeSpoilerButton ToggleTrigger Tooltip JsOnly" data-target="> .SpoilerTarget"><span>Show Skills</span></button>
          
  
    <div class="SpoilerTarget bbCodeSpoilerText"> <em class="userBanner bannerStaff wrapped" itemprop="title"><span class="before"></span><strong>Staff Member</strong><span class="after"></span></em>
<em class="userBanner bannerBlue wrapped" itemprop="title"><span class="before"></span><strong>PHP</strong><span class="after"></span></em>
<em class="userBanner bannerOrange wrapped" itemprop="title"><span class="before"></span><strong>Java</strong><span class="after"></span></em>
<em class="userBanner bannerGreen wrapped" itemprop="title"><span class="before"></span><strong>$iNewbie = true;</strong><span class="after"></span></em>
<em class="userBanner bannerYellow wrapped" itemprop="title"><span class="before"></span><strong>JavaScript</strong><span class="after"></span></em>
<em class="userBanner bannerGray wrapped" itemprop="title"><span class="before"></span><strong>Indie Developer</strong><span class="after"></span></em></div>
        </div>

Then this happened:




Since I was working on a live environment (my forum)

I hurried up and changed this

<div class="SpoilerTarget bbCodeSpoilerText">

to this:

<div class="SpoilerTarget bbCodeSpoilerTextSSS">

and reuploaded.

I seen all the Skills Listed:

I clicked the "Show Skills" button a few times, it hid, then shown then hid then shown as it was suppose to do.

So then the final touch:
Add style to make it hidden from get go =]

<div class="SpoilerTarget bbCodeSpoilerTextss" style="display: none; opacity: 0;">

Everyone has to love when you figure it out mostly by mistake.. =]

 

[1im]

Here's the final code. I seen a few people say they wanted something like this:

In the file library/XenForo/Template/Helper/Core.php
Aprox ~ line 959 replace the entire function public static function helperUserBanner($user, $extraClass = '', $disableStacking = false)

with:

    public static function helperUserBanner($user, $extraClass = '', $disableStacking = false)
    {
        $starter = '<div class="ToggleTriggerAnchor bbCodeSpoilerContainer">
            <button class="button bbCodeSpoilerButton ToggleTrigger Tooltip JsOnly" data-target="> .SpoilerTarget" title="Show Skills"><span>Show Skills</span></button>
            <div class="SpoilerTarget bbCodeSpoilerTexts" style="display: none; opacity: 0;"> ';
 
        $end = "</div>
        </div>";
     
        if (!is_array($user) || !array_key_exists('user_group_id', $user) || !array_key_exists('secondary_group_ids', $user))
        {
            return '';
        }

        if (empty($user['user_id']))
        {
            $user['user_group_id'] = XenForo_Model_User::$defaultGuestGroupId;
            $user['secondary_group_ids'] = '';
        }

        $banners = array();
        $opt = XenForo_Application::getOptions()->userBanners;

        if (!empty($user['is_staff']) && !empty($opt['showStaff']))
        {
            $p = new XenForo_Phrase('staff_member');
            $banners['staff'] = '<em class="userBanner bannerStaff ' . $extraClass . '" itemprop="title"><span class="before"></span><strong>' . $p . '</strong><span class="after"></span></em>';
        }

        $memberGroupIds = array($user['user_group_id']);
        if (!empty($user['secondary_group_ids']))
        {
            $memberGroupIds = array_merge($memberGroupIds, explode(',', $user['secondary_group_ids']));
        }

        foreach (self::$_userBanners AS $groupId => $banner)
        {
            if (!in_array($groupId, $memberGroupIds))
            {
                continue;
            }

            $banners[$groupId] = '<em class="' . $banner['class'] . ' ' . $extraClass . '" itemprop="title"><span class="before"></span><strong>' . $banner['text'] . '</strong><span class="after"></span></em>';
        }

        if (!$banners)
        {
            return '';
        }

        if ($opt['displayMultiple'] && !$disableStacking)
        {
            return $starter . implode("\n", $banners) . $end;
        }
        else if ($opt['showStaffAndOther'] && isset($banners['staff']) && count($banners) >= 2)
        {
            $staffBanner = $banners['staff'];
            unset($banners['staff']);
            return $starter . $staffBanner . "\n" . reset($banners) . $end;
        }
        else
        {
            return $starter . reset($banners) . $end;
        }
    }

Edit: I guess I should note that if you do use this function. This will also change your profile banners:

 

[EQnoble]

Edit: I guess I should note that if you do use this function. This will also change your profile banners:

View attachment 103565

Yes...this would not really define cloning the spoiler, you are literally changing it, again I feel like you went way overkill for this since you could have done this with pretty much a one liner + some css.

http://api.jquery.com/toggle/


At any rate if it works for you it works for you so congrats...but to possibly have to manually re-implement this every time xf upgrades (hardcoded changes to library files) just seems like way to much work for what can all be done with your markup and one line of JS/jQ.

 

[1im]

At any rate if it works for you it works for you so congrats...but to possibly have to manually re-implement this every time xf upgrades (hardcoded changes to library files) just seems like way to much work for what can all be done with your markup and one line of JS/jQ.

I think your right, Would just have to edit the message_user_info template instead and add that JS/jQ. =]

I am not to familar with xF yet. =]

 

[EQnoble]

I think your right, Would just have to edit the message_user_info template instead and add that JS/jQ. =]

I am not to familar with xF yet. =]

Bingo

Well, if you are modifying php files on your own in early steps I would feel comfortable saying that you will be ok in the long run and that it is just a matter of spending time rummaging templates to figure out the path of least resistance for your future modding adventures.

I did a similar thing myself yesterday and thought I needed to make a complete addon for a series of user selectable public display items but existing systems within xenforo allowed me to use them and apply changes to visually display on pages/threads/etc utilizing template modifications, and I spent more time planning the addon that I never made than I did actually putting together some tweaks and mods to do what was essentially the same damn thing as far as net results go.