Michael Hart [Build Week 1: Web UI]

Components/Base/base.js

@@ -0,0 +1,24 @@
+// Base component for other components to build off. Experimentally using BEM class conventions
+
+class Component {
+  constructor(selector) {
+    this.baseClass = 'component';
+    this.self = document.querySelector(`.${selector}`);
+  }
+
+  getElement(element) {
+    return this.self.querySelector(`.${this.baseClass}__${element}`);
+  }
+
+  getElements(elements) {
+    return this.self.querySelectorAll(`.${this.baseClass}__${elements}`);
+  }
+
+  addModifier(modifier) {
+    this.self.classList.add(`${this.baseClass}--${modifier}`);
+  }
+
+  removeModifier(modifier) {
+    this.self.classList.remove(`${this.baseClass}--${modifier}`);
+  }
+}

Components/Buttons/buttons.js

@@ -0,0 +1,31 @@
+class Button extends Component {
+
+  constructor(selector) {
+
+    // Call parent constructor method
+    super(selector);
+
+    // Set some properties
+    this.baseClass = selector;
+
+    // Add click handler to each button that fades to menu color and then loads the front end
+    this.link = this.getElement('button');
+    this.link.addEventListener('click', e => this.close(e));
+    this.link.addEventListener('touchend', e => this.close(e));    
+  }
+
+  close(event) {
+    event.preventDefault();
+    const overlay = document.querySelector('.overlay');
+    overlay.style.display = 'block';
+    setTimeout(() => { overlay.style.opacity = '1'; }, 100);
+    setTimeout(() => { document.location = 'https://irsr-frontend.netlify.com/'; }, 500);    
+  }
+}
+
+// Create Button instances on document ready
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('button').forEach(button => {
+    new Button(button.className.split('__button')[0]);
+  })
+});

Components/Buttons/buttons.less

@@ -0,0 +1,26 @@
+
+button {
+  .font(@page-font, sans-serif; bold; normal; @page-fontsize);
+  .button-style(
+    100%, 50px, 10px 0, // Width, height, padding
+    none, 15px, // Border, border-radius
+    @button-bg, @button-color, @button-hover, // background-color, color, :hover color
+    2.2rem // font-size
+  );  
+  line-height: 2.4rem;
+  text-transform: uppercase;
+  user-select: none;
+}
+
+.overlay {
+  display: none;
+  background: @accent;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 101;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}

Components/Carousel/carousel.js

@@ -0,0 +1,33 @@
+class Carousel extends Component {
+
+  constructor(selector) {
+
+    // Call parent constructor method
+    super(selector);
+
+    // Set some properties
+    this.baseClass = 'body';
+
+    // Get list of images from carousel component
+    this.carousel = document.body.dataset.carouselImages.split(',');
+
+    // Preload each image into the cache to improve initial transition
+    this.carousel.forEach(link => {
+      const img = new Image();
+      img.src = `../Assets/${link}`;
+    })
+
+    // Every five seconds, call cycle() to change the backgrond image
+    window.setInterval(() => {
+      this.cycle();
+    }, 5000);
+  }
+
+  cycle() {
+    this.carousel.push(this.carousel.shift());
+    document.body.style.backgroundImage = `url('../Assets/${this.carousel[0]}')`;
+  }
+}
+
+// Create Carousel instance on document ready
+document.addEventListener('DOMContentLoaded', () => new Carousel('body'));

Components/Carousel/carousel.less

@@ -0,0 +1,44 @@
+body {
+  background: url(../Assets/slide01.jpg) no-repeat center center fixed; 
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  transition: background-image 1s ease;
+}
+
+.header {
+  .header__container {
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .header__content {
+      background: @primary;
+      width: 70%;
+      max-width: 500px;
+      border: 10px solid @accent;
+      box-shadow: 0px 0px 2px black;
+      padding: 25px;
+
+      .header__title {
+        color: @header-color;
+        .font(@page-font, sans-serif; bold; normal; @header-fontsize; @header-color);
+        text-transform: uppercase;
+        text-align: center;
+
+        @media @mobile {
+          font-size: 2rem;
+        }
+      }
+
+      .header__text {
+        color: @header-color;
+        margin: 20px 0;
+      }
+    }
+  }
+}

Components/Menu/menu.js

@@ -0,0 +1,47 @@
+class BurgerMenu extends Component {
+
+  constructor(selector) {
+
+    // Call parent constructor method
+    super(selector);
+
+    // Set some properties
+    this.baseClass = selector;
+    this.isOpen = false;
+
+    // Cache burger element selector and get list of menu links
+    this.burger = this.getElement('burger');
+    this.links = this.getElements('link');
+    this.menuButton = this.burger.querySelector('.fa-bars');
+
+    // Bind events
+    this.burger.addEventListener('click', e => this.toggle(e));
+    this.links.forEach(link => link.addEventListener('click', e => this.close(e)));
+  }
+
+  toggle(event) {
+    event.preventDefault();    
+
+    this.isOpen = !this.isOpen;
+
+    if (this.isOpen) {
+      this.addModifier('opened');      
+      this.menuButton.classList.remove('fa-bars');
+      this.menuButton.classList.add('fa-times');
+    } else {
+      this.removeModifier('opened');
+      this.menuButton.classList.remove('fa-times');
+      this.menuButton.classList.add('fa-bars');
+    }
+  }
+
+  close(event) {
+    this.isOpen = false;
+    this.removeModifier('opened');
+    this.menuButton.classList.remove('fa-times');
+    this.menuButton.classList.add('fa-bars');
+  }
+}
+
+// Create BurgerMenu instance on document ready
+document.addEventListener('DOMContentLoaded', () => new BurgerMenu('nav'));

Components/Menu/menu.less

@@ -0,0 +1,104 @@
+// Navigation menu styling
+
+.nav {
+  background: @menu-bg;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  width: 100%;
+  opacity: 0.9;
+  text-transform: uppercase;
+  box-shadow: 0px 1px 2px black;
+
+  .nav__container {
+    margin: 0 auto;
+    max-width: 960px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 70px;
+    padding: 10px 20px;
+
+    .nav__link {
+      .font(@menu-font, sans-serif; 800; normal; @menu-fontsize; @menu-color);
+      text-decoration: none;
+      &:hover, &:active {
+        color: @menu-highlight;
+      }
+      @media @tablet {
+        font-size: 1.4rem;
+      }
+      @media @mobile {
+        font-size: 4vh;
+        line-height: 20vh;
+      }
+    }
+
+    .nav__title {
+      min-width: 15%;
+      @media @mobile {
+        width: 95%;
+        text-align: left;
+      }
+    }
+
+    .nav__title-link {
+      .font(@menu-font, sans-serif; bold; normal; 3rem; @menu-header);
+      color: @primary;
+      text-decoration: none;
+      &:hover, &:active {
+        color: @menu-highlight;
+      }
+      @media @tablet {
+        font-size: 2.4rem;
+      }
+    }
+
+    .nav__list {
+      position: relative;
+      display: flex;
+      justify-content: space-around;
+      min-width: 70%;
+      @media @mobile {
+        flex-direction: column;
+        justify-content: flex-start;
+        text-align: center;
+        position: absolute;
+        left: 0;
+        top: 70px;
+        width: 100%;
+        height: 0;
+        padding: 0 0 20px 0;
+        margin: 0;
+        background-color: @menu-bg;
+        list-style: none;
+        opacity: 0;
+        overflow: hidden;
+        transition: opacity 300ms ease-out, height 0ms linear 300ms;
+      }
+    }
+
+    .nav__burger {
+      display: none;
+      font-size: 2.2rem;
+      cursor: pointer;
+      color: @primary;
+      @media @mobile {
+        display: block;
+        text-align: right;
+      }
+      &:visited {
+        color: @menu-color;
+      }
+    }
+  }
+}
+
+@media @mobile {
+  .nav--opened .nav__container .nav__list {
+    height: 100vh;
+    opacity: 1;
+    transition: opacity 300ms ease-out;
+  }
+}

Components/Team/team.js

@@ -0,0 +1,58 @@
+class Team extends Component {
+
+  constructor(selector) {
+
+    // Call parent constructor method
+    super(selector);
+
+    // Set some properties
+    this.baseClass = selector;
+
+    // Cache burger element selector and get list of menu links
+    this.team = this.getElements('member');
+    this.team.forEach(member => {
+      const name = member.dataset.name;
+      const title = member.dataset.title;
+      const github = member.dataset.github;
+      const photo = member.dataset.photo;
+
+      member.innerHTML += `<img src='${photo}' alt='${name}'>`;
+      member.innerHTML += `<h3>${name}</h3>`;
+      member.innerHTML += `<h3 class='team__role'>${title}</h3>`;
+      member.innerHTML += `<p><span class='fab fa-github-alt'></span>&nbsp;&nbsp;<a href='${github}' target='_blank'>Github</a></p>`;
+    })
+    // this.burger = this.getElement('burger');
+    // this.links = this.getElements('link');
+    // this.menuButton = this.burger.querySelector('.fa-bars');
+
+    // Bind events
+    // this.burger.addEventListener('click', e => this.toggle(e));
+    // this.burger.addEventListener('touchend', e => this.toggle(e));
+    // this.links.forEach(link => link.addEventListener('click', e => this.close(e)));
+    // this.links.forEach(link => link.addEventListener('touchend', e => this.close(e)));
+  }
+
+  // toggle(event) {
+  //   event.preventDefault();    
+
+  //   this.isOpen = !this.isOpen;
+
+  //   if (this.isOpen) {
+  //     this.addModifier('opened');      
+  //     this.menuButton.classList.remove('fa-bars');
+  //     this.menuButton.classList.add('fa-times');
+  //   } else {
+  //     this.removeModifier('opened');
+  //     this.menuButton.classList.remove('fa-times');
+  //     this.menuButton.classList.add('fa-bars');
+  //   }
+  // }
+
+  // close(event) {
+  //   this.isOpen = false;
+  //   this.removeModifier('opened');
+  // }
+}
+
+// Create Team instance on document ready
+document.addEventListener('DOMContentLoaded', () => new Team('team'));