Panel z widokiem HTML reaguje na zmiany w panelu z edytorem XML.

diff --git a/project/static/css/master.css b/project/static/css/master.css
index 5912e1e..76a5632 100644 (file)
--- a/project/static/css/master.css
+++ b/project/static/css/master.css
@@ -272,3 +272,6 @@ div.isection p {
        margin: 0.5em 1em;
 }
 
        margin: 0.5em 1em;
 }
 

+.change-notification {
+    color: red;
+}

diff --git a/project/static/js/panels.js b/project/static/js/panels.js
index 0c8761c..28970c1 100644 (file)
--- a/project/static/js/panels.js
+++ b/project/static/js/panels.js
@@ -1,5 +1,6 @@
 function loadPanel(target, url) {
     console.log('ajax', url, 'into', target);
 function loadPanel(target, url) {
     console.log('ajax', url, 'into', target);

+    $('.change-notification', $(target).parent()).fadeOut();

     $(document).trigger('panel:unload', target);
     $.ajax({
         url: url,
     $(document).trigger('panel:unload', target);
     $.ajax({
         url: url,


@@ -9,7 +10,6 @@ function loadPanel(target, url) {
             $(target).html(data);
             console.log(target, 'triggering panel:load');
             $(document).trigger('panel:load', target);
             $(target).html(data);
             console.log(target, 'triggering panel:load');
             $(document).trigger('panel:load', target);

-            // panel(target);

         },
         error: function(request, textStatus, errorThrown) {
             console.log('ajax', url, target, 'error:', textStatus, errorThrown);
         },
         error: function(request, textStatus, errorThrown) {
             console.log('ajax', url, target, 'error:', textStatus, errorThrown);

diff --git a/project/templates/explorer/file_xml.html b/project/templates/explorer/file_xml.html
index eb18015..a109f93 100644 (file)
--- a/project/templates/explorer/file_xml.html
+++ b/project/templates/explorer/file_xml.html
@@ -15,23 +15,26 @@
         <div id="panels">
             <div id="left-panel-wrap" class="panel-wrap">
                <div id="left-panel-toolbar" class="panel-toolbar">
         <div id="panels">
             <div id="left-panel-wrap" class="panel-wrap">
                <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_panel hash %}">Edytor XML</option>
-                                <option value="{% url htmleditor_panel hash %}">Edytor HTML</option>
-                            <option value="{% url gallery_panel hash %}">Galeria skanów</option>                                              </select>
+                    <label for="select-left-panel">Lewy panel:</label>
+                    <select name="select-left-panel" id="select-left-panel">
+                        <option value="{% url xmleditor_panel hash %}">Edytor XML</option>
+                        <option value="{% url htmleditor_panel hash %}">Edytor HTML</option>
+                        <option value="{% url gallery_panel hash %}">Galeria skanów</option>    
+                    </select>
+                    <strong class="change-notification" style="display: none">Zmieniono!</strong>

                </div>
                <div id="left-panel-content" class="panel-content"></div>
                <button class="panel-slider">&nbsp;</button>
             </div>
             <div id="right-panel-wrap" class="panel-wrap last-panel">
                 <div id="right-panel-toolbar" class="panel-toolbar">
                </div>
                <div id="left-panel-content" class="panel-content"></div>
                <button class="panel-slider">&nbsp;</button>
             </div>
             <div id="right-panel-wrap" class="panel-wrap last-panel">
                 <div id="right-panel-toolbar" class="panel-toolbar">

-                       <label for="select-right-panel">Prawy panel:</label>
+                    <label for="select-right-panel">Prawy panel:</label>

                     <select name="select-right-panel" id="select-right-panel">
                     <select name="select-right-panel" id="select-right-panel">

-                            <option value="{% url xmleditor_panel hash %}">Edytor XML</option>
-                            <option value="{% url htmleditor_panel hash %}">Edytor HTML</option>
-                            <option value="{% url gallery_panel hash %}">Galeria skanów</option>
+                        <option value="{% url xmleditor_panel hash %}">Edytor XML</option>
+                        <option value="{% url htmleditor_panel hash %}">Edytor HTML</option>
+                        <option value="{% url gallery_panel hash %}">Galeria skanów</option>

                     </select>
                     </select>

+                    <strong class="change-notification" style="display: none">Zmieniono!</strong>

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

diff --git a/project/templates/explorer/panels/htmleditor.html b/project/templates/explorer/panels/htmleditor.html
index 0eab0b2..3b1791e 100644 (file)
--- a/project/templates/explorer/panels/htmleditor.html
+++ b/project/templates/explorer/panels/htmleditor.html
@@ -5,14 +5,14 @@
 </div>
 <script type="text/javascript" charset="utf-8">
     (function() {
 </div>
 <script type="text/javascript" charset="utf-8">
     (function() {

-        function resizeEditor(event, panel) {
-            var panel = panel || event.data.panel;
-            $('.htmleditor', panel).height($(panel).height());
-        }
-
+        var id = Math.ceil(Math.random() * 1000000000);
+        

         panel(function(event, panel) {
         panel(function(event, panel) {

-            $(window).bind('resize', {'panel': panel}, resizeEditor);
-            resizeEditor(null, panel);  
-        }, function(event, panel) {});
+            $(document).bind('panel:contentChanged.' + id, function(event, p) {
+                $('.change-notification', $(panel).parent()).fadeIn();
+            })
+        }, function(event, panel) {
+            $(document).unbind('panel:contentChanged.' + id);
+        });

     })()
 </script>
\ No newline at end of file
     })()
 </script>
\ No newline at end of file

diff --git a/project/templates/explorer/panels/xmleditor.html b/project/templates/explorer/panels/xmleditor.html
index f2a6d73..bb225e4 100644 (file)
--- a/project/templates/explorer/panels/xmleditor.html
+++ b/project/templates/explorer/panels/xmleditor.html
@@ -15,7 +15,10 @@
             path: "/static/js/codemirror/",
             stylesheet: "/static/css/xmlcolors.css",
             parserConfig: {useHTMLKludges: false},
             path: "/static/js/codemirror/",
             stylesheet: "/static/css/xmlcolors.css",
             parserConfig: {useHTMLKludges: false},

-            initCallback: function() {
+            onChange: function() {
+                $(document).trigger('panel:contentChanged', panel);
+            },
+            initCallback: function(editor) {

                 // Toolbar
                 $('.toolbar-tabs li', panel).click(function() {
                     var id = $(this).attr('p:button-list');
                 // Toolbar
                 $('.toolbar-tabs li', panel).click(function() {
                     var id = $(this).attr('p:button-list');


@@ -38,6 +41,7 @@
                             var pos = editor.cursorPosition();
                             editor.selectLines(pos.line, pos.character + tag.length + 2);
                         }
                             var pos = editor.cursorPosition();
                             editor.selectLines(pos.line, pos.character + tag.length + 2);
                         }

+                        $(document).trigger('panel:contentChanged', panel);

                     }
                     if ($(this).attr('p:key')) {
                         keys[$(this).attr('p:key')] = handler;
                     }
                     if ($(this).attr('p:key')) {
                         keys[$(this).attr('p:key')] = handler;