govuk_elements_rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 0e4507b35a48b80125447d05206cad3cfe6f39f0
+  data.tar.gz: 98b68bd115ef63a93316504d741f4130c486f493
+SHA512:
+  metadata.gz: 10ecd7e53790c3d74e3853f4d40b0f83d786a8d6af4e222d7c0ebd4c27c95ffad1780d0a4615a138aa2b2f58a649c847f15dca8aa95014c30e234c2574e27429
+  data.tar.gz: ff14ffac1525b39272214c70e6e6c408377de2365fbff171f6386bb3a221169dd3d561fe88f41aae4f7fd51324133776e199a5805a9ab3928052c687f916b27a

data/LICENCE

@@ -0,0 +1,20 @@
+Copyright (c) 2014 HM Government
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,54 @@
+# GOV.UK Elements Rails gem
+
+A gem wrapper around [govuk_elements](http://github.com/alphagov/govuk_elements)
+that pulls stylesheet and javascript files into a Rails app.
+
+## Installing
+
+Just include `govuk_elements_rails` in your `Gemfile`. It
+automatically attaches itself to your asset path so the static/SCSS
+files will be available to the asset pipeline.
+
+### Development
+
+If you are installing from git, ensure you enable submodules like so:
+
+    gem 'govuk_elements_rails', :git => "https://github.com/ministryofjustice/govuk_elements_rails.git", :submodules => true
+
+## Usage
+
+At the top of a Sass file in your Rails project you should use an `@import` rule
+to include the file for the mixins you require. For example here are all the
+imports possible:
+
+    @import 'elements/helpers';
+    @import 'elements/reset';
+    @import 'elements/elements-typography';
+    @import 'elements/layout';
+
+    @import 'elements/forms';
+    @import 'elements/tables';
+    @import 'elements/buttons';
+    @import 'elements/details';
+    @import 'elements/lists';
+    @import 'elements/panels';
+    @import "elements/icons";
+
+In the `app/assets/javascripts/application.js` file in your Rails project use
+`require` rule to include the files for the javascript enhancements you require.
+For example here are all the requires possible at present:
+
+    // from govuk_elements gem
+    //= require details.polyfill
+    //= require bind
+    //= require selection-buttons
+
+## Alternate ways to reuse GOV.UK Elements
+
+There are other alternate ways to include GOV.UK Elements files in a Rails
+project, for example via `Bower`. Feel free to use an alternate approach if it
+is more appropriate for your team.
+
+## Feedback
+
+Please provide feedback via [GitHub issues](https://github.com/ministryofjustice/govuk_elements_rails/issues).

data/lib/govuk_elements_rails.rb

@@ -0,0 +1,4 @@
+module GovUKElementsRails
+  require 'govuk_elements_rails/engine'
+  autoload 'Version', 'govuk_elements_rails/version'
+end

data/lib/govuk_elements_rails/engine.rb

@@ -0,0 +1,4 @@
+module GovUKElementsRails
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/govuk_elements_rails/version.rb

@@ -0,0 +1,5 @@
+module GovUKElementsRails
+  def self.elements_version
+    '0.1.0'
+  end
+end

data/vendor/assets/javascripts/bind.js

@@ -0,0 +1,40 @@
+// Function.prototype.bind
+//
+// A polyfill for Function.prototype.bind. Which lets you bind a defined
+// value to the `this` keyword in a function call.
+//
+// Bind is natively supported in:
+//   IE9+
+//   Chrome 7+
+//   Firefox 4+
+//   Safari 5.1.4+
+//   iOS 6+
+//   Android Browser 4+
+//   Chrome for Android 0.16+
+//
+// Originally from:
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
+if (!Function.prototype.bind) {
+  Function.prototype.bind = function (oThis) {
+    if (typeof this !== "function") {
+      // closest thing possible to the ECMAScript 5
+      // internal IsCallable function
+      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+    }
+
+    var aArgs = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP = function () {},
+        fBound = function () {
+          return fToBind.apply(this instanceof fNOP && oThis
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}

data/vendor/assets/javascripts/details.polyfill.js

@@ -0,0 +1,158 @@
+// <details> polyfill
+// http://caniuse.com/#feat=details
+
+// FF Support for HTML5's <details> and <summary>
+// https://bugzilla.mozilla.org/show_bug.cgi?id=591737
+
+// http://www.sitepoint.com/fixing-the-details-element/
+
+(function () {
+
+  // Add event construct for modern browsers or IE
+  // which fires the callback with a pre-converted target reference
+  function addEvent(node, type, callback) {
+    if (node.addEventListener) {
+      node.addEventListener(type, function (e) {
+        callback(e, e.target);
+      }, false);
+    } else if (node.attachEvent) {
+      node.attachEvent('on' + type, function (e) {
+        callback(e, e.srcElement);
+      });
+    }
+  }
+
+  // Handle cross-modal click events
+  function addClickEvent(node, callback) {
+    var keydown = false;
+    addEvent(node, 'keydown', function () {
+      keydown = true;
+    });
+    addEvent(node, 'keyup', function (e, target) {
+      keydown = false;
+      if (e.keyCode === 13) { callback(e, target); }
+    });
+    addEvent(node, 'click', function (e, target) {
+      if (!keydown) { callback(e, target); }
+    });
+  }
+
+  // Get the nearest ancestor element of a node that matches a given tag name
+  function getAncestor(node, match) {
+    do {
+      if (!node || node.nodeName.toLowerCase() === match) {
+        break;
+      }
+    } while (node = node.parentNode);
+
+    return node;
+  }
+
+  // Create a started flag so we can prevent the initialisation
+  // function firing from both DOMContentLoaded and window.onload
+  var started = false;
+
+  // Initialisation function
+  function addDetailsPolyfill(list) {
+
+    // If this has already happened, just return
+    // else set the flag so it doesn't happen again
+    if (started) {
+      return;
+    }
+    started = true;
+
+    // Get the collection of details elements, but if that's empty
+    // then we don't need to bother with the rest of the scripting
+    if ((list = document.getElementsByTagName('details')).length === 0) {
+      return;
+    }
+
+    // else iterate through them to apply their initial state
+    var n = list.length, i = 0;
+    for (n; i < n; i++) {
+      var details = list[i];
+
+      // Detect native implementations
+      details.__native = typeof(details.open) == 'boolean';
+
+      // Save shortcuts to the inner summary and content elements
+      details.__summary = details.getElementsByTagName('summary').item(0);
+      details.__content = details.getElementsByTagName('div').item(0);
+
+      // If the content doesn't have an ID, assign it one now
+      // which we'll need for the summary's aria-controls assignment
+      if (!details.__content.id) {
+        details.__content.id = 'details-content-' + i;
+      }
+
+      // Add role=button to summary
+      details.__summary.setAttribute('role', 'button');
+
+      // Add aria-controls
+      details.__summary.setAttribute('aria-controls', details.__content.id);
+
+      // Set tabindex so the summary is keyboard accessible
+      details.__summary.setAttribute('tabindex', '0');
+
+      // Detect initial open/closed state
+      var detailsAttr = details.hasAttribute('open');
+      if (typeof detailsAttr !== 'undefined' && detailsAttr !== false) {
+        details.__summary.setAttribute('aria-expanded', 'true');
+        details.__content.setAttribute('aria-hidden', 'false');
+      } else {
+        details.__summary.setAttribute('aria-expanded', 'false');
+        details.__content.setAttribute('aria-hidden', 'true');
+        details.__content.style.display = 'none';
+      }
+
+      // Create a circular reference from the summary back to its
+      // parent details element, for convenience in the click handler
+      details.__summary.__details = details;
+
+      // If this is not a native implementation, create an arrow
+      // inside the summary, saving its reference as a summary property
+      if (!details.__native) {
+        var twisty = document.createElement('i');
+        twisty.className = 'arrow arrow-closed';
+        twisty.appendChild(document.createTextNode('\u25ba'));
+        details.__summary.__twisty = details.__summary.insertBefore(twisty, details.__summary.firstChild);
+      }
+    }
+
+    // Define a statechange function that updates aria-expanded and style.display
+    // Also update the arrow position
+    function statechange(summary) {
+
+      // Update aria-expanded attribute on click
+      var expanded = summary.__details.__summary.getAttribute('aria-expanded') == 'true';
+      var hidden = summary.__details.__content.getAttribute('aria-hidden') == 'true';
+
+      summary.__details.__summary.setAttribute('aria-expanded', (expanded ? 'false' : 'true'));
+      summary.__details.__content.setAttribute('aria-hidden', (hidden ? 'false' : 'true'));
+      summary.__details.__content.style.display = (expanded ? 'none' : 'block');
+
+      if (summary.__twisty) {
+        summary.__twisty.firstChild.nodeValue = (expanded ? '\u25ba' : '\u25bc');
+        summary.__twisty.setAttribute('class', (expanded ? 'arrow arrow-closed' : 'arrow arrow-open'));
+      }
+
+      return true;
+    }
+
+    // Bind a click event to handle summary elements
+    addClickEvent(document, function(e, summary) {
+      if (!(summary = getAncestor(summary, 'summary'))) {
+        return true;
+      }
+      return statechange(summary);
+    });
+  }
+
+  // Bind two load events for modern and older browsers
+  // If the first one fires it will set a flag to block the second one
+  // but if it's not supported then the second one will fire
+  addEvent(document, 'DOMContentLoaded', addDetailsPolyfill);
+  addEvent(window, 'load', addDetailsPolyfill);
+
+})();

data/vendor/assets/javascripts/selection-buttons.js

@@ -0,0 +1,137 @@
+(function () {
+  "use strict"
+  var root = this,
+      $ = root.jQuery;
+
+  if (typeof GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  var BaseButtons = function ($elms, opts) {
+    this.$elms = $elms;
+    this.selectedClass = 'selected';
+    this.focusedClass = 'focused';
+    if (opts !== undefined) {
+      $.each(opts, function (optionName, optionObj) {
+        this[optionName] = optionObj;
+      }.bind(this));
+    }
+    this.setEventNames();
+    this.getSelections();
+    this.bindEvents();
+  };
+  BaseButtons.prototype.setEventNames = function () {
+    this.selectionEvents = 'click';
+    this.focusEvents = 'focus blur';
+  };
+  BaseButtons.prototype.markFocused = function ($elm, state) {
+    var elmId = $elm.attr('id');
+
+    if (state === 'focused') {
+      $elm.parent('label').addClass(this.focusedClass);
+    } else {
+      $elm.parent('label').removeClass(this.focusedClass);
+    }
+  };
+  BaseButtons.prototype.bindEvents = function () {
+    var selectionEventHandler = this.markSelected.bind(this),
+        focusEventHandler = this.markFocused.bind(this);
+
+    this.$elms
+      .on(this.selectionEvents, function (e) {
+        selectionEventHandler($(e.target));
+      })
+      .on(this.focusEvents, function (e) {
+        var state = (e.type === 'focus') ? 'focused' : 'blurred';
+
+        focusEventHandler($(e.target), state);
+      });
+  };
+
+  var RadioButtons = function ($elms, opts) {
+    BaseButtons.apply(this, arguments);
+  };
+  RadioButtons.prototype.setEventNames = function () {
+    // some browsers fire the 'click' when the selected radio changes by keyboard
+    this.selectionEvents = 'click change';
+    this.focusEvents = 'focus blur';
+  };
+  RadioButtons.prototype.getSelections = function () {
+    var selectionEventHandler = this.markSelected.bind(this);
+
+    this.selections = {};
+    $.each(this.$elms, function (index, elm) {
+      var $elm = $(elm),
+          radioName = $elm.attr('name');
+
+      if (typeof this.selections[radioName] === 'undefined') {
+        this.selections[radioName] = false;
+      }
+      if ($elm.is(':checked')) {
+        selectionEventHandler($elm);
+      }
+    }.bind(this));
+  };
+  RadioButtons.prototype.bindEvents = function () {
+    BaseButtons.prototype.bindEvents.call(this);
+  };
+  RadioButtons.prototype.markSelected = function ($elm) {
+    var radioName = $elm.attr('name'),
+        $previousSelection = this.selections[radioName];
+
+    if ($previousSelection) {
+      $previousSelection.parent('label').removeClass(this.selectedClass);
+    }
+    $elm.parent('label').addClass(this.selectedClass);
+    this.selections[radioName] = $elm;
+  };
+  RadioButtons.prototype.markFocused = function ($elm) {
+    BaseButtons.prototype.markFocused.apply(this, arguments);
+  };
+
+  var CheckboxButtons = function ($elms, opts) {
+    BaseButtons.apply(this, arguments);
+  };
+  CheckboxButtons.prototype.setEventNames = function () {
+    BaseButtons.prototype.setEventNames.call(this);
+  };
+  CheckboxButtons.prototype.getSelections = function () {
+    var selectionEventHandler = this.markSelected.bind(this);
+
+    this.$elms.each(function (idx, elm) {
+      var $elm = $(elm);
+
+      if ($elm.is(':checked')) {
+        selectionEventHandler($elm);
+      }
+    });
+  };
+  CheckboxButtons.prototype.bindEvents = function () {
+    BaseButtons.prototype.bindEvents.call(this);
+  };
+  CheckboxButtons.prototype.markSelected = function ($elm) {
+    if ($elm.is(':checked')) {
+      $elm.parent('label').addClass(this.selectedClass);
+    } else {
+      $elm.parent('label').removeClass(this.selectedClass);
+    }
+  };
+  CheckboxButtons.prototype.markFocused = function ($elm) {
+    BaseButtons.prototype.markFocused.apply(this, arguments);
+  };
+
+  root.GOVUK.RadioButtons = RadioButtons;
+  root.GOVUK.CheckboxButtons = CheckboxButtons;
+
+  var selectionButtons = function ($elms, opts) {
+    var $radios = $elms.filter('[type=radio]'),
+        $checkboxes = $elms.filter('[type=checkbox]');
+
+    if ($radios) {
+      new GOVUK.RadioButtons($radios, opts);
+    }
+    if ($checkboxes) {
+      new GOVUK.CheckboxButtons($checkboxes, opts);
+    }
+  };
+
+  root.GOVUK.selectionButtons = selectionButtons;
+}).call(this);

data/vendor/assets/stylesheets/elements-page-ie6.scss

@@ -0,0 +1,5 @@
+$is-ie: true;
+$ie-version: 6;
+$mobile-ie6: false;
+ 
+@import "elements-page";