Advanced-ellipsis NPM

Advanced Ellipsis

It provides advanced ellipsis capabilities when the content box is small and only a part of the content needs to be shown, and part of the content is important.

Usage

Module usage without npm

npm i advanced-ellipsis

import AdvancedEllipsis from 'advanced-ellipsis';
const advancedEllipsis = new AdvancedEllipsis();
advancedEllipsis.start();

Module usage with CDN

<script type="module">
	import AdvancedEllipsis from 'https://cdn.jsdelivr.net/npm/advanced-ellipsis/dist/advanced-ellipsis.esm.js';
	const advancedEllipsis = new AdvancedEllipsis();
	advancedEllipsis.start();
</script>

<script> tag Usage with CDN

<script src="https://cdn.jsdelivr.net/npm/advanced-ellipsis/dist/advanced-ellipsis.js"></script>
<script>
	var advancedEllipsis;
	window.onload = function () {
		advancedEllipsis = new AdvancedEllipsis();
		advancedEllipsis.start();
	};
</script>

Demo

https://chae-sumin.github.io/advanced-ellipsis/

Methods

constructor

const advancedEllipsis = new AdvancedEllipsis($selector);
or
const advancedEllipsis = new AdvancedEllipsis($options);
or
const advancedEllipsis = new AdvancedEllipsis($options, $selector);
// $selector is a string
// $options is an object

If $selector is not entered, '[data-ellipsis]' is set as the default.

Methods

Methods	Description	Parameter	return
`start`	Set ellipsis according to the set `$options` and `$attributes`.`$status` becomes true	-	`this`
`destroy`	Restore the ellipsis set through the `start()`.`$status` becomes false	-	`this`
`restart`	Restart when `$status` is start(true).	-	`this`

Methods	Description	Parameter	Parameter type	return
`setElements`	Set the element according to the `$selector`.Existing elements are automatically `destroy()`	`$selector`	string	`this`
`getElements`	Returns the set elements in an array.Changing the returned array does not change the elements(it is possible to change the element itself).	-	-	Array<HTMLElement>
`setOptions`	Set the options according to the `$options`.Calls `restart()` when options have changed	`$options`	object	`this`
`getOptions`	Calls the set option.Converting the returned object does not change the options.	-	-	object
`getOption`	Returns the option value corresponding to `$optionKey`	`$optionKey`	string	boolean \| number \| string \| object
`getStatus`	Returns `$status`. If it is true, `start()` is in operation. If false, it is before `start()` or after `destroy()`.	-	-	`$status` (boolean)

Options and Attributes

common options

Option	Description	Type	Default
`mutationObserver`	When this value is true and `$status` is start(true),change the set element is detected.Elements whose changes are detected are reset.	boolean	true
`defaultStyles`	If the value is true, apply ellipsis by default.If false, you have to modify the style yourself to ellipsis.`defaultStyles` = { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}	boolean	true
`useCloneNode`	If the value is true, use cloneNode to determine ellipsis.If false, use scrollWidth.	boolean	false
`showOption`	It gives special effects to ellipsis processed nodes.`'static'`: I only apply ellipsis.`'flow'`: Text flows sideways when a mouse hover or touch is touched.`'flow-auto'`: Text automatically flows sideways.`'tooltip'`: Text flows sideways when a mouse hover or touch is touched.	string	'static'
`correctionValue`	Add the calibration value in 'px' to the internal size. (The larger the value, the more generous the ellipsis decision is.)	number	0

flow options

tooltip options

When showOption or data-ellipsis-show-option is 'tooltip' |Option|Description|Type|Default| |-|-|-|-| |tooltipShowAlways|Set to true if you want tooltips to appear even in non-ellipsis text.|boolean|false| |tooltipClass|The class applied to the tooltip that is created.(Strings separated by spacebars)|string|'ellipsis_tooltip_box'| |tooltipDuration|The time when the tool tip is maintained. (unit: ms)|number|Default| |customTooltipStyles|Apply custom style to tool tip.|object|{ }|

attributes

If the element has the following prop, overwrite the options.

example:
<div data-ellipsis data-ellipsis-show-option="flow-auto">ellipsis text...</div>
Attributes Description
data-show-option overwrite showOption
data-flow-count overwrite both flowCount and flowAutoCount
data-flow-count-pre overwrite flowCountPre
data-tooltip-show-always overwrite tooltipShowAlways
data-tooltip-id The class applied to the tooltip that is created.
data-tooltip-class The id applied to the tooltip that is created.(Strings separated by spacebars)

Attributes	Description
`data-show-option`	overwrite `showOption`
`data-flow-count`	overwrite both `flowCount` and `flowAutoCount`
`data-flow-count-pre`	overwrite `flowCountPre`
`data-tooltip-show-always`	overwrite `tooltipShowAlways`
`data-tooltip-id`	The class applied to the tooltip that is created.
`data-tooltip-class`	The id applied to the tooltip that is created.(Strings separated by spacebars)

Description

Elements only apply if they have only one text note as a child.
when showOption is 'flow', 'flow-auto' or 'tooltip',it detects mouseover or touchstart and operates.
The default value of elements is '[data-ellipsis]'.
Always follow the priority below
Options
Attributes > custom Options > default Options
Tooltip Element Class Attributes > tooltipElementClass
Tooltip Element Styles !important styles > customTooltipStyles > defaultTooltipStyles > User-entered inline styles > css styles
customTooltipStyles and defaultTooltipStyles will be override User-entered inline styles

License

Contact

cotnmin@gmail.com

javascript vanilla javascript auto-ellipsis auto ellipsis elipsis flow tooltip html css truncate

@infinitebrahmanuniverse/nolb-adv @everything-registry/sub-chunk-1101

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago