bytes-counter

WebJar for bytes-counter

License

License

Categories

Categories

CLI User Interface
GroupId

GroupId

org.webjars.bowergithub.advanced-rest-client
ArtifactId

ArtifactId

bytes-counter
Last Version

Last Version

2.0.1
Release Date

Release Date

Type

Type

jar
Description

Description

bytes-counter
WebJar for bytes-counter
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/advanced-rest-client/bytes-counter

Download bytes-counter

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bowergithub.advanced-rest-client/bytes-counter/ -->
<dependency>
    <groupId>org.webjars.bowergithub.advanced-rest-client</groupId>
    <artifactId>bytes-counter</artifactId>
    <version>2.0.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bowergithub.advanced-rest-client/bytes-counter/
implementation 'org.webjars.bowergithub.advanced-rest-client:bytes-counter:2.0.1'
// https://jarcasting.com/artifacts/org.webjars.bowergithub.advanced-rest-client/bytes-counter/
implementation ("org.webjars.bowergithub.advanced-rest-client:bytes-counter:2.0.1")
'org.webjars.bowergithub.advanced-rest-client:bytes-counter:jar:2.0.1'
<dependency org="org.webjars.bowergithub.advanced-rest-client" name="bytes-counter" rev="2.0.1">
  <artifact name="bytes-counter" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bowergithub.advanced-rest-client', module='bytes-counter', version='2.0.1')
)
libraryDependencies += "org.webjars.bowergithub.advanced-rest-client" % "bytes-counter" % "2.0.1"
[org.webjars.bowergithub.advanced-rest-client/bytes-counter "2.0.1"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.bowergithub.polymer : polymer jar [2.0.0,3)

Project Modules

There are no modules declared in this project.

Published on NPM

Build Status

Published on webcomponents.org

An element that computes number of bytes in String, ArrayBuffer, Blob (and therefore File) and - in supported browsers - from FormData.

Note that Safari is excluded from FormData tests because there's some bug in WebKit implementation of the Request object and it doesn't read FormData properly. Chrome had similar bug but they fixed it already. See demo page to check if your browser support FormData.

This element is native web component without using any library. Do not set attributes as this element do not observe changes to any. Use templating system of your choice to set a property on the element or use it imperatively.

Example

In a Polymer template

<textarea value="{{value::input}}"></textarea>
<bytes-counter value="[[value]]" bytes="{{bytes}}"></bytes-counter>

In a LitElement template

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/bytes-counter/bytes-counter.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <textarea @input="${this._inputHandler}"></textarea>
    <bytes-counter .value="${this.value}" @change="${this._computeHandler}"></bytes-counter>
    `;
  }

  _inputHandler(e) {
    const { value } = e.target;
    this.value = value;
  }

  _computeHandler(e) {
    const { value } = e.detail;
    console.log(`Computed input size is ${value} bytes`);
  }
}
customElements.define('sample-element', SampleElement);

Imperative use

<textarea id="i1"></textarea>
<bytes-counter id="b1"></bytes-counter>
<output id="o1"></output>
<script>
{
  document.getElementById('i1').addEventListener('input', (e) => {
    const { value } = e.target;
    document.getElementById('b1').value = value;
  });
  document.getElementById('b1').addEventListener('bytes-changed', (e) => {
    const { value } = e.detail;
    document.getElementById('o1').value = `Current input has ${value} bytes`;
  });
}
</script>

Note that computations are asynchronous and there is a delay between setting the value property and getting a result.

New in version 3

  • Dropped support for Polymer library. It is not plain web component.
  • Added aria-hidden attribute
  • Added debouncer when setting the value
  • Deprecating bytes-changed event. Use change event instead. This event is kept for compatibility with Polymer.

Development

git clone https://github.com/@advanced-rest-client/bytes-counter
cd bytes-counter
npm install

Running the demo locally

npm start

Running the tests

npm test
org.webjars.bowergithub.advanced-rest-client

ARC

A set of repositories related to the Advanced REST Client and API console (by Mulesoft)

Versions

Version
2.0.1