[Summary view] [Print] [Text view]

   1  /**
   2   * @provides javelin-behavior-konami
   3   * @requires javelin-behavior
   4   *           javelin-stratcom
   5   */
   6  
   7  JX.behavior('konami', function() {
   8    var sequence = [ 38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 13 ];
   9    var seen = [];
  10  
  11    JX.Stratcom.listen('keyup', null, function(e) {
  12      if (!sequence) {
  13        return;
  14      }
  15  
  16      seen.push(e.getRawEvent().keyCode);
  17  
  18      while (seen.length) {
  19        var mismatch = false;
  20        for (var i = 0; i < seen.length; ++i) {
  21          if (seen[i] != sequence[i]) {
  22            mismatch = true;
  23            break;
  24          }
  25        }
  26        if (!mismatch) {
  27          break;
  28        }
  29        seen.shift();
  30      }
  31  
  32      if (seen.length == sequence.length) {
  33        sequence = seen = null;
  34        activate();
  35      }
  36    });
  37  
  38    var prefixes = { '-webkit-': 1, '-moz-': 1, '-o-': 1, '-ms-': 1, '': 1 };
  39  
  40    function generateCSS(selector, props) {
  41      var ret = selector + '{';
  42      for (var key in props) {
  43        ret += key + ':' + props[key] + ';';
  44      }
  45      return ret + '}';
  46    }
  47  
  48    function generateAllCSS(selector, props) {
  49      var more_props = {};
  50      for (var key in props) {
  51        for (var prefix in prefixes) {
  52          more_props[prefix + key] = props[key];
  53        }
  54      }
  55      return generateCSS(selector, more_props);
  56    }
  57  
  58    function modifyCSS(rule, key, value) {
  59      rule.setProperty(key, value, '');
  60    }
  61  
  62    function modifyAllCSS(rule, key, value) {
  63      for (var prefix in prefixes) {
  64        modifyCSS(rule, prefix + key, value);
  65      }
  66    }
  67  
  68    var top_rule;
  69  
  70    function activate() {
  71      var matrix = document.createElement('style');
  72      matrix.textContent = [
  73        generateAllCSS('html', {
  74          background: '#000'
  75        }),
  76        generateAllCSS('body', {
  77          perspective: '2048px',
  78          background: 'transparent'
  79        }),
  80        generateAllCSS('*', {
  81          'transform-style': 'preserve-3d'
  82        }),
  83        generateAllCSS('body > *', {
  84        })
  85      ].join('\n');
  86      document.head.appendChild(matrix);
  87  
  88      top_rule = matrix.sheet.cssRules[3].style;
  89  
  90      var first_event = null;
  91      document.body.addEventListener('mousemove', function(e) {
  92        if (!first_event) {
  93          first_event = {x: e.screenX, y: e.screenY};
  94        }
  95        var dx = (e.screenX - first_event.x);
  96        var dy = (e.screenY - first_event.y);
  97  
  98        var x = -(dx / window.innerWidth) * (Math.PI / 2);
  99        var y = (dy / window.innerHeight) * (Math.PI / 2);
 100        var body_rotate = 'rotateY(' + x + 'rad) rotateX(' + y + 'rad)';
 101        modifyAllCSS(top_rule, 'transform', body_rotate);
 102      }, false);
 103    }
 104  });