Podstawowe ładowanie i odładowywanie paneli przez AJAX (właściwie AJAH).

diff --git a/project/static/js/panels.js b/project/static/js/panels.js
index e502861..eca4ddf 100644 (file)
--- a/project/static/js/panels.js
+++ b/project/static/js/panels.js
@@ -1,3 +1,22 @@
+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 =
 $(function() {
     // ========================
     // = Resizable panels =


@@ -17,7 +36,7 @@ $(function() {
     resizePanels();
     
     $('.panel-toolbar select').change(function() {
     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() {
     });
     // $('#id_folders').change(function() {
     //     $('#images').load('{% url folder_image_ajax %}' + $('#id_folders').val() + '/', function() {

diff --git a/project/templates/explorer/file_xml.html b/project/templates/explorer/file_xml.html
index ab2f237..61405d9 100644 (file)
--- a/project/templates/explorer/file_xml.html
+++ b/project/templates/explorer/file_xml.html
@@ -17,12 +17,14 @@
             <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-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="left-panel-contents" class="panel-contents">
                         </div>
                     </div>


@@ -33,13 +35,13 @@
                     <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">
                     <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>
                             <option value="panel2">Panel 2</option>                            
                         </select>

-                        <div id="right-panel-contents" class="panel-contents">
-                        </div>

                     </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>
                         {#  #}
                 </div>
             </div>
                         {#  #}

diff --git a/project/templates/explorer/panels/xmleditor.html b/project/templates/explorer/panels/xmleditor.html
new file mode 100644 (file)
index 0000000..356b76c
--- /dev/null
+++ b/project/templates/explorer/panels/xmleditor.html
@@ -0,0 +1,35 @@
+<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>

diff --git a/project/urls.py b/project/urls.py
index 19f0520..47a4274 100644 (file)
--- a/project/urls.py
+++ b/project/urls.py
@@ -14,6 +14,8 @@ urlpatterns = patterns('',
     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'^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),
     # Admin panel
     url(r'^admin/doc/', include('django.contrib.admindocs.urls')),
     url(r'^admin/(.*)', admin.site.root),