add_activity_dialog.html

<dialog id="add_activity_dialog" data-url="">
    <header>Add Activity</header>
    
    <section class="panel">
        <i aria-hidden="true" class="icon-magnifier"></i>
        <input type="text" class="search" placeholder="search" autocomplete="off">
    </section>

    <div class="content" url="{{ discipline.url }}browser/">
        <p><em>Loading activities...</em></p>
    </div>

    <form action="{{ url_for('critique_edit', critique.key) }}" method="post">
        {{ csrf() }}
    </form>

    <footer class="row">
        <div class="expand">
            <button class="cancel act-close">Cancel</button>
            <p class="helper inline">Hold down alt or command to select multiple activities.</p>
        </div>
        <div>
            <button class="go act-go" disabled>Add Activity</button>
        </div>
    </footer>
</dialog>

{% assets %}
    <script type="text/javascript">
        function refreshAddActivityButton() {
            var num = $('#add_activity_dialog .selected').not('.hidden').length;

            if (num == 0) {
                $('#add_activity_dialog .go').prop('disabled', true);
            } else if (num == 1) {
                $('#add_activity_dialog .go').prop('disabled', false).text('Add Activity');
            } else {
                $('#add_activity_dialog .go').prop('disabled', false).text('Add Activities');
            }
        }

        function filterActivityChoices(val) {
            val = val.toLowerCase();
            $('#add_activity_dialog li').each(function() {
                if (val && $(this).text().toLowerCase().search(val) < 0) {
                    $(this).addClass('hidden');
                } else {
                    $(this).removeClass('hidden');
                }
            });

            refreshAddActivityButton();
        }

        // When the user clicks on an 'add-activity' button show our dialog.
        $(document).on('click', '.act-add-activity', function(e) {
            e.preventDefault();

            showModal('#add_activity_dialog');
            
            var content = $('#add_activity_dialog .content');
            content.load(content.attr('url'));

            $('#add_activity_dialog .search').focus().val('');
            $('#add_activity_dialog li').removeClass('hidden');

            refreshAddActivityButton();
        });

        // When the user clicks on an activity, select it.  If they have ctrl/command/alt held down
        // they can select multiple.
        $(document).on('click', '#add_activity_dialog li', function(e) {
            e.preventDefault();
            var source = $(this);

            if (source.hasClass('selected')) {
                if (source.closest('ul').find('.selected').length > 1) {
                    source.closest('ul').find('.selected').removeClass('selected');
                    source.addClass('selected');
                } else {
                    source.removeClass('selected');
                }
            } else {
                if (!e.metaKey && !e.altKey && !e.ctrlKey) {
                    source.closest('ul').find('.selected').removeClass('selected');
                }
                source.addClass('selected');
            }

            refreshAddActivityButton();
        });
        
        // When the user changes the search input, filter our activities.
        $(document).on('keyup', '#add_activity_dialog .search', function(e) {
            filterActivityChoices($(this).val().trim());
        })

        // When the user clicks on the search input, select all the text so they can easily replace it.
        $(document).on('click', '#add_activity_dialog .search', function(e) {
            $(this).range(0);
        })

        // When the user presses the go button, submit the form.
        $(document).on('click', '#add_activity_dialog .act-go', function(e) {
            e.preventDefault();

            if ($(this).is(':disabled')) {
                return;
            }

            var form = $('#add_activity_dialog form');
            var selected = $('#add_activity_dialog .selected').not('.hidden');

            form.find('input[name=instruction]').remove();
            selected.each(function() {
                var id = $(this).attr('data-id');
                form.append('<input type="hidden" value="' + id + '" name="instruction">');
            })
            form.submit();
        });
        
        // When the user double clicks on an item, select it and press go.
        $(document).on('dblclick', '#add_activity_dialog li', function(e) {
            
        })
    </script>

    <style type="text/css">
        #add_activity_dialog .content {
            height: 300px;
        }

        #add_activity_dialog .panel i {
            position: absolute;
            left: 10px;
            top: 16px;
            color: #999;
            font-size: 14px;
        }

        #add_activity_dialog .search {
            outline: none;
            font-size: 14px;
            padding-left: 24px;
        }

        #add_activity_dialog ul {
            margin: 0;
            padding: 0;
        }

        ul.activities.listing li {
            position: relative;
            clear: both;
            padding: 10px 4px;
        }

        #add_activity_dialog ul.activities.listing li:hover {
            background-color: hsla(193, 76%, 62%, 0.31);
        }

        ul.activities.listing li.selected {
            background-color: hsla(193, 76%, 62%, 0.7);
        }

        ul.activities.listing li .icon {
            position: absolute;
            left: 1px;
            top: 14px;
            color: white;
            font-size: 32px;
        }

        ul.activities.listing li .controls {
            top: 12px;
            right: 10px;
            display: none;
        }

        ul.activities.listing li:hover .controls {
            display: block;
        }

        ul.activities.listing li:hover .controls button {
            font-size: 14px;
        }

        ul.activities.listing img {
            display: inline-block;
            background-color: #aa7daa;
        }

        ul.activities.listing li figcaption {
            display: inline-block;
            vertical-align: top;
            margin-left: 4px;
            width: 80%;
        }

        ul.activities.listing li figcaption .name {
            margin-top: 4px;
            font-weight: bold;
            font-size: 16px;
        }

        ul.activities.listing li figcaption p {
            margin: 0;
        }
    </style>
{% endassets %}