Merge pull request #37 from palcarazm:palcarazm/issue35

feat: Support readonly attribute

README.md

@@ -135,15 +135,16 @@ Methods can be used to control toggles directly.
 <input id="toggle-demo" type="checkbox" data-toggle="toggle">
 ```
 
-Method |Example |Description
------------|------------------------------------------------|------------------------------------------
-initialize | `$('#toggle-demo').bootstrapToggle()` |Initializes the toggle plugin with options
-destroy | `$('#toggle-demo').bootstrapToggle('destroy')` |Destroys the toggle
-on | `$('#toggle-demo').bootstrapToggle('on')` |Sets the toggle to 'On' state
-off | `$('#toggle-demo').bootstrapToggle('off')` |Sets the toggle to 'Off' state
-toggle | `$('#toggle-demo').bootstrapToggle('toggle')` |Toggles the state of the toggle on/off
-enable | `$('#toggle-demo').bootstrapToggle('enable')` |Enables the toggle
-disable | `$('#toggle-demo').bootstrapToggle('disable')` |Disables the toggle
+Method |Example |Description
+-----------|-------------------------------------------------|------------------------------------------
+initialize | `$('#toggle-demo').bootstrapToggle()` |Initializes the toggle plugin with options
+destroy | `$('#toggle-demo').bootstrapToggle('destroy')` |Destroys the toggle
+on | `$('#toggle-demo').bootstrapToggle('on')` |Sets the toggle to 'On' state
+off | `$('#toggle-demo').bootstrapToggle('off')` |Sets the toggle to 'Off' state
+toggle | `$('#toggle-demo').bootstrapToggle('toggle')` |Toggles the state of the toggle on/off
+enable | `$('#toggle-demo').bootstrapToggle('enable')` |Enables the toggle
+disable | `$('#toggle-demo').bootstrapToggle('disable')` |Disables the toggle
+readonly | `$('#toggle-demo').bootstrapToggle('readonly')` |Disables the toggle but preserve checkbox enabled
 
 # Events
 

cypress/e2e/api-methods.spec.cy.js

@@ -40,11 +40,22 @@ function testCase(bstInterface) {
  PageModel.getTests().each(($test) => {
  cy.wrap($test).find('button[data-method="initialize"]').click()
  cy.wrap($test).find('button[data-method="disable"]').click()
- cy.wrap($test).find('.toggle').should('have.class', 'disabled').and('have.attr', 'disabled', 'disabled');
+ cy.wrap($test).find('.toggle').should('have.class', 'disabled').and('have.attr', 'disabled');
  cy.wrap($test).find('input').should('be.disabled');
  });
  });
  });
+ context("When the API readonly method is call", () => {
+ it("Then toggle is disabled and the checkbox is set as readonly", () => {
+ PageModel.load(bstInterface, data_test);
+ PageModel.getTests().each(($test) => {
+ cy.wrap($test).find('button[data-method="initialize"]').click()
+ cy.wrap($test).find('button[data-method="readonly"]').click()
+ cy.wrap($test).find('.toggle').should('have.class', 'disabled').and('have.attr', 'disabled');
+ cy.wrap($test).find('input').should('not.be.disabled').and('have.attr','readonly');
+ });
+ });
+ });
  context("When the API enable method is call", () => {
  it("Then toggle and the checkbox are enabled", () => {
  PageModel.load(bstInterface, data_test);

cypress/e2e/status.spec.cy.js

@@ -74,4 +74,35 @@ function testCase(bstInterface) {
  });
  });
  });
+
+ context("When toggle is readonly", () => {
+ const test_id = "#status-readonly";
+ it("Then toggle opacity is equal to bootstrap disabled button opacity", () => {
+ PageModel.load(bstInterface, data_test);
+ cy.get(test_id).each(($test) => {
+ PageModel.assertComputedStyleProperty($test,'button','.toggle','opacity');
+ });
+ });
+
+ it("Then toggle cursor is equal to bootstrap disabled button cursor", () => {
+ PageModel.load(bstInterface, data_test);
+ cy.get(test_id).each(($test) => {
+ PageModel.assertComputedStyleProperty($test,'button','.toggle','cursor');
+ });
+ });
+
+ it("Then toggle pointer events are equal to bootstrap disabled button pointer events", () => {
+ PageModel.load(bstInterface, data_test);
+ cy.get(test_id).each(($test) => {
+ PageModel.assertComputedStyleProperty($test,'button','.toggle','pointer-events');
+ });
+ });
+
+ it.only("Then toggle do not change on click", () => {
+ PageModel.load(bstInterface, data_test);
+ cy.get(test_id).each(($test) => {
+ ToggleModel.checkToggleClick($test, false, 'readonly');
+ });
+ });
+ });
 }

cypress/support/togglemodel.js

@@ -14,12 +14,21 @@ class ToggleModel {
  * Check a click in a toggle element
  * @param {Chainable<JQuery<HTMLElementTagNameMap[K]>>} test : test element
  * @param {Boolean} isEnabled: Toggle enabled (Y/N)
+ * @param {String} inputAttr: input attribute for disabled toggle [disabled (default) or readonly]
  * @static
  */
- static checkToggleClick(test, isEnabled) {
+ static checkToggleClick(test, isEnabled, inputAttr = 'disabled') {
  let prevState = test.find(".toggle input").is("[checked]");
 
- cy.wrap(test).find(".toggle input").should(isEnabled ? "be.enabled" : "not.be.enabled");
+ if(isEnabled){
+ cy.wrap(test).find(".toggle input").should("be.enabled");
+ }else if(inputAttr == 'disabled'){
+ cy.wrap(test).find('input').should('be.disabled').and('not.have.attr','readonly');
+ }else if(inputAttr == 'readonly'){
+ cy.wrap(test).find('input').should('be.enabled').and('have.attr','readonly');
+ }else{
+ throw new Error("Test fail. Argument not supported for inputAttr " + inputAttr);
+ }
 
  cy.wrap(test).find(".toggle").click({force: true}).then(() => {
  let isChecked = (isEnabled && !prevState) || (!isEnabled && prevState) ;

js/bootstrap5-toggle.ecmas.js

@@ -112,7 +112,7 @@
  ecmasToggle.classList.add(style);
  });
  }
- if (this.element.disabled){
+ if (this.element.disabled || this.element.readOnly){
  ecmasToggle.classList.add('disabled');
  ecmasToggle.setAttribute('disabled', 'disabled');
  }
@@ -165,7 +165,7 @@
  }
 
  on(silent = false) {
- if (this.element.disabled) return false;
+ if (this.element.disabled || this.element.readOnly) return false;
  this.ecmasToggle.classList.remove('btn-' + this.options.offstyle);
  this.ecmasToggle.classList.add('btn-' + this.options.onstyle);
  this.ecmasToggle.classList.remove('off');
@@ -174,7 +174,7 @@
  }
 
  off(silent = false) {
- if (this.element.disabled) return false;
+ if (this.element.disabled || this.element.readOnly) return false;
  this.ecmasToggle.classList.remove('btn-' + this.options.onstyle);
  this.ecmasToggle.classList.add('btn-' + this.options.offstyle);
  this.ecmasToggle.classList.add('off');
@@ -186,16 +186,26 @@
  this.ecmasToggle.classList.remove('disabled');
  this.ecmasToggle.removeAttribute('disabled');
  this.element.removeAttribute('disabled');
+ this.element.removeAttribute('readonly');
  }
 
  disable() {
  this.ecmasToggle.classList.add('disabled');
- this.ecmasToggle.setAttribute('disabled', 'disabled');
- this.element.setAttribute('disabled', 'disabled');
+ this.ecmasToggle.setAttribute('disabled', '');
+ this.element.setAttribute('disabled', '');
+ this.element.removeAttribute('readonly');
+ }
+
+ readonly() {
+ this.ecmasToggle.classList.add('disabled');
+ this.ecmasToggle.setAttribute('disabled', '');
+ this.element.removeAttribute('disabled');
+ this.element.setAttribute('readonly', '');
  }
 
  update(silent) {
  if (this.element.disabled) this.disable();
+ else if (this.element.readOnly) this.readonly();
  else this.enable();
  if (this.element.checked) this.on(silent);
  else this.off(silent);
@@ -230,6 +240,7 @@
  else if (options.toLowerCase() == 'off') _bsToggle.off(silent);
  else if (options.toLowerCase() == 'enable') _bsToggle.enable();
  else if (options.toLowerCase() == 'disable') _bsToggle.disable();
+ else if (options.toLowerCase() == 'readonly') _bsToggle.readonly();
  else if (options.toLowerCase() == 'destroy') _bsToggle.destroy();
  }
  };