Изменения в спецификациях - Как изменить мою логику JavaScript? - PullRequest
Новая
       27

Изменения в спецификациях - Как изменить мою логику JavaScript?

1 голос
/ 03 января 2012

Это, вероятно, довольно просто, но в настоящее время я не могу придумать хороший способ сделать это (имея полный пердеж мозга).

В настоящее время у меня есть скрипт, который извлекает видео из канала YouTube и отображает текущее видео и 3 миниатюры внизу со стрелкой влево и вправо для перехода к предыдущим или следующим трем пальцам и выбора другого видео для просмотра.

Спецификация только что изменилась (снова), и теперь ей нужно переместить только одну влево или вправо, когда стрелка нажата вместо 3.

т.е. :

Текущая логика: 

<<    [1] [2] [3]  >>  **click right** << [4] [5] [6] >>

Желаемая логика 

<<    [1] [2] [3]  >>  **click right** << [2] [3] [4] >>

Код: 

var youtube = 
{
    author    : "XXXXXXX",
    pageNr    : 0,
    pageSize  : 3,
    pageCount : 1,
    videos    : [],
    gets      : function()
    {
        var _this = this;
        var url = "http://gdata.youtube.com/feeds/api/videos?author=" + this.author + "&start-index=" + (this.pageNr * this.pageSize + 1) + "&max-results=" + this.pageSize + "&v=2&orderby=published&alt=json-in-script&fields=openSearch:totalResults,entry(id,title,media:group(media:thumbnail,yt:videoid),yt:statistics)";
        $.getJSON(url + "&callback=?",
        function(response)
        {
            _this.show(response.feed.entry);
        });
    },
    start     : function()
    {
        var _this = this;
        var url = "http://gdata.youtube.com/feeds/api/videos?author=" + this.author + "&start-index=" + (this.pageNr * this.pageSize + 1) + "&max-results=" + this.pageSize + "&v=2&orderby=published&alt=json-in-script&fields=openSearch:totalResults,entry(id,title,media:group(media:thumbnail,yt:videoid),yt:statistics)";
        $.getJSON(url + "&callback=?",
        function(response)
        {
            _this.pageCount = Math.floor(response.feed.openSearch$totalResults.$t / 3);
            _this.show(response.feed.entry);
            $(".video-thumb").eq(0).click();
        });
    },
    next      : function()
    {
        if(this.pageNr >= this.pageCount){ return; }
        this.pageNr++;

        $(".video-thumb-picture-wrapper,#slider TD").removeClass("selected");

        this.gets();
    },
    prev      : function ()
    {
        if(this.pageNr <= 0){ return; }
        this.pageNr--;

        $(".video-thumb-picture-wrapper,#slider TD").removeClass("selected");

        this.gets();
    },
    show      : function(videos)
    {
        var _this = this;
        _this.videos = [];
        $(videos).each(function(index,video)
        {
            _this.videos.push(
            {
                id         : video.media$group.yt$videoid.$t,
                title      : video.title.$t,
            viewCount  : (video.yt$statistics && video.yt$statistics.viewCount ? video.yt$statistics.viewCount : 0),
            thumbnails : video.media$group.media$thumbnail
        });
    });

    $(".video-thumb-picture").each(function(index,div)
    {
        var video = index < _this.videos.length ? _this.videos[index] : { id : "", title : "", viewCount : 0, thumbnails : [{ url : "" }]  };
        $(div)
        .css("background-image","url('" + video.thumbnails[0].url + "')")
        .parent().next().html(video.title)
        .parent().css("visibility",(index < _this.videos.length) ? "visible" : "hidden");
    });
}
};

var appId = '';
window.fbAsyncInit = function()
{
    FB.init(
    {
        appId  : appId,
        status : true,
        cookie : true,
        xfbml  : true
    });

    FB.Canvas.setAutoResize();
};

$(function()
{
        $(".arrow-left").click(function()
    {
        youtube.prev();
    });
    $(".arrow-right").click(function()
    {
        youtube.next();
    });
    youtube.start();

    $("#div-share").unbind('click').click(function()
    {
        FB.ui(
        {
        method : 'feed',
        name   : '',
        link   : ''
        });
    });

    $(".video-thumb").click(function()
    {
        var div = $(this);
        if(div.css("visibility") == "hidden"){ return; }

        $(".video-thumb-picture-wrapper,#slider TD").removeClass("selected");
        div.children().first().addClass("selected").parent().parent().addClass("selected");

        var videoNr = parseInt(div.attr("videonr"));

        var video = youtube.videos[videoNr];
        var html = '<object id="div-video" style="height: 270px; width: 425px" width="425">';
        html += '<param name="play" value="true">';
        html += '<param name="wmode" value="transparent">';
        html += '<param name="movie" value="http://www.youtube.com/v/' + video.id + '?autohide=1&autoplay=1&fs=1&feature=player_embedded" />';
        html += '<param name="allowFullScreen" value="true" />';
        html += '<param name="allowScriptAccess" value="always" />';
        html += '<embed src="http://www.youtube.com/v/' + video.id + '?autohide=1&autoplay=0&fs=1&feature=player_embedded" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="270" wmode="transparent"></embed>';
        html += '</object>';
        $("#div-video").html(html);

        $("#div-video-title").html(video.title);
        $("#b-video-views").html(video.viewCount);

        $("#div-like").html('<fb:like href="http://www.youtube.com/watch?v=' + video.id + '" show_faces="false" width="350"></fb:like>');
        FB.XFBML.parse(document.getElementById('div-like'));

        $("#div-share").unbind('click').click(function()
        {
                FB.ui(
            {
                method : 'feed',
                name   : video.title,
                link   : ''
            });
        });
     });
 });

Ответы [ 2 ]

1 голос
/ 03 января 2012

In gets () и start (): 

"&start-index=" + (this.pageNr + 1)

В начале (): 

_this.pageCount = (response.feed.openSearch$totalResults.$t > _this.pageSize) ?
  (response.feed.openSearch$totalResults.$t - _this.pageSize) : (0);

Как упоминает Афеус, я бы, вероятно, переименовал pageNr в curIndex (или что-то в этом роде).

1 голос
/ 03 января 2012

звучит так, как будто вы хотите, чтобы следующий был сингл, а не страница. В этом случае вы, вероятно, захотите отслеживать текущий индекс и увеличивать его. Вы можете сделать это с помощью математики с размером страницы и стартовой страницей, но было бы намного проще просто отслеживать текущий индекс. 

this.curIndex = 1;
..."&start-index=" + (++this.curIndex)...

Кроме того, вы можете изменить стартовую страницу только тогда, когда curIndex кратен размеру страницы.

...