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

When showOption or data-ellipsis-show-option is 'flow' or 'flow-auto' |Option|Description|Type|Unit|Default| |-|-|-|-|-| |flowDelay|The delay time before the text flows.|number|ms|1000| |flowAfterDelay|The delay time after text flow is over.|number|ms|1000| |flowSpeed|The speed at which the text flows.|number|px / s|50| |flowPadding|Add the space at the end as the text flows.|number|px|20| |flowCount|The number of flows running after the event occurs.when the showOption is 'flow'.|number|-|1| |flowCountPre|The number of flows that are executed as soon as the setting is made.when the showOption is 'flow'.|number|-|0| |flowAutoCount|The number of flows when showOption is 'flow-auto'.|number|-|Infinity|

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)|

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

[email protected]