Render world locations

README.md

@@ -16,6 +16,7 @@ At time of writing, it also serves the priority campaign pages. See the [Campaig
 - Organisation page: [gov.uk/government/organisations/cabinet-office](https://www.gov.uk/government/organisations/cabinet-office)
 - Step by step page: [gov.uk/learn-to-drive-a-car](https://www.gov.uk/learn-to-drive-a-car)
 - Past Prime Minister: [gov.uk/government/history/past-prime-ministers/tony-blair](https://www.gov.uk/government/history/past-prime-ministers/tony-blair)
+- World index page: [gov.uk/world](https://www.gov.uk/world) 
 
 ## Nomenclature
 

app/assets/config/manifest.js

@@ -15,3 +15,4 @@
 //= link views/_taxons.css
 //= link views/_topical_events.css
 //= link views/_topics.css
+//= link views/_world_index.css

app/assets/javascripts/application.js

@@ -9,6 +9,6 @@
 //= require govuk_publishing_components/components/step-by-step-nav
 
 //= require support
-//= require modules/organisation-list-filter
+//= require modules/list-filter
 //= require modules/toggle-attribute
 //= require modules/coronavirus-landing-page

app/assets/javascripts/modules/list-filter.js

@@ -0,0 +1,121 @@
+/* eslint-disable no-var */
+//= require govuk_publishing_components/vendor/polyfills/closest
+
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function ListFilter ($module) {
+    this.$module = $module
+    this.filterTimeout = null
+    this.form = this.$module.querySelector('[data-filter="form"]')
+    this.searchResults = this.$module.querySelector('#search_results')
+  }
+
+  ListFilter.prototype.init = function () {
+    this.$module.filterList = this.filterList.bind(this)
+    // Form should only appear if the JS is working
+    this.form.classList.add('filter-list__form--active')
+    this.results = document.createElement('div')
+    this.results.classList.add('filter-list__results', 'govuk-heading-m', 'js-search-results')
+    this.results.setAttribute('aria-live', 'polite')
+    this.results.innerHTML = this.countInitialItems() + ' results found'
+    this.searchResults.insertBefore(this.results, this.searchResults.firstChild)
+
+    // We don't want the form to submit/refresh the page on enter key
+    this.form.onsubmit = function () { return false }
+
+    this.form.addEventListener('keyup', function (e) {
+      var searchTerm = e.target.value
+      clearTimeout(this.filterTimeout)
+      this.filterTimeout = setTimeout(function () {
+        this.$module.filterList(searchTerm)
+      }.bind(this), 200)
+    }.bind(this))
+  }
+
+  ListFilter.prototype.filterList = function (searchTerm) {
+    var itemsToFilter = this.$module.querySelectorAll('[data-filter="item"]')
+    var blocksToFilter = this.$module.querySelectorAll('[data-filter="block"]')
+    for (var i = 0; i <= itemsToFilter.length - 1; i++) {
+      var currentItem = itemsToFilter[i]
+      if (!this.matchSearchTerm(currentItem, searchTerm)) {
+        currentItem.classList.add('js-hidden')
+      }
+    }
+    this.updateItemCount(blocksToFilter)
+  }
+
+  ListFilter.prototype.matchSearchTerm = function (item, term) {
+    var normaliseWhitespace = function (string) {
+      return string
+        .trim() // Removes spaces at beginning and end of string.
+        .replace(/\r?\n|\r/g, ' ') // Replaces line breaks with one space.
+        .replace(/\s+/g, ' ') // Squashes multiple spaces to one space.
+    }
+
+    var searchTerms = item.getAttribute('data-filter-terms') || ''
+    var normalisedTerms = normaliseWhitespace(searchTerms)
+
+    item.classList.remove('js-hidden')
+
+    var searchTermRegexp = new RegExp(term.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i')
+    return searchTermRegexp.exec(normalisedTerms) !== null
+  }
+
+  ListFilter.prototype.countInitialItems = function () {
+    return this.$module.querySelectorAll('[data-filter="item"]').length
+  }
+
+  ListFilter.prototype.updateItemCount = function (blocksToFilter) {
+    var totalMatchingItems = 0
+
+    for (var i = 0; i < blocksToFilter.length; i++) {
+      var block = blocksToFilter[i].closest('[data-filter="block"]')
+      block.classList.remove('js-hidden')
+
+      var matchingItems = block.querySelectorAll('[data-filter="item"]')
+      var matchingItemCount = 0
+
+      var innerBlocks = block.querySelectorAll('[data-filter="inner-block"]')
+      for (var r = 0; r < innerBlocks.length; r++) {
+        innerBlocks[r].classList.add('js-hidden')
+      }
+
+      for (var j = 0; j < matchingItems.length; j++) {
+        if (!matchingItems[j].classList.contains('js-hidden')) {
+          matchingItemCount++
+
+          if (matchingItems[j].closest('[data-filter="inner-block"]') !== null) { matchingItems[j].closest('[data-filter="inner-block"]').classList.remove('js-hidden') }
+        }
+      }
+
+      var itemCount = block.querySelectorAll('[data-item-count="true"]')
+      var accessibleItemCount = block.querySelectorAll('.js-accessible-item-count')
+
+      if (matchingItemCount === 0) {
+        block.classList.toggle('js-hidden')
+      }
+
+      if (matchingItemCount > 0) {
+        for (var l = 0; l < itemCount.length; l++) {
+          itemCount[l].textContent = matchingItemCount
+        }
+
+        for (var k = 0; k < accessibleItemCount.length; k++) {
+          accessibleItemCount[k].textContent = matchingItemCount
+        }
+      }
+
+      totalMatchingItems += matchingItemCount
+    }
+
+    var text = ' results found'
+    if (totalMatchingItems === 1) {
+      text = ' result found'
+    }
+    this.results.innerHTML = totalMatchingItems + text
+  }
+
+  Modules.ListFilter = ListFilter
+})(window.GOVUK.Modules)

app/assets/stylesheets/views/_organisations.scss

@@ -27,10 +27,10 @@
   }
 }
 
-.filter-organisations-list__form {
+.filter-list__form {
   display: none;
 }
 
-.filter-organisations-list__form--active {
+.filter-list__form--active {
   display: block;
 }

app/assets/stylesheets/views/_world_index.scss

@@ -0,0 +1,49 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.world-locations {
+  .world-locations-heading {
+    @include govuk-font(19);
+  }
+
+  .world-locations-groups {
+    padding: govuk-spacing(5) 0 0 0;
+  }
+
+  .world-locations-group__list {
+    padding: 0;
+  }
+
+  .world-locations-group {
+    margin-bottom: govuk-spacing(6);
+  }
+
+  .world-locations-group__letter {
+    @include govuk-font(80);
+    font-weight: bold;
+    text-indent: -4px;
+    margin: 0;
+  }
+
+  .world_locations-group__item {
+    list-style-type: none;
+    border-bottom: 1px solid govuk-colour("mid-grey");
+    padding: govuk-spacing(1) 0;
+    @include govuk-font(19);
+  }
+
+  .filter-list__form {
+    display: none;
+  }
+
+  .filter-list__form--active {
+    display: block;
+  }
+
+  .js-hidden {
+    display: none;
+  }
+
+  .filter-list__results {
+    padding-left: $govuk-gutter-half;
+  }
+}

app/controllers/world_controller.rb

@@ -0,0 +1,7 @@
+class WorldController < ApplicationController
+  def index
+    index = WorldIndex.find!("/world")
+    @presented_index = WorldIndexPresenter.new(index)
+    setup_content_item_and_navigation_helpers(index)
+  end
+end

app/models/world_index.rb

@@ -0,0 +1,12 @@
+class WorldIndex
+  attr_reader :content_item
+
+  def initialize(content_item)
+    @content_item = content_item
+  end
+
+  def self.find!(base_path)
+    content_item = ContentItem.find!(base_path)
+    new(content_item)
+  end
+end

app/presenters/organisations/index_presenter.rb

@@ -31,6 +31,13 @@ def title
       @organisations.content_item.title
     end
 
+    def filter_terms(organisation_type, organisation)
+      acronym = organisation["acronym"]
+      title = ministerial_organisation?(organisation_type) ? organisation["logo"]["formatted_title"].squish : organisation["title"]
+
+      [title, acronym].compact.join(" ")
+    end
+
     def all_organisations
       {
         number_10: @organisations.number_10,