| 9 | module.exports = DiffUI |
| 10 | |
| 11 | function DiffUI(compare) { |
| 12 | if (!(this instanceof DiffUI)) return new DiffUI(compare) |
| 13 | |
| 14 | var el = this.el = document.body.appendChild( |
| 15 | domify(fs.readFileSync( |
| 16 | __dirname + '/diff-ui.html', 'utf8' |
| 17 | )) |
| 18 | ) |
| 19 | |
| 20 | var buttons = slice(el.querySelectorAll('ul > li')) |
| 21 | var slider = el.querySelector('.diff-slider-inner') |
| 22 | var outerSlider = el.querySelector('.diff-slider') |
| 23 | var mouse = mpos(slider, window) |
| 24 | var sliding = false |
| 25 | |
| 26 | mouse.on('move', function() { |
| 27 | if (!sliding) return |
| 28 | var slide = clamp(mouse.x / 300, 0, 1) |
| 29 | compare.amount = slide |
| 30 | slider.style.width = slide * 100 + '%' |
| 31 | }) |
| 32 | |
| 33 | outerSlider.addEventListener('mousedown', function(e) { |
| 34 | sliding = true |
| 35 | }, false) |
| 36 | |
| 37 | window.addEventListener('mouseup', function(e) { |
| 38 | sliding = false |
| 39 | }, false) |
| 40 | |
| 41 | el.addEventListener('click', function(e) { |
| 42 | var button = findup(e.target, 'li') |
| 43 | if (!button) return |
| 44 | |
| 45 | var mode = button.getAttribute('data-mode') |
| 46 | if (mode) return select(mode) |
| 47 | }, false) |
| 48 | |
| 49 | select('slide') |
| 50 | function select(mode) { |
| 51 | compare.mode = mode |
| 52 | |
| 53 | buttons.forEach(function(button) { |
| 54 | button.classList.remove('selected') |
| 55 | }) |
| 56 | |
| 57 | el.querySelector('[data-mode="'+mode+'"]') |
| 58 | .classList |
| 59 | .add('selected') |
| 60 | } |
| 61 | } |