Potentiometer

by Dawid Ryłko

HTML

<div class="box">
</div>

<div ng-app='demo'>
    <h3>Potentiometer</h3>
    <div ng-controller='controller'>
      <pre>{{ sprint | json }}</pre>
      <pre>{{ skok_w_dal | json }}</pre>
      
      <column-potentiometer
        values="sprint"
        marker="sprint.marker"
        style="float:left; margin-right: 10%;"
      ></column-potentiometer>
      <column-potentiometer
        values="skok_w_dal"
        marker="skok_w_dal.marker"
        style="float:left;  margin-right: 10%;"
      ></column-potentiometer>
      <column-potentiometer
        values="skok_o_tyczce"
        marker="skok_o_tyczce.marker"
        style="float:left;"
      ></column-potentiometer>
    </div>
</div>

SCSS

body {
  padding-bottom: 1000px;
}

@mixin gradient($from, $to) {
  /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: -webkit-linear-gradient($from 0%, $to 100%);
  background: -moz-linear-gradient($from 0%, $to 100%);
  background: -o-linear-gradient($from 0%,$to 100%);
  background: linear-gradient($from 0%, $to 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=0 ); /* IE6-9 */
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  @include gradient(rgba(255, 165, 0, 0), rgba(255, 165, 0, 1));
}

.bar {
  width: 60px;
  height: 300px;
  background: green;
  position:relative;
}
.top-gradient {
  @include gradient(rgba(255, 165, 0, 0), rgba(255, 165, 0, 1));
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.lower-fill {
  width: 100%;
  height: 0;
  background: red;
  position: absolute;
  bottom: 0;
  left: 0;
  
  &::before {
    content: '';
    @include gradient(rgba(255, 165, 0, 1), rgba(255, 165, 0, 0));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.higher-fill {
  width: 100%;
  height: 0;
  background: orange;
  position: absolute;
  bottom: 0;
  left: 0;
}
.marker {
  width: 100%;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
}
.label {
  position: absolute;
  width: 100%;
  height: 30px;
  line-height: 30px;
  top: -15px;
  left: 0;
  z-index: 100;
  text-align: center;
}

TypeScript

console.clear();
angular.module('demo', [])
.directive('columnPotentiometer', function() {
    return {
        restrict: 'E',
        scope: {
        	values: '=',
          marker: '=?'
        },
        template: `
        	<div class="bar">
          	<div class="lower-fill" ng-style="{ height: percentageValue(lowerHeight) }">
              <div class="label">
                {{ values.lower }}
              </div>
            </div>
            <div
              class="higher-fill"
              ng-style="{ height: percentageValue(higherHeight), bottom: percentageValue(lowerHeight) }"
            >
              <div class="label">
                {{ values.higher }}
              </div>
            </div>
            <div 
            	class="marker"
            	ng-if="marker"
            	ng-style="{ height: percentageValue(markerPosition) }"
						>
              <div class="label">
                {{ marker }} >
              </div>
            </div>
            <div class="top-gradient" ng-style="{ height: percentageValue(1 - higherHeight - lowerHeight) }"></div>
          </div>
        `,
        link: function (scope) {

        	var range = Math.abs(scope.values.top - scope.values.bottom);
          var lower = scope.values.lower - scope.values.bottom;
          var higher = scope.values.higher - scope.values.bottom;

          scope.lowerHeight = Math.abs(lower) / range;
          scope.higherHeight = Math.abs(higher) / range - scope.lowerHeight;
          
          if (scope.marker) {
          	var inv = (scope.values.bottom < scope.values.top) ? true : false;
            var marker = scope.values.marker - scope.values.bottom;
            
            scope.markerPosition = Math.abs(marker) / range;
            
            if (inv && scope.values.marker > scope.values.top) {
            	console.log('more');
          		scope.markerPosition = 1;
            }
          
          	if (!inv && scope.values.marker > scope.values.bottom) {
  ...