@ministryofjustice/frontend - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

moj/all.js

@@ -53,4 +53,91 @@ ;(function(root, factory) {
 };
+
+MOJFrontend.nodeListForEach = function(nodes, callback) {
+  if (window.NodeList.prototype.forEach) {
+    return nodes.forEach(callback)
+  }
+  for (var i = 0; i < nodes.length; i++) {
+    callback.call(window, nodes[i], i, nodes)
+  }
+};
+
+MOJFrontend.initAll = function (options) {
+  // Set the options to an empty object by default if no options are passed.
+  options = typeof options !== 'undefined' ? options : {};
+
+  // Allow the user to initialise MOJ Frontend in only certain sections of the page
+  // Defaults to the entire document if nothing is set.
+  var scope = typeof options.scope !== 'undefined' ? options.scope : document;
+
+  var $addAnothers = scope.querySelectorAll('[data-module="moj-add-another"]');
+  MOJFrontend.nodeListForEach($addAnothers, function ($addAnother) {
+    new MOJFrontend.AddAnother($addAnother);
+  });
+
+  var $multiSelects = scope.querySelectorAll('[data-module="moj-multi-select"]');
+  MOJFrontend.nodeListForEach($multiSelects, function ($multiSelect) {
+    new MOJFrontend.MultiSelect({
+      container: $multiSelect.querySelector($multiSelect.getAttribute('data-multi-select-checkbox')),
+      checkboxes: $multiSelect.querySelectorAll('tbody .govuk-checkboxes__input')
+    });
+  });
+
+  var $passwordReveals = scope.querySelectorAll('[data-module="moj-password-reveal"]');
+  MOJFrontend.nodeListForEach($passwordReveals, function ($passwordReveal) {
+    new MOJFrontend.PasswordReveal($passwordReveal);
+  });
+
+  var $richTextEditors = scope.querySelectorAll('[data-module="moj-rich-text-editor"]');
+  MOJFrontend.nodeListForEach($richTextEditors, function ($richTextEditor) {
+    var options = {
+      textarea: $($richTextEditor)
+    };
+
+    var toolbarAttr = $richTextEditor.getAttribute('data-rich-text-editor-toolbar');
+    if (toolbarAttr) {
+      var toolbar = toolbarAttr.split(',');
+      options.toolbar = {};
+      for (var item in toolbar) options.toolbar[toolbar[item]] = true;
+    }
+
+    new MOJFrontend.RichTextEditor(options);
+  });
+
+  var $searchToggles = scope.querySelectorAll('[data-module="moj-search-toggle"]');
+  MOJFrontend.nodeListForEach($searchToggles, function ($searchToggle) {
+    new MOJFrontend.SearchToggle({
+      toggleButton: {
+        container: $($searchToggle.querySelector('.moj-search-toggle__toggle')),
+        text: $searchToggle.getAttribute('data-moj-search-toggle-text')
+      },
+      search: {
+        container: $($searchToggle.querySelector('.moj-search'))
+      }
+    });
+  });
+
+  var $sortableTables = scope.querySelectorAll('[data-module="moj-sortable-table"]');
+  MOJFrontend.nodeListForEach($sortableTables, function ($table) {
+    new MOJFrontend.SortableTable({
+      table: $table
+    });
+  });
+
+  var $sortableTables = scope.querySelectorAll('[data-module="moj-sortable-table"]');
+  MOJFrontend.nodeListForEach($sortableTables, function ($table) {
+    new MOJFrontend.SortableTable({
+      table: $table
+    });
+  });
+}
+
 MOJFrontend.AddAnother = function(container) {
 	this.container = $(container);
+
+	if (this.container.data('moj-add-another-initialised')) {
+		return
+	}
+
+	this.container.data('moj-add-another-initialised', true);
+
 	this.container.on('click', '.moj-add-another__remove-button', $.proxy(this, 'onRemoveButtonClick'));
@@ -707,3 +794,10 @@ this.container.on('click', '.moj-add-another__add-button', $.proxy(this, 'onAddButtonClick'));
 MOJFrontend.MultiSelect = function(options) {
-  this.container = options.container;
+  this.container = $(options.container);
+
+  if (this.container.data('moj-multi-select-initialised')) {
+    return
+  }
+
+  this.container.data('moj-multi-select-initialised', true);
+
   this.toggle = $(this.getToggleHtml());
@@ -713,3 +807,3 @@ this.toggleButton = this.toggle.find('input');
   this.container.append(this.toggle);
-  this.checkboxes = options.checkboxes;
+  this.checkboxes = $(options.checkboxes);
   this.checkboxes.on('click', $.proxy(this, 'onCheckboxClick'));
@@ -765,5 +859,14 @@ this.checked = options.checked || false;
 };
+
 MOJFrontend.PasswordReveal = function(element) {
   this.el = element;
-  $(this.el).wrap('<div class="moj-password-reveal"></div>');
+  $el = $(this.el)
+
+  if ($el.data('moj-password-reveal-initialised')) {
+    return
+  }
+
+  $el.data('moj-password-reveal-initialised', true);
+
+  $el.wrap('<div class="moj-password-reveal"></div>');
   this.container = $(this.el).parent();
@@ -788,2 +891,3 @@ this.createButton();
 };
+
 if('contentEditable' in document.documentElement) {
@@ -801,2 +905,9 @@ MOJFrontend.RichTextEditor = function(options) {
     this.container = $(this.textarea).parent();
+
+    if (this.container.data('moj-rich-text-editor-initialised')) {
+      return
+    }
+
+    this.container.data('moj-rich-text-editor-initialised', true);
+
     this.createToolbar();
@@ -922,4 +1033,12 @@ this.hideDefault();
 }
+
 MOJFrontend.SearchToggle = function(options) {
   this.options = options;
+
+  if (this.options.search.container.data('moj-search-toggle-initialised')) {
+    return
+  }
+
+  this.options.search.container.data('moj-search-toggle-initialised', true);
+
   this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">'+this.options.toggleButton.text+'</button>');
@@ -943,2 +1062,9 @@ this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
 	this.table = $(params.table);
+
+	if (this.table.data('moj-search-toggle-initialised')) {
+		return
+	}
+
+	this.table.data('moj-search-toggle-initialised', true);
+
 	this.setupOptions(params);
@@ -1059,3 +1185,4 @@ this.body = this.table.find('tbody');
 };
+
 return MOJFrontend;
 }));

moj/components/add-another/add-another.js

 MOJFrontend.AddAnother = function(container) {
 	this.container = $(container);
+
+	if (this.container.data('moj-add-another-initialised')) {
+		return
+	}
+
+	this.container.data('moj-add-another-initialised', true);
+
 	this.container.on('click', '.moj-add-another__remove-button', $.proxy(this, 'onRemoveButtonClick'));
@@ -4,0 +11,0 @@ this.container.on('click', '.moj-add-another__add-button', $.proxy(this, 'onAddButtonClick'));

moj/components/multi-select/multi-select.js

 MOJFrontend.MultiSelect = function(options) {
-  this.container = options.container;
+  this.container = $(options.container);
+
+  if (this.container.data('moj-multi-select-initialised')) {
+    return
+  }
+
+  this.container.data('moj-multi-select-initialised', true);
+
   this.toggle = $(this.getToggleHtml());
@@ -7,3 +14,3 @@ this.toggleButton = this.toggle.find('input');
   this.container.append(this.toggle);
-  this.checkboxes = options.checkboxes;
+  this.checkboxes = $(options.checkboxes);
   this.checkboxes.on('click', $.proxy(this, 'onCheckboxClick'));
@@ -58,2 +65,2 @@ this.checked = options.checked || false;
   }
-};
+};

moj/components/password-reveal/password-reveal.js

 MOJFrontend.PasswordReveal = function(element) {
   this.el = element;
-  $(this.el).wrap('<div class="moj-password-reveal"></div>');
+  $el = $(this.el)
+
+  if ($el.data('moj-password-reveal-initialised')) {
+    return
+  }
+
+  $el.data('moj-password-reveal-initialised', true);
+
+  $el.wrap('<div class="moj-password-reveal"></div>');
   this.container = $(this.el).parent();
@@ -22,2 +30,2 @@ this.createButton();
   }
-};
+};

moj/components/rich-text-editor/rich-text-editor.js

@@ -13,2 +13,9 @@ if('contentEditable' in document.documentElement) {
     this.container = $(this.textarea).parent();
+
+    if (this.container.data('moj-rich-text-editor-initialised')) {
+      return
+    }
+
+    this.container.data('moj-rich-text-editor-initialised', true);
+
     this.createToolbar();
@@ -133,2 +140,2 @@ this.hideDefault();
 
-}
+}

moj/components/search-toggle/search-toggle.js

 MOJFrontend.SearchToggle = function(options) {
   this.options = options;
+
+  if (this.options.search.container.data('moj-search-toggle-initialised')) {
+    return
+  }
+
+  this.options.search.container.data('moj-search-toggle-initialised', true);
+
   this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">'+this.options.toggleButton.text+'</button>');
@@ -4,0 +11,0 @@ this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));

moj/components/sortable-table/sortable-table.js

 MOJFrontend.SortableTable = function(params) {
 	this.table = $(params.table);
+
+	if (this.table.data('moj-search-toggle-initialised')) {
+		return
+	}
+
+	this.table.data('moj-search-toggle-initialised', true);
+
 	this.setupOptions(params);
@@ -117,2 +124,2 @@ this.body = this.table.find('tbody');
 	return val;
-};
+};

moj/helpers.js

@@ -42,2 +42,11 @@ MOJFrontend.removeAttributeValue = function(el, attr, value) {
   return typeof input.files != 'undefined';
-};
+};
+
+MOJFrontend.nodeListForEach = function(nodes, callback) {
+  if (window.NodeList.prototype.forEach) {
+    return nodes.forEach(callback)
+  }
+  for (var i = 0; i < nodes.length; i++) {
+    callback.call(window, nodes[i], i, nodes)
+  }
+};

package.json

 {
   "name": "@ministryofjustice/frontend",
   "description": "The MOJ Frontend contains the code you need to start building user interfaces for UK Ministry of Justice government services.",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "moj/all.js",
@@ -6,0 +6,0 @@ "sass": "moj/all.scss",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

550761

increased by0.9%

Lines of code

10004

increased by1.32%

No dependency changes