# Float: Native Float Control

The float module provides some interfaces to manage float.

Developers can determine whether these interfaces work in the EdgerOS mobile App environment through the following code:

edger.env().then(data => {
  if (data.env === 'edgerapp') {
    // We work in EdgerOS mobile App environment.
  }
}).catch(error => {
  console.error(error);
});

# Functions

# edger.float.show(params)

Show float for the current EAP.

• params {Object} Parameters for the float show function.
• Returns: {Promise<{id: string}>} Promise object.

The params is an object, it can contain the following members:

• id {String} Float ID. Optional.
• labelColor {String} Foreground color. Optional values: #fff | #ffffff | rgba(56, 11, 11, 0.5) | rgb(56, 11, 11).
• labelBgColor {String} Label background color. Optional values: #fff | #ffffff | rgba(56, 11, 11, 0.5) | rgb(56, 11, 11).
• backgroundColor {String} Float background color. Optional values: #fff | #ffffff | rgba(56, 11, 11, 0.5) | rgb(56, 11, 11).
• icon {String} The icon font name.
• drag {Boolean} Whether the float can be dragged. Optional.
• position {Object} Optional.
  • x {number} Left percent of the float.
  • y {number} Top percent of the float.
• margin {Object} Optional.
  • top {number} Top of the float moved region.
  • left {number} Left of the float moved region.
  • right {number} Right of the float moved region.
  • bottom {number} Bottom of the float moved region.

The returned object can contain the following member:

• id: {String} The float ID.

# Example

const params = {
  icon: 'airplay',
  labelColor: 'rgba(46, 50, 56, 0.05)',
  backgroundColor: '#FAEBD7',
  position: {
    x: 150,
    y: 200
  }
}

edger.float.show(params)

# async / await

async function floatShow() {
  try {
    await edger.float.show(params);
  } catch (error) {
    console.error(error);
  }
}

# edger.float.animate(params)

Execute the animation of the float.

• params {Object} Parameters for the float animate function.
• Returns: {Promise} Fulfill with undefined success.

The params is an object, it can contain the following members:

• id {String} Float ID. Optional.
• animation {String} Animation type. Value: zoom.

# Example

const params = {
  id: 'xxxxxxx',
  animation: 'zoom'
}

edger.float.animate(params)

# async / await

async function floatAnimate() {
  try {
    await edger.float.animate(params);
  } catch (error) {
    console.error(error);
  }
}

# edger.float.hide(params)

Hide the float.

• params {Object} Parameters for the float hide function.
• Returns: {Promise} Fulfill with undefined success.

The params is an object, it can contain the following member:

• id {String} Float ID. Optional.

# Example

const params = {
  id: 'xxxxxxx'
}

edger.float.hide(params)

# async / await

async function floatHide() {
  try {
    await edger.float.hide();
  } catch (error) {
    console.error(error);
  }
}

# edger.float.update(params)

Update the configuration of the float.

• params {Object} Parameters for the float update function.
• Returns: {Promise<{id: string}>} Promise object.

The params is an object, it can contain the following members:

• id {String} Float ID. Optional.
• labelColor {String} Foreground color. Optional values: #fff | #ffffff | rgba(56, 11, 11, 0.5) | rgb(56, 11, 11).
• labelBgColor {String} Label background color. Optional values: #fff | #ffffff | rgba(56, 11, 11, 0.5) | rgb(56, 11, 11).
• backgroundColor {String} Float color. Optional values: #fff | #ffffff | rgba(56, 11, 11, 0.5) | rgb(56, 11, 11).
• icon {String} The icon font name.
• drag {Boolean} Whether the float can be dragged. Optional.
• position {Object} Optional.
  • x {number} Left percent of the float.
  • y {number} Top percent of the float.
• margin {Object} Optional.
  • top {number} Top of the float moved region.
  • left {number} Left of the float moved region.
  • right {number} Right of the float moved region.
  • bottom {number} Bottom of the float moved region.

The returned object can contain the following member:

• id: {String} The float ID.

# Example

const params = {
  id: 'xxxxxxx',
  icon: 'airplay',
  labelColor: 'rgba(46, 50, 56, 0.05)',
  backgroundColor: '#FAEBD7',
  position: {
    x: 150,
    y: 200
  }
}

edger.float.update(params)

# async / await

async function floatUpdate() {
  try {
    await edger.float.update(params);
  } catch (error) {
    console.error(error);
  }
}

# Events

The unified event listener provided by Web-SDK:

const listener = (payload) => {
  // Event handling...
}

// add listener
edger.float.addEventListener('some-event', listener);

// or 
// onAction() is an alias of addEventListener().
edger.float.onAction('some-event', listener);

// remove listener
edger.float.removeEventListener('some-event', listener);

// remove all listeners
edger.float.removeAllListeners();

# click

This event will be generated when the float clicked.

• Returns: {Object} Value: empty object.

# Example

edger.float.addEventListener('click', () => {

});

# blur

This event will be generated when the float moved and touch up.

• Returns: {Object} The object has the following fields:
  • id. {String} Float ID.
  • position: {Object}.
    • x: {number} Left percent of float.
    • y: {number} Top percent of float.

# Example

edger.float.addEventListener('blur', (payload: { id: string, position: {x: number, y: number}}) => {
  console.log('payload: ', payload)
});