Element methods

Below are a number of methods that are in common between all Element UIs.

elements.add()

itemElement.add();

Listen when a user adds a new grocery item to the pantry, handles, quantity, and expiration date would be necessary.

elements.remove()

itemElement.remove();

To remove an item from the pantry, a method to delete it from the database would be necessary.

element.update()

itemElement.update();

To update an existing item in the pantry, a method to modify its name, quantity, or expiration date would be necessary.

element.alert()

itemElement.alert();

To ensure that groceries are used before they expire, a method to send notifications or alerts based on the expiration date of items would be necessary.

Element events

The only way to communicate with your Element is by listening to an event. An Element might emit any of the events below. All events have a payload object that has an elementType property with the type of the Element that emitted the event.

search.element.on(change,handle)

The change event is triggered when the Element's value changes. The event payload always contains certain keys, in addition to some Element-specific keys.

Method parameters

|Field|Parameter|Description| |event|string|The name of the event. In this case, change.| |handler|function|handler(event) => void is a callback function that you provide that will be called when the event is fired. When called it will be passed an event object with the following properties|

Handle a search change event

searchElement.on("change", function (event) {
  const searchTerm = event.target.value;
  const results = searchProducts(searchTerm);
  displayProducts(results);
});

Handler event object

{
  "type": "change",
  "target": {
    "value": "Bananas"
  },
  "timestamp": 123456789 // a timestamp indicating when the event occurred
}

Elements appearance API

Style the container you mount an Element to as if it were an <input> on your page. For example, to control padding and border on an Element, set these properties on the container. This is usually done by re-using the classes that you have applied to your DOM <input> elements. After the Element is mounted, the .FoodinElement class is added to the container. Additionally, the following classes are automatically added to the container when the Element is complete, empty, focused, invalid, or auto filled by the browser:

.FoodinElement

.FoodinElement--complete
.FoodinElement--empty
.FoodinElement--focus
.FoodinElement--invalid
.FoodinElement--webkit-autofill

These class names can be customized using the classes option when you create an Element.

<div class="Pantry" layout-data="grid">
  <div class="Search" layout-data="true">
    <input type="text" placeholder="Search products..." />
  </div>
  <div class="Filter">
    <div class="outOfStock" layout-data="true"></div>
    <div class="Categories">
      <h4>Categories</h4>
      <ul class="layout" layout-data="tabs"></ul>
    </div>
  </div>
  <div class="Items" layout-data="all"></div>
  <div class="Pagination" load-data="infinite"></div>
</div>

element.mount(domElement)

The element.mount method attaches your Element to the DOM. element.mount accepts either a CSS Selector (e.g., '.item-element') or a DOM element.

You need to create a container DOM element to mount an Element. If the container DOM element has a label, the Element is automatically focused when its label is clicked. There are two ways to do this:

• Mount the instance within a <label>.
• Create a <label> with a for attribute, referencing the Class of your container.

<!-- Mount the instance with a class Items -->
<div class="Item" for="itemElement"></div>
 
<script>
  itemElement.mount(".Item");
</script>

The Pantry Element supports visual customization, which allows you to match the design of your app. The layout stays consistent, but you can modify colors, fonts, and more by using the appearance parameter when you call initPantrySheet().

const customAppearance = {
  font: {
    family:
      Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
  },
  shapes: {
    borderRadius: 12,
    borderWidth: 0.5,
  },
  primaryButton: {
    shapes: {
      borderRadius: 20,
    },
  },
  colors: {
    primary: '#91e094,
    background: '#ffffff',
    componentBackground: '#f3f8fa',
    componentBorder: '#ffffff,
    componentBar: '#eeeeee,
    primaryText: '#000000',
    secondaryText: '#898d93,
    componentText: '#000000',
    placeholderText: '#73757b',
  },
};

const pantryElement = new PantryElement({
  appearance: customAppearance,
});

const { error } = await pantryElement.init();

Fonts

Customize the font used in the Pantry by passing a FontConfig object to the font property and setting the family property. On iOS, the value of the family property should be the "PostScript name" of the font found in Font Book. On Android, copy the .ttf or .otf file to the appropriate location in your app's assets, and use the name of the font file as the value of the family property. The Pantry Element will use the font family of your custom font, but will determine its own font sizes and weights.

To adjust the size of text, set the scale property. The Pantry Element multiplies the font sizes by this value before displaying them, which can be useful if your custom font is slightly larger or smaller than the system font.

const { error } = await pantryElement.init({
 ...
 appearance: {
   font: {
     family: Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
     scale: 1.15,
   },
 },
});

Colors

Customize the colors in the Pantry Element by modifying the color categories defined in the GlobalColorConfig. Each color category determines the color of one or more components in the Pantry UI. For example, the primary color category defines the color of the "Add to Pantry" button and selected items such as the "Save this item" checkbox. Refer to the diagram for a visual representation of the UI elements associated with each color category.

Shapes

Besides fonts and colors, you can also customize the border radius, border width, and shadow used throughout the Pantry Element.