Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto-start JavaScript modules that appear in markup #192

merged 4 commits into from Feb 24, 2014


Copy link

@fofr fofr commented Feb 21, 2014

  • Find and auto-start modules specified using the data-module="" pattern in markup
    • eg <div data-module="toggle"></div> starts the Toggle module, passing it the element as the first argument
  • This makes it easier to limit modules to their containers and to start modules within certain elements, eg a modal when it has loaded. We can also remove the inline script tags and stop worrying about instantiation.
  • Convert selectable_table and mappings to use this new pattern
    • Split mappings into two more generic modules, toggle and toggle_mapping_form_fields
  • It follows some of the principles outlined in (but doesn't include the dependency management using require-js)
Paul Hayes added 3 commits Feb 21, 2014
* Find and start modules matching the pattern [data-module], eg.
* Look for modules in a register, GOVUK.Modules
* Require module instantiation before starting
* Convert module names to camel case to match JS syntax
* Create a GOVUK ‘app’ which runs on page load, sets up the necessary
structures and does the finding and starting of modules
* Update selectable table to match this pattern
* Remove the old instantiation and checks that are no longer needed
* Create toggle and toggle form fields modules, using new module pattern
* Remove inline script calls to Mappings.edit()
* Remove a redundant toggle module on bulk adder, nothing was being
Paul Hayes
* Keep them distinct from other JS files
GOVUK.find = function(container) {

var modules,
pattern = '[data-module]',

This comment has been minimized.


jamiecobbett Feb 24, 2014

The name pattern meant that I initially thought this was a regex, but having glanced at jQuery's documentation, I think it is actually a selector. If so, could we rename it selector?

This comment has been minimized.


fofr Feb 24, 2014
Author Contributor

Yes, yes we can, good point.

Copy link

@jamiecobbett jamiecobbett commented Feb 24, 2014

One small change, but otherwise this looks good 👍

Paul Hayes
* It’s a selector, not a regex
jamiecobbett added a commit that referenced this pull request Feb 24, 2014
Auto-start JavaScript modules that appear in markup
@jamiecobbett jamiecobbett merged commit 7ff2eb3 into master Feb 24, 2014
1 check passed
1 check passed
default "Build #75 succeeded on Jenkins"
@jamiecobbett jamiecobbett deleted the js-auto-start branch Feb 24, 2014
fofr added a commit to alphagov/govuk_admin_template that referenced this pull request May 22, 2014
* Originally written in alphagov/transition#192
* Rename global from GOVUK to GOVUKAdmin to avoid clashes with existing
JavaScript within applications
* Using GOVUKAdmin makes it clearer when apps are using the gem’s
* Include useful modules:
  * Automatically show bootstrap modals on page load
  * Automatically track Google Analytics events on page load
  * Filter the contents of a table
  * Fix a table’s header when scrolling
  * Select items in a table and perform an action on them
  * A simple toggle for hiding/showing — toggles target elements
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
You can’t perform that action at this time.