NavBar testing with Settings

Starting point for Bootstrap layout. Has external resources defined.

by WizKid81

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" runat="server" href="~/">IA Hierarchy</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a runat="server" href="~/">Home</a></li>
        <li><a runat="server" href="~/SAHierarchy">Subject Areas</a></li>
        <li><a runat="server" href="~/About">About</a></li>
        <li><a runat="server" href="~/Contact">Contact</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Settings <span class="caret"></span></a>
          <ul class="dropdown-menu" data-bind="foreach: userPreferences">
            <li><a href="#" data-bind="click: select"><i class="fa fa-check" aria-hidden="true" data-bind="visible: value()"></i>  <span data-bind="text: displayText"></span></a></li>

          </ul>
        </li>
        <li>
          <p class="navbar-text">Hello, David!</p>
        </li>
        <li>
          <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container body-content">
  <span data-bind="click: showPreferences">Show Preferences</span>
</div>

CSS

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"] {
    /*max-width: 280px;*/
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}

/* unordered list for TreeView*/
ul.tree.root {
width:500px;
}

ul.tree {
    list-style-type: none;
    padding-left: 10px;
}

/* tree spacing to keep nodes without children lined up with those that do have children*/
.tree-spacer {
    display:inline-block;
    width:12px;
    text-decoration:none;
    text-align:center;
}

/* tree toggle buttons*/
.tree-toggle {
    cursor: pointer;
}

.selectedNode {
    background-color: lightgray;
}

.destinationNode {
    background-color: darkgray;
    color: white;
}

.deletedNode span {
    text-decoration: line-through;
    opacity: .3;
}

.newNode span:after {
    font-family: FontAwesome;
    font-size: x-small;
    font-weight: lighter;
    content: ' \f069'; /*Asterisk*/
    vertical-align: super;
}

input.changedValue {
    border: solid 1px red;
}

.changedValue::after {
    font-family: FontAwesome;
    font-size: small;
    font-weight: lighter;
    font-style: normal;
    content: ' \f12a';  /*Exclamation mark*/
}

.movedNode::after {
    font-family: FontAwesome;
    font-size: small;
    font-weight: lighter;
    font-style: normal;
    content: ' \f064';
    display: inline-block;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.renamedNode {
    font-style:...

JavaScript

console.clear();

var vm = function() {
  var self = this;

  self.enableMessages = ko.observable(false);
  self.showShortNames = ko.observable(false);

  self.setOption = function(optionObject, event) {
    if (optionObject.optionType == 'Boolean') {
      console.log(optionObject.value());
      optionObject.value(!optionObject.value());
    } else {
      console.log("unhandled option type");
    }

  }

  self.userPreferences = [{
    name: "errorMessage",
    displayText: "Enable error messages",
    value: self.enableMessages,
    optionType: 'Boolean',
    select: self.setOption
  }, {
    name: "shortNames",
    displayText: "Show Short Names",
    value: self.showShortNames,
    optionType: 'Boolean',
    select: self.setOption
  }];


  self.showPreferences = function() {
    console.log(self.userPreferences);
    console.log(self.userPreferences[0].value());
    console.log(self.userPreferences[1].value());
  }

}

viewModel = new vm();

ko.applyBindings(viewModel);