Changeset 3610

Timestamp:

Jul 27, 2007, 2:53:11 PM (16 years ago)

Author:

Nicklas Nordborg

Message:

References #360: Make subsections on view pages hideable

Infrastructure is now in place. See below for examples.

Location:

trunk

Files:

• src/clients/web/net/sf/basedb/clients/web/taglib/HideableSection.java (added)
• src/core/net/sf/basedb/core/ItemContext.java (modified) (3 diffs)
• www/WEB-INF/base.tld (modified) (1 diff)
• www/common/store_show_hide_section.jsp (added)
• www/images/hide_section.gif (added)
• www/images/show_section.gif (added)
• www/include/scripts/ajax.js (modified) (2 diffs)
• www/include/scripts/main.js (modified) (3 diffs)
• www/include/styles/main.css (modified) (2 diffs)
• www/lims/arraydesigns/view_design.jsp (modified) (7 diffs)

trunk/src/core/net/sf/basedb/core/ItemContext.java

@@ -165 +165 @@
   private final Item itemType;
   private final String subContext;
+  private int contextId;
   private int itemId;
   private Set<Integer> selected;
@@ -218 +219 @@
     this.subContext = context.getSubContext();
     this.name = context.getName();
+    this.contextId = context.getId();
     this.itemId = context.getItemId();
     this.rowsPerPage = context.getRowsPerPage();
@@ -295 +297 @@
   }
 
+  /**
+    Get the database ID of this context. Can be used to load contexts
+    @return The database ID of the context, or 0 if it hasn't been saved to 
+      the database
+    @since 2.4
+  */
+  public int getContextId()
+  {
+    return contextId;
+  }
+  
   /**
     Get the ID of the current item in this context.

trunk/www/WEB-INF/base.tld

@@ -438 +438 @@
     </attribute>
   </tag>
+  <tag>
+    <name>section</name>
+    <tagclass>net.sf.basedb.clients.web.taglib.HideableSection</tagclass>
+    <attribute>
+      <name>id</name>
+      <required>true</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>clazz</name>
+      <required>false</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>showclazz</name>
+      <required>false</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>hideclazz</name>
+      <required>false</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>style</name>
+      <required>false</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>contentstyle</name>
+      <required>false</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>title</name>
+      <required>true</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>visible</name>
+      <required>false</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>ontoggle</name>
+      <required>false</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>initial</name>
+      <required>false</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>context</name>
+      <required>false</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+  </tag>
 
 </taglib>

trunk/www/include/scripts/ajax.js

@@ -22 +22 @@
   ------------------------------------------------------------------
 
-  JavaScript functions for the Annotations
-  /common/annotations/*
+  JavaScript functions for sending Ajax request. Create a
+  request with Main.getAjaxRequest() or Ajax.getXmlHttpRequest().
 
   @author Nicklas
@@ -32 +32 @@
 function AjaxClass()
 {
+  /**
+    Create a new ajax request.
+    @return A request object or null if the browser doesn't support ajax
+  */
   this.getXmlHttpRequest = function()
   {
-    var xmlHttp = null;
-    if (window.XMLHttpRequest)
-    {
-      // Non-IE browswers
-      xmlHttp = new XMLHttpRequest();
-    }
-    else if (window.ActiveXObject)
-    {
-      // IE browsers
-      try 
-      {
-        // IE #1
-          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
-      }
-      catch (e) 
-      {
-        try 
-        {
-          // IE #2
-          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
-        } 
-        catch (e2) 
-        {}
-      }
-    }
-    return xmlHttp;
+    return Main.getAjaxRequest();
   }
   
+  /**
+    Register callback functions for a successful of failed request.
+    When the request has been completed, the onSuccessHandler or
+    onFailHandler will be called with the request as a parameter:
+    onSuccessHandler(request);
+  */
   this.setReadyStateHandler = function(request, onSuccessHandler, onFailHandler)
   {

trunk/www/include/scripts/main.js

@@ -525 +525 @@
   }
   
+  /**
+    Create a new ajax request.
+    @return A request object or null if the browser doesn't support ajax
+  */
+  this.getAjaxRequest = function()
+  {
+    var xmlHttp = null;
+    if (window.XMLHttpRequest)
+    {
+      // Non-IE browswers
+      xmlHttp = new XMLHttpRequest();
+    }
+    else if (window.ActiveXObject)
+    {
+      // IE browsers
+      try 
+      {
+        // IE #1
+          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
+      }
+      catch (e) 
+      {
+        try 
+        {
+          // IE #2
+          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
+        } 
+        catch (e2) 
+        {}
+      }
+    }
+    return xmlHttp;
+  }
+  
+  
   this.viewSource = function()
   {
@@ -1555 +1590 @@
     //alert("createHidden: name="+name+"; value="+value);
   }
+  
 }
 
@@ -1569 +1605 @@
 }
 
-
+// Handle sections that can be shown/hidden and remembered by context settings
+var HideableSection = new HideableSectionClass();
+function HideableSectionClass()
+{
+  // Show/hide a section 
+  this.toggle = function(sectionId)
+  {
+    var main = document.getElementById(sectionId);
+    var icon = document.getElementById(sectionId+'.icon');
+    var content = document.getElementById(sectionId+'.content');
+    var visible = true;
+    var showClass = main.attributes['showclass'];
+    var hideClass = main.attributes['hideclass'];
+    
+    if (content.style.display == 'none')
+    {
+      Main.show(content.id);
+      icon.src = getRoot() + '/images/hide_section.gif';
+      visible = true;
+      if (showClass) Main.addClass(main, showClass.value);
+      if (hideClass) Main.removeClass(main, hideClass.value);
+    }
+    else
+    {
+      Main.hide(content.id);
+      icon.src = getRoot() + '/images/show_section.gif';
+      visible = false;
+      if (showClass) Main.removeClass(main, showClass.value);
+      if (hideClass) Main.addClass(main, hideClass.value);
+    }
+    return visible;
+  }
+  
+  /**
+    Show/hide a section and send an Ajax request to the server with
+    the new status. If the browser doesn't support Ajax, this method is
+    identical to toggle()
+  */
+  this.toggleAndSendWithAjax = function(sectionId, itemType, subcontext)
+  {
+    var visible = this.toggle(sectionId);
+    var request = Main.getAjaxRequest();
+    if (request != null)
+    {
+      var url = getRoot()+'/common/store_show_hide_section.jsp?ID='+Main.getIdFromLocation();
+      url += '&sectionId='+sectionId;
+      url += '&itemType='+itemType;
+      url += '&subcontext='+subcontext;
+      url += '&visible='+(visible ? '1' : '0');
+      request.open("GET", url, true);
+      request.send(null);
+    }
+    
+  }
+  
+
+}

trunk/www/include/styles/main.css

@@ -67 +67 @@
 }
 
-h3.docked {
+h3.docked, .docked h3 {
   border-bottom: 0px;
 }
@@ -80 +80 @@
 }
 
-h4.docked {
+h4.docked, .docked h4 {
   border-bottom: 0px;
   margin-bottom: 2px;

trunk/www/lims/arraydesigns/view_design.jsp

@@ -245 +245 @@
       />
       </tbl:toolbar>
+      
     <div class="boxedbottom">
       <div class="itemstatus">Permissions on this item: <i><%=PermissionUtil.getFullPermissionNames(design)%></i></div>
@@ -336 +337 @@
       {
         %>
-        <h4 class="docked">Array batches</h4>
+        <base:section 
+          id="batches" 
+          title="<%="Array batches (" + batches.size() +")"%>"
+          context="<%=cc%>">
         <tbl:table
           id="batches"
@@ -368 +372 @@
         </tbl:data>
         </tbl:table>
+        </base:section>
         <%
       }
@@ -387 +392 @@
       {
         %>
-        <h4 class="docked">Plates</h4>
+        <base:section 
+          id="plates" 
+          title="<%="Plates (" + plates.size() +")"%>" 
+          context="<%=cc%>">
         <tbl:table
           id="plates"
@@ -434 +442 @@
         </tbl:data>
         </tbl:table>
+        </base:section>
         <%
       }
@@ -449 +458 @@
       {
         %>
-        <h4 class="docked">Shared to</h4>
+        <base:section 
+          id="sharedTo" 
+          title="Shared to"
+          context="<%=cc%>">
         <tbl:table 
           id="itemsSharedTo"
@@ -518 +530 @@
           </tbl:data>
         </tbl:table>
+        </base:section>
         <%
       }