bitty - dynamic features for your static pages

I'm still working on getting the docs put in place

Script Inclusion

All the examples on the page are live. The code you see on the page is what's running behind the scenes. You can copy and past the code blocks on your own site and they'll run there as well. The only changes you need to make are:

Load the bitty web component once on the page with the script tag:

    <script 
  src="https://unpkg.com/@alanwsmith/bitty@7.0.0/bitty-7.0.0.js" 
  type="module"></script>

Wrap the JavaScript example blocks in a <script></script> tag.

Release Notes

Check out the release notes for the latest changes.

Overview

This page contains the documentation for bitty's entire public API. It's broken down into four categories:

The `data-*` attribute that make up the HTML interface
`this.api...` methods provided by bitty for use inside the JavaScipt class that's providing functionality
Helper methods and properties that are added to events that come in from bitty signals (i.e. the `ev` argument in `someFeature(ev, el)` methods).
Helper methods and properties that are added to the elements that are processed when a bitty signal is received (i.e. the `e.` argument in `someFeature(ev, el)` methods).

Terminology

Under construction.

Event and Element Varaibles

bitty sends to arguemnts to the methods that process signals. The first is the event that triggered the signal. The second is the element that's currently being processed. The signture looks like this:

someMethod(ev, el) {
  // functionality goes here
}

This documentaiton uses `ev` to identify the events and `el` to identify the elements.

HTML data-*attribute API

data-connect

Availability

<bitty-7-0> tags: Yes
Child elements: No

Details

TOdo: Document that they url based `data-connect` values must either start with `http` or a `/`. If it's `http`, then it's used directly. If it's a `/`, the domain and port from the `window.location.href` is used.

Defines the class that provides functionality to the component.

Each <bitty-7-0> requires an external class to provide its functionality. The class can reside in one of four locations:

If there is no data-connect attribute on the <bitty-7-0> component tag, then bitty looks for a window.BittyClass variable. For example:
index.html
```
<!doCTYPE html>
<html lang="en">
<head>

<script>
window.BittyClass = class {
  showDate(_, el) {
    el.innerHTML = new Date();
  }
};
</script>

</head>

<body>
<bitty-7-0>
  <button data-use="showDate">
    Get the date
  </button>
</bitty-7-0>

<script 
  src="https://unpkg.com/@alanwsmith/bitty@7.0.0/bitty-7.0.0.js" 
  type="module"></script>

</body>
</html>
```
Example
(notE: If you clicked the button in the example at the top of the page the date will already be showing here. That's because both examples are on the same page. It's possible to separate them, but it adds a little extra code that isn't necessary in general usage. )

If the data-connect attribute exists and its value matches a variable on the window object, then the class from that variable is used. For example:

index.html

<!doCTYPE html>
<html lang="en">
<head>

<script>
window.AltBittyClass = class {
  altClassRandomNumber(_, el) {
    el.innerHTML = Math.random();
  }
};</script>

</head>

<body>
<bitty-7-0 data-connect="AltBittyClass">
  <button data-use="altClassRandomNumber">
    Get Random Number
  </button>
</bitty-7-0>

<script 
  src="https://unpkg.com/@alanwsmith/bitty@7.0.0/bitty-7.0.0.js" 
  type="module"></script>
</body>
</html>

Example

The default export from an external module when the value of `data-connect` is the path to the module. For example:

index.html

<!doCTYPE html>
<html lang="en">
<body>
<bitty-7-0 data-connect="/documentation/7/0/0//support/data-connect-default-class.js">
  <button data-use="defaultModuleClassRandomNum">
    Get Random Number
  </button>
</bitty-7-0>


<script 
  src="https://unpkg.com/@alanwsmith/bitty@7.0.0/bitty-7.0.0.js" 
  type="module"></script>
</body>
</html>

/documentation/7/0/0/support/data-connect-default-class.js

export default class {
  defaultModuleClassRandomNum(_event, el) {
    el.innerHTML = Math.random();
  }
}

Example

A named class from an external module when the value of `data-connect` is a path followed by a space then the name of the class to look for. For example:

index.html

<!doCTYPE html>
<html lang="en">
<body>
<bitty-7-0 data-connect="/documentation/7/0/0//support/data-connect-alt-class.js AltModuleClass">
  <button data-use="altModuleClassRandomNum">
    Get Random Number
  </button>
</bitty-7-0>

<script 
  src="https://unpkg.com/@alanwsmith/bitty@7.0.0/bitty-7.0.0.js" 
  type="module"></script>
</body>
</html>

/documentation/7/0/0//support/data-connect-alt-class.js

export class AltModuleClass {
  altModuleClassRandomNum(_event, el) {
    el.innerHTML = Math.random();
  }
}

Example

data-init

Availability

<bitty-7-0> tags: Yes
Child elements: Yes

Details

data-init is designed to do the initial load in of elements on a page.
Signals defined by the data-init attribute fire once when the component is initializing.
The signals are processed after bittyInit() is called in the class and before data-send signals from the <bitty-7-0> tag are sent.
Child elements with `data-init` attributes that are added to a bitty element after it has been initialized _do not_ fire the `data-init` process.

page.html

<bitty-7-0 
  data-connect="DataInitExample">
  <div data-init="loadDataInitExample"></div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-init/basic-example/script.js

window.DataInitExample = class {
  loadDataInitExample(_, el) {
    el.innerHTML = "Initialization process complete";
  }
};

Example

data-listeners

Availability

<bitty-7-0> tags: Yes
Child elements: No

Details

The data-listeners attribute changes the events a component listens for. The default events are `click` and `input`. Changing it to listen to `mouseenter` looks like this:

page.html

<bitty-7-0 
  data-connect="MouseListener"
  data-listeners="mouseover">
  <div data-send="listenerMouseOver">
    Move Mouse Over
  </div>
  <div data-receive="listenerMouseOver">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-listeners/mouseover/script.js

window.MouseListener = class {
  listenerMouseOver(_, el) {
    el.innerHTML = Math.random();
  }
}

Example

Move Mouse Over

Multiple listeners can be added by separating them with a space:

page.html

<bitty-7-0 
  data-connect="MouseOverOutListener"
  data-listeners="mouseover mouseout">
  <div data-send="listenerMouseOverAndOut">
    Move Mouse Over
  </div>
  <div data-receive="listenerMouseOverAndOut">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-listeners/mouseover-out/script.js

window.MouseOverOutListener = class {
  listenerMouseOverAndOut(_, el) {
    el.innerHTML = event.type;
  }
}

Example

Move Mouse Over

Using `data-listeners` remove the default `click` and `input` listeners. They can be added back in explicitly if needed.

page.html

<bitty-7-0 
  data-connect="MouseListenerWithClick"
  data-listeners="mouseover mouseout click input">
  <div data-send="listenerWithClickInput">
    Move Mouse Over or Click
  </div>
  <div data-receive="listenerWithClickInput">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-listeners/with-click-input/script.js

window.MouseListenerWithClick =  class {
  listenerWithClickInput(event, el) {
    el.innerHTML = event.type;
  }
}

Example

Move Mouse Over or Click

data-receive

Availability

<bitty-7-0> tags: No
Child elements: Yes

Details

Adding a `data-receive` attribute to an element sets it up to receive signals with the given name.

page.html

<bitty-7-0 data-connect="ReceiveExample">
  <button data-send="receiveSignal">
    Click For Random Number
  </button>
  <div data-receive="receiveSignal">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-receive/single/script.js

window.ReceiveExample = class {
  receiveSignal(_event, el) {
    el.innerHTML = Math.random();
  }
}

Example

Multiple elements can receive the same signal. Each one gets passed through the corresponding function individually (i.e. a different random number is generated for each):

page.html

<bitty-7-0 data-connect="ToMultiple">
  <button data-send="multipleElementSignal">
    Click For Random Number
  </button>
  <div data-receive="multipleElementSignal">-</div>
  <div data-receive="multipleElementSignal">-</div>
  <div data-receive="multipleElementSignal">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-receive/multiple-elements/script.js

window.ToMultiple =  class {
  multipleElementSignal(_event, el) {
    el.innerHTML = Math.random();
  }
}

Example

A single element can receive multiple signals by separating the signal names with a space in the `data-receive` attribute:

page.html

<bitty-7-0 data-connect="ReceiveMultiple">
  <button data-send="receiveAlfa">
    Send Alfa
  </button>
  <button data-send="receiveBravo">
    Send Bravo
  </button>
  <button data-send="receiveCharlie">
    Send Charlie
  </button>
  <div data-receive="receiveAlfa receiveBravo receiveCharlie">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-receive/receive-multiple/script.js

window.ReceiveMultiple = class {
  receiveAlfa(_, el) {
    el.innerHTML = "Got Alfa";
  }
  receiveBravo(_, el) {
    el.innerHTML = "Got Bravo";
  }
  receiveCharlie(_, el) {
    el.innerHTML = "Got Charlie";
  }
}

Example

data-send

Availability

<bitty-7-0> tags: Yes
Child elements: Yes

Details

Sending Single Signals

The `data-send` attribute defines which signals an element sends when an event that's being listend for fires.

page.html

<bitty-7-0 data-connect="SingleSender">
  <button data-send="singleSignal">
    Click For Random Number
  </button>
  <div data-receive="singleSignal">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-send/single/script.js

window.SingleSender = class {
  singleSignal(_event, el) {
    el.innerHTML = Math.random();
  }
}

Example

Sending Multiple Signals

A single element can send multiple signals by separating them with a space in the `data-send` attribute:

page.html

<bitty-7-0 data-connect="MultipleSends">
  <button data-send="sendMultipleAlfa sendMultipleBravo sendMultipleCharlie">
    Send Multiple Signals
  </button>
  <div data-receive="sendMultipleAlfa">-</div>
  <div data-receive="sendMultipleBravo">-</div>
  <div data-receive="sendMultipleCharlie">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-send/multiple/script.js

window.MultipleSends = class {  
  sendMultipleAlfa(_, el) {
    el.innerHTML = `Alfa ${Math.random()}`;
  }
  sendMultipleBravo(_, el) {
    el.innerHTML = `Bravo ${Math.random()}`;
  }
  sendMultipleCharlie(_, el) {
    el.innerHTML = `Charlie ${Math.random()}`;
  }
}

Example

Sending From the <bitty-7-0> tag

A `data-send` attribute can be added to the bitty-7-0 component tag itself. It functions the same was as `data-send` attributes on child elements

page.html

<bitty-7-0 
  data-connect="FromBitty"
  data-send="sendFromBitty"
>
  <div data-receive="sendFromBitty">
    Click the green area
  </div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-send/from-bitty/script.js

window.FromBitty = class {
  sendFromBitty(event, el) {
    el.innerHTML = `Got: ${event.type}`;
  }
}

Example

Click the green area

Sending Without Receivers

If an event triggers a `data-send` signal and there are no matching `data-receive` elements, then the corresponding method is fired once with a `null` value for the element. For example:

page.html

<bitty-7-0 data-connect="NoReceivers">
  <button data-send="noReceivers">
    Increment
  </button>
  <div class="no-receiver-output">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-send/no-receivers/script.js

window.NoReceivers = class {
  #count = 0;

  noReceivers(_event, _el) {
    this.#count += 1;
    const outputEl = document.querySelector(
      ".no-receiver-output"
    );
    outputEl.innerHTML = this.#count;
  }
}

Example

This is useful when the number of times an update needs to occur differers from the number of receiving elements. For example, incrementing by one works if a button is connected to only one element with a matching `data-receive` attribute:

page.html

<bitty-7-0 data-connect="OneReceiver">
  <button data-send="incrementWithOneReceiver">
    Increment
  </button>
  <div data-receive="incrementWithOneReceiver">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-send/one-receiver/script.js

window.OneReceiver = class {
  #count = 0;
  incrementWithOneReceiver(_event, el) {
    this.#count += 1;
    el.innerHTML = this.#count;
  }
}

Example

If there are multiple receivers, each one increments the `#count` on its own. For example, every click of this button adds one to each output so they end up with `1, 2, 3`, then `4, 5, 6`, etc...

page.html

<bitty-7-0 data-connect="SingleSendMultipleReceivers">
  <button data-send="incrementWithMultipleReceivers">
    Increment
  </button>
  <div data-receive="incrementWithMultipleReceivers">-</div>
  <div data-receive="incrementWithMultipleReceivers">-</div>
  <div data-receive="incrementWithMultipleReceivers">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-send/multiple-receivers/script.js

window.SingleSendMultipleReceivers = class {  
  #count = 0;
  incrementWithMultipleReceivers(_event, el) {
    this.#count += 1;
    el.innerHTML = this.#count;
  }
}

Example

Sending an individual signal to do the incrementing that isn't associated with an `data-receive` elements followed by a signal that _is_ connected to them keeps them in sync

page.html

<bitty-7-0 data-connect="SyncedReceivers">
  <button data-send="incrementWithoutReciever displayMultipleReceivers">
    Increment
  </button>
  <div data-receive="displayMultipleReceivers">-</div>
  <div data-receive="displayMultipleReceivers">-</div>
  <div data-receive="displayMultipleReceivers">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-send/synced-receivers/script.js

window.SyncedReceivers = class {
  #count = 0;
  incrementWithoutReciever(_event, _el) {
    this.#count += 1;
  }

  displayMultipleReceivers(_event, el) {
    el.innerHTML = this.#count;
  }
}

Example

async Signal Methods

Signal Methods can be `async`

page.html

<bitty-7-0 data-connect="AsyncSend">
  <button data-send="asyncSendDemo">
    Send Signal
  </button>
  <div data-receive="asyncSendDemo">-</div>
</bitty-7-0>

/documentation/7/0/0/_includes/html.attributes.api/data-send/async-send/script.js

window.AsyncSend = class {
   async asyncSendDemo(_event, el) {
    el.innerHTML = "Loading...";
    await new Promise(resolve => setTimeout(resolve, 2000));
    el.innerHTML = "Done";
  }
}

Example

awaiting async Signals

async signals can be awaited by prefacing them with await: (i.e. await:someSignal someOtherSignal)

TOdo: add await example

notE: Each bitty element on a page receives signlas independently. There is no built-in await across them if more than one receive the signal

Sending Signals from Ancestors

TOdo: Cover that events only go up to the first element with a `data-send` attribute on them. (i.e. if there are ancestors further up the doM that have `data-send` they are not triggered)

TOdo: Create ancestors example

data-use

Availability

<bitty-7-0> tags: No
Child elements: Yes

Details

data-use combines the baisc features of data-send and data-receive but only operates on itself. (i.e. if you click an element with data-use="SomeSignal" it will use the corresponding method but any elements with data-receive="SomeSignal" won't be affected.

TOdo: Exapand the write up and add examples

this.api Methods

forward(event, signal)

TOdo

Arguments

event

TOdo

signal

TOdo

getElement(url, subs=[], options={})

TOdo

Arguments

url

TOdo

subs=[]

TOdo

options={}

TOdo

getHTML(url, subs=[], options={})

TOdo

Arguments

url

TOdo

subs=[]

TOdo

options={}

TOdo

getJSON(url, subs=[], options={})

TOdo

Arguments

url

TOdo

subs=[]

TOdo

options={}

TOdo

getSVG(url, subs=[], options={})

TOdo

Arguments

url

TOdo

subs=[]

TOdo

options={}

TOdo

getTXT(url, subs=[], options={})

TOdo

Arguments

url

TOdo

subs=[]

TOdo

options={}

TOdo

loadCSS(url, subs=[], options={})

TOdo

Arguments

url

TOdo

subs=[]

TOdo

options={}

TOdo

localTrigger(signal)

TOdo

Arguments

signal

TOdo

makeElement(template, subs=[])

TOdo

Arguments

template

TOdo

subs=[]

TOdo

makeHTML(template, subs=[])

TOdo

Arguments

template

TOdo

subs=[]

TOdo

makeSVG(template, subs=[])

TOdo

Arguments

template

TOdo

subs=[]

TOdo

makeTXT(template, subs=[])

TOdo

Arguments

template

TOdo

subs=[]

TOdo

setProp(key, value)

TOdo

Arguments

key

TOdo

value

TOdo

trigger(signal)

TOdo

Arguments

signal

TOdo

Event API Extensions

ev

Methods

ev.prop(KEY) [added: 7.0.0]

Arguments

KEY

The KEY part of data-KEY to match

Description

Looks for a data-KEY attribute from the ev.target element in its ev.target.datasetproperty that matches KEY and returns the value as a string.
If the ev.target element does not have a data-KEY the process looks for ancestors with a data-KEY attribute. The first one that's found gets used.
If neither the ev.target element or any of its ancestors have the data-KEYattribute the returned value is undefined.

Tests

If ev has a data-KEY="VALUE" attribute, then the VALUE is returned as a string. [generated-0010]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProp0010">
  <button data-evmethodsevprop0010="value0010" data-send="runEvMethodsEvProp0010">Test Target</button>
  <div 
    data-receive="runEvMethodsEvProp0010"
    data-expects="value0010"
  >waiting</div>

</bitty-7-0>

JavaScript

window.TestEvMethodsEvProp0010 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProp0010(ev, el) {
    el.innerHTML = ev.prop("evmethodsevprop0010")
  }

}

waiting

ev does not have a data-KEY="VALUE" attribute, but an ancestor of ev does have a data-KEY="VALUE" attribute, then VALUE is returned as a string. [generated-0020]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProp0020">
  <div data-evmethodsevprop0020="value0020">
    <button data-send="runEvMethodsEvProp0020">Test Target</button>
    <div
      data-receive="runEvMethodsEvProp0020"
      data-expects="value0020"
    >
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestEvMethodsEvProp0020 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProp0020(ev, el) {
    el.innerHTML = ev.prop("evmethodsevprop0020")
  }



}

waiting

If neither ev or an ancestor of ev have a data-KEY="VALUE" attribute, then undefined is returned. [generated-0030]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProp0030">
  <div>
    <button data-send="runEvMethodsEvProp0030">Test Target</button>
    <div
      data-receive="runEvMethodsEvProp0030"
      data-expects="undefined"
    >
      waiting
    </div>
  </div>


</bitty-7-0>

JavaScript

window.TestEvMethodsEvProp0030 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProp0030(ev, el) {
    el.innerHTML = ev.prop("evmethodsevprop0030")
  }
}

waiting

ev.propToFloat(KEY) [added: ]

Arguments

KEY

The KEY part of data-KEY to match

Description

Tests

return the value of a data-KEY attribute from the ev as a float [generated-0010]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProptofloat0010">
  <button data-alfa="10.01" data-send="runEvMethodsEvProptofloat0010">Test Target</button>

  <div 
    data-receive="runEvMethodsEvProptofloat0010"
    data-expects="received float"
  >
    waiting 
  </div>

</bitty-7-0>

JavaScript

window.TestEvMethodsEvProptofloat0010 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProptofloat0010(ev, el) { 
    const got = ev.propToFloat("alfa");
    if (got === 10.01) {
      el.innerHTML = "received float";
    }
  }
}

waiting

return a float if ev does not have data-KEY attribute, but an ancestor DOES have a data-KEY attribute [generated-0020]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProptofloat0020">
  <section data-bravo="20.02">
    <div class="extra-wrapper">
      <button data-send="runEvMethodsEvProptofloat0020">Test Target</button>
      <div 
        data-receive="runEvMethodsEvProptofloat0020" 
        data-expects="received float"
      >
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestEvMethodsEvProptofloat0020 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProptofloat0020(ev, el) {
    const value = ev.propToFloat("bravo");
    if (value === 20.02) {
      el.innerHTML = "received float";
    }
  }
}

waiting

return floatfrom evif ev has a data-KEY attribute and an ancestor of ev has a data-KEY attribute [generated-0030]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProptofloat0030">
  <section data-charlie="99.99">
    <div class="extra-wrapper">
      <button data-charlie="30.03" data-send="runEvMethodsEvProptofloat0030">Test Target</button>
      <div 
        data-receive="runEvMethodsEvProptofloat0030" 
        data-expects="received float"
      >
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestEvMethodsEvProptofloat0030 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProptofloat0030(ev, el) {
    const value = ev.propToFloat("charlie");
    if (value === 30.03) {
      el.innerHTML = "received float";
    }
  }
}

waiting

return undefined if ev does not have a data-KEY attribute and ancestors do not have data-KEY attributes [generated-0040]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProptofloat0040">
  <section>
    <div class="extra-wrapper">
      <button data-send="runEvMethodsEvProptofloat0040">Test Target</button>
      <div data-receive="runEvMethodsEvProptofloat0040" data-expects="undefined">
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestEvMethodsEvProptofloat0040 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProptofloat0040(ev, el) {
    el.innerHTML = ev.propToFloat("a-key-that-does-not-exist");
  }
}

waiting

return NaN if ev has a data-KEY attribute but it is not a number [generated-0050]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProptofloat0050">
  <section>
    <div class="extra-wrapper">
      <button data-send="runEvMethodsEvProptofloat0050">Test Target</button>
      <div 
        data-echo="not a number"
        data-receive="runEvMethodsEvProptofloat0050" 
        data-expects="NaN"
      >
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestEvMethodsEvProptofloat0050 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }


  runEvMethodsEvProptofloat0050(ev, el) {
    el.innerHTML = ev.propToFloat("echo")
  }
}

waiting

return NaN if ev does not have a data-KEY but an ancestor does have a data-KEY attribute but it is not a number [generated-0060]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProptofloat0060">
  <section data-foxtrot="not a number">
    <div class="extra-wrapper">
      <button data-send="runEvMethodsEvProptofloat0060">Test Target</button>
      <div
        data-receive="runEvMethodsEvProptofloat0060" 
        data-expects="NaN" 
      >
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestEvMethodsEvProptofloat0060 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProptofloat0060(ev, el) {
    el.innerHTML = ev.propToFloat("foxtrot")
  }
}

waiting

ev.propToInt(KEY) [added: ]

Arguments

KEY

The KEY part of data-KEY to match

Description

Tests

return Int if ev has a data-KEY attribute and it's an Int [generated-0010]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProptoint0010">
  <button data-alfa="2000"  data-send="runEvMethodsEvProptoint0010">Test Target</button>
  <div 
    data-receive="runEvMethodsEvProptoint0010"
    data-expects="received integer">
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestEvMethodsEvProptoint0010 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProptoint0010(ev, el) {
    const value = ev.propToInt("alfa");
    if (value === 2000) {
      el.innerHTML = "received integer";
    }
  }
}

waiting

return Int if ev does not have a data-KEY attribute, but an ancestor does have a data-KEY attribute [generated-0020]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProptoint0020">

  <section data-bravo="7000">
    <div class="extra-wrapper">
      <button data-send="runEvMethodsEvProptoint0020">Test Target</button>
      <div data-receive="runEvMethodsEvProptoint0020" data-expects="received integer">
        waiting
      </div>
    </div>
  </section>

</bitty-7-0>

JavaScript

window.TestEvMethodsEvProptoint0020 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProptoint0020(ev, el) {
    const value = ev.propToInt("bravo");
    if (value === 7000) {
      el.innerHTML = "received integer";
    }
  }

}

waiting

return Int from evif ev has a data-KEY attribute and an ancestor of ev has a data-KEY attribute [generated-0030]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProptoint0030">

  <section data-charlie="4000">
    <div class="extra-wrapper">
      <button data-charlie="3000" data-send="runEvMethodsEvProptoint0030">Test Target</button>
      <div data-receive="runEvMethodsEvProptoint0030" data-expects="received integer">
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestEvMethodsEvProptoint0030 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProptoint0030(ev, el) {
    const value = ev.propToInt("charlie");
    if (value === 3000) {
      el.innerHTML = "received integer";
    }
  }
}

waiting

return undefined if ev does not have a data-KEY attribute and ancestors do not have data-KEY attributes [generated-0040]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProptoint0040">

  <section>
    <div class="extra-wrapper">
      <button data-send="runEvMethodsEvProptoint0040">Test Target</button>
      <div data-receive="runEvMethodsEvProptoint0040" data-expects="undefined">
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestEvMethodsEvProptoint0040 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }


  runEvMethodsEvProptoint0040(ev, el) {
    el.innerHTML = ev.propToInt("delta");
  }
}

waiting

return NaN if ev has a data-KEY attribute but it is not a number [generated-0050]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProptoint0050">

  <section>
    <div class="extra-wrapper">
      <button data-delta="not a number" data-send="runEvMethodsEvProptoint0050">Test Target</button>
      <div 
        data-receive="runEvMethodsEvProptoint0050" 
        data-expects="NaN"
      >
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestEvMethodsEvProptoint0050 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProptoint0050(ev, el) {
    el.innerHTML = ev.propToInt("delta")
  }
}

waiting

return NaN if ev does not have a data-KEY but an ancestor does have a data-KEY attribute but it is not a number [generated-0060]

HTML

<bitty-7-0 data-connect="TestEvMethodsEvProptoint0060">

  <section data-foxtrot="not a float">
    <div class="extra-wrapper">
      <button data-send="runEvMethodsEvProptoint0060">Test Target</button>
      <div data-expects="NaN" data-receive="runEvMethodsEvProptoint0060">
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestEvMethodsEvProptoint0060 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvMethodsEvProptoint0060(ev, el) {
    el.innerHTML = ev.propToInt("foxtrot")
  }

}

waiting

Properties

ev.bittyId [added: 7.0.0]

Description

Alias for ev.target.dataset.bittyid.

Tests

bittyId exists [generated-0010]

HTML

<bitty-7-0 data-connect="TestEvPropertiesEvBittyid0010">
  <button data-send="runEvPropertiesEvBittyid0010">Test Button</button>
 <div data-receive="runEvPropertiesEvBittyid0010" data-expects="has id">
    waiting
  </div></bitty-7-0>

JavaScript

window.TestEvPropertiesEvBittyid0010 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvPropertiesEvBittyid0010(_, el) {
    if (el.bittyId !== undefined) {
      el.innerHTML = "has id";
    }
  }
}

waiting

ev.sender [added: 7.0.0]

Description

Reference to the HTML Element that sent the event.

Tests

[generated-0010]

HTML

<bitty-7-0 data-connect="TestEvPropertiesEvSender0010">
  <div class="clickme" data-use="runEvPropertiesEvSender0010" data-expects="got element">
    waiting
  </div></bitty-7-0>

JavaScript

window.TestEvPropertiesEvSender0010 = class {
    bittyReady() {
    this.api.querySelector(".clickme").click();
  }

  runEvPropertiesEvSender0010(ev, el) {
    if (el.bittyId === ev.sender.dataset.bittyid) {
      el.innerHTML = "got element";
    }
  }
}

waiting

ev.value [added: 7.0.0]

Description

Alias for ev.target.value.

Tests

[generated-0010]

HTML

<bitty-7-0 data-connect="TestEvPropertiesEvValue0010">
  <input 
    type="submit"
    data-send="runEvPropertiesEvValue0010"
    value="alfa"
  />
  <div data-receive="runEvPropertiesEvValue0010" data-expects="alfa">waiting</div></bitty-7-0>

JavaScript

window.TestEvPropertiesEvValue0010 = class {
    bittyReady() {
    this.api.querySelector("input").click();
  }

  runEvPropertiesEvValue0010(ev, el) {
    el.innerHTML = ev.value;
  }
}

waiting

ev.valueToFloat [added: 7.0.0]

Description

Alias for parseFloat(ev.target.value).

Tests

[generated-0010]

HTML

<bitty-7-0 data-connect="TestEvPropertiesEvValuetofloat0010">
  <input 
    type="submit"
    data-send="runEvPropertiesEvValuetofloat0010"
    value="75.75"
  />
  <div data-receive="runEvPropertiesEvValuetofloat0010" data-expects="got float">waiting</div></bitty-7-0>

JavaScript

window.TestEvPropertiesEvValuetofloat0010 = class {
    bittyReady() {
    this.api.querySelector("input").click();
  }

  runEvPropertiesEvValuetofloat0010(ev, el) {
    if (ev.valueToFloat === 75.75) {
      el.innerHTML = "got float";
    }
  }
}

waiting

ev.valueToInt [added: 7.0.0]

Description

Alias for parseInt(ev.target.value, 10).

Tests

[generated-0010]

HTML

<bitty-7-0 data-connect="TestEvPropertiesEvValuetoint0010">
  <input 
    type="submit"
    data-send="runEvPropertiesEvValuetoint0010"
    value="3030"
  />
  <div data-receive="runEvPropertiesEvValuetoint0010" data-expects="got int">waiting</div></bitty-7-0>

JavaScript

window.TestEvPropertiesEvValuetoint0010 = class {
    bittyReady() {
    this.api.querySelector("input").click();
  }

  runEvPropertiesEvValuetoint0010(ev, el) {
    if (ev.valueToFloat === 3030) {
      el.innerHTML = "got int";
    }
  }
}

waiting

ev.sender

Methods

ev.sender.prop(KEY) [added: 7.0.0]

Arguments

Description

Looks for a data-KEY attribute from the ev.sender element in its ev.sender.datasetproperty that matches KEY and returns the value as a string.
If the ev.sender element does not have a data-KEY the process looks for ancestors with a data-KEY attribute. The first one that's found gets used.
If neither the ev.sender element or any of its ancestors have the data-KEYattribute the returned value is undefined.

Tests

If ev.sender has a data-KEY="VALUE" attribute, then the VALUE is returned as a string. [generated-0010]

HTML

<bitty-7-0 data-connect="TestEvSenderMethodsEvSenderProp0010">
  <button data-evsendermethodsevsenderprop0010="value0010" data-send="runEvSenderMethodsEvSenderProp0010">Test Target</button>
  <div 
    data-receive="runEvSenderMethodsEvSenderProp0010"
    data-expects="value0010"
  >waiting</div>

</bitty-7-0>

JavaScript

window.TestEvSenderMethodsEvSenderProp0010 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvSenderMethodsEvSenderProp0010(ev, el) {
    el.innerHTML = ev.sender.prop("evsendermethodsevsenderprop0010")
  }

}

waiting

ev.sender.propToFloat(KEY) [added: 7.0.0]

Arguments

Description

Looks for a data-KEY attribute from the ev.sender element in its ev.sender.datasetproperty that matches KEY and returns the value as a string.
If the ev.sender element does not have a data-KEY the process looks for ancestors with a data-KEY attribute. The first one that's found gets used.
If neither the ev.sender element or any of its ancestors have the data-KEYattribute the returned value is undefined.

Tests

return the value of a data-KEY attribute from the ev as a float [generated-0010]

HTML

<bitty-7-0 data-connect="TestEvSenderMethodsEvSenderProptofloat0010">
  <button data-alfa="10.22" data-send="runEvSenderMethodsEvSenderProptofloat0010">Test Target</button>

  <div 
    data-receive="runEvSenderMethodsEvSenderProptofloat0010"
    data-expects="received float"
  >
    waiting 
  </div>

</bitty-7-0>

JavaScript

window.TestEvSenderMethodsEvSenderProptofloat0010 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvSenderMethodsEvSenderProptofloat0010(ev, el) { 
    const got = ev.sender.propToFloat("alfa");
    if (got === 10.22) {
      el.innerHTML = "received float";
    }
  }

}

waiting

ev.sender.propToInt(KEY) [added: 7.0.0]

Arguments

Description

Looks for a data-KEY attribute from the ev.sender element in its ev.sender.datasetproperty that matches KEY and returns the value as a string.
If the ev.sender element does not have a data-KEY the process looks for ancestors with a data-KEY attribute. The first one that's found gets used.
If neither the ev.sender element or any of its ancestors have the data-KEYattribute the returned value is undefined.

Tests

return Int if ev has a data-KEY attribute and it's an Int [generated-0010]

HTML

<bitty-7-0 data-connect="TestEvSenderMethodsEvSenderProptoint0010">
  <button data-alfa="2020"  data-send="runEvSenderMethodsEvSenderProptoint0010">Test Target</button>
  <div 
    data-receive="runEvSenderMethodsEvSenderProptoint0010"
    data-expects="received integer">
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestEvSenderMethodsEvSenderProptoint0010 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvSenderMethodsEvSenderProptoint0010(ev, el) {
    const value = ev.sender.propToInt("alfa");
    if (value === 2020) {
      el.innerHTML = "received integer";
    }
  }
}

waiting

Properties

ev.sender.bittyId [added: 7.0.0]

Description

Alias for ev.sender.dataset.bittyid.

Tests

bittyId exists [generated-0010]

HTML

<bitty-7-0 data-connect="TestEvSenderPropertiesEvSenderBittyid0010">
  <button data-send="runEvSenderPropertiesEvSenderBittyid0010">Test Button</button>
 <div data-receive="runEvSenderPropertiesEvSenderBittyid0010" data-expects="has id">
    waiting
  </div></bitty-7-0>

JavaScript

window.TestEvSenderPropertiesEvSenderBittyid0010 = class {
    bittyReady() {
    this.api.querySelector("button").click();
  }

  runEvSenderPropertiesEvSenderBittyid0010(ev, el) {
    if (ev.sender.bittyId !== undefined) {
      el.innerHTML = "has id";
    }
  }
}

waiting

ev.sender.value [added: 7.0.0]

Description

Alias for ev.sender.value.

Tests

[generated-0010]

HTML

<bitty-7-0 data-connect="TestEvSenderPropertiesEvSenderValue0010">
  <input 
    type="submit"
    data-send="runEvSenderPropertiesEvSenderValue0010"
    value="alfa"
  />
  <div data-receive="runEvSenderPropertiesEvSenderValue0010" data-expects="alfa">waiting</div></bitty-7-0>

JavaScript

window.TestEvSenderPropertiesEvSenderValue0010 = class {
    bittyReady() {
    this.api.querySelector("input").click();
  }

  runEvSenderPropertiesEvSenderValue0010(ev, el) {
    el.innerHTML = ev.sender.value;
  }
}

waiting

ev.sender.valueToFloat [added: 7.0.0]

Description

Alias for parseFloat(ev.sender.value).

Tests

[generated-0010]

HTML

<bitty-7-0 data-connect="TestEvSenderPropertiesEvSenderValuetofloat0010">
  <input 
    type="submit"
    data-send="runEvSenderPropertiesEvSenderValuetofloat0010"
    value="72.72"
  />
  <div data-receive="runEvSenderPropertiesEvSenderValuetofloat0010" data-expects="got float">waiting</div></bitty-7-0>

JavaScript

window.TestEvSenderPropertiesEvSenderValuetofloat0010 = class {
    bittyReady() {
    this.api.querySelector("input").click();
  }

  runEvSenderPropertiesEvSenderValuetofloat0010(ev, el) {
    if (ev.sender.valueToFloat === 72.72) {
      el.innerHTML = "got float";
    }
  }
}

waiting

ev.sender.valueToInt [added: 7.0.0]

Description

Alias for parseInt(ev.sender.value, 10).

Tests

[generated-0010]

HTML

<bitty-7-0 data-connect="TestEvSenderPropertiesEvSenderValuetoint0010">
  <input 
    type="submit"
    data-send="runEvSenderPropertiesEvSenderValuetoint0010"
    value="3131"
  />
  <div data-receive="runEvSenderPropertiesEvSenderValuetoint0010" data-expects="got int">waiting</div></bitty-7-0>

JavaScript

window.TestEvSenderPropertiesEvSenderValuetoint0010 = class {
    bittyReady() {
    this.api.querySelector("input").click();
  }

  runEvSenderPropertiesEvSenderValuetoint0010(ev, el) {
    if (ev.sender.valueToFloat === 3131) {
      el.innerHTML = "got int";
    }
  }
}

waiting

Element API Extensions

Methods

el.prop(KEY) [added: 7.0.0]

Arguments

KEY

Returns the value from a `data-*` where `*` is the `KEY` (e.g. `data-KEY="value"`)

Description

Looks for a data-KEY attribute from the ev.target element in its ev.target.datasetproperty that matches KEY and returns the value as a string.
If the ev.target element does not have a data-KEY the process looks for ancestors with a data-KEY attribute. The first one that's found gets used.
If neither the ev.target element or any of its ancestors have the data-KEYattribute the returned value is undefined.

Tests

If el has a data-KEY="VALUE" attribute, then the VALUE is returned as a string. [generated-0010]

HTML

<bitty-7-0 data-connect="TestElMethodsElProp0010">
  <div 
    data-elmethodselprop0010="value0010" 
    data-init="runElMethodsElProp0010"
    data-expects="value0010"
  >waiting</div>
</bitty-7-0>

JavaScript

window.TestElMethodsElProp0010 = class {
    runElMethodsElProp0010(_, el) {
    el.innerHTML = el.prop("elmethodselprop0010")
  }
}

waiting

el does not have a data-KEY="VALUE" attribute, but an ancestor of el does have a data-KEY="VALUE" attribute, then VALUE is returned as a string. [generated-0020]

HTML

<bitty-7-0 data-connect="TestElMethodsElProp0020">
  <div data-elmethodselprop0020="value0020">
    <div
      data-init="runElMethodsElProp0020"
      data-expects="value0020"
    >
      waiting
    </div>
  </div>

</bitty-7-0>

JavaScript

window.TestElMethodsElProp0020 = class {
    runElMethodsElProp0020(_, el) {
    el.innerHTML = el.prop("elmethodselprop0020")
  }
}

waiting

If neither el or an ancestor of el have a data-KEY="VALUE" attribute, then undefined is returned. [generated-0030]

HTML

<bitty-7-0 data-connect="TestElMethodsElProp0030">
  <div>
    <div
      data-init="runElMethodsElProp0030"
      data-expects="undefined"
    >
      waiting
    </div>
  </div>


</bitty-7-0>

JavaScript

window.TestElMethodsElProp0030 = class {
    runElMethodsElProp0030(_, el) {
    el.innerHTML = el.prop("elmethodselprop0030")
  }

}

waiting

el.propMatchesSender(KEY) [added: 7.0.0]

Arguments

KEY

Returns the value from a `data-*` where `*` is the `KEY` (e.g. `data-KEY="value"`)

Description

The el.propMatchesSender(KEY) method returns a boolean that is determined by comparing the data-KEY="VALUE" for the el and its ancestor tree with that of the data-KEY="VALUE" from ev.sender and its ancestor tree .

Tests

data-KEY: el does not have - el ancestor does not have - ev does not have - ev ancestor does not have - returns false [generated-00000]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender00000">
  <div > 
    <button  data-send="propMatchesSenderMethod00000" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div  data-expects="false" data-receive="propMatchesSenderMethod00000">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender00000 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod00000(_, el) {
    el.innerHTML = el.propMatchesTarget("test00000")
  }
}

waiting

data-KEY: el does not have - el ancestor does not have - ev does not have - ev ancestor has - returns false [generated-00010]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender00010">
  <div data-test00010="sender00010 DOES NOT MATCH" > 
    <button  data-send="propMatchesSenderMethod00010" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div  data-expects="false" data-receive="propMatchesSenderMethod00010">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender00010 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod00010(_, el) {
    el.innerHTML = el.propMatchesTarget("test00010")
  }
}

waiting

data-KEY: el does not have - el ancestor does not have - ev has - ev ancestor does not have - returns false [generated-00100]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender00100">
  <div > 
    <button data-test00100="sender00100 DOES NOT MATCH"  data-send="propMatchesSenderMethod00100" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div  data-expects="false" data-receive="propMatchesSenderMethod00100">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender00100 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod00100(_, el) {
    el.innerHTML = el.propMatchesTarget("test00100")
  }
}

waiting

data-KEY: el does not have - el ancestor does not have - ev has - ev ancestor has - returns false [generated-00110]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender00110">
  <div data-test00110="sender00110 DOES NOT MATCH" > 
    <button data-test00110="sender00110 DOES NOT MATCH"  data-send="propMatchesSenderMethod00110" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div  data-expects="false" data-receive="propMatchesSenderMethod00110">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender00110 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod00110(_, el) {
    el.innerHTML = el.propMatchesTarget("test00110")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev does not have - ev ancestor does not have - returns false [generated-01000]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender01000">
  <div > 
    <button  data-send="propMatchesSenderMethod01000" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01000="sender01000" >
    <div  data-expects="false" data-receive="propMatchesSenderMethod01000">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender01000 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod01000(_, el) {
    el.innerHTML = el.propMatchesTarget("test01000")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev does not have - ev ancestor has - values do not match - is false [generated-01010]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender01010">
  <div data-test01010="sender01010 DOES NOT MATCH" > 
    <button  data-send="propMatchesSenderMethod01010" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01010="sender01010" >
    <div  data-expects="false" data-receive="propMatchesSenderMethod01010">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender01010 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod01010(_, el) {
    el.innerHTML = el.propMatchesTarget("test01010")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev does not have - ev ancestor has - values match - is true [generated-01011]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender01011">
  <div data-test01011="sender01011" > 
    <button  data-send="propMatchesSenderMethod01011" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01011="sender01011" >
    <div  data-expects="true" data-receive="propMatchesSenderMethod01011">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender01011 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod01011(_, el) {
    el.innerHTML = el.propMatchesTarget("test01011")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev has - ev ancestor does not have - values do not match - is false [generated-01100]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender01100">
  <div > 
    <button data-test01100="sender01100 DOES NOT MATCH"  data-send="propMatchesSenderMethod01100" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01100="sender01100" >
    <div  data-expects="false" data-receive="propMatchesSenderMethod01100">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender01100 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod01100(_, el) {
    el.innerHTML = el.propMatchesTarget("test01100")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev has - ev ancestor does not have - values match - is true [generated-01101]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender01101">
  <div > 
    <button data-test01101="sender01101"  data-send="propMatchesSenderMethod01101" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01101="sender01101" >
    <div  data-expects="true" data-receive="propMatchesSenderMethod01101">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender01101 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod01101(_, el) {
    el.innerHTML = el.propMatchesTarget("test01101")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev has - ev ancestor has - values do not match - is false [generated-01110]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender01110">
  <div data-test01110="sender01110 DOES NOT MATCH" > 
    <button data-test01110="sender01110 DOES NOT MATCH"  data-send="propMatchesSenderMethod01110" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01110="sender01110" >
    <div  data-expects="false" data-receive="propMatchesSenderMethod01110">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender01110 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod01110(_, el) {
    el.innerHTML = el.propMatchesTarget("test01110")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev has - ev ancestor has - values match - is true [generated-01111]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender01111">
  <div data-test01111="sender01111" > 
    <button data-test01111="sender01111"  data-send="propMatchesSenderMethod01111" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01111="sender01111" >
    <div  data-expects="true" data-receive="propMatchesSenderMethod01111">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender01111 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod01111(_, el) {
    el.innerHTML = el.propMatchesTarget("test01111")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev does not have - ev ancestor does not have - returns false [generated-10000]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender10000">
  <div > 
    <button  data-send="propMatchesSenderMethod10000" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10000="sender10000"  data-expects="false" data-receive="propMatchesSenderMethod10000">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender10000 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod10000(_, el) {
    el.innerHTML = el.propMatchesTarget("test10000")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev does not have - ev ancestor has - values do not match - is false [generated-10010]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender10010">
  <div data-test10010="sender10010 DOES NOT MATCH" > 
    <button  data-send="propMatchesSenderMethod10010" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10010="sender10010"  data-expects="false" data-receive="propMatchesSenderMethod10010">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender10010 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod10010(_, el) {
    el.innerHTML = el.propMatchesTarget("test10010")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev does not have - ev ancestor has - values match - is true [generated-10011]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender10011">
  <div data-test10011="sender10011" > 
    <button  data-send="propMatchesSenderMethod10011" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10011="sender10011"  data-expects="true" data-receive="propMatchesSenderMethod10011">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender10011 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod10011(_, el) {
    el.innerHTML = el.propMatchesTarget("test10011")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev has - ev ancestor does not have - values do not match - is false [generated-10100]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender10100">
  <div > 
    <button data-test10100="sender10100 DOES NOT MATCH"  data-send="propMatchesSenderMethod10100" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10100="sender10100"  data-expects="false" data-receive="propMatchesSenderMethod10100">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender10100 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod10100(_, el) {
    el.innerHTML = el.propMatchesTarget("test10100")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev has - ev ancestor does not have - values match - is true [generated-10101]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender10101">
  <div > 
    <button data-test10101="sender10101"  data-send="propMatchesSenderMethod10101" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10101="sender10101"  data-expects="true" data-receive="propMatchesSenderMethod10101">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender10101 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod10101(_, el) {
    el.innerHTML = el.propMatchesTarget("test10101")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev has - ev ancestor has - values do not match - is false [generated-10110]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender10110">
  <div data-test10110="sender10110 DOES NOT MATCH" > 
    <button data-test10110="sender10110 DOES NOT MATCH"  data-send="propMatchesSenderMethod10110" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10110="sender10110"  data-expects="false" data-receive="propMatchesSenderMethod10110">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender10110 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod10110(_, el) {
    el.innerHTML = el.propMatchesTarget("test10110")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev has - ev ancestor has - values match - is true [generated-10111]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender10111">
  <div data-test10111="sender10111" > 
    <button data-test10111="sender10111"  data-send="propMatchesSenderMethod10111" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10111="sender10111"  data-expects="true" data-receive="propMatchesSenderMethod10111">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender10111 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod10111(_, el) {
    el.innerHTML = el.propMatchesTarget("test10111")
  }
}

waiting

data-KEY: el has - el ancestor has - ev does not have - ev ancestor does not have - returns false [generated-11000]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender11000">
  <div > 
    <button  data-send="propMatchesSenderMethod11000" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11000="sender11000" >
    <div data-test11000="sender11000"  data-expects="false" data-receive="propMatchesSenderMethod11000">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender11000 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod11000(_, el) {
    el.innerHTML = el.propMatchesTarget("test11000")
  }
}

waiting

data-KEY: el has - el ancestor has - ev does not have - ev ancestor has - values do not match - is false [generated-11010]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender11010">
  <div data-test11010="sender11010 DOES NOT MATCH" > 
    <button  data-send="propMatchesSenderMethod11010" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11010="sender11010" >
    <div data-test11010="sender11010"  data-expects="false" data-receive="propMatchesSenderMethod11010">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender11010 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod11010(_, el) {
    el.innerHTML = el.propMatchesTarget("test11010")
  }
}

waiting

data-KEY: el has - el ancestor has - ev does not have - ev ancestor has - values match - is true [generated-11011]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender11011">
  <div data-test11011="sender11011" > 
    <button  data-send="propMatchesSenderMethod11011" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11011="sender11011" >
    <div data-test11011="sender11011"  data-expects="true" data-receive="propMatchesSenderMethod11011">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender11011 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod11011(_, el) {
    el.innerHTML = el.propMatchesTarget("test11011")
  }
}

waiting

data-KEY: el has - el ancestor has - ev has - ev ancestor does not have - values do not match - is false [generated-11100]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender11100">
  <div > 
    <button data-test11100="sender11100 DOES NOT MATCH"  data-send="propMatchesSenderMethod11100" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11100="sender11100" >
    <div data-test11100="sender11100"  data-expects="false" data-receive="propMatchesSenderMethod11100">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender11100 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod11100(_, el) {
    el.innerHTML = el.propMatchesTarget("test11100")
  }
}

waiting

data-KEY: el has - el ancestor has - ev has - ev ancestor does not have - values match - is true [generated-11101]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender11101">
  <div > 
    <button data-test11101="sender11101"  data-send="propMatchesSenderMethod11101" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11101="sender11101" >
    <div data-test11101="sender11101"  data-expects="true" data-receive="propMatchesSenderMethod11101">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender11101 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod11101(_, el) {
    el.innerHTML = el.propMatchesTarget("test11101")
  }
}

waiting

data-KEY: el has - el ancestor has - ev has - ev ancestor has - values do not match - is false [generated-11110]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender11110">
  <div data-test11110="sender11110 DOES NOT MATCH" > 
    <button data-test11110="sender11110 DOES NOT MATCH"  data-send="propMatchesSenderMethod11110" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11110="sender11110" >
    <div data-test11110="sender11110"  data-expects="false" data-receive="propMatchesSenderMethod11110">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender11110 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod11110(_, el) {
    el.innerHTML = el.propMatchesTarget("test11110")
  }
}

waiting

data-KEY: el has - el ancestor has - ev has - ev ancestor has - values match - is true [generated-11111]

HTML

<bitty-7-0 data-connect="TestpropMatchesSender11111">
  <div data-test11111="sender11111" > 
    <button data-test11111="sender11111"  data-send="propMatchesSenderMethod11111" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11111="sender11111" >
    <div data-test11111="sender11111"  data-expects="true" data-receive="propMatchesSenderMethod11111">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesSender11111 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesSenderMethod11111(_, el) {
    el.innerHTML = el.propMatchesTarget("test11111")
  }
}

waiting

el.propMatchesTarget(KEY) [added: 7.0.0]

Arguments

KEY

The KEY portion of a data-KEY="VALUE" attribute.

Description

The el.propMatchesTarget(KEY)method returns a boolean that is determined by comparing the data-KEY="VALUE" for the el and its ancestor tree with that of the data-KEY="VALUE" from ev.target and its ancestor tree.

Tests

data-KEY: el does not have - el ancestor does not have - ev does not have - ev ancestor does not have - returns false [generated-00000]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget00000">
  <div > 
    <button  data-send="propMatchesTargetMethod00000" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div  data-expects="false" data-receive="propMatchesTargetMethod00000">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget00000 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod00000(_, el) {
    el.innerHTML = el.propMatchesTarget("test00000")
  }
}

waiting

data-KEY: el does not have - el ancestor does not have - ev does not have - ev ancestor has - returns false [generated-00010]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget00010">
  <div data-test00010="target00010 DOES NOT MATCH" > 
    <button  data-send="propMatchesTargetMethod00010" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div  data-expects="false" data-receive="propMatchesTargetMethod00010">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget00010 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod00010(_, el) {
    el.innerHTML = el.propMatchesTarget("test00010")
  }
}

waiting

data-KEY: el does not have - el ancestor does not have - ev has - ev ancestor does not have - returns false [generated-00100]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget00100">
  <div > 
    <button data-test00100="target00100 DOES NOT MATCH"  data-send="propMatchesTargetMethod00100" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div  data-expects="false" data-receive="propMatchesTargetMethod00100">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget00100 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod00100(_, el) {
    el.innerHTML = el.propMatchesTarget("test00100")
  }
}

waiting

data-KEY: el does not have - el ancestor does not have - ev has - ev ancestor has - returns false [generated-00110]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget00110">
  <div data-test00110="target00110 DOES NOT MATCH" > 
    <button data-test00110="target00110 DOES NOT MATCH"  data-send="propMatchesTargetMethod00110" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div  data-expects="false" data-receive="propMatchesTargetMethod00110">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget00110 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod00110(_, el) {
    el.innerHTML = el.propMatchesTarget("test00110")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev does not have - ev ancestor does not have - returns false [generated-01000]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget01000">
  <div > 
    <button  data-send="propMatchesTargetMethod01000" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01000="target01000" >
    <div  data-expects="false" data-receive="propMatchesTargetMethod01000">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget01000 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod01000(_, el) {
    el.innerHTML = el.propMatchesTarget("test01000")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev does not have - ev ancestor has - values do not match - is false [generated-01010]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget01010">
  <div data-test01010="target01010 DOES NOT MATCH" > 
    <button  data-send="propMatchesTargetMethod01010" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01010="target01010" >
    <div  data-expects="false" data-receive="propMatchesTargetMethod01010">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget01010 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod01010(_, el) {
    el.innerHTML = el.propMatchesTarget("test01010")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev does not have - ev ancestor has - values match - is true [generated-01011]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget01011">
  <div data-test01011="target01011" > 
    <button  data-send="propMatchesTargetMethod01011" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01011="target01011" >
    <div  data-expects="true" data-receive="propMatchesTargetMethod01011">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget01011 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod01011(_, el) {
    el.innerHTML = el.propMatchesTarget("test01011")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev has - ev ancestor does not have - values do not match - is false [generated-01100]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget01100">
  <div > 
    <button data-test01100="target01100 DOES NOT MATCH"  data-send="propMatchesTargetMethod01100" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01100="target01100" >
    <div  data-expects="false" data-receive="propMatchesTargetMethod01100">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget01100 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod01100(_, el) {
    el.innerHTML = el.propMatchesTarget("test01100")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev has - ev ancestor does not have - values match - is true [generated-01101]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget01101">
  <div > 
    <button data-test01101="target01101"  data-send="propMatchesTargetMethod01101" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01101="target01101" >
    <div  data-expects="true" data-receive="propMatchesTargetMethod01101">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget01101 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod01101(_, el) {
    el.innerHTML = el.propMatchesTarget("test01101")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev has - ev ancestor has - values do not match - is false [generated-01110]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget01110">
  <div data-test01110="target01110 DOES NOT MATCH" > 
    <button data-test01110="target01110 DOES NOT MATCH"  data-send="propMatchesTargetMethod01110" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01110="target01110" >
    <div  data-expects="false" data-receive="propMatchesTargetMethod01110">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget01110 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod01110(_, el) {
    el.innerHTML = el.propMatchesTarget("test01110")
  }
}

waiting

data-KEY: el does not have - el ancestor has - ev has - ev ancestor has - values match - is true [generated-01111]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget01111">
  <div data-test01111="target01111" > 
    <button data-test01111="target01111"  data-send="propMatchesTargetMethod01111" hidden>
      Test Button
    </button>
  </div> 
  <div data-test01111="target01111" >
    <div  data-expects="true" data-receive="propMatchesTargetMethod01111">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget01111 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod01111(_, el) {
    el.innerHTML = el.propMatchesTarget("test01111")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev does not have - ev ancestor does not have - returns false [generated-10000]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget10000">
  <div > 
    <button  data-send="propMatchesTargetMethod10000" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10000="target10000"  data-expects="false" data-receive="propMatchesTargetMethod10000">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget10000 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod10000(_, el) {
    el.innerHTML = el.propMatchesTarget("test10000")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev does not have - ev ancestor has - values do not match - is false [generated-10010]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget10010">
  <div data-test10010="target10010 DOES NOT MATCH" > 
    <button  data-send="propMatchesTargetMethod10010" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10010="target10010"  data-expects="false" data-receive="propMatchesTargetMethod10010">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget10010 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod10010(_, el) {
    el.innerHTML = el.propMatchesTarget("test10010")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev does not have - ev ancestor has - values match - is true [generated-10011]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget10011">
  <div data-test10011="target10011" > 
    <button  data-send="propMatchesTargetMethod10011" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10011="target10011"  data-expects="true" data-receive="propMatchesTargetMethod10011">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget10011 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod10011(_, el) {
    el.innerHTML = el.propMatchesTarget("test10011")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev has - ev ancestor does not have - values do not match - is false [generated-10100]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget10100">
  <div > 
    <button data-test10100="target10100 DOES NOT MATCH"  data-send="propMatchesTargetMethod10100" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10100="target10100"  data-expects="false" data-receive="propMatchesTargetMethod10100">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget10100 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod10100(_, el) {
    el.innerHTML = el.propMatchesTarget("test10100")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev has - ev ancestor does not have - values match - is true [generated-10101]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget10101">
  <div > 
    <button data-test10101="target10101"  data-send="propMatchesTargetMethod10101" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10101="target10101"  data-expects="true" data-receive="propMatchesTargetMethod10101">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget10101 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod10101(_, el) {
    el.innerHTML = el.propMatchesTarget("test10101")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev has - ev ancestor has - values do not match - is false [generated-10110]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget10110">
  <div data-test10110="target10110 DOES NOT MATCH" > 
    <button data-test10110="target10110 DOES NOT MATCH"  data-send="propMatchesTargetMethod10110" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10110="target10110"  data-expects="false" data-receive="propMatchesTargetMethod10110">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget10110 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod10110(_, el) {
    el.innerHTML = el.propMatchesTarget("test10110")
  }
}

waiting

data-KEY: el has - el ancestor does not have - ev has - ev ancestor has - values match - is true [generated-10111]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget10111">
  <div data-test10111="target10111" > 
    <button data-test10111="target10111"  data-send="propMatchesTargetMethod10111" hidden>
      Test Button
    </button>
  </div> 
  <div >
    <div data-test10111="target10111"  data-expects="true" data-receive="propMatchesTargetMethod10111">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget10111 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod10111(_, el) {
    el.innerHTML = el.propMatchesTarget("test10111")
  }
}

waiting

data-KEY: el has - el ancestor has - ev does not have - ev ancestor does not have - returns false [generated-11000]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget11000">
  <div > 
    <button  data-send="propMatchesTargetMethod11000" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11000="target11000" >
    <div data-test11000="target11000"  data-expects="false" data-receive="propMatchesTargetMethod11000">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget11000 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod11000(_, el) {
    el.innerHTML = el.propMatchesTarget("test11000")
  }
}

waiting

data-KEY: el has - el ancestor has - ev does not have - ev ancestor has - values do not match - is false [generated-11010]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget11010">
  <div data-test11010="target11010 DOES NOT MATCH" > 
    <button  data-send="propMatchesTargetMethod11010" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11010="target11010" >
    <div data-test11010="target11010"  data-expects="false" data-receive="propMatchesTargetMethod11010">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget11010 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod11010(_, el) {
    el.innerHTML = el.propMatchesTarget("test11010")
  }
}

waiting

data-KEY: el has - el ancestor has - ev does not have - ev ancestor has - values match - is true [generated-11011]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget11011">
  <div data-test11011="target11011" > 
    <button  data-send="propMatchesTargetMethod11011" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11011="target11011" >
    <div data-test11011="target11011"  data-expects="true" data-receive="propMatchesTargetMethod11011">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget11011 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod11011(_, el) {
    el.innerHTML = el.propMatchesTarget("test11011")
  }
}

waiting

data-KEY: el has - el ancestor has - ev has - ev ancestor does not have - values do not match - is false [generated-11100]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget11100">
  <div > 
    <button data-test11100="target11100 DOES NOT MATCH"  data-send="propMatchesTargetMethod11100" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11100="target11100" >
    <div data-test11100="target11100"  data-expects="false" data-receive="propMatchesTargetMethod11100">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget11100 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod11100(_, el) {
    el.innerHTML = el.propMatchesTarget("test11100")
  }
}

waiting

data-KEY: el has - el ancestor has - ev has - ev ancestor does not have - values match - is true [generated-11101]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget11101">
  <div > 
    <button data-test11101="target11101"  data-send="propMatchesTargetMethod11101" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11101="target11101" >
    <div data-test11101="target11101"  data-expects="true" data-receive="propMatchesTargetMethod11101">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget11101 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod11101(_, el) {
    el.innerHTML = el.propMatchesTarget("test11101")
  }
}

waiting

data-KEY: el has - el ancestor has - ev has - ev ancestor has - values do not match - is false [generated-11110]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget11110">
  <div data-test11110="target11110 DOES NOT MATCH" > 
    <button data-test11110="target11110 DOES NOT MATCH"  data-send="propMatchesTargetMethod11110" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11110="target11110" >
    <div data-test11110="target11110"  data-expects="false" data-receive="propMatchesTargetMethod11110">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget11110 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod11110(_, el) {
    el.innerHTML = el.propMatchesTarget("test11110")
  }
}

waiting

data-KEY: el has - el ancestor has - ev has - ev ancestor has - values match - is true [generated-11111]

HTML

<bitty-7-0 data-connect="TestpropMatchesTarget11111">
  <div data-test11111="target11111" > 
    <button data-test11111="target11111"  data-send="propMatchesTargetMethod11111" hidden>
      Test Button
    </button>
  </div> 
  <div data-test11111="target11111" >
    <div data-test11111="target11111"  data-expects="true" data-receive="propMatchesTargetMethod11111">
      waiting
    </div>
  </div>
</bitty-7-0>

JavaScript

window.TestpropMatchesTarget11111 = class {
  bittyReady() {
    this.api.querySelector("button").click();
  }
  propMatchesTargetMethod11111(_, el) {
    el.innerHTML = el.propMatchesTarget("test11111")
  }
}

waiting

el.propToFloat(KEY) [added: 7.0.0]

Arguments

KEY

Returns the value from a `data-*` where `*` is the `KEY` (e.g. `data-KEY="value"`)

Description

Looks for a data-KEY attribute from the ev.target element in its ev.target.datasetproperty that matches KEY and returns the value as a string.
If the ev.target element does not have a data-KEY the process looks for ancestors with a data-KEY attribute. The first one that's found gets used.
If neither the ev.target element or any of its ancestors have the data-KEYattribute the returned value is undefined.

Tests

return the value of a data-KEY attribute from the el as a float [generated-0010]

HTML

<bitty-7-0 data-connect="TestElMethodsElProptofloat0010">
  <div 
    data-init="runElMethodsElProptofloat0010"
    data-expects="received float"
    data-item="10.01"
  >
    waiting 
  </div>
</bitty-7-0>

JavaScript

window.TestElMethodsElProptofloat0010 = class {
    runElMethodsElProptofloat0010(_, el) { 
    const got = el.propToFloat("item");
    if (got === 10.01) {
      el.innerHTML = "received float";
    }
  }
}

waiting

return a float if el does not have data-KEY attribute, but an ancestor doES have a data-KEY attribute [generated-0020]

HTML

<bitty-7-0 data-connect="TestElMethodsElProptofloat0020">
  <section data-bravo="20.02">
    <div class="extra-wrapper">
      <div 
        data-init="runElMethodsElProptofloat0020" 
        data-expects="received float"
      >
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestElMethodsElProptofloat0020 = class {
    runElMethodsElProptofloat0020(_, el) {
    const value = el.propToFloat("bravo");
    if (value === 20.02) {
      el.innerHTML = "received float";
    }
  }
}

waiting

return floatfrom elif el has a data-KEY attribute and an ancestor of el has a data-KEY attribute [generated-0030]

HTML

<bitty-7-0 data-connect="TestElMethodsElProptofloat0030">
  <section data-charlie="99.99">
    <div class="extra-wrapper">
      <div 
        data-charlie="30.03" 
        data-init="runElMethodsElProptofloat0030" 
        data-expects="received float"
      >
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestElMethodsElProptofloat0030 = class {
    runElMethodsElProptofloat0030(_, el) {
    const value = el.propToFloat("charlie");
    if (value === 30.03) {
      el.innerHTML = "received float";
    }
  }
}

waiting

return undefined if el does not have a data-KEY attribute and ancestors do not have data-KEY attributes [generated-0040]

HTML

<bitty-7-0 data-connect="TestElMethodsElProptofloat0040">
  <section>
    <div class="extra-wrapper">
      <div data-init="runElMethodsElProptofloat0040" data-expects="undefined">
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestElMethodsElProptofloat0040 = class {
    runElMethodsElProptofloat0040(_, el) {
    el.innerHTML = el.propToFloat("");
  }
}

waiting

return NaN if el has a data-KEY attribute but it is not a number [generated-0050]

HTML

<bitty-7-0 data-connect="TestElMethodsElProptofloat0050">
  <section>
    <div class="extra-wrapper">
      <div 
        data-echo="not a number"
        data-init="runElMethodsElProptofloat0050" 
        data-expects="NaN"
      >
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestElMethodsElProptofloat0050 = class {
    runElMethodsElProptofloat0050(_, el) {
    el.innerHTML = el.propToFloat("echo")
  }
}

waiting

return NaN if el does not have a data-KEY but an ancestor does have a data-KEY attribute but it is not a number [generated-0060]

HTML

<bitty-7-0 data-connect="TestElMethodsElProptofloat0060">
  <section data-foxtrot="not a number">
    <div class="extra-wrapper">
      <div
        data-init="runElMethodsElProptofloat0060" 
        data-expects="NaN" 
      >
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestElMethodsElProptofloat0060 = class {
    runElMethodsElProptofloat0060(_, el) {
    el.innerHTML = el.propToFloat("foxtrot")
  }
}

waiting

el.propToInt(KEY) [added: 7.0.0]

Arguments

KEY

The KEY portion of data-KEY attribute of the el.

Description

Looks for a data-KEY attribute in the el.dataset and returns the value as a integer (Int) by running it through parseInt(VALUE, 10).
If the el.dataset does not contain a data-KEY attribute the method walks up the doM looking for an ancestors that does. The nearest one returned as an integer (Int) if any are found.
If a data-KEYis found but it's not a number, then undefinedis returned.
If neither the el or any of its ancestors have a data-KEY attribute, then undefined is returned.

Tests

return Int if el has a data-KEY attribute and it's an Int [generated-0010]

HTML

<bitty-7-0 data-connect="TestElMethodsElProptoint0010">

  <div 
    data-init="runElMethodsElProptoint0010" 
    data-alfa="2000" 
    data-expects="received integer">
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElMethodsElProptoint0010 = class {
    runElMethodsElProptoint0010(_, el) {
    const value = el.propToInt("alfa");
    if (value === 2000) {
      el.innerHTML = "received integer";
    }
  }
}

waiting

return Int if el does not have a data-KEY attribute, but an ancestor doES have a data-KEY attribute [generated-0020]

HTML

<bitty-7-0 data-connect="TestElMethodsElProptoint0020">

  <section data-bravo="7000">
    <div class="extra-wrapper">
      <div data-init="runElMethodsElProptoint0020" data-expects="received integer">
        waiting
      </div>
    </div>
  </section>

</bitty-7-0>

JavaScript

window.TestElMethodsElProptoint0020 = class {
  
  runElMethodsElProptoint0020(_, el) {
    const value = el.propToInt("bravo");
    if (value === 7000) {
      el.innerHTML = "received integer";
    }
  }

}

waiting

return Int from elif el has a data-KEY attribute and an ancestor of el has a data-KEY attribute [generated-0030]

HTML

<bitty-7-0 data-connect="TestElMethodsElProptoint0030">

  <section data-charlie="4000">
    <div class="extra-wrapper">
      <div data-charlie="3000" data-init="runElMethodsElProptoint0030" data-expects="received integer">
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestElMethodsElProptoint0030 = class {
  
  runElMethodsElProptoint0030(_, el) {
    const value = el.propToInt("charlie");
    if (value === 3000) {
      el.innerHTML = "received integer";
    }
  }
}

waiting

return undefined if el does not have a data-KEY attribute and ancestors do not have data-KEY attributes [generated-0040]

HTML

<bitty-7-0 data-connect="TestElMethodsElProptoint0040">

  <section>
    <div class="extra-wrapper">
      <div data-init="runElMethodsElProptoint0040" data-expects="undefined">
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestElMethodsElProptoint0040 = class {
  
  runElMethodsElProptoint0040(_, el) {
    el.innerHTML = el.propToInt("delta");
  }
}

waiting

return NaN if el has a data-KEY attribute but it is not a number [generated-0050]

HTML

<bitty-7-0 data-connect="TestElMethodsElProptoint0050">

  <section>
    <div class="extra-wrapper">
      <div 
        data-delta="not a number"
        data-init="runElMethodsElProptoint0050" 
        data-expects="NaN"
      >
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestElMethodsElProptoint0050 = class {
  
  runElMethodsElProptoint0050(_, el) {
    el.innerHTML = el.propToInt("delta")
  }
}

waiting

return NaN if el does not have a data-KEY but an ancestor does have a data-KEY attribute but it is not a number [generated-0060]

HTML

<bitty-7-0 data-connect="TestElMethodsElProptoint0060">

  <section data-foxtrot="not a float">
    <div class="extra-wrapper">
      <div data-expects="NaN" data-init="runElMethodsElProptoint0060">
        waiting
      </div>
    </div>
  </section>
</bitty-7-0>

JavaScript

window.TestElMethodsElProptoint0060 = class {
  
  runElMethodsElProptoint0060(_, el) {
    el.innerHTML = el.propToInt("foxtrot")
  }
}

waiting

Properties

el.bittyId [added: 7.0.0]

Description

Every element inside a <bitty-7-0> tag gets a bittyid property assigned to it's dataset with a UUID value (i.e. el.dataset.bittyid).
el.bittyId is an alias to that value.

Tests

bittyId exists [generated-0010]

HTML

<bitty-7-0 data-connect="TestElPropertiesElBittyid0010">
 <div data-init="runTestelpropertieselbittyIdgenerated0010" data-expects="has id">
    waiting
  </div></bitty-7-0>

JavaScript

window.TestElPropertiesElBittyid0010 = class {
    runTestelpropertieselbittyIdgenerated0010(_, el) {
    if (el.bittyId !== undefined) {
      el.innerHTML = "has id";
    }
  }
}

waiting

el.bittyParent [added: 7.0.0]

Description

A reference to the <bitty-7-0> that contains the .

Tests

reference bitty parent when it exists above child [generated-0010]

HTML

<bitty-7-0 data-connect="TestElPropertiesElBittyparent0010">

  <div data-init="runTestelpropertieselbittyParentgenerated0010" data-expects="found parent">
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElPropertiesElBittyparent0010 = class {
    // put a test value that can be check for
  bittyInit() {
    this.api.dataset.checker = "ping";
  }

  runTestelpropertieselbittyParentgenerated0010(_, el) {
    if (el.bittyParent.dataset.checker === "ping") {
      el.innerHTML = "found parent";
    }
  }
}

waiting

bitty element references parent bitty element instead of itself [generated-0020]

HTML

<bitty-7-0 data-connect="TestElPropertiesElBittyparent0020">
<!--
TOdo: Set up template to handle this.
<bitty-7-0 data-connect="BittyparentElWrapper">
  <bitty-7-0 
    data-connect="BittyparentEl"
    data-init="runTestelpropertieselbittyParentgenerated0020"
    data-expects="true"
  >
  </bitty-7-0>
</bitty-7-0>
--></bitty-7-0>

JavaScript

window.TestElPropertiesElBittyparent0020 = class {
    runTestelpropertieselbittyParentgenerated0020(_, el) {
    if (el.bittyParent.dataset.bittyid) {
      el.innerHTML = el.bittyParent.dataset.bittyid !== el.bittyId;
    }
  }

/* 
TOdo: Handle this
window.BittyparentElWrapper = class {
  // wrapper class to check for test
}
*/
}

null if bitty element has no other bitty elements above it [generated-0030]

HTML

<bitty-7-0 data-connect="TestElPropertiesElBittyparent0030">
<!--
TOdo: set up template to handle this
<bitty-7-0 
  data-connect="BittyparentEl"
  data-init="runTestelpropertieselbittyParentgenerated0030"
  data-expects="null"
></bitty-7-0>
--></bitty-7-0>

JavaScript

window.TestElPropertiesElBittyparent0030 = class {
    runTestelpropertieselbittyParentgenerated0030(_, el) {
    if (el.bittyParent === null) {
      el.innerHTML = "null";
    }
    else {
      el.innerHTML = el.bittyParent;
    }
  }
}

el.isSender [added: 7.0.0]

Description

Boolean that returns true if the ev.sender element that sent the signal is also the receiving element.

Tests

el is sender [generated-0010]

HTML

<bitty-7-0 data-connect="TestElPropertiesElIssender0010">
  <div 
    data-send="runTestelpropertieselisSendergenerated0010" 
    data-receive="runTestelpropertieselisSendergenerated0010" 
    data-expects="true">
    waiting
  </div></bitty-7-0>

JavaScript

window.TestElPropertiesElIssender0010 = class {
    bittyReady() {
    this.api.querySelector("div").click();
  }

  runTestelpropertieselisSendergenerated0010(_, el) {
    el.innerHTML = el.isSender;
  }
}

waiting

el is not sender [generated-0020]

HTML

<bitty-7-0 data-connect="TestElPropertiesElIssender0020">
  <div data-send="runTestelpropertieselisSendergenerated0020"> 
    <div 
      class="clickme"
      data-receive="runTestelpropertieselisSendergenerated0020"
      data-expects="false">
      waiting
    </div>
  </div></bitty-7-0>

JavaScript

window.TestElPropertiesElIssender0020 = class {
    bittyReady() {
    this.api.querySelector(".clickme").click();
  }

  runTestelpropertieselisSendergenerated0020(_, el) {
    el.innerHTML = el.isSender;
  }
}

waiting

data-use returns true [generated-0030]

HTML

<bitty-7-0 data-connect="TestElPropertiesElIssender0030">
  <div data-use="runTestelpropertieselisSendergenerated0030" data-expects="true">
    waiting
  </div></bitty-7-0>

JavaScript

window.TestElPropertiesElIssender0030 = class {
    bittyReady() {
    this.api.querySelector("div").click();
  }

  runTestelpropertieselisSendergenerated0030(_, el) {
    el.innerHTML = el.isSender;
  }
}

waiting

data-init returns true [generated-0040]

HTML

<bitty-7-0 data-connect="TestElPropertiesElIssender0040">
  <div data-init="runTestelpropertieselisSendergenerated0040" data-expects="true">
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElPropertiesElIssender0040 = class {
    runTestelpropertieselisSendergenerated0040(_, el) {
      el.innerHTML = el.isSender;
  }
}

waiting

el.isTarget [added: 7.0.0]

Description

Boolean that returns true if the ev.target element that initiated the signal is also the receiving element.

Tests

el is target returns true [generated-0010]

HTML

<bitty-7-0 data-connect="TestElPropertiesElIstarget0010">
  <div 
    data-send="runElPropertiesElIstarget0010" 
    data-receive="runElPropertiesElIstarget0010"
    data-expects="true">
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElPropertiesElIstarget0010 = class {
  bittyReady() {
    this.api.querySelector("div").click();
  }

  runElPropertiesElIstarget0010(_, el) {
    el.innerHTML = el.isTarget;
  }}

waiting

el is not target returns false [generated-0020]

HTML

<bitty-7-0 data-connect="TestElPropertiesElIstarget0020">
<div class="clickme" data-send="runTestelpropertieselisTargetgenerated0020"></div>

  <div data-receive="runTestelpropertieselisTargetgenerated0020" data-expects="false">
    waiting
  </div></bitty-7-0>

JavaScript

window.TestElPropertiesElIstarget0020 = class {
  bittyReady() {
    this.api.querySelector(".clickme").click();
  }

  runTestelpropertieselisTargetgenerated0020(_, el) {
    el.innerHTML = el.isTarget;
  }}

waiting

data-use returns true [generated-0030]

HTML

<bitty-7-0 data-connect="TestElPropertiesElIstarget0030">
<div data-use="runTestelpropertieselisTargetgenerated0030" data-expects="true">
    waiting
  </div></bitty-7-0>

JavaScript

window.TestElPropertiesElIstarget0030 = class {
    bittyReady() {
    this.api.querySelector("div").click();
  }

  runTestelpropertieselisTargetgenerated0030(_, el) {
    el.innerHTML = el.isTarget;
  }
}

waiting

data-init returns true [generated-0040]

HTML

<bitty-7-0 data-connect="TestElPropertiesElIstarget0040">
  <div data-init="runTestelpropertieselisTargetgenerated0040" data-expects="true">
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElPropertiesElIstarget0040 = class {
    runTestelpropertieselisTargetgenerated0040(_, el) {
      el.innerHTML = el.isTarget;
  }
}

waiting

el.value [added: 7.0.0]

Description

The standard el.valuefrom an HTML Element.

Tests

value exists [generated-0010]

HTML

<bitty-7-0 data-connect="TestElPropertiesElValue0010">
  <input 
    type="hidden" 
    data-init="runElPropertiesElValue0010" 
    value="value0010"
  />
  <div 
    data-receive="runElPropertiesElValue0010Output" 
    data-expects="value0010"
  >
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElPropertiesElValue0010 = class {
    #incomingValue = null;

  runElPropertiesElValue0010(_, el) {
    this.#incomingValue = el.value;
    this.api.localTrigger("runElPropertiesElValue0010Output");
  }

  runElPropertiesElValue0010Output(_, el) {
    el.innerHTML = this.#incomingValue;
  }
}

waiting

value does not exist [generated-0020]

HTML

<bitty-7-0 data-connect="TestElPropertiesElValue0020">
  <div data-init="runTestelpropertieselvaluegenerated0020"></div>
  <div 
    data-receive="runTestelpropertieselvaluegenerated0020Output" 
    data-expects="undefined"
  >
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElPropertiesElValue0020 = class {
    #incomingValue = null;

  runTestelpropertieselvaluegenerated0020(_, el) {
    this.#incomingValue = el.value;
    this.api.localTrigger("runTestelpropertieselvaluegenerated0020Output");
  }

  runTestelpropertieselvaluegenerated0020Output(_, el) {
    el.innerHTML = this.#incomingValue;
  }
}

waiting

el.valueToFloat [added: 7.0.0]

Description

Alias for parseFloat(el.value).

Tests

If el has a value and it's a floatthen return it [generated-0010]

HTML

<bitty-7-0 data-connect="TestElPropertiesElValuetofloat0010">
  <input 
    type="hidden" 
    data-init="runTestelpropertieselvalueToFloatgenerated0010" 
    value="10.01"
  />
  <div 
  data-receive="runTestelpropertieselvalueToFloatgenerated0010Output"
  data-expects="received float"
>
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElPropertiesElValuetofloat0010 = class {
  #incomingValue = null;

  runTestelpropertieselvalueToFloatgenerated0010(_, el) {
    this.#incomingValue = el.valueToFloat;
    this.api.localTrigger("runTestelpropertieselvalueToFloatgenerated0010Output");
  }

  runTestelpropertieselvalueToFloatgenerated0010Output(_, el) {
    if (this.#incomingValue === 10.01) {
      el.innerHTML = "received float";
    }
  }}

waiting

If el has a value but it's not a float then return NaN [generated-0020]

HTML

<bitty-7-0 data-connect="TestElPropertiesElValuetofloat0020">
  <input 
    type="hidden" 
    data-init="runTestelpropertieselvalueToFloatgenerated0020" 
    value="not a float"
  />
  <div 
  data-receive="runTestelpropertieselvalueToFloatgenerated0020Output"
  data-expects="NaN"
>
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElPropertiesElValuetofloat0020 = class {
    #incomingValue = null;

  runTestelpropertieselvalueToFloatgenerated0020(_, el) {
    this.#incomingValue = el.valueToFloat;
    this.api.localTrigger("runTestelpropertieselvalueToFloatgenerated0020Output");
  }

  runTestelpropertieselvalueToFloatgenerated0020Output(_, el) {
    el.innerHTML = this.#incomingValue;
  }
}

waiting

If el does not have a value then return undefined [generated-0030]

HTML

<bitty-7-0 data-connect="TestElPropertiesElValuetofloat0030">
  <div data-init="runTestelpropertieselvalueToFloatgenerated0030"></div>
  <div 
  data-receive="runTestelpropertieselvalueToFloatgenerated0030Output"
  data-expects="undefined"
>
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElPropertiesElValuetofloat0030 = class {
    #incomingValue = null;

  runTestelpropertieselvalueToFloatgenerated0030(_, el) {
    this.#incomingValue = el.valueToFloat;
    this.api.localTrigger("runTestelpropertieselvalueToFloatgenerated0030Output");
  }

  runTestelpropertieselvalueToFloatgenerated0030Output(_, el) {
    el.innerHTML = this.#incomingValue;
  }}

waiting

If el has a value but it's empty the return undefined [generated-0040]

HTML

<bitty-7-0 data-connect="TestElPropertiesElValuetofloat0040">
  <input 
    type="hidden" 
    data-init="runTestelpropertieselvalueToFloatgenerated0040" 
    value=""
  />
  <div 
  data-receive="runTestelpropertieselvalueToFloatgenerated0040Output"
  data-expects="undefined"
>
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElPropertiesElValuetofloat0040 = class {
    #incomingValue = null;

  runTestelpropertieselvalueToFloatgenerated0040(_, el) {
    this.#incomingValue = el.valueToFloat;
    this.api.localTrigger("runTestelpropertieselvalueToFloatgenerated0040Output");
  }

  runTestelpropertieselvalueToFloatgenerated0040Output(_, el) {
    el.innerHTML = this.#incomingValue;
  }}

waiting

el.valueToInt [added: 7.0.0]

Description

An alias for parseInt(el.value, 10).

Tests

If el has a value and it is an int then return it [generated-0010]

HTML

<bitty-7-0 data-connect="TestElPropertiesElValuetoint0010">
  <input 
    type="hidden" 
    data-init="runTestelpropertieselvalueToIntgenerated0010" 
    value="3000"
  />
  <div 
    data-receive="runTestelpropertieselvalueToIntgenerated0010Output" 
    data-expects="3000"
  >
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElPropertiesElValuetoint0010 = class {
    #incomingValue = null;

  runTestelpropertieselvalueToIntgenerated0010(_, el) {
    this.#incomingValue = el.valueToInt;
    this.api.localTrigger("runTestelpropertieselvalueToIntgenerated0010Output");
  }

  runTestelpropertieselvalueToIntgenerated0010Output(_, el) {
    el.innerHTML = this.#incomingValue;
  }
}

waiting

If el has a value but it's not an int then return NaN [generated-0020]

HTML

<bitty-7-0 data-connect="TestElPropertiesElValuetoint0020">
  <input 
    type="hidden" 
    data-init="runTestelpropertieselvalueToIntgenerated0020" 
    value="not an integer"
  />
  <div 
    data-receive="runTestelpropertieselvalueToIntgenerated0020Output" 
    data-expects="NaN"
  >
    waiting
  </div></bitty-7-0>

JavaScript

window.TestElPropertiesElValuetoint0020 = class {
    #incomingValue = null;

  runTestelpropertieselvalueToIntgenerated0020(_, el) {
    this.#incomingValue = el.valueToInt;
    this.api.localTrigger("runTestelpropertieselvalueToIntgenerated0020Output");
  }

  runTestelpropertieselvalueToIntgenerated0020Output(_, el) {
    el.innerHTML = this.#incomingValue;
  }

}

waiting

If el does not have a value then return undefined [generated-0030]

HTML

<bitty-7-0 data-connect="TestElPropertiesElValuetoint0030">
  <div data-init="runTestelpropertieselvalueToIntgenerated0030"></div>
  <div 
    data-receive="runTestelpropertieselvalueToIntgenerated0030Output" 
    data-expects="undefined"
  >
    waiting
  </div>
</bitty-7-0>

JavaScript

window.TestElPropertiesElValuetoint0030 = class {
    #incomingValue = null;

  runTestelpropertieselvalueToIntgenerated0030(_, el) {
    this.#incomingValue = el.valueToInt;
    this.api.localTrigger("runTestelpropertieselvalueToIntgenerated0030Output");
  }

  runTestelpropertieselvalueToIntgenerated0030Output(_, el) {
    el.innerHTML = this.#incomingValue;
  }
}

waiting

If el has a value but it is empty, then return undefined [generated-0040]

HTML

<bitty-7-0 data-connect="TestElPropertiesElValuetoint0040">
  <input 
    type="hidden" 
    data-init="runElPropertiesElValuetoint0040" 
    value=""
  />
  <div 
    data-receive="runElPropertiesElValuetoint0040Output" 
    data-expects="undefined"
  >
    waiting
  </div></bitty-7-0>

JavaScript

window.TestElPropertiesElValuetoint0040 = class {
    #incomingValue = null;

  runElPropertiesElValuetoint0040(_, el) {
    this.#incomingValue = el.valueToInt;
    this.api.localTrigger("runElPropertiesElValuetoint0040Output");
  }

  runElPropertiesElValuetoint0040Output(_, el) {
    el.innerHTML = this.#incomingValue;
  }

}

waiting