<commit_before>/**
 * An awesome clock interface for changing the time by dragging the mouse.
 * SVG based for colour change and responsiveness.
 * SVG is generated from timeline.ai, created using Adobe Illustrator 2014 CC
 * @module routes.home.Clock
 */

var React = require('React'),
    PomodoroTimer = require('../../pomodoroTimer');

// See timeline.ai smart guides for the values.
var SVG_NATIVE_WIDTH = 1833,
    SIXTY_POS = 1820,
    ZERO_POS = 30,
    SIXTY_PERC = SIXTY_POS / SVG_NATIVE_WIDTH,
    ZERO_PERC = ZERO_POS / SVG_NATIVE_WIDTH,
    SIXTY_MODIFIER = SIXTY_PERC,
    ZERO_MODIFIER = (1 - ZERO_PERC);

var Seeker = React.createClass({
    render: function () {
        var svgStyle = {left: this.state.deltaX};
        return (
            <div className="seeker-wrapper">
                <div className="seeker-overlay">
                    <div className="left-blur"/>
                    <div className="right-blur"/>
                    <img draggable="true"
                        style={svgStyle}
                        onDragStart={this.onDragStart}
                        onDragEnd={this.onDragEnd}
                        onDrag={this.onDrag}
                        className="svg"
                        src="img/timeline.svg">
                    </img>
                </div>
            </div>
        )
    },
    moveSeekerToCorrectPosition: function () {
        /* TODO: Use refs instead.
         For some reason there is an error stating must have an owner to use refs which makes no sense as clearly has
         an owner.
         */
        PomodoroTimer.one()
            .then(function (timer) {
                var $overlay = $('.seeker-overlay'),
                    parentWidth = $overlay.width(),
                    parentMiddle = parentWidth / 2,
                    minDelta = SIXTY_MODIFIER * -(parentWidth + parentMiddle),
                    maxDelta = ZERO_MODIFIER * parentMiddle,
                    deltaRange = Math.abs(minDelta) + Math.abs(maxDelta),
                    normalisedDelta = (timer.seconds / (60 * 60)) * deltaRange,
                    denormalisedDelta = -(normalisedDelta - deltaRange) - parentMiddle - parentWidth;
                this.setState({
                    deltaX: denormalisedDelta
                });
            }.bind(this))
            .catch(function (err) {
                console.error('Error initialising seeker', err);
            });
    },
    componentDidMount: function () {
        this.moveSeekerToCorrectPosition();
        // TODO: Is there a more clever way to handle scaling of the seeker? i.e. incorporate into responsiveness?
        this.resizeHandler = this.moveSeekerToCorrectPosition.bind(this);
        $(window).resize(this.resizeHandler);
    },
    componentWillUnmount: function () {
        $(window).off('resize', this.resizeHandler);<commit_msg>the seeker now changes with the timer<commit_after>/**
 * An awesome clock interface for changing the time by dragging the mouse.
 * SVG based for colour change and responsiveness.
 * SVG is generated from timeline.ai, created using Adobe Illustrator 2014 CC
 * @module routes.home.Clock
 */

var React = require('React'),
    PomodoroTimer = require('../../pomodoroTimer'),
    SiestaMixin = require('../../../../react-siesta').SiestaMixin;

// See timeline.ai smart guides for the values.
var SVG_NATIVE_WIDTH = 1833,
    SIXTY_POS = 1820,
    ZERO_POS = 30,
    SIXTY_PERC = SIXTY_POS / SVG_NATIVE_WIDTH,
    ZERO_PERC = ZERO_POS / SVG_NATIVE_WIDTH,
    SIXTY_MODIFIER = SIXTY_PERC,
    ZERO_MODIFIER = (1 - ZERO_PERC);

var Seeker = React.createClass({
    mixins: [SiestaMixin],
    render: function () {
        var svgStyle = {left: this.state.deltaX};
        return (
            <div className="seeker-wrapper">
                <div className="seeker-overlay">
                    <div className="left-blur"/>
                    <div className="right-blur"/>
                    <img draggable="true"
                        style={svgStyle}
                        onDragStart={this.onDragStart}
                        onDragEnd={this.onDragEnd}
                        onDrag={this.onDrag}
                        className="svg"
                        src="img/timeline.svg">
                    </img>
                </div>
            </div>
        )
    },
    moveSeekerToCorrectPosition: function () {
        /* TODO: Use refs instead.
         For some reason there is an error stating must have an owner to use refs which makes no sense as clearly has
         an owner.
         */
        PomodoroTimer.one()
            .then(function (timer) {
                var $overlay = $('.seeker-overlay'),
                    parentWidth = $overlay.width(),
                    parentMiddle = parentWidth / 2,
                    minDelta = SIXTY_MODIFIER * -(parentWidth + parentMiddle),
                    maxDelta = ZERO_MODIFIER * parentMiddle,
                    deltaRange = Math.abs(minDelta) + Math.abs(maxDelta),
                    normalisedDelta = (timer.seconds / (60 * 60)) * deltaRange,
                    denormalisedDelta = -(normalisedDelta - deltaRange) - parentMiddle - parentWidth;
                this.setState({
                    deltaX: denormalisedDelta
                });
            }.bind(this))
            .catch(function (err) {
                console.error('Error initialising seeker', err);
            });
    },
    handleTimerEvent: function (e) {
        if (e.field == 'seconds')this.moveSeekerToCorrectPosition();
    },
    componentDidMount: function () {
        this.moveSeekerToCorrectPosition();
        // TODO: Is there a more clever way to handle scaling of the seeker? i.e. incorporate into responsiveness?
        this.resizeHandler = this.moveSeekerToCorrectPosition.bind(this);
        $(window).resize(this.resizeHandler);
        this.listen(PomodoroTimer, this.handleTimerEvent.bind(this));
    },
    componentWillUnmount: function () {
        $(window).off('resize', this.resizeHandler);
{'fraction_non_alphanumeric': 0.10521091811414392, 'fraction_numerical': 0.006617038875103391, 'mean_word_length': 1.7964847363552265, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 0, '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': '2205740', 'n_tokens_mistral': 1728, 'n_tokens_neox': 1595, 'n_words': 397}