Rev 17770 | Details | Compare with Previous | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 17748 | georgesk | 1 | |
| 2 | /* Script to enhance the interactivity of the periodic table */ |
||
| 3 | |||
| 4 | function add_interaction(){ |
||
| 17770 | georgesk | 5 | var elements = jQuery("div.element"); |
| 17748 | georgesk | 6 | elements.each(function(i, elt){ |
| 17770 | georgesk | 7 | elt = jQuery(elt); |
| 17748 | georgesk | 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(); |
||
| 17770 | georgesk | 12 | var struct = elt.find(".str0").html(); |
| 17748 | georgesk | 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; |
||
| 17770 | georgesk | 19 | p = jQuery("<p>").text("Element: " + symbol); |
| 17748 | georgesk | 20 | o.append(p); |
| 17770 | georgesk | 21 | p = jQuery("<p>").text("Atomic number: " + Z); |
| 17748 | georgesk | 22 | o.append(p); |
| 17770 | georgesk | 23 | p = jQuery("<p>").text("Molar mass: " + mass); |
| 17748 | georgesk | 24 | o.append(p); |
| 17770 | georgesk | 25 | p = jQuery("<p>").html("Electronic structure: " + struct); |
| 17748 | georgesk | 26 | o.append(p); |
| 27 | o.dialog(); |
||
| 17770 | georgesk | 28 | var top = evt.clientY; |
| 17748 | georgesk | 29 | if (top > 250){ |
| 30 | /* the element is low enough, let us animate above */ |
||
| 31 | top -= 250; |
||
| 32 | } else { |
||
| 33 | top += 60; |
||
| 34 | } |
||
| 17770 | georgesk | 35 | var left = evt.clientX; |
| 36 | if (left > 340){ |
||
| 17748 | georgesk | 37 | /* the element is right enough, let us go to the left */ |
| 17770 | georgesk | 38 | left -= 340; |
| 17748 | georgesk | 39 | } else{ |
| 40 | left +=50; |
||
| 41 | } |
||
| 42 | o.parents(".ui-dialog").animate( |
||
| 43 | {top: top+"px", left: left+"px"}); |
||
| 44 | } |
||
| 17770 | georgesk | 45 | }(jQuery("#one_element"))); |
| 17748 | georgesk | 46 | }); |
| 17770 | georgesk | 47 | jQuery("#wait").fadeOut(); |
| 17748 | georgesk | 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 | |||
| 17773 | georgesk | 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 | |||
| 17748 | georgesk | 93 | function tryLocal(){ |
| 17773 | georgesk | 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")]); |
||
| 17748 | georgesk | 98 | } |
| 99 | |||
| 100 | function tryRemote(){ |
||
| 17773 | georgesk | 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 | ]); |
||
| 17748 | georgesk | 106 | } |
| 107 | |||
| 108 | window.onload = function(){ |
||
| 17773 | georgesk | 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 | }) |
||
| 17748 | georgesk | 132 | }; |