+function loadPanel(target, url) {
+ console.log('ajax', url, 'into', target);
+ $(document).trigger('panel:unload', target);
+ $.ajax({
+ url: url,
+ dataType: 'html',
+ success: function(data, textStatus) {
+ $(target).html(data);
+ $(document).trigger('panel:unload', target);
+ $(document).trigger('panel:load', target);
+ // panel(target);
+ },
+ error: function(request, textStatus, errorThrown) {
+ $(document).trigger('panel:unload', target);
+ console.log('ajax', url, target, 'error:', textStatus, errorThrown);
+ }
+ });
+}
+
$(function() {
// ========================
// = Resizable panels =
resizePanels();
$('.panel-toolbar select').change(function() {
- console.log('loading panel', $(this).val(), 'into', $('.panel-contents', $(this).parent()));
+ loadPanel($('.panel-contents', $(this).parent().parent()), $(this).val())
});
// $('#id_folders').change(function() {
// $('#images').load('{% url folder_image_ajax %}' + $('#id_folders').val() + '/', function() {
<div id="left-panel-wrap" class="panel-wrap">
<div id="left-panel" class="panel">
<div id="slider" style="float: right"></div>
- <div id="left-panel-toolbar" class="panel-toolbar">
- <label for="select-left-panel">Lewy panel:</label>
- <select name="select-left-panel" id="select-left-panel">
- <option value="panel1">Panel 1</option>
- <option value="panel2">Panel 2</option>
- </select>
+ <div>
+ <div id="left-panel-toolbar" class="panel-toolbar">
+ <label for="select-left-panel">Lewy panel:</label>
+ <select name="select-left-panel" id="select-left-panel">
+ <option value="{% url xmleditor %}">Edytor XML</option>
+ <option value="panel2">Panel 2</option>
+ </select>
+ </div>
<div id="left-panel-contents" class="panel-contents">
</div>
</div>
<div id="right-panel-toolbar" class="panel-toolbar">
<label for="select-right-panel">Prawy panel:</label>
<select name="select-right-panel" id="select-right-panel">
- <option value="panel1">Panel 1</option>
+ <option value="{% url xmleditor %}">Edytor XML</option>
<option value="panel2">Panel 2</option>
</select>
- <div id="right-panel-contents" class="panel-contents">
- </div>
</div>
- {# <textarea id="id_text" name="text" width="480px">{{ form.text.field.initial }}</textarea> #}
+ <div id="right-panel-contents" class="panel-contents">
+ </div>
+ {# #}
</div>
</div>
{# #}
--- /dev/null
+<div class="panel">
+ <textarea name="text" width="480px"><ala><ma></ma></ala></textarea>
+</div>
+<script type="text/javascript" charset="utf-8">
+ (function() {
+ var self = null;
+ var id = Math.ceil(Math.random() * 1000000000);
+
+ var load = function(event, panel) {
+ console.log('loading panel', panel);
+ self = panel;
+ var textareaId = 'xmleditor-' + Math.ceil(Math.random() * 1000000000);
+ $('textarea', panel).attr('id', textareaId);
+ var editor = CodeMirror.fromTextArea(textareaId, {
+ parserfile: 'parsexml.js',
+ path: "/static/js/codemirror/",
+ stylesheet: "/static/css/xmlcolors.css",
+ parserConfig: {useHTMLKludges: false},
+ initCallback: function() {}
+ })
+ $(document).unbind('panel:load.' + id, load);
+ }
+
+ var unload = function(event, panel) {
+ console.log('unload event!', panel, self);
+ if (panel == self) {
+ console.log('unloading panel', self);
+ $(document).unbind('panel:unload.' + id, unload);
+ }
+ };
+
+ $(document).bind('panel:load.' + id, load);
+ $(document).bind('panel:unload.' + id, unload);
+ })();
+</script>
url(r'^images/(?P<folder>[^/]+)/$', 'explorer.views.folder_images', name='folder_image'),
url(r'^images/$', 'explorer.views.folder_images', {'folder': '.'}, name='folder_image_ajax'),
+ url(r'^panels/xmleditor$', 'django.views.generic.simple.direct_to_template',
+ {'template': 'explorer/panels/xmleditor.html'}, name='xmleditor'),
# Admin panel
url(r'^admin/doc/', include('django.contrib.admindocs.urls')),
url(r'^admin/(.*)', admin.site.root),