Manhattan interactions

A set of functions to implement common UI interactions.

Installation

npm install manhattan-interactions --save-dev

Usage

<div id="content-to-copy">
    I want to copy this content into the clipboard.
</div>
 
<a href="#copy" data-mh-copy-to-clipboard="#content-to-copy">Click to copy</a>
 
 
<form id="proxied-form">
    <label>Field <input type="text" name="field"></label>
    <button type="submit">Button</button>
</form>
 
<a href="#submit" data-mh-sumbit-by-proxy="#proxied-form">Click to submit</a>

import * as $ from 'manhattan-essentials'
import * as interactions from 'manhattan-interactions'
 
for (const copyElement of $.many('[data-mh-copy-to-clipboard]')) {
    $.listen(copyElement, {'click': interactions.copyToClipboard.onCopy()})
}
 
for (const submitElement of $.many('[data-mh-submit-by-proxy]')) {
    $.listen(submitElement, {'click': interactions.submitByProxy.onSubmit()})
}