circletype
Advanced tools
Comparing version 2.0.4 to 2.0.5
/*! | ||
* circletype 2.0.3 | ||
* circletype 2.0.5 | ||
* A JavaScript library that lets you curve type on the web. | ||
@@ -8,2 +8,2 @@ * Copyright © 2014-2017 Peter Hrynkow | ||
*/ | ||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.CircleType=e():t.CircleType=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var r=i[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,i){"use strict";var n=i(1),r=function(t){return t&&t.__esModule?t:{default:t}}(n);t.exports=r.default},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function r(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var s=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),u=i(2),a=n(u),l=i(3),f=n(l),h=Math.PI,c=Math.floor,d=Math.abs,p=Math.max,_=function(t){var e=t.getBoundingClientRect(),i=e.top,n=e.left,r=e.width,o=e.height;return{top:i+window.pageYOffset,left:n+window.pageXOffset,width:r,height:o}},m=function(t){var e=c(t.length/2),i=_(t[e]),n=_(t[0]);return n.height+d(n.top-i.top)},v=function(){function t(e){o(this,t),this._dir=1,this.element=e,this.originalHTML=this.element.innerHTML;var i=this.element.innerText,n=document.createElement("div");n.setAttribute("aria-label",i),n.style.position="relative",this.container=n,this._letters=(0,f.default)(i),this._letters.forEach(function(t){return n.appendChild(t)}),this.element.innerHTML="",this.element.appendChild(n);var r=window.getComputedStyle(this.element),s=r.fontSize,u=r.lineHeight;this._fontSize=parseInt(s,10),this._lineHeight=parseInt(u,10)||this._fontSize,this._metrics=this._letters.map(_);var a=this._metrics.reduce(function(t,e){return t+e.width},0);this._minRadius=a/h/2+this._lineHeight,this._invalidate()}return s(t,[{key:"radius",value:function(t){return void 0!==t?(this._radius=p(this._minRadius,t),this._invalidate(),this):this._radius}},{key:"dir",value:function(t){return void 0!==t?(this._dir=t,this._invalidate(),this):this._dir}},{key:"refresh",value:function(){return this._invalidate()}},{key:"destroy",value:function(){return this.element.innerHTML=this.originalHTML,this}},{key:"_invalidate",value:function(){var t=this;return requestAnimationFrame(function(){t._layout()}),this}},{key:"_layout",value:function(){var t=this,e=this._radius?this._radius:this._minRadius,i=-1===this._dir?-e+this._lineHeight:e,n="center "+i/this._fontSize+"em",o=e-this._lineHeight,s=this._metrics.reduce(function(t,e){var i=e.width,n=(0,a.default)(i/o);return{sum:t.sum+n,rotations:[].concat(r(t.rotations),[t.sum+n/2])}},{sum:0,rotations:[]}),u=s.rotations,l=s.sum;return this._letters.forEach(function(e,i){var r=e.style,o=(-.5*l+u[i])*t._dir,s=-.5*t._metrics[i].width/t._fontSize,a="translateX("+s+"em) rotate("+o+"deg)";r.position="absolute",r.bottom=-1===t._dir?0:"auto",r.left="50%",r.transform=a,r.transformOrigin=n,r.webkitTransform=a,r.webkitTransformOrigin=n}),this.container.style.height=m(this._letters)+"px",this}}]),t}();e.default=v},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return t*(180/Math.PI)}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return t.trim().split("").map(function(t){var e=document.createElement("span");return e.innerHTML=" "===t?" ":t,e})}}])}); | ||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.CircleType=e():t.CircleType=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var r=i[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=1)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=t.getBoundingClientRect(),i=e.top,n=e.left,r=e.width,o=e.height;return{top:i+window.pageYOffset,left:n+window.pageXOffset,width:r,height:o}}},function(t,e,i){"use strict";var n=i(2),r=function(t){return t&&t.__esModule?t:{default:t}}(n);t.exports=r.default},function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function r(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var u=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),s=i(3),a=n(s),l=i(0),f=n(l),c=i(4),d=n(c),h=i(5),_=n(h),p=Math.PI,m=Math.max,v=function(){function t(e){o(this,t),this._dir=1,this.element=e,this.originalHTML=this.element.innerHTML;var i=document.createElement("div");i.setAttribute("aria-label",e.innerText),i.style.position="relative",this.container=i,this._letters=(0,d.default)(e),this._letters.forEach(function(t){return i.appendChild(t)}),this.element.innerHTML="",this.element.appendChild(i);var n=window.getComputedStyle(this.element),r=n.fontSize,u=n.lineHeight;this._fontSize=parseInt(r,10),this._lineHeight=parseInt(u,10)||this._fontSize,this._metrics=this._letters.map(f.default);var s=this._metrics.reduce(function(t,e){return t+e.width},0);this._minRadius=s/p/2+this._lineHeight,this._invalidate()}return u(t,[{key:"radius",value:function(t){return void 0!==t?(this._radius=m(this._minRadius,t),this._invalidate(),this):this._radius}},{key:"dir",value:function(t){return void 0!==t?(this._dir=t,this._invalidate(),this):this._dir}},{key:"refresh",value:function(){return this._invalidate()}},{key:"destroy",value:function(){return this.element.innerHTML=this.originalHTML,this}},{key:"_invalidate",value:function(){var t=this;return requestAnimationFrame(function(){t._layout()}),this}},{key:"_layout",value:function(){var t=this,e=this._radius?this._radius:this._minRadius,i=-1===this._dir?-e+this._lineHeight:e,n="center "+i/this._fontSize+"em",o=e-this._lineHeight,u=this._metrics.reduce(function(t,e){var i=e.width,n=(0,a.default)(i/o);return{sum:t.sum+n,rotations:[].concat(r(t.rotations),[t.sum+n/2])}},{sum:0,rotations:[]}),s=u.rotations,l=u.sum;return this._letters.forEach(function(e,i){var r=e.style,o=(-.5*l+s[i])*t._dir,u=-.5*t._metrics[i].width/t._fontSize,a="translateX("+u+"em) rotate("+o+"deg)";r.position="absolute",r.bottom=-1===t._dir?0:"auto",r.left="50%",r.transform=a,r.transformOrigin=n,r.webkitTransform=a,r.webkitTransformOrigin=n}),this.container.style.height=(0,_.default)(this._letters)+"px",this}}]),t}();e.default=v},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return t*(180/Math.PI)}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"span",i=document.createElement(e);return t.innerText.trim().split("").map(function(t){var e=i.cloneNode();return e.insertAdjacentHTML("afterbegin"," "===t?" ":t),e})}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(0),r=function(t){return t&&t.__esModule?t:{default:t}}(n);e.default=function(t){var e=(0,r.default)(t[Math.floor(t.length/2)]),i=(0,r.default)(t[0]);return i.height+Math.abs(i.top-e.top)}}])}); |
{ | ||
"name": "circletype", | ||
"version": "2.0.4", | ||
"version": "2.0.5", | ||
"description": "A JavaScript library that lets you curve type on the web.", | ||
@@ -11,3 +11,4 @@ "main": "dist/circletype.min.js", | ||
"scripts": { | ||
"test": "jest --notify" | ||
"test": "jest --notify", | ||
"docs": "jsdoc2md --template README.hbs --files src/class.js > README.md" | ||
}, | ||
@@ -26,3 +27,2 @@ "keywords": [ | ||
"devDependencies": { | ||
"babel": "6.23.0", | ||
"babel-core": "6.26.0", | ||
@@ -36,7 +36,8 @@ "babel-loader": "7.1.2", | ||
"eslint-plugin-import": "2.7.0", | ||
"eslint-plugin-jsx-a11y": "5.1.0", | ||
"eslint-plugin-jsx-a11y": "5.1.1", | ||
"eslint-plugin-react": "7.3.0", | ||
"jest": "20.0.4", | ||
"jsdoc-to-markdown": "3.0.0", | ||
"webpack": "3.5.5" | ||
} | ||
} |
137
README.md
@@ -7,3 +7,3 @@ # CircleType | ||
Demos: http://circletype.labwire.ca | ||
Demos: <http://circletype.labwire.ca> | ||
@@ -13,10 +13,139 @@ ## Installation | ||
**npm** | ||
npm i circletype --save | ||
**bower** | ||
bower i circletype.js --save | ||
# API | ||
<a name="CircleType"></a> | ||
## CircleType | ||
A CircleType instance creates a circular text element. | ||
**Kind**: global class | ||
* [CircleType](#CircleType) | ||
* [new CircleType(elem)](#new_CircleType_new) | ||
* [.radius(value)](#CircleType+radius) ⇒ <code>Number</code> | ||
* [.radius()](#CircleType+radius) ⇒ <code>Number</code> | ||
* [.dir(value)](#CircleType+dir) ⇒ [<code>CircleType</code>](#CircleType) | ||
* [.dir()](#CircleType+dir) ⇒ <code>Number</code> | ||
* [.refresh()](#CircleType+refresh) ⇒ [<code>CircleType</code>](#CircleType) | ||
* [.destroy()](#CircleType+destroy) ⇒ [<code>CircleType</code>](#CircleType) | ||
<a name="new_CircleType_new"></a> | ||
### new CircleType(elem) | ||
| Param | Type | Description | | ||
| --- | --- | --- | | ||
| elem | <code>HTMLElement</code> | A target HTML element. | | ||
**Example** | ||
```js | ||
const circleType = new CircleType(document.getElementById('elementId')); | ||
// Instance methods are chainable. | ||
circleType.radius(200).dir(-1); | ||
``` | ||
npm i circletype --save | ||
<a name="CircleType+radius"></a> | ||
### circleType.radius(value) ⇒ <code>Number</code> | ||
Sets the text radius. | ||
**Kind**: instance method of [<code>CircleType</code>](#CircleType) | ||
**Returns**: <code>Number</code> - The current instance. | ||
| Param | Type | Description | | ||
| --- | --- | --- | | ||
| value | <code>Number</code> | A new text radius in pixels. | | ||
**Example** | ||
```js | ||
const circleType = new CircleType(myElement); | ||
// Set the radius to 150 pixels. | ||
circleType.radius(150); | ||
``` | ||
<a name="CircleType+radius"></a> | ||
**bower** | ||
### circleType.radius() ⇒ <code>Number</code> | ||
Gets the current text radius in pixels. | ||
**Kind**: instance method of [<code>CircleType</code>](#CircleType) | ||
**Returns**: <code>Number</code> - The current text radius. | ||
**Example** | ||
```js | ||
const circleType = new CircleType(myElement); | ||
circleType.radius(); | ||
// > 150 | ||
``` | ||
bower i circletype.js --save | ||
<a name="CircleType+dir"></a> | ||
### circleType.dir(value) ⇒ [<code>CircleType</code>](#CircleType) | ||
Sets the text direction. `1` is clockwise, `-1` is counter-clockwise. | ||
**Kind**: instance method of [<code>CircleType</code>](#CircleType) | ||
**Returns**: [<code>CircleType</code>](#CircleType) - The current instance. | ||
| Param | Type | Description | | ||
| --- | --- | --- | | ||
| value | <code>Number</code> | A new text direction. | | ||
**Example** | ||
```js | ||
const circleType = new CircleType(myElement); | ||
// Set the direction to counter-clockwise. | ||
circleType.dir(-1); | ||
// Set the direction to clockwise. | ||
circleType.dir(1); | ||
``` | ||
<a name="CircleType+dir"></a> | ||
### circleType.dir() ⇒ <code>Number</code> | ||
Gets the current text direction. `1` is clockwise, `-1` is counter-clockwise. | ||
**Kind**: instance method of [<code>CircleType</code>](#CircleType) | ||
**Returns**: <code>Number</code> - The current text radius. | ||
**Example** | ||
```js | ||
const circleType = new CircleType(myElement); | ||
circleType.dir(); | ||
// > 1 (clockwise) | ||
``` | ||
<a name="CircleType+refresh"></a> | ||
### circleType.refresh() ⇒ [<code>CircleType</code>](#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 [<code>CircleType</code>](#CircleType) | ||
**Returns**: [<code>CircleType</code>](#CircleType) - The current instance. | ||
**Example** | ||
```js | ||
const circleType = new CircleType(myElement); | ||
circleType.refresh(); | ||
``` | ||
<a name="CircleType+destroy"></a> | ||
### circleType.destroy() ⇒ [<code>CircleType</code>](#CircleType) | ||
Removes the CircleType effect from the element, restoring it to its | ||
original state. | ||
**Kind**: instance method of [<code>CircleType</code>](#CircleType) | ||
**Returns**: [<code>CircleType</code>](#CircleType) - This instance. | ||
**Example** | ||
```js | ||
const circleType = new CircleType(myElement); | ||
// Restore `myElement` to its original state. | ||
circleType.destroy(); | ||
``` |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
11217
5
150
1