{% extends "admin/base_site.html" %}
{% load i18n %}
{% block bodyclass %}grp-doc{% endblock %}
{% block content-class %}{% endblock %}
{% block title %}Grappelli Documentation &raquo; Filter{% endblock %}

{% block extrahead %}
	<script type="text/javascript" charset="utf-8">
        (function($) {
            $(document).ready(function() {
                $("a.grp-pulldown-handler").click(function() {
		            var pulldownContainer = $(this).closest(".grp-pulldown-container");
		            $(pulldownContainer).toggleClass("grp-pulldown-state-open").children(".grp-pulldown-content").toggle();
		        });
		        $("a.grp-pulldown-handler").bind('mouseout', function() {
		            $(this).blur();
		        });
            });
        })(django.jQuery);
	</script>
{% endblock %}

{% block breadcrumbs %}
    <ul>
        <li><a href="../">Grappelli Documentation</a></li>
        <li>Filter</li>
    </ul>
{% endblock %}

{% block content %}
    <h1>Filter</h1>
    <div class="g-d-c">
    	<section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Basics</h1>
		            <p>A filter is meant to appear in a <span class="grp-doc-class">.grp-row</span> within a <span class="grp-doc-class">.grp-module</span>.</p>
		            <p>Basically it is a <span class="grp-doc-class">.grp-filter</span> containing an <span class="grp-doc-class">.grp-pulldown-container</span> with an <span class="grp-doc-dom"><span>a.grp-button.grp-pulldown-handler</span></span> and a <span class="grp-doc-dom"><span>div.grp-pulldown-content</span></span>.</p>
		            <p>The <span class="grp-doc-dom"><span>div.grp-pulldown-content</span></span> itself contains a <span class="grp-doc-class">.grp-module</span> for each filter. Each choice is represented in a <span class="grp-doc-class">.grp-row</span>.</p>
					<p>You have to use some javascript code to make the pulldown work (e.g. with the source code below).</p>
					<p>Make sure to wrap the filter with spaceless-tags to avoid whitespaces.</p>
					<p>You can use filters in two predefined ways: as <strong>selects</strong> and as <strong>listings</strong> (more information below).</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<div class="grp-module">
	    				<div class="grp-row">
	    					<div class="grp-filter">
				    			<div class="grp-pulldown-container">
				                    <a href="javascript://" class="grp-button grp-pulldown-handler">Filter</a>
				                    <div class="grp-pulldown-content" style="display: none">
				                    	<div class="grp-module">
				                    		<div class="grp-row">
				                    			Your filters go in here.
				                    		</div>
				                    	</div>
				                    </div>
				                </div>
				            </div>
						</div>
					</div>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-module">
    <div class="grp-row">
        {% templatetag openblock %} spaceless {% templatetag closeblock %}
            <div class="grp-filter">
                <div class="grp-pulldown-container">
                    <a href="javascript://" class="grp-button grp-pulldown-handler">Filter</a>
                    <div class="grp-pulldown-content" style="display: none">
                    	Your filters go in here.
                    </div>
                </div>
            </div>
        {% templatetag openblock %} endspaceless {% templatetag closeblock %}
    </div>
</div>
{% endfilter %}</code></pre></div>
				<div class="grp-doc-code"><pre><code>{% filter force_escape %}
(function($) {
    $(document).ready(function() {
        $("a.grp-pulldown-handler").click(function() {
            var pulldownContainer = $(this).closest(".grp-pulldown-container");
            $(pulldownContainer).toggleClass("grp-pulldown-state-open").children(".grp-pulldown-content").toggle();
        });
        $("a.grp-pulldown-handler").bind('mouseout', function() {
            $(this).blur();
        });
        $(".grp-filter-choice").change(function(){
            location.href = $(this).val();
        });
    });
})(grp.jQuery);
		    		{% endfilter %}</code></pre></div>
		    	</div>
	    	</div>
	    </section>
	    <section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Filters as a Select</h1>
		            <p>Each filter is represented by a <span class="grp-doc-class">.grp-module</span> containing a <span class="grp-doc-dom"><span>select</span></span> where the choices are <span class="grp-doc-dom"><span>options</span></span>.</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<div class="grp-module">
	    				<div class="grp-row">
	    					<div class="grp-filter">
				    			<div class="grp-pulldown-container">
				                    <a href="javascript://" class="grp-button grp-pulldown-handler">Filter</a>
				                    <div class="grp-pulldown-content" style="display: none">
				                    	<div class="grp-module">
				                    		<div class="grp-row">
				                    			<label>Filter 1</label>
											    <select class="grp-filter-choice">
											        <option value="1" selected="selected">Option 1</option>
											        <option value="2">Option 2</option>
											        <option value="3">Option 3</option>
											    </select>
				                    		</div>
				                    	</div>
				                    	<div class="grp-module">
				                    		<div class="grp-row">
				                    			<label>Filter 2</label>
											    <select class="grp-filter-choice">
											        <option value="1" selected="selected">Option 1</option>
											        <option value="2">Option 2</option>
											        <option value="3">Option 3</option>
											    </select>
				                    		</div>
				                    	</div>
				                    </div>
				                </div>
				            </div>
						</div>
					</div>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-module">
    <div class="grp-row">
        {% templatetag openblock %} spaceless {% templatetag closeblock %}
            <div class="grp-filter">
                <div class="grp-pulldown-container">
                    <a href="javascript://" class="grp-button grp-pulldown-handler">Filter</a>
                    <div class="grp-pulldown-content" style="display: none">
                    	<div class="grp-module">
                            <div class="grp-row">
                                <label>Filter 1</label>
                                <select class="grp-filter-choice">
                                    <option value="1" selected="selected">Option 1</option>
                                    <option value="2">Option 2</option>
                                    <option value="3">Option 3</option>
                                </select>
                            </div>
                        </div>
                        <div class="grp-module">
                            <div class="grp-row">
                                <label>Filter 1</label>
                                <select class="grp-filter-choice">
                                    <option value="1" selected="selected">Option 1</option>
                                    <option value="2">Option 2</option>
                                    <option value="3">Option 3</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% templatetag openblock %} endspaceless {% templatetag closeblock %}
    </div>
</div>
{% endfilter %}</code></pre></div>
	</section>
	    <section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Filters as a Listing</h1>
		            <p>Each filter is represented by a <span class="grp-doc-class">.grp-module</span> where the choices are <span class="grp-doc-class">.grp-rows</span>.</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<div class="grp-module">
	    				<div class="grp-row">
	    					<div class="grp-filter">
				    			<div class="grp-pulldown-container">
				                    <a href="javascript://" class="grp-button grp-pulldown-handler">Filter</a>
				                    <div class="grp-pulldown-content" style="display: none">
				                    	<div class="grp-module">
				                    		<h3>Filter 1</h3>
				                    		<div class="grp-row">
				                    			<a href="">Choice 1</a>
				                    		</div>
				                    		<div class="grp-row grp-selected">
				                    			<a href="">Choice 2</a>
				                    		</div>
				                    		<div class="grp-row">
				                    			<a href="">Choice 3</a>
				                    		</div>
				                    	</div>
				                    	<div class="grp-module">
				                    		<h3>Filter 2</h3>
				                    		<div class="grp-row">
				                    			<a href="">Choice 1</a>
				                    		</div>
				                    		<div class="grp-row grp-selected">
				                    			<a href="">Choice 2</a>
				                    		</div>
				                    		<div class="grp-row">
				                    			<a href="">Choice 3</a>
				                    		</div>
				                    	</div>
				                    </div>
				                </div>
				            </div>
						</div>
					</div>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-module">
    <div class="grp-row">
        {% templatetag openblock %} spaceless {% templatetag closeblock %}
            <div class="grp-filter">
                <div class="grp-pulldown-container">
                    <a href="javascript://" class="grp-button grp-pulldown-handler">Filter</a>
                    <div class="grp-pulldown-content" style="display: none">
                    	<div class="grp-module">
                            <h3>Filter 1</h3>
                            <div class="grp-row">
                                <a href="">Choice 1</a>
                            </div>
                            <div class="grp-row grp-selected">
                                <a href="">Choice 2</a>
                            </div>
                            <div class="grp-row">
                                <a href="">Choice 3</a>
                            </div>
                        </div>
                        <div class="grp-module">
                            <h3>Filter 2</h3>
                            <div class="grp-row">
                                <a href="">Choice 1</a>
                            </div>
                            <div class="grp-row grp-selected">
                                <a href="">Choice 2</a>
                            </div>
                            <div class="grp-row">
                                <a href="">Choice 3</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% templatetag openblock %} endspaceless {% templatetag closeblock %}
    </div>
</div>
{% endfilter %}</code></pre></div>
	</section>
	
    </div>
{% endblock %}

