Question

我创建了一个jQuery插件来创建水平时间轴。现在，我尝试添加从右到左（RTL）选项。我设法交换了大多数功能，所以它从右到左移动，但是我在努力使时间轴滚动按预期工作。我做了一个jsfiddle

我坚持的那段代码是：

Timeline.prototype._updateTimelinePosition = function (event, timelineComponents) {
    if (this.settings.useRTL == false) {
            // Get the css left value of the targeted event date
        var eventLeft = Number(event.css('left').replace('px', '')),
            // Get the width value of the .events-wrapper
            timelineWidth = timelineComponents['timelineWrapper'].width(),
            // Get the width value of the events (previously set)
            timelineTotalWidth = timelineComponents['eventsWrapper'].width();

        this._translateTimeline(timelineComponents, - eventLeft + timelineWidth/2, timelineWidth - timelineTotalWidth); 
    }
    else {
        /* RTL */

            // Get the css left value of the targeted event date
        var eventRight = Number(event.css('right').replace('px', '')),
            // Get the width value of the .events-wrapper
            timelineWidth = timelineComponents['timelineWrapper'].width(),
            // Get the width value of the events (previously set)
            timelineTotalWidth = timelineComponents['eventsWrapper'].width();

        // This line here...
        this._translateTimeline(timelineComponents, - eventRight + timelineWidth/2, timelineWidth - timelineTotalWidth);    

    }    
}

Timeline.prototype._translateTimeline = function (timelineComponents, value, totalTranslateValue) {
    // Only negative translate value
    if (this.settings.useRTL == false) var value = (value > 0) ? 0 : value;

    /* RTL*/
    // This line here...
    else var value = (value > 0) ? 0 : value;

    // Do not translate more than timeline width
    if (this.settings.useRTL == false) 
        value = (!(typeof totalTranslateValue === 'undefined') &&  value < totalTranslateValue ) ? totalTranslateValue : value;

    /* RTL */
    // This line here...
    else value = (!(typeof totalTranslateValue === 'undefined') && value < totalTranslateValue ) ? totalTranslateValue : value;


    this._setTransformValue(timelineComponents['eventsWrapper'], 'translateX', value+'px');

    // Disable the buttons if necessary
    this._buttonDisable(timelineComponents, value, totalTranslateValue);    
}

我在RTL部分评论“此处的行”的地方是我坚持使用的行。我尝试了很多代码变体：围绕所有变量交换，围绕所有操作数交换，似乎没有任何正常工作。

基本上我想要的是从左到右功能从右到左翻转，这两者都可以在jsfiddle中找到。

行：this._translateTimeline(timelineComponents, - eventRight + timelineWidth/2, timelineWidth - timelineTotalWidth);中的_updateTimelinePosition是转换/移动时间轴的函数调用，计算转换值作为第二个参数。时间轴使用transform: translate() CSS来翻译/移动时间轴。我无法获得从右到左正确计算的结果。

期望：

在RTL时间轴中，单击上一个/下一个和事件按钮时，该时间轴应该会自动滚动到正确的选定事件。
时间轴应从右侧开始，但有时会计算
这个错误。

从右到左的水平时间轴无法正常工作

0 个答案: