Merge pull request #581 from lineupjs/release/v4.6.2

Release v4.6.2

cypress/integration/custom_instance_id.spec.ts

@@ -0,0 +1,19 @@
+import { withLineUp, waitReady, LineUpJSType, Taggle } from './utils/lineup';
+
+describe('builder', () => {
+  let lineup: Taggle;
+  let lineUpJS: LineUpJSType;
+  before(
+    withLineUp((l, document) => {
+      lineUpJS = l;
+      const b = lineUpJS.builder([]);
+      b.instanceId('custom-instance-id');
+      lineup = b.buildTaggle(document.body);
+      waitReady(lineup);
+    })
+  );
+
+  it('default', () => {
+    cy.get('#lu-custom-instance-id'); // note the `lu-` prefix
+  });
+});

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lineupjs",
   "description": "LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes.",
-  "version": "4.6.1",
+  "version": "4.6.2",
   "author": {
     "name": "Samuel Gratzl",
     "email": "sam@sgratzl.com",

src/builder/LineUpBuilder.ts

@@ -194,4 +194,13 @@ export default class LineUpBuilder {
     this.options.flags!.advancedUIFeatures = false;
     return this;
   }
+
+  /**
+   * identifier for this LineUp instance. by default a random id is generated.
+   * @default random string
+   */
+  instanceId(instanceId: string) {
+    this.options.instanceId = instanceId;
+    return this;
+  }
 }

src/config.ts

@@ -212,6 +212,12 @@ export interface ILineUpOptions {
    * @default false
    */
   copyableRows: boolean;
+
+  /**
+   * identifier for this LineUp instance. by default a random id is generated.
+   * @default random string
+   */
+  instanceId: string;
 }
 
 export interface ITaggleOptions extends ILineUpOptions {
@@ -305,5 +311,7 @@ export function defaultOptions(): ITaggleOptions {
 
     ignoreUnsupportedBrowser: false,
     copyableRows: true,
+
+    instanceId: Math.random().toString(36).slice(-8).substring(0, 3), // generate a random string with length 3
   };
 }

src/styles/icons/_index.scss

@@ -76,8 +76,8 @@ $lu_icon_window_restore: '\f2d2';
   @if $lu_use_font_awesome == true {
     @include fa-icon();
 
-    font-family: 'Font Awesome 5 Free', serif;
-    font-weight: 900;
+    font-family: $fa-style-family, serif;
+    font-weight: $fa-style;
   } @else {
     display: inline-block;
     font: normal normal normal 14px/1 lu-font, serif; // shortening font declaration

src/ui/EngineRenderer.ts

@@ -55,14 +55,19 @@ export default class EngineRenderer extends AEventDispatcher {
 
   private readonly updateAbles: ((ctx: IRankingHeaderContext) => void)[] = [];
   private zoomFactor = 1;
-  readonly idPrefix = `lu${Math.random().toString(36).slice(-8).substr(0, 3)}`; //generate a random string with length3;
+  readonly idPrefix;
 
   private enabledHighlightListening = false;
   readonly selectionIndicator: SelectionIndicator;
 
   constructor(protected data: DataProvider, parent: HTMLElement, options: Readonly<ILineUpOptions>) {
     super();
     this.options = options;
+
+    this.idPrefix = this.options.instanceId
+      ? `lu-${this.options.instanceId}`
+      : `lu-${Math.random().toString(36).slice(-8).substring(0, 3)}`;
+
     this.node = parent.ownerDocument!.createElement('main');
     this.node.id = this.idPrefix;
     // FIXME inline

src/ui/dialogs/CompositeChildrenDialog.ts

@@ -12,7 +12,7 @@ export default class CompositeChildrenDialog extends APopup {
 
   constructor(private readonly column: CompositeColumn, dialog: IDialogContext, private ctx: IRankingHeaderContext) {
     super(dialog);
-    this.id = `.dialog${Math.random().toString(36).slice(-8).substr(0, 3)}`;
+    this.id = `.dialog${Math.random().toString(36).slice(-8).substring(0, 3)}`;
   }
 
   cleanUp(action: 'cancel' | 'confirm' | 'handled') {