RepeatButton - Documentation | www.HtmlElements.com

Overview

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

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.button.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js - the base class.
    • smart.button.js - The repeat button file

Usage

  • Import a module

    With this approach, we import a module and create the web component by using the Smart function. The #button is a smart-repeat-button tag.

    import {smartRepeatButton} from "../../source/modules/smart.button.js";
    
    Smart('#button', class {
    get properties() {
    	return {
               name: 'Button'
    		}
    }
    });
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() { 
    
    }
    
    Using the Smart function is optional. You can use const button = document.querySelector("#button"); and set the properties like that:
    const button = document.querySelector("#button");
    
    button.name = 'Button';
    

  • Import a module, Init on Demand

    The following imports the web component's module and creates it on demand, when the document is ready. The #button is a DIV tag.

    import {smartRepeatButton} from "../../source/modules/smart.button.js";
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() { 
    const button = new smartRepeatButton('#button', {
       	name: 'Button'
    });
    }
    
  • Load scripts

    The following code adds the custom element to the page.

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
     <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>Button 1</smart-repeat-button>
     <smart-repeat-button>Button 2</smart-repeat-button>
    </body>
    </html>

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

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const button = document.createElement('smart-repeat-button');

Append it to the DOM:
document.body.appendChild(button);

Remove it from the DOM:
button.parentNode.removeChild(button);

Set a property:
button.propertyName = propertyValue;

Get a property value:
const propertyValue = button.propertyName;

Invoke a method:
button.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

button.addEventListener(eventName, eventHandler);

Remove Event Listener:
button.removeEventListener(eventName, eventHandler, true);

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.default.css" type="text/css" />
 <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.default.css" type="text/css" />
 <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.default.css" type="text/css" />
 <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.