Merge pull request #1657 from alphagov/remove-jquery-from-govspeak

Remove jquery from govspeak

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Remove jquery from govspeak ([PR #1657](https://github.com/alphagov/govuk_publishing_components/pull/1657))
+
 ## 21.63.2
 
 * Fix the on blue logic for the search component ([PR #1663](https://github.com/alphagov/govuk_publishing_components/pull/1663))

app/assets/javascripts/govuk_publishing_components/components/govspeak.js

@@ -2,25 +2,27 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
+  function Govspeak () { }
 
-  Modules.Govspeak = function () {
-    this.start = function ($element) {
-      if (!$element.hasClass('disable-youtube')) {
-        this.embedYoutube($element)
-      }
+  Govspeak.prototype.start = function ($module) {
+    this.$module = $module[0]
 
-      this.createBarcharts($element)
+    if (this.$module.className.indexOf('disable-youtube') === -1) {
+      this.embedYoutube()
     }
 
-    this.embedYoutube = function ($jqElement) {
-      var enhancement = new window.GOVUK.GovspeakYoutubeLinkEnhancement($jqElement[0])
-      enhancement.init()
-    }
+    this.createBarcharts()
+  }
 
-    this.createBarcharts = function ($element) {
-      var enhancement = new window.GOVUK.GovspeakBarchartEnhancement($element)
-      enhancement.init()
-    }
+  Govspeak.prototype.embedYoutube = function () {
+    var enhancement = new window.GOVUK.GovspeakYoutubeLinkEnhancement(this.$module)
+    enhancement.init()
   }
+
+  Govspeak.prototype.createBarcharts = function () {
+    var enhancement = new window.GOVUK.GovspeakBarchartEnhancement(this.$module)
+    enhancement.init()
+  }
+
+  Modules.Govspeak = Govspeak
 })(window.GOVUK.Modules)

app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js

@@ -1,4 +1,4 @@
-// = require govuk_publishing_components/vendor/magna-charta.min
+// = require govuk_publishing_components/lib/govspeak/magna-charta
 
 window.GOVUK = window.GOVUK || {};
 
@@ -10,16 +10,23 @@ window.GOVUK = window.GOVUK || {};
   }
 
   BarchartEnhancement.prototype.init = function () {
-    // the not selectors are protection against initialising twice since that
-    // causes quite a mess. The not .mc-chart is because it creates a second
-    // .js-barchart-table element with .mc-chart and then the
-    // .js-barchart-table-init is given when we initialise
-    var $barcharts = this.$element.find('.js-barchart-table:not(.mc-chart):not(.js-barchart-table-init)')
-    $barcharts.each(function () {
-      var $table = $(this)
-      $.magnaCharta($table, { toggleText: 'Change between chart and table' })
-      $table.addClass('js-barchart-table-init')
-    })
+    var $barchartsOriginal = this.$element.querySelectorAll('.js-barchart-table')
+    var $barcharts = []
+
+    for (var j = 0; j < $barchartsOriginal.length; j++) {
+      // this prevents the code from initialising more than once
+      // we'd use :not selectors for $barchartsOriginal but for lack of IE8 support
+      var styles = $barchartsOriginal[j].className
+      if (styles.indexOf('mc-chart') === -1 && styles.indexOf('js-barchart-table-init') === -1) {
+        $barcharts.push($barchartsOriginal[j])
+      }
+    }
+
+    for (var i = 0; i < $barcharts.length; i++) {
+      var $table = $barcharts[i]
+      new GOVUK.Modules.MagnaCharta().start($table, { toggleText: 'Change between chart and table' })
+      $table.className = $table.className + ' js-barchart-table-init'
+    }
   }
 
   GOVUK.GovspeakBarchartEnhancement = BarchartEnhancement