adaptable-text - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

CHANGELOG.md

 # Changelog
 
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+# [3.2.0](https://github.com/dmnsgn/adaptable-text/compare/v3.1.0...v3.2.0) (2024-01-27)
+
+
+### Features
+
+* add support for binary search adaptation ([2874af2](https://github.com/dmnsgn/adaptable-text/commit/2874af2a2f48280d2c6f6992f2ca03751f106a1d))
+
+
+
 # [3.1.0](https://github.com/dmnsgn/adaptable-text/compare/v3.0.1...v3.1.0) (2021-09-10)
@@ -6,0 +15,0 @@

index.js

 import clamp from "clamp";
 
 /**
- * @typedef {Object} Options
+ * @typedef {object} Options
  * @property {number} [step=0.5] The step used by the generator to calculate the width of the element.
  * @property {number} [minFontSize=0] A minimum font size for the element (max would be the size defined in a stylesheet retrieved by `window.getComputedStyle(this.element)`).
- * @property {number} [width=null] A maximum widht for the container..
+ * @property {number} [width="null"] A maximum width for the container.
  */
@@ -24,3 +24,3 @@
       },
-      options
+      options,
     );
@@ -46,3 +46,3 @@
     this.adaptedFontSize = parseFloat(
-      this.styles.getPropertyValue("font-size")
+      this.styles.getPropertyValue("font-size"),
     );
@@ -65,5 +65,6 @@ this.initialFontsize = this.adaptedFontSize;
   /**
-   * Adapt font size to a specified width
+   * Adapt font size to a specified width.
+   * @param {boolean} [useBinarySearch]
    */
-  adapt() {
+  adapt(useBinarySearch) {
     // Get element content and replace <br>
@@ -78,16 +79,20 @@ this.text = this.element.value || this.element.innerText;
     const availableWidth = this.width - this.maxCharWidth;
+    let newFontSize;
 
-    let fontSizeGenerator;
-    let newFontSize;
-    if (
-      textWidth > availableWidth &&
-      previousFontSize > this.options.minFontSize
-    ) {
-      fontSizeGenerator = this.reduceFontSize(previousFontSize);
+    if (useBinarySearch) {
+      newFontSize = this.binarySearch(availableWidth);
     } else {
-      fontSizeGenerator = this.augmentFontSize(previousFontSize);
+      let fontSizeGenerator;
+      if (
+        textWidth > availableWidth &&
+        previousFontSize > this.options.minFontSize
+      ) {
+        fontSizeGenerator = this.reduceFontSize(previousFontSize);
+      } else {
+        fontSizeGenerator = this.augmentFontSize(previousFontSize);
+      }
+      if (fontSizeGenerator) {
+        newFontSize = fontSizeGenerator.next().value - this.options.step;
+      }
     }
-    if (fontSizeGenerator) {
-      newFontSize = fontSizeGenerator.next().value;
-    }
 
@@ -99,3 +104,3 @@ // Set font size if necessary
         this.options.minFontSize,
-        this.initialFontsize
+        this.initialFontsize,
       );
@@ -106,2 +111,23 @@ this.element.style.fontSize = `${this.adaptedFontSize}px`;
 
+  binarySearch(width) {
+    let low = this.options.minFontSize;
+    let high = this.initialFontsize;
+    let mid;
+
+    let fontSize = low;
+
+    while (low <= high) {
+      mid = (high + low) * 0.5;
+
+      if (this.getTextWidth(this.text, mid) <= width) {
+        low = mid + this.options.step;
+        fontSize = mid;
+      } else {
+        high = mid - this.options.step;
+      }
+    }
+
+    return fontSize;
+  }
+
   *reduceFontSize(_fontSize) {
@@ -160,3 +186,3 @@ let fontSize = _fontSize;
         this.chars[len],
-        this.adaptedFontSize
+        this.adaptedFontSize,
       );
@@ -163,0 +189,0 @@

package.json

 {
   "name": "adaptable-text",
-  "version": "3.1.0",
-  "description": "Adapt font size to a specified width.",
+  "version": "3.2.0",
+  "description": "Adapt font size to a specified width using either binary search or linear steps.",
   "keywords": [
@@ -34,3 +34,3 @@ "responsive",
   "devDependencies": {
-    "es-module-shims": "^0.10.3"
+    "es-module-shims": "^1.8.2"
   },
@@ -37,0 +37,0 @@ "engines": {

README.md

@@ -5,4 +5,4 @@ # adaptable-text
 [![stability-stable](https://img.shields.io/badge/stability-stable-green.svg)](https://www.npmjs.com/package/adaptable-text)
-[![npm minzipped size](https://img.shields.io/bundlephobia/minzip/adaptable-text)](https://www.npmjs.com/package/adaptable-text)
-[![dependencies](https://img.shields.io/david/dmnsgn/adaptable-text)](https://github.com/dmnsgn/adaptable-text/blob/main/package.json)
+[![npm minzipped size](https://img.shields.io/bundlephobia/minzip/adaptable-text)](https://bundlephobia.com/package/adaptable-text)
+[![dependencies](https://img.shields.io/librariesio/release/npm/adaptable-text)](https://github.com/dmnsgn/adaptable-text/blob/main/package.json)
 [![types](https://img.shields.io/npm/types/adaptable-text)](https://github.com/microsoft/TypeScript)
@@ -14,4 +14,6 @@ [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-fa6673.svg)](https://conventionalcommits.org)
 
-Adapt font size to a specified width.
+Adapt font size to a specified width using either binary search or linear steps.
 
+Linear steps works best for small adjustments (eg. on resize) while binary search is most efficient when the expected font-size change is big.
+
 [![paypal](https://img.shields.io/badge/donate-paypal-informational?logo=paypal)](https://paypal.me/dmnsgn)
@@ -32,3 +34,3 @@ [![coinbase](https://img.shields.io/badge/donate-coinbase-informational?logo=coinbase)](https://commerce.coinbase.com/checkout/56cbdf28-e323-48d8-9c98-7019e72c97f3)
 
-const textToAdapt = new AdaptableText(document.querySelector(".textToAdapt"), {
+const textToAdapt = new AdaptableText(document.querySelector(".TextToAdapt"), {
   step: 0.1,
@@ -50,5 +52,3 @@ minFontSize: 10,
 // Kick off
-requestIdleCallback(() => {
-  adapt();
-});
+adapt(true);
 ```
@@ -70,3 +70,3 @@
 <dl>
-<dt><a href="#Options">Options</a> : <code>Object</code></dt>
+<dt><a href="#Options">Options</a> : <code>object</code></dt>
 <dd></dd>
@@ -85,3 +85,3 @@ </dl>
   - [.setWidth()](#AdaptableText+setWidth)
-  - [.adapt()](#AdaptableText+adapt)
+  - [.adapt([useBinarySearch])](#AdaptableText+adapt)
 
@@ -105,3 +105,3 @@ <a name="new_AdaptableText_new"></a>
 
-**Kind**: instance method of [<code>AdaptableText</code>](#AdaptableText)  
+**Kind**: instance method of [<code>AdaptableText</code>](#AdaptableText)
 <a name="AdaptableText+setWidth"></a>
@@ -113,22 +113,27 @@
 
-**Kind**: instance method of [<code>AdaptableText</code>](#AdaptableText)  
+**Kind**: instance method of [<code>AdaptableText</code>](#AdaptableText)
 <a name="AdaptableText+adapt"></a>
 
-### adaptableText.adapt()
+### adaptableText.adapt([useBinarySearch])
 
-Adapt font size to a specified width
+Adapt font size to a specified width.
 
-**Kind**: instance method of [<code>AdaptableText</code>](#AdaptableText)  
+**Kind**: instance method of [<code>AdaptableText</code>](#AdaptableText)
+
+| Param             | Type                 |
+| ----------------- | -------------------- |
+| [useBinarySearch] | <code>boolean</code> |
+
 <a name="Options"></a>
 
-## Options : <code>Object</code>
+## Options : <code>object</code>
 
-**Kind**: global typedef  
+**Kind**: global typedef
 **Properties**
 
-| Name          | Type                | Default          | Description                                                                                                                               |
-| ------------- | ------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| [step]        | <code>number</code> | <code>0.5</code> | The step used by the generator to calculate the width of the element.                                                                     |
-| [minFontSize] | <code>number</code> | <code>0</code>   | A minimum font size for the element (max would be the size defined in a stylesheet retrieved by `window.getComputedStyle(this.element)`). |
-| [width]       | <code>number</code> | <code></code>    | A maximum widht for the container..                                                                                                       |
+| Name          | Type                | Default                       | Description                                                                                                                               |
+| ------------- | ------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| [step]        | <code>number</code> | <code>0.5</code>              | The step used by the generator to calculate the width of the element.                                                                     |
+| [minFontSize] | <code>number</code> | <code>0</code>                | A minimum font size for the element (max would be the size defined in a stylesheet retrieved by `window.getComputedStyle(this.element)`). |
+| [width]       | <code>number</code> | <code>&quot;null&quot;</code> | A maximum width for the container.                                                                                                        |
 
@@ -135,0 +140,0 @@ <!-- api-end -->

types/index.d.ts

@@ -12,3 +12,3 @@ export default AdaptableText;
     /**
-     * A maximum widht for the container..
+     * A maximum width for the container.
      */
@@ -18,6 +18,6 @@ width?: number;
 /**
- * @typedef {Object} Options
+ * @typedef {object} Options
  * @property {number} [step=0.5] The step used by the generator to calculate the width of the element.
  * @property {number} [minFontSize=0] A minimum font size for the element (max would be the size defined in a stylesheet retrieved by `window.getComputedStyle(this.element)`).
- * @property {number} [width=null] A maximum widht for the container..
+ * @property {number} [width="null"] A maximum width for the container.
  */
@@ -32,3 +32,7 @@ declare class AdaptableText {
     element: HTMLElement;
-    options: any;
+    options: {
+        width: any;
+        step: number;
+        minFontSize: number;
+    } & Options;
     chars: string[];
@@ -50,6 +54,8 @@ /**
     /**
-     * Adapt font size to a specified width
+     * Adapt font size to a specified width.
+     * @param {boolean} [useBinarySearch]
      */
-    adapt(): void;
+    adapt(useBinarySearch?: boolean): void;
     text: any;
+    binarySearch(width: any): number;
     reduceFontSize(_fontSize: any): any;
@@ -56,0 +62,0 @@ augmentFontSize(_fontSize: any): any;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15047

increased by11.17%

Number of package files

7

increased by16.67%

Lines of code

222

increased by13.85%

Number of lines in readme file

137

increased by3.79%

No dependency changes