Overview

This element is a button that raises the ‘click’ event repeatedly from the time it is pressed until it is released.

To initialize a Repeat Button, the user has to include the following files to the head of the page:

  • smart.base.css – the CSS file containing the styles for element
  • smart.element.js – the base class
  • smart.button.js – the JS file containing the element definition

The following code adds a repeat button to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> </head> <body> <smart-repeat-button>Repeat Button</smart-repeat-button> </body> </html>

Demo

Repeat Button
Event log:

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.

Appearance

If the user wants to change the content of the repeat button, this can be accomplished by setting the innerHTML property of the element, like so:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script> window.onload = function () { document.querySelector('smart-repeat-button').innerHTML = 'Repeat Button 1'; } </script> </head> <body> <smart-repeat-button>Repeat Button</smart-repeat-button> </body> </html>

Demo

Repeat Button
Event log:

Behavior

delay is a property that specifies the interval between two Click events. The value is in milliseconds.

initialDelay is a property that specifies the delay after which is fired the very first Click event. The value is in milliseconds.

Here’s how to set delay and initialDelay on element’s initialiation:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> </head> <body> <smart-repeat-button delay="100" initial-delay="200">Repeat Button</smart-repeat-button> </body> </html>

Demo

And here’s how to change these properties via javascript after the element has been initialized:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script> window.onload = function () { let repeatButton = document.querySelector('smart-repeat-button'); repeatButton.delay = 100; repeatButton.initialDelay = 200; } </script> </head> <body> <smart-repeat-button>Repeat Button</smart-repeat-button> </body> </html>

Demo

Keyboard Support

Smart.RepeatButton can be selected using Space and Enter. After select with Space it fires single event. After select with Enter could be fired multiple events, during the time when the key is pressed. The element is focusable and can be focused using the Tab button.