flot-thumb-plugin

This plugin is used for creating thumbs and interacting with them by mouse move or touch events.

Public Methods

The following functions are exposed as public API and can be accessed using jquery $.thumb:

createSVGLayer (placeholder, eventHolder) creates a div with class .flot-thumbs that contains an SVG layer. The placeholder parameter is the parent of this new div, meanwhile the generated events are dispatched to the eventHolder.

createThumb (options) creates an svg group element inside svgRoot which represents the thumb.

var options = {
    size: 20, // Default is 20
    x: 0, // Default is 0
    y: 0, // Default is 0
    svgRoot: // svg element 
    shape: 'bottom', // One of "top", "left", "bottom", or "right". Default is "bottom"
    abbreviation: '', // Default is ''
    classList: ['draggable'], // Default is ['draggable']
    constraintFunction: undefined, // Default is undefined
}

The element center position is given by 'x' and 'y' parameters and 'size'. The svgRoot parameter is an svg element which will become the parentNode of the thumb. The optional parameter 'shape' is used to change thumb's icon. The optional parameter 'abbreviation' is used to show a label over thumb. The optional parameter 'classList' is used to programmatically apply classes to the thumb on creation The optional parameter 'constraintFunction' describes constraints for thumb movement. A constraint function can be described like in the following example:

var verticalConstraint = function (mouseX, mouseY, currentX, currentY) {
    return [currentX, mouseY];
}

updateComputedXPosition (thumb, position) can be used to update the x position of the thumb element so that it will have the value described by position. The x position of an svg circle element is computed based on cx value and the translation matrix. This function is not a triggering event for cursors.

updateComputedYPosition (thumb, position) can be used to update the x position of the thumb element so that it will have the value described by position. The y position of an svg circle element is computed based on cy value and the translation matrix. This function is not a triggering event for cursors.

setHidden (thumb, hidden) hides or shows the thumb element

shutdown (svgRoot) unbinds the event listeners defined on svgRoot layer for mousemove, touchmove, mouseup and touchend events.

Events

The events handled by this plugin are mousedown, touchstart, mousemove, touchmove, mouseup and touchend. On mousemove or touchmove, the matrix of the selected svg element will change according to the position touched and the constraint function of the element, in case it exists.

npm