MODX Access Policy Template Groups

Template Groups, currently used as a starting point for creating Access Policy Templates, in the future used for creating Access Policies.

by chunkyRice

HTML

<div class="introduction">
    <h1>MODX Access Policy Template Groups</h1>
    <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">Admin</label>

            <div class="content">

                <fieldset id="manager" class="">
                    <legend>Top Menu Access and Permissions</legend>
                    <ul>
                        <li><input type="checkbox" name="dashboards" id="dashboards" value=""> <label for="dashboards">DASHBOARDS Menu</label></li>
                        <li><input type="checkbox" name="menu_site" id="menu_site" value=""> <label for="menu_site">SITE Menu</label>
                            <div class="contextual">
                                <ul>
                                    <li><input type="checkbox" name="empty_cache" id="empty_cache" value=""> <label for="empty_cache">Clear cache</label></li>
                                    <li><input type="checkbox" name="remove_locks" id="remove_locks" value=""> <label for="remove_locks">Remove locks</label></li>
                                </ul>
                            </div>
                        </li>
                        <li><input type="checkbox" name="components" id="components" value=""> <label for="components">COMPONENTS Menu</label></li>
                        <li><input type="checkbox" name="menu_security" id="menu_security" value=""> <label for="menu_security">SECURITY Menu</label>
                            <div class="contextual">
                                <ul>
                                    <li><input type="checkbox" name="GROUPCHECK_users" id="GROUPCHECK_users" value=""> <label for="GROUPCHECK_users">Users</label>
                                        <div class="contextual">
                                            <ul>
                           ...

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;
}
.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) }                
            }
            
                        
            
        })