created remote console page
TODO: Remove HTERM.
Change-Id: I72026e5ea64c9fba3089b68dfd2b8198255dabb8
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/js/main.js b/src/js/main.js
new file mode 100755
index 0000000..beea081
--- /dev/null
+++ b/src/js/main.js
@@ -0,0 +1,132 @@
+(function() {
+ // var user = 'root';
+ // var password = '0penBmc';
+ // var ip = 'https://9.3.164.177';
+ //
+ // var login = {
+ // "type": "POST",
+ // "url": ip + "/login",
+ // "dataType": "json",
+ // "async": false,
+ // "headers": {
+ // 'Accept': 'application/json',
+ // 'Content-Type': 'application/json'
+ // },
+ // "xhrFields": {
+ // withCredentials: true
+ // },
+ // "data": JSON.stringify({"data": [user, password]}),
+ // "success": function(response){
+ // console.log(response);
+ // },
+ // "error": function(xhr, textStatus, errorThrown){
+ // console.log("not a successful request!")
+ // console.log(xhr, textStatus, errorThrown)
+ // }
+ // };
+ //
+ // $.ajax(login);
+
+ // Init functions
+ header();
+ nav();
+
+ // Load logo
+ function loadLogo(){
+ $('.logo__wrapper').load('logo.html', function(){
+
+ // Grab logo if has ID or not
+ var logoID = document.getElementById("header__logo");
+ var logo = document.querySelectorAll("img, svg");
+
+ // Has ID - call header height
+ if(logoID && logoID !== null) {
+ getHeaderHeight();
+
+ // If logo exists but no ID - call header height
+ } else if (logo !== null && logo.length == 1){
+ $('img, svg').on('load', function(){
+ getHeaderHeight();
+ })
+
+ // If no logo at all - call header height
+ } else { getHeaderHeight(); }
+ });
+ }
+
+ // Get header height
+ function getHeaderHeight() {
+ // Get header height after logo is loaded
+ var header = document.getElementById("header__wrapper");
+ var headerHeight = header.offsetHeight;
+
+ // Add body padding to compensate for fixed header
+ document.body.style.paddingTop = headerHeight + 'px';
+
+ nav(headerHeight);
+ }
+ // Include header
+ function header() {
+ $('#header__wrapper').load('header.html', function () {
+
+ // include logo into header
+ loadLogo();
+ })
+ }
+
+ // load navigation - pass in header height
+ function nav(height) {
+ $('#navigation').load('navigation.html', function (headerHeight) {
+
+ var nav = document.getElementById("nav__top-level");
+ var navWidth = nav.offsetWidth; // Get navigation width
+ var subnav = document.getElementsByClassName("nav__second-level");
+ var navBtn = document.querySelectorAll('#nav__top-level button');
+
+ // Add body padding to compensate for fixed nav
+ document.body.style.paddingLeft = navWidth + 'px';
+
+ // Bump down nav to compensate for fixed header
+ nav.style.top = height + 'px';
+
+ // Bump second level nav down for fixed header
+ for (var i = 0; i < subnav.length; i++) {
+ subnav[i].style.top = height + 'px';
+ }
+
+ // Loop over nav buttons
+ for (var i = 0, len = navBtn.length; i < len; i++) {
+
+ // Click event for each nav button
+ navBtn[i].addEventListener('click', function(){
+ var parent = $(this).parents("#navigation");
+ var btnId = $(this).attr("class").match(/btn[\w-]*\b/);
+ var subnavClass = $('.nav__second-level.' + btnId);
+
+ // Remove opened class from buttons
+ parent.find('.opened').removeClass('opened');
+
+ // Add opened class to clicked button
+ this.classList.add("opened");
+
+ // Close all sub panels and remove opened class
+ parent.find('.nav__second-level').css("left", '-' + navWidth + "px").removeClass('opened');
+
+ // Open sub panels that matches clicked button and add opened class
+ parent.find(subnavClass).addClass('opened').css("left", navWidth);
+ })
+
+ }
+
+ // Temp solution to close subnav - TODO: better way to close
+ for (var i = 0, len = subnav.length; i < len; i++) {
+ subnav[i].addEventListener('click', function(){
+ this.classList.remove("opened");
+ this.style.left = "-" + navWidth + "px";
+ })
+ }
+
+ });
+ }
+
+}());