#jquery-image-decals

##demo

I have a running version of the plugin on http://lab.rndm.de/jquery-image-decals/.

##usage

To use jquery-image-decals you have to call the imageDecals function on a jquery element.

$('.foobar').imageDecals(/* options */);

##options

defaults:

{
    maxDecals: -1,
    showActions: false,
    actionBar: undefined,
    actions: [],
    showPalette: false,
    clickable: false,
    draggable: false,
    decalTagIsImg: false,
    scaleDecalDimension: false,
    domain: {
        width: 100,
        height: 100
    },
    decals: [],
    data: [],
    events: {
        onDecalClicked: function(){}
    }
}

###maxDecals Number

Number of maximum possible amount of decals. Use -1 to disable this limit.

###showPalette Boolean

Enable or disable the palette.

###clickable Boolean

Enable or disable click on a decal.

###draggable Boolean

Enable or disable drag'n'drop of a decal.

###scaleDecalDimension Boolean

Set to true if you want to scale the width and height of the decals depending on the calculated scale.

###decalTagIsImg Boolean

Set to true if you want the decals to be displayed as <img>, not <span>. This can be useful if you want to print the page. Most browsers ignore background-image properties and only print <img> elements.

###domain Object

This object contains the input domain of the real image. That means it contains the width and height of the image where the original decals where collected. This is required to allow positioning the decals correct on different image sizes.

###decals Array

This is a lookup map for the plugin to generate the decal palette.

In this example the decals map is set to contain one item, 'foobar'. The palette uses the src to display the image for all 'foobar' decals. In addition it acts as a default for placed decals.

decals = {
    'foobar': {
        key: 'foobar',
        src: 'http://placehold.it/100x100',
        title: 'foobar',
        width: 100,
        height: 100,
        left: 0,
        top: 0
    }
}

###data Array

The data property allows to prepopulate the canvas with decals. It uses the key property to search in the decals object for required data. Using left and top it allows to position the decal.

data = [{
    "key":"foobar",
    "width":100,
    "height":100,
    "left":213,
    "top":145
}]

###events Object

Currently there is one supported event that calls a callback from the events object.

####onDecalClicked Function

This function is called if the user clicks on a placed decal. The function is called with 2 parameters and the scope of the event.target.

events: {
    onDecalClicked: function (event, decal) {
        // react on decal clicked event
    }
}

##requirements

Jquery-decal-composer depends on jquery and jqueryui-draggable.

This plugin uses some es5 functions ( with possible polyfills):

• Array.forEach ( via dev.mozilla )
• Array.every ( via dev.mozilla )
• JSON.stringify ( via json3 or json2 )
• JSON.parse ( via json3 or json2 )