jonahvsweb / touchpoint-js Goto Github PK

A vanilla JavaScript library that visually shows taps/clicks for HTML prototypes using CSS3 transitions on desktop and mobile.

Home Page: http://jonahvsweb.github.io/touchpoint-js/

License: MIT License

HTML 22.52% JavaScript 77.48%

touchpoint-js's Introduction

TouchPoint.js

A tiny (3.86 kb minified) vanilla JavaScript library made for in-browser HTML prototyping (as part of the UX process) that visually shows where the user clicks/taps on-screen using CSS3 transforms and transitions. TouchPoint is highly customizable, mobile ready and great for screencasting, screen recording, user testing and presentations. Library now built for ES6 and ES5.

Live Demo: View

Installation

ES5

Download and include touchpoint.js or touchpoint.min.js in the <head> or at the end of the <body> (recommended) in your HTML document. There are no dependencies:

<script src="touchpoint-es5.min.js"></script>

ES6

Same instructions as above, but you will need a polyfill to run in-browser. I use babel-polyfill which can be installed on your machine by using NPM from your command line.

<script src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
<script src="touchpoint.min.js"></script>

Quick Start/How to Use

After you load the script you simply initialize TouchPoint and add an event listener to whichever DOM element you want TouchPoint to show over:

<script>
	TouchPoint.init();
</script>

That's it!

Start clicking away on the page to see it in action.

Options

TouchPoint is customizable. There are a number of options that you have access to to customize the look for your needs. It's important that these options be defined before you initialize TouchPoint with TouchPoint.init(). Otherwise, your updates won't show.

Color

Change the default color of TouchPoint. Any valid CSS color can be used.

Default value: '#FFF'

TouchPoint.color = 'red';

DOM

Change the default DOM element that TouchPoint will be active over. Any valid selector can be used: element name, CSS class or ID. If you want TouchPoint to only show on a specific element, make sure that that element is set to overflow: visible, otherwise TouchPoint will get clipped.

Default value: window

TouchPoint.dom = elementVarId;

or (recommended)

TouchPoint.init(elementVarId);

Opacity

Change the opacity of the TouchPoint. You can use any value between 0 and 1.

Default value: 0.8

TouchPoint.opacity = 0.5;

Scale

Change the final scale of the TouchPoint. This value can range from 0 and beyond.

Default value: 8

TouchPoint.scale = 14;

Size

Change the initial size of the TouchPoint. This value is px.

Default value: 20

TouchPoint.size = 5;

Performance

Performance should not be an issue because each individual TouchPoint element is dynamically created and then automatically removed from the DOM after being used.

The animation is handled via the requestAnimationFrame function that is available in all current browsers. This has better overall performance than using setTimeout, which doesn't redraw consistently.

Release Notes

TouchPoint.js 1.0.1
– Updated to ES6 and reintroduced quick-clicking.

TouchPoint.js 1.0
– Initial Release

This is in active development.

Roadmap

Reintroduce quick clicking.
Add keyboard shortcut to enable/disable script.

Feedback

If you discover any issues please first check open/past issues or open a new issue if one does not already exist.

If you have any questions regarding usage, please send a message me here on GitHub, @jonahvsweb on Twitter or from my website, jonahvsweb.com.

touchpoint-js's People

Contributors

Stargazers

Watchers

Forkers

gdseller chinovian chrismoulton cgvarela keyzf artosyadl loki315zx chinatjnet nullnotfound defconcepts ashwin107 chrisemoulton icebob fwc1994 leotaillard alfredgreene robertomalatesta devsubhani markruan

touchpoint-js's Issues

Better API (IMO)

I won't use this, but would like to give feedback:

How about an init function where you do:

Init Function

TouchPoint.init({
  target: window,
  color: '#FFF',
  element: 'div',
  scale: 8,
  size: 20,
  z: 9999
});

Setting properties

The following will allow changing the properties dynamically.

TouchPoint.setTarget(window);
TouchPoint.setColor('red');
TouchPoint.setElement('span');
TouchPoint.setScale(4);
TouchPoint.setSize(5);
TouchPoint.setZ(500);

I'd return this in the API so you can allow method chaining:

TouchPoint.setTarget(window)
    .setElement('span')
    .setColor('red')
    .setScale(4)
    .setSize(5)
    .setZ(500)

Unless returning something else is better, if so have the following method as well:

Just make sure each property is optional

TouchPoint.set({
 color: 'red'
});

And make the properties read only:

TouchPoint.color; // 'red'
TouchPoint.color = 'hi'; // throws error

Make setting it throw an Error so devs can stick to one style, and allows for method chaining.

That's all. Good Luck if you like the idea

No longer working on touchscreen devices.

Tried on iPad Air 4 and Samsung Galaxy S9 and doesn't seem to be working anymore on touchscreen devices. It is working as expected on non-touchscreen computer devices (tested on MacBook Pro).

Issues on iOS

Brought to my attention that there's an issue with this script in both Safari & Chrome on iOS. Investigating.

Refactor library to a proper ES6 class

Multiple taps feedback

Hi there, nice little library :)
Based on the demo, I have to wait for animation to end to be able to see feedback for subsequent taps, correct? What about enabling feedbacks for quick sequential taps? Or for that matter, multi-touch feedbacks? That would be a nice improvement ;)

Script not working on codepen.io on iOS

Need to investigate why the script is not functioning anymore when included in a pen on codepen.io (iOS/Safari). Reference: http://codepen.io/jonahvsweb/pen/bdQmpd.

Can you start/stop?

Cool stuff!
Can you start/stop it programmatically? Can be very useful i.e. if I have a web app and wish to video some action of the real app, maybe by discretely tap somewhere to start, then record, then stop so app can continue w/o the effect. I can leave the script reference in the app in production too then.
Thanks

Update documentation

A good amount of changes/updates to the library need to be reflected in the documentation.

Introduction
- Update into mentioning ES6 compliance.
Installation
- Mention ES6 usage instructions.
Quickstart
- Remove window from init parameter.
Options
- Deprecate el and zIndex properties.
Release Notes
- New revision 1.0.1: ES6 and quick clicking reintroduced.
Roadmap
- Completed Reintroduce quick clicking.
Release
- New release 1.0.1

No demo on website

http://jonahvsweb.github.io/touchpoint-js/ is missing the demo.
Github readme has a link to http://jonahvsweb.com/in-the-lab/lib/touchpoint-js/demo.html, this should be added to the website as well.

jonahvsweb / touchpoint-js Goto Github PK

touchpoint-js's Introduction

TouchPoint.js

Installation

ES5

ES6

Quick Start/How to Use

Options

Color

DOM

Opacity

Scale

Size

Performance

Release Notes

Roadmap

Feedback

touchpoint-js's People

Contributors

Stargazers

Watchers

Forkers

touchpoint-js's Issues

Init Function

Setting properties

Introduction

Installation

Quickstart

Options

Release Notes

Roadmap

Release

Recommend Projects

Recommend Topics

Recommend Org