responsive를 위한 AngularJS

반응형으로 만드려다보니 css와 javascript 부분이 변환해야할 경우가 생긴다.

AngularJS를 쓸 경우에는 이런 식으로 코드를 짜도 되고, 자바스크립트로만 할 경우, 밑 코드만 봐도 javascipt로 변환하는 건 어렵지 않을꺼 같다.

참조 : https://github.com/paul-hammant/angular_instead_of_media_queries

 function ResponsiveDemoCtrl($scope, $window) {
    $scope.oneColumn = false;
    $scope.width = 0;
    $scope.height = 0;
    $scope.leftMarginStyle = {};
    $scope.rightMarginStyle = {};
    $scope.middleStyle = {};

    $scope.updateWidth = function() {
        $scope.width = $window.innerWidth;
    }

    $scope.updateHeight = function() {
       $scope.height = $window.innerHeight;
    }
    
    $scope.columnAdjustments = function() {
        if ($scope.width < 768) {
            $scope.oneColumn = true;
            var mid = $scope.width - 30;
            $scope.leftMarginStyle = { width: '15px', maxWidth: '15px' };
            $scope.middleStyle = { width: mid + 'px', maxWidth: mid + 'px', };
            $scope.rightMarginStyle = { width: '15px', maxWidth: '15px', verticalAlign: 'text-top' };
        } else if ($scope.width >= 1024 ){
            $scope.oneColumn = false;
            var mid = 614;
            var margin = ($scope.width - 614) * 0.5;
            $scope.leftMarginStyle = { width:  margin + 'px' };
            $scope.middleStyle = { width: mid + 'px', maxWidth: mid + 'px', };
            $scope.rightMarginStyle = { width: margin + 'px', verticalAlign: 'text-top' };
        } else {
            $scope.oneColumn = false;
            var pc20 = Math.round($scope.width * 0.2);
            var pc60 = Math.round($scope.width * 0.6)
            $scope.leftMarginStyle = { width:  pc20 + 'px' };    
            $scope.middleStyle = { width: pc60 + 'px', maxWidth: pc60 + 'px', };    
            $scope.rightMarginStyle = { width: pc20 + 'px', verticalAlign: 'text-top' };    
        }
    }    
    
    $scope.updateWidth();
    $scope.updateHeight();
    $scope.columnAdjustments();

    $window.onresize = function () {
        $scope.updateWidth();
        $scope.updateHeight();
        $scope.columnAdjustments();
        $scope.$apply();
    }
  }