add jshint, amplification scroll by cycle number

Author: adonespitogo

.jshintrc

@@ -0,0 +1 @@
+{}

frontend/javascripts/app/controllers/amplification_chart_ctrl.js.coffee

@@ -23,6 +23,7 @@ window.ChaiBioTech.ngApp.controller 'AmplificationChartCtrl', [
 
     Experiment.get(id: $stateParams.id).$promise.then (data) ->
       maxCycle = helper.getMaxExperimentCycle data.experiment
+      $scope.maxCycle = maxCycle
       $scope.chartConfig.axes.x.ticks = helper.Xticks maxCycle
       $scope.chartConfig.axes.x.max = maxCycle
       $scope.experiment = data.experiment

frontend/javascripts/app/directives/ampli-slider.coffee

@@ -5,40 +5,59 @@ window.App.directive('ampliSlider', [
     restrict: 'E'
     replace: true
     require: 'ngModel'
+    scope:
+      cycles: '='
     templateUrl: 'app/views/directives/ampli-slider.html'
     link: ($scope, elem, attrs, ngModel) ->
 
-      ngModel.$setViewValue 0
+      hasInit = false
+      CYCLES = 0
 
-      held = false
-      oldX = 0
-      oldWidth = 0
-      newX = 0
-      slider_offset = elem.find('.slider-holder-offset')
-      slider_width = elem.css('width').replace /px/, ''
+      init = ->
+        hasInit = true
 
-      getOffsetWidth = ->
-        slider_offset.css('width').replace('px', '')
+        CYCLES = $scope.cycles-2
+        ngModel.$setViewValue 0
 
-      updateModel = ->
-        ngModel.$setViewValue(getOffsetWidth()/slider_width);
-        $scope.$apply()
-
-      elem.on 'mousedown', (e) ->
-        held = true
-        oldX = e.pageX
-        oldWidth = getOffsetWidth()
-        TextSelection.disable()
-
-      $window.$(document).on 'mousemove', (e) ->
-        return if !held
-        toadd = (e.pageX - oldX)
-        newWidth = (oldWidth*1 + toadd*1)
-        slider_offset.css('width', newWidth + 'px')
-        updateModel()
-
-      $window.$(document).on 'mouseup', (e) ->
         held = false
-        TextSelection.enable()
+        oldX = 0
+        oldWidth = 0
+        newX = 0
+        slider_offset = elem.find('.slider-holder-offset')
+        slider_width = elem.css('width').replace /px/, ''
+        calibration_width = slider_width / (CYCLES)
+
+        getOffsetWidth = ->
+          slider_offset.css('width').replace('px', '')
+
+        updateModel = (num_cycle) ->
+          console.log num_cycle
+          ngModel.$setViewValue(num_cycle);
+          $scope.$apply()
+
+        elem.on 'mousedown', (e) ->
+          held = true
+          oldX = e.pageX
+          oldWidth = getOffsetWidth()
+          TextSelection.disable()
+
+        $window.$(document).on 'mousemove', (e) ->
+          return if !held
+          toadd = (e.pageX - oldX)
+          newWidth = (oldWidth*1 + toadd*1)
+          wRatio = newWidth / slider_width
+          wRatio = if wRatio < 0 then 0 else wRatio
+          wRatio = if wRatio > 1 then 1 else wRatio
+          cycle = Math.floor(wRatio * (CYCLES))
+          w = cycle * calibration_width
+          slider_offset.css('width', w + 'px')
+          updateModel cycle
+
+        $window.$(document).on 'mouseup', (e) ->
+          held = false
+          TextSelection.enable()
+
+      $scope.$watch 'cycles', (cycles) ->
+        init() if cycles and !hasInit
 
 ]);

frontend/javascripts/app/views/experiment/amplification-chart.html

@@ -59,7 +59,7 @@
                   <div class="zoom-text">
                     <b>ZOOM</b>
                   </div>
-                  <ampli-slider ng-model="ampli_zoom"></ampli-slider>
+                  <ampli-slider ng-model="ampli_zoom" cycles="maxCycle"></ampli-slider>
                 </div>
               </div>
               <div class="col-md-6 ampli-scrollbar-container">

frontend/tasks/javascripts.js

@@ -3,6 +3,7 @@ var templateCache = require('gulp-angular-templatecache');
 var htmlmin = require('gulp-html-minifier');
 var concat = require('gulp-concat');
 var coffee = require('gulp-coffee');
+var jshint = require('gulp-jshint');
 var babel = require('gulp-babel');
 var rename = require('gulp-rename');
 var replace = require('gulp-replace');
@@ -126,7 +127,14 @@ gulp.task('copy-js-to-tmp', ['clean-js', 'templates'], function () {
          .pipe(gulp.dest('.tmp/js'));
 });
 
-gulp.task('concat-js', ['clean-js', 'coffee', 'es6', 'copy-js-to-tmp', 'templates'], function () {
+gulp.task('jslint', ['clean-js', 'coffee', 'es6', 'copy-js-to-tmp', 'templates'], function () {
+
+  return gulp.src('./frontend/javascripts/app/**/*.js')
+         .pipe(jshint())
+         .pipe(jshint.reporter('default'));
+});
+
+gulp.task('concat-js', ['clean-js', 'coffee', 'es6', 'copy-js-to-tmp', 'templates', 'jslint'], function () {
   var files = vendorFiles.concat(appFiles);
 
   for (var i = files.length - 1; i >= 0; i--) {

package.json

@@ -21,13 +21,15 @@
     "gulp-cssnano": "^2.0.0",
     "gulp-hash-filename": "^1.0.1",
     "gulp-html-minifier": "^0.1.6",
+    "gulp-jshint": "^2.0.0",
     "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.5.4",
     "gulp-sass": "^2.0.4",
     "gulp-strip-debug": "^1.0.2",
     "gulp-uglify": "^1.4.0",
     "gulp-util": "^3.0.6",
     "gulp-watch": "^4.3.5",
+    "jshint": "^2.8.0",
     "require-dir": "^0.3.0",
     "shelljs": "^0.5.3"
   },