Subversion Repositories wimsdev

Rev

Rev 17770 | Blame | Compare with Previous | Last modification | View Log | RSS feed

  1.  
  2. /* Script to enhance the interactivity of the periodic table */
  3.  
  4. function add_interaction(){
  5.     var elements = jQuery("div.element");
  6.     elements.each(function(i, elt){
  7.         elt = jQuery(elt);
  8.         elt.css("cursor", "help");
  9.         var symbol = elt.find(".symbol").text();
  10.         var Z = elt.find(".Z").text();
  11.         var mass = elt.find(".mass").text();
  12.         var struct = elt.find(".str0").html();
  13.         elt.click(
  14.             function make_callback(o){
  15.                 return function (evt){
  16.                     var x = elt.css("top"), y = elt.css("top");
  17.                     o.html(""); /* erase all previous contents */
  18.                     var p;
  19.                     p = jQuery("<p>").text("Element: " + symbol);
  20.                     o.append(p);
  21.                     p = jQuery("<p>").text("Atomic number: " + Z);
  22.                     o.append(p);
  23.                     p = jQuery("<p>").text("Molar mass: " + mass);
  24.                     o.append(p);
  25.                     p = jQuery("<p>").html("Electronic structure: " + struct);
  26.                     o.append(p);
  27.                     o.dialog();
  28.                     var top = evt.clientY;
  29.                     if (top > 250){
  30.                         /* the element is low enough, let us animate above */
  31.                         top -= 250;
  32.                     } else {
  33.                         top += 60;
  34.                     }
  35.                     var left = evt.clientX;
  36.                     if (left > 340){
  37.                         /* the element is right enough, let us go to the left */
  38.                         left -= 340;
  39.                     } else{
  40.                         left +=50;
  41.                     }          
  42.                     o.parents(".ui-dialog").animate(
  43.                         {top: top+"px", left: left+"px"});
  44.                 }
  45.             }(jQuery("#one_element")));
  46.     });
  47.     jQuery("#wait").fadeOut();
  48. }
  49.  
  50. function jQueryIsHere(){
  51.     result = true;
  52.     try {
  53.         if (! jQuery) result = false;
  54.     }
  55.     catch(e) {
  56.         if(e.name == "ReferenceError") {
  57.             result = false;
  58.         }
  59.     }
  60.     return result
  61. }
  62.  
  63. function scriptLoader(scriptUrl){
  64.     /* copied from https://stackoverflow.com/questions/538745/how-to-tell-if-a-script-tag-failed-to-load */
  65.     return new Promise(function (res, rej) {
  66.         let script = document.createElement('script');
  67.         script.src = scriptUrl;
  68.         script.type = 'text/javascript';
  69.         script.onerror = rej;
  70.         script.async = true;
  71.         script.onload = res;
  72.         script.addEventListener('error',rej);
  73.         script.addEventListener('load',res);
  74.         document.head.appendChild(script);
  75.     })    
  76. }
  77.  
  78. function cssLoader(cssUrl){
  79.     return new Promise(function (res, rej) {
  80.         let link = document.createElement('link');
  81.         link.href = cssUrl;
  82.         link.rel = 'stylesheet';
  83.         link.type = 'text/css';
  84.         link.onerror = rej;
  85.         link.async = true;
  86.         link.onload = res;
  87.         link.addEventListener('error',rej);
  88.         link.addEventListener('load',res);
  89.         document.head.appendChild(link);
  90.     })    
  91. }
  92.  
  93. function tryLocal(){
  94.     return Promise.all([
  95.         scriptLoader("http://localhost/javascript/jquery/jquery.js"),
  96.         scriptLoader("http://localhost/javascript/jquery-ui/jquery-ui.js"),
  97.         cssLoader("http://localhost/javascript/jquery-ui/css/smoothness/jquery-ui.css")]);
  98. }
  99.  
  100. function tryRemote(){
  101.     return Promise.all([
  102.         scriptLoader("https://code.jquery.com/jquery-1.11.3.js"),
  103.         scriptLoader("https://code.jquery.com/ui/1.13.2/jquery-ui.js"),
  104.         cssLoader("https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css")
  105.     ]);
  106. }
  107.  
  108. window.onload = function(){
  109.     let p1 = new Promise((res, rej) => {
  110.         if (jQueryIsHere()) res("jQuery found immediately");
  111.         else rej("no jQuery immediately")
  112.     })
  113.         .then((msg) => {
  114.             console.log(msg);
  115.             add_interaction();
  116.         })
  117.         .catch((msg) =>{
  118.             console.log(msg);
  119.             tryLocal().then((values) => {
  120.                 console.log(values, "local scripts and css files not found");
  121.                 add_interaction();
  122.             }).catch((reason) => {
  123.                 console.log(reason);
  124.                 tryRemote().then((values) => {
  125.                     console.log(values);
  126.                     add_interaction();
  127.                 }).catch((reason) => {
  128.                     console.log(reason, "remote scripts and css files not found");
  129.                 });
  130.             });
  131.         })
  132. };
  133.