extract sections/show.js

code-dot-org · Jun 27, 2019 · 2270dbb · 2270dbb
1 parent fd7384c
commit 2270dbb
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 64 deletions.
diff --git a/apps/Gruntfile.js b/apps/Gruntfile.js
@@ -520,6 +520,7 @@ describe('entry tests', () => {
     schoolInfoInterstitial:
       './src/sites/studio/pages/schoolInfoInterstitial.js',
     'scripts/stage_extras': './src/sites/studio/pages/scripts/stage_extras.js',
+    'sections/show': './src/sites/studio/pages/sections/show.js',
     'shared/_header_progress':
       './src/sites/studio/pages/shared/_header_progress.js',
     signup: './src/sites/studio/pages/signup.js',

diff --git a/apps/src/sites/studio/pages/sections/show.js b/apps/src/sites/studio/pages/sections/show.js
@@ -0,0 +1,61 @@
+const script = document.querySelector('script[data-section]');
+const sectionData = JSON.parse(script.dataset['section']);
+const {loginType, loginTypeWord, loginTypePicture, pairingAllowed} = sectionData;
+
+$(function() {
+  // Select name.
+  $('ul.students li').click(function() {
+    $('ul.students li').removeClass('selected');
+    $(this).addClass('selected');
+    $('input#user_id').val($(this).attr('id'));
+
+    if (loginType == loginTypeWord) {
+      // Clear the password.
+      $('#secret_words').val("");
+    } else if (loginType == loginTypePicture) {
+      // Deselect picture.
+      $('ul.pictures li').removeClass('selected');
+    }
+
+    // Disable the login button.
+    $('#login_button').prop('disabled', true);
+
+    // Hide the pairing checkbox
+    $('#pairing_checkbox').hide();
+
+
+    // Reveal the secret section...
+    $('#secret').hide().slideDown();
+
+    // ...and simultaneously fade in the login button.
+    $('#login_button').fadeIn();
+  });
+
+  // Select secret picture.
+  $('ul.pictures li').click(function() {
+    $('ul.pictures li').removeClass('selected');
+    $(this).addClass('selected');
+    $('input#secret_picture_id').val($(this).attr('id'));
+
+    // Show the pairing checkbox
+    if (pairingAllowed) {
+      $('#pairing_checkbox').show();
+    }
+
+    // Enable the login button.
+    $('#login_button').prop('disabled', false);
+  });
+
+  // Type something in password box.
+  $('#secret_words').keyup(function() {
+    // Show the pairing checkbox
+    if (pairingAllowed) {
+      $('#pairing_checkbox').show();
+    }
+
+    // Enable the login button.
+    $('#login_button').prop('disabled', false);
+  });
+
+  $(".section-user-sign-in").on("submit", dashboard.clientState.reset);
+});
diff --git a/dashboard/app/views/sections/show.html.haml b/dashboard/app/views/sections/show.html.haml
@@ -1,69 +1,14 @@
 - @page_title = @section.name
 
-:javascript
-
-  var loginType = "#{escape_javascript @section.login_type}";
-  var loginTypePicture = "#{Section::LOGIN_TYPE_PICTURE}";
-  var loginTypeWord = "#{Section::LOGIN_TYPE_WORD}";
-  var pairingAllowed = #{@section.pairing_allowed};
-
-  $(function() {
-    // Select name.
-    $('ul.students li').click(function() {
-      $('ul.students li').removeClass('selected');
-      $(this).addClass('selected');
-      $('input#user_id').val($(this).attr('id'));
-
-      if (loginType == loginTypeWord) {
-        // Clear the password.
-        $('#secret_words').val("");
-      } else if (loginType == loginTypePicture) {
-        // Deselect picture.
-        $('ul.pictures li').removeClass('selected');
-      }
-
-      // Disable the login button.
-      $('#login_button').prop('disabled', true);
-
-      // Hide the pairing checkbox
-      $('#pairing_checkbox').hide();
-
-
-      // Reveal the secret section...
-      $('#secret').hide().slideDown();
-
-      // ...and simultaneously fade in the login button.
-      $('#login_button').fadeIn();
-    });
-
-    // Select secret picture.
-    $('ul.pictures li').click(function() {
-      $('ul.pictures li').removeClass('selected');
-      $(this).addClass('selected');
-      $('input#secret_picture_id').val($(this).attr('id'));
-
-      // Show the pairing checkbox
-      if (pairingAllowed) {
-        $('#pairing_checkbox').show();
-      }
-
-      // Enable the login button.
-      $('#login_button').prop('disabled', false);
-    });
-
-    // Type something in password box.
-    $('#secret_words').keyup(function() {
-      // Show the pairing checkbox
-      if (pairingAllowed) {
-        $('#pairing_checkbox').show();
-      }
-
-      // Enable the login button.
-      $('#login_button').prop('disabled', false);
-    });
-
-    $(".section-user-sign-in").on("submit", dashboard.clientState.reset);
-  });
+:ruby
+  section_data = {
+    loginType: @section.login_type,
+    loginTypePicture: Section::LOGIN_TYPE_PICTURE,
+    loginTypeWord: Section::LOGIN_TYPE_WORD,
+    pairingAllowed: @section.pairing_allowed
+  }.to_json
+
+%script{src: minifiable_asset_path('js/sections/show.js'), data: {section: section_data}}
 
 #signinsection
   %h2