<commit_before>﻿require("./res/DailyPage.less");

var $ = require("jquery");
var moment = require("moment");
var React = require("react");
var ReactUpdate = React.addons.update;
var PureRenderMixin = React.addons.PureRenderMixin;
var DailyManager = require("./controllers/DailyManager");
var Utils = require("./controllers/Utils");

var Carousel = require("./components/Carousel");
var FlexView = require("./components/FlexView");
var ArticleView = require("./components/ArticleView");

/**
 * 知乎日报页面。
 */
var DailyPage = React.createClass(
{
    mixins: [PureRenderMixin],

    getInitialState()
    {
        return {
            topStoryIndexes: [],
            storyIndexes: [],
            currentStory: null
        };
    },

    componentDidMount: function ()
    {
        var that = this;

        // 1、加载热门日报。
        DailyManager.getTopStoryIndexes(function (data)
        {
            if (that.isMounted() && data)
            {
                that.setState(
                {
                    topStoryIndexes: data.indexes
                });
            }
        });

        // 2、加载最新日报（初始化时仅加载今日、昨日的日报）。
        DailyManager.getStoryIndexes(function (data)
        {
            if (that.isMounted() && data)
            {
                that._addStoryIndexes(that, data.indexes);
                DailyManager.getStoryIndexes(function (data)
                {
                    if (data)
                    {
                        that._addStoryIndexes(that, data.indexes);
                    }
                }, Utils.subZhihuDay(DailyManager.getToday()));
            }
        });

        // 3、事件处理。
        $("#ArticleView").on("hide.bs.modal", function (e)
        {
            that._resetArticleViewScroll();
        });
    },

    componentWillUnmount: function ()
    {
        // 1、事件处理。
        $("#ArticleView").off("hide.bs.modal");
    },

    /**
    * 重设 ArticleView 的垂直滚动条位置。
    */
    _resetArticleViewScroll: function ()
    {
        $("#ArticleView .modal-content").scrollTop(0);
    },

    /**
    * 增量加载制定的日报。
    */
    _addStoryIndexes: function (p_this, p_indexes)
    {
        p_this.setState(
        {
            storyIndexes: ReactUpdate(p_this.state.storyIndexes,
            {
                $push: p_indexes
            })
        });
    },

    handleCarouselClick: function (e)
    {
        if(e.id)
        {
            this.setState({
                currentStory: DailyManager.getStories()[e.id]
            }, function()
            {
                $("#ArticleView").modal();
            });
        }
    },
    
    handleTileClick: function (e)
    {
        this.setState({
            currentStory: e.story
        }, function()
        {
            $("#ArticleView").modal();
        });
    },

    render: function ()
    {
        var page =
            <div className="DailyPage container-fluid">
                <div className="CarouselContainer container-fluid">
                    <Carousel onClick={this.handleCarouselClick} indexes={this.state.topStoryIndexes} />
                </div>
                <div className="FlexContainer container-fluid">
                    <FlexView onTileClick={this.handleTileClick} indexes={this.state.storyIndexes} />
                </div>
                <ArticleView story={this.state.currentStory}/>
            </div>;
        return page;
    }
});

module.exports = DailyPage;<commit_msg>add global key handler<commit_after>﻿require("./res/DailyPage.less");

var $ = require("jquery");
var moment = require("moment");
var React = require("react");
var ReactUpdate = React.addons.update;
var PureRenderMixin = React.addons.PureRenderMixin;
var DailyManager = require("./controllers/DailyManager");
var Utils = require("./controllers/Utils");

var Carousel = require("./components/Carousel");
var FlexView = require("./components/FlexView");
var ArticleView = require("./components/ArticleView");

var $ArticleView = null;
var $ArticleViewContent = null;

/**
 * 知乎日报页面。
 */
var DailyPage = React.createClass(
{
    mixins: [PureRenderMixin],

    getInitialState()
    {
        return {
            topStoryIndexes: [],
            storyIndexes: [],
            currentStory: null
        };
    },

    componentDidMount: function ()
    {
        var that = this;
        $ArticleView = $("#ArticleView");
        $ArticleViewContent = $("#ArticleView .modal-content");

        // 1、加载热门日报。
        DailyManager.getTopStoryIndexes(function (data)
        {
            if (that.isMounted() && data)
            {
                that.setState(
                {
                    topStoryIndexes: data.indexes
                });
            }
        });

        // 2、加载最新日报（初始化时仅加载今日、昨日的日报）。
        DailyManager.getStoryIndexes(function (data)
        {
            if (that.isMounted() && data)
            {
                that._addStoryIndexes(that, data.indexes);
                DailyManager.getStoryIndexes(function (data)
                {
                    if (data)
                    {
                        that._addStoryIndexes(that, data.indexes);
                    }
                }, Utils.prevZhihuDay(DailyManager.getToday()));
            }
        });

        // 3、事件处理。
        $ArticleView.on("hide.bs.modal", function (e)
        {
            that._resetArticleViewScroll();
        });
        $(document).on("keydown", that._globalKeydownHandler);
    },

    componentWillUnmount: function ()
    {
        // 1、事件处理。
        $ArticleView.off("hide.bs.modal");
        $(document).off("keydown");
    },
    
    /**
    * 处理全局按键事件。
    */
    _globalKeydownHandler: function (e)
    {
        var code = e.which;
        if(code == 27)
        {
            // ESC：关闭 ArticleView。
            if($ArticleView.is(":visible"))
            {
                $ArticleView.modal("hide");
            }
        }
        else if(code == 74)
        {
            // J：切换 ArticleView 到下一个日报。
            if($ArticleView.is(":visible"))
            {
                var index = _.indexOf(this.state.storyIndexes, this.state.currentStory.id) + 1;
                if(index < this.state.storyIndexes.length)
                {
                    this.setState({
                        currentStory: DailyManager.getStories()[this.state.storyIndexes[index]]
                    }, function()
                    {
                        this._resetArticleViewScroll();
                    });
                }
            }
        }
        else if(code == 75)
        {
            // K：切换 ArticleView 到上一个日报。
            if($ArticleView.is(":visible"))
            {
                var index = _.indexOf(this.state.storyIndexes, this.state.currentStory.id) - 1;
                if(index >= 0)
                {
                    this.setState({
                        currentStory: DailyManager.getStories()[this.state.storyIndexes[index]]
                    }, function()
                    {
                        this._resetArticleViewScroll();
                    });
                }
            }
        }
    },

    /**
    * 重设 ArticleView 的垂直滚动条位置。
    */
    _resetArticleViewScroll: function ()
    {
        $ArticleViewContent.scrollTop(0);
    },

    /**
    * 增量加载制定的日报。
    */
    _addStoryIndexes: function (p_this, p_indexes)
    {
        p_this.setState(
        {
            storyIndexes: ReactUpdate(p_this.state.storyIndexes,
            {
                $push: p_indexes
            })
        });
    },

    handleCarouselClick: function (e)
    {
        if(e.id)
        {
            this.setState({
                currentStory: DailyManager.getStories()[e.id]
            }, function()
            {
                $ArticleView.modal();
            });
        }
    },
    
    handleTileClick: function (e)
    {
        this.setState({
            currentStory: e.story
        }, function()
        {
            $ArticleView.modal();
        });
    },

    render: function ()
    {
        var page =
            <div className="DailyPage container-fluid">
                <div className="CarouselContainer container-fluid">
                    <Carousel onClick={this.handleCarouselClick} indexes={this.state.topStoryIndexes} />
                </div>
                <div className="FlexContainer container-fluid">
                    <FlexView onTileClick={this.handleTileClick} indexes={this.state.storyIndexes} />
                </div>
                <ArticleView story={this.state.currentStory}/>
            </div>;
        return page;
    }
});

module.exports = DailyPage;
{'fraction_non_alphanumeric': 0.1282051282051282, 'fraction_numerical': 0.0022044320686854624, 'mean_word_length': 1.4516496018202503, 'pattern_counts': {'":': 3, '<': 22, '<?xml version=': 0, '>': 22, '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': '4995745', 'n_tokens_mistral': 2592, 'n_tokens_neox': 2461, 'n_words': 350}