Global

Global Actions

scrollTo

It has the following parameters:

position: Scroll to the specified position of the current element.
- top: (default) Scroll to the top of the current element.
- center: Scroll to the center of the current element.
- bottom: Scroll to the bottom of the current element.
target-id: Specifies the target element to scroll to below.
duration: A milliseconds that specify animation time.

In the following example, click the button to scroll to the top of the body.

<body id="body">
  <!-- ... -->

  <button type="button" @tap="body.scrollTo(position='center');">Scroll To Top</button>
  <!-- ... -->
</body>

<a @tap="product-desc-item.scrollTo(position=top,duration=200,target-id='shoplaza-section-header');">
  <!-- ... -->
</a>

toggleClass

Toggle the given class. it has two parameters:

class: A string of the class name. It is required.
force: A Boolean attribute. If it is true, the element adds the given class name. If it is false, the element removes the given class name. If it is not specified and the element has the given class name it will remove this class name, and vice versa.

In the following example, the div element will add a color-orange class when the user clicks the button.

<div class="" id="text">Something...</div>

<button type="button" @tap="text.toggleClass(class='color-orange', force=true);">Scroll To Top</button>

In the following example, the div element will remove a color-orange class when the user clicks the button.

<div class="color-orange" id="text">Something...</div>

<button type="button" @tap="text.toggleClass(class='color-orange');">Scroll To Top</button>

focus

Sets focus on the specified element.

In the following example, the input element will be set focus when the user clicks the button.

<input type="text" id="message">

<button type="button" @tap="message.focus;">Focus</button>

SPZ Actions

copy

Copy the given text to the clipboard. It has a parameter:

text: The text to be copied to the clipboard. It is required.

<button type="button" @tap="SPZ.copy(text='CODE8888')">Copy code</button>

scrollTo

Scroll to the given of the id of the element. It has a parameter:

id: The id of the element.

navigateTo

Navigate to the given URL. It has a parameter:

url: Specifies a URL that needs to be redirected. It is required.

<button type="button" @tap="SPZ.navigateTo(url='/about')">Go to About page</button>

replaceUrlState

Given a parameter name and value to replace the current URL.

For example, in this URL http://127.0.0.1:8080?name=Jay, the URL is http://127.0.0.1:8080?name=SPZ when the user clicks the button.

<button type="button" @tap="SPZ.replaceUrlState(name='SPZ')">Change name to 'SPZ'</button>

Global Events

tap

Be automatically triggered when the user clicks or taps.

submit

Be automatically triggered when a <form> is submitted.

change

Be automatically triggered for <input>, <select>, and <textarea> elements when the user modifies the element’s value.

input-debounced

The input event fires when the value of an <input>, <select>, or <textarea> element has been changed.

The input-debounced indicates that execution until after wait 300 milliseconds have elapsed since the last time it was invoked.

<input id="email" type="text" @input-debounced="email.toggleClass(class='inputing', force=true);">

input-throttled

The input-debounced indicates that when invoked repeatedly, will only actually call the original function at most once per every wait 100 milliseconds.

invalid

Be automatically triggered when a submittable element has been checked for validity and doesn’t satisfy its constraints.

Global API

whenApiDefined

Get all API of the element. It returns a Promise. It has a parameter:

element: To get API with the given element. It is required.

const element = document.getElementById('spzElementId');

SPZ.whenApiDefined(element).then(api => {
  // ...
});

Global Events to Listen in Javascript

spz:dom-update

Fired when the element updates. It only supports spz-filter and spz-list.

window.addEventListener('spz:dom-update', e => {
  // doing something
  console.log('e: ', e);
});