minecraftcodex/minecraftcodex/studio/templates/studio/main.html

{% extends "layout.html" %}

{% block head %}
<!-- Styles -->
<link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="/static/lib/flat-ui.css" />
<link rel="stylesheet" href="/static/css/studio.css" />
<!-- jQuery -->
<script type="text/javascript" src="/static/lib/jquery.2.0.0.js"></script>
<!-- THREE -->
<script type="text/javascript" src="/static/lib/three.r58.js"></script>
<!-- Bootstrap JS -->
<!--<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap/js/bootstrap-collapse.js"></script>-->
<!-- Flat UI -->
<script type="text/javascript" src="/static/lib/flatui/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/lib/flatui/js/flatui-radio.js"></script>
<script type="text/javascript" src="/static/lib/flatui/js/flatui-checkbox.js"></script>
<script type="text/javascript" src="/static/lib/flatui/js/bootstrap-select.js"></script>
<!-- Handlebars -->
<script type="text/javascript" src="/static/lib/handlebars.1.0.rc4.js"></script>
<!-- Studio -->
<script type="text/javascript" src="/static/js/studio.js"></script>
<script type="text/javascript" src="/static/js/modals.js"></script>
<script defer="defer">
window.onload = function() {
    // Initialize Studio
    if (window.Studio) {
        mcstudio = window.Studio
        mcstudio.init('.studio-canvas', 320, 240);
        window.modalManager.studio = mcstudio
    }

    // Texture search
    $('.texture-list .item').hover(function() {
        $('.texture-name').html($(this).attr('data-name'))
    })

    $('div.texture-list').on('mouseout', function() {
        $('.texture-name').html('Mouseover a texture')
    })

    $('input.texture-search').on('keyup', function(event) {
        if (event.which == 13 || event.keyCode == 13) {
            var value = $(this).val()
            if (value == '') {
                $('.texture-list .item').removeClass('hide')
            } else {
                $('.texture-list .item').addClass('hide')
                $('.texture-list [data-name*="' + value + '"]').removeClass('hide')
            }
        }

        if (event.which == 27 || event.keyCode == 27) {
            $(this).val('')
            $('.texture-list .item').removeClass('hide')
        }
    })
    $("select.flatui").selectpicker({style: 'btn-primary', menuStyle: 'dropdown-inverse'});

    $('input[name="cameraType"]').change(function() {
        mcstudio.onCameraChange($(this).val())
    })
    $("select.camera-type").change()

    $('[data-studio="change-texture"]').click(function() {
        var texture = $(this).attr('data-texture')
        mcstudio.changeTexture(texture)
    })

    $('[data-action="toggle"]').click(function() {
        var target = $(this).attr('data-target')
        $(target).toggle('fast')
    })
}
</script>
{% endblock %}

{% block header %}
<header>
    <div class="navbar navbar-inverse">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand">MinecraftCodex : Studio</a>
                <div>
                    <ul class="nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle"
                               data-toggle="dropdown">
                                Creation
                                <i class="icon-caret-down"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#" onclick="javascript:mcstudio.reset()">New</a></li>
                                <li class="divider"></li>
                                <li><a href="{{ url('homepage') }}">Exit</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle"
                               data-toggle="dropdown">
                                Canvas
                                <i class="icon-caret-down"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#" 
                                        onclick="javascript:modalManager.modal('changeCanvas')">Canvas size...</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav pull-right">
                        <li>
                            <a href="{{ url('homepage') }}">
                                <i class="icon-arrow-left"></i> Go back
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!-- /navbar-inner -->
    </div>      
</header>
{% endblock %}

{% block content %}
<div class="studio-workspace">
    <div class="panel panel-left">
        <div class="well">
            <div class="pull-right">
                <input type="text" class="texture-search" placeholder="Search..." />
            </div>
            <h3 class="margin-none">Textures</h3>
            <div class="clearfix"></div>
            <div class="texture-list">
            {% for item in textures %}
                <div class="item" data-type="texture" data-name="{{ item.name }}"
                data-texture="/static/textures/{{ item.get_image() }}"
                data-studio="change-texture">
                    <div class="codexicon x2">
                        <img src="/static/textures/{{ item.get_image(2) }}" />
                    </div>
                </div>
            {% endfor %}
            </div>
            <div class="text-center"><span class="texture-name badge">Mouseover a texture</span></div>
        </div>
    </div>
    <div class="panel panel-canvas">
        <div class="studio-canvas"></div>
    </div>
    <div class="panel panel-right">
        <div class="well">
            <button type="button" 
                class="btn btn-danger btn-small pull-right" 
                data-action="toggle" data-target="#camera">
                Toggle
            </button>
            <h4 class="margin-none">Camera</h4>
            <div class="clearfix"></div>
            <div id="camera" class="text-right">
                <hr />
                <div class="row-fluid">
                    <div class="span6 text-center">
                        <span class="radio">
                            <input type="radio" name="cameraType" value="perspective"
                            data-toggle="radio">
                            Perspective
                        </span>
                    </div>
                    <div class="span6 text-center">
                        <span class="radio">
                            <input type="radio" name="cameraType" value="orthographic"
                            data-toggle="radio">
                            Orthograpic
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="well">
            <button type="button" 
                class="btn btn-danger btn-small pull-right" 
                data-action="toggle" data-target="#objects">
                Toggle
            </button>
            <h4 class="margin-none">Objects</h4>
            <div id="objects" class="text-right">
                <hr />
                <select name="select" class="flatui object">
                </select>
                <button class="btn btn-primary btn-round valing-top">
                    <i class="icon-plus"></i>
                </button>
            </div>
        </div>
        <div class="well">
            <button type="button" 
                class="btn btn-danger btn-small pull-right" 
                data-action="toggle" data-target="#lights">
                Toggle
            </button>
            <h4 class="margin-none">Lights</h4>
            <div id="lights">
                <hr />
            </div>
        </div>
    </div>
</div>
{% include "studio/modals.html" %}
{% endblock %}

{% block footer %}{% endblock %}