MODX User Group Access Tabs

These are the tabs used to determine User Group Access Rights

by chunkyRice

HTML

<div class="introduction">
    <h1>MODX User Group Access Tabs</h1>
    <p>These are the tabs used to determine User Group Access Rights</p>
    <p>Comments and explanations in the Comments tab</p>
</div>

<div class="wrapper">

    <div class="tabs">

        <div class="tab">
            <input type="radio" id="tab-1" name="tab-group-1" checked>
            <label for="tab-1">Manager Access</label>

            <div class="content">

                <fieldset id="manager_access" class="">
                    <legend>Manager Access</legend>
                    <ul>
                        <li><input type="checkbox" name="frames" id="frames" value=""> <label for="frames">Allow access to the Manager.</label></li>
                        <li><input type="checkbox" name="view_offline" id="view_offline" value=""> <label for="view_offline">View unpublished Resources and the site when it's offline.</label></li>
                    </ul>
                </fieldset>
                
                <fieldset id="top_menu_permissions" class="">
                    <legend>Top Menu Permissions</legend>
                    <ul>
                        <li>
                            <select name="manager_access_role" id="manager_access_role">
                                <option value="">Minimum Role&hellip;</option>
                                <optgroup label="Roles">
                                    <option value="">Super User</option>
                                    <option value="">Member</option>
                                </optgroup>
                            </select>
                            <select name="manager_access_policy" id="manager_access_policy">
                                <option value="">Admin Policy&hellip;</option>
                                <option value="">No Access</option>
                                <optgroup label="Manager &amp; Top Menu Access">
                                    <option...

CSS

body {
    font-family: sans-serif;
    background: #f6f6f6;
    color: #333;
    font-size: 13px;
    padding: 10px;
}
.introduction * {
    font-size: 11px;
}
.introduction h1 {
    font-weight: bold;
    font-size: 13px;
}
#comments ul {
    list-style-type: disc;
}
.introduction ul {
    padding-left: 1em;
}
p,
ul {
    margin-bottom: 0.5em;
}
li ul {
    margin-bottom: 0;
}
fieldset {
    background-color: #fff;
    margin-top: 10px;
    border: 1px solid #aaa;
    padding: 10px;
}
legend {
    font-weight: bold;
    font-size: 16px;
    background-color: #fff;
}
li {
    padding-bottom: 4px;
}
.wrapper ul {
    list-style-type: none;
    padding-left: 1em;
}
.wrapper li li {
    font-size: 11px; 
}
a {
    color: #393; 
}


/* css tabs with no javascript - from chris coyier: 
    http://css-tricks.com/functional-css-tabs-revisited/
*/
.tabs {
    position: relative;
    min-height: 800px; /* This part sucks */
    clear: both;
    margin: 25px 0;
}
.tab {
    float: left;
}
.tab > label {
    background: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    margin-left: -1px;
    position: relative;
    left: 1px;
    font-weight:bold;
}
.tab > label:hover {
    cursor:pointer;
}
.tab [type=radio] {
    display: none;
}
.content {
    position: absolute;
    top: 25px;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 20px;
    border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
    background: white;
    border-bottom: 1px solid white;
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
}

JavaScript

$(document).ready(function(){
    
    var show_text = 'show details';
    var hide_text = 'hide details';
    
    // hide the sub-level checkboxes in contextual areas, add a link to hook hide/show behaviour to
    $('.contextual').hide().before('<a class="revealer" href="#">'+show_text+'</a>'); 
    // add the hide/show behaviour
    $('.revealer').click(function(){
        $(this).next().toggle();
        var new_text = ( $(this).text() == show_text ) ? hide_text : show_text ;
        updateRevealerText( $(this), new_text );
        return false;
    })
    // we want all sub-level-checkboxes to be checked by default, but disable them so they are not submitted
    $('.contextual input[type="checkbox"]').attr('checked','checked').attr('disabled',true);

    // clicking a checkbox will open its sub-level options for more detail
    $('input[type="checkbox"]').change(function(){                
        var contextual = $(this).parent().find('.contextual').first();
        if ( $(this).is(':checked') ) {
            contextual.show();
            contextual.find('input').removeAttr('disabled');
            updateRevealerText( contextual.prev(), hide_text );
        } else {
            contextual.hide();
            contextual.find('input').attr('disabled',true);                    
            updateRevealerText( contextual.prev(), show_text );
        }
    })
    
    function updateRevealerText( el, new_text ) {
        if ( el.text() != new_text ) { el.text(new_text) }                
    }
  
})