templates.html

<!-- Templates -->
<script id="panel-base" type="text/template">
    <div class="panel panel-default panel-drag panel-resize" data-id="<%- item.id %>" data-component="" data-name="" data-type="<%- item.typeElement %>" 
    <% if(item.style){ %>
        style="<%=item.style%>"
    <%}%>    
    >
        <div class="panel-heading"> 
            <span><% print(item.name) %></span> 
            <div class="pull-right">
                <div class="col-md-10">
                    <select class="select-type-element form-control" value="<%-item.typeElement%>" name="typeElement" style="margin-top: -7px">
                        <optgroup label="Container">
                            <option value="div">div</option>
                        </optgroup>

                        <optgroup label="Texto">
                            <option value="p" <% if(item.typeElement == 'p') print('selected')%>>p</option>
                            <option value="header" <% if(item.typeElement == 'header') print('selected')%>>h1 - h6</option>
                            <option value="a" <% if(item.typeElement == 'a') print('selected')%>>link</option>
                            <option value="label" <% if(item.typeElement == 'label') print('selected')%>>label</option>
                            <option value="span" <% if(item.typeElement == 'span') print('selected')%>>span</option>
                        </optgroup>

                        <optgroup label="Lista">
                            <option value="list" <% if(item.typeElement == 'list') print('selected')%>>ul-ol</option>
                            <option value="list-item" <% if(item.typeElement == 'list-item') print('selected')%>>li</option>
                        </optgroup>

                        <optgroup label="Imagem">
                            <option value="image" <% if(item.typeElement == 'image') print('selected')%>>img</option>
                            <option value="carousel" <% if(item.typeElement == 'carousel') print('selected')%>>carousel</option>
                            <option value="carousel-item" <% if(item.typeElement == 'carousel-item') print('selected')%>>carousel-item</option>    
                        </optgroup>

                        <optgroup label="Navegação - Menu">
                            <option value="navigation" <% if(item.typeElement == 'navigation') print('selected')%>>BootstrapNavigation</option>
                            <option value="navigation-list" <% if(item.typeElement == 'navigation-list') print('selected')%>>BootstrapNavigationList</option>
                            <option value="navigation-list-item" <% if(item.typeElement == 'navigation-list-item') print('selected')%>>BootstrapNavigationListItem</option>
                        </optgroup>

                        <optgroup label="Formulário">
                            <option value="form" <% if(item.typeElement == 'form') print('selected')%>>form</option>
                            <option value="input-text" <% if(item.typeElement == 'input-text') print('selected')%>>input - text</option>
                            <option value="input-textarea" <% if(item.typeElement == 'input-textarea') print('selected')%>>input - textarea</option>
                            <option value="input-radio" <% if(item.typeElement == 'input-radio') print('selected')%>>input - radio/checkbox</option>
                            <option value="input-select" <% if(item.typeElement == 'input-select') print('selected')%>>select</option>
                            <option value="input-option" <% if(item.typeElement == 'input-option') print('selected')%>>option</option>
                            <option value="input-button" <% if(item.typeElement == 'input-button') print('selected')%>>button</option>
                        </optgroup>
                    </select>
                </div>
                
                <button data-open="0" class="btn-prop btn btn-primary btn-xs pull-right" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="Exibe o formulário de opções do widget concreto."><i class="fa fa-cog"></i></button>
                <span class="btn-handle btn btn-warning btn-xs pull-right" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="Possibita arrastar o elemento."><i class="fa fa-arrows"></i></span>

            </div>
        </div>
        <div class="panel-body">
            <%= item.html ? item.html.html() : "" %>
        </div>
    </div>
</script>

<!-- Template BootstrapNavigationItem -->
<script type="text/template" id="template-navigationitem">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Item 1 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
        </div>
    </nav>
</script>

<!-- Template Paragraph -->
<script type="text/template" id="template-paragraph">
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet, sem sit amet tempor luctus, erat lorem cursus turpis, nec condimentum est leo eu massa. Integer tincidunt sodales enim in interdum. Nam ac elit enim. Mauris neque quam, viverra eu magna quis, suscipit fermentum ligula. Vestibulum tempor tortor ac lacus egestas lobortis. Praesent placerat porttitor ante, a maximus tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </p> 
</script>

<!-- Template Title -->
<script type="text/template" id="template-title">
    <h1>Título de Exemplo</h1>
</script>

<!-- Template link -->
<script type="text/template" id="template-link">
    <a href="#">Link de exemplo</a>
</script>

<!-- Template span -->
<script type="text/template" id="template-span">
    <span href="#">Texto de exemplo do span</span>
</script>

<!-- Template label -->
<script type="text/template" id="template-label">
    <label>Texto de exemplo do label</label>
</script>

<!-- Template listItem -->
<script type="text/template" id="template-listitem">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</script>

<!-- Template img -->
<script type="text/template" id="template-img">
    <img src="img/template-img.png" alt="Imagem de Exemplo" class="img-responsive" />
</script>

<!-- Template Carousel Item -->
<script type="text/template" id="template-carouselitem">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="img/carousel-item.jpg" alt="Imagem de Exemplo" />
            </div>
            <div class="item">
                <img src="img/carousel-item.jpg" alt="Imagem de Exemplo" />
            </div>
            <div class="item">
                <img src="img/carousel-item.jpg" alt="Imagem de Exemplo" />
            </div>
        </div>

        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</script>

<!-- Template text/textarea -->
<script type="text/template" id="template-inputtext">
    <input type="text" class="form-control text-concrete" placeholder="Digite seu texto aqui" />
</script>

<!-- Template text/textarea -->
<script type="text/template" id="template-inputtextarea">
    <textarea class="form-control text-concrete" placeholder="Digite seu texto aqui"></textarea>
</script>

<!-- Template radio/checkbox -->
<script type="text/template" id="template-inputradio">
    <div class="radio">
        <label><input type="radio" name="optionsRadios" checked> Opçao 1</label>
    </div>
    <div class="radio">
        <label><input type="radio" name="optionsRadios"> Opçao 2</label>
    </div>
    <div class="radio">
        <label><input type="radio" name="optionsRadios"> Opçao 3</label>
    </div>
</script>

<!-- Template option -->
<script type="text/template" id="template-inputoption">
    <select class="form-control text-concrete">
        <option value="v1">Opção 1</option>
        <option value="v2">Opção 2</option>
        <option value="v3">Opção 3</option>
    </select>
</script>

<!-- Template button -->
<script type="text/template" id="template-button">
    <button class="btn btn-primary text-concrete">Botão</button>
</script>

<script type="text/template" id="form-prop">
    <form class="form-horizontal form-properties" id="form-properties">
        <% if(item.value != undefined) { %>
            <div class="form-group">
                <label>Valor</label>
                <textarea class="form-control" name="value" rows="10"><%=item.value%></textarea> 
            </div>
        <%}%>

        <% if(item.headerTag != undefined) { %>
            <div class="form-group">
                <label>Tag</label>
                <select class="form-control" id="select-header-tag" name="headerTag" value="<%=item.headerTag%>">
                    <option value="h1">h1</option>
                    <option value="h2" <% if(item.headerTag == 'h2') print('selected') %> >h2</option>
                    <option value="h3" <% if(item.headerTag == 'h2') print('selected') %> >h3</option>
                    <option value="h4" <% if(item.headerTag == 'h2') print('selected') %> >h4</option>
                    <option value="h5" <% if(item.headerTag == 'h2') print('selected') %> >h5</option>
                    <option value="h6" <% if(item.headerTag == 'h2') print('selected') %> >h6</option>
                </select>
            </div>
        <%}%>

        <% if(item.action != undefined) { %>
            <div class="form-group">
                <label>Action</label>
                <input type="text" class="form-control" name="action" value="<%=item.action%>" /> 
            </div>
        <%}%>

        <% if(item.simpleHtmlTag != undefined) { %>
            <div class="form-group">
                <label>Tag</label>
                <input type="text" class="form-control" name="alt" value="<%=item.simpleHtmlTag%>" /> 
            </div>
        <%}%>

        <% if(item.href != undefined) { %>
            <div class="form-group">
                <label>Href</label>
                <input type="text" class="form-control" name="href" value="<%=item.href%>" /> 
            </div>
        <%}%>

        <% if(item.src != undefined) { %>
            <div class="form-group">
                <label>Src</label>
                <input type="text" class="form-control" name="src" value="<%=item.src%>" /> 
            </div>
        <%}%>

        <% if(item.tagRadio != undefined) { %>
            <div class="form-group">
                <label>Tag</label>
                <select class="form-control" id="select-tag-text" name="tagRadio" value="<%=item.tagRadio%>">
                    <option value="radio">radio</option>
                    <option value="checkbox" <% if(item.tagRadio == 'checkbox') print('selected') %> >checkbox</option>
                </select>
            </div>
        <%}%>

        <% if(item.listTag != undefined) { %>
            <div class="form-group">
                <label>Tag</label>
                <select class="form-control" id="select-tag-text" name="listTag" value="<%=item.listTag%>">
                    <option value="ul">ul</option>
                    <option value="ol" <% if(item.listTag == 'ol') print('selected') %> >ol</option>
                </select>
            </div>
        <%}%>

        <% if(item.alt != undefined) { %>
            <div class="form-group">
                <label>Alt</label>
                <input type="text" class="form-control" name="alt" value="<%=item.alt%>" /> 
            </div>
        <%}%>

        <% if(item.width != undefined) { %>
            <div class="form-group">
                <label>Largura</label>
                <input type="text" class="form-control" name="width" value="<%=item.width%>" /> 
            </div>
        <%}%>

        <% if(item.height != undefined) { %>
            <div class="form-group">
                <label>Altura</label>
                <input type="text" class="form-control" name="height" value="<%=item.height%>" /> 
            </div>
        <%}%>

        <% if(item.text != undefined) { %>
            <div class="form-group">
                <label>Texto</label>
                <textarea class="form-control" name="text" rows="5"><%=item.text%></textarea> 
            </div>
        <%}%>

        <div class="form-group">
            <label>Classes</label>
            <textarea class="form-control" id="txtClasses" name="class" rows="5"><%=item.class%></textarea>
        </div>

        <div class="form-group">
            <button class="btn btn-primary" id="btnSalvar">Salvar</button>
            <button class="btn btn-default" id="btnFechar">Fechar</button>
        </div>
    </form>
</script>