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. ==