daily pastebin goal
61%
SHARE
TWEET

Untitled

a guest Dec 7th, 2017 54 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. "use strict"
  2.  
  3. // DOM elements
  4. const hamMenu = document.querySelector('.fa-bars');
  5. const sidebar = document.querySelector('.sidebar');
  6. const file = document.querySelectorAll('.file');
  7. const folder = document.querySelectorAll('.folder');
  8. const lightbox = document.querySelector('.lightbox');
  9. const user_name = document.querySelector('.username');
  10.  
  11. // create new DOM elements
  12. const dropDiv = document.createElement('div'); // container div element
  13. dropDiv.className = 'dropdown';
  14.  
  15. const downloadLink = document.createElement('a'); // download button
  16. const downloadText = document.createTextNode('Download');
  17. downloadLink.appendChild(downloadText);
  18. downloadLink.className = 'smallButton';
  19.  
  20. const favLink = document.createElement('a'); // favorite button
  21. const favText = document.createTextNode('Favourite');
  22. favLink.appendChild(favText);
  23. favLink.className = 'smallButton';
  24.  
  25. const deleteLink = document.createElement('a'); // delete button
  26. const deleteText = document.createTextNode('Delete');
  27. deleteLink.appendChild(deleteText);
  28. deleteLink.className = 'smallButton';
  29.  
  30. const cookie = () => {
  31.    
  32.   let getCookies = document.cookie;
  33.  
  34.   if (getCookies !== null) {
  35.     let username = getCookie('auth');
  36.     if (username !== '') {
  37.       user_name.innerHTML = 'Hello ' + username;
  38.     }
  39.   }
  40. };
  41.  
  42. document.onload = cookie();
  43.  
  44. // click listener for hamburger menu button
  45. hamMenu.addEventListener('click', (evt) => {
  46.  
  47.   sidebar.classList.toggle('slideInLeft');
  48.   sidebar.classList.toggle('hidden');
  49. });
  50.  
  51. // click listener for various things
  52. document.addEventListener('click', (evt) => {
  53.     let click = evt.target; // target that is clicked
  54.  
  55.     // checks if you clicked on a info bubble
  56.     // and creates a little dropdown menu
  57.     // and also changes the icon to correspond the right one
  58.     if (click.className.includes('fa-info-circle')) { // the info button
  59.  
  60.       click.className = 'fa fa-2x fa-times-circle';
  61.  
  62.       // here we construct the dropdown menu from components above
  63.       dropDiv.appendChild(downloadLink);
  64.       dropDiv.appendChild(favLink);
  65.       dropDiv.appendChild(deleteLink);
  66.       click.appendChild(dropDiv);
  67.     } else if (click.className.includes('fa-times-circle')) { // the x button
  68.  
  69.       click.className = 'fa fa-2x fa-info-circle';
  70.       dropDiv.remove();
  71.     } else if (click.className.includes('upload')) {
  72.       lightbox.classList.toggle('hidden'); // lightbox toggle
  73.     }
  74. });
RAW Paste Data
Top