Position calculation is incorrect for horizontial to vertical transitions

[mcicoria]

Here's an example: https://jsfiddle.net/9kw4zfsy/2/

The horizontal position of the second trip is incorrect. You can resize the window and it will redraw in the correct position.

I've found the culprit in setTripBlockPosition. The problem stems from a previous tip contents wrapping at a different number of lines than the new content. When this happens the width of the new content in the previous element is used to calculate the new cssHorizontal parameter.

The style resets that happen here:

// reset styles first
if (horizontalOrVertical === 'horizontal') {
    $tripBlock.css({
          left: '',
          right: '',
          marginLeft: ''
     });
    ...

else if (horizontalOrVertical === 'vertical') {
    // reset styles first
    $tripBlock.css({
         top: '',
         bottom: '',
         marginTop: '',
    });

Need to actually happen before these two attributes are pulled from $tripBlock:

var blockWidth = $tripBlock.outerWidth();
var blockHeight = $tripBlock.outerHeight();

The fixed function:

    setTripBlockPosition: function(o, horizontalOrVertical) {
      var $tripBlock = this.$tripBlock;

       // need to reset styles before we start grabbing attributes
       if (horizontalOrVertical === 'horizontal') {
        // reset styles first
        $tripBlock.css({
          left: '',
          right: '',
          marginLeft: '',
        });
      } else if (horizontalOrVertical === 'vertical') {
        // reset styles first
        $tripBlock.css({
          top: '',
          bottom: '',
          marginTop: '',
        });
      }

      var $sel = $(o.sel);
      var selWidth = $sel && $sel.outerWidth();
      var selHeight = $sel && $sel.outerHeight();
      var blockWidth = $tripBlock.outerWidth();
      var blockHeight = $tripBlock.outerHeight();
      var arrowHeight = 10;
      var arrowWidth = 10;
      var cssHorizontal;
      var cssVertical;

      switch (o.position) {
        case 'screen-center':
          cssHorizontal = '50%';
          cssVertical = '50%';
          break;
        case 'screen-ne':
        case 'screen-se':
        case 'screen-nw':
        case 'screen-sw':
          cssHorizontal = this.CONSTANTS.TRIP_BLOCK_OFFSET_HORIZONTAL;
          cssVertical = this.CONSTANTS.TRIP_BLOCK_OFFSET_VERTICAL;
          break;
        case 'e':
          cssHorizontal = $sel.offset().left + selWidth + arrowWidth;
          cssVertical = $sel.offset().top - ((blockHeight - selHeight) / 2);
          break;
        case 's':
          cssHorizontal = $sel.offset().left + ((selWidth - blockWidth) / 2);
          cssVertical = $sel.offset().top + selHeight + arrowHeight;
          break;
        case 'w':
          cssHorizontal = $sel.offset().left - (arrowWidth + blockWidth);
          cssVertical = $sel.offset().top - ((blockHeight - selHeight) / 2);
          break;
        case 'n':
          /* falls through */
        default:
          cssHorizontal = $sel.offset().left + ((selWidth - blockWidth) / 2);
          cssVertical = $sel.offset().top - arrowHeight - blockHeight;
          break;
      }

      if (horizontalOrVertical === 'horizontal') {

        switch (o.position) {
          case 'screen-center':
            $tripBlock.css({
              left: cssHorizontal,
              marginLeft: -0.5 * blockWidth
            });
            break;
          case 'screen-se':
          case 'screen-ne':
            $tripBlock.css({
              right: cssHorizontal
            });
            break;
          case 'screen-sw':
          case 'screen-nw':
          case 'e':
          case 's':
          case 'w':
          case 'n':
            /* falls through */
          default:
            $tripBlock.css({
              left: cssHorizontal
            });
            break;
        }
      }
      else if (horizontalOrVertical === 'vertical') {

        switch (o.position) {
          case 'screen-center':
            $tripBlock.css({
              top: cssVertical,
              marginTop: -0.5 * blockHeight
            });
            break;
          case 'screen-sw':
          case 'screen-se':
            $tripBlock.css({
              bottom: cssVertical
            });
            break;
          case 'screen-nw':
          case 'screen-ne':
          case 'e':
          case 's':
          case 'w':
          case 'n':
            /* falls through */
          default:
            $tripBlock.css({
              top: cssVertical
            });
            break;
        }
      }
    }

Let me know if you'd like a pull request.

[EragonJ]

Can you attach a jsfiddle with your solution on it ? I am willing to give it a try :)

[mcicoria]

The jsfiddle is attached to the pull request #135