❤
npm
Sign UpSign In

safari-beauty-toolbar

1.0.3 • Public • Published

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.

Public methods

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

Blinking

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

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

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);

Reinit

Can be used to reinitialize the Module with new options

reinit({color}) 
param type default description
color string - Toolbar color. Required

Stop blinking

Used to stop blinking effect

stopBlinking() 

Stop animation

Used to stop the animation

stopAnimation() 

Stop all effects

Combines stopBlinking, stopAnimation and stopProgress

stopAllEffects() 

Destroy

Totally removes all Module's stuff.

destroy() 

Readme

Keywords

Package Sidebar

Install

npm i safari-beauty-toolbar

Repository

github.com/neSpecc/safari-beauty-toolbar

Homepage

ifmo.su/beauty-toolbar

Weekly Downloads

25

Version

1.0.3

License

MIT

Unpacked Size

11 MB

Total Files

21

Last publish

Collaborators

  • codex-team
Try on RunKit
Report malware