Merge pull request #100 from alphagov/add-govuk-showhide-content

Add govuk showhide content

app/assets/javascripts/application.js

@@ -1,127 +1,14 @@
-function ShowHideContent() {
-  var self = this;
-
-  self.escapeElementName = function(str) {
-    result = str.replace('[', '\\[').replace(']', '\\]')
-    return(result);
-  };
-
-  self.showHideRadioToggledContent = function () {
-    $(".block-label input[type='radio']").each(function () {
-
-      var $radio = $(this);
-      var $radioGroupName = $radio.attr('name');
-      var $radioLabel = $radio.parent('label');
-
-      var dataTarget = $radioLabel.attr('data-target');
-
-      // Add ARIA attributes
-
-      // If the data-target attribute is defined
-      if (dataTarget) {
-
-        // Set aria-controls
-        $radio.attr('aria-controls', dataTarget);
-
-        $radio.on('click', function () {
-
-          // Select radio buttons in the same group
-          $radio.closest('form').find(".block-label input[name=" + self.escapeElementName($radioGroupName) + "]").each(function () {
-            var $this = $(this);
-
-            var groupDataTarget = $this.parent('label').attr('data-target');
-            var $groupDataTarget = $('#' + groupDataTarget);
-
-            // Hide toggled content
-            $groupDataTarget.hide();
-            // Set aria-expanded and aria-hidden for hidden content
-            $this.attr('aria-expanded', 'false');
-            $groupDataTarget.attr('aria-hidden', 'true');
-          });
-
-          var $dataTarget = $('#' + dataTarget);
-          $dataTarget.show();
-          // Set aria-expanded and aria-hidden for clicked radio
-          $radio.attr('aria-expanded', 'true');
-          $dataTarget.attr('aria-hidden', 'false');
-
-        });
-
-      } else {
-        // If the data-target attribute is undefined for a radio button,
-        // hide visible data-target content for radio buttons in the same group
-
-        $radio.on('click', function () {
-
-          // Select radio buttons in the same group
-          $(".block-label input[name=" + self.escapeElementName($radioGroupName) + "]").each(function () {
-
-            var groupDataTarget = $(this).parent('label').attr('data-target');
-            var $groupDataTarget = $('#' + groupDataTarget);
-
-            // Hide toggled content
-            $groupDataTarget.hide();
-            // Set aria-expanded and aria-hidden for hidden content
-            $(this).attr('aria-expanded', 'false');
-            $groupDataTarget.attr('aria-hidden', 'true');
-          });
-
-        });
-      }
-
-    });
-  }
-  self.showHideCheckboxToggledContent = function () {
-
-    $(".block-label input[type='checkbox']").each(function() {
-
-      var $checkbox = $(this);
-      var $checkboxLabel = $(this).parent();
-
-      var $dataTarget = $checkboxLabel.attr('data-target');
-
-      // Add ARIA attributes
-
-      // If the data-target attribute is defined
-      if (typeof $dataTarget !== 'undefined' && $dataTarget !== false) {
-
-        // Set aria-controls
-        $checkbox.attr('aria-controls', $dataTarget);
-
-        // Set aria-expanded and aria-hidden
-        $checkbox.attr('aria-expanded', 'false');
-        $('#'+$dataTarget).attr('aria-hidden', 'true');
-
-        // For checkboxes revealing hidden content
-        $checkbox.on('click', function() {
-
-          var state = $(this).attr('aria-expanded') === 'false' ? true : false;
-
-          // Toggle hidden content
-          $('#'+$dataTarget).toggle();
-
-          // Update aria-expanded and aria-hidden attributes
-          $(this).attr('aria-expanded', state);
-          $('#'+$dataTarget).attr('aria-hidden', !state);
-
-        });
-      }
-
-    });
-  }
-}
-
 $(document).ready(function() {
 
   // Use GOV.UK selection-buttons.js to set selected
   // and focused states for block labels
   var $blockLabels = $(".block-label input[type='radio'], .block-label input[type='checkbox']");
   new GOVUK.SelectionButtons($blockLabels);
 
-  // Show and hide toggled content
+  // Use GOV.UK show-hide-content.js
   // Where .block-label uses the data-target attribute
-  var toggleContent = new ShowHideContent();
-  toggleContent.showHideRadioToggledContent();
-  toggleContent.showHideCheckboxToggledContent();
+  // to toggle the visibility of related content
+  var showHideContent = new GOVUK.ShowHideContent();
+  showHideContent.init();
 
 });

app/assets/javascripts/govuk/show-hide-content.js

@@ -0,0 +1,150 @@
+(function (global) {
+  'use strict';
+
+  var $ = global.jQuery;
+  var GOVUK = global.GOVUK || {};
+
+  function ShowHideContent() {
+    var self = this;
+
+    // Radio and Checkbox selectors
+    var selectors = {
+      namespace: 'ShowHideContent',
+      radio: '.block-label input[type="radio"]',
+      checkbox: '.block-label input[type="checkbox"]'
+    };
+
+    // Escape name attribute for use in DOM selector
+    function escapeElementName(str) {
+      var result = str.replace('[', '\\[').replace(']', '\\]');
+      return(result);
+    }
+
+    // Adds ARIA attributes to control + associated content
+    function initToggledContent() {
+      var $control = $(this);
+      var $content = getToggledContent($control);
+
+      // Set aria-controls and defaults
+      if ($content.length) {
+        $control.attr('aria-controls', $content.attr('id'));
+        $control.attr('aria-expanded', 'false');
+        $content.attr('aria-hidden', 'true');
+      }
+    }
+
+    // Return toggled content for control
+    function getToggledContent($control) {
+      var $label = $control.parent('label');
+      return $('#' + $label.data('target'));
+    }
+
+    // Show toggled content for control
+    function showToggledContent($control, $content) {
+
+      // Show content
+      if ($content.hasClass('js-hidden')) {
+        $content.removeClass('js-hidden');
+        $content.attr('aria-hidden', 'false');
+
+        // If the controlling input, update aria-expanded
+        if ($control.attr('aria-controls')) {
+          $control.attr('aria-expanded', 'true');
+        }
+      }
+    }
+
+    // Hide toggled content for control
+    function hideToggledContent($control, $content) {
+      $content = $content || getToggledContent($control);
+
+      // Hide content
+      if (!$content.hasClass('js-hidden')) {
+        $content.addClass('js-hidden');
+        $content.attr('aria-hidden', 'true');
+
+        // If the controlling input, update aria-expanded
+        if ($control.attr('aria-controls')) {
+          $control.attr('aria-expanded', 'false');
+        }
+      }
+    }
+
+    // Handle radio show/hide
+    function handleRadioContent($control, $content) {
+
+      // All radios in this group
+      var selector = selectors.radio + '[name=' + escapeElementName($control.attr('name')) + ']';
+      var $radios = $control.closest('form').find(selector);
+
+      // Hide radios in group
+      $radios.each(function() {
+        hideToggledContent($(this));
+      });
+
+      // Select radio button content
+      showToggledContent($control, $content);
+    }
+
+    // Handle checkbox show/hide
+    function handleCheckboxContent($control, $content) {
+
+      // Show checkbox content
+      if ($control.is(':checked')) {
+        showToggledContent($control, $content);
+      }
+
+      // Hide checkbox content
+      else {
+        hideToggledContent($control, $content);
+      }
+    }
+
+    // Set up event handlers etc
+    function init($container, selector, handler) {
+      $container = $container || $(document.body);
+
+      // Handle control clicks
+      function deferred() {
+        var $control = $(this);
+        handler($control, getToggledContent($control));
+      }
+
+      // Prepare ARIA attributes
+      var $controls = $(selector);
+      $controls.each(initToggledContent);
+
+      // Handle events
+      $container.on('click.' + selectors.namespace, selector, deferred);
+
+      // Any already :checked on init?
+      if ($controls.is(':checked')) {
+        $controls.filter(':checked').each(deferred);
+      }
+    }
+
+    // Set up radio show/hide content for container
+    self.showHideRadioToggledContent = function($container) {
+      init($container, selectors.radio, handleRadioContent);
+    };
+
+    // Set up checkbox show/hide content for container
+    self.showHideCheckboxToggledContent = function($container) {
+      init($container, selectors.checkbox, handleCheckboxContent);
+    };
+
+    // Remove event handlers
+    self.destroy = function($container) {
+      $container = $container || $(document.body);
+      $container.off('.' + selectors.namespace);
+    };
+  }
+
+  ShowHideContent.prototype.init = function($container) {
+    this.showHideRadioToggledContent($container);
+    this.showHideCheckboxToggledContent($container);
+  };
+
+  GOVUK.ShowHideContent = ShowHideContent;
+  global.GOVUK = GOVUK;
+})(window);

app/views/includes/scripts.html

@@ -2,4 +2,5 @@
 <script src="/public/javascripts/details.polyfill.js"></script>
 <script src="/public/javascripts/jquery-1.11.3.js"></script>
 <script src="/public/javascripts/govuk/selection-buttons.js"></script>
-<script src="/public/javascripts/application.js"></script>
+<script src="/public/javascripts/govuk/show-hide-content.js"></script>
+<script src="/public/javascripts/application.js"></script>