Source: js/button_controller.js

  1. import { addEvent, addTask, addCustomTag } from './storage.js';
  2. import { getDaysKey } from './date.js';
  3. // import { getDate } from './navigation.js';
  5. /* 
  6. button_controller.js
  7. contains tag selection and input bar upload funcionality
  8. */
  10. const tagSelectorDOM = document.getElementById('tag-selection');
  12. /**
  13.  * toggle the css display value
  14.  * for the tag selection options
  15.  */
  16. function toggleOptionsDisplay() {
  17.     const optionArr = document.querySelectorAll('.all-tags');
  19.     // loop over all the options in the array to toggle the display
  20.     for (let i = 0; i < optionArr.length; i += 1) {
  21.         const item = optionArr[i];
  22.         item.style.display = item.style.display === '' ? 'none' : '';
  23.         item.selected = false;
  24.     }
  25. }
  27. /**
  28.  *
  29.  * @param {string} oldTime - "hh:mm (24hr)"
  30.  * @returns "hh:mm AM" (12hr)
  31.  */
  32. export function convert24To12(oldTime) {
  33.     if (oldTime !== '') {
  34.         let endHour = oldTime.split(':', 2)[0];
  35.         const endMin = oldTime.split(':', 2)[1];
  36.         let endSuffix = '';
  37.         if (endHour > 12) {
  38.             endHour -= 12;
  39.             if (endHour < 10) {
  40.                 endHour = `0${endHour}`;
  41.             }
  42.             endSuffix = 'PM';
  43.         } else {
  44.             if (endHour === '12') {
  45.                 endSuffix = 'PM';
  46.             } else {
  47.                 endSuffix = 'AM';
  48.             }
  49.             if (endHour === '00') {
  50.                 endHour = '12';
  51.             }
  52.         }
  53.         return `${endHour}:${endMin} ${endSuffix}`;
  54.     }
  55.     return '';
  56. }
  58. if (tagSelectorDOM !== null) {
  59.     const applyTagsDOM = tagSelectorDOM.querySelector('#apply-tags-option');
  60.     const newHeight = '150px'; // new height of tag selection box when clicked on
  62.     /**
  63.      * handling the click events on the document
  64.      */
  65.     document.addEventListener('click', (event) => {
  66.         const elements = document.elementsFromPoint(
  67.             event.clientX,
  68.             event.clientY
  69.         );
  71.         let closeSideBar = true;
  72.         let openTagWindow = true;
  73.         let closeTagWindow = true;
  74.         let closeClock = true;
  75.         let closeUpload = true;
  77.         for (let i = 0; i < elements.length; i += 1) {
  78.             const eleClass = elements[i].getAttribute('class');
  79.             const eleId = elements[i].getAttribute('id');
  81.             // onclick tag selector, display the elements and
  82.             // expand the height of tag selector
  83.             if (openTagWindow && elements[i] === applyTagsDOM) {
  84.                 if (tagSelectorDOM.style.height !== newHeight) {
  85.                     tagSelectorDOM.style.height = newHeight;
  86.                     toggleOptionsDisplay();
  87.                     openTagWindow = false;
  88.                 }
  89.             }
  91.             // if you clicked on a element that has class 'all-tags'
  92.             // then you cant close tag window
  93.             if (eleClass !== null && eleClass.indexOf('all-tags') !== -1)
  94.                 closeTagWindow = false;
  96.             // if you clicked on the sidebar itself
  97.             // or the opensidebar button, dont close side bar
  98.             if (eleId === 'mySidebar' || eleClass === 'openbtn')
  99.                 closeSideBar = false;
  101.             // if you clicked inside the clock then you shouldn't close it
  102.             if (eleId === 'popup-clock' || eleId === 'clock-img')
  103.                 closeClock = false;
  105.             // if you clicked inside the uplaod area
  106.             // or on the button itself, then no close
  107.             if (eleId === 'popup-media' || eleId === 'media-img')
  108.                 closeUpload = false;
  109.         }
  111.         if (closeTagWindow && tagSelectorDOM.style.height !== '') {
  112.             tagSelectorDOM.style.height = '';
  113.             toggleOptionsDisplay();
  114.         }
  116.         if (
  117.             closeSideBar &&
  118.             document.getElementById('mySidebar').style.width !== '0px'
  119.         )
  120.             document.querySelector('.closebtn').onclick(event);
  122.         if (closeClock) {
  123.             const clockDOM = document.getElementById('popup-clock');
  124.             if (clockDOM.style.display !== 'none')
  125.                 clockDOM.style.display = 'none';
  126.         }
  128.         if (closeClock) {
  129.             const clockDOM = document.getElementById('popup-clock');
  130.             if (clockDOM.style.display !== 'none')
  131.                 clockDOM.style.display = 'none';
  132.         }
  134.         if (closeUpload) {
  135.             const uploadDOM = document.getElementById('popup-media');
  136.             if (uploadDOM.style.display !== 'none')
  137.                 uploadDOM.style.display = 'none';
  138.         }
  139.     });
  141.     const addTagDOM = document.getElementById('add-tag-option');
  142.     addTagDOM.addEventListener('keypress', (button) => {
  143.         if (button.key === 'Enter') {
  144.             // ensure bar is not empty
  145.             if (addTagDOM.value.replace(/\s/g, '').length) {
  146.                 // replace spaces and dashes with underscores
  147.                 let tagText = addTagDOM.value;
  148.                 tagText = tagText.replace(/\s/g, '_');
  149.                 tagText = tagText.replace('-', '_');
  150.                 addCustomTag(tagText);
  151.                 addTagDOM.value = '';
  152.             }
  153.         }
  154.     });
  156.     // tag selecting tags onclick
  157.     tagSelectorDOM.addEventListener('change', function handleTags() {
  158.         if (this.value === 'default') {
  159.             return;
  160.         }
  162.         // skip over the last option which is padding
  163.         if (this.value === '') {
  164.             this.value = 'default';
  165.             return;
  166.         }
  168.         const tags = this.children;
  169.         let selectedCount = 0;
  170.         for (let i = 0; i < tags.length; i += 1) {
  171.             if (tags[i].innerHTML.includes('✓')) {
  172.                 selectedCount += 1;
  173.             }
  174.         }
  176.         addTagDOM.placeholder = 'Add Tag Here...';
  177.         for (let i = 0; i < tags.length; i += 1) {
  178.             if (tags[i].innerHTML === this.value) {
  179.                 if (tags[i].innerHTML.includes('✓')) {
  180.                     tags[i].innerHTML = this.value.substring(
  181.                         0,
  182.                         this.value.length - 2
  183.                     );
  184.                 } else if (selectedCount < 3) {
  185.                     // add tag if check not present and less that 3 selected currently
  186.                     tags[i].innerHTML = `${this.value} ✓`;
  187.                 } else {
  188.                     addTagDOM.placeholder = '3 Tags Max!';
  189.                 }
  190.             }
  191.         }
  192.         this.value = 'default';
  193.     });
  195.     /*
  196. implements upload button functionality
  197. */
  198.     document
  199.         .getElementById('task-event-textbox')
  200.         .addEventListener('keypress', (button) => {
  201.             if (button.key === 'Enter') {
  202.                 const input = document.getElementById('task-event-textbox');
  203.                 // ensure bar is not empty
  204.                 if (!input.value.replace(/\s/g, '').length) {
  205.                     return;
  206.                 }
  208.                 // grab event/tag/time info
  209.                 const entry = {};
  211.                 let taskEventChoice = document.getElementById(
  212.                     'task-event-selector'
  213.                 ).value;
  214.                 if (taskEventChoice === 'default') {
  215.                     // default to task
  216.                     taskEventChoice = 'Task';
  217.                 }
  218.                 if (taskEventChoice === 'Task') {
  219.                     /*  entry should contain:
  220.                      *
  221.                      *   content: "Go on a run",
  222.                      *   completed: true/false,
  223.                      *   tags: ["Other", ...]
  224.                      */
  225.                     entry.content = input.value;
  226.                     entry.completed = false;
  227.                     entry.tags = [];
  229.                     // collect selected tags from tag bar
  230.                     const tags =
  231.                         document.getElementById('tag-selection').children;
  232.                     for (let i = 0; i < tags.length; i += 1) {
  233.                         if (tags[i].innerHTML.includes('✓')) {
  234.                             entry.tags.push(
  235.                                 tags[i].innerHTML.substring(
  236.                                     0,
  237.                                     tags[i].innerHTML.length - 2
  238.                                 )
  239.                             );
  240.                         }
  241.                     }
  243.                     // initialize task element
  244.                     const newEntry = document.createElement('task-log');
  245.                     newEntry.content = entry;
  247.                     // Append task element to log (subject to change according to log css etc.)
  248.                     const taskSpace = document.getElementById('log-tasks-area');
  249.                     taskSpace.appendChild(newEntry);
  251.                     addTask(getDaysKey(window.curDate), entry);
  252.                 } else if (taskEventChoice === 'Event') {
  253.                     /*  entry should contain:
  254.                      *
  255.                      *   content: "CSE 110 Lecture",
  256.                      *   tags: ["Lecture", ...],
  257.                      *   from: 1621308663,   (currently contains hh:mm A/PM)
  258.                      *   to: 1621367364      (currently contains hh:mm A/PM)
  259.                      */
  260.                     entry.content = input.value;
  261.                     entry.tags = [];
  263.                     // collect selected tags from tag bar
  264.                     const tags =
  265.                         document.getElementById('tag-selection').children;
  266.                     for (let i = 0; i < tags.length; i += 1) {
  267.                         if (tags[i].innerHTML.includes('✓')) {
  268.                             entry.tags.push(
  269.                                 tags[i].innerHTML.substring(
  270.                                     0,
  271.                                     tags[i].innerHTML.length - 2
  272.                                 )
  273.                             );
  274.                         }
  275.                     }
  277.                     // pull time info from clock icon
  278.                     const from24 =
  279.                         document.getElementById('start-time').children[0].value;
  280.                     const to24 =
  281.                         document.getElementById('end-time').children[0].value;
  282.                     const fromTime = convert24To12(from24);
  283.                     const toTime = convert24To12(to24);
  285.                     /**
  286.                      *  Flipped Time cases(from is after to):
  287.                      *  AM to AM/ PM to PM: flip times and create event normally
  288.                      *  PM to AM: create two events through the night, split at 00:00
  289.                      */
  291.                     // check if times flipped(from hour is greater, or same hour & from minutes greater)
  292.                     if (
  293.                         from24.substring(0, 2) > to24.substring(0, 2) ||
  294.                         (from24.substring(0, 2) === to24.substring(0, 2) &&
  295.                             from24.substring(3, 5) > to24.substring(3, 5))
  296.                     ) {
  297.                         // check PM to AM
  298.                         if (
  299.                             fromTime.substring(
  300.                                 fromTime.length - 2,
  301.                                 fromTime.length
  302.                             ) === 'PM' &&
  303.                             toTime.substring(
  304.                                 toTime.length - 2,
  305.                                 toTime.length
  306.                             ) === 'AM'
  307.                         ) {
  308.                             // create two events
  309.                             // create and add tomorrow's event, change entry.to to 23:59
  310.                             const tomorrowEntry =
  311.                                 document.createElement('event-log');
  312.                             entry.from = '12:00 AM';
  313.                             entry.to = toTime;
  315.                             tomorrowEntry.content = entry;
  316.                             window.curDate.setDate(
  317.                                 window.curDate.getDate() + 1
  318.                             );
  319.                             addEvent(getDaysKey(window.curDate), entry);
  320.                             window.curDate.setDate(
  321.                                 window.curDate.getDate() - 1
  322.                             );
  323.                             // resume entry for today's event
  324.                             entry.from = fromTime;
  325.                             entry.to = '11:59 PM';
  326.                         } else {
  327.                             // flip times
  328.                             entry.from = toTime;
  329.                             entry.to = fromTime;
  330.                         }
  331.                     } else {
  332.                         // normal time case
  333.                         entry.from = fromTime;
  334.                         entry.to = toTime;
  335.                     }
  337.                     // initialize event element
  338.                     const newEntry = document.createElement('event-log');
  339.                     newEntry.content = entry;
  341.                     // Append event element to log (subject to change)
  342.                     const eventSpace =
  343.                         document.getElementById('log-events-area');
  344.                     eventSpace.appendChild(newEntry);
  345.                     addEvent(getDaysKey(window.curDate), entry);
  346.                 }
  347.                 // clear input bar
  348.                 input.value = '';
  349.             }
  350.         });
  351. }
  352. export default toggleOptionsDisplay;