Bootstrap Panel

by chrischilcoat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>




<div class="container-fluid ui-yakabox-thumbnail-buttons ">
  <div class="row">
    <div class="col-sm-7" style="border-right: 1px solid #eee;">
      <div class="row">
        <div class="col-sm-12 text-center">
          <h3>Form Visibility</h3>
          <p>Who can see the form and submit.</p>
          <br/>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <span class="thumbnail disabled" data-group="1" data-toggle="tooltip" data-placement="top" title="Disabled" data-delay='{"show":"100", "hide":"0"}'>
           <div class="caption text-center">
             <i class="fa fa-check-circle"></i>
             <i class="fa fa-globe fa-3x"></i>
             <h5>Everyone</h5>
             <p>This form is visible to <span>all <strong>Users</strong> and <strong>Website Visitors</strong></span></p>
           </div>
          </span>
        </div>
        <div class="col-md-4">
          <span class="thumbnail active" data-group="1">
           <div class="caption text-center">
             <i class="fa fa-check-circle"></i>
             <i class="fa fa-square fa-3x"></i>
             <h5>All Yakabox Users</h5>
             <p>This form is visible to <span class="proto-thumbnail-text">all <strong>Yakabox Users</strong></span></p>
             <p class="ui-yakabox-hr-text"><span>OR</span></p>
   
             <div class="proto-js-buttongroups">
               
             </div>
             
     
             <div...

SCSS

body {padding:20px}

.ui-yakabox-thumbnail-buttons {
.thumbnail {
  opacity:.8;
  padding-top:20px;
  padding-bottom:20px;
   transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
  &.disabled {
    opacity:.4;
    &:hover {
      background-color: #fff;
      border: 1px solid #ddd;
      opacity:.4;
    }
  }
  .ui-yakabox-hr-text {
    display:none;
  }
  .input-group {
    display:none;
  }
  .btn-group {
    margin:0 1px 4px;
  }
  .fa-check-circle {
    display:none;
  }
  &.active,
  &:hover {
    opacity:1;
    text-decoration:none;
    background-color:#d9edf7;
  }
  &.active {
    background: #d9edf7;
    color: #31708f;
    .fa-check-circle {
      display:block;
      position: absolute;
      top: -13px;
      left: 50%;
      margin-left: -12px;
      font-size: 21px;
      background: #337ab7;
      border-radius: 100%;
      border: 2px solid #337ab7;
      color: white;
      text-align: center;
      padding: 0;
      border-left-width: 1px;
      border-top-width: 2px;
      box-shadow: 0px 0px 3px #337ab7;
      border-bottom-width: 1px;
    }
 
    .input-group {
      display:table;
    }
    .ui-yakabox-hr-text {
      display:block;
    }
  }
}

}

.ui-yakabox-hr-text {
  border-top: 1px solid #337ab7;
  margin: 22px 0;
  span {
    margin-top: -9px;
    position: absolute;
    background: #d9edf7;
    color: #337ab7;
    font-weight: bold;
    font-size: 12px;
    padding: 0 11px;
    margin-left: -20px;
  }
}

JavaScript

(function($) {
  'use strict';
  $.fn.extend({
    setup: function() {
      return this.each(function() {
        var $this = $(this),
          $window = $(window),
          $input = $(".typeahead"),
          $hr = $(".ui-yakabox-hr-text"),
          $thumbnailText = $('.proto-thumbnail-text'),
          $buttonGroups = $(".proto-js-buttongroups");

        $input.typeahead({
          source: [{
              id: "1",
              name: "Chris Chilcoat"
            },
            {
              id: "2",
              name: "Doug Sohn"
            },
            {
              id: "3",
              name: "Admin Group"
            },
            {
              id: "4",
              name: "Super User Group"
            }
          ],
          autoSelect: true,
          afterSelect: function() {
            var v = $input.val(),
              b = '<div class="btn-group" role="group">' +
              ' <button type="button" class="btn btn-sm btn-primary">' + v + '</button>' +
              ' <button type="button" class="btn btn-sm btn-primary">' +
              '  <span class="fa fa-times"></span>' +
              ' </button>' +
              '</div>';

            $buttonGroups.append(b);
            $thumbnailText.html('the following users:');
            $hr.hide();
            $input.val('');
          }
        });

        $this.on('click', function(e) {
        
          if (!$(this).hasClass('disabled')) {
            var group = $(this).data('group');
            $('.thumbnail[data-group=' + group + ']').removeClass('active');
            $this.addClass('active');
            $this.tooltip('destroy');
          } else {
            alert('Once a form has been created this option is no longer available.')
          }
          e.preventDefault();
          
        });

      });
    }
  });
})(jQuery);


$('.thumbnail').setup();
$('[data-toggle="tooltip"]').tooltip()