1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Cloning the Spoiler Button on another part of the site?

Discussion in 'XenForo Development Discussions' started by 1im, Apr 12, 2015.

  1. 1im

    1im Member

    Me changing some of the class definitions?

    I change all Spoiler to "Skill"

    PHP:
    <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

    spoiler.png

    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

    skills_gone.png


    After I hoover over "Show Skills"
    PHP:
    <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
    PHP:
    <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:
    skills_gone.png

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


    Anyone got any ideas =)
     
  2. EQnoble

    EQnoble Well-Known Member

    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)

    Code:
    .hasJs .bbCodeSkillText {
    display:none;
    }
    
    Try that first
     
  3. 1im

    1im Member

    I can't even find the spoiler css.. ;\
    Code:
    .hasJs .bbCodeSpoilerText {
    display:none;
    }
    
    It was this at first,: <div class="SpoilerTarget bbCodeSpoilerText"> then I changed it SkillText
     
  4. 1im

    1im Member

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


    This is the code after it gets clicked.
    PHP:
    <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:

    GMF_tag.png


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

    I hurried up and changed this
    PHP:
    <div class="SpoilerTarget bbCodeSpoilerText">
    to this:
    PHP:
    <div class="SpoilerTarget bbCodeSpoilerTextSSS">
    and reuploaded.

    I seen all the Skills Listed:

    [​IMG]

    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 =]
    PHP:
    <div class="SpoilerTarget bbCodeSpoilerTextss" style="display: none; opacity: 0;">

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

    1im Member

    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:

    PHP:
        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($memberGroupIdsexplode(','$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:

    profile.png
     
  6. EQnoble

    EQnoble Well-Known Member

    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 likes this.
  7. 1im

    1im Member

    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. =]
     
  8. EQnoble

    EQnoble Well-Known Member

    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.
     
    1im likes this.

Share This Page