styledot/toggle.js

23andMe Design System

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

var Toggle = /*#__PURE__*/function () {
  function Toggle(options) {
    var _this = this;

    _classCallCheck(this, Toggle);

    this.toggleContainer = document.querySelector("#sd-toggle-container-".concat(options.toggleId));
    this.toggleButtonClass = ".sd-toggle-button-".concat(options.toggleId);
    this.toggleContentClass = ".sd-toggle-content-".concat(options.toggleId); // Set initial state

    this.toggleContainer.querySelector('.selected').setAttribute('aria-pressed', 'true');
    var initialContentId = this.toggleContainer.querySelector('.selected').getAttribute('data-content-id');
    this.toggleVisibleContent(initialContentId); // Add click handling

    var toggleButtons = this.toggleContainer.querySelectorAll('button');
    toggleButtons.forEach(function (button) {
      return button.addEventListener('click', function (event) {
        var $toggleButton = event.target;

        _this.updateButtons($toggleButton);

        _this.toggleVisibleContent($toggleButton.getAttribute('data-content-id'));
      }, false);
    });
  }

  _createClass(Toggle, [{
    key: "updateButtons",
    value: function updateButtons($toggleButton) {
      var toggleButtons = this.toggleContainer.querySelectorAll(this.toggleButtonClass);
      toggleButtons.forEach(function (button) {
        button.classList.remove('selected');
        button.setAttribute('aria-pressed', 'false');
      });
      $toggleButton.classList.add('selected');
      $toggleButton.setAttribute('aria-pressed', 'true');
    }
  }, {
    key: "toggleVisibleContent",
    value: function toggleVisibleContent(contentId) {
      var toggleButtons = this.toggleContainer.querySelectorAll('button:not(.selected)');
      toggleButtons.forEach(function (button) {
        return button.setAttribute('aria-pressed', 'false');
      });
      var toggleContent = document.querySelectorAll(this.toggleContentClass);
      toggleContent.forEach(function (content) {
        return content.classList.remove('selected');
      });
      var selectedContent = document.querySelectorAll("".concat(this.toggleContentClass, "-").concat(contentId));
      selectedContent.forEach(function (content) {
        return content.classList.add('selected');
      });
    }
  }]);

  return Toggle;
}();

var _default = Toggle;
exports["default"] = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJUb2dnbGUiLCJvcHRpb25zIiwidG9nZ2xlQ29udGFpbmVyIiwiZG9jdW1lbnQiLCJxdWVyeVNlbGVjdG9yIiwidG9nZ2xlSWQiLCJ0b2dnbGVCdXR0b25DbGFzcyIsInRvZ2dsZUNvbnRlbnRDbGFzcyIsInNldEF0dHJpYnV0ZSIsImluaXRpYWxDb250ZW50SWQiLCJnZXRBdHRyaWJ1dGUiLCJ0b2dnbGVWaXNpYmxlQ29udGVudCIsInRvZ2dsZUJ1dHRvbnMiLCJxdWVyeVNlbGVjdG9yQWxsIiwiZm9yRWFjaCIsImJ1dHRvbiIsImFkZEV2ZW50TGlzdGVuZXIiLCJldmVudCIsIiR0b2dnbGVCdXR0b24iLCJ0YXJnZXQiLCJ1cGRhdGVCdXR0b25zIiwiY2xhc3NMaXN0IiwicmVtb3ZlIiwiYWRkIiwiY29udGVudElkIiwidG9nZ2xlQ29udGVudCIsImNvbnRlbnQiLCJzZWxlY3RlZENvbnRlbnQiXSwic291cmNlcyI6WyIuLi9zcmMvbGliL3RvZ2dsZS5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJjbGFzcyBUb2dnbGUge1xuICAgIGNvbnN0cnVjdG9yKG9wdGlvbnMpIHtcbiAgICAgICAgdGhpcy50b2dnbGVDb250YWluZXIgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKGAjc2QtdG9nZ2xlLWNvbnRhaW5lci0ke29wdGlvbnMudG9nZ2xlSWR9YCk7XG4gICAgICAgIHRoaXMudG9nZ2xlQnV0dG9uQ2xhc3MgPSBgLnNkLXRvZ2dsZS1idXR0b24tJHtvcHRpb25zLnRvZ2dsZUlkfWA7XG4gICAgICAgIHRoaXMudG9nZ2xlQ29udGVudENsYXNzID0gYC5zZC10b2dnbGUtY29udGVudC0ke29wdGlvbnMudG9nZ2xlSWR9YDtcblxuICAgICAgICAvLyBTZXQgaW5pdGlhbCBzdGF0ZVxuICAgICAgICB0aGlzLnRvZ2dsZUNvbnRhaW5lci5xdWVyeVNlbGVjdG9yKCcuc2VsZWN0ZWQnKS5zZXRBdHRyaWJ1dGUoJ2FyaWEtcHJlc3NlZCcsICd0cnVlJyk7XG4gICAgICAgIGNvbnN0IGluaXRpYWxDb250ZW50SWQgPSB0aGlzLnRvZ2dsZUNvbnRhaW5lci5xdWVyeVNlbGVjdG9yKCcuc2VsZWN0ZWQnKS5nZXRBdHRyaWJ1dGUoJ2RhdGEtY29udGVudC1pZCcpO1xuICAgICAgICB0aGlzLnRvZ2dsZVZpc2libGVDb250ZW50KGluaXRpYWxDb250ZW50SWQpO1xuXG4gICAgICAgIC8vIEFkZCBjbGljayBoYW5kbGluZ1xuICAgICAgICBjb25zdCB0b2dnbGVCdXR0b25zID0gdGhpcy50b2dnbGVDb250YWluZXIucXVlcnlTZWxlY3RvckFsbCgnYnV0dG9uJyk7XG4gICAgICAgIHRvZ2dsZUJ1dHRvbnMuZm9yRWFjaChidXR0b24gPT5cbiAgICAgICAgICAgIGJ1dHRvbi5hZGRFdmVudExpc3RlbmVyKFxuICAgICAgICAgICAgICAgICdjbGljaycsXG4gICAgICAgICAgICAgICAgZXZlbnQgPT4ge1xuICAgICAgICAgICAgICAgICAgICBjb25zdCAkdG9nZ2xlQnV0dG9uID0gZXZlbnQudGFyZ2V0O1xuICAgICAgICAgICAgICAgICAgICB0aGlzLnVwZGF0ZUJ1dHRvbnMoJHRvZ2dsZUJ1dHRvbik7XG4gICAgICAgICAgICAgICAgICAgIHRoaXMudG9nZ2xlVmlzaWJsZUNvbnRlbnQoJHRvZ2dsZUJ1dHRvbi5nZXRBdHRyaWJ1dGUoJ2RhdGEtY29udGVudC1pZCcpKTtcbiAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgIGZhbHNlXG4gICAgICAgICAgICApXG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgdXBkYXRlQnV0dG9ucygkdG9nZ2xlQnV0dG9uKSB7XG4gICAgICAgIGNvbnN0IHRvZ2dsZUJ1dHRvbnMgPSB0aGlzLnRvZ2dsZUNvbnRhaW5lci5xdWVyeVNlbGVjdG9yQWxsKHRoaXMudG9nZ2xlQnV0dG9uQ2xhc3MpO1xuICAgICAgICB0b2dnbGVCdXR0b25zLmZvckVhY2goYnV0dG9uID0+IHtcbiAgICAgICAgICAgIGJ1dHRvbi5jbGFzc0xpc3QucmVtb3ZlKCdzZWxlY3RlZCcpO1xuICAgICAgICAgICAgYnV0dG9uLnNldEF0dHJpYnV0ZSgnYXJpYS1wcmVzc2VkJywgJ2ZhbHNlJyk7XG4gICAgICAgIH0pO1xuICAgICAgICAkdG9nZ2xlQnV0dG9uLmNsYXNzTGlzdC5hZGQoJ3NlbGVjdGVkJyk7XG4gICAgICAgICR0b2dnbGVCdXR0b24uc2V0QXR0cmlidXRlKCdhcmlhLXByZXNzZWQnLCAndHJ1ZScpO1xuICAgIH1cblxuICAgIHRvZ2dsZVZpc2libGVDb250ZW50KGNvbnRlbnRJZCkge1xuICAgICAgICBjb25zdCB0b2dnbGVCdXR0b25zID0gdGhpcy50b2dnbGVDb250YWluZXIucXVlcnlTZWxlY3RvckFsbCgnYnV0dG9uOm5vdCguc2VsZWN0ZWQpJyk7XG4gICAgICAgIHRvZ2dsZUJ1dHRvbnMuZm9yRWFjaChidXR0b24gPT4gYnV0dG9uLnNldEF0dHJpYnV0ZSgnYXJpYS1wcmVzc2VkJywgJ2ZhbHNlJykpO1xuXG4gICAgICAgIGNvbnN0IHRvZ2dsZUNvbnRlbnQgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKHRoaXMudG9nZ2xlQ29udGVudENsYXNzKTtcbiAgICAgICAgdG9nZ2xlQ29udGVudC5mb3JFYWNoKGNvbnRlbnQgPT4gY29udGVudC5jbGFzc0xpc3QucmVtb3ZlKCdzZWxlY3RlZCcpKTtcblxuICAgICAgICBjb25zdCBzZWxlY3RlZENvbnRlbnQgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKGAke3RoaXMudG9nZ2xlQ29udGVudENsYXNzfS0ke2NvbnRlbnRJZH1gKTtcbiAgICAgICAgc2VsZWN0ZWRDb250ZW50LmZvckVhY2goY29udGVudCA9PiBjb250ZW50LmNsYXNzTGlzdC5hZGQoJ3NlbGVjdGVkJykpO1xuICAgIH1cbn1cblxuZXhwb3J0IGRlZmF1bHQgVG9nZ2xlO1xuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7O0lBQU1BLE07RUFDRixnQkFBWUMsT0FBWixFQUFxQjtJQUFBOztJQUFBOztJQUNqQixLQUFL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