circletype - npm Package Compare versions

Comparing version 2.0.4 to 2.0.5

dist/circletype.min.js

 /*!
- * 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?"&nbsp;":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?"&nbsp;":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)}}])});

package.json

 {
   "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"
   }
 }

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();
+```

Fixed alerts

Major refactor

Supply chain risk

Package 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

Improved metrics

Total package byte prevSize

11217

increased by69.31%

Number of package files

5

increased by25%

Number of lines in readme file

150

increased by614.29%

Number of medium supply chain risk alerts

1

decreased by-50%

No dependency changes