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

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');

// variables for calculate the app download layer position
var layerInit = false,
    windowViewHeight = 0,
    layerContentHeight = $appFloatLayer.height(),
    layerPaddingTop = parseInt($appFloatLayer.css('padding-top')),
    layerPaddingBottom = parseInt($appFloatLayer.css('padding-bottom')),
    layerHeight = layerContentHeight + layerPaddingTop + layerPaddingBottom,
    layerNewPos;

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() {
    if (security.hasDangerInput()) {
        return false;
    }
    $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'
    });
});


function updateLayerPosition() {
    var winHeight = window.innerHeight,
        bodyHeight = $doc.height(),
        scrollTopPosition = $win.scrollTop();

    if (layerInit) {

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

    } else {
        windowViewHeight = winHeight;
        layerNewPos = bodyHeight - winHeight - scrollTopPosition + layerHeight;
        layerInit = true;
    }

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

$(window).scroll(function() {
    window.requestAnimationFrame(updateLayerPosition);
});

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