je
jquery.easypin
npm i jquery.easypin
je

jquery.easypin

Pinning clickable messages/notes to images

by Ahmet

1.0.9 (see all)License:MITTypeScript:Not Found
npm i jquery.easypin
Readme

jQuery easypin

Simple and fast image pinning plugin. There are dependencies with the library jQuery easing plugin. Supported lowest jQuery version 1.8

DEMO

Demo Page 1 (responsive)

Demo Page 2

Demo Page 3

Quick Start

bower install

bower install jquery.easypin

npm install

npm install jquery.easypin

Load libraries

First, include the jQuery and jQuery easing plugin javascript files.

<script src="jquery.min.js"></script>
<script src="jquery.easing.min.js"></script>
<script src="jquery.easypin.min.js"></script>

Pin picture:

<img src="example.jpg" class="pin" width="800" easypin-id="example_image1" />
optiontypedescription
easypin-idattributeIt will be the default value if not defined

Dialog window for pin contents

<div class="easy-modal" style="display:none;" modal-position="free">
    <form>
        type something: <input name="content" type="text">
        <input type="button" value="save pin!" class="easy-submit">
    </form>
</div>
optiontypedescription
easy-submitclassClass must be defined to close the dialog window
modal-positionattributeDialog window free position (default: none)

Popover

<div style="display:none;" width="130" shadow="true" popover>
    <div style="width:100%;text-align:center;">{[content]}</div>
</div>
optiontypedescription
popoverattributePopover initializer attribute (MUST)
widthattributePopover width size (default: 200px)
shadowattributePopover show style (default: false)

Initialize the pictures:

// Back-end pin process
$('.pin').easypin();

To access the coordinates after pinning:

var $instance = $('.pin').easypin({
    done: function(element) {
        return true;
    }
});

// set the 'get.coordinates' event
$instance.easypin.event( "get.coordinates", function($instance, data, params ) {

    console.log(data, params);

});

Then you can run this event with a button click event

<input class="coords" type="button" value="Get coordinates!" />
$( ".coords" ).click(function(e) {
    $instance.easypin.fire( "get.coordinates", {param1: 1, param2: 2, param3: 3}, function(data) {
        return JSON.stringify(data);
    });
});

We pass parameters when calling the above coordinate the event. Before the callback to run.

Click for .easypin({}) options

.easypinShow()

We do first pin on the picture, now we show these pins to users on user interface.

Pin image:

<img src="example.jpg" class="pin" width="800" easypin-id="example_image1" />

Note: If you want to get the width of the parent element's do not need define

Pin container and popover template:

<div style="display:none;" easypin-tpl>
    <popover>
        <div style="width:140px;height:auto;background-color:orange;">
            {[content]}
        </div>
    </popover>

    <marker>
        <div style="border:solid 1px #000;width:20px;height:20px;background-color:red;">&nbsp;</div>
    </marker>
</div>
optiontypedescription
easypin-tplattributeMarker and Popover container element
popoverhtml tagPopover container element
markerhtml tagMarker container element

and run the .easypinShow() method:

$('.pin').easypinShow({
    data: {
            "example_image1":{
            "0":{
                "content":"Hello World!",
                "coords":{
                    "lat":"530",
                    "long":"179"
                }
            },
            "canvas":{
                "src":"example.jpg","width":"800","height":"562"
            }
        }
    }
});

That's it!

.easypin({}) options

optiontypedescription
initobject or json stringinitialize the pin coordinates
markerSrcstringChange the default marker image
modalWidthstring/numericChange the default modal width (default: 200px)
editSrcstringChange the default edit button image
deleteSrcstringChange the default delete button image
popoverfunctions into objectset callback all template variables
popoverStyleobjectpopover styles (it just pass to jquery .css() method of the object)
limitintegerlimited pin (default 0)
exceededfunctionlimit exceeded event
dropfunctionpin dropped event
dragfunctionpin dragging event
donefunctionclosing of the dialog window is depend to this function

init

Initialize the pin coordinates.

$('.pin').easypin({
    init: {
        "example_image1":{
            "0":{
                "content":"Captan America",
                "coords":{
                    "lat":"530",
                    "long":"179"
                }
            },
            "canvas":{
                "src":"example.jpg","width":"1000","height":"562"
            }
        }
    }
});

markerSrc

Change the default marker image

$('.pin').easypin({
    markerSrc: 'path/or/url/example-marker.jpg'
});

modalWidth

Change the default modal width

$('.pin').easypin({
    modalWidth: 300
});

editSrc

Change the default edit button image

$('.pin').easypin({
    editSrc: 'path/or/url/example-edit.jpg'
});

deleteSrc

Change the default delete button image

$('.pin').easypin({
    deleteSrc: 'path/or/url/example-delete.jpg'
});

popover

Set callback all template variables

$('.pin').easypin({
    popover: {
        content: function(value) {
            return value.replace(/\s+/g, ' ');
        }
    }
});

It content variable is form input name

popoverStyle

Popover styles (it just pass to jquery .css() method)

$('.pin').easypin({
    popover: {
        content: function(value) {
            return value.replace(/\s+/g, ' ');
        }
    },
    popoverStyle: {
        'background-color': 'orange',
        'color': 'black'
    }
});

limit

Limited pin (default 0) 0 for limitless

$('.pin').easypin({
    limit: 2
});

Set 0 for limitless pin

exceeded()

Limit exceeded event

$('.pin').easypin({
    limit: 2,
    exceeded: function(type) {
        // do samething...
    }
});

drop()

Pin dropped event

$('.pin').easypin({
    drop: function(x, y, element) {
        console.log(x, y, element);
    }
});

drag()

Pin dragging event

$('.pin').easypin({
    drop: function(x, y, element) {
        console.log(x, y, element);
    },
    drag: function(x, y, element) {
        console.log(x, y, element);
    }
});

done()

Closing of the dialog window is depend to this function. Return true if the result dialog window will be closed

$('.pin').easypin({
    done: function(element) {

        return true;

    }
});

Will return the form objects if the dialog box contains the form objects. Otherwise the dialog box will return the objects

.easypinShow({}) options

optiontypedescription
dataobject or json stringPin data and coordinates
responsiveboolean (default: false)Reponsive canvas for mobile
variablesfunctions into objectSet callback all template variables
popoverobjectThere is two child element. show/animate (default: false)
eachfunctionEach element works before replacing
errorfunctionProcess error event
successfunctionProcess success event

data

Pin data and coordinates

$('.pin').easypinShow({
    data: {
        "example_image1":{
            "0":{
                "content":"Hello World!",
                "coords":{
                    "lat":"530",
                    "long":"179"
                }
            },
            "canvas":{
                "src":"example.jpg","width":"800","height":"562"
            }
        }
    }
});

responsive

Reponsive canvas for mobile (dfault: false)

$('.pin').easypinShow({
    data: {/*json object*/},
    responsive: true
});

variables

Reponsive canvas for mobile

$('.pin').easypinShow({
    data: {/*json object*/},
    responsive: true,
    variables: {
        content: function(canvas_id, pin_id, data) {

            // do something...
            // and return
            return data;
        }
    }
});

content is a template variable.

popover

There is two child element. show/animate (default: false)

$('.pin').easypinShow({
    data: {/*json object*/},
    responsive: true,
    variables: {
        content: function(canvas_id, pin_id, data) {

            // do something...
            // and return
            return data;
        }
    },
    popover: {
        show: true,
        animate: true
    }
});

each()

Each element works before replacing.

$('.pin').easypinShow({
    data: {/*json object*/},
    responsive: true,
    variables: {
        content: function(canvas_id, pin_id, data) {

            // do something...
            // and return
            return data;
        }
    },
    popover: {
        show: true,
        animate: true
    },
    each: function(index, data) {

        // do something
        // and return
        return data;
    }
});

### error() Process error event

$('.pin').easypinShow({
    data: {/*json object*/},
    responsive: true,
    variables: {
        content: function(canvas_id, pin_id, data) {

            // do something...
            // and return
            return data;
        }
    },
    popover: {
        show: true,
        animate: true
    },
    each: function(index, data) {

        // do something
        // and return
        return data;
    },
    error: function(e) {
        // do something...
    }
});

### success() Process success event

$('.pin').easypinShow({
    data: {/*json object*/},
    responsive: true,
    variables: {
        content: function(canvas_id, pin_id, data) {

            // do something...
            // and return
            return data;
        }
    },
    popover: {
        show: true,
        animate: true
    },
    each: function(index, data) {

        // do something
        // and return
        return data;
    },
    error: function(e) {
        // do something...
    },
    success: function() {

    }
});

Downloads/wk

10

GitHub Stars

131

LAST COMMIT

6yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

6

OPEN PRs

0
VersionTagPublished
1.0.9
latest
6yrs ago
No alternatives found
No tutorials found
Add a tutorial