Advertisement
Guest User

Untitled

a guest
Feb 19th, 2013
292
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function harlem_shake() {
  2.     var MIN_HEIGHT = 30;
  3.     var MIN_WIDTH = 30;
  4.     var MAX_HEIGHT = 350;
  5.     var MAX_WIDTH = 350;
  6.     var PATH_TO_SONG = "//assets5.thrillist.com/audio/harlem-shake.ogg";
  7.     var CSS_BASE_CLASS = "mw-harlem_shake_me"
  8.     var CSS_FIRST_CLASS = "im_first";
  9.     var CSS_OTHER_CLASSES = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
  10.     var CSS_STROBE_CLASS = "mw-strobe_light";
  11.     var PATH_TO_CSS = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
  12.     var FILE_ADDED_CLASS = "mw_added_css"
  13.  
  14.         function addCSS() {
  15.             var css = document.createElement("link");
  16.             css.setAttribute("type", "text/css");
  17.             css.setAttribute("rel", "stylesheet");
  18.             css.setAttribute("href", PATH_TO_CSS);
  19.             css.setAttribute("class", FILE_ADDED_CLASS);
  20.             document.body.appendChild(css);
  21.         }
  22.  
  23.         function removeAddedFiles() {
  24.             var addedFiles = document.getElementsByClassName(FILE_ADDED_CLASS);
  25.             for (var i = 0; i < addedFiles.length; i++) {
  26.                 document.body.removeChild(addedFiles[i]);
  27.             }
  28.         }
  29.  
  30.         function flashScreen() {
  31.             var flash = document.createElement("div");
  32.             flash.setAttribute("class", CSS_STROBE_CLASS);
  33.             document.body.appendChild(flash);
  34.             setTimeout(function () {
  35.                 document.body.removeChild(flash);
  36.             }, 100);
  37.         }
  38.  
  39.         function size(node) {
  40.             return {
  41.                 height: node.offsetHeight,
  42.                 width: node.offsetWidth
  43.             }
  44.         }
  45.  
  46.         function withinBounds(node) {
  47.             var nodeFrame = size(node);
  48.             return (nodeFrame.height > MIN_HEIGHT && nodeFrame.height < MAX_HEIGHT && nodeFrame.width > MIN_WIDTH && nodeFrame.width < MAX_WIDTH);
  49.         }
  50.  
  51.         function posY(elm) {
  52.             var test = elm;
  53.             var top = 0;
  54.             while ( !! test) {
  55.                 top += test.offsetTop;
  56.                 test = test.offsetParent;
  57.             }
  58.             return top;
  59.         }
  60.  
  61.         function viewPortHeight() {
  62.             var de = document.documentElement;
  63.             if ( !! window.innerWidth) {
  64.                 return window.innerHeight;
  65.             } else if (de && !isNaN(de.clientHeight)) {
  66.                 return de.clientHeight;
  67.             }
  68.             return 0;
  69.         }
  70.  
  71.         function scrollY() {
  72.             if (window.pageYOffset) {
  73.                 return window.pageYOffset;
  74.             }
  75.             return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  76.         }
  77.     var vpH = viewPortHeight();
  78.     var st = scrollY();
  79.  
  80.     function isVisible(node) {
  81.         var y = posY(node);
  82.         return (y >= st && y <= (vpH + st));
  83.     }
  84.  
  85.     function playSong() {
  86.         var audioTag = document.createElement("audio");
  87.         audioTag.setAttribute("class", FILE_ADDED_CLASS);
  88.         audioTag.src = PATH_TO_SONG;
  89.         audioTag.loop = false;
  90.         audioTag.addEventListener("canplay", function () {
  91.             setTimeout(function () {
  92.                 shakeFirst(firstNode);
  93.             }, 500);
  94.             setTimeout(function () {
  95.                 stopShakeAll();
  96.                 flashScreen();
  97.                 for (var i = 0; i < allShakeableNodes.length; i++) {
  98.                     shakeOther(allShakeableNodes[i]);
  99.                 }
  100.             }, 15500);
  101.         }, true);
  102.         audioTag.addEventListener("ended", function () {
  103.             stopShakeAll();
  104.             removeAddedFiles();
  105.         }, true);
  106.         audioTag.innerHTML = "<p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p>"
  107.         document.body.appendChild(audioTag);
  108.         audioTag.play();
  109.     }
  110.  
  111.     function shakeFirst(node) {
  112.         node.className += " " + CSS_BASE_CLASS + " " + CSS_FIRST_CLASS;
  113.     }
  114.  
  115.     function shakeOther(node) {
  116.         node.className += " " + CSS_BASE_CLASS + " " + CSS_OTHER_CLASSES[Math.floor(Math.random() * CSS_OTHER_CLASSES.length)];
  117.     }
  118.  
  119.     function stopShakeAll() {
  120.         var shakingNodes = document.getElementsByClassName(CSS_BASE_CLASS);
  121.         var regex = new RegExp('\\b' + CSS_BASE_CLASS + '\\b');
  122.         for (var i = 0; i < shakingNodes.length;) {
  123.             shakingNodes[i].className = shakingNodes[i].className.replace(regex, "");
  124.         }
  125.     }
  126.     var allNodes = document.getElementsByTagName("*");
  127.     var firstNode = document.getElementById('thrillist-header');
  128.     if (thisNode === null) {
  129.         console.warn("Could not find a node of the right size. Please try a different page.");
  130.         return;
  131.     }
  132.     addCSS();
  133.     playSong();
  134.     var allShakeableNodes = [];
  135.     for (var i = 0; i < allNodes.length; i++) {
  136.         var thisNode = allNodes[i];
  137.         if (withinBounds(thisNode)) {
  138.             allShakeableNodes.push(thisNode);
  139.         }
  140.     }
  141. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement