Remove regex class jQuery

by Andrew Maestro

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<button class="button--main-menu">1</button>
<button class="button--search-menu">2</button>
<button class="button--user-menu">3</button>

SCSS

button {
  width: 50px;
  height: 50px;
  
  .opened--nav &.button--main-menu {
    background: red;
  }
  
  .opened--search &.button--search-menu {
    background: green;
  }
  
  .opened--user-menu &.button--user-menu {
    background: blue;
  }
}

JavaScript

function naviButtonOnclick(selector, className) {
  var $root = $('body');
  var regexClass = 'opened--';
  var regex = new RegExp('(^|\\s)' + regexClass + '\\S+', 'g');
  
  $('body').addClass('opened');

  function removeWildcardClass() {
    $root.removeClass(function(index, cls) {
      return (cls.match(regex) || []).join(' ');
    });
  }

  $(document).click(removeWildcardClass);

  $(selector).click(function(e) {
    e.stopPropagation();
    if ($root.hasClass(className)) {
      $root.toggleClass(className);
    } else {
      removeWildcardClass();
      $root.addClass(className);
    }
  });
}
naviButtonOnclick('.button--main-menu', 'opened--nav');
naviButtonOnclick('.button--search-menu', 'opened--search');
naviButtonOnclick('.button--user-menu', 'opened--user-menu');