Use new sliders for managed cloud aaaand..... REMOVE YUI!

static/css/section/_cloud.scss

@@ -319,11 +319,6 @@
 
 //* Special overrides for JS-enabled  on /cloud/openstack/managed-cloud
 .js .cloud-openstack-managed-cloud {
-
-  .slider-area p {
-      float: none;
-  }
-
   .slider-container {
     min-height: 24px;
     min-width: 10px;
@@ -639,14 +634,15 @@
   .slider-area {
     margin-top: 20px;
     overflow: hidden;
+    display: flex;
 
-    p {
-      float: left;
-      margin-bottom: 0;
-
-      &:first-child {
-        margin-top: 0;
-      }
+    & input[type=number] {
+      width: 5em;
+      margin-right: 1em;
+    }
+    & input[type=range] {
+      min-width: 130px;
+      flex-grow: 1;
     }
   }
 
@@ -693,7 +689,18 @@
     list-style: none;
     margin-left: 0;
 
-    .grouped-tabbed__item {
+    &__input {
+      position: absolute;
+      left: -10000px;
+
+      &:checked ~ .grouped-tabbed__button {
+       background: $ubuntu-orange;
+       color: $white;
+       border-color: $ubuntu-orange;
+     }
+    }
+
+    &__item {
       float: left;
       margin-bottom: 0;
       width: 33%;
@@ -707,7 +714,7 @@
       }
     }
 
-    .grouped-tabbed__button {
+    &__button {
       text-align: center;
       padding: 8px;
       display: block;
@@ -716,17 +723,6 @@
       color: $ubuntu-orange;
       margin-left: -1px;
       margin-right: -1px;
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-      }
-
-      &.is-active {
-        background: $ubuntu-orange;
-        color: $white;
-        border-color: $ubuntu-orange;
-      }
     }
   }
 
@@ -900,52 +896,6 @@
   .option__value-savings.negative {
     color: $error;
   }
-
-  // Slider styles
-  .yui3-slider-content, .yui3-widget {
-    display: block;
-    padding: 5px 0;
-  }
-
-  .yui3-slider-rail-cap-left, .yui3-slider-rail-cap-right {
-    display: none;
-  }
-
-  .yui3-slider-rail {
-    display: block;
-    height: 4px;
-    background-color: $brand-color;
-    background: linear-gradient(to left, #E1DAD2 98.4%, $brand-color 0%); // DDD pick a standard colour?
-    border-radius: 2px;
-    overflow: visible;
-    box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
-    cursor: pointer;
-
-    .yui3-slider-thumb {
-      width:  18px;
-      height: 18px;
-      border-radius: 4px;
-      background: $white;
-      overflow: visible;
-      display: block;
-      position: relative;
-      top: -7px !important;
-      outline: none;
-      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2);
-      cursor: pointer;
-
-      &:hover {
-        -webkit-transform: scale(1.25, 1.25);
-        transform: scale(1.25, 1.25);
-        -ms-transition: transform 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
-        transition:  transform 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
-      }
-    }
-  }
-
-  .yui3-slider-thumb-shadow, .yui3-slider-thumb-image {
-    display: none;
-  }
 }
 
 //* Special overrides for JS-enabled

static/js/cloud.js

@@ -0,0 +1,150 @@
+if (typeof cloud !== "undefined") {
+    throw TypeError('Namespace "cloud" not available');
+}
+// Define this namespace
+var cloud = {};
+
+cloud.formatPrice = function(number) {
+  numberWithCommas = Math.ceil(number).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  amount = '$' + numberWithCommas;
+  amount = amount.replace('$-', '-$');
+  return amount;
+};
+
+cloud.calculator = function() {
+  var
+  /* Constants */
+  daysInYear = 365,
+  monthsInYear = 12,
+  daysInMonth = 30,
+  hoursInDay = 24,
+  hoursInMonth = hoursInDay * daysInMonth,
+  hoursInYear = hoursInDay * daysInYear,
+
+  /* Settings */
+  vmPerHour = 0.05,
+  uaPriceVm = 0.03,
+  bootstackServerDailyPrice = 15,
+  bootstackServerHourlyPrice = bootstackServerDailyPrice / hoursInDay,
+  viewBy = 'vms',
+  billingPeroid = 'month',
+  uaServerHourlyCosts = {
+    small: 75000 / hoursInYear,
+    medium: 180000 / hoursInYear,
+    large: 350000 / hoursInYear
+  },
+  smallThreshold = 101,
+  mediumThreshold = 501,
+  /* general elements */
+  calculatorForm = document.querySelector('#calculator-form'),
+  vmsFieldset = document.querySelector('#vms'),
+  serversFieldset = document.querySelector('#servers'),
+
+  /* Input elements */
+  numberOfStaffInput = document.querySelector('#number-of-staff'),
+  annualSalaryThousandsInput = document.querySelector('#staff-annual-salary'),
+  numberOfServersInput = document.querySelector('#number-of-servers'),
+  numberOfVmsInput = document.querySelector('#number-of-vms'),
+  /* Radio input selectors */
+  vmsOrServersInputSelector = '[name=vms-or-servers]:checked',
+  billingPeriodInputSelector = '[name=billing-period]:checked',
+
+  /* Output elements */
+  bootstackCostOutput = document.querySelector('#bootstack-cost'),
+  selfBuiltCostOutput = document.querySelector('#self-built-cost'),
+  billingPeriodOutputs = document.querySelectorAll('.billing-period'),
+  selfBuiltStaffCostOutputs = document.querySelectorAll('.self-built-staff-cost'),
+  selfBuiltUACostOutputs = document.querySelectorAll('.self-built-ua-cost'),
+  uaSupportCostOutput = document.querySelector('#ua-support-cost-output'),
+  numServerOrVmsOutput = document.querySelector('#num-servers-or-vms-output'),
+  serversOrVmsOutput = document.querySelector('#servers-or-vms-output');
+
+  // Function to update the servers variables and update calculations
+  function update() {
+      var numberOfStaff = parseInt(numberOfStaffInput.value),
+          annualSalary = parseInt(annualSalaryThousandsInput.value) * 1000,
+          serversOrVms = document.querySelector(vmsOrServersInputSelector).value,
+          billingPeriod = document.querySelector(billingPeriodInputSelector).value,
+          annualStaffCost = numberOfStaff * annualSalary,
+          uaCost = 0,
+          numberOfUnits = 0;
+
+      switch(billingPeroid) {
+        case 'hour': staffCost = annualStaffCost / hoursInYear; break;
+        case 'month': staffCost = annualStaffCost / monthsInYear; break;
+        case 'year': staffCost = annualStaffCost; break;
+      }
+
+      if (serversOrVms === 'VMs') {
+          // VM calculations
+          vmsFieldset.classList.remove('is-hidden');
+          serversFieldset.classList.add('is-hidden');
+
+          numberOfUnits = parseInt(numberOfVmsInput.value);
+
+          var uaHourlyCost = numberOfUnits * uaPriceVm,
+              vmCostPerHour = numberOfUnits * vmPerHour;
+
+          switch(billingPeroid) {
+            case 'hour':
+              bootstackCost = vmCostPerHour;
+              uaCost = uaHourlyCost;
+              break;
+            case 'month':
+              bootstackCost = vmCostPerHour * hoursInMonth;
+              uaCost = uaHourlyCost * hoursInMonth;
+              break;
+            case 'year':
+              bootstackCost = vmCostPerHour * hoursInYesr;
+              uaCost = uaHourlyCost * hoursInYear;
+              break;
+          }
+      } else if (serversOrVms === 'Servers') {
+          // Server calculations
+          vmsFieldset.classList.add('is-hidden');
+          serversFieldset.classList.remove('is-hidden');
+
+          numberOfUnits = parseInt(numberOfServersInput.value);
+
+          if (numberOfUnits < smallThreshold ) {
+            uaServerHourlyCost = uaServerHourlyCosts.small;
+          } else if (numberOfUnits < mediumThreshold ) {
+            uaServerHourlyCost = uaServerHourlyCosts.medium;
+          } else {
+            uaServerHourlyCost = uaServerHourlyCosts.large;
+          }
+
+          var serverHourlyCost = numberOfUnits * bootstackServerHourlyPrice;
+
+          switch(billingPeroid) {
+            case 'hour':
+              bootstackCost = serverHourlyCost;
+              uaCost = uaServerHourlyCost;
+              break;
+            case 'month':
+              bootstackCost = serverHourlyCost * hoursInMonth;
+              uaCost = uaServerHourlyCost * hoursInMonth;
+              break;
+            case 'year':
+              bootstackCost = serverHourlyCost * hoursInYesr;
+              uaCost = uaServerHourlyCost * hoursInYear;
+              break;
+          }
+      } else {
+        throw "Error in cloud.calculator: Erroneous value for serversOrVMs: " + serversOrVms;
+      }
+
+      billingPeriodOutputs.forEach(function(elem) {elem.innerText = billingPeriod;});
+      numServerOrVmsOutput.innerText = numberOfUnits;
+      serversOrVmsOutput.innerText = serversOrVms;
+      selfBuiltStaffCostOutputs.forEach(function(elem) {elem.innerText = cloud.formatPrice(staffCost);});
+      selfBuiltUACostOutputs.forEach(function(elem) {elem.innerText = cloud.formatPrice(uaCost);});
+      bootstackCostOutput.innerText = cloud.formatPrice(bootstackCost);
+      selfBuiltCostOutput.innerText = cloud.formatPrice(uaCost + staffCost);
+  }
+
+  // Update everything when input changes
+  calculatorForm.addEventListener('change', update);
+  calculatorForm.addEventListener('input', update);
+  update();
+};