implement options

kis · Oct 1, 2016 · 4058698 · 4058698
1 parent a8404b7
commit 4058698
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/example/index.html b/example/index.html
@@ -5,11 +5,26 @@
 		<link rel="stylesheet" type="text/css" href="../scale.css">
 	</head>
 	<body ng-controller="main">
-		<scale data="data" theme="default"></scale>
+		<scale data="data" 
+			   width="50" 
+			   height="10"
+			   block-width="20"
+			   theme="default">
+		</scale>
 
-		<scale data="data" theme="purple"></scale>
+		<scale data="data" 
+			   width="40" 
+			   height="10"
+			   block-width="20"
+			   theme="purple">
+		</scale>
 
-		<scale data="data" theme="grey"></scale>
+		<scale data="data" 
+			   width="30"
+			   height="10"
+			   block-width="20" 
+			   theme="grey">
+		</scale>
 
 		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
 		<script src="../scale.js"></script>

diff --git a/example/index.js b/example/index.js
@@ -8,7 +8,7 @@ angular.module('myApp', ['scale']).controller('main', ['$scope', function($scope
 		var value = Math.floor(Math.random() * (SCALE_HEIGHT - 1) + 1);
 
 		$scope.data.push({
-			value: value 
+			value: value
 		});
 	}
 }]);
diff --git a/scale.js b/scale.js
@@ -42,12 +42,19 @@ angular.module('scale', ['ng']).directive('scale', ['$templateCache', function($
     link: function(scope, element, attrs) {
       scope.theme = attrs.theme || 'default';
 
-      var SCALE_WIDTH = 50,
-          SCALE_HEIGHT = 10,
-          BLOCK_WIDTH = 20;
+      var SCALE_WIDTH = parseInt(attrs.width) || 50,
+          SCALE_HEIGHT = parseInt(attrs.height) || 10,
+          BLOCK_WIDTH = parseInt(attrs.blockWidth) || 20;
+
+      scope.blockStyle = {
+        width: BLOCK_WIDTH + 'px',
+        height: BLOCK_WIDTH + 'px'
+      };
 
       scope.rowBlocks = new Array(SCALE_HEIGHT);
-      scope.marks = scope.data;
+
+      var initData = angular.copy(scope.data);
+      scope.marks = initData.splice(initData.length - SCALE_WIDTH, initData.length);
 
       scope.calcStyle = function(keyBlock, keyMark) {
         var i = keyBlock,
@@ -70,7 +77,7 @@ angular.module('scale', ['ng']).directive('scale', ['$templateCache', function($
 }]).run( [ '$templateCache' , function( $templateCache ) {
   var template = '<div class="ruler-container {{theme}}">' + 
     '<div class="ruler-row" ng-repeat="(keyMark, mark) in marks track by $index">' +
-      '<div class="mark" ng-class="{\'painted\': $index > mark.value, \'empty\': $index < mark.value}" ng-repeat="(keyBlock, block) in rowBlocks track by $index">' +
+      '<div class="mark" ng-style="blockStyle" ng-class="{\'painted\': $index > mark.value, \'empty\': $index < mark.value}" ng-repeat="(keyBlock, block) in rowBlocks track by $index">' +
         '<div class="line" ng-if="$index == mark.value && keyMark < marks.length - 1" ng-style="calcStyle(keyBlock, keyMark)"></div>' +
       '</div>' + 
     '</div>' +