-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
317 lines (288 loc) · 9.71 KB
/
index.html
1
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Timeline of composers</title> <link rel="icon" type="image/ico" href="favicon_timeline.ico"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css" /> <script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script> <script type="text/javascript" src="jscolor/jscolor.js"></script> <script src="xinspect.js"></script> <script src="timeline.js"></script> <style type='text/css'> /* margin: top right bottom left */ /* General */ body { background-color:#666; margin: none; } form { float:left; margin:0 10px 0 10; } .outer { text-align:center; overflow:auto; margin:auto; padding:0; } .inner { position:relative; display:inline-block; margin:auto; overflow:hidden; } legend {padding:0.2em 0.5em; font-size:90%; } /* Header */ svg { float:left; } .text { fill:#666; stroke:lightblue; stroke-width:2; } .sliderfield { height:60px; width:350px; border:0; margin:15px 0 0 0; } .slider { width:97%; height:30px; margin:5px; } .linebreakwrapper { float:left; } #lowsvg { margin:21px 20px 0 0; } #highsvg { margin:21px 0 0 20px; } #spacer { float:left; min-width:20px; max-width:100px;} #legendlow { float:left; border:1px solid lightblue; } #legendhigh { float:right; border:1px solid lightblue; } .legendtext { font-variant:small-caps; color:white; } /* Timeline */ /* Infobox */ iframe { position:relative; display:block; margin:0 auto; overflow:hidden; } /* Footer */ .controlfield { height:60px; width:350px; padding:10px 10px; border:1px solid lightblue; } .button { float:left; margin:0 10px 0 0; } .ui-widget { } /* jQuery css-class. Stuff may be added here. */ #inputtext { float:left; width:64%; margin:0 10px 0 0} #legendcomposer { text-align:center; border:1px solid lightblue;} #legendtemplate { text-align:center; border:1px solid lightblue;} </style></head><body><div class="outer"> <div class="inner" id="header"> <div class="linebreakwrapper"> <svg class="image" id="lowsvg" width="124" height="70"> <text class="text" id="lowtext" x="0" y="49" font-size="62">1680</text> </svg> <form> <fieldset id="sliderfieldlow" class="sliderfield" > <legend id="legendlow"> <span class="legendtext">Beginning of time</span> </legend> <div class="sliderdiv" > <input class="slider" type='range' id='controllow' name='low' min='1000' max='1920' value='' step='1' oninput='displayYear(controllow.id, controllow.value, controlhigh.value)' /> </div> </fieldset> </form> </div> <div id="spacer"> </div> <div class="linebreakwrapper"> <form> <fieldset id="sliderfieldhigh" class="sliderfield"> <legend id="legendhigh"> <span class="legendtext">End of time</span> </legend> <div class="slider-div" > <input class="slider" type='range' id='controlhigh' name='high' min='1100' max='2020' value='' step='1' oninput='displayYear(controlhigh.id, controllow.value, controlhigh.value)' /> </div> </fieldset> </form> <svg class="image" id="highsvg" width="124" height="70"> <text class="text" id="hightext" x="0" y="49" font-size="62" >2014</text> </svg> </div> </div> </div> <div class="outer" > <div class="inner" id="container"></div></div><iframe id='infoframe' src="info.html" width="1010" height="420" frameborder="0" name='infoframe' seamless='seamless' scrolling="no" ></iframe> <!-- onload="resizeIframe(this)" --><br /><div class="outer"> <div class="inner" id="footer"> <form> <fieldset class="controlfield"><legend id="legendcomposer">Composer</legend> <div class="inner"> <input id='inputtext' name='inputtext' /> <input class="button" type="button" id="buttonAdd" value="Add" onClick="addComposerReload()" /> </div> </fieldset> </form> <form> <fieldset class="controlfield"><legend id="legendtemplate">Template</legend> <div class="inner"> <input class="button" id="buttonLoad" type="button" value="Load" onClick="" disabled="true"/> <input class="button" id="buttonSave" type="button" value="Save" onClick="" disabled="true"/> <input class="button" id="buttonReset" type="button" value="Reset" onClick="resetComposers()"/> </div> </fieldset> </form> </div> </div> <script>function resetComposers() { var r = confirm("Clear all composers?"); if (r == true) { composers = []; build(); open("info.html", "infoframe"); } else { }}function addComposerReload(){ var link = inputtext.value.replace(/ /g, '_'); if (composers.indexOf(link) == -1) { //Check is composer already exists on timeline getExtract(link).done(function(data) { if (data.query) { pages = data.query.pages; pageid = Object.getOwnPropertyNames(pages); extract = pages[pageid].extract; if(extract) { composers.push(link); build(); } else { alert('No wikipedia page found for: ' + inputtext.value); } } // Fallthrough if data.query is undefined / false (submitted with empty string) }); } else { alert('Already on timeline: ' + inputtext.value); }}function displayYear(control, low, high){ if (low >= high-100) { controllow.value = controlhigh.value-100; } /* if (high <= low) { controlhigh.value = controllow.value+1; } */ lowtext.innerHTML=low; hightext.innerHTML=high; build()}function buildTimeline(composers, low, high, expandFactor){ for (i in composers) { var c = composers[i]; if (cc[c]) { if (cc[c].link || cc[c].title || cc[c].dob || cc[c].dod) { paintComposerBox(cc[c].link, cc[c].title, cc[c].dob, cc[c].dod, low, high, expandFactor); //console.log('Painted cbox from memory: ' + c ); continue; } } getPage(c).done(function(data) { pages = data.query.pages; pageid = Object.getOwnPropertyNames(pages); title = pages[pageid].title; var link = title.replace(/ /g, '_'); var paran = title.search(/\(/); if (paran != -1){ title = title.substring(0, paran-1); } //try { rv = pages[pageid].revisions[0]; //} //catch(err) { // console.log(err); //} content = rv["*"]; var bornAndDied = getBornAndDied(link, content); dob = bornAndDied.dob; dod = bornAndDied.dod; if (!(cc[link])) { cc[link] = new composer(); cc[link].link = link; cc[link].title = title; cc[link].dob = dob; cc[link].dod = dod; cc[link].wikitext = content; cc[link].dobL = bornAndDied.dobL; cc[link].dodL = bornAndDied.dodL; cc[link].pob = bornAndDied.pob; cc[link].pod = bornAndDied.pod; } paintComposerBox(link, title, dob, dod, low, high, expandFactor); console.log('Painted cbox from net: ' + link); }); }} function buildAddList() { function getCompList() { return $.getJSON(URL, { action:"parse", prop:"links", page:"List_of_composers_by_name", }) } getCompList().done(function(data) { linkObjArray = data.parse.links; var links = []; for (i in linkObjArray) { var obj = linkObjArray[i]; links.push(obj["*"]); } $(function() { $( "#inputtext" ).autocomplete({ source: links }); }); $("#inputtext").keyup(function(event){ if(event.keyCode == 13){ //$("#addButton").click(); addComposerReload(); } }); }); }function fitScale() { var span = controlhigh.value - controllow.value; var w = window.innerWidth; return w/span; }function fitSliders() { var w = window.innerWidth; //var cwl = $( '#sliderfieldlow' ).width(); //var cwh = $( '#sliderfieldhigh' ).width(); //console.log('Window: ' + w + ' cwl: ' + cwl + ' cwh: ' + cwh); set = (w/2) - 195; if (set > 700) { set = 700; } if (set < 155) { set = w-225; } $('.sliderfield').width(set); }function build(){ // Reset container $('#container').empty(); // Set slider labels lowtext.innerHTML = controllow.value; hightext.innerHTML = controlhigh.value; // Fit to window var s = fitScale(); // Fit sliders to window width fitSliders(); //Build the axis timeAxis(controllow.value, controlhigh.value, s); //Add composers buildTimeline(composers, controllow.value, controlhigh.value, s);}function getPrototypeData(obj) { console.log(cc); /*for (prop in cc) { if (!cc.hasOwnProperty(prop)) { continue;} console.log(cc[prop]); }*/}/****Main****//*var composers=["Franz_Liszt", "Johann_Sebastian_Bach", "Felix_Mendelssohn", "Wolfgang_Amadeus_Mozart", "Pyotr_Ilyich_Tchaikovsky", "Frédéric_Chopin", "Joseph_Haydn", "Ludwig_van_Beethoven", "Edvard_Grieg", "Alexander_Borodin"]; *//* var composers=["Clara_Schumann", "Amy_Beach", "Fanny_Mendelssohn", "Lili_Boulanger", "Cécile_Chaminade", "Nadia_Boulanger", "Ethel_Smyth", "Élisabeth_Jacquet_de_La_Guerre", "Louise_Farrenc", "Isabella_Leonarda", "Ruth_Crawford_Seeger", "Barbara_Strozzi", "Elfrida_Andrée", "Agathe_Backer-Grøndahl", "Germaine_Tailleferre", "Johann_Sebastian_Bach", "Edvard_Grieg", "Carl_Philipp_Emanuel_Bach", "Aphex_Twin", "Alexander_Borodin"]; */var composers=["Johann_Sebastian_Bach", "Edvard_Grieg", "Carl_Philipp_Emanuel_Bach", "Aphex_Twin", "Alexander_Borodin", "Hildegard_of_Bingen"];//var composers=["Johann_Sebastian_Bach"];if (composers == undefined) { var composers = [];}controlhigh.max = CURRENTYEAR;// Set startvalues for sliders controllow.value = 1680;controlhigh.value = 2014; build();window.addEventListener('resize', build);// Add data for search-completionbuildAddList();</script></body></html>