Angular floating blocks, random color, random shape

Angular floating blocks, random color, random shape.markdown

Angular floating blocks, random color, random shape

Angular floating blocks, random color https://github.com/boo0330/floating-blocks

A Pen by Nate Cheng on CodePen.

License.

index.html

%div{"ng-app" => "demoapp"}
  %div{"ng-controller" => "mainCtrl"}
    .row
      .cal.fix{"ng-class" => "{fix: isFixed, move:!isFixed}"}
        Rectangle
        - 20.times do 
          %float-block
    .row{:style => "margin-top:60px;"}
      .cal.fix{"ng-class" => "{fix: isFixed, move:!isFixed}"}
        Random
        - 20.times do
          %float-block{:shape => "random", :width => "40"}
    .row{:style => "margin-top:60px;"}
      .cal.fix{"ng-class" => "{fix: isFixed, move:!isFixed}"}
        Circle
        - 20.times do
          %float-block{:radius => "30", :shape => "circle"}
    .row{:style => "margin-top:60px;"}
      .cal.fix{"ng-class" => "{fix: isFixed, move:!isFixed}"}
        Square
        - 20.times do
          %float-block{:shape => "square", :width => "30"}

script.js

var demoApp = angular.module("demoapp", []);

demoApp.directive("floatBlock", ["$timeout", function($timeout) {
  return {
    restrict: 'E',
    template: "<span></span>",
    replace: true,
    scope: {
      shape: "@",
      radius: "@",
      timer: "@",
      width: "@",
      height: "@"
    },
    link: function(scope, element, attrs) {
      scope.default = {};

      scope.default.shapes = ["circle", "square", "rectangle"];
      scope.default.shapes.ops = 3;

      scope.default.shape = "rectangle";
      scope.default.radius = 30;
      scope.default.width = 50;
      scope.default.height = 20;
      scope.default.timer = 1000;

      scope.config = {};
      scope.config = scope.default;

      //console.log(scope.shape);

      if (scope.shape) {

        scope.config.shape = scope.shape;
        //scope.config.radius=0;

        if (scope.shape == "random") {

          var op = Math.floor(Math.random() * scope.default.shapes.ops);
          scope.config.shape = scope.default.shapes[op];

          scope.config.radius = Math.floor(Math.random() * scope.default.radius * 2);
          scope.config.width = Math.floor(Math.random() * scope.default.width);
          scope.config.height = Math.floor(Math.random() * scope.default.height);
        }

        //console.log(scope.config.shape);
        if (scope.config.shape == "circle") {
          scope.radius == null ? "" : scope.config.radius = scope.radius;
          scope.config.width = scope.config.radius;
          scope.config.height = scope.config.radius;
        } else if (scope.config.shape == "square") {
          scope.config.radius = 0;
          scope.width == null ? "" : scope.config.width = scope.width;
          scope.config.height = scope.config.width;
          console.log(scope);
          console.log(scope.width);

        } else {
          // Default or Rectangle
          scope.config.radius = 0;
          scope.width == null ? "" : scope.config.width = scope.width;
          scope.height == null ? "" : scope.config.height = scope.height;
        }
      } else {
        // Default or Rectangle

        scope.width == null ? "" : scope.config.width = scope.width;
        scope.height == null ? "" : scope.config.height = scope.height;
        scope.config.radius = 0;
      }

      scope.randomColor = function() {
        var rgba = 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + Math.random() * 0.4 + ')';
        return rgba;
      }

      //console.log(scope.randomColor());

      element.css("background-color", scope.randomColor());

      var rect = element[0].getBoundingClientRect();

      var top = rect.top;
      var left = rect.left;

      element.css({
        width: scope.config.width + "px",
        height: scope.config.height + "px",
        borderRadius: scope.config.radius + "px"
      });
      scope.setNewColor = function() {
        element.css("background-color", scope.randomColor());
        $timeout(function() {
          scope.setNewColor();
        }, 5000);
      }
      scope.setNewPos = function(sTop, sLeft) {
        var plusOrMinusX = 1;
        var plusOrMinusY = 1;

        if (sLeft < 15)
          plusOrMinusX = 1
        else if (sLeft > window.innerWidth - 50)
          plusOrMinusX = -1;
        else
          plusOrMinusX = Math.random() < 0.5 ? -1 : 1;

        if (sTop < 15)
          plusOrMinusY = 1;
        else if (sTop > window.innerHeight - 20)
          plusOrMinusY = -1;
        else
          plusOrMinusY = Math.random() < 0.5 ? -1 : 1;

        var x = Math.floor(Math.random() * 10) * plusOrMinusX;
        var y = Math.floor(Math.random() * 10) * plusOrMinusY;

        var ntop = sTop + y;
        var nleft = sLeft + x;

        element.css({
          top: ntop,
          left: nleft,
        });
        $timeout(function() {
          scope.setNewPos(ntop, nleft);
        }, Math.random() * 1500)
      }

      scope.setNewPos(top, left);
      scope.setNewColor();
    }
  }
}]);

demoApp.controller("mainCtrl", ["$scope", "$timeout", function($scope, $timeout) {
  console.log("controller...");

  $scope.isFixed = true;
  /*var area = angular.element(document.querySelector('.cal'));
  area.removeClass("move");
  area.removeClass("fix");
  area.addClass("fix");
  $timeout(function(){
    area.removeClass("fix");
    area.addClass("move");
    
  }, 1000);
  */
  $timeout(function() {
    $scope.isFixed = false
  }, 2000);
}]);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.css

body {
  color: #afafaf;
}

.cal {
  display: inline-block;
  width: 800px;
  height: 100px;
}

.cal span {
  /*position:none;*/
  
  width: 50px;
  height: 20px;
  background-color: rgba(255, 255, 0, 0.3);
  /*position: absolute;*/
  
  transition: all 2s ease 0s;
  top: 0;
  /* start out at position 0 */
}

.move span {
  position: absolute;
}

.fix span {
  display: inline-block;
}