Patterns

Find a timetable

What does it do?

Helps users to find a timetable for their chosen service

When to use it?

On the homepage

How it works?

This will direct users to the timetables page
Users can only select one travel mode
Users will need to enter a service number if they select bus. If train or tram are selected, then users can go straight to the timetables page through the Call to action button.

Default

HTML markup

<div style="max-width: 448px">
  <div class="wmnds-find-a-timetable-widget ">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Find a timetable</h2>
        <div class="wmnds-find-a-timetable__content">
          Select your transport mode
        </div>
        <form class="wmnds-find-a-timetable-widget__form">
          <div class="wmnds-find-a-timetable-widget__travel-modes wmnds-grid wmnds-grid--spacing-3-sm wmnds-m-t-sm">
            <label class="wmnds-col-1-3">
              <input type="checkbox" class="wmnds-find-a-timetable-widget__mode-checkbox wmnds-screenreaders-only" name="mode" value="Bus">
              <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block wmnds-text-align-center">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                </svg>
                Bus
              </div>
            </label>
            <div class="wmnds-col-1-3">
              <a href="https://legacy.wmnetwork.co.uk/timetables/#/?mode=Train" title="link title" target="_blank" class="wmnds-btn wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-btn--mode" rel="">
                <svg class="wmnds-btn__icon">
                  <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                </svg>
                Train
              </a>
            </div>
            <div class="wmnds-col-1-3">
              <a href="https://legacy.wmnetwork.co.uk/timetables/#/?mode=Tram&amp;serviceNo=MM1&amp;limit=6" title="link title" target="_blank" class="wmnds-btn wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-btn--mode" rel="">
                <svg class="wmnds-btn__icon">
                  <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                </svg>
                Tram
              </a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Nunjucks markup

{% from "wmnds/patterns/find-timetable-widget/_find-timetable-widget.njk" import wmndsFindTimetableWidget %}

{{
   wmndsFindTimetableWidget({
      isOpen: true
    })
}}

Nunjucks properties

Name	Type	Description
isOpen	boolean	If true, find timetable widget will be expanded upon initial load. Defaults to `false`.

Recommended javascript (browser compatible)

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var findATimetableJS = function findATimetableJS() {
  var findATimetableComponents = document.querySelectorAll('.wmnds-find-a-timetable-widget');
  var toggleOpenClass = function toggleOpenClass(e) {
    e.target.closest('.wmnds-find-a-timetable-widget').classList.toggle('wmnds-is--open');
  };
  var onSubmitForm = function onSubmitForm(e) {
    e.preventDefault();
    var data = new FormData(e.target);
    var queryString = new URLSearchParams(data).toString();
    window.location.href = "https://legacy.wmnetwork.co.uk/timetables/#/?".concat(queryString);
  };
  findATimetableComponents.forEach(function(findATimetableComponent) {
    findATimetableComponent.querySelector('div.wmnds-btn.wmnds-btn--mode').addEventListener('click', toggleOpenClass);
    findATimetableComponent.querySelector('.wmnds-find-a-timetable-widget__form').addEventListener('submit', onSubmitForm);
  });
};
var _default = findATimetableJS;
exports["default"] = _default;

Recommended javascript (ES6)

const findATimetableJS = () => {
  const findATimetableComponents = document.querySelectorAll('.wmnds-find-a-timetable-widget');
  const toggleOpenClass = e => {
    e.target.closest('.wmnds-find-a-timetable-widget').classList.toggle('wmnds-is--open');
  };

  const onSubmitForm = e => {
    e.preventDefault();
    const data = new FormData(e.target);
    const queryString = new URLSearchParams(data).toString();
    window.location.href = `https://legacy.wmnetwork.co.uk/timetables/#/?${queryString}`;
  };

  findATimetableComponents.forEach(findATimetableComponent => {
    findATimetableComponent
      .querySelector('div.wmnds-btn.wmnds-btn--mode')
      .addEventListener('click', toggleOpenClass);
    findATimetableComponent
      .querySelector('.wmnds-find-a-timetable-widget__form')
      .addEventListener('submit', onSubmitForm);
  });
};

export default findATimetableJS;

Expanded (bus)

HTML markup

<div style="max-width: 448px">
  <div class="wmnds-find-a-timetable-widget  wmnds-is--open">
    <div class="wmnds-content-card">
      <div class="wmnds-p-md">
        <h2>Find a timetable</h2>
        <div class="wmnds-find-a-timetable__content">
          Select your transport mode
        </div>
        <form class="wmnds-find-a-timetable-widget__form">
          <div class="wmnds-find-a-timetable-widget__travel-modes wmnds-grid wmnds-grid--spacing-3-sm wmnds-m-t-sm">
            <label class="wmnds-col-1-3">
              <input type="checkbox" class="wmnds-find-a-timetable-widget__mode-checkbox wmnds-screenreaders-only" name="mode" value="Bus" checked>
              <div class="wmnds-btn wmnds-btn--mode wmnds-btn--block wmnds-text-align-center">
                <svg class="wmnds-btn__icon ">
                  <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
                </svg>
                Bus
              </div>
            </label>
            <div class="wmnds-col-1-3">
              <a href="https://legacy.wmnetwork.co.uk/timetables/#/?mode=Train" title="link title" target="_blank" class="wmnds-btn wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-btn--mode" rel="">
                <svg class="wmnds-btn__icon">
                  <use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
                </svg>
                Train
              </a>
            </div>
            <div class="wmnds-col-1-3">
              <a href="https://legacy.wmnetwork.co.uk/timetables/#/?mode=Tram&amp;serviceNo=MM1&amp;limit=6" title="link title" target="_blank" class="wmnds-btn wmnds-col-1 wmnds-m-b-sm wmnds-text-align-center wmnds-btn--mode" rel="">
                <svg class="wmnds-btn__icon">
                  <use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
                </svg>
                Tram
              </a>
            </div>
          </div>
          <div class="wmnds-find-a-timetable-widget__services">
            <div class="wmnds-fe-group wmnds-m-b-md">
              <label class="wmnds-fe-label wmnds-screenreaders-only" for="busServices">Bus Services</label>
              <input class="wmnds-fe-input" id="busServices" name="serviceNo" type="text" value="" placeholder="Enter a service number" required="true" />
            </div>
            <button class="wmnds-btn wmnds-col-1 wmnds-col-sm-1-2 wmnds-btn--align-left" type="submit">
              Find a timetable
              <svg class="wmnds-btn__icon wmnds-btn__icon--right ">
                <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
              </svg>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Nunjucks markup

{% from "wmnds/patterns/find-timetable-widget/_find-timetable-widget.njk" import wmndsFindTimetableWidget %}

{{
   wmndsFindTimetableWidget({
      isOpen: true
    })
}}

Nunjucks properties

Name	Type	Description
isOpen	boolean	If true, find timetable widget will be expanded upon initial load. Defaults to `false`.

Recommended javascript (browser compatible)

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var findATimetableJS = function findATimetableJS() {
  var findATimetableComponents = document.querySelectorAll('.wmnds-find-a-timetable-widget');
  var toggleOpenClass = function toggleOpenClass(e) {
    e.target.closest('.wmnds-find-a-timetable-widget').classList.toggle('wmnds-is--open');
  };
  var onSubmitForm = function onSubmitForm(e) {
    e.preventDefault();
    var data = new FormData(e.target);
    var queryString = new URLSearchParams(data).toString();
    window.location.href = "https://legacy.wmnetwork.co.uk/timetables/#/?".concat(queryString);
  };
  findATimetableComponents.forEach(function(findATimetableComponent) {
    findATimetableComponent.querySelector('div.wmnds-btn.wmnds-btn--mode').addEventListener('click', toggleOpenClass);
    findATimetableComponent.querySelector('.wmnds-find-a-timetable-widget__form').addEventListener('submit', onSubmitForm);
  });
};
var _default = findATimetableJS;
exports["default"] = _default;

Recommended javascript (ES6)

const findATimetableJS = () => {
  const findATimetableComponents = document.querySelectorAll('.wmnds-find-a-timetable-widget');
  const toggleOpenClass = e => {
    e.target.closest('.wmnds-find-a-timetable-widget').classList.toggle('wmnds-is--open');
  };

  const onSubmitForm = e => {
    e.preventDefault();
    const data = new FormData(e.target);
    const queryString = new URLSearchParams(data).toString();
    window.location.href = `https://legacy.wmnetwork.co.uk/timetables/#/?${queryString}`;
  };

  findATimetableComponents.forEach(findATimetableComponent => {
    findATimetableComponent
      .querySelector('div.wmnds-btn.wmnds-btn--mode')
      .addEventListener('click', toggleOpenClass);
    findATimetableComponent
      .querySelector('.wmnds-find-a-timetable-widget__form')
      .addEventListener('submit', onSubmitForm);
  });
};

export default findATimetableJS;