@hmcts/frontend - npm Package Compare versions

Comparing version 0.0.28-alpha to 0.0.29-alpha

all.js

@@ -308,5 +308,13 @@ var HMCTSFrontend = {};
 if('contentEditable' in document.documentElement) {
-  HMCTSFrontend.RichTextEditor = function(textarea) {
-    this.textarea = textarea;
-    this.container = $(textarea).parent();
+  HMCTSFrontend.RichTextEditor = function(options) {
+    this.options = options;
+    this.options.toolbar = this.options.toolbar || {
+      bold: false,
+      italic: false,
+      underline: false,
+      list: true,
+      numbers: true
+    };
+    this.textarea = this.options.textarea;
+    this.container = $(this.textarea).parent();
     this.createToolbar();
@@ -323,3 +331,3 @@ this.hideDefault();
     this.container.find('.hmcts-rich-text-editor__content').on('input', $.proxy(this, 'onEditorInput'));
-
+    this.container.find('label').on('click', $.proxy(this, 'onLabelClick'));
     this.toolbar.on('keydown', $.proxy(this, 'onToolbarKeydown'));
@@ -354,14 +362,35 @@ };
 
+  HMCTSFrontend.RichTextEditor.prototype.getToolbarHtml = function() {
+    var html = '';
+
+    html += '<div class="hmcts-rich-text-editor__toolbar" role="toolbar">';
+
+    if(this.options.toolbar.bold) {
+      html += '<button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>';
+    }
+
+    if(this.options.toolbar.italic) {
+      html += '<button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>';
+    }
+
+    if(this.options.toolbar.underline) {
+      html += '<button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>';
+    }
+
+    if(this.options.toolbar.list) {
+      html += '<button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>';
+    }
+
+    if(this.options.toolbar.numbers) {
+      html += '<button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>';
+    }
+
+    html += '</div>';
+    return html;
+  };
+
   HMCTSFrontend.RichTextEditor.prototype.getEnhancedHtml = function(val) {
-    return `<div class="hmcts-rich-text-editor__toolbar" role="toolbar">
-              <button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>
-              <button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>
-              <button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>
-              <button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>
-              <button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>
-            </div>
-            <div class="hmcts-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>`;
+    return this.getToolbarHtml() + '<div class="hmcts-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>';
   };
 
-
   HMCTSFrontend.RichTextEditor.prototype.hideDefault = function() {
@@ -395,3 +424,3 @@ this.textarea = this.container.find('textarea');
   HMCTSFrontend.RichTextEditor.prototype.getContent = function() {
-    return this.container.find('.hmcts-rich-text-editor__content')[0].innerHTML;
+    return this.container.find('.hmcts-rich-text-editor__content').html();
   };
@@ -407,2 +436,8 @@
   };
+
+  HMCTSFrontend.RichTextEditor.prototype.onLabelClick = function(e) {
+    e.preventDefault();
+    this.container.find('.hmcts-rich-text-editor__content').focus();
+  };
+
 }
@@ -409,0 +444,0 @@ HMCTSFrontend.SearchToggleButton = function(options) {

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

 if('contentEditable' in document.documentElement) {
-  HMCTSFrontend.RichTextEditor = function(textarea) {
-    this.textarea = textarea;
-    this.container = $(textarea).parent();
+  HMCTSFrontend.RichTextEditor = function(options) {
+    this.options = options;
+    this.options.toolbar = this.options.toolbar || {
+      bold: false,
+      italic: false,
+      underline: false,
+      list: true,
+      numbers: true
+    };
+    this.textarea = this.options.textarea;
+    this.container = $(this.textarea).parent();
     this.createToolbar();
@@ -16,3 +24,3 @@ this.hideDefault();
     this.container.find('.hmcts-rich-text-editor__content').on('input', $.proxy(this, 'onEditorInput'));
-
+    this.container.find('label').on('click', $.proxy(this, 'onLabelClick'));
     this.toolbar.on('keydown', $.proxy(this, 'onToolbarKeydown'));
@@ -47,14 +55,35 @@ };
 
+  HMCTSFrontend.RichTextEditor.prototype.getToolbarHtml = function() {
+    var html = '';
+
+    html += '<div class="hmcts-rich-text-editor__toolbar" role="toolbar">';
+
+    if(this.options.toolbar.bold) {
+      html += '<button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>';
+    }
+
+    if(this.options.toolbar.italic) {
+      html += '<button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>';
+    }
+
+    if(this.options.toolbar.underline) {
+      html += '<button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>';
+    }
+
+    if(this.options.toolbar.list) {
+      html += '<button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>';
+    }
+
+    if(this.options.toolbar.numbers) {
+      html += '<button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>';
+    }
+
+    html += '</div>';
+    return html;
+  };
+
   HMCTSFrontend.RichTextEditor.prototype.getEnhancedHtml = function(val) {
-    return `<div class="hmcts-rich-text-editor__toolbar" role="toolbar">
-              <button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>
-              <button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>
-              <button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>
-              <button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>
-              <button class="hmcts-rich-text-editor__toolbar-button hmcts-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>
-            </div>
-            <div class="hmcts-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>`;
+    return this.getToolbarHtml() + '<div class="hmcts-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>';
   };
 
-
   HMCTSFrontend.RichTextEditor.prototype.hideDefault = function() {
@@ -88,3 +117,3 @@ this.textarea = this.container.find('textarea');
   HMCTSFrontend.RichTextEditor.prototype.getContent = function() {
-    return this.container.find('.hmcts-rich-text-editor__content')[0].innerHTML;
+    return this.container.find('.hmcts-rich-text-editor__content').html();
   };
@@ -100,2 +129,8 @@
   };
+
+  HMCTSFrontend.RichTextEditor.prototype.onLabelClick = function(e) {
+    e.preventDefault();
+    this.container.find('.hmcts-rich-text-editor__content').focus();
+  };
+
 }

package.json

 {
   "name": "@hmcts/frontend",
   "description": "HMCTS Frontend contains the code you need to start building a user interface for HMCTS.",
-  "version": "0.0.28-alpha",
+  "version": "0.0.29-alpha",
   "main": "all.js",
@@ -6,0 +6,0 @@ "sass": "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

412636

increased by0.4%

Lines of code

8747

increased by0.62%

No dependency changes