Requirements - NNLM



RequirementsYou will needA web serverThe software was developed and tested under Microsoft’s IIS and Microsoft Window’s Server software. The web site should work fine under Apache, NGINX, or any other web server capable of serving HTML and JavaScript files.Please note: Microsoft Windows is case-preserving, but case insensitive. There may be file names (especially the names of the image files) that have different cases. In windows Image.jpg is not the same as image.jpg. The space requirement is negligible. The entire page, including images, is less than 2 Megabytes. Bandwidth and Processor requires are dependent upon how many concurrent users you expect. Exact requirements cannot be given, as they depend upon the number of concurrent users, website compression settings, caching and several other factors. The truth is, however, that just about web server you have should be more than adequate. Microsoft Office 2007 or newer (If you wish to maintain the resource list. If you are going to use the centralized list, you don’t need Office.)Note: the Excel file is Macro-enabled. You will get a security warning when you open it. This is normal.The user will need to have access to the internet. We use several libraries that are fetched from over the Internet. If you want to create a stand-alone library that is independent of the Internet, contact Andrew Neely in WV and he can instruct you on how to download the libraries and change the references to local ones.The ability to either copy files to your web page or have somebody do it for you.FilesIndex.htmHTML code for the library page. help.htmlHTML code that provides links to help videos, pdfs and html pagesDigitalLibraryJSON.htmData File containing all the data for the Digital Library web page. css/style.cssCascading Style Sheet formatting information for the page.scripts/script.jsJavaScript code that powers the Digital Library page.Images/Folder containing all of the image files for the Digital LibraryCore ConceptsThe Digital Library Webpage is nothing more than a list of links. Many of these links change from time to time, as resources are added or removed. Therefore, we created the web page to generate the list dynamically.To generate the list, the web site reads a data file called DigtialLibraryJSON.htm. You have two options. Option 1 - Remote Options – We have put the data file on a public web server, so that your digital library installation can constantly be updated without you having to do anything.Option 2 - Local Option - You can maintain your own list of resources. This is handy if you wish to add your own custom resources to the list (i.e. local publications which are not in the general list, links to state-specific resources, etc.) We have a Microsoft Excel Spreadsheet that will generate the data file which will be then uploaded to the web site. The project can send you the updated Excel spreadsheet, and then your local-specific data would be copied in.There are other possible scenarios in which you may wish to use the local option, other than maintaining the list yourself. We can email you the data file when the list is updated. This file would have to be uploaded to your website.Option 3 - Hosted Library – We are working towards being able to offer a hosted library page. The page won’t have the look and feel of your intranet. This option would be great for those who don’t have the resources or inclination to put up their own library.Other OptionsThere are other options you have, regardless of how you choose to provide your web site with the data (local or remote options above.)What to show - Each resource has several elements that you can use in your integration. They are as follows: Element NameMeaningsortOrderThis is the field we sort the list by. Available in the json feed. It is numeric.resourceNameThis is the name of the resource.resourceTypeThis is the category we use when filtering it and we sort the list by this.publisherNameThis is the full name of the publisher.publisherAbbreviationThis is the abbreviation of the publisher's namedescriptionThis is the text that explains what the resource isresourceLinkThis is the URL to the resource that is used in the hyperlinks.beginningyearYear that the journal was first published. Not consistently populatedOpenAccessIndicates if the journal is Open Access.ImactFactorImpact factor of the journal. Not currently well populated or maintained.imageNameThis is the file name of image to display for the resource.CoverageYears of publication that full text articles are available. YYYY – YYYY or YYYY - presentFigure SEQ Figure \* ARABIC 1, List of ElementsThe template we provide uses resourceName, resourceType, resourceLink, publisherName, description, publisherAbbreviation, imageName and Coverage.If you decide to build your own template, feel free to use any of the elements above. Technically, all you would need is the resourceLink property, however, the links themselves are not very descriptive so I would recommend, at a minimum using the resourceName in your hyperlink.Programmer’s Note: JavaScript will translate the data file into an array of JavaScript objects. These are the properties of those objects. Search and Filtering optionsThe template includes search and filtering code to help the user locate the resources he or she is looking for on the Library page. While helpful, you may wish to exclude them, especially if it doesn’t fit the look and feel of your Intranet. If you wish to exclude them, then you need to remove the following items. Remove From the index.htmFilterToggle buttonFilterOptions DivsearchToggleButtonsearchBox DivRemove form script.jsin DocReady, remove SetUpSearchAndFilterFeatures();remove the function SetUpSearchAndFilterFeaturesremove the function searchToggleClickremove the function FilterOptionClickin the buildList function, remove the $("#ResourceTypeForm").append line of codeInstallationAssumptions: We assume you have a web server to put the page on. We also assume basic skills with HTML and JavaScript. There are EXTENSIVE notes inside of the HTML and script.js files to aid your installation.Note: You can use the provided template. Just copy the files to your web page. You need only modify the logos and title. You can use our template as a starting point, and modify the parts that you need to in order to conform it to your look and feel. In some circumstances, you may determine that the easiest course of action would be to start with your organization’s web page template, and then graft in digital library. This document has the projects entire HTML and JavaScript source code. I’ve provided simplified code examples that will not only help you understand what our template is doing, but provide you sample code if you are building your own implementation from scratch.ReferencesThe code uses JQuery and JQuery UI libraries, using Google’s Hosted Libraries. References to these must be in the header of your page. You must include a reference to the style sheets (jquery-ui.css and style.css) in your header.You must include the call to the docReady function by including following code in your header (see REF _Ref477187225 \h Figure 2, Script Example, DocReady Function)3739515116205<script type="text/javascript"> $(document ).ready(function() { docReady(); });</script>4000020000<script type="text/javascript"> $(document ).ready(function() { docReady(); });</script>Implementation3787140580390<div id="theList"> <ul id ="mainList" class="list" ></ul></div>020000<div id="theList"> <ul id ="mainList" class="list" ></ul></div>3779520330835Figure SEQ Figure \* ARABIC 2, Script Example, DocReady Function00Figure SEQ Figure \* ARABIC 2, Script Example, DocReady FunctionIn your HTML page, you’ll create an unordered list at the point where you want your library list to be. The unordered list must have an id of “mainList” in order for the JavaScript to find it and populate it from the data from your data file.3825240556260Figure SEQ Figure \* ARABIC 3, List Code Example00Figure SEQ Figure \* ARABIC 3, List Code ExampleIf you are using the search function, the list and the search box have to be in the same div container element. In REF _Ref477253220 \h Figure 3, List Code Example, I’ve highlighted the required unordered list. For clarity, the sample does not show the search function, but in a real implementation, it would be above the list and below the starting div.Customizing your listThe GetListData function in the script.js file sets the options for the location of the data file. Those options are set in JavaScript variables. The function has extensive comments, describing every option and what it means. For more information, please see the function. Please note: when we say “local” here, we mean on the same web page as the HTML code. ParameterWhat it DoesValid OptionsDataSrcTells the code where the data file is locatedLeave blank if the data file is in the same folder as the HTML code. Otherwise, put the URL of the data file. The current URL for the “remote” data file option is is the name of the data fileIn order to read the data file remotely, the data file has in a slightly different format than if it is read locally. Therefore, we change the name to indicate the different format. The valid options areDigitalLibraryJSON.htm – for the local fileDigitalLibraryJSONP.htm - for the remote filecallMethodThe way we are accessing the dataThere are three options. local – uses the local-only file formatremote – uses the remote form of the file formattest – this is for testing your HTML code locally. It is often handy to work with the page locally. This option loads three rows of test data which I hard-coded in the load routine. The buildList function in the script.js file is the heart of the list generation code. This code is extensively commented (There are actually more lines of comment than code.)The list building is contained in the $.each… loop. In this loop, the code goes through each resource in the list, formats those elements from template, and inserts them into the unordered list (called theList.)02981325Figure SEQ Figure \* ARABIC 4, Simplest Template00Figure SEQ Figure \* ARABIC 4, Simplest Templateleft478155$.each( Source, function( index, value ){ var resourceName = value.resourceName; var resourceLink = value.resourceLink; var arow; arrow=formatString.format('<li><a href="{0}" title="{1}">{1}</a></li>', value.resourceLink, value.resourceName); $( "#mainList" ).append(arow );}Example OutputItem OneItem twoItem three00$.each( Source, function( index, value ){ var resourceName = value.resourceName; var resourceLink = value.resourceLink; var arow; arrow=formatString.format('<li><a href="{0}" title="{1}">{1}</a></li>', value.resourceLink, value.resourceName); $( "#mainList" ).append(arow );}Example OutputItem OneItem twoItem threeFeel free to change the template to make the page match the look and feel of your Intranet and tastes. Your template can be as simple or complex as you wish. See REF _Ref477257316 \h Figure 4, Simplest Template for the most basic template possible.Understanding Template CodeHow the list appears depends on your template. The template is the HTML code that used to specify the formatting and structure of the data from the data file. The data is in an array of objects. The objects have properties (I call them elements in the comments) that have the information for that specific element. It may help you to think of each object as a row in the spreadsheet, and each element or property corresponds to column values for that row.The template, then, is the code that is wrapped around each item from the list of data from the data file.To make building the HTML for each item easier, create a JavaScript array. I append each statement to the array by using a push command.I use placeholders in the HTML for the values that are coming from the data file (the elements.) Those placeholders consist of a curly brackets around a number like so {0}. Examplehtml.push('<li class="{8}">');This statement is adding the text “<li class=”{8}”> to the array html. It is putting the placeholder {8} to stand for category (object. FormattedResourceType)Once all the code is added to our array, we convert the array into a single string with the command. var formatString =html.join('');I then assign local variables to each element, to make it a little easier to read. An example isvar resourceName =value.resourceName;We then use the string format function to replace all of the placeholders with the actual values. String.format(value1,value2,value3…)The string.format takes the string and substitutes each instance of {0} with the value1, and then each instance of {1} with value2, and so forth. Given our example above, if we were writing out the ASABE Online technical Library, our html would read <li class ="Other Trusted Databases">The last step is to append the newly created code to the list by invoking $("#mainList" ).append(arow );If this seems horribly complicated or confusing, look at the code. Nearly every line is commented, and I’ve tried to make it as clear as I can. Also, you don’t have to understand this unless you have to create a new template. In the future, I hope devise a better templating solution that would simplify modification. That would be in the future, though.If you need help, please let me know at Andrew.m.neely@. I would be happy to help, although this is not my only project and any help has to be given as time allows.StylingThe default template builds a nice box around each resource and uses the resource’s logo to help users visually identify the resource.You are free to ignore our styling. All styling are in the style.css file. Some of the styling is for the base page, but we’ll focus on the styling statements for the list and search features. The classes and id’s which pertain to the search and list feature areRscLogo – Styles the logo imagename – The resource’s namepublisher – The publisher and publisher’s abbrv. title –Is for styling the category headers. list – this is the wrapper around the whole resource that provides the border and background.Also, several items are identified in the css file by their id. They are:theList – this is the styling of the list itselfhiddensearchBox – This is for the search box.Tips and HelpTestingWhile you can double-click on a HTML file on your desktop and the browser will display it, browsers will not reach out and pull in the data when not running from a web server. To facilitate your local integration, I’ve added a “test” option for the callMethod argument in the GetListData routine. With this option enabled, the code will allow you to test on your desktop with three rows of data so you can test your design and formatting without having to copy it to a web server. left242570var data =JSON.parse('[{"sortOrder":"1","resourceName": …00var data =JSON.parse('[{"sortOrder":"1","resourceName": … If you wish to modify the test data, it is in the getData function in the script.js file. The line is The list is in JSON( JavaScript Object Notation) format. Each row is in curly brackets (e.g. {}) The format is {“Attribute1”:”Value1”,”Attribute2”:”Value2”…} Please refer to REF _Ref477348101 \h Figure 1, List of Elements for a list of proper values for the attributes. Note: this is case sensitive. Appendix A, Source CodeWe’re providing the full contents of the source HTML and JavaScript files at the time of this guide. These are for reference purposes. If you wanted to use these, save the HTML code as index.htm and the JavaScript code as script.js. The HTML code expects to find the script.js file in the script folder.HTML CODE<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <html><head><meta content="text/html;charset=utf-8" http-equiv="Content-Type"><meta http-equiv="Cache-control" content="no-store"><meta content="utf-8" http-equiv="encoding"><!--Include statements. Theses are links to JavaScript libraries that are needed in order to automate the list generation. If you don't want to pull them from Google and JQuery's web sites, feel free to download them and put them in a local folder--><script type ="text/javascript" src=""></script><script type ="text/javascript" src=""></script><link rel ="stylesheet" type="text/css" href=""/><link rel="stylesheet" type="text/css" href="css/style.css"><!--This is where the code to load the lists resides, along with the search and filtering functions. You can put this code in the head of the document, but keeping it in a separate file makes it much easier to maintain. --><script type="text/javascript" src="scripts/script.js"></script><!--Change the Title to reflect the Title of your page<--><title>WV BPH Digital Library</title><!--This is required, do not change. It starts a series of JavaScript commands to build the list and make the page pretty<--><script type="text/javascript"> $(document ).ready(function() { docReady(); }); </script></head><body id="libBody"><!--This is the WV BPH Logo. Feel free to change it to your logo--><img src="Images/BPHlogo.png" alt="Bureau for Public Health" class="headerPic"><!--This is the logo to WV's Digital Library. It can be removed or replaced--><img src="Images/digitalLibraryLogo.png" alt="Bureau for Public Health" class="headerPic"><!--This is the text that appears below the image. It is not needed and can be changed. I am aware that these statements may no longer be accurate--><p id="subtitleblock">The Public Health Digital Library is a program of the <a href="">NPCHO</a> and is funded by public health departments and the <a href="">National Library of Medicine</a>.</p><!--This displays the help button above the filter button. This is a link to a help page I created. Note: the linking is assigned in the JavaScript, so if you change the ID you'll break the link.--><img src="Images/needhelp.png" class="imageLink" id="helpLink"/><!--At it core, the digital library is nothing but a list of resources. Since it is rather a large list, I provide two methods for the users to drill down to find the content they are looking for. * Filtering hides all resources that do not match the selected type * Search - Search allows the user to search through the resource for words or phrases representing the topics in which they are interested. The search feature searches the name, publisher, and description fields of the resource list. This only searches the list of resources. While others found these features helpful, they are in no way required for your implementation--><!--The code that powers the filter toggle finds it by its id, so if you change the id, you must change the code. The code only shows or hides the "FilterOptions" div--><button id="FilterToggle" type="button" class="centering">Show Filtering Options</button><!--This is the list of filtering options available. The code uses the id property to show/hide the element. Note: There is only one that is constant. The rest are loaded when the list of resources are loaded.--> <div id ="FilterOptions" class="centerDiv" style="display:none;"><!--Heading of the box--><h3 class="heading">Filtering Options</h3><!--help text--><p class="normalSpacing"><strong>Please Note:</strong> The following Options are to help you find resources on this list. A search for a topic only searches the information displayed on this page. This page does not pass your search to any of the several databases listed here.</p><p class="heading">Show What Kind of resources? You may select from the following:</p><!-- The id property is used in the code --><form action="" id="ResourceTypeForm"><input type="radio" name ="ResourceType" id ="ResourceTypeAll" value="All" onclick="filterClick('ShowAll');" checked='checked' autocomplete="off">All Resources <br/></form></div><!--The search block has to be in the same div as the list it's searching. If you move things around keep that in mind.--> <div id="theList"><!--This button toggles the Search box Same warnings as the filter button about the id property--><button id="searchToggle" type="button" class="centering">Show Search Options</button><!--This is the search box. Once again, don't change the id property without modifying the code--><div class="centerDiv" id="SearchBox" style="display:none;"><h3 class="heading">Search</h3><p id="searchBlock" class="heading" >You can search on description, resource name, or publisher</p><p><strong>Note:</strong> Currently the search feature changes the resource type to &quot;All Resources&quot; before searching.</p><!--Same warning about the id of the textbox. This is where you type in the search words or phrases.--><input type="text" id ="hiddensearchBox" ></div><!--------------------------------------------THIS IS THE LISTThe list of resources appear here. It is loaded by the buildList function --> <ul id ="mainList" class="list" ></ul></div><!-- All resources use the client's public IP to authenticate the user, except for CLSI. CLSI requires a user name and password. This is a kludge to assist the end user by telling the user name and password when they click on CLSI. So when the user clicks on the link, the software presents a dialog box containing this information. Of course, you would replace WV's user name and password with your own. Seeing that the password is very weak, I see no problem in including it here since a reasonably astute five year old could hack it.--><div id="clsiDlg" style="display:none;" title="CLSI"><p>CLSI requires a user name and password in order to access the protected resources. </p><br/><p><span style="font-weight:bold;font-size:14pt;color:blue;">User Name</span>: WV<br/><span style="font-weight:bold;font-size:14pt;color:blue;">Password</span>: WV123</p><br/><p>If you have any problems accessing this resource, please let us know as soon as possible</p></div></body></html>JavaScript Codefunction docReady(){/* Some browsers don't support the string.format function, so if it's missing, we add it here.*/ if (!String.prototype.format) { String.prototype.format = function() { var args = arguments; return this.replace(/{(\d+)}/g, function(match, number) { return typeof args[number] != 'undefined' ? args[number] : match; }); }; } // End of string Prototype code SetUpSearchAndFilterFeatures(); /********************** This is the heart of the dynamic loading of the library list ************************/ GetListData(); /* This puts the link on the help button */ $("#helpLink").click(function(){ $("#libBody").fadeOut(); window.location = "help.htm"; });}//end doc readyfunction SetUpSearchAndFilterFeatures(){ /* This code powers the search function. This code runs every time the user types in the box (when the finger is removed from the key) */ $("#hiddensearchBox").keyup(function(event) { //libraryList.search($("#hiddensearchBox").val()); $("#theList li").show(); $("#theList li").filter(function(){ var items=$(this).text().toUpperCase(); var returnVal =items.indexOf($("#hiddensearchBox").val().toUpperCase())>-1; return !returnVal; }).hide(); }); /* This code fires every time the FilterToggle button is clicked */ $("#FilterToggle").click(function(){ FilterOptionClick(); }); /* This code fires every time the searchToggle button is clicked */ $("#searchToggle").click(function(){ searchToggleClick(); });}function searchToggleClick (){//Fades the SearchBox in or out $("#SearchBox").fadeToggle(); /* We change the text in the search toggle button. * When hidden, say "Show Search Options" * When Shown, say "Hide Search Options" We are also hiding or showing the box, and resetting the options (i.e. setting #ResourceTypeAll = all) */ if ($("#searchToggle").html()=="Show Search Options") { $("#searchToggle").html('Hide Search Options'); $("#ResourceTypeAll").prop("checked", true); filterClick('ShowAll'); $("#FilterToggle").html('Show Filtering Options'); $("#FilterOptions").hide(); } else { $("#searchToggle").html('Show Search Options'); $("#hiddensearchBox").val(''); $("li:hidden").show(); }}/* Function to show/hide the Filter Option box */function FilterOptionClick(){ if ($("#FilterToggle").html()=="Show Filtering Options") { $("#FilterToggle").html('Hide Filtering Options'); if ($("#searchToggle").html()=='Hide Search Options') { searchToggleClick(); } } else { $("#ResourceTypeAll").prop("checked",true); filterClick('ShowAll'); $("#FilterToggle").html('Show Filtering Options'); } $("#FilterOptions").fadeToggle();}/* This function builds the list.*/function GetListData(){ /* DataSrc is the location of the data file. The data file contains the JavaScript Object Notation (JSON) of the Digital Library Project. This is where the script gets the information to create the page. For local file in the same folder, leave this blank. the URL for the central page is Note: test ignores this option.*/ var DataSrc=''; /* DataName is the name of the data file. the file name is ignored for test. default file name for local DigitalLibraryJSON.htm default file name for remote DigitalLibraryJSONP.htm*/ var DataName='DigitalLibraryJSONP.htm'; /*callMethod is the method the system uses to retrieve the data. We have three different methods to load data. Local uses a locally (same web server) version of the data. The remote option uses our centralized version of the data, and the test option loads three rows of test data so the tester can test on a desktop, if the other methods do not work for you, due to security settings.. Those values are: * For local testing only, 'test' * For the local file 'local' * For Remote file, use 'remote' */ var callMethod ='remote'; /* GetData get pulls the data into the data variable. The Source variable receives parsed data. we use a setter function to do bypass a limitation in the callback function of AJAX. The Source becomes a list of objects.*/ getData(DataSrc,DataName,callMethod); /* note: getData will fire the BuildList after it gets the data. */}function buildList (Source){ /************************************************************************ Basic operation 1. The code reaches out and grabs the DigitalLibraryJSON.htm file. This file contains the structured data for the list. The file is in JavaScript Object Notation (JSON) format, which is JavaScript's native format. Currently, the code expects to find the file on the same web page that this file is located. We plan on hosting the file on a central web server, so the list will automatically pull the most recent data. That data, however, has to be in JSONP format to work. The location of the file is defined by the DataSrc variable. 2. The code loads the data into the Source variable. Source is a list of objects. Each row objects have the structure and meaning. row.sortOrder This is the field we sort by. This way, we can determine the exact order. This field is not displayed. row.resourceType This is the category we use when filtering row.resourceName This is the name of the resource row.resourceLink This is the URL to the resource that is used in the hyperlinks. row.publisherName This is the full name of the publisher. row.publisherAbbreviation This is the abbreviation of the publisher's name row.description this is the text that explains what the resource is row.imageName This is the file name of image to display for the resource. 3. We have a template for each row. The values above are plugged in to the template to generate the list. I used the string.format function to make this easier. This allows us to use a place-holder for the value. The placeholder is a number in curly brackets, i.e {0} means the first field to replace. Here are the index numbers for the data element we're using. Index Item -------------------------- 0 - resourceType 1 - resourceName 2 - resourceLink 3 - publisherName 4 - publisherAbbreviation 5 - description 6 - Image Source 7 - Image Name 8 - FormattedResourceType *************************************************************************/ /*This global variable will hold the URL to CLSI so we can pass it to the popup dialog.*/ var CLSILink=""; /* This variable contains the path to the image folder in which the logo graphics are stored. Change it to suite your local configuration */ var ImageSrc ='images/'; /*We then invoke the Sort function so the data is in a known order. */ Source.sort( function(first, second) { if (first.sortOrder < second.sortOrder) { return -1; } if (first.sortOrder > second.sortOrder) { return 1; } return 0; }); /*Since the items are sorted on Category, we watch to see when the category changes to modify the list. Therefore, this variable must be outside the $.each function scope.*/ var category =''; var ResourceTypeClass=''; /* The $.each function is going to iterate through all rows in the Source variable. For each row, the function takes the template, inserts the data and adds it to our list. Notes: - Each resource item in the library is stored in an unordered list. - The search facility uses CSS class names to identify a resource type, publisher, and description for filtering. Inside the List element, we add paragraphs and images for the resource list. - Most of the resources are just a straight anchor (i.e. <a href...) but some links may require additional processing (I'm looking at you, CLSI), therefore I add a layer of abstraction to facilitate this. */ $.each( Source, function( index, value ){ /* html is an array variable to hold our output HTML. Using an array makes the code cleaner, easier to read, and less error prone than doing a series of string concatenations. I flatten the array into a string after building.*/ var html=[]; /************************************** The Overview of the row template The final html that's displayed will be like the example below. I've represented each item (let's call it a field) in the row by teh placeholder {field}. When what the code inserts depends on the value of a field, I put that explanation in brackets like this [conditional]. The Resource Link field shows you where it goes. We process this later, so the representation in the template note below is not syntactically correct. <li class ="{Resource Type} title">{ Resource Name}</li> <li class="{ Resource Type}"> [If an image name is provided]{ Resource Link - see note above} <img src={Image Source}{Image Name} alt="{Resource Name} Logo"/><p><strong>Name: </strong>{Resource Link}<span class="name">{Resource Name}</span></p> [If publisher is provided] <p><strong>Publisher: </strong><span class="publisher">{Publisher Name}</span></p> <p><strong>Description: </strong><span class="description">{description}</span></p> </li>*/ /*Check to see if the Category Changed?*/ if (category != value.resourceType) { /* For new categories, we add the title of the category as an item in the list. We also add that item to out filter list.*/ html.push('<li class="{8} title">{0}</li>'); /*We change the Sentinel value to the current category. This lets us detect a category change, assuming the list is sorted by category*/ category = value.resourceType; //We filter out the characters that would cause CSS to complain. ResourceTypeClass=category.replace(/\s/g, ""); /*We add category to the filter list, embedding code to run when its clicked passing the category name. */ $("#ResourceTypeForm").append( '<input type="radio" name ="ResourceType" id ="ResourceType{0}" onclick ="filterClick(\'{0}\');" value="{0}">{1} <br>'.format(ResourceTypeClass,category)); } /* Each Element get's it own list item. */ html.push('<li class="{8}">'); //If we have an image file name if (value.imageName.length>0) { /*we add the code to display the image, giving the alternative text of the Resource Name Logo, resouce name is the resourceName element*/ html.push('<a {2}><img class ="RscLogo" src={6}{7} alt="{1} Logo"></a>'); } //Add The resource Name. We create a link for the name. html.push('<strong>Name: </strong><a {2}><span class="name">{1}</span></a>'); //If there is a publisher's name if(value.publisherName.length>0) { /* If we don't have a publisher's abbrv. then don't put in the parenthesis around it.*/ if (value.publisherAbbreviation.length>0){ html.push('<p><strong>Publisher: </strong><span class="publisher">{3} ({4})</span></p>');} else{ html.push('<p><strong>Publisher: </strong><span class="publisher">{3} {4}</span></p>');} } //If we have a description if (value.description.length>0) { //Add the description information. html.push('<p class="normalSpacing"><strong>Description: </strong><span class="description">{5}</span></p>'); } html.push('</li>'); /*Flatten array into a string This takes our array, and builds a single string.*/ var formatString =html.join(''); /*Pull data from array into variables, so special handling can override the data values in the speical handling code below.*/ var resourceType=value.resourceType; var resourceName =value.resourceName; var resourceLink = value.resourceLink; var publisherName=value.publisherName; var publisherAbbreviation=value.publisherAbbreviation; var description=value.description; var imageName=value.imageName; /*Some resources need special handling. Put those cases here*/ //Pubmed has an embedded link to Pubmed Central. if (resourceName=='PubMed') { description +='<p><a href="">PubMed Central</a> is a free full-text archive of biomedical and life sciences journal literature at the U.S. National Institutes of Health&#39;s National Library of Medicine (NIH/NLM). This is only a subset of what is available through PubMed.</p>'; } //CLSI has a popup menu. replace the url with JavaScript onclick if (resourceName=="Clinical Laboratory Standards") { /* We populate CLSILink with the URL of the resource dynamically, so we use the URL in the JSON file. */ CLSILink= resourceLink; resourceLink='href="#" onclick =clsiLink(); event.preventDefault();return false;'; } else { resourceLink='href="{0}"'.format(resourceLink); } //Insert the values into the template var arow=formatString.format(resourceType,resourceName,resourceLink,publisherName,publisherAbbreviation,description,ImageSrc,imageName,ResourceTypeClass); //Add the Newly minted row into our list $( "#mainList" ).append(arow ); });//end each}function getData(sourceAdd,sourceFile,callMethod){ var targetURL =sourceAdd+sourceFile; if (callMethod=='local') { $.get( targetURL, function( data ) { buildList(data); },'json'); } else { if (callMethod =='test') { /*Test data consists of three rows of data for local testing.*/ var data =JSON.parse('[{"sortOrder":"1","resourceName": "PubMed","resourceType": "PubMed Databases","publisherName": "US National Library of Medicine, National Institutes of Health","publisherAbbreviation": "NLM, NIH","description": "PubMed comprises more than 23 million citations for biomedical literature from MEDLINE, life science journals, and online books. Citations may include links to full&#8722;text content from PubMed Central and publisher web sites.","resourceLink": "","beginningYear": "","openAccess": "","impactFactor": "","imageName": "pubmed.png"},{"sortOrder":"1","resourceName": "TOXNET Toxicology Data Network","resourceType": "PubMed Databases","publisherName": "US National Library of Medicine","publisherAbbreviation": "NLM","description": "National Library of Medicine&#39;s Databases on toxicology, hazardous chemicals, environmental health, and toxic releases.","resourceLink": "","beginningYear": "","openAccess": "","impactFactor": "","imageName": "nlmlogo.gif"},{"sortOrder":"1","resourceName": "","resourceType": "PubMed Databases","publisherName": "U.S. National Institutes of Health","publisherAbbreviation": "NIH","description": " is a registry and results database of publicly and privately supported clinical studies of human participants conducted around the world. Learn more about clinical studies and about this site, including relevant history, policies, and laws.","resourceLink": "","beginningYear": "","openAccess": "","impactFactor": "","imageName": "-logo.png"}]'); buildList(data);}else{ $.ajax({ url:targetURL, crossDomain:true, jsonp : false, jsonpCallback:'jsonCallback', cache:'true', dataType: 'jsonp', success: function(data){buildList(data);} }); //$.getJSON(targetURL +'?callback=?', function (data) { rtn = data; }); } }}function SetSource(data){ buildList(data);}function clsiLink(){ $("#clsiDlg").dialog({ modal: true, width:500, buttons: { OK: function() { $( this ).dialog("close"); window.location = CLSILink; } }, position: { my: 'top', at: 'top+150' } });}function filterClick(ClassStr){ if (ClassStr=='ShowAll') { $("li:hidden").show(); } else { $("li:visible").hide(); $("." + ClassStr).show(); }} ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download