towry
3/22/2015 - 5:22 AM

copy-ninja.html

copy-ninja.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .circle {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: cyan;
}
</style>
</head>
<body>
	<div class="circle"></div>

	<script>
var copyNinja = {
  init: function (d) {
    this.ele = $(d);
    this.boxshadow = [];
    
    this.initEvent();
  },
  
  getColor: function () {
    return '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
  },
  
  getSize: function () {
    var width = this.ele.width();
    var max = width + 50;
    var min = 10;
    
    return Math.floor(Math.random() * max + min);
  },
  
  getXY: function () {
    var w = window.innerWidth || document.documentElement.offsetWidth;
    var h = window.innerHeight || document.documentElement.offsetHeight;
    console.log('what ' + h);
    return {
      x: Math.floor(Math.random() * w + 10),
      y: Math.floor(Math.random() * h + 10)
    }
  },
  
  getBoxShadow: function () {
    return this.boxshadow.join(', ');
  },
  
  newBoxShadow: function () {
    var c = this.getColor();
    var s = this.getSize();
    var x = this.getXY();
    
    this.boxshadow.push(x.x + 'px ' + x.y + 'px ' + '0 ' + s + 'px ' + c);
  },
  
  initEvent: function () {
    var self = this;
    
    this.ele.on('click', self.clickHandler());
    
    $(document).on('click', function () {
      self.ele.css('box-shadow', '');
      self.boxshadow = [];
    })
  },
  
  clickHandler: function () {
    var self = this;
    
    return function (e) {
      e.stopPropagation();

      self.newBoxShadow();
      var boxs = self.getBoxShadow();
      console.log(boxs);
      self.ele.css('box-shadow', boxs);
    }
  }
}

copyNinja.init('.circle');

	</script>
</body>
</html>