JavaScript automated mouse cursor for web presentation
Program | Function | Optional | Download |
---|---|---|---|
Mousetrap | Enable Hotkeys | β | πΎ |
Migrate to your desired download location, and download this repository to your system using git clone:
git clone https://github.com/Justin-Byrne/MouseMove.git
Copy the folder and contents of
<mouse-move-path>/script/libs
to<your-project-path>/script/libs
π Link mousetrap-<version>.js
library to your project
<meta ... >
<link ... >
<script src="script/libs/mousetrap-<version>.js"></script>
</head>
Copy script
<mouse-move-path>/script/mousemove-<version>.js
to<your-project-path>/script/mousemove-<version>.js
π Link mousemove-<version>.js
library to your project, to load after mousetrap library; see above !
<meta ... >
<link ... >
<script src="script/libs/mousetrap-<version>.js"></script>
<script src="script/mousemove-<version>.js"></script>
</head>
Implicit control only requires you indicate which DOM element(s) you wish MouseMove to transition to.
Each element can be expressed by either an element identifier
, CSS Selector
, or XPath
:
let _list =
[
'node', // Elemental Identifier
'body > ul > li:nth-child(1)', // CSS Selector
'//input[@id = "fakebox-input"]' // XPath
]
Note: attribute declarations for id
id
:<string>
β³οΈrequired
<string>
- Element.
Identifier
CSS Selector
XPath
After creating an <array>
of DOM identifiers, you can push it into initMouseMove ( )
to implement your list.
let _list =
[
'ui-node-1',
'ui-node-2',
'ui-node-3',
// etc ...
]
initMouseMove ( _list ); // Instantiate the MouseMove class
mouseMove.go ( ); // Initiates animation(s); hotkey [ β + G ] also initiates animations
Note: MouseMove defaults to transitioning to each identifier supplied, then initiating a default click
event.
Explicit control allows users to indicate a set of actions; for each DOM element supplied.
The id
attribute behaves the same as the implicit list ( above ), however, subsequent action
and bind
attributes allow users to layer more actions and mouse events.
The action
attribute sets a ( final ) action for each DOM element; expressed within an id
attribute.
Each one of these <object>
events follows this primitive structure:
let _object =
{
id: 'ui-node', // <string>
action: 'click' // <string> ( ) => actions: [ 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'mousemove', 'click', 'dblclick' ]
}
Note: attribute declarations for id
and action
id
:<string>
β³οΈrequired
<string>
- Element.
Identifier
CSS Selector
XPath
action
:<string>
β΄οΈoptional
<string>
mousedown
mouseup
mouseover
mouseout
mousemove
click
dblclick
This example will transition to each id
, while initiating a single action
; once that transition is complete.
let _pattern =
[
{ id: 'node-0', action: 'click' }, // Initiates a single 'onclick' event
{ id: 'node-1', action: 'mouseover' }, // Initiates a single 'onmouseover' event
{ id: 'node-2', action: 'mouseout' } // Initiates a single 'onmouseout' event
]
initMouseMove ( _pattern ); // Instantiate the MouseMove class
mouseMove.go ( ); // Initiates animation(s); hotkey [ β + G ] also initiates animations
The bind
attribute allows users to bind user-defined anonymous functions to each element expressed within an id
attribute.
You can expand upon the previous <object>
event structure, like so:
let _object =
{
id: 'ui-node', // [REQUIRED] ... type: <string>
bind: // [OPTIONAL] ... type: Object.<string, function>
{
onmouseover: ( ) =>
{
this.style.color = 'rgb(0, 1, 1)';
this.style.backgroundColor = 'rgb(2, 3, 5)';
this.parentElement.nextElementSibling.style.display = 'block';
},
onmouseout: ( ) =>
{
// code ...
}
},
action: 'click' // [OPTIONAL] ... type: <string>
}
Note: attribute declarations for id
, bind
and action
id
:<string>
β³οΈrequired
<string>
- Element.
Identifier
CSS Selector
XPath
bind
:Object.<string, function>
β΄οΈoptional
<string>
onmousedown
onmouseup
onmouseover
onmouseout
onmousemove
onclick
ondblclick
<function>
- User-defined anonymous function
action
:<string>
β΄οΈoptional
<string>
mousedown
mouseup
mouseover
mouseout
mousemove
click
dblclick
This example will transition to each id
, initiating code enclosed within each bind
attribute ( if present ), then finalizing with the action
attribute ( if present ).
let _pattern =
[ // Each pattern is valid !
{ id: 'node-0', action: 'click' },
{ id: 'node-1', bind: ( ) => { /* code ... */ }, },
{ id: 'node-2', bind: ( ) => { /* code ... */ }, action: 'click' }
]
initMouseMove ( _pattern ); // Instantiate the MouseMove class
mouseMove.go ( ); // Initiates animation(s); hotkey [ β + G ] also initiates animations
Note: for more information see the
Pattern
class
Please open an issue for support.
.
βββ build
β βββ audio
β β βββ complete.mp3
β β βββ failure.mp3
β β βββ success.mp3
β βββ compile.sh
β βββ watch.sh
βββ docs
β βββ API.md
β βββ CHANGELOG.md
β βββ FUNDING.yml
βββ script
β βββ libs
β β βββ mousetrap-v1.6.5.js
β βββ source
β β βββ classes
β β βββ Object
β β β βββ Cursor.js
β β β βββ Text.js
β β βββ Subject
β β β βββ List.js
β β β βββ Pattern.js
β β β βββ Point.js
β β βββ MouseMove.js
β βββ mousemove-v0.1.11.js
βββ LICENSE
βββ README.md
== Byrne-Systems Β© 2023 - All rights reserved. ==