Modal with handlers

by Farzad Cyrus

HTML

<button id="place-button-1" class="button button-primary" data-toggle="modal" data-toggle-title="Hello" data-toggle-message="Lorem ipsum dolor novara lipsimuera. This is the message for the delete button.">Run Report</button>
                                                            <button id="place-button-3" class="button button-success" data-toggle="modal" data-toggle-close="false" data-toggle-target="#place-modal-1" data-toggle-size="large" data-toggle-title=" ">Add Place Geofence<em class="icon icon-right"><i class="fi fi-plus"></i></em></button>
                                                            <button id="place-button-2" class="button button-danger" data-toggle="modal" data-toggle-target="#place-modal-2" data-toggle-title="Delete a Place">Delete<em class="icon icon-right"><i class="fi fi-delete"></i></em></button>
                                                            
                                                            
                                                            

<div class="modal modal-large" id="place-modal-2">
        <div class="modal-container">
            <div class="modal-content">
                <h3 class="modal-title">Deleting a place from the list</h3>
                <p>Please make sure you know what you're doing as we can't revert back any changes once is done.</p>
            </div>
            <div class="modal-footer">
                <div class="button-group">
                    <button class="button" data-modal-confirm>Save</button>
                    <button class="button" data-modal-cancel>Cancel</button>
                </div>
            </div>
        </div>
    </div>

JavaScript

"use strict";

function stylishModal(options) {
    "use strict";

    // NOOP
    var noop = function () {
        console.log("This method is served by the modal.")
    };

    // OPTIONS
    this.options = {
        selector: noop,
        onConfirm: noop,
        onCancel: noop
    };
    this.options = $.extend(this.options, options);

    // HANDLERS
    this.handlers = this.options.handlers;
    this.handlersCount = this.handlers.length;
    this.hasHandlers = this.handlersCount >= 1 ? true : false;
    

    // TRIGGER & TARGET SELECTORS
    this.$trigger = $('[data-toggle="modal"]');

    // MARKUP
    this.markup = {
        modal: '<div class="modal modal-default">',
        container: '<div class="modal-container"></div>',
        header: '<div class="modal-header"></div>',
        content: '<div class="modal-content"></div>',
        footer: '<div class="modal-footer"><div class="button-group button-round"></div></div>',
        close: '<button class="button button-large button-icon modal-close"><em class="icon"><i class="fi-close"></i></em></button>',
        title: '<h3 class="modal-title"></div>',
        confirm: '<button class="button button-primary" data-modal-confirm>Confirm</button>',
        cancel: '<button class="button button-secondary" data-modal-cancel>Cancel</button>'
    };


    var self = this;

    this.$trigger.each(function (i, e) {

            // TRIGGER SELECTOR WITH CUSTOM ATTRIBUTES
        var $trigger = $(e),
            $target = $trigger.filter('[data-toggle-target]'),
            $message = $trigger.filter('[data-toggle-message]'),
            $close = $trigger.filter('[data-toggle-close]'),
            $title = $trigger.filter('[data-toggle-title]'),
            $size = $trigger.filter('[data-toggle-size]'),

            // VALUES
            target = $target.data('toggle-target'),
            message = $message.data('toggle-message'),
            close = $close.data('toggle-close'),
            title =...