tool_form.mustache

{{!
    @template assignfeedback_editpdfplus/tool_form
}}

<div class="alert" id="message_edit_tool">

</div>

<div id="toolworkspace">
    <div class='row' style="margin-bottom: 10px;">
        {{^tool.id}}<h4>{{# str }} adminaddtool, assignfeedback_editpdfplus {{/ str }}</h4>{{/tool.id}}
        <div class='col-sm-3'>
            {{#tool.id}}<div id="editpdlplus_tool_label" class="btn alert-info" style="cursor: default;">{{tool.label}}</div>{{/tool.id}}
        </div>
        <div class='col-sm-offset-1 col-sm-3'>
            {{# str }} admintoolboxaction, assignfeedback_editpdfplus {{/ str }}{{#tool.id}}s{{/tool.id}} :
            <button type="button" class="btn btn-default" id="toolFormSubmit"><i class="fa fa-{{#tool.id}}save{{/tool.id}}{{^tool.id}}save{{/tool.id}}" aria-hidden="true"></i></button>
            {{#tool.id}}
            <button type="button" class="btn btn-default" id="toolClone"><i class="fa fa-clone" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-default" id="toolEnabled"><i class="fa fa-eye{{^tool.enabled}}-slash{{/tool.enabled}}" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-default {{^tool.removable}}disabled{{/tool.removable}}" id="toolRemove"><i class="fa fa-remove" aria-hidden="true"></i></button>
            {{/tool.id}}
        </div>
        <div class='col-sm-2'>
            {{#tool.id}}
            <button type="button" class="btn btn-default" id="toolRefesh"><i class="fa fa-refresh" aria-hidden="true"></i></button>
            {{/tool.id}}
        </div>
    </div>

    <div class='row'>
        <div class='col-sm-6'>
            <form id="{{formid}}" method="post" action="{{actionurl}}" class="form-horizontal">
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-wrench" aria-hidden="true"></i>&nbsp;&nbsp;
                            <a data-toggle="collapse" href="#collapse1" data-parent="#accordion">{{# str }} admintoolboxtypetool, assignfeedback_editpdfplus {{/ str }}</a>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse">
                            <div class="panel-body" style="margin-bottom: 20px;">
                                <div class="form-group">
                                    <label class="control-label col-sm-3" for="typetool">{{# str }} admintoolboxtypetool_type, assignfeedback_editpdfplus {{/ str }}</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" id="typetool" name="typetool">
                                            {{# tools }}
                                            <option value='{{id}}'>{{libelle}}</option>
                                            {{/ tools }}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-bars" aria-hidden="true"></i>&nbsp;&nbsp;
                            <a data-toggle="collapse" href="#collapse2" data-parent="#accordion">{{# str }} admintoolboxtoolbardisplay, assignfeedback_editpdfplus {{/ str }}</a>
                        </div>
                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body" style="margin-bottom: 50px;">
                                <div class="form-group">
                                    <label class="control-label col-sm-3" for="button">{{# str }} admintoolboxtoolbardisplay_button, assignfeedback_editpdfplus {{/ str }}</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="button" value="{{tool.label}}" name="button" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-3" for="order">{{# str }} admintoolboxtoolbardisplay_order, assignfeedback_editpdfplus {{/ str }}</label>
                                    <div class="col-sm-9">
                                        <input type="number" class="form-control" id="order" value="{{tool.order_tool}}" name="order" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-address-card-o" aria-hidden="true"></i>&nbsp;&nbsp;
                            <a data-toggle="collapse" href="#collapse3" data-parent="#accordion">{{# str }} admintoolboxcartridge, assignfeedback_editpdfplus {{/ str }}</a>
                        </div>
                        <div id="collapse3" class="panel-collapse collapse">
                            <div class="panel-body" style="margin-bottom: 50px;">
                                <div class="form-group">
                                    <label class="control-label col-sm-3" for="libelle">{{# str }} admintoolboxcartridge_label, assignfeedback_editpdfplus {{/ str }}</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="libelle" value="{{tool.cartridge}}" name="libelle" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-3" for="cartridgecolor">{{# str }} admintoolboxcartridge_color, assignfeedback_editpdfplus {{/ str }}</label>
                                    <div class="col-sm-9">
                                        <input type="color" class="form-control" id="cartridgecolor" placeholder="{{^tool.cartridge_color}}-{{/tool.cartridge_color}}"
                                               value="{{#tool.cartridge_color}}{{tool.cartridge_color}}{{/tool.cartridge_color}}" name="catridgecolor" />
                                        <input type="hidden" id="realcartridgecolor" value="{{#tool.cartridge_color}}{{tool.cartridge_color}}{{/tool.cartridge_color}}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>&nbsp;&nbsp;
                            <a data-toggle="collapse" href="#collapse4" data-parent="#accordion">{{# str }} admintoolboxannotation, assignfeedback_editpdfplus {{/ str }}</a>
                        </div>
                        <div id="collapse4" class="panel-collapse collapse">
                            <div class="panel-body" style="margin-bottom: 80px;overflow: auto;">
                                    <div class="row form-group">
                                        <label class="control-label col-sm-3" for="color">{{# str }} admintoolboxannotation_color, assignfeedback_editpdfplus {{/ str }}</label>
                                        <div class="col-sm-9">
                                            <input type="color" class="form-control" id="color" placeholder="{{^tool.colors}}-{{/tool.colors}}"
                                                   value="{{#tool.colors}}{{tool.colors}}{{/tool.colors}}" name="color" />
                                            <input type="hidden" id="realcolor" value="{{#tool.colors}}{{tool.colors}}{{/tool.colors}}" />
                                        </div>
                                    </div>
                                <div class="row form-group">
                                    <label class="control-label col-sm-3" for="texts">{{# str }} admintoolboxannotation_texts, assignfeedback_editpdfplus {{/ str }}</label>
                                    <div class="col-sm-9">
                                        <input type="hidden" class="form-control" id="texts" value="{{tool.texts}}" name="texts" />
                                        <ul class="textform"
                                            data-prototype="<input  type='text' class='form-control' value='' name='text[__name__]' style='width:90%;display:inline-block;' />" 
                                            style="list-style-type:none;padding:0px;">
                                            {{#tool.textsarray}}
                                            <li><input  type='text' class='form-control' value='{{text}}' name='text[{{index}}]' style='width:90%;display:inline-block;' /></li>
                                            {{/tool.textsarray}}
                                        </ul>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <label class="control-label col-sm-3" for="reply">{{# str }} admintoolboxannotation_reply, assignfeedback_editpdfplus {{/ str }}</label>
                                    <div class="col-sm-9">
                                        <input type="checkbox" id="reply" {{#tool.reply}}checked {{/tool.reply}}name="reply" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style='display:none;'>
                    <input type="hidden" name="toolid" value="{{tool.id}}" />
                    <input type="hidden" name="axisid" value="{{tool.axis}}" />
                    <input type="hidden" name="courseid" value="{{courseid}}" />
                    <input type="hidden" name="sesskey" value="{{sesskey}}" />
                    <input type="hidden" name="enabled" id="toolenabled" value="{{tool.enabled}}" />
                </div>

            </form>
        </div>
        <div class='col-sm-6'>
            <input id='map01' type='hidden' value='{{map01}}' />
            <input id='map02' type='hidden' value='{{map02}}' />
            <input id='map03' type='hidden' value='{{map03}}' />
            <!--{{# pix }} cross, assignfeedback_editpdfplus, previsu {{/ pix }}-->
            <div id="canevas" style="background-image: url('{{map01}}');background-repeat: no-repeat; border-width: 1px; border-style: solid; height: 330px;" class="drawingcanvas">
            </div>
        </div>
    </div>
</div>

{{# js }}
require(['jquery','core/ajax','core/notification'], function($,ajax,notification) {

{{#tool.id}}$("#typetool").val({{tool.type}});{{/tool.id}}

var $collectionHolder;

// setup an "add a tag" link
var $addTagLink = $('<a href="#" class="add_text_link"><i class="fa fa-plus"></i></a>');
var $newLinkLi = $('<li></li>').append($addTagLink);

jQuery(document).ready(function() {
// Get the ul that holds the collection of tags
$collectionHolder = $('ul.textform');

// add a delete link to all of the existing tag form li elements
$collectionHolder.find('li').each(function() {
addTagFormDeleteLink($(this));
});

// add the "add a tag" anchor and li to the tags ul
$collectionHolder.append($newLinkLi);

// count the current form inputs we have (e.g. 2), use that as the new
// index when inserting a new item (e.g. 2)
$collectionHolder.data('index', $collectionHolder.find(':input').length);

$addTagLink.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();

// add a new tag form (see next code block)
addTagForm($collectionHolder, $newLinkLi);
});
});
function addTagForm($collectionHolder, $newLinkLi) {
// Get the data-prototype explained earlier
var prototype = $collectionHolder.data('prototype');

// get the new index
var index = $collectionHolder.data('index');

// Replace '__name__' in the prototype's HTML to
// instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);

// increase the index with one for the next item
$collectionHolder.data('index', index + 1);

// Display the form in the page in an li, before the "Add a tag" link li
var $newFormLi = $('<li></li>').append(newForm);
$newLinkLi.before($newFormLi);

// add a delete link to the new form
addTagFormDeleteLink($newFormLi);
}

function addTagFormDeleteLink($tagFormLi) {
var $removeFormA = $('<a href="#"><i class="fa fa-remove"></i></a>');
$tagFormLi.append($removeFormA);

$removeFormA.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();

// remove the li for the tag form
$tagFormLi.remove();
});
}

});
{{/ js }}