Difference between revisions of "Template:Loading"
From referenceTSS
m |
|||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| + | <div id="loader" class="hiddeable" style="display:none; position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 1; background: transparent;"> | ||
| + | </div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| − | + | //var image=</html>{{{loadingimage}}}<html> optional | |
| + | var cSpeed=10; | ||
| + | var cWidth=55; | ||
| + | var cHeight=55; | ||
| + | var cTotalFrames=18; | ||
| + | var cFrameWidth=55; | ||
| + | var cImageSrc='/resource_browser/images/LoaderGifs/sprites.gif'; //default but optional with Template | ||
| + | |||
| + | var cImageTimeout=false; | ||
| + | var cIndex=0; | ||
| + | var cXpos=0; | ||
| + | var cPreloaderTimeout=false; | ||
| + | var SECONDS_BETWEEN_FRAMES=0; | ||
| + | |||
| + | function startAnimation(){ | ||
| + | |||
| + | document.getElementById('loader').style.backgroundImage='url('+cImageSrc+')'; | ||
| + | document.getElementById('loader').style.width=cWidth+'px'; | ||
| + | document.getElementById('loader').style.height=cHeight+'px'; | ||
| + | |||
| + | //FPS = Math.round(100/(maxSpeed+2-speed)); | ||
| + | FPS = Math.round(100/cSpeed); | ||
| + | SECONDS_BETWEEN_FRAMES = 1 / FPS; | ||
| + | |||
| + | cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES/1000); | ||
| + | |||
| + | } | ||
| + | |||
| + | function continueAnimation(){ | ||
| + | |||
| + | cXpos += cFrameWidth; | ||
| + | //increase the index so we know which frame of our animation we are currently on | ||
| + | cIndex += 1; | ||
| + | |||
| + | //if our cIndex is higher than our total number of frames, we're at the end and should restart | ||
| + | if (cIndex >= cTotalFrames) { | ||
| + | cXpos =0; | ||
| + | cIndex=0; | ||
| + | } | ||
| + | |||
| + | if(document.getElementById('loader')) | ||
| + | document.getElementById('loader').style.backgroundPosition=(-cXpos)+'px 0'; | ||
| + | |||
| + | cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES*1000); | ||
| + | } | ||
| + | |||
| + | function stopAnimation(){//stops animation | ||
| + | clearTimeout(cPreloaderTimeout); | ||
| + | cPreloaderTimeout=false; | ||
| + | } | ||
| + | |||
| + | function imageLoader(s, fun)//Pre-loads the sprites image | ||
| + | { | ||
| + | clearTimeout(cImageTimeout); | ||
| + | cImageTimeout=0; | ||
| + | genImage = new Image(); | ||
| + | genImage.onload=function (){cImageTimeout=setTimeout(fun, 0)}; | ||
| + | genImage.onerror=new Function('alert(\'Could not load the image\')'); | ||
| + | genImage.src=s; | ||
| + | } | ||
| + | |||
| + | //The following code starts the animation | ||
| + | new imageLoader(cImageSrc, 'startAnimation()'); | ||
| + | |||
| + | $(document).ready(function() { | ||
| + | |||
| + | //var loading_image="</html>{{{loadingimage}}}<html>"; | ||
| + | |||
| + | |||
| + | |||
| + | $(document).on("click", "a", function() { | ||
| + | //this == the link that was clicked | ||
| + | var href = $(this).attr("href"); | ||
| + | if(href!=null){ | ||
| + | var url=String(href); | ||
| + | if(String(href).indexOf("resource_browser")!=-1){ | ||
| + | if(String(href).length>2){ | ||
| + | toggle_visibility('loader'); | ||
| + | |||
| + | }else{ | ||
| + | } | ||
| + | }else{ | ||
| + | } | ||
| + | }else{ | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | |||
| + | function toggle_visibility(id) { | ||
| + | var thelist = $('.hiddeable'); | ||
| + | for (var i = 0; i < thelist.length; i++) { | ||
| + | thelist[i].style.display = 'none'; | ||
| + | } | ||
| + | var e = $('#loader')[0]; | ||
| + | if(e.style.display == 'block') { | ||
| + | e.style.display = 'none'; | ||
| + | } else { | ||
| + | e.style.display = 'block'; | ||
| + | } | ||
| + | } | ||
| + | }); | ||
</script> | </script> | ||
</html> | </html> | ||
Revision as of 14:23, 20 December 2017
