Pointy

Features

• Pointy will create an arrow, at any angle, pointing from the pointer to the pointee (Pointy).
• Minimal setup with only one required option - setting the pointer.
• The background & border color of the arrow will automatically be matched to the pointer, unless overriding options are set.
• Additional options allow setting the arrow base width & border width.

Notes

• jQuery v1.7+ is the only dependency.
• jQuery UI draggable is used in these demos, but any draggable plugin may be used.
• The outer width & height of the elements is used in calculation, so any margin on the pointer will offset the arrow placement.
• The outer width does not include margins, in case the element is positioned using an "auto" margin.
• Canvas is used to add an arrow which points from one element to another, so there is limited css effect on the arrow background & border colors.

To Do

• Allow multiple pointers per pointee.

Basic Setup

<script src="js/jquery.min.js"></script>
<!-- using jQuery UI draggable -->
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.pointy.js"></script>
<script>
$(function(){

  // $pointer points at $pointy
  var $pointer = $('.label.pointer'),

    // initialize pointy (showing all options; but not all defaults)
    $pointy = $('.repo-name').pointy({
      pointer      : $pointer,
      arrowWidth   : 10, // width of pointer base
      borderWidth  : 1,  // pointer stroke width
      flipAngle    : 45, // angle @ which to flip pointer to a closer side
      defaultClass : '', // additional class name added to the pointer & the arrow (canvas)
      activeClass  : 'pointy-active', // class added to base & pointer on updating

      // optional; if not set, plugin will attempt to match the base color
      borderColor     : null,
      backgroundColor : null,

      // tweaks
      useOffset : null
    });

  // Using jQuery UI draggable (any draggable code will work)
  $label.draggable({
    containment : '.top',
    drag : function() {
      $pointy.trigger('pointy-update');
    }
  });

});
</script>

Options

• pointer
  • jQuery object pointing to the element at the base of the arrow, usually a draggable element.
  • Currently, only one pointer is allowed - multiple pointers planned for a later release.
  • Type: jQuery object
  • Default: null
• arrowWidth
  • Width of the arrow base, in pixels.
  • The base of the arrow will be set to this number of pixesl wide; the tip will be a single pixel.
  • The arrow is drawn on a strategically positioned canvas element.
  • Type: Number
  • Default: 20
• borderWidth
  • Stroke border width of the arrow, in pixels.
  • Type: Number
  • Default: 1
• defaultClass
  • Extra class name(s) added to both the arrow & the base (draggable) element on initialization.
  • If you add more than one class name, use a space to separate the class names.
  • Type: String
  • Default: '' (empty string)
• activeClass
  • Class name added to both the arrow & the base (draggable) element.
  • The basic demo takes advantage of this option by adding a "pointy-active" class which sets the z-index of the last moved base & arrow group to keep it above other pointy element groups.
  • Type: String
  • Default: 'pointy-active'
• flipAngle
  • Angle at which the the arrow base flips to the side closest to the pointee element.
  • This option only applies when the pointer (draggable element) is NE, SE, SW or NW of the pointee element.
  • Type: Number
  • Default: 45
• borderColor
  • Optional setting for the arrow border color.
  • If this option is null, then pointy matches the base (draggable element) border color.
  • Type: String
  • Default: null
• backgroundColor
  • Optional setting for the arrow background color.
  • If this option is null, then pointy matches the base (draggable element) background color.
  • Type: String
  • Default: null
• useOffset
  • Override Pointy's choice of using jQuery's offset() or postion() to determine the elements coordinates.
  • If this option is null, then Pointy looks for a set margin on the pointee element, if there isn't one, then Pointy uses the element's offset(), otherwise the position() is used.
  • Set this option to either true or false, whichever one works, if Pointy looks like it's having a seizure.
  • Type: Boolean
  • Default: null

Methods

• Update

  The pointy arrow needs to be updated after the pointer (draggable) element is moved

  Pointy data is stored in the pointee (stationary) element, so use this method to reposition & redraw the arrow:

  // $('.pointy') is the pointee (stationary) element
  $('.pointy').trigger('pointy-update');

• Refresh

  If the pointee (stationary) element moves, or was resized then you'll need to refresh pointy to update the internal constants.

  Refreshing pointy includes an update, so you only need to trigger the refresh method:

  // $('.pointy') is the pointee (stationary) element
  $('.pointy').trigger('pointy-refresh');

  or you could simply trigger a window resize:

  $(window).resize();

• Hide

  To hide the pointy arrow when the pointee or pointer elements get hidden, use this method:

  // $('.pointy') is the pointee (stationary) element
  $('.pointy').trigger('pointy-hide');

• Show

  To show the pointy arrow after hiding, use this method:

  // $('.pointy') is the pointee (stationary) element
  $('.pointy').trigger('pointy-show');

• Destroy

  To remove pointy, call the destroy method as follows:

  // $('.pointy') is the pointee (stationary) element
  $('.pointy').trigger('pointy-destroy');