channel.js 2.56 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');

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'
    });
});
var updateLayerPosition = (function() {
   var init = false;
   return function() {
     var winHeight = window.innerHeight;
     var bodyHeight = $doc.height();
     var scrollTopPosition = $win.scrollTop();
     var layerHeight = $appFloatLayer.height();
     var layerPaddingTop = parseInt($appFloatLayer.css('padding-top'));
     var layerPaddingBottom = parseInt($appFloatLayer.css('padding-bottom'));
     var newPosition;
     if(init){
       newPosition = bodyHeight - winHeight- scrollTopPosition;
     }else{
       init = true;
       newPosition = bodyHeight - winHeight - scrollTopPosition + layerHeight + layerPaddingTop + layerPaddingBottom;
     }
     $appFloatLayer.css({
       'position': 'relative',
       'bottom': newPosition + 'px'
     });
   };
})();

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


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