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

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

Revision: 788
          http://openautomation.svn.sourceforge.net/openautomation/?rev=788&view=rev
Author:   mayerch
Date:     2012-05-05 21:39:46 +0000 (Sat, 05 May 2012)
Log Message:
-----------
New feature: initial implementation of navbars

Modified Paths:
--------------
    CometVisu/trunk/visu/designs/designglobals.css
    CometVisu/trunk/visu/index.html
    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	2012-05-05 20:03:52 UTC (rev 787)
+++ CometVisu/trunk/visu/designs/designglobals.css	2012-05-05 21:39:46 UTC (rev 788)
@@ -2,6 +2,36 @@
  * global CSS declarations for all designs 
  */
 
+/*
+ * create a three column layout in the middle of the page to allow navbars
+ * inspired by http://www.alistapart.com/articles/holygrail
+ */
+#centerContainer {
+  padding-left: 0px;   /* left bar width */
+  padding-right: 0px;  /* right bar width */
+}
+#centerContainer > div {
+  position: relative;
+  float: left;
+}
+#main {
+  width: 100%;
+}
+#navbarLeft {
+  width: 0px;          /* left bar width */
+  right: 0px;          /* left bar width */
+  margin-left: -100%;
+}
+#navbarRight {
+  width: 0px;          /* right bar width */
+  margin-right: 0px;   /* right bar width */
+}
+#navbarTop {
+}
+#navbarBottom {
+  clear: both;
+}
+
 /* 
  * colspans, each design needs to define a colspan0
  * class, this class is the default widget size

Modified: CometVisu/trunk/visu/index.html
===================================================================
--- CometVisu/trunk/visu/index.html	2012-05-05 20:03:52 UTC (rev 787)
+++ CometVisu/trunk/visu/index.html	2012-05-05 21:39:46 UTC (rev 788)
@@ -29,6 +29,7 @@
     <script src="structure/pure/infotrigger.js" type="text/javascript"></script>
     <script src="structure/pure/line.js" type="text/javascript"></script>
     <script src="structure/pure/multitrigger.js" type="text/javascript"></script>
+    <script src="structure/pure/navbar.js" type="text/javascript"></script>
     <script src="structure/pure/page.js" type="text/javascript"></script>
     <script src="structure/pure/slide.js" type="text/javascript"></script>
     <script src="structure/pure/switch.js" type="text/javascript"></script>
@@ -53,10 +54,17 @@
     <div id="top" class="loading">
       <div class="nav_path">-</div>
     </div>
-    <div id="main" style="width:900px;position:relative; overflow: hidden;" class="loading">
-      <div id="pages" class="clearfix" style="width:20000em; position:relative;clear:both;"><!-- all pages will be inserted here -->
+    <div id="navbarTop" class="loading"></div>
+    <div id="centerContainer">
+      <div id="main" style="width:900px;position:relative; overflow: hidden;" class="loading">
+        <div id="pages" class="clearfix" style="width:20000em; position:relative;clear:both;">
+          <!-- all pages will be inserted here -->
+        </div>
       </div>
+      <div id="navbarLeft" class="loading page"></div>
+      <div id="navbarRight" class="loading page"></div>
     </div>
+    <div id="navbarBottom" class="loading"></div>
     <div id="bottom" class="loading">
       <hr />
         <div class="footer"></div>

Modified: CometVisu/trunk/visu/lib/templateengine.js
===================================================================
--- CometVisu/trunk/visu/lib/templateengine.js	2012-05-05 20:03:52 UTC (rev 787)
+++ CometVisu/trunk/visu/lib/templateengine.js	2012-05-05 21:39:46 UTC (rev 788)
@@ -22,6 +22,12 @@
 
 var mappings = {}; // store the mappings
 var stylings = {}; // store the stylings
+var navbars  = {   // store informations about the nav bars
+  top:    { dynamic: false },
+  left:   { dynamic: false },
+  right:  { dynamic: false },
+  bottom: { dynamic: false }
+};
 
 var ga_list = [];
 
@@ -120,15 +126,20 @@
  */
 function handleResize() {
   var uagent = navigator.userAgent.toLowerCase();
-
+  var widthNavbarLeft  = $( '#navbarLeft'  ).width();
+  var widthNavbarRight = $( '#navbarRight' ).width();
+  var width = $( window ).width() - widthNavbarLeft - widthNavbarRight;
+  
   if (/(android|blackberry|iphone|ipod|series60|symbian|windows ce|palm)/i.test(uagent)) {
-    var width = $( window ).width();
     $( '#main' ).css( 'width', width );
     $( 'head' ).append( '<style type="text/css">.page{width:' + (width-0) + 'px;}</style>' );
     // do nothing
   } else {
-    var width = $( window ).width();
-    var height = $( window ).height() - $( '#top' ).outerHeight(true) - $( '#bottom' ).outerHeight(true) - 2;
+    var height = $( window ).height()
+                 - $( '#top'          ).outerHeight(true) 
+                 - $( '#navbarTop'    ).outerHeight(true)
+                 - $( '#navbarBottom' ).outerHeight(true)
+                 - $( '#bottom'       ).outerHeight(true) - 2;
     $( '#main' ).css( 'width', width ).css( 'height', height );
     $( 'head' ).append( '<style type="text/css">.page{width:' + (width-0) + 'px;height:' + height + 'px;}</style>' );
   }
@@ -537,4 +548,27 @@
             
     })
   })
-}
\ No newline at end of file
+}
+
+/**
+ * Change the size of the selected navbar
+ * 
+ * currently only "left" and "right" are implemented
+ */
+function navbarSetSize( position, size )
+{
+  var cssSize = size + 'px';
+  switch( position )
+  {
+    case 'left':
+      $( '#centerContainer' ).css( 'padding-left', cssSize );
+      $( '#navbarLeft'      ).css( { width: cssSize, right: cssSize } );
+      break;
+      
+    case 'right':
+      $( '#centerContainer' ).css( 'padding-right', cssSize );
+      $( '#navbarRight'     ).css( { width: cssSize, 'margin-right': '-' + cssSize } );
+      break;
+  }
+  handleResize();
+}

Modified: CometVisu/trunk/visu/visu_config_demo.xml
===================================================================
--- CometVisu/trunk/visu/visu_config_demo.xml	2012-05-05 20:03:52 UTC (rev 787)
+++ CometVisu/trunk/visu/visu_config_demo.xml	2012-05-05 21:39:46 UTC (rev 788)
@@ -105,6 +105,11 @@
     </statusbar>
   </meta>
   <page name="CometVisu Widget Demo">
+    <navbar position="left" dynamic="true" width="200px">
+      <text>Test 1</text>
+      <line/>
+      <text>Test 2</text>
+    </navbar>
     <text align="center">Herzlich willkommen bei dem CometVisu Widget Demo!</text>
     <text>&lt;b&gt;Hinweis:&lt;/b&gt;&lt;br/&gt;Alle Widgets verwenden KNX-Addressen mit der Haupt- und Mittelgruppe 12/7, da diese meist unbenutzt sind und so beim Testen oft keine Nebenwirkungen auftreten können. Sollten diese Gruppe bei Ihnen verwendet werden, so sollten Sie diese Widgets hier nicht betätigen!</text>
     <line/>

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