MHS - Slide Out Selector

by mcannon

HTML

<link rel="stylesheet" href="http://codeorigin.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css">
<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css">
<div id="contentWell">
   
     
    <!-- Modal -->
    <div class="modal modal-lrg fade col-md-12" id="myModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Chart Selections</h4>
             
              <div>
                  <table class="chartSelectionInfo">
                      <tr data-bind="if: selectedMetric()">
                          <td>Metric</td>
                          <td><span data-bind="text: ko.unwrap($root.getMetricById(selectedMetric())).name()"></span></td>
                      </tr>
                      <!-- ko if: selectedFromYear() && selectedToYear() -->
                      <tr>
                          <td>Time</td>
                          <td><span data-bind="text:  ko.unwrap($root.getTimeOptionByCode(activeTimeOption())).text + ' (' +...

CSS

.navbar, .navbar-inverse, .navbar-collapse {
  border-radius: 0px !important;
  margin-bottom: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
}

.navbar .container {
  border-radius: 0px !important;
  padding: 0px;
  margin: 0px;
}

.xxxchartSelectionInfo{
    //padding: 10px 0px 0px 20px !important;
    border: 1px;
}

.chartSelectionInfo td{
    padding: 5px 0px 0px 15px;
}
.modal-lrg .modal-dialog
{
  width: 90%;
} 

.col-md-12{ padding-bottom: 15px; }
/*@media (min-width: 400px) { */

JavaScript

/***************************************
*   select2 BindingHandler
***************************************/
/**
 * Select2 - a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
 */
ko.bindingHandlers.yearpicker = {
    init: function(el, valueAccessor, allBindingsAccessor, viewModel) {
      var allBindings = allBindingsAccessor();
      var select = $(el);
      var min = valueAccessor().min;
      var max = valueAccessor().max;
      var year = min;
         for (var i = min; i <= max; i++)
        {
          var option = $('<option/>');
          option.val(i).text(i);
    
          if (year == i)
          {
            option
              .css('font-weight', 'bold')
              .attr('selected', 'selected');
          }
    
          select.append(option);
        }
    },
    update: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        
    }
};

ko.bindingHandlers.select2 = {
    init: function(el, valueAccessor, allBindingsAccessor, viewModel) {
      ko.utils.domNodeDisposal.addDisposeCallback(el, function() {
        $(el).select2('destroy');
      });

      var allBindings = allBindingsAccessor(),
          select2 = ko.utils.unwrapObservable(allBindings.select2);

      $(el).select2(select2);
    },
    update: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        var allBindings = allBindingsAccessor();
console.log("update - ");
        if ("value" in allBindings) {
            $(el).select2("val", allBindings.value());
        } else if ("selectedOptions" in allBindings.select2) {
            var converted = [];
            var textAccessor = function(value) { return value; };
            if ("optionsText" in allBindings) {
                textAccessor = function(value) {
                    var valueAccessor = function (item) { return item; }
                    if ("optionsValue" in allBindings) {
                        valueAccessor =...