Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
circletype
Advanced tools
Readme
A JavaScript library that lets you curve type on the web.
Demo: https://circletype.labwire.ca
In a browser:
<script src="circletype.min.js"></script>
Using npm:
$ npm i circletype --save
Load ES module:
import CircleType from `circletype`;
A CircleType instance creates a circular text element.
Kind: global class
CircleType
number
CircleType
number
CircleType
boolean
CircleType
boolean
CircleType
CircleType
Param | Type | Description |
---|---|---|
elem | HTMLElement | A target HTML element. |
[splitter] | function | An optional function used to split the element's text content into individual characters |
Example
// Instantiate `CircleType` with an HTML element.
const circleType = new CircleType(document.getElementById('myElement'));
// Set the text radius and direction. Note: setter methods are chainable.
circleType.radius(200).dir(-1);
// Provide your own splitter function to handle emojis
// @see https://github.com/orling/grapheme-splitter
const splitter = new GraphemeSplitter()
new CircleType(
document.getElementById('myElement'),
splitter.splitGraphemes.bind(splitter)
);
CircleType
Sets the desired text radius. The minimum radius is the radius required
for the text to form a complete circle. If value
is less than the minimum
radius, the minimum radius is used.
Kind: instance method of CircleType
Returns: CircleType
- The current instance.
Param | Type | Description |
---|---|---|
value | number | A new text radius in pixels. |
Example
const circleType = new CircleType(document.getElementById('myElement'));
// Set the radius to 150 pixels.
circleType.radius(150);
number
Gets the text radius in pixels. The default radius is the radius required for the text to form a complete circle.
Kind: instance method of CircleType
Returns: number
- The current text radius.
Example
const circleType = new CircleType(document.getElementById('myElement'));
circleType.radius();
//=> 150
CircleType
Sets the text direction. 1
is clockwise, -1
is counter-clockwise.
Kind: instance method of CircleType
Returns: CircleType
- The current instance.
Param | Type | Description |
---|---|---|
value | number | A new text direction. |
Example
const circleType = new CircleType(document.getElementById('myElement'));
// Set the direction to counter-clockwise.
circleType.dir(-1);
// Set the direction to clockwise.
circleType.dir(1);
number
Gets the text direction. 1
is clockwise, -1
is counter-clockwise.
Kind: instance method of CircleType
Returns: number
- The current text radius.
Example
const circleType = new CircleType(document.getElementById('myElement'));
circleType.dir();
//=> 1 (clockwise)
CircleType
Sets the forceWidth
option. If true
the width of the arc is calculated
and applied to the element as an inline style.
Kind: instance method of CircleType
Returns: CircleType
- The current instance.
Param | Type | Description |
---|---|---|
value | boolean | true if the width should be set |
Example
const circleType = new CircleType(document.getElementById('myElement'));
circleType.radius(384);
console.log(circleType.container);
//=> <div style="position: relative; height: 3.18275em;">...</div>
// Enable the force width option
circleType.forceWidth(true);
console.log(circleType.container);
//=> <div style="position: relative; height: 3.18275em; width: 12.7473em;">...</div>
boolean
Gets the forceWidth
option. If true
the width of the arc is calculated
and applied to the element as an inline style. Defaults to false
.
Kind: instance method of CircleType
Returns: boolean
- The current forceWidth
value
Example
const circleType = new CircleType(document.getElementById('myElement'));
circleType.forceWidth();
//=> false
CircleType
Sets the forceHeight
option. If true
the height of the arc is calculated
and applied to the element as an inline style.
Kind: instance method of CircleType
Returns: CircleType
- The current instance.
Param | Type | Description |
---|---|---|
value | boolean | true if the height should be set |
Example
const circleType = new CircleType(document.getElementById('myElement'));
circleType.radius(384);
console.log(circleType.container);
//=> <div style="position: relative; height: 3.18275em;">...</div>
// Disable the force height option
circleType.forceHeight(false);
console.log(circleType.container);
//=> <div style="position: relative;">...</div>
boolean
Gets the forceHeight
option. If true
the height of the arc is calculated
and applied to the element as an inline style. Defaults to true
.
Kind: instance method of CircleType
Returns: boolean
- The current forceHeight
value
Example
const circleType = new CircleType(document.getElementById('myElement'));
circleType.forceHeight();
//=> true
CircleType
Schedules a task to recalculate the height of the element. This should be called if the font size is ever changed.
Kind: instance method of CircleType
Returns: CircleType
- The current instance.
Example
const circleType = new CircleType(document.getElementById('myElement'));
circleType.refresh();
CircleType
Removes the CircleType effect from the element, restoring it to its original state.
Kind: instance method of CircleType
Returns: CircleType
- This instance.
Example
const circleType = new CircleType(document.getElementById('myElement'));
// Restore `myElement` to its original state.
circleType.destroy();
Command | Description |
---|---|
npm run dev | Start dev server |
npm start | Build for release |
npm test | Run unit and screenshot tests |
npm run docs | Generate documentation |
npm run reference | Generate reference screenshots |
FAQs
A JavaScript library that lets you curve type on the web.
The npm package circletype receives a total of 1,493 weekly downloads. As such, circletype popularity was classified as popular.
We found that circletype demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.