- Wydzielenie synchronizacji przewijania do pluginu jQuery: jquery.autoscroll.js.

 - Synchronizujemy teraz przewijanie, a nie tylko scrollTop.

diff --git a/project/static/js/jquery.autoscroll.js b/project/static/js/jquery.autoscroll.js
new file mode 100644 (file)
index 0000000..c342bdf
--- /dev/null
+++ b/project/static/js/jquery.autoscroll.js
@@ -0,0 +1,31 @@
+(function($) {
+    $.fn.autoscroll = function(synchronizeWith, options) {
+        var self = $(this);
+        var selfContainer = self.parent();
+        var synchronizeWith = $(synchronizeWith);
+        var synchronizeWithContainer = synchronizeWith.parent();
+        var eventContainer = synchronizeWithContainer;
+
+        // Hack for iframes
+        if (self.is('iframe')) {
+            selfContainer = $('body', $('iframe').contents());
+            self = selfContainer;
+        }
+        
+        if (synchronizeWith.is('iframe')) {
+            eventContainer = synchronizeWith.contents();
+            synchronizeWithContainer = $('body', eventContainer);
+            synchronizeWith = synchronizeWithContainer;
+        }
+
+        synchronizeWithContainer.data('autoscroll.lastCheckedScrollTop', synchronizeWithContainer.scrollTop());
+        
+        eventContainer.scroll(function() {
+            var distanceScrolled = synchronizeWithContainer.scrollTop() - synchronizeWithContainer.data('autoscroll:lastCheckedScrollTop');
+            var percentScrolled = distanceScrolled / synchronizeWith.height();
+            selfContainer.scrollTop(selfContainer.scrollTop() + percentScrolled * self.height());
+            synchronizeWithContainer.data('autoscroll:lastCheckedScrollTop', synchronizeWithContainer.scrollTop());
+        });
+    };
+})(jQuery);
+

diff --git a/project/templates/explorer/file_xml.html b/project/templates/explorer/file_xml.html
index c774fe1..5bad3c4 100644 (file)
--- a/project/templates/explorer/file_xml.html
+++ b/project/templates/explorer/file_xml.html
@@ -4,6 +4,7 @@
     <script src="/static/js/jquery.fieldselection.js" type="text/javascript" charset="utf-8"></script>
     <script src="/static/js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
     <script src="/static/js/codemirror/codemirror.js" type="text/javascript" charset="utf-8"></script>
+    <script src="/static/js/jquery.autoscroll.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
         function addEditorButton(label, fn) {
             $('<button type="button">' + label + '</button>').click(function(event) {
@@ -48,10 +49,7 @@
             });
             
             $('iframe').load(function() {
-                $($('iframe').contents()).scroll(function() {
-                    var percentScrolled = $('body', this).scrollTop() / $('body', this).height();
-                    $('#images-wrap').scrollTop(percentScrolled * $('#images').height());
-                });
+                $('#images').autoscroll('iframe');
                 
                 setTimeout(function() {resizePanels();}, 10);
             })