Solved

Web Views

Posted on 2001-09-12
5
281 Views
Last Modified: 2013-12-18
Hi,

Can someone help me out here?
I have here with me, dhtmlvwie.txt - that does the individual expanding and collapsing of categories; and javascriptdhtml.txt - that does the expand all and collapse all, as well as previous and next navigation.

I'm having trouble modifying the codes in javascriptdhtml.txt to fit in with the codes in dhtmlvwie.txt. Tries changing the getElementsByTagName("DIV"), but still can't get the expand/collapse all to work properly.

Essentially, I'm trying to preload the web views and have more than one column categorized.

Appreciate if someone could help me out to enhance the expand/collapse all functions to incorporate into dhtmlvwie.js

Thanks!

dhtmlvwie.js (obtained from http://Advisor.com/Article/HOLTM13)
====================================================

var twistyDown = new Image(7, 5);
twistyDown.src = "images/arrow_orangeCollapse.gif/$file/arrow_orangeCollapse.gif?OpenElement";
var twistyRight = new Image(7, 5);
twistyRight.src = "images/arrow_orangeExpand.gif/$file/arrow_orangeExpand.gif?OpenElement";

function countIndent(catNum) {
      var retVal = 0;
      var tempStr = catNum;
      while (tempStr.indexOf(".") != -1) {
            retVal++;
            tempStr = tempStr.substring(tempStr.indexOf(".")+1, tempStr.length);
      }
      return retVal;
}

function drawLayer() {
      var args = drawLayer.arguments;
      if (args[0] == "X") {
            return;
      }
      var catName = args[0];
      var indent = countIndent(catName);
      if (indent == 0) { var showHide = "show"; } else { var showHide = "none"; }
      var layerContent = args[1];
      if (args.length == 3) { var docUNID = args[2]; } else { var docUNID = ""; }
      document.write("<div id=\"Layer" + catName + "\" style=\"display:" + showHide + ";\">");
      if (indent != 0) { document.write("<img src=/icons/ecblank.gif width=" + (10*indent) + " height=1>"); }
      if (docUNID == "") {
            document.write("<a href=\"javascript:void(0)\" onClick=\"expandCollapse(\'" + catName + "\');\">");
            document.write("<img src=" + twistyRight.src + " name=\"Layer" + catName + "Img\" border=0></a>");
            document.write(fontCategories);
            if (boldCategories) { document.write("<b>"); }
      } else {
            if (canDocBeOpened) {
                  document.write("<a href=\"/" + dbName + "/" + viewName + "/" + docUNID + "!OpenDocument\">");
            }
            document.write(fontDocuments);
            if (boldDocuments) { document.write("<b>"); }
      }
      document.write(layerContent);
      if (docUNID == "") {
            if (boldCategories) { document.write("</b>"); }
            if (fontCategories != "") { document.write("</font>"); }
      } else {
            if (boldDocuments) { document.write("</b>"); }
            if (fontDocuments != "") { document.write("</font>"); }
            if (canDocBeOpened) { document.write("</a>"); }
      }
      document.write("</div>");
}

function expandCollapse(catName) {
      evalStmt = "var image = document.all[\"Layer" + catName + "Img\"];";
      eval(evalStmt);
      if (image.src == twistyRight.src) {
            expandCategory(catName, image);
      } else {
            collapseCategory(catName, image);
      }
}

function expandCategory(catName, image) {
      image.src = twistyDown.src;
      var moreToDo = true;
      var layerNum = 1;
      while (moreToDo) {
            var evalStmt = "var layer = document.all[\"Layer" + catName + "." + layerNum + "\"];";
            eval(evalStmt);
            if (layer == null) {
                  moreToDo = false;
            } else {
                  layer.style.display = "";
            }
            layerNum++;
      }
}

function collapseCategory(catName, image) {
      image.src = twistyRight.src;
      var moreToDo = true;
      var layerNum = 1;
      while (moreToDo) {
            var evalStmt = "var layer = document.all[\"Layer" + catName + "." + layerNum + "\"];";
            eval(evalStmt);
            if (layer == null) {
                  moreToDo = false;
            } else {
                  layer.style.display = "none";
                  evalStmt = "var newImage = document.all[\"Layer" + catName + "." + layerNum + "Img\"];";
                  eval(evalStmt);
                  if (newImage != null) {
                        if (newImage.src == twistyDown.src) {
                              collapseCategory(catName + "." + layerNum, newImage);
                        }
                  }
            }
            layerNum++;
      }
}

javascriptdhtml.txt
====================

var strDIVHidden = "";
var intDIVHiddenIDLength = 1;
var strDIVStart = "";

function launchChildURL()
{
 var src = event.srcElement;
 var allAnchors = src.children.tags("A");
 if (1 == allAnchors.length)
 {
  allAnchors(0).click();
 }
}

function DisplayView()
{
  window.location = window.document.activeElement.value;
}

function clickHandler()
{
 var targetId;
 var srcElement;
 var targetElement;
 srcElement = window.event.srcElement;
 if (srcElement.className == "Outline")
 {
  targetId = srcElement.id + "d";
  targetElement = document.all(targetId);
  if (targetElement.style.display == "none")
  {
   targetElement.style.display = "";
  }
 else
  {
  targetElement.style.display = "none";
  }
 }
}


//Use this function manage loading of the document
function ManageLoading(expcoll)
{
 if (expcoll==false)  //If the default for this view is collapsed / expanded
 {
   ExpandCollapseAll("none");
 }
 ViewNavigation()  //Setup View Navigation.  If the view needs 'Next' functionality set up global variables for this
}


// Use this function to expand and collapse the view
function ExpandCollapseAll(expcoll)
{
 var i;
 var divtags = window.document.getElementsByTagName("DIV");
 for (i = 0; i < divtags.length; i++)
 {
  if (divtags[i].id.slice(0, intDIVHiddenIDLength) !== strDIVHidden && divtags[i].id !== "viewbody") //Make sure we don't show the <div> that is hidden (see HideLowestDIV fucntion below)
  {
    divtags[i].style.display = expcoll;  //Display or hide <div>
  }
 }
}


// Use this function to check if there the web view has reached its maximum '&count=' value.
// If it has, setup the global variables for the 'Next' button and hide the last <div>
function ViewNavigation()
{
  var intCount;
  var intDIVCount;
  var intLinks;

  intDIVCount = CountDIVs();

// The value of the '&count=' parameter needs to be compared with the number of <a> links so that 'Next' functionality can initiated if required
// If there is not a '&count=' assume it is the Notes default of 30
  intCount = GetURLParameter("count")
  if (intCount == "")
  {
    intCount = 30;  // if 'count=' was not found return Notes default of 30
  }

  intCount =  intCount - intDIVCount;
  intLinks = document.links.length - 4;

  if (intLinks == intCount)
  {
    HideLowestDIV();
   CheckViewWorks();
  }
}

// We need to count the number of <div>s in the view.
// This is because the URL parameter '&count=' includes all categories AND links
// So if your URL has a '&count=100' parameter and there are 12 categories in your view, Notes will only give 88 (100 - 12) documents / links.
function CountDIVs()
{
 var intDIVCount = 0;
 var arrDIVTags = window.document.getElementsByTagName("DIV");
 var i;

 for (i = 0; i < arrDIVTags.length; i++)
 {
    if(arrDIVTags[i].id !== "" && arrDIVTags[i].id !== "viewbody")
    {
      intDIVCount++;
    };
  }
  return(intDIVCount);
}



// If the number of <a> links corresponds to the value of '&count=' then hide the lowest category or <div> (it may not have all its documents yet..)
// This is done so that users don't think that the documents displayed for a lowest <div> are all of them
// If the lowest <div> is hidden in this page, it will be first to be displayed in the next page
// This function also sets the value of two global variables so that they may be used in expanding and collapsing views (function ExpandCollapseAll(expcoll))
// and used in the 'Next' button functions
function HideLowestDIV()
{
  var arrDIVTags;
  var intDIVCount;
  var regExpString;
  var strSPANHideID;

  arrDIVTags = window.document.getElementsByTagName("DIV");
  intDIVCount = arrDIVTags.length - 1;
  regExpString = /\./;

  while (arrDIVTags[intDIVCount].id.search(regExpString) !== -1 | arrDIVTags[intDIVCount].id.length == 0)
  {
    arrDIVTags[intDIVCount].style.display = "none";  // Hide all lower <div>s up to and including the top category
    intDIVCount--;
    if(arrDIVTags[intDIVCount].id.length !== 0) //Hide all corresponding <span> (category heading) tags too.
    {
      strSPANHideID = "" + arrDIVTags[intDIVCount ].id.slice(0, arrDIVTags[intDIVCount].id.length - 1) + "";
      document.all(strSPANHideID).style.display = "none";
    }
  }
 
  intDIVCount = arrDIVTags[intDIVCount ].id.slice(0, arrDIVTags[intDIVCount].id.length - 1);

  //Hide the <SPAN> value (top categroy)
  strSPANHideID = "" + intDIVCount + "";

  document.all(strSPANHideID).style.display = "none";

  //Set up global variables for expanding & collapsing and 'Next'
  intDIVHiddenIDLength = document.all(intDIVCount + "d").id.length - 1;
  strDIVHidden = intDIVCount;
}



// This function makes sure that the view count is enough to show at least one category in the view.  ie check that the hidden <div> is not the top level <div>
// If the view count is not enough, it prints an error message.
// Later, we may make it so that the page redirects to an agent which mails the Knowledge Team or someone allocated as the
// database technical contact.  It would then print out a message to the user saying explaining the problem
//NOTE: THERE IS COMPUTED TEXT IN THE STYLESHEET REFERENCE
function CheckViewWorks()
{
  var strViewStart;

  strViewStart = GetURLParameter("start");
  if (strViewStart == strDIVHidden)
  {
    document.writeln ("<html>");
    document.writeln ("<head>");
    document.writeln ("<link rel='stylesheet' type='text/css' href='/global/ap/kapt/sgmarketing.nsf/Pages/NavSection---corporatetaxation'>");
    document.writeln ("</head>");
    document.writeln ("<body>");
    document.writeln ("<p class=\"title\">This view is not functioning properly.  Please contact the knowledge manager</p>");
    document.writeln ("</body>");
    document.writeln ("</html>");
  }
}



// This function manages the 'Next' button
// It searches and replaces the URL string with a new '&start=' value and opens a new location to suit.
// The new '&start=' value is same as the category that was hidden in the last view
//NOTE: THERE IS COMPUTED TEXT IN THIS FUNCTION
function  GoNext()
{
  var strWindowLocation;
  var strRegExp;
  var strThisPageStart;
  var strNextPageStart;

// Ensure the document has finished loading before using the next button.
// This is important as we don't know how many <a> tags or categories there are so we don't know where to start the next view
  if(document.readyState !== "complete")
  {
    alert ("Please wait until this page has finished loading");
    return;
  }
 
  if (strDIVHidden == "")  // We are at the end of the view.  Do not try and reload another page
  {
    alert("There are no more documents");
    return;
  }

  strRegExp = /start=/i;
  strWindowLocation = window.location.href.toLowerCase( );
  intFirstCount = strWindowLocation.search(strRegExp);

  if (intFirstCount == -1)  // There currently is no start value in the URL
  {
    window.location.href = window.location.href + "&start=" + strDIVHidden;
    return;
  }

  // Search for current '&start=' parameter and replcae with new one.
  // Then open new windoe to suit
  strThisPageStart = "start=" + GetURLParameter("start");
  strRegExp = new RegExp(strThisPageStart, "i");
  strNextPageStart = "start=" + strDIVHidden
  window.location.href = strWindowLocation.replace(strRegExp, strNextPageStart);
}



// This function manages the 'Previous' button on the view
// Ths function 'WhereDidThisPageStart' runs on document load and sets the global 'strDIVStart'
// 'strDIVStart' holds the value of the first category's <div>
// If this equals 1, then we are the beginning of the view
//NOTE: THERE IS COMPUTED TEXT IN THIS FUNCTION
function GoPrevious()
{

// Ensure the document has finished loading before using the previous button.
// This is important as we don't know the value of the variable 'strDIVStart' intil the body 'onload' event has run
  if(document.readyState !== "complete")
  {
    alert ("Please wait until this page has finished loading");
    return;
  }

  if (GetURLParameter("start") == "")  // We are at the beginning of the view.  Do not try and reload another page
  {
    alert("There are no more documents");
    return;
  }
  else
  {
    history.go(-1);
  }
}

// Use this function to disect the URL to get the value of the parameter 'strParameter'
function GetURLParameter(strParameter)
{
  var strQueryString;
  var strExpString;
  var intCountStart;
  var strFirstSlice;
  var strSecondSlice;

  strQueryString = document.location.search.toLowerCase( );
  strExpString = new RegExp(strParameter, "i");

  intCountStart = strQueryString.search(strExpString);

  if (intCountStart == -1)
  {
    return("");
  }

  //Look for any other paramters that may attached to the URL
  strFirstSlice  = strQueryString.slice(intCountStart);
  strExpString = /&/;
  intCountStart = strFirstSlice.search(strExpString);
  if (intCountStart == -1) // No other parameters found
  {
    return(strFirstSlice.slice(6))
  }
  else
  {
    strSecondSlice = strFirstSlice.slice(0, intCountStart)
    return(strSecondSlice.slice(6));
  }
}

document.onclick = clickHandler;
0
Comment
Question by:eileener
  • 2
5 Comments
 
LVL 10

Accepted Solution

by:
zvonko earned 100 total points
ID: 6492215
Hello eileener,

here comes your ExpandAll/CollapseAll  JavaScript functions <|;-)
but increase the points to 300 and give me an A, please (I beg you :-))

Here how it works...

Place at the end of your $$ViewTemplateDefault form something like this:
<FORM>
<INPUT TYPE=BUTTON VALUE=" ExpandAll " onClick="ExpandAll()">
<INPUT TYPE=BUTTON VALUE=" CollapseAll " onClick="CollapseAll()">
</FORM>

You can place this <FORM> definitions multiple times, as often as you need it.

So, here comes this ExpandAll()/CollapseAll() functions:
(place it best at the end of dhtmlvwie.js)
// Use this function to expand the view
function ExpandAll() {
  var i;
  var divtags = window.document.getElementsByTagName("DIV");
  for (i = 0; i < divtags.length; i++) {
    if (divtags[i].id.indexOf("Layer") == 0) {
      evalStmt = "nextImage = document.all[\"" + divtags[i].id + "Img\"]";
      eval(evalStmt);
      if (nextImage != null) nextImage.src = twistyDown.src;
      divtags[i].style.display = "";  //Display  <div>
    }
  }
}

// Use this function to collapse the view
function CollapseAll() {
  var i;
  var divtags = window.document.getElementsByTagName("DIV");
  for (i = 0; i < divtags.length; i++) {
    if (divtags[i].id.indexOf("Layer") == 0) {
      if (divtags[i].id.indexOf(".") != -1) {
        divtags[i].style.display = "none";  //Hide  <div>
      } else {
        evalStmt = "nextImage = document.all[\"" + divtags[i].id + "Img\"]";
        eval(evalStmt);
        if (nextImage != null) nextImage.src = twistyRight.src;
        divtags[i].style.display = "";  //Display  <div>
      }
    }
  }
}


...and look to have "Treat page contents as HTML" switched on.

Good luck,
zvonko
0
 

Author Comment

by:eileener
ID: 6498556
Hi zvonko,

Thanks very much for your help!
I haven't got time to test it out. But I will definitely up the points ! =)
0
 
LVL 10

Expert Comment

by:zvonko
ID: 6498988
you are welcome.
(and the points too :-)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10476507
eileener,
No comment has been added lately (890 days), so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area for this question:

RECOMMENDATION: Award points to zvonko http:#6492215
Please leave any comments here within 4 days.

-- Please DO NOT accept this comment as an answer ! --

Thanks,

Zvonko
EE Cleanup Volunteer
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

  In today’s Arena we can’t imagine our lives without Internet as we are highly used to of it. If we consider our life style just for only 2 min we found that face to face communication is swapped by e-communication.  Every Where from Works place to…
Notes Document Link used by IBM Notes is a link file which aids in the sharing of links to documents in email and webpages. The posts describe the importance and steps to create a Lotus Notes NDL file in brief.
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now