Nervous Parrot Muttering

    jquery.easypin

    1.0.9 • Public • Published

    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" />
    option type description
    easypin-id attribute It 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>
    option type description
    easy-submit class Class must be defined to close the dialog window
    modal-position attribute Dialog 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>
    option type description
    popover attribute Popover initializer attribute (MUST)
    width attribute Popover width size (default: 200px)
    shadow attribute Popover 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>
    option type description
    easypin-tpl attribute Marker and Popover container element
    popover html tag Popover container element
    marker html tag Marker 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

    option type description
    init object or json string initialize the pin coordinates
    markerSrc string Change the default marker image
    modalWidth string/numeric Change the default modal width (default: 200px)
    editSrc string Change the default edit button image
    deleteSrc string Change the default delete button image
    popover functions into object set callback all template variables
    popoverStyle object popover styles (it just pass to jquery .css() method of the object)
    limit integer limited pin (default 0)
    exceeded function limit exceeded event
    drop function pin dropped event
    drag function pin dragging event
    done function closing 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

    option type description
    data object or json string Pin data and coordinates
    responsive boolean (default: false) Reponsive canvas for mobile
    variables functions into object Set callback all template variables
    popover object There is two child element. show/animate (default: false)
    each function Each element works before replacing
    error function Process error event
    success function Process 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() {
     
        }
    });

    Install

    npm i jquery.easypin

    DownloadsWeekly Downloads

    5

    Version

    1.0.9

    License

    MIT

    Last publish

    Collaborators

    • atayahmet