RubyGems - patternfly-sass - Versions diffs - 3.23.2 → 3.31.1 - Mend

patternfly-sass 3.23.2 → 3.31.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (369) hide show

data/spec/html/wizard.html DELETED Viewed

@@ -1,756 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
-<!--[if gt IE 9]><!-->
-<html lang="en-us">
-<!--<![endif]-->
-  <head>
-    <title>Wizard - PatternFly</title>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" href="../../dist/img/favicon.ico">
-    <!-- iPad retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../dist/img/apple-touch-icon-precomposed-152.png">
-    <!-- iPad retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../dist/img/apple-touch-icon-precomposed-144.png">
-    <!-- iPad non-retina icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../../dist/img/apple-touch-icon-precomposed-76.png">
-    <!-- iPad non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/img/apple-touch-icon-precomposed-72.png">
-    <!-- iPhone 6 Plus icon -->
-    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../../dist/img/apple-touch-icon-precomposed-180.png">
-    <!-- iPhone retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/img/apple-touch-icon-precomposed-114.png">
-    <!-- iPhone non-retina icon (iOS < 7) -->
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
-    <link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
-    <link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
-      <link href="tests.css" rel="stylesheet" media="screen, print">
-    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
-    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <script src="./../../dist/js/patternfly.min.js"></script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="page-header">
-        <h1>Wizard</h1>
-      </div>
-      <div class="alert alert-warning">
-        <span class="pficon pficon-warning-triangle-o"></span>
-        These examples are included for development testing purposes.  For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
-      </div>
-      <hr>
-<h2>Complete Wizard</h2>
-<button class="btn btn-default wizard-pf-open wizard-pf-complete" data-target="#complete">Launch wizard</button>
-<div class="modal" id="complete" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-lg wizard-pf">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close wizard-pf-dismiss" aria-label="Close"><span
-          aria-hidden="true">&times;</span></button>
-        <dt class="modal-title">Wizard Title</dt>
-      </div>
-      <div class="modal-body wizard-pf-body clearfix">
-        <div class="wizard-pf-steps hidden">
-          <ul class="wizard-pf-steps-indicator">
-            <li class="wizard-pf-step active" data-tabgroup="1">
-              <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
-            </li>
-            <li class="wizard-pf-step" data-tabgroup="2">
-              <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
-            </li>
-            <li class="wizard-pf-step" data-tabgroup="3">
-              <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
-            </li>
-          </ul>
-        </div>
-        <div class="wizard-pf-row">
-          <div class="wizard-pf-sidebar hidden">
-            <ul class="list-group">
-              <li class="list-group-item active">
-                <a href="#">
-                  <span class="wizard-pf-substep-number">1A.</span>
-                  <span class="wizard-pf-substep-title">Details</span>
-                </a>
-              </li>
-              <li class="list-group-item">
-                <a href="#">
-                  <span class="wizard-pf-substep-number">1B.</span>
-                  <span class="wizard-pf-substep-title">Settings</span>
-                </a>
-              </li>
-            </ul>
-            <ul class="list-group hidden">
-              <li class="list-group-item">
-                <a href="#">
-                  <span class="wizard-pf-substep-number">2A.</span>
-                  <span class="wizard-pf-substep-title">Details</span>
-                </a>
-              </li>
-              <li class="list-group-item">
-                <a href="#">
-                  <span class="wizard-pf-substep-number">2B.</span>
-                  <span class="wizard-pf-substep-title">Settings</span>
-                </a>
-              </li>
-            </ul>
-            <ul class="list-group hidden">
-              <li class="list-group-item">
-                <a>
-                  <span class="wizard-pf-substep-number">3A.</span>
-                  <span class="wizard-pf-substep-title">Summary</span>
-                </a>
-              </li>
-              <li class="list-group-item">
-                <a>
-                  <span class="wizard-pf-substep-number">3B.</span>
-                  <span class="wizard-pf-substep-title">Progress</span>
-                </a>
-              </li>
-            </ul>
-          </div> <!-- /.wizard-pf-sidebar -->
-          <div class="wizard-pf-main">
-            <div class="wizard-pf-loading blank-slate-pf">
-              <div class="spinner spinner-lg blank-slate-pf-icon"></div>
-              <h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
-              <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
-                vivamus, lorem sociosqu eget nunc amet. </p>
-            </div>
-            <div class="wizard-pf-contents hidden">
-              <form class="form-horizontal">
-                <!-- replacing id with data-id to pass build errors -->
-                <div class="form-group required">
-                  <label class="col-sm-2 control-label" for="textInput-markup">Name</label>
-                  <div class="col-sm-10">
-                    <input type="text" data-id="textInput-markup" class="form-control">
-                  </div>
-                </div>
-                <div class="form-group">
-                  <label class="col-sm-2 control-label" for="descriptionInput-markup">Description (Optional)</label>
-                  <div class="col-sm-10">
-                    <textarea data-id="descriptionInput-markup" class="form-control" rows="2"></textarea>
-                  </div>
-                </div>
-              </form>
-            </div>
-            <div class="wizard-pf-contents hidden">
-              <form class="form-horizontal">
-                <div class="form-group required">
-                  <label class="col-sm-2 control-label" for="lorem">Lorem ipsum</label>
-                  <div class="col-sm-10">
-                    <input type="text" id="lorem" class="form-control">
-                  </div>
-                </div>
-                <div class="form-group">
-                  <label class="col-sm-2 control-label" for="dolor">Dolor (Optional)</label>
-                  <div class="col-sm-10">
-                    <textarea id="dolor" class="form-control" rows="2"></textarea>
-                  </div>
-                </div>
-              </form>
-            </div>
-            <div class="wizard-pf-contents hidden">
-              <form class="form-horizontal">
-                <div class="form-group required">
-                  <label class="col-sm-2 control-label" for="aliquam">Aliquam</label>
-                  <div class="col-sm-10">
-                    <input type="text" id="aliquam" class="form-control">
-                  </div>
-                </div>
-                <div class="form-group">
-                  <label class="col-sm-2 control-label" for="fermentum">Fermentum</label>
-                  <div class="col-sm-10">
-                    <textarea id="fermentum" class="form-control" rows="2"></textarea>
-                  </div>
-                </div>
-              </form>
-            </div>
-            <div class="wizard-pf-contents hidden">
-              <form class="form-horizontal">
-                <div class="form-group required">
-                  <label class="col-sm-2 control-label" for="consectetur">Consectetur</label>
-                  <div class="col-sm-10">
-                    <input type="text" id="consectetur" class="form-control">
-                  </div>
-                </div>
-                <div class="form-group">
-                  <label class="col-sm-2 control-label" for="adipiscing">Adipiscing</label>
-                  <div class="col-sm-10">
-                    <textarea id="adipiscing" class="form-control" rows="2"></textarea>
-                  </div>
-                </div>
-              </form>
-            </div>
-            <div class="wizard-pf-contents hidden">
-              <div class="wizard-pf-review-steps">
-                <ul class="list-group">
-                  <li class="list-group-item">
-                    <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1').toggleClass('collapse');">First Step</a>
-                    <div id="reviewStep1" class="wizard-pf-review-substeps">
-                      <ul class="list-group">
-                        <li class="list-group-item">
-                          <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep1').toggleClass('collapse');">
-                            <span class="wizard-pf-substep-number">1A.</span>
-                            <span class="wizard-pf-substep-title">Details</span>
-                          </a>
-                          <div id="reviewStep1Substep1" class="wizard-pf-review-content">
-                            <form class="form">
-                              <div class="wizard-pf-review-item">
-                                <span class="wizard-pf-review-item-label">Name:</span>
-                                <span class="wizard-pf-review-item-value">First Last</span>
-                              </div>
-                              <div class="wizard-pf-review-item">
-                                <span class="wizard-pf-review-item-label">Description:</span>
-                                <span class="wizard-pf-review-item-value">This is the description</span>
-                              </div>
-                            </form>
-                          </div>
-                        </li>
-                        <li class="list-group-item">
-                          <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep2').toggleClass('collapse');">
-                            <span class="wizard-pf-substep-number">1B.</span>
-                            <span class="wizard-pf-substep-title">Settings</span>
-                          </a>
-                          <div id="reviewStep1Substep2" class="wizard-pf-review-content">
-                            <form class="form">
-                              <div class="wizard-pf-review-item">
-                                <div class="wizard-pf-review-item-field">Setting A</div>
-                                <div class="wizard-pf-review-item-field">Setting B</div>
-                              </div>
-                            </form>
-                          </div>
-                        </li>
-                      </ul>
-                    </div>
-                  </li>
-                  <li class="list-group-item">
-                    <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2').toggleClass('collapse');">Second Step</a>
-                    <div id="reviewStep2" class="wizard-pf-review-substeps">
-                      <ul class="list-group">
-                        <li class="list-group-item">
-                          <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep1').toggleClass('collapse');">
-                            <span class="wizard-pf-substep-number">2A.</span>
-                            <span class="wizard-pf-substep-title">Details</span>
-                          </a>
-                          <div id="reviewStep2Substep1" class="wizard-pf-review-content">
-                            <form class="form">
-                              <div class="wizard-pf-review-item">
-                                <span class="wizard-pf-review-item-label">Name:</span>
-                                <span class="wizard-pf-review-item-value">First Last</span>
-                              </div>
-                              <div class="wizard-pf-review-item">
-                                <span class="wizard-pf-review-item-label">Description:</span>
-                                <span class="wizard-pf-review-item-value">This is the description</span>
-                              </div>
-                            </form>
-                          </div>
-                        </li>
-                        <li class="list-group-item">
-                          <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep2').toggleClass('collapse');">
-                            <span class="wizard-pf-substep-number">2B.</span>
-                            <span class="wizard-pf-substep-title">Settings</span>
-                          </a>
-                          <div id="reviewStep2Substep2" class="wizard-pf-review-content">
-                            <form class="form">
-                              <div class="wizard-pf-review-item">
-                                <div class="wizard-pf-review-item-field">Setting A</div>
-                                <div class="wizard-pf-review-item-field">Setting B</div>
-                              </div>
-                            </form>
-                          </div>
-                        </li>
-                      </ul>
-                    </div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <div class="wizard-pf-contents hidden">
-              <div class="wizard-pf-process blank-slate-pf">
-                <div class="spinner spinner-lg blank-slate-pf-icon"></div>
-                <h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
-                <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
-                  vivamus, lorem sociosqu eget nunc amet. </p>
-              </div>
-              <div class="wizard-pf-complete blank-slate-pf hidden">
-                <div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
-                <h3 class="blank-slate-pf-main-action">Deployment was successful</h3>
-                <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
-                  vivamus, lorem sociosqu eget nunc amet. </p>
-                <button type="button" class="btn btn-lg btn-primary">
-                  View Deployment
-                </button>
-              </div>
-            </div>
-          </div><!-- /.wizard-pf-main -->
-        </div>
-      </div><!-- /.wizard-pf-body -->
-      <div class="modal-footer wizard-pf-footer">
-        <button type="button" class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-dismiss">Cancel</button>
-        <button type="button" class="btn btn-default wizard-pf-back disabled">
-          <span class="i fa fa-angle-left"></span>
-          Back
-        </button>
-        <button type="button" class="btn btn-primary wizard-pf-next disabled">
-          Next
-          <span class="i fa fa-angle-right"></span>
-        </button>
-        <button type="button" class="btn btn-primary hidden wizard-pf-finish">
-          Deploy
-          <span class="i fa fa-angle-right"></span>
-        </button>
-        <button type="button" class="btn btn-primary hidden wizard-pf-close wizard-pf-dismiss">Close</button>
-      </div><!-- /.wizard-pf-footer -->
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
-<script>
-  $(document).ready(function() {
-    //initialize wizard
-    var completeWizard = new wizard(".btn.wizard-pf-complete");
-  });
-  var wizard = function(id) {
-    var self = this, modal, tabs, tabCount, tabLast, currentGroup, currentTab, contents;
-    self.id = id;
-    $(self.id).click(function() {
-        self.init(this)
-    });
-    this.init = function(button){
-      // get id of open modal
-      self.modal = $(button).data("target");
-      // open modal
-      $(self.modal).modal('show');
-      // adjust height of contents row (while steps and sidebar are hidden and loading message displays)
-      self.updateWizardLayout();
-      // assign data attribute to all tabs
-      $(self.modal + " .wizard-pf-sidebar .list-group-item").each(function() {
-          // set the first digit (i.e. n.0) equal to the index of the parent tab group
-          // set the second digit (i.e. 0.n) equal to the index of the tab within the tab group
-          $(this).attr("data-tab", ($(this).parent().index() +1 + ($(this).index()/10 + .1)));
-      });
-      // assign data attribute to all tabgroups
-      $(self.modal + " .wizard-pf-sidebar .list-group").each(function() {
-          // set the value equal to the index of the tab group
-          $(this).attr("data-tabgroup", ($(this).index() +1));
-      });
-      // create array of all tabs, using the data attribute, and determine the last tab
-      self.tabs = $(self.modal + " .wizard-pf-sidebar .list-group-item" ).map(function()
-        {
-          return $(this).data("tab");
-        }
-      );
-      self.tabCount = self.tabs.length;
-      self.tabSummary = self.tabs[self.tabCount - 2]; // second to last tab displays summary
-      self.tabLast = self.tabs[self.tabCount - 1]; // last tab displays progress
-      // set first tab group and tab as current tab
-      // if someone wants to target a specific tab, that could be handled here
-      self.currentGroup = 1;
-      self.currentTab = 1.1;
-      self.updateTabGroup();
-      // hide loading message
-      $(self.modal + " .wizard-pf-loading").addClass("hidden");
-      // show tabs and tab groups
-      $(self.modal + " .wizard-pf-steps").removeClass("hidden");
-      $(self.modal + " .wizard-pf-sidebar").removeClass("hidden");
-      // remove active class from all tabs
-      $(self.modal + " .wizard-pf-sidebar .list-group-item.active").removeClass("active");
-      // apply active class to new current tab and associated contents
-      self.updateActiveTab();
-      // adjust height of contents row (while steps and sidebar and tab contents are visible)
-      self.updateWizardLayout();
-      self.updateWizardFooterDisplay();
-      //initialize click listeners
-      self.tabGroupSelect();
-      self.tabSelect();
-      self.backBtnClicked();
-      self.nextBtnClicked();
-      self.finishBtnClick();
-      self.cancelBtnClick();
-      $( window ).resize(function() {
-        self.updateWizardLayout();
-      });
-    };
-    // update which tab group is active
-    this.updateTabGroup = function() {
-      $(self.modal + " .wizard-pf-step.active").removeClass("active");
-      $(self.modal + " .wizard-pf-step[data-tabgroup='" + self.currentGroup + "']").addClass("active");
-      $(self.modal + " .wizard-pf-sidebar .list-group").addClass("hidden");
-      $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "']").removeClass("hidden");
-    };
-    // update which tab is active
-    this.updateActiveTab = function() {
-      $(self.modal + " .list-group-item[data-tab='" + self.currentTab + "']").addClass("active");
-      self.updateVisibleContents();
-    };
-    // update which contents are visible
-    this.updateVisibleContents = function() {
-      var tabIndex = ($.inArray(self.currentTab, self.tabs));
-      // displaying contents associated with currentTab
-      $(self.modal + " .wizard-pf-contents").addClass("hidden");
-      $(self.modal + " .wizard-pf-contents:eq(" + tabIndex + ")").removeClass("hidden");
-      // setting focus to first form field in active contents
-      setTimeout (function() {
-        $(".wizard-pf-contents:not(.hidden) form input, .wizard-pf-contents:not(.hidden) form textarea, .wizard-pf-contents:not(.hidden) form select").first().focus(); // this does not account for disabled or read-only inputs
-      }, 100);
-    };
-    // update display state of Back button
-    this.updateBackBtnDisplay = function() {
-      if (self.currentTab == self.tabs[0]) {
-        $(self.modal + " .wizard-pf-back").addClass("disabled");
-      }
-    };
-    // update display state of next/finish button
-    this.updateNextBtnDisplay = function() {
-      if (self.currentTab == self.tabSummary) {
-        $(self.modal + " .wizard-pf-next").addClass("hidden");
-        $(self.modal + " .wizard-pf-finish").removeClass("hidden");
-      } else {
-        $(self.modal + " .wizard-pf-finish").addClass("hidden");
-        $(self.modal + " .wizard-pf-next").removeClass("hidden");
-      }
-    };
-    // update display state of buttons in the footer
-    this.updateWizardFooterDisplay = function() {
-      $(self.modal + " .wizard-pf-footer .disabled").removeClass("disabled")
-      self.updateBackBtnDisplay();
-      self.updateNextBtnDisplay();
-    };
-    // adjust layout of panels in wizard
-    this.updateWizardLayout = function() {
-      var top = ($(self.modal + " .modal-header").outerHeight() + $(self.modal + " .wizard-pf-steps").outerHeight()) + "px",
-          bottom = $(self.modal + " .modal-footer").outerHeight() + "px",
-          sidebarwidth = $(self.modal + " .wizard-pf-sidebar").outerWidth() + "px";
-      $(self.modal + " .wizard-pf-row").css("top", top);
-      $(self.modal + " .wizard-pf-row").css("bottom", bottom);
-      $(self.modal + " .wizard-pf-main").css("margin-left", sidebarwidth);
-    };
-    // when the user clicks a step, then the tab group for that step is displayed
-    this.tabGroupSelect = function() {
-      $(self.modal + " .wizard-pf-step>a").click(function() {
-        // remove active class active tabgroup and add active class to the
-        // clicked tab group (but don't remove the active class from current tab)
-        self.currentGroup = $(this).parent().data("tabgroup");
-        self.updateTabGroup();
-        // update value for currentTab -- if a tab is already marked as active
-        // for the new tab group, use that, otherwise set it to the first tab
-        // in the tab group
-        self.currentTab = $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item.active").data("tab");
-        if (self.currentTab == undefined) {
-          self.currentTab = $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item:first-child").data("tab");
-          // apply active class to new current tab and associated contents
-          self.updateActiveTab();
-        } else {
-          // use already active tab and just update contents
-          self.updateVisibleContents();
-        }
-        // show/hide/disable/enable buttons if needed
-        self.updateWizardFooterDisplay();
-      });
-    };
-    // when the user clicks a tab, then the tab contents are displayed
-    this.tabSelect = function() {
-      $(self.modal + " .wizard-pf-sidebar .list-group-item>a").click(function() {
-        // update value of currentTab to new active tab
-        self.currentTab = $(this).parent().data("tab");
-        // remove active class from active tab in current active tab group (i.e.
-        // don't remove the class from tabs in other groups)
-        $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item.active").removeClass("active");
-        // add active class to the clicked tab and the associated contents
-        $(this).parent().addClass("active");
-        self.updateVisibleContents();
-        if (self.currentTab == self.tabLast) {
-          $(self.modal + " .wizard-pf-next").addClass("hidden");
-          $(self.modal + " .wizard-pf-finish").removeClass("hidden");
-          self.finish();
-        } else {
-          // show/hide/disable/enable buttons if needed
-          self.updateWizardFooterDisplay();
-        }
-      });
-    };
-    // Back button clicked
-    this.backBtnClicked = function() {
-      $(self.modal + " .wizard-pf-back").click(function() {
-        // if not the first page
-        if (self.currentTab != self.tabs[0]) {
-          // go back a page (i.e. -1)
-          self.wizardPaging(-1);
-          // show/hide/disable/enable buttons if needed
-          self.updateWizardFooterDisplay();
-        }
-      });
-    };
-    // Next button clicked
-    this.nextBtnClicked = function() {
-      $(self.modal + " .wizard-pf-next").click(function() {
-        // go forward a page (i.e. +1)
-        self.wizardPaging(1);
-        // show/hide/disable/enable buttons if needed
-        self.updateWizardFooterDisplay();
-      });
-    };
-    // Finish button clicked
-    // Deploy/Finish button would only display during the second to last step.
-    this.finishBtnClick = function() {
-      $(self.modal + " .wizard-pf-finish").click(function() {
-        self.wizardPaging(1);
-        self.finish();
-      });
-    };
-    // Cancel/Close button clicked
-    this.cancelBtnClick = function() {
-      $(self.modal + " .wizard-pf-dismiss").click(function() {
-        // close the modal
-        $(self.modal).modal('hide');
-        // drop click event listeners
-        $(self.modal + " .wizard-pf-step>a").off("click");
-        $(self.modal + " .wizard-pf-sidebar .list-group-item>a").off("click");
-        $(self.modal + " .wizard-pf-back").off("click");
-        $(self.modal + " .wizard-pf-next").off("click");
-        $(self.modal + " .wizard-pf-finish").off("click");
-        $(self.modal + " .wizard-pf-dismiss").off("click");
-        // reset final step
-        $(self.modal + " .wizard-pf-process").removeClass("hidden");
-        $(self.modal + " .wizard-pf-complete").addClass("hidden");
-        // reset loading message
-        $(self.modal + " .wizard-pf-contents").addClass("hidden");
-        $(self.modal + " .wizard-pf-loading").removeClass("hidden");
-        // remove tabs and tab groups
-        $(self.modal + " .wizard-pf-steps").addClass("hidden");
-        $(self.modal + " .wizard-pf-sidebar").addClass("hidden");
-        // reset buttons in final step
-        $(self.modal + " .wizard-pf-close").addClass("hidden");
-        $(self.modal + " .wizard-pf-cancel").removeClass("hidden");
-      });
-    };
-    // when the user clicks Next/Back, then the next/previous tab and contents display
-    this.wizardPaging = function(direction) {
-      // get n.n value of next tab using the index of next tab in tabs array
-      var tabIndex = ($.inArray(self.currentTab, self.tabs)) + direction;
-      var newTab = self.tabs[tabIndex];
-      // add/remove active class from current tab group
-      // included math.round to trim off extra .000000000002 that was getting added
-      if (newTab != Math.round(10*(direction*.1 + self.currentTab))/10) {
-        // this statement is true when the next tab is in the next tab group
-        // if next tab is in next tab group (e.g. next tab data-tab value is
-        // not equal to current tab +.1) then apply active class to next
-        // tab group and step, and update the value for var currentGroup +/-1
-        self.currentGroup = self.currentGroup + direction;
-        self.updateTabGroup();
-      }
-      self.currentTab = newTab;
-      // remove active class from active tab in current tab group
-      $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item.active").removeClass("active");
-      // apply active class to new current tab and associated contents
-      self.updateActiveTab();
-    };
-    // This code keeps the same contents div active, but switches out what
-    // contents display in that div (i.e. replaces process message with
-    // success message).
-    this.finish = function() {
-      $(self.modal + " .wizard-pf-back").addClass("disabled"); // if Back remains enabled during this step, then the Close button needs to be removed when the user clicks Back
-      $(self.modal + " .wizard-pf-finish").addClass("disabled");
-      // code for kicking off process goes here
-      // the next code is just to simulate the expected experience, in that
-      // when the process is complete, the success message etc. would display
-      setTimeout (function() {
-        $(self.modal + " .wizard-pf-cancel").addClass("hidden");
-        $(self.modal + " .wizard-pf-finish").addClass("hidden");
-        $(self.modal + " .wizard-pf-close").removeClass("hidden");
-        $(self.modal + " .wizard-pf-process").addClass("hidden");
-        $(self.modal + " .wizard-pf-complete").removeClass("hidden");
-      }, 3000);
-    };
-  };
-</script>
-<h2>Initializing</h2>
-<button class="btn btn-default" data-toggle="modal" data-target="#initializing">Launch wizard showing initialization
-  state
-</button>
-<div class="modal" id="initializing" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-lg wizard-pf">
-    <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>
-        <dt class="modal-title">Wizard Title</dt>
-      </div>
-      <div class="modal-body wizard-pf-body clearfix">
-        <div class="wizard-pf-steps hidden">
-          <ul class="wizard-pf-steps-indicator">
-            <li>
-              <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
-            </li>
-            <li>
-              <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
-            </li>
-            <li>
-              <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
-            </li>
-          </ul>
-        </div>
-        <div class="wizard-pf-sidebar hidden">
-          <ul class="list-group">
-            <li class="list-group-item active">
-              <a>
-                <span class="wizard-pf-substep-number">1A.</span>
-                <span class="wizard-pf-substep-title">General</span>
-              </a>
-            </li>
-            <li class="list-group-item">
-              <a>
-                <span class="wizard-pf-substep-number">1B.</span>
-                <span class="wizard-pf-substep-title">Masters &amp; Nodes</span>
-              </a>
-            </li>
-            <li class="list-group-item">
-              <a>
-                <span class="wizard-pf-substep-number">1C.</span>
-                <span class="wizard-pf-substep-title">CDN Channel</span>
-              </a>
-            </li>
-          </ul>
-        </div><!-- /.wizard-pf-sidebar -->
-        <div class="wizard-pf-main" style="margin-left: 0px">
-          <div class="blank-slate-pf">
-            <div class="spinner spinner-lg blank-slate-pf-icon"></div>
-            <h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
-            <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
-              vivamus, lorem sociosqu eget nunc amet. </p>
-          </div>
-        </div>
-      </div><!-- /.wizard-pf-body -->
-      <!-- TODO: disable buttons -->
-      <div class="modal-footer wizard-pf-footer">
-        <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-default disabled" data-dismiss="modal">
-          <span class="i fa fa-angle-left"></span>
-          Back
-        </button>
-        <button type="button" class="btn btn-primary disabled" data-dismiss="modal">
-          Next
-          <span class="i fa fa-angle-right"></span>
-        </button>
-      </div><!-- /.wizard-pf-footer -->
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
-<h2>Last Step</h2>
-<button class="btn btn-default" data-toggle="modal" data-target="#done">Launch wizard showing finalizing
-state
-</button>
-<div class="modal" id="done" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-lg wizard-pf">
-    <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>
-        <dt class="modal-title">Wizard Title</dt>
-      </div>
-      <div class="modal-body wizard-pf-body clearfix">
-        <div class="wizard-pf-steps">
-          <ul class="wizard-pf-steps-indicator">
-            <li class="viewed-pf">
-              <a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
-            </li>
-            <li class="viewed-pf">
-              <a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
-            </li>
-            <li class="active">
-              <a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
-            </li>
-          </ul>
-        </div>
-        <div class="wizard-pf-row">
-          <div class="wizard-pf-sidebar">
-            <ul class="list-group">
-              <li class="list-group-item">
-                <a>
-                  <span class="wizard-pf-substep-number">3A.</span>
-                  <span class="wizard-pf-substep-title">Summary</span>
-                </a>
-              </li>
-              <li class="list-group-item active">
-                <a>
-                  <span class="wizard-pf-substep-number">3B.</span>
-                  <span class="wizard-pf-substep-title">Progress</span>
-                </a>
-              </li>
-            </ul>
-          </div><!-- /.wizard-pf-sidebar -->
-          <div class="wizard-pf-main">
-            <div class="blank-slate-pf">
-              <div class="spinner spinner-lg blank-slate-pf-icon"></div>
-              <h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
-              <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
-                vivamus, lorem sociosqu eget nunc amet. </p>
-            </div>
-          </div>
-        </div>
-      </div><!-- /.wizard-pf-body -->
-      <!-- TODO: disable buttons -->
-      <div class="modal-footer wizard-pf-footer">
-        <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
-        <button type="button" class="btn btn-default disabled" data-dismiss="modal">
-          <span class="i fa fa-angle-left"></span>
-          Back
-        </button>
-        <button type="button" class="btn btn-primary disabled" data-dismiss="modal">
-          Deploy
-          <span class="i fa fa-angle-right"></span>
-        </button>
-      </div><!-- /.wizard-pf-footer -->
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
-</div><!-- /.modal -->
-    </div><!-- /container -->
-  </body>
-</html>