refactor

app/assets/javascripts/admin/communication/preview.js

 $(function() {
-    $('.preview__button__mobile').on('click', function(){
-      $('.preview__button').removeClass('btn-primary').addClass('btn-light');
-      $('.preview__button__mobile').removeClass('btn-light').addClass('btn-primary');
-      $('#preview').removeClass('preview--desktop').removeClass('preview--tablet').addClass('preview--mobile');
-    });
-    $('.preview__button__tablet').on('click', function(){
-      $('.preview__button').removeClass('btn-primary').addClass('btn-light');
-      $('.preview__button__tablet').removeClass('btn-light').addClass('btn-primary');
-      $('#preview').removeClass('preview--mobile').removeClass('preview--desktop').addClass('preview--tablet');
-    });
-    $('.preview__button__desktop').on('click', function(){
-      $('.preview__button').removeClass('btn-primary').addClass('btn-light');
-      $('.preview__button__desktop').removeClass('btn-light').addClass('btn-primary');
-      $('#preview').removeClass('preview--mobile').removeClass('preview--tablet').addClass('preview--desktop');
-    });
-  });
\ No newline at end of file
+  'use strict';
+  var modes = ['mobile', 'tablet', 'desktop'],
+      mode = '';
+  $('.preview__button').on('click', function(){
+    mode = $(this).data('mode');
+    $('.preview__button').removeClass('btn-primary').addClass('btn-light');
+    $(this).removeClass('btn-light').addClass('btn-primary');
+    $('#preview').removeClass('preview--desktop').removeClass('preview--tablet').removeClass('preview--mobile').addClass('preview--' + mode);
+  });
+});
\ No newline at end of file

app/views/admin/application/_preview.html.erb

@@ -4,15 +4,15 @@
       <div class="modal-header">
         <h5 class="modal-title h4"><%= t 'preview.title' %></h5>
         <div class="btn-group m-auto" role="group" aria-label="Basic example">
-          <button type="button" class="btn btn-primary preview__button preview__button__mobile">
+          <button type="button" class="btn btn-primary preview__button" data-mode="mobile">
             <i class="fas fa-mobile"></i>
             <%= t 'preview.mobile' %>
           </button>
-          <button type="button" class="btn btn-light preview__button preview__button__tablet">
+          <button type="button" class="btn btn-light preview__button" data-mode="tablet">
             <i class="fas fa-tablet"></i>
             <%= t 'preview.tablet' %>
           </button>
-          <button type="button" class="btn btn-light preview__button preview__button__desktop">
+          <button type="button" class="btn btn-light preview__button" data-mode="desktop">
             <i class="fas fa-desktop"></i>
             <%= t 'preview.desktop' %>
           </button>