-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_design.html
152 lines (141 loc) · 8.82 KB
/
index_design.html
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title>DPLA Metadata Visualization</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="This web application was created by Geoffrey Potter and Shengwei Wang in Fall 2015 for INF 385T: Metadata Generation and Infastructure" /> <meta name="description" content="Accordian spry asses and original template created by Codify Design Studio." /> <meta name="description" content="Javascript, D3, CSS and continued html devolpment by the Design and Programming team mentioned above." /> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script> <link rel="stylesheet" type="text/css" href="SpryAssets/SpryAccordion.css" /> <script type="text/javascript" src="d3/d3.js"></script> </head> <body> <div class="container"> <div class="bannerArea"> <div class="toplogo">DPLA Metadata Visulaization</div> <div class="bannerNav"> <h1>Collection Profile Name <select id="mySelect" name="collectionSelect" onchange="collChange(this.value)" tabindex="0"> <option value="0" selected>Select A Collection</option> </select> Number of Items</h1> </div> <div class="bannerNav" align="right"> <a href="#" onclick="SpryAccordion1.openPanel(0); return false;" class="SelectPanelTab">Required Fields</a> <a href="#" onclick="SpryAccordion1.openPanel(1); return false;" class="SelectPanelTab">Recommended Fields</a> <a href="#" onclick="SpryAccordion1.openPanel(2); return false;" class="SelectPanelTab">Optional Fields</a> </div> </div> <div class="navigationArea"> <div id="SpryAccordion1" class="Accordion" tabindex="1"> <div class="AccordionPanel" id="required"> <div class="AccordionPanelTab" id="required">Required Fields</div> <div class="AccordionPanelContent" id="rquired"> <!-- BEGIN Required Fields Code Text Here --> <div class="contentleft" id="title"> <h1>Title Field</h1> <!-- BEGIN D3 code here for TITLE box and bar --> <p> </p> <!-- BEGIN D3 code here for list of failed TITLE entries --> <p class="EmptyList" id="titleList">The following items have empty TITLE fields.</p> <!-- END D3 code here for TITLE --> </div> <!-- END Filler Text --> <!-- BEGIN Filler Text. Insert Rights Field here --> <div class="contentright" id="rights"> <h1>Rights Field</h1> <!-- BEGIN D3 code here for RIGHTS box and bar --> <p> </p> <!-- BEGIN D3 code here for list of failed RIGHTS entries --> <p class="EmptyList" id="titleList">The following items have empty RIGHTS fields.</p> <!-- END D3 code here for RIGHTS --> </div> <!-- END Filler Text --> </div> </div> <div class="AccordionPanel" id="recommended"> <div class="AccordionPanelTab" id="recommended">Recommended Fields</div> <div class="AccordionPanelContent" id="recommended"> <div class="acontent"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliq,uam, nunc eget euismod ullamcorper, lectus nunc ullam corper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Lorem ipsum dolor sit amet.</p> <p>Tempus, nunc arcumollis enim, eu aliqu mam erat nullan non nibh consecteuer malesum adavelit. Nam ante nulla, interdum vel, tristique ac, condimentum non, tellus. Proin ornare feugiat nisl. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, Suspendisse dolor nisl, ultrices at, eleifend vel, consequat at, dolor. Vivamus auctor leo vel dui. Aliquam erat volutpat. Phasellus nibh.</p> </div> </div> </div> <div class="AccordionPanel" id="optional"> <div class="AccordionPanelTab" id="optional">Optional Fields</div> <div class="AccordionPanelContent" id="optional"> <div class="acontent"> <p>Tempus, nunc arcumollis enim, eu aliqu mam erat nullan non nibh consecteuer malesum adavelit. Nam ante nulla, interdum vel, tristique ac, condimentum non, tellus. Proin ornare feugiat nisl. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, Suspendisse dolor nisl, ultrices at, eleifend vel, consequat at, dolor. Vivamus auctor leo vel dui. Aliquam erat volutpat. Phasellus nibh.</p> </div> </div> </div> </div> </div> <div class="contentArea"> <div class="contentleft"> <img src="images/default-placeholder-300x300.png" width="100" border="0" class="imageright" /> <h1>Key</h1> <p>Non consequattempus, nunc arcu mollis eu aliqu mam erat nullam non nibh consectetuer malesum adamvelit. Nam ante nulla, interdum vel, tristique ac, condimentum non, tellus. Proin ornare feugiat nisl.</p> <p>Suspendisse dolor nisl, ultrices at, eleifend vel, consequat at, dolor. Viva mus auctor leo vel dui. Aliquam erat volutpat. Phasellus nibh.</p> </div> <div class="contentright"> <img src="images/default-placeholder-300x300.png" width="100" border="0" class="imageright" /> <h1>About this Project</h1> <p>Lorem ipsum dolor sit amet, consectetueradipis cing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper lec.</p> </div> <div style="clear:both;"></div> </div> <div style="clear:both;"></div> <div class="footerArea"> <div class="copyright">Created Fall 2015 For 385T: Metadata Generation and Infastructure. Designed and Programmed by Geoffrey Potter and Shengwei Wang.</div> </div> </div> <script type="text/javascript"> <!-- var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:false, defaultPanel:0}); //--> function addOption(text,value){ var obj=document.getElementById('mySelect'); obj.options.add(new Option(text,value)); } d3.json("list.json",function(d){ var i=0; console.log(d); for(k in d.collectionlist){ addOption(d.collectionlist[i].fileName,d.collectionlist[i].data); i++; } }) function collChange(val){ d3.json(val,function(d){ var propertyNames=Object.getOwnPropertyNames(d.collMetadataDetail.collectionVolume); //getNames var volume=[d.collMetadataDetail.itemCount]; var usage=[d.collMetadataDetail.itemCount]; var name=["itemCount"] propertyNames.forEach(function(dd){ //for each category, push one value into the arrary volume.push(d.collMetadataDetail.collectionVolume[dd]); usage.push(d.collMetadataDetail.collectionUsage[dd]); name.push(dd); }) for(var j in name){ var k=name[j]; var obj1=document.getElementById(k+"1"); if(obj1==null) continue; var obj2=document.getElementById(k+"2"); var obj3=document.getElementById(k+"3"); obj1.textContent=d.collMetadataDetail.itemCount-d.collMetadataDetail.collectionVolume[k]; obj2.textContent=d.collMetadataDetail.collectionVolume[k]; obj3.innerHTML=""; for(var i in d.itemDetail){ if(d.itemDetail[i].attrVolume[k]==0) obj3.innerHTML+=(d.itemDetail[i].itemId+"<br/>"); } } }) } </script> </body></html>