channel.js 3.08 KB
/**
 * 频道选择页面顶部搜索
 * @author: bikai<kai.bi@yoho.cn>
 * @date: 2015/10/28
 */
var $ = require('jquery');

var $searchBox = $('.search-box'),
    $box = $('.box'),
    $indexSearch = $('.index-search'),
    $indexLogo = $('.index-logo'),
    $channelLink = $('.index-channel a'),
    $win = $(window),
    $doc = $(document),
    $appFloatLayer = $('#float-layer-app');

var $search = $searchBox.children('input[type="text"]'),
        $cancelSearch = $box.children('.no-search'),
        $searchIcon = $searchBox.children('.search-icon');

var updateLayerPosition = (function() {
    var init = false,
        windowViewHeight = 0;


    return function() {
        var winHeight = window.innerHeight,
            bodyHeight = $doc.height(),
            scrollTopPosition = $win.scrollTop(),
            layerContentHeight = $appFloatLayer.height(),
            layerPaddingTop = parseInt($appFloatLayer.css('padding-top')),
            layerPaddingBottom = parseInt($appFloatLayer.css('padding-bottom')),
            layerHeight = layerContentHeight + layerPaddingTop + layerPaddingBottom,
            newPosition;

        if (init) {

            //keyboard is shown
            if (windowViewHeight - winHeight > 200) {
                newPosition = bodyHeight - winHeight - scrollTopPosition - layerHeight;
            } else {
                newPosition = bodyHeight - winHeight - scrollTopPosition;
            }

            if (scrollTopPosition + winHeight === bodyHeight) {
                newPosition = 0;
            }
        } else {
            windowViewHeight = winHeight;
            newPosition = bodyHeight - winHeight - scrollTopPosition + layerHeight;
            init = true;
        }

        $appFloatLayer.css({
            position: 'relative',
            bottom: newPosition + 'px'
        });
    };
})();

require('../common');

$search.on('focus', function() {
    $box.addClass('action');
    $indexLogo.addClass('action');
}).on('input', function() {
    if ($search.val() === '') {
        $searchIcon.addClass('empty');
    } else {
        $searchIcon.removeClass('empty');
    }
});

$cancelSearch.on('touchend', function() {
    $box.removeClass('action');
    $indexLogo.removeClass('action');
    $search.blur();
    return false;
});

$searchBox.children('.clear-text').on('touchstart', function() {
    $search.val('').focus().trigger('input');
});

$searchBox.children('.search-icon').on('touchstart', function() {
    $indexSearch.submit();
});

$('.index-channel img').on('load error', function() {
    window.rePosFooter && window.rePosFooter();
});

$channelLink.on('touchstart', function() {
    $channelLink.css({
        background: '#000',
        color: '#fff',
        borderColor: '#fff'
    });
    $(this).css({
        background: 'rgba(255, 255, 255, 0.5)',
        color: '#000',
        borderColor: '#000'
    });
}).on('touchend touchcancel', function() {
    $(this).css({
        background: '#000',
        color: '#fff',
        borderColor: '#fff'
    });
});


$win.scroll(function() {
    updateLayerPosition();
});


$doc.on('ready', updateLayerPosition);