211 lines
8.1 KiB
HTML
211 lines
8.1 KiB
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() {
|
||
$('div.texture-name').html($(this).attr('data-name'))
|
||
})
|
||
|
||
$('div.texture-list').on('mouseout', function() {
|
||
$('div.texture-name').html('')
|
||
})
|
||
|
||
$('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'});
|
||
|
||
$("select.camera-type").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)
|
||
})
|
||
}
|
||
</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="#">New</a></li>
|
||
<li><a href="#">Save</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="texture-name pull-right"></div>
|
||
<h3 class="margin-none">Textures</h3>
|
||
<div class="text-center">
|
||
<input type="text" class="texture-search" placeholder="Search..." />
|
||
</div>
|
||
<hr class="margin-none"/>
|
||
<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>
|
||
</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-toggle="collapse" data-target="#camera">
|
||
Hide
|
||
</button>
|
||
<h3 class="margin-none">Camera</h3>
|
||
<div id="camera" class="collapse in">
|
||
<div class="text-right">
|
||
Type:
|
||
<select name="select" class="flatui camera-type ">
|
||
<option value="orthographic">Orthographic</option>
|
||
<option value="perspective">Perspective</option>
|
||
</select>
|
||
</div>
|
||
|
||
{#<label class="radio">
|
||
<span class="icons">
|
||
<span class="first-icon fui-radio-unchecked"></span>
|
||
<span class="second-icon fui-radio-checked"></span>
|
||
</span>
|
||
<input name="optionsRadiosDisabled" id="optionsRadios4"
|
||
value="option2" data-toggle="radio" type="radio">
|
||
Orthogonal
|
||
</label>
|
||
<label class="radio">
|
||
<span class="icons">
|
||
<span class="first-icon fui-radio-unchecked"></span>
|
||
<span class="second-icon fui-radio-checked"></span>
|
||
</span>
|
||
<input name="optionsRadiosDisabled" id="optionsRadios4"
|
||
value="option2" data-toggle="radio" type="radio">
|
||
Perpective
|
||
</label>#}
|
||
</div>
|
||
<hr />
|
||
<button type="button"
|
||
class="btn btn-danger btn-small pull-right"
|
||
data-toggle="collapse" data-target="#objects">
|
||
Hide
|
||
</button>
|
||
<h3 class="margin-none">Objects</h3>
|
||
<div id="objects" class="collapse in">
|
||
// TODO
|
||
</div>
|
||
<hr />
|
||
<button type="button"
|
||
class="btn btn-danger btn-small pull-right"
|
||
data-toggle="collapse" data-target="#lights">
|
||
Hide
|
||
</button>
|
||
<h3 class="margin-none">Lights</h3>
|
||
<div id="lights" class="collapse in">
|
||
// TODO
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% include "studio/modals.html" %}
|
||
{% endblock %}
|
||
|
||
{% block footer %}{% endblock %}
|