Solved

Web Views

Posted on 2001-09-12
5
298 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Lack of Storage capacity is a common problem that exists in every field of life. Here we are taking the case of Lotus Notes Emails, as we all know that we are totally depend on e-communication i.e. Emails. This article is fully dedicated to resolvin…
Article by: Rob
Notes 8.5 Archiving Steps and Tips This article covers setting up a Notes archive, and helps understand some of the menu choices making setting up and maintaining a Notes archive file easier.
In this video, viewers will be given step by step instructions on adjusting mouse, pointer and cursor visibility in Microsoft Windows 10. The video seeks to educate those who are struggling with the new Windows 10 Graphical User Interface. Change Cu…
There's a multitude of different network monitoring solutions out there, and you're probably wondering what makes NetCrunch so special. It's completely agentless, but does let you create an agent, if you desire. It offers powerful scalability …
Suggested Courses

623 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