OpenSlides/openslides/projector/templates/projector/control.html

{% extends "projector/base_projector.html" %}

{% load tags %}
{% load i18n %}
{% load staticfiles %}

{% block header %}
    <link type="text/css" href="{% static 'styles/ui-lightness/jquery-ui-1.8.18.custom.css' %}" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" media="all" href="{% static 'styles/projector-control.css' %}" />
    <script type="text/javascript" src="{% static javascript/jquery-ui-1.8.18.custom.min.js' %}"></script>
    <script type="text/javascript" src="{% static javascript/projector-control.js %}"></script>
    <script type="text/javascript" src="{% static javascript/jquery.cookie.js %}"></script>
    <script type="text/javascript">
    $(function() {
        $( ".column" ).sortable({
            connectWith: ".column"
        });
        $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
            .find( ".portlet-header" )
                .addClass( "ui-widget-header ui-corner-all" )
                .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
                .end()
            .find( ".portlet-content" );
        $( ".portlet-header .ui-icon" ).click(function() {
            $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
            $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
        });
        $( ".column" ).disableSelection();
    });
    </script>


{% endblock %}

{% block content %}
    <h1>{% trans 'Projector' %}</h1>
    <div style="text-align: right; padding: 0 5px 5px 0; margin-top:-20px;">
        <!-- countdown -->
        <input type="checkbox" name="countdown" onchange="document.location='{% if countdown_visible %}{% url countdown_close %}{% else %}{% url countdown_open %}{% endif %}'"{% if countdown_visible %} checked{% endif %}>
        {% trans "Countdown" %} (<a href="{% url config_agenda %}">{{countdown_time}}{% trans "sec" %}</a>)
        {% if countdown_visible %}:
            <a class="projector_countdown" href="{% url countdown_reset %}" title="{% trans 'Reset countdown' %}">
                <img src="{% static 'images/icons/media-skip-backward.png' %}" />
            </a>
            <a class="projector_countdown" href="{% url countdown_start %}" title="{% trans 'Start countdown' %}">
                <img src="{% static 'images/icons/media-playback-start.png' %}" />
            </a>
            <a class="projector_countdown" href="{% url countdown_stop %}" title="{% trans 'Stop countdown' %}">
                <img src="{% static 'images/icons/media-playback-pause.png' %}" />
            </a>
        {% endif %}
        <p></p>
        <!-- projector control -->
        {% trans "Adjust projector view" %}:
        <a class="projector_edit" href="{% url projector_bigger %}" title="{% trans 'Zoom in' %}">
            <img src="{% static 'images/icons/zoom-in.png' %}" />
        </a>
        <a class="projector_edit" href="{% url projector_smaller %}" title="{% trans 'Zoom out' %}">
            <img src="{% static 'images/icons/zoom-out.png' %}" />
        </a>
        <a class="projector_edit" href="{% url projector_up %}" title="{% trans 'Scroll text up' %}">
            <img src="{% static 'images/icons/go-up.png' %}" />
        </a>
        <a class="projector_edit" href="{% url projector_down %}" title="{% trans 'Scroll text down' %}">
            <img src="{% static 'images/icons/go-down.png' %}" />
        </a>
        <a class="projector_edit" href="{% url projector_clean %}" title="{% trans 'Reset projector view' %}">
            <img src="{% static 'images/icons/view-restore.png' %}" />
        </a>
    </div>

    <div class="column">
    {% for category, slides in categories.items %}

        <div class="portlet">
            <div class="portlet-header">{{ category }}</div>
            <div class="portlet-content">
            {% for slide in slides %}
                {% if slide.model_slide %}
                    <ul style="line-height: 180%">
                    {% for slide in slide.get_items %}
                        <li class="{% if slide.active %}activeline{% endif %}"><a href="{% url projector_activate_slide slide.sid %}"
                        class="activate_link {% if slide.active %}active{% endif %}"
                        ><div></div></a>
                        {% for i in slide.get_ancestors %}&nbsp;&nbsp;&nbsp;{% endfor %}
                        <a href="{% url projector_edit_slide slide.id %}">{{ slide }}</a>
                        {% if slide.children.exists %}
                            <a href="{% url projector_activate_summary slide.sid %}"><img src="{% static 'images/icons/view-list-tree.png' %}" title="{% trans 'Select item overview' %}"></a>
                        {% endif %}
                        </li>
                    {% endfor %}
                    </ul>
                {% else %}
                <hr>
                    <ul style="line-height: 180%">
                    <li><a href="{% url projector_activate_slide slide.key %}"
                            class="activate_link {% if slide.active %}active{% endif %}"
                    ><div></div></a>{{ slide.key }}</li>
                    </ul>
                {% endif %}
            {% endfor %}
            </div>
        </div>
    {% endfor %}
    </div>

    <div class="column">
        <div class="portlet">
            <div class="portlet-header">
                {% trans "Projector Live View" %}
            </div>
            <div class="portlet-content">
                <div id="iframewrapper">
                <iframe id="iframe" src="{% url projector_show %}"></iframe>
                </div>
            </div>
        </div>
        <div class="portlet">
            <div class="portlet-header">{% trans "Hidden information" %}</div>
            <div class="portlet-content">
            TODO: list hidden agenda items
            </div>
         </div>
    </div>

{% endblock %}