Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
advanced-ellipsis
Advanced tools
Readme
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.
npm i advanced-ellipsis
import AdvancedEllipsis from 'advanced-ellipsis';
const advancedEllipsis = new AdvancedEllipsis();
advancedEllipsis.start();
<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 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>
https://chae-sumin.github.io/advanced-ellipsis/
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 | 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) |
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 |
defalutStyles | If the value is true, apply ellipsis by default. If false, you have to modify the style yourself to ellipsis. defalutStyles = {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' |
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 |
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 | { } |
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) |
showOption
is 'flow'
, 'flow-auto'
or 'tooltip'
,mouseover
or touchstart
and operates.'[data-ellipsis]'
.Options
Tooltip Element Class
Tooltip Element Styles
!important styles
>customTooltipStyles
>defalutTooltipStyles
>User-entered inline styles
>css styles
customTooltipStyles
anddefalutTooltipStyles
will be overrideUser-entered inline styles
FAQs
Advanced ellipsis available in JS
We found that advanced-ellipsis demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).