Capture code refactor for new interface

Gemfile

@@ -9,15 +9,6 @@ group :mysql do
   gem 'mysql2', '~> 0.5.3'
 end
 
-# Gems used only for assets and not required
-# in production environments by default.
-group :assets do
-  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
-  # gem 'therubyracer', :platforms => :ruby
-
-  gem 'uglifier', '>= 1.0.3'
-end
-
 group :test do
   gem 'rails-controller-testing', '~> 1.0.5'
   gem 'rubocop', '~> 1.18.4'
@@ -32,6 +23,12 @@ group :development, :test do
   gem 'selenium-webdriver', '~> 3.142.7'
 end
 
+group :production do
+# See https://github.com/sstephenson/execjs#readme for more supported runtimes
+    gem 'therubyracer', :platforms => :ruby
+    gem 'uglifier', '~> 4.2'
+end
+
 gem 'bootsnap', '~> 1.7.7'
 gem 'jquery-rails'
 gem 'font-awesome-rails'

Gemfile.lock

@@ -76,6 +76,7 @@ GEM
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
     json (2.5.1)
+    libv8 (3.16.14.19)
     listen (3.6.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
@@ -169,6 +170,7 @@ GEM
     recaptcha (5.8.1)
       json
     redcarpet (3.5.0)
+    ref (2.0.0)
     regexp_parser (2.1.1)
     responders (3.0.1)
       actionpack (>= 5.0)
@@ -210,6 +212,9 @@ GEM
       sprockets (>= 3.0.0)
     terrapin (0.6.0)
       climate_control (>= 0.0.3, < 1.0)
+    therubyracer (0.12.3)
+      libv8 (~> 3.16.14.15)
+      ref
     thor (1.0.1)
     thread_safe (0.3.6)
     tzinfo (1.2.9)
@@ -258,8 +263,9 @@ DEPENDENCIES
   simplecov
   skylight
   terrapin (~> 0.6.0)
+  therubyracer
   tzinfo (~> 1.2)
-  uglifier (>= 1.0.3)
+  uglifier (~> 4.2)
   will_paginate (~> 3.3.0)
   will_paginate-bootstrap (= 0.2.5)
 

app/assets/config/manifest.js

@@ -1,7 +1,12 @@
 //= link embed.css
 //= link application.css
 //= link application.js
+//= link analyze.js
+//= link upload.js
+//= link new-interface.css
 //= link capture.css
 //= link capture.js
-//= link analyze.js
-//= link upload.js
+//= link new-interface.js
+//= link spectral-workbench/examples/new-capture/new-capture.css
+//= link spectral-workbench/examples/capture/capture.js
+//= link spectral-workbench/dist/capture.dist.js

app/assets/javascripts/application.js

@@ -13,6 +13,7 @@
 //= require jquery3
 //= require jquery_ujs
 //= require bootstrap-css/js/bootstrap.min.js
+//= require bs-stepper/dist/js/bs-stepper.min.js
 //= require getusermedia-js/dist/getUserMedia.min.js
 //= require basics.js
 //= require api.js

app/assets/javascripts/new-interface.js

@@ -0,0 +1,135 @@
+/*
+-> This is a temp file generated due to issue #665 that stops the capture graph on safari with the default stepper styles.
+-> Once #665 is resolved, we can look towards refactoring the view file to look like: 
+    https://github.com/publiclab/spectral-workbench/blob/daa5b6a74cd77ce05066d41a45160d7a332f665c/app/views/capture/index2.html.erb#L51-L54
+    https://github.com/publiclab/spectral-workbench/blob/daa5b6a74cd77ce05066d41a45160d7a332f665c/app/views/capture/index2.html.erb#L82
+    https://github.com/publiclab/spectral-workbench/blob/daa5b6a74cd77ce05066d41a45160d7a332f665c/app/views/capture/index2.html.erb#L149
+*/
+function homePage() {
+  if ($("#landing-page-content").hide()) {
+      $('html').css('background', '#ffffff');
+      $("#landing-page-content").show();
+
+      $("div#capture-page-content").hide();
+      $("div#capture-settings").hide();
+      $("div#save-page").hide();
+  }
+}
+
+function settingsPage() {
+  $('html').css('background', '#272727');
+
+  $("#heightIndicator").removeClass("capture-settings-hide");
+  $("#heightIndicator").show();
+  $("#webcam").css('pointer-events', '');
+  $("#webcam").css('opacity', '1');
+
+  $("#webcam-msg").css('pointer-events', '');
+  $("#webcam-msg").css('opacity', '1');
+
+  $("#capture-page-content").css('height','100vh');
+  $("#capture-page-content").css('width','auto');
+
+  if (($(window).width() < 391 && $(window).height() < 645) || ((window.matchMedia("(orientation: landscape)").matches) && ($(window).height() < 645)))
+  $("#capture-page-content").css('height','auto');
+
+  $("#spectrum-ex").show();
+  $("#capture-option").show();
+
+  $("#landing-page-content").hide();
+  $("div#capture-page-content").show();
+  $("div#capture-settings").hide();
+
+  $("div#save-page").hide();
+
+  window.onbeforeunload = function() { return ""; };
+}
+
+
+function capturePage() {
+  $("html, .full-strecth-block").css('background', '#272727');
+  $("#landing-page-content").hide();
+  $("#capture-option").addClass("capture-settings-hide");
+  $("#heightIndicator").addClass("capture-settings-hide");
+
+  $("div#capture-page-content").show();
+  $("div#capture-settings").show();
+
+  $("#spectrum-ex").hide();
+  $(".capture-settings-hide").hide();
+
+  $("#capture-page-content").width(1).height(1);
+  $("#webcam").css('pointer-events', 'none');
+  $("#webcam").css('opacity', '0.0');
+
+  $("#webcam-msg").css('pointer-events', 'none');
+  $("#webcam-msg").css('opacity', '0.0');
+
+  $("div#save-page").hide();
+  window.onbeforeunload = function() { return ""; };
+}
+
+function savePage() {
+  $("html, .full-strecth-block").css('background', '#272727');
+  $W.saveSpectrum();
+  $("#landing-page-content").hide();
+  $("div#capture-page-content").hide();
+  $("div#capture-settings").hide();
+  $("div#save-page").show();
+
+  window.onbeforeunload = function() { return ""; };
+}
+
+
+$(document).ready(function () {
+  $('html').css('background', '#ffffff');
+
+  $("div#capture-page-content").hide();
+  $("div#capture-settings").hide();
+  $("div#save-page").hide();
+
+  $('#testnav .btn-group button').on('click', function () {
+      $('#testnav .btn-group' ).find('button.active').removeClass('active');
+      $(this).addClass('active');
+  });
+
+  $("button#landing-page-next").on('click', function () {
+  $('#settingsbtn').trigger('click');
+  });
+
+  $("button#setting-page-next").on('click', function () {
+  $('#capturebtn').trigger('click');
+  });
+
+  $("button#capture-page-next").on('click', function () {
+  $('#savebtn').trigger('click');
+  })
+
+  var stepper = new Stepper($('.bs-stepper')[0], {
+  linear: false,
+  animation: true,
+  selectors: {
+      steps: '.step',
+      trigger: '.step-trigger',
+      stepper: '.bs-stepper'
+  }
+  });
+
+  $("#homebtn").on('click', function (params) {
+  stepper.to(1);
+  });
+  $("#landing-page-next").on('click', function (params) {
+  stepper.to(2);
+  });
+
+  $("#settingsbtn").on('click', function (params) {
+  stepper.to(2);
+  });
+  $("#setting-page-next").on('click', function (params) {
+  stepper.to(3);
+  });
+
+  $("#capturebtn").on('click', function (params) {
+  stepper.to(3);
+  });  
+})

app/assets/stylesheets/application.css

@@ -10,12 +10,14 @@
  *
  *= require bootstrap-css/css/bootstrap.min.css
  *= require bootstrap-css/css/bootstrap-responsive.min.css
+ *= require bs-stepper/dist/css/bs-stepper.min.css
  *= require nvd3/build/nv.d3.min.css
  *= require style
  *= require graph
  *= require comment
  *= require font-awesome
+ *= require spectral-workbench/dist/spectral-workbench
  *
  *= require_self
  *  require_tree .
- */
+ */