BulletEntry

BulletEntry

new BulletEntry()

Constructs a blank bullet HTML element using the given HTML template
Properties:
Properties
Name Type Description
data jsonObject associated with this bulletEntry
Name Type Description
labelIDs Array.<string> IDs of the labels assigned
type string string describing type of bullet (e.g. 'task-bullet', 'notes-bullet', etc)
childrenIDs Array.<string> IDs of direct children bullets under this bullet
Source:
Example

Bullet Entry class

//Example of a bullet Json object used to generate a bullet-entry element
const exampleBulletDay = [
    'B 210525 00 00',
    {
      labelIDs: [],
      text: 'Walk the dog',
      type: 'task-bullet',
      childrenIDs: []
    }
];
// Create a bullet custom element using data
const ID = generateID('bullet');
const bullet = document.createElement('bullet-entry');
bullet.data = [ID, exampleBulletDay];

// Create a new bullet custom element from template
const ID = generateID('bullet');
const bullet = document.createElement('bullet-entry');
bullet.data = [ID, {}];

Members

data

Source:

data

Process for setting up data (mostly using shadowRoot)

Checks if jsonData is empty, replacing data with an empty template and writing newly created bullet data to DB

Sets up BulletEntry values for id, text, and data. Text is stored and used internally for determining when to update DB

Fills display with input text, either passed in or generated from template

Iterates through children and recursively sets their values, as well as any eventListeners or data updates

Adds a listener to handle changes to input once user stops focusing on it (called blur -_-)

Adds a listener to the bullet icon to allow user to open bullet type menu on right click and choose a new type of bullet from that menu

Source:

Methods

createChild(childID, childData, newBulletID, siblingElem)

Handles the creation and appending to display of a child bullet, and potential deletion of children

Called for both creation of new and existing children (based off whether param is empty jsonObj or not)

Creation and data setting handled by the bullet-element methods. Appends child under appropriate div in current bullet element

Special definitions for removal of a child bullet (both through buttons and backspacing empty content)

Finally, focused after creation for immediate text input

Source:
Parameters:
Name Type Description
childID string ID used to retrieve (existing) / store (new) child bullet element
childData jsonObject used to store child bullet's data (empty for new)
newBulletID function callback used to generate IDs for potential children
siblingElem HTMLElement optional (on Enter) sibling bullet element to place the child bullet after

createLabel(labelName)

Handles the creation and display of a new label

Called for creation of both new and existing labels

Data setting handled in a layer above (if needed at all)

Special click listeners added to allow for removal of a label (calls a helper function for deletion)

Source:
Parameters:
Name Type Description
labelName string used to figure out what color the label should be

removeChild(child, childID)

Handles removal of a child from display, parent data, and database
Source:
Parameters:
Name Type Description
child HTMLElement reference to child bullet's html element
childID string used to remove from childIDs list in parent and from database

removeLabel(label, labelID)

Handles removal of a label from display, parent data, and database
Source:
Parameters:
Name Type Description
label HTMLElement reference to element representing the label itself
labelID string used to remove from labelIDs list in parent and from database

setChildren(newBulletID)

Handles the creation, appending, and deletion of EXISTING children

Iterates through each childID in data:

1. Creates a new bullet-entry element

2. Fetches data and calls on helper function for child creation

Source:
Parameters:
Name Type Description
newBulletID function callback used to generate IDs for potential children

setLabels()

Handles the creation, appending, and deletion of EXISTING labels

Iterates through each labelID in data and call a helper function to generate each label

Source:

storeToDatabase(array)

Stores Obj using id to database, optionally logging on success or fail
Source:
Parameters:
Name Type Description
array Array.<Object> of parameters passed into function
Name Type Description
id string ID to store under
jsonData jsonObject Data to be stored
log bool whether or not to log Success/Fail

Type Definitions

addChildBullet(event)

Handles the process for creating a NEW bullet

Performs generation of an ID via the passed in callback (which also updates calling section's newBulNum)

Updates data (both parent and database) with new child (ID)

Calls on helper function for generating the child bullet element

Source:
Parameters:
Name Type Description
event onClickEvent provides access to parent to append child bullet to

addLabelCallback(event)

Handles the process for creating a NEW label

Grabs the name (ID) of the label from the id of the selected option

Updates data (both parent and database) with new label (ID)

Calls on helper function for generating and displaying the label

Source:
Parameters:
Name Type Description
event onClickEvent provides access to the option that the user selected

editTextCallback(event)

Does a comparison between original text and text currently stored in data for differences as well as ensuring there actually IS text to store (avoids re-saving after deletion bug found earlier)

Updates interally stored text (for future reference) and value in database

Source:
Parameters:
Name Type Description
event blurEvent provides access to element that stopped getting focused (for it's innerText)

removeChildCallback(event)

Removal triggers if backspace is pressed when either there is no input or input is just a single newline (handles a bug we found)

Removal starts with display - specifically removing child from div for containing children under this bullet. Note that if a child bullet is removed with children (grand-children of current bullet) under it, the grand-children will also disappear from display but will still exist in database and child's childID list (not an issue since this childID will never be re-used)

Next the childID is used to remove from Database as well

Finally, the childIDs data is updated with the removal of the childID

Source:
Parameters:
Name Type Description
event keydownEvent provides access to key that was clicked as well as element that event was triggered under

removeLabelCallback(event)

Removal triggered by clicking on the label

Removal starts with display, the element representing the label is removed from div

labelID is used to remove from Database as well

Finally, the labelIDs data is updated with the removal of the labelID

Source:
Parameters:
Name Type Description
event onClickEvent provides access to the element that contains the label to remove