advanced-ellipsis

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

[e-mail]