Update colour for sleep stage buttons and add way to open instruction slides in new tab

Author: mikeschaekermann

bundle.js

@@ -632,6 +632,7 @@ $.widget('crowdcurio.TimeSeriesAnnotator', {
  undefined,
  undefined,
  ],
+ instructionSlidesURL: undefined,
  features: {
  examplesModeEnabled: false,
  examples: [{
@@ -1132,8 +1133,8 @@ $.widget('crowdcurio.TimeSeriesAnnotator', {
  <button type="button" class="btn btn-default artifact" data-annotation-type="artifacts_strong">Strong Artifacts</button> \
  </div> \
  <div class="sleep_stage_panel btn-group" role="group"> \
- <button type="button" class="btn btn-default grey lighten-1 sleep_stage" data-annotation-type="sleep_stage_wake"><span class="shortcut-key">W</span>AKE<span class="shortcut-key hidden">0</span></button> \
- <button type="button" class="btn btn-default grey lighten-1 sleep_stage" data-annotation-type="sleep_stage_n1">N<span class="shortcut-key">1</span></button> \
+ <button type="button" class="btn btn-default blue lighten-1 sleep_stage" data-annotation-type="sleep_stage_wake"><span class="shortcut-key">W</span>AKE<span class="shortcut-key hidden">0</span></button> \
+ <button type="button" class="btn btn-default blue lighten-1 sleep_stage" data-annotation-type="sleep_stage_n1">N<span class="shortcut-key">1</span> Sleep</button> \
  </div> \
  <div class="submit_response_for_data_panel btn-group" role="group"> \
  <button type="button" disabled class="btn btn-default submit-response-for-data">SUBMIT ANSWER</button> \
@@ -1846,7 +1847,7 @@ $.widget('crowdcurio.TimeSeriesAnnotator', {
 
  _setupSleepStagePanel: function() {
  var activeClass = 'teal';
- var inactiveClass = 'grey lighten-1';
+ var inactiveClass = 'blue lighten-1';
  var that = this;
  $(that.element).find('.sleep_stage_panel button.sleep_stage').click(function() {
  $(that.element).find('.submit-response-for-data').prop('disabled', null);
@@ -1862,6 +1863,10 @@ $.widget('crowdcurio.TimeSeriesAnnotator', {
  .addClass(inactiveClass);
  });
 
+ if (that.options.instructionSlidesURL) {
+ $('<a href="' + that.options.instructionSlidesURL + '" target="_blank" class="btn btn-default yellow black-text">OPEN SLIDES FROM TRAINING VIDEO IN NEW TAB</a>').insertBefore($(that.element).find('.phase-indicator'));
+ }
+
  if (!that.options.training.enabled) {
  $(that.element).find('.phase-indicator').html('TESTING PHASE (NO FEEDBACK!)');
  }
@@ -3599,7 +3604,7 @@ $.widget('crowdcurio.TimeSeriesAnnotator', {
  _displaySleepStageSelection: function(annotations) {
  var that = this;
  var activeClass = 'teal';
- var inactiveClass = 'grey lighten-1';
+ var inactiveClass = 'blue lighten-1';
  var validKeys = [
  'sleep_stage_wake',
  'sleep_stage_n1',

lib/time-series-annotator.js

@@ -123,6 +123,7 @@ $.widget('crowdcurio.TimeSeriesAnnotator', {
  undefined,
  undefined,
  ],
+ instructionSlidesURL: undefined,
  features: {
  examplesModeEnabled: false,
  examples: [{
@@ -623,8 +624,8 @@ $.widget('crowdcurio.TimeSeriesAnnotator', {
  <button type="button" class="btn btn-default artifact" data-annotation-type="artifacts_strong">Strong Artifacts</button> \
  </div> \
  <div class="sleep_stage_panel btn-group" role="group"> \
- <button type="button" class="btn btn-default grey lighten-1 sleep_stage" data-annotation-type="sleep_stage_wake"><span class="shortcut-key">W</span>AKE<span class="shortcut-key hidden">0</span></button> \
- <button type="button" class="btn btn-default grey lighten-1 sleep_stage" data-annotation-type="sleep_stage_n1">N<span class="shortcut-key">1</span></button> \
+ <button type="button" class="btn btn-default blue lighten-1 sleep_stage" data-annotation-type="sleep_stage_wake"><span class="shortcut-key">W</span>AKE<span class="shortcut-key hidden">0</span></button> \
+ <button type="button" class="btn btn-default blue lighten-1 sleep_stage" data-annotation-type="sleep_stage_n1">N<span class="shortcut-key">1</span> Sleep</button> \
  </div> \
  <div class="submit_response_for_data_panel btn-group" role="group"> \
  <button type="button" disabled class="btn btn-default submit-response-for-data">SUBMIT ANSWER</button> \
@@ -1337,7 +1338,7 @@ $.widget('crowdcurio.TimeSeriesAnnotator', {
 
  _setupSleepStagePanel: function() {
  var activeClass = 'teal';
- var inactiveClass = 'grey lighten-1';
+ var inactiveClass = 'blue lighten-1';
  var that = this;
  $(that.element).find('.sleep_stage_panel button.sleep_stage').click(function() {
  $(that.element).find('.submit-response-for-data').prop('disabled', null);
@@ -1353,6 +1354,10 @@ $.widget('crowdcurio.TimeSeriesAnnotator', {
  .addClass(inactiveClass);
  });
 
+ if (that.options.instructionSlidesURL) {
+ $('<a href="' + that.options.instructionSlidesURL + '" target="_blank" class="btn btn-default yellow black-text">OPEN SLIDES FROM TRAINING VIDEO IN NEW TAB</a>').insertBefore($(that.element).find('.phase-indicator'));
+ }
+
  if (!that.options.training.enabled) {
  $(that.element).find('.phase-indicator').html('TESTING PHASE (NO FEEDBACK!)');
  }
@@ -3090,7 +3095,7 @@ $.widget('crowdcurio.TimeSeriesAnnotator', {
  _displaySleepStageSelection: function(annotations) {
  var that = this;
  var activeClass = 'teal';
- var inactiveClass = 'grey lighten-1';
+ var inactiveClass = 'blue lighten-1';
  var validKeys = [
  'sleep_stage_wake',
  'sleep_stage_n1',