[Openautomation-svn] SF.net SVN: openautomation:[1463] CometVisu/trunk/visu

[<ma...@us...>]

Revision: 1463
          http://openautomation.svn.sourceforge.net/openautomation/?rev=1463&view=rev
Author:   mayerch
Date:     2013-02-10 20:19:34 +0000 (Sun, 10 Feb 2013)
Log Message:
-----------
Improve the scrolling, e.g. enable and disable the overscroll where it is necessary

Modified Paths:
--------------
    CometVisu/trunk/visu/designs/designglobals.css
    CometVisu/trunk/visu/lib/templateengine.js
    CometVisu/trunk/visu/visu_config_demo.xml

Modified: CometVisu/trunk/visu/designs/designglobals.css
===================================================================
--- CometVisu/trunk/visu/designs/designglobals.css	2013-02-10 14:16:41 UTC (rev 1462)
+++ CometVisu/trunk/visu/designs/designglobals.css	2013-02-10 20:19:34 UTC (rev 1463)
@@ -23,7 +23,6 @@
 }
 #main {
   width: 100%;
-  -webkit-overflow-scrolling:touch;
 }
 #navbarLeft {
   width: 0px;          /* left bar width */
@@ -38,8 +37,9 @@
   clear: both;
 }
 
-#pages, .page {
+.page,  #navbarTop, #navbarBottom {
   -webkit-transform: translateZ(0);
+  -webkit-overflow-scrolling:touch;
 }
 
 /* 

Modified: CometVisu/trunk/visu/lib/templateengine.js
===================================================================
--- CometVisu/trunk/visu/lib/templateengine.js	2013-02-10 14:16:41 UTC (rev 1462)
+++ CometVisu/trunk/visu/lib/templateengine.js	2013-02-10 20:19:34 UTC (rev 1463)
@@ -646,9 +646,33 @@
     $(document).bind( 'touchmove', function(e) {
       e.preventDefault();
     });
-    $('#main,#navbarTop,#navbarBottom').bind( 'touchmove', function(e) {
+    $('.page,#navbarTop>.navbar,#navbarBottom>.navbar').bind( 'touchmove', function(e) {
+      var elem = $(e.currentTarget);
+      var startTopScroll = elem.scrollTop();
+      var startLeftScroll = elem.scrollLeft();
+      
+      // prevent scrolling of an element that takes full height and width
+      // as it doesn't need scrolling
+      if( (startTopScroll  <= 0) && (startTopScroll  + elem[0].offsetHeight >= elem[0].scrollHeight) &&
+          (startLeftScroll <= 0) && (startLeftScroll + elem[0].offsetWidth  >= elem[0].scrollWidth ) )
+      {
+        return;
+      }
+      
       e.stopPropagation();
     });
+    // stop the propagation if scrollable is at the end
+    // inspired by https://github.com/joelambert/ScrollFix
+    $('.page,#navbarTop>.navbar,#navbarBottom>.navbar').bind( 'touchstart', function(event) {
+      var elem = $(event.currentTarget);
+      var startTopScroll = elem.scrollTop();
+
+      if(startTopScroll <= 0)
+        elem.scrollTop(1);
+
+      if(startTopScroll + elem[0].offsetHeight >= elem[0].scrollHeight)
+        elem.scrollTop( elem[0].scrollHeight - elem[0].offsetHeight - 1 );
+    });
     
     // setup the scrollable
     thisTemplateEngine.main_scroll = $('#main').scrollable({

Modified: CometVisu/trunk/visu/visu_config_demo.xml
===================================================================
--- CometVisu/trunk/visu/visu_config_demo.xml	2013-02-10 14:16:41 UTC (rev 1462)
+++ CometVisu/trunk/visu/visu_config_demo.xml	2013-02-10 20:19:34 UTC (rev 1463)
@@ -984,6 +984,26 @@
           <label>2D</label>
         </pagejump>
       </navbar>
+      <page name="Deeper Navbar Test" align="center">
+        <text>
+          <label>This subpage adds additional content to the navbar</label>
+        </text>
+        <navbar position="left" dynamic="true" width="200px">
+          <text>
+            <label>Test 3</label>
+          </text>
+          <line/>
+          <pagejump target="id_0_34_7" name="Lithium">
+            <label>Flavour</label>
+          </pagejump>
+          <pagejump target="id_0_34_8" name="Potassium">
+            <label>Flavour</label>
+          </pagejump>
+          <pagejump target="id_0_36">
+            <label>2D</label>
+          </pagejump>
+        </navbar>
+      </page>
     </page>
     <break/>
     <page name="2D fixed Bitmap" type="2d" backdrop="media/demo_2d_backdrop_nikolaushaus.png" align="center">

This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.