<commit_before># Toner.js

- [Summary](#summary)
- [Examples](#examples)
- [TODO List](#todo-list)


## Summary

Photo filter utilities for image manipulation


## Examples

```javascript  
// Apply a tone to a single photo
toner.tone(document.getElementById('logo'), {
    sepia:  70,
    brightness: 200
})
```  

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-tone.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-tone.png)

---
```javascript
// Apply a tone to multiple photos
toner.tone(document.getElementsByClassName('photo'), {
    sepia:  50,
    invert: 70,
    contrast: 140
})
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-tone-multiple.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-tone-multiple.png)

---
```javascript
// Create reusable tones
var grayscaleTone = toner.createTone({ grayscale: 100 })
toner.tone(document.getElementById('logo'), grayscaleTone)
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-create-tone.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-create-tone.png)

---
```javascript
// Get the current value for a filter within a tone
console.log(toner.get(document.getElementById('logo'), 'grayscale'))
> 100
```

---
```javascript
// Add a single additional filter after a tone has been applied
toner.addFilters(document.getElementById('logo2'), {
    sepia: 70
})
toner.addFilters(document.getElementById('logo2'), {
    brightness: 200
})
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-filter-add.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-filter-add.png)

---
```javascript
// Add multiple filters after a tone has been applied
toner.addFilters(document.getElementById('logo2'), {
    sepia: 70,
    brightness: 200
})
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-filter-add.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-filter-add.png)

---
```javascript
// Remove a filter from a previously applied tone
toner.removeFilters(document.getElementById('logo2'), "opacity")
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-filter-remove.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-filter-remove.png)

---
```javascript
// Remove multiple filters from a previously applied tone
toner.removeFilters(document.getElementById('logo3'), ["saturate", "opacity"])
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-filters-remove.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-filters-remove.png)

---
```javascript
// Remove a tone all together
toner.removeTone(document.getElementsByClassName('photo'))  
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-filters-remove.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-filters-remove.png)

---
## TODO List

- [x] Apply a custom tone
- [x] Create a custom tone
- [x] Update an applied tone
- [x] Remove filters from previously applied tones
- [x] Remove a previously applied tone
- [x] Get filter values from an applied tone
- [x] Handle bounds checking per filter attribute
- [x] Create a build script to lint and minify files
- [ ] Increase performance using requestAnimationFrame for fast incrementation/decrementation
- [ ] Implement model and browser tests
<commit_msg>@trivial Update README.md example spacing<commit_after># Toner.js

- [Summary](#summary)
- [Examples](#examples)
- [TODO List](#todo-list)


## Summary

Photo filter utilities for image manipulation


## Examples

```javascript  
// Apply a tone to a single photo
toner.tone(document.getElementById('logo'), {
    sepia:      70,
    brightness: 200
})
```  

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-tone.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-tone.png)

---
```javascript
// Apply a tone to multiple photos
toner.tone(document.getElementsByClassName('photo'), {
    sepia:    50,
    invert:   70,
    contrast: 140
})
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-tone-multiple.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-tone-multiple.png)

---
```javascript
// Create reusable tones
var grayscaleTone = toner.createTone({ grayscale: 100 })
toner.tone(document.getElementById('logo'), grayscaleTone)
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-create-tone.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-create-tone.png)

---
```javascript
// Get the current value for a filter within a tone
console.log(toner.get(document.getElementById('logo'), 'grayscale'))
> 100
```

---
```javascript
// Add a single additional filter after a tone has been applied
toner.addFilters(document.getElementById('logo2'), {
    sepia: 70
})
toner.addFilters(document.getElementById('logo2'), {
    brightness: 200
})
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-filter-add.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-filter-add.png)

---
```javascript
// Add multiple filters after a tone has been applied
toner.addFilters(document.getElementById('logo2'), {
    sepia:      70,
    brightness: 200
})
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-filter-add.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-filter-add.png)

---
```javascript
// Remove a filter from a previously applied tone
toner.removeFilters(document.getElementById('logo2'), "opacity")
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-filter-remove.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-filter-remove.png)

---
```javascript
// Remove multiple filters from a previously applied tone
toner.removeFilters(document.getElementById('logo3'), ["saturate", "opacity"])
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-filters-remove.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-filters-remove.png)

---
```javascript
// Remove a tone all together
toner.removeTone(document.getElementsByClassName('photo'))  
```

###### Before
![Before](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/before-filters-remove.png)
###### After
![After](https://git.corp.adobe.com/XD/toner.js/blob/master/examples/images/after-filters-remove.png)

---
## TODO List

- [x] Apply a custom tone
- [x] Create a custom tone
- [x] Update an applied tone
- [x] Remove filters from previously applied tones
- [x] Remove a previously applied tone
- [x] Get filter values from an applied tone
- [x] Handle bounds checking per filter attribute
- [x] Create a build script to lint and minify files
- [ ] Increase performance using requestAnimationFrame for fast incrementation/decrementation
- [ ] Implement model and browser tests

{'fraction_non_alphanumeric': 0.18809493590557178, 'fraction_numerical': 0.008376697550450564, 'mean_word_length': 4.476025017373176, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 32, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3329050', 'n_tokens_mistral': 2798, 'n_tokens_neox': 2570, 'n_words': 460}