Safari-beauty-toolbar NPM

Safari Beauty Toolbar

Tiny JavaScript module that makes the Safari Toolbar colorful. It uses native toolbar's transparency so there are two restrictions:

Works only at the Safari on MacOS or iOS
Displays after some scroll offset

Installation

Install module via Yarn, then import to the Code.

yarn add safari-beauty-toolbar

or with NPM

npm i safari-beauty-toolbar --save

You can also download dist/sct.min.js and manually connect it with your project.

import SBToolbar from 'safari-beauty-toolbar';

Usage

Basic usage is quite simple: just pass your brand color to the constructor.

const toolbarColor = new SBToolbar({
  color: "red"
});

param	type	default	description
`color`	string	-	Toolbar color. Required

This makes the Toolbar colorful. Try to reload the page and scroll it down.

Note. Because of transparency value of the Toolbar, you probably should pass little more saturated color than the usual brand's color.
Note. Place the initialization code at the bottom of <body>-tag or call after document-ready event.

npm.io

Public methods

There are some additional methods that your can find useful in some cases.

Blinking

npm.io

blink({interval, transitionSpeed})

Parameters passed as the destructuring assignment.

param	type	default	description
`interval`	number	400	time between transparent and opaque color in ms
`transitionSpeed`	number	500	speed of transparency changing in ms

Usage example

toolbarColor.blink({
  interval: 300,
  transitionSpeed: 1000
});

Animation

npm.io

animate({colors, speed})

Parameters passed as the destructuring assignment.

param	type	default	description
`colors`	string[]	-	list of colors to change. Required.
`speed`	number	800	speed of color transition in ms

Usage example

toolbarColor.animate({
  colors: ["#ff0a8a", "blue", "#61ffa7", "yellow"],
  speed: 600
});

Progress

npm.io

Method allowed to use Toolbar's underlayer as a progressbar.

Before some process starts, call

startProgress({color, estimate})

and after finish, call

stopProgress()

The first method begins to increase with of the underlayer up to 90% and stop there for waiting stopProgress. For better experience your can pass average time of the process via estimate option.

param	type	default	description
`color`	string	#05c7ff	loader color
`estimate`	number	3500	average time of the process

Usage example

/**
 * Call before the process (for example, AJAX request)
 */
toolbarPane.startProgress({
  color: "#05c7ff",
  estimate: 3500
});

/**
 * Call after the process will be finished
 * We use the timeout for the demonstration
 */
setTimeout(function(){
  toolbarPane.stopProgress();
}, 4850);