rulemgt-frontend/src/assets/common/js/popModal.js

   1 /*
   2  popModal - 1.21 [18.11.15]
   3  Author: vadimsva
   4  Github: https://github.com/vadimsva/popModal
   5  */
   6 /* popModal */
   7 ;(function ($) {
   8     $.fn.popModal = function (method) {
   9         var elem = $(this),
  10             elemObj,
  11             isFixed = '',
  12             closeBut = '',
  13             elemClass = 'popModal',
  14             overflowContentClass = '',
  15             asMenuClass,
  16             _options,
  17             animTime,
  18             effectIn = 'fadeIn',
  19             effectOut = 'fadeOut',
  20             bl = 'bottomLeft',
  21             bc = 'bottomCenter',
  22             br = 'bottomRight',
  23             lt = 'leftTop',
  24             lc = 'leftCenter',
  25             rt = 'rightTop',
  26             rc = 'rightCenter',
  27             currentID;
  28
  29         var methods = {
  30             init: function (params) {
  31                 var _defaults = {
  32                     html: '',
  33                     placement: bl,
  34                     showCloseBut: true,
  35                     onDocumentClickClose: true,
  36                     onDocumentClickClosePrevent: '',
  37                     overflowContent: false,
  38                     inline: true,
  39                     asMenu: false,
  40                     beforeLoadingContent: 'Please, wait...',
  41                     onOkBut: function () {
  42                         return true;
  43                     },
  44                     onCancelBut: function () {
  45                     },
  46                     onLoad: function () {
  47                     },
  48                     onClose: function () {
  49                     }
  50                 };
  51                 _options = $.extend(_defaults, params);
  52
  53                 if ($('body').find('.' + elemClass).length !== 0 && $('body').find('.' + elemClass).attr('data-popmodal_id') == elem.attr('data-popmodal_id')) {
  54                     popModalClose();
  55                 } else {
  56                     $('html.' + elemClass + 'Open').off('.' + elemClass + 'Event').removeClass(elemClass + 'Open');
  57                     $('.' + elemClass + '_source').replaceWith($('.' + elemClass + '_content').children());
  58                     $('.' + elemClass).remove();
  59
  60                     if (elem.css('position') == 'fixed') {
  61                         isFixed = 'position:fixed;';
  62                     }
  63                     if (_options.asMenu) {
  64                         asMenuClass = ' ' + elemClass + '_asMenu';
  65                     } else {
  66                         asMenuClass = '';
  67                         if (_options.showCloseBut) {
  68                             closeBut = $('<button type="button" class="close">&times;</button>');
  69                         }
  70                         if (_options.overflowContent) {
  71                             overflowContentClass = ' ' + elemClass + '_contentOverflow';
  72                         } else {
  73                             overflowContentClass = '';
  74                         }
  75                     }
  76
  77                     currentID = new Date().getMilliseconds();
  78                     elem.attr('data-popmodal_id', currentID);
  79
  80                     var tooltipContainer = $('<div class="' + elemClass + ' animated" style="' + isFixed + '" data-popmodal_id="' + currentID + '"></div>');
  81                     var tooltipContent = $('<div class="' + elemClass + '_content' + overflowContentClass + asMenuClass + '"></div>');
  82                     tooltipContainer.append(closeBut, tooltipContent);
  83
  84                     if ($.isFunction(_options.html)) {
  85                         var beforeLoadingContent = _options.beforeLoadingContent;
  86                         tooltipContent.append(beforeLoadingContent);
  87                         _options.html(function (loadedContent) {
  88                             tooltipContent.empty().append(loadedContent);
  89                             elemObj = $('.' + elemClass);
  90                             getPlacement();
  91                         });
  92                     } else {
  93                         if ($.type(_options.html) == 'object') {
  94                             _options.html.after($('<div class="popModal_source"></div>'));
  95                         }
  96                         tooltipContent.append(_options.html);
  97                     }
  98                     if ($(window).width() <= 500) {
  99                         _options.inline = true;
 100                     }
 101
 102                     if (_options.inline) {
 103                         elem.after(tooltipContainer);
 104                     } else {
 105                         $('body').append(tooltipContainer);
 106                     }
 107
 108                     elemObj = $('.' + elemClass);
 109                     elemObj.css('height', method.html.outerHeight() + elemObj.marginBottom + elemObj.marginTop + elemObj.borderBottomWidth + elemObj.borderTopWidth + elemObj.paddingBottom + elemObj.paddingTop);
 110                     var elemObjFooter = elemObj.find('.' + elemClass + '_footer');
 111                     if (elemObjFooter.length != 0) {
 112                         elemObj.find('.' + elemClass + '_content').css({marginBottom: elemObjFooter.outerHeight() + 15 + 'px'});
 113                     }
 114
 115                     if (!$.isFunction(_options.html)) {
 116                         var htmlStr;
 117                         if ($.type(_options.html) == 'string') {
 118                             htmlStr = _options.html;
 119                         } else {
 120                             htmlStr = _options.html[0].outerHTML;
 121                         }
 122                     }
 123
 124                     if (_options.onLoad && $.isFunction(_options.onLoad)) {
 125                         _options.onLoad();
 126                     }
 127                     $(_options.html).trigger('load');
 128
 129                     elemObj.on('destroyed', function () {
 130                         if (_options.onClose && $.isFunction(_options.onClose)) {
 131                             _options.onClose();
 132                         }
 133                         $(_options.html).trigger('close');
 134                     });
 135
 136                     getPlacement();
 137
 138                     if (_options.onDocumentClickClose) {
 139                         $('html').on('click.' + elemClass + 'Event', function (event) {
 140                             $(this).addClass(elemClass + 'Open');
 141                             if (elemObj.is(':hidden')) {
 142                                 popModalClose();
 143                             }
 144                             var target = $(event.target);
 145                             if (!target.parents().andSelf().is('.' + elemClass) && !target.parents().andSelf().is(elem)) {
 146                                 var zIndex = parseInt(target.parents().filter(function () {
 147                                     return $(this).css('zIndex') !== 'auto';
 148                                 }).first().css('zIndex'));
 149                                 if (isNaN(zIndex)) {
 150                                     zIndex = 0;
 151                                 }
 152                                 if (_options.onDocumentClickClosePrevent !== '' && target.is(_options.onDocumentClickClosePrevent)) {
 153                                     zIndex = 9999;
 154                                 }
 155                                 var target_zIndex = target.css('zIndex');
 156                                 if (target_zIndex == 'auto') {
 157                                     target_zIndex = 0;
 158                                 }
 159                                 if (zIndex < target_zIndex) {
 160                                     zIndex = target_zIndex;
 161                                 }
 162                                 if (zIndex <= elemObj.css('zIndex')) {
 163                                     popModalClose();
 164                                 }
 165                             }
 166                         });
 167                     }
 168
 169                     $(window).resize(function () {
 170                         getPlacement();
 171                     });
 172
 173                     elemObj.find('.close').on('click', function () {
 174                         popModalClose();
 175                         $(this).off('click');
 176                     });
 177
 178                     elemObj.find('[data-popmodal-but="close"]').unbind('click');
 179                     elemObj.find('[data-popmodal-but="close"]').on('click', function () {
 180                         popModalClose();
 181                         $(this).off('click');
 182                     });
 183
 184                     elemObj.find('[data-popmodal-but="ok"]').unbind('click');
 185                     elemObj.find('[data-popmodal-but="ok"]').on('click', function (event) {
 186                         var ok;
 187                         if (_options.onOkBut && $.isFunction(_options.onOkBut)) {
 188                             ok = _options.onOkBut(event);
 189                         }
 190                         if (ok !== false) {
 191                             popModalClose();
 192                             $(this).off('click');
 193                             $(_options.html).trigger('okbut');
 194                         }
 195                     });
 196
 197                     elemObj.find('[data-popmodal-but="cancel"]').unbind('click');
 198                     elemObj.find('[data-popmodal-but="cancel"]').on('click', function () {
 199                         if (_options.onCancelBut && $.isFunction(_options.onCancelBut)) {
 200                             _options.onCancelBut();
 201                         }
 202                         popModalClose();
 203                         $(this).off('click');
 204                         $(_options.html).trigger('cancelbut');
 205                     });
 206
 207                     $('html').on('keydown.' + elemClass + 'Event', function (event) {
 208                         if (event.keyCode == 27) {
 209                             popModalClose();
 210                         }
 211                     });
 212
 213                 }
 214                 return elemObj;
 215             },
 216             hide: function () {
 217                 popModalClose();
 218             }
 219         };
 220
 221         function getPlacement() {
 222             if (_options.inline) {
 223                 var eLeft = elem.position().left;
 224                 var eTop = elem.position().top;
 225             } else {
 226                 var eLeft = elem.offset().left;
 227                 var eTop = elem.offset().top;
 228             }
 229             var offset = 10,
 230                 eMLeft = parseInt(elem.css('marginLeft')),
 231                 ePLeft = parseInt(elem.css('paddingLeft')),
 232                 eMTop = parseInt(elem.css('marginTop')),
 233                 eHeight = elem.outerHeight(),
 234                 eWidth = elem.outerWidth(),
 235                 eObjWidth = elemObj.outerWidth(),
 236                 eObjHeight = elemObj.outerHeight();
 237
 238             var placement,
 239                 eOffsetLeft = elem.offset().left,
 240                 eOffsetRight = $(window).width() - elem.offset().left - eWidth,
 241                 eOffsetTop = elem.offset().top,
 242                 deltaL = eOffsetLeft - offset - eObjWidth,
 243                 deltaBL = eWidth + eOffsetLeft - eObjWidth,
 244                 deltaR = eOffsetRight - offset - eObjWidth,
 245                 deltaBR = eWidth + eOffsetRight - eObjWidth,
 246                 deltaCL = eWidth / 2 + eOffsetLeft - eObjWidth / 2,
 247                 deltaCR = eWidth / 2 + eOffsetRight - eObjWidth / 2,
 248                 deltaC = Math.min(deltaCR, deltaCL),
 249                 deltaCT = eOffsetTop - eObjHeight / 2;
 250
 251             function optimalPosition(current) {
 252                 var optimal;
 253                 var maxDelta = Math.max(deltaBL, deltaBR, deltaC);
 254                 if (isCurrentFits(current)) {
 255                     optimal = current;
 256                 } else if (deltaBR > 0 && deltaBR == maxDelta) {
 257                     optimal = bl;
 258                 } else if (deltaBL > 0 && deltaBL == maxDelta) {
 259                     optimal = br;
 260                 } else if (deltaC > 0 && deltaC == maxDelta) {
 261                     optimal = bc;
 262                 } else {
 263                     optimal = current;
 264                 }
 265                 return optimal;
 266             }
 267
 268             function isCurrentFits(current) {
 269                 return current == bl ? deltaBR > 0
 270                     : current == br ? deltaBL > 0
 271                     : deltaC > 0;
 272             }
 273
 274             if ((/^bottom/).test(_options.placement)) {
 275                 placement = optimalPosition(_options.placement);
 276             } else if ((/^left/).test(_options.placement)) {
 277                 if (deltaL > 0) {
 278                     if (_options.placement == lc && deltaCT > 0) {
 279                         placement = lc;
 280                     } else {
 281                         placement = lt;
 282                     }
 283                 } else {
 284                     placement = optimalPosition(bl);
 285                 }
 286             } else if ((/^right/).test(_options.placement)) {
 287                 if (deltaR > 0) {
 288                     if (_options.placement == rc && deltaCT > 0) {
 289                         placement = rc;
 290                     } else {
 291                         placement = rt;
 292                     }
 293                 } else {
 294                     placement = optimalPosition(br);
 295                 }
 296             }
 297
 298             elemObj.removeAttr('class').addClass(elemClass + ' animated ' + placement);
 299             switch (placement) {
 300                 case (bl):
 301                     elemObj.css({
 302                         top: eTop + eMTop + eHeight + offset + 'px',
 303                         left: eLeft + eMLeft + 'px'
 304                     }).addClass(effectIn + 'Bottom');
 305                     break;
 306                 case (br):
 307                     elemObj.css({
 308                         top: eTop + eMTop + eHeight + offset + 'px',
 309                         left: eLeft + eMLeft + eWidth - eObjWidth + 'px'
 310                     }).addClass(effectIn + 'Bottom');
 311                     break;
 312                 case (bc):
 313                     elemObj.css({
 314                         top: eTop + eMTop + eHeight + offset + 'px',
 315                         left: eLeft + eMLeft + (eWidth - eObjWidth) / 2 + 'px'
 316                     }).addClass(effectIn + 'Bottom');
 317                     break;
 318                 case (lt):
 319                     elemObj.css({
 320                         top: eTop + eMTop + 'px',
 321                         left: eLeft + eMLeft - eObjWidth - offset + 'px'
 322                     }).addClass(effectIn + 'Left');
 323                     break;
 324                 case (rt):
 325                     elemObj.css({
 326                         top: eTop + eMTop + 'px',
 327                         left: eLeft + eMLeft + eWidth + offset + 'px'
 328                     }).addClass(effectIn + 'Right');
 329                     break;
 330                 case (lc):
 331                     elemObj.css({
 332                         top: eTop + eMTop + eHeight / 2 - eObjHeight / 2 + 'px',
 333                         left: eLeft + eMLeft - eObjWidth - offset + 'px'
 334                     }).addClass(effectIn + 'Left');
 335                     break;
 336                 case (rc):
 337                     elemObj.css({
 338                         top: eTop + eMTop + eHeight / 2 - eObjHeight / 2 + 'px',
 339                         left: eLeft + eMLeft + eWidth + offset + 'px'
 340                     }).addClass(effectIn + 'Right');
 341                     break;
 342             }
 343         }
 344
 345         function popModalClose() {
 346             elemObj = $('.' + elemClass);
 347             if (elemObj.length) {
 348                 reverseEffect();
 349                 getAnimTime();
 350                 setTimeout(function () {
 351                     $('.' + elemClass + '_source').replaceWith($('.' + elemClass + '_content').children());
 352                     elemObj.remove();
 353                     $('html.' + elemClass + 'Open').off('.' + elemClass + 'Event').removeClass(elemClass + 'Open');
 354                 }, animTime);
 355             }
 356         }
 357
 358         function getAnimTime() {
 359             if (!animTime) {
 360                 animTime = elemObj.css('animationDuration');
 361                 if (animTime !== undefined) {
 362                     animTime = animTime.replace('s', '') * 1000;
 363                 } else {
 364                     animTime = 0;
 365                 }
 366             }
 367         }
 368
 369         function reverseEffect() {
 370             var animClassOld = elemObj.attr('class'),
 371                 animClassNew = animClassOld.replace(effectIn, effectOut);
 372             elemObj.removeClass(animClassOld).addClass(animClassNew);
 373         }
 374
 375         if (methods[method]) {
 376             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
 377         } else if (typeof method === 'object' || !method) {
 378             return methods.init.apply(this, arguments);
 379         }
 380
 381     };
 382
 383     $('* [data-popmodal-bind]').bind('click', function () {
 384         var elemBind = $(this).attr('data-popmodal-bind');
 385         var params = {html: $(elemBind)};
 386         if ($(this).attr('data-placement') !== undefined) {
 387             params['placement'] = $(this).attr('data-placement');
 388         }
 389         if ($(this).attr('data-showclose-but') !== undefined) {
 390             params['showCloseBut'] = (/^true$/i).test($(this).attr('data-showclose-but'));
 391         }
 392         if ($(this).attr('data-overflowcontent') !== undefined) {
 393             params['overflowContent'] = (/^false$/i).test($(this).attr('data-overflowcontent'));
 394         }
 395         if ($(this).attr('data-ondocumentclick-close') !== undefined) {
 396             params['onDocumentClickClose'] = (/^true$/i).test($(this).attr('data-ondocumentclick-close'));
 397         }
 398         if ($(this).attr('data-ondocumentclick-close-prevent') !== undefined) {
 399             params['onDocumentClickClosePrevent'] = $(this).attr('data-ondocumentclick-close-prevent');
 400         }
 401         if ($(this).attr('data-inline') !== undefined) {
 402             params['inline'] = (/^true$/i).test($(this).attr('data-inline'));
 403         }
 404         if ($(this).attr('data-beforeloading-content') !== undefined) {
 405             params['beforeLoadingContent'] = $(this).attr('data-beforeloading-content');
 406         }
 407         $(this).popModal(params);
 408     });
 409
 410     $.event.special.destroyed = {
 411         remove: function (o) {
 412             if (o.handler) {
 413                 o.handler();
 414             }
 415         }
 416     };
 417 })(jQuery);
 418
 419
 420 /* notifyModal */
 421 (function ($) {
 422     $.fn.notifyModal = function (method) {
 423         var elem = $(this),
 424             elemObj,
 425             elemClass = 'notifyModal',
 426             onTopClass = '',
 427             _options,
 428             animTime;
 429
 430         var methods = {
 431             init: function (params) {
 432                 var _defaults = {
 433                     duration: 2500,
 434                     placement: 'center',
 435                     type: 'notify',
 436                     overlay: true,
 437                     onClose: function () {
 438                     }
 439                 };
 440                 _options = $.extend(_defaults, params);
 441
 442                 if (_options.overlay) {
 443                     onTopClass = 'overlay';
 444                 }
 445
 446                 $('.' + elemClass).remove();
 447                 var notifyContainer = $('<div class="' + elemClass + ' ' + _options.placement + ' ' + onTopClass + ' ' + _options.type + '"></div>');
 448                 var notifyContent = $('<div class="' + elemClass + '_content"></div>');
 449                 var closeBut = $('<button type="button" class="close">&times;</button>');
 450                 if (elem[0] === undefined) {
 451                     elem = elem['selector'];
 452                 } else {
 453                     elem = elem[0].innerHTML;
 454                 }
 455                 notifyContent.append(closeBut, elem);
 456                 notifyContainer.append(notifyContent);
 457                 $('body').append(notifyContainer);
 458
 459                 elemObj = $('.' + elemClass);
 460                 getAnimTime();
 461
 462                 elemObj.addClass('open');
 463                 elemObj.click(function () {
 464                     notifyModalClose();
 465                 });
 466                 if (_options.duration != -1) {
 467                     notifDur = setTimeout(notifyModalClose, _options.duration);
 468                 }
 469
 470             },
 471             hide: function () {
 472                 notifyModalClose();
 473             }
 474         };
 475
 476         function notifyModalClose() {
 477             var elemObj = $('.' + elemClass);
 478             elemObj.removeClass('open');
 479             setTimeout(function () {
 480                 elemObj.remove();
 481                 if (_options.duration != -1) {
 482                     clearTimeout(notifDur);
 483                 }
 484                 if (_options.onClose && $.isFunction(_options.onClose)) {
 485                     _options.onClose();
 486                 }
 487             }, animTime);
 488         }
 489
 490         function getAnimTime() {
 491             if (!animTime) {
 492                 animTime = elemObj.css('transitionDuration');
 493                 if (animTime !== undefined) {
 494                     animTime = animTime.replace('s', '') * 1000;
 495                 } else {
 496                     animTime = 0;
 497                 }
 498             }
 499         }
 500
 501         $('html').keydown(function (event) {
 502             if (event.keyCode == 27) {
 503                 notifyModalClose();
 504             }
 505         });
 506
 507         if (methods[method]) {
 508             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
 509         } else if (typeof method === 'object' || !method) {
 510             return methods.init.apply(this, arguments);
 511         }
 512
 513     };
 514
 515     $('* [data-notifymodal-bind]').bind('click', function () {
 516         var elemBind = $(this).attr('data-notifymodal-bind');
 517         var params = {};
 518         if ($(this).attr('data-duration') !== undefined) {
 519             params['duration'] = parseInt($(this).attr('data-duration'));
 520         }
 521         if ($(this).attr('data-placement') !== undefined) {
 522             params['placement'] = $(this).attr('data-placement');
 523         }
 524         if ($(this).attr('data-ontop') !== undefined) {
 525             params['onTop'] = (/^true$/i).test($(this).attr('data-ontop'));
 526         }
 527         $(elemBind).notifyModal(params);
 528     });
 529
 530 })(jQuery);
 531
 532
 533 /* hintModal */
 534 (function ($) {
 535     $.fn.hintModal = function (method) {
 536         $('.hintModal').off();
 537
 538         var methods = {
 539             init: function () {
 540
 541                 $(this).on('mouseenter', function () {
 542                     var elem = $(this).find('> .hintModal_container');
 543                     if (elem[0].textContent.length > 1) {
 544                         elem.addClass('animated fadeInBottom');
 545                         getPlacement($(this), elem);
 546                     }
 547                 });
 548
 549                 $(this).on('mouseleave', function () {
 550                     var elem = $(this).find('> .hintModal_container');
 551                     if (elem[0].textContent.length > 1) {
 552                         elem.removeClass('animated fadeInBottom');
 553                     }
 554                 });
 555
 556                 function getPlacement(elemObj, elem) {
 557                     var placementDefault,
 558                         classDefault = elemObj.attr('class'),
 559                         eObjWidth = elemObj.outerWidth(),
 560                         eWidth = elem.outerWidth(),
 561                         eOffsetLeft = elemObj.offset().left,
 562                         eOffsetRight = $(window).width() - elemObj.offset().left - eObjWidth,
 563                         deltaBL = eObjWidth + eOffsetLeft - eWidth,
 564                         deltaBR = eObjWidth + eOffsetRight - eWidth,
 565                         deltaCL = eObjWidth / 2 + eOffsetLeft - eWidth / 2,
 566                         deltaCR = eObjWidth / 2 + eOffsetRight - eWidth / 2,
 567                         deltaC = Math.min(deltaCR, deltaCL),
 568                         bl = 'bottomLeft',
 569                         bc = 'bottomCenter',
 570                         br = 'bottomRight';
 571
 572                     if (elemObj.hasClass(bl)) {
 573                         placementDefault = bl;
 574                     } else if (elemObj.hasClass(bc)) {
 575                         placementDefault = bc;
 576                     } else if (elemObj.hasClass(br)) {
 577                         placementDefault = br;
 578                     } else {
 579                         placementDefault = bl;
 580                     }
 581
 582                     if (elemObj.data('placement') === undefined) {
 583                         elemObj.data('placement', placementDefault);
 584                     }
 585
 586                     function optimalPosition(current) {
 587                         var optimal;
 588                         var maxDelta = Math.max(deltaBL, deltaBR, deltaC);
 589                         if (isCurrentFits(current)) {
 590                             optimal = current;
 591                         } else if (deltaBR > 0 && deltaBR == maxDelta) {
 592                             optimal = bl;
 593                         } else if (deltaBL > 0 && deltaBL == maxDelta) {
 594                             optimal = br;
 595                         } else if (deltaC > 0 && deltaC == maxDelta) {
 596                             optimal = bc;
 597                         } else {
 598                             optimal = current;
 599                         }
 600                         return optimal;
 601                     }
 602
 603                     function isCurrentFits(current) {
 604                         return current == bl ? deltaBR > 0
 605                             : current == br ? deltaBL > 0
 606                             : deltaC > 0;
 607                     }
 608
 609                     elemObj.removeAttr('class').addClass(classDefault + ' ' + optimalPosition(elemObj.data('placement')));
 610                 }
 611
 612             }
 613         };
 614
 615         if (methods[method]) {
 616             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
 617         } else if (typeof method === 'object' || !method) {
 618             return methods.init.apply(this, arguments);
 619         }
 620
 621     };
 622     $('.hintModal').hintModal();
 623     document.addEventListener("DOMNodeInserted", function (event) {
 624         if ($(event.target).hasClass('hintModal')) {
 625             $('.hintModal').hintModal();
 626         }
 627     }, false);
 628 })(jQuery);
 629
 630
 631 /* dialogModal */
 632 (function ($) {
 633     $.fn.dialogModal = function (method) {
 634         var elem = $(this),
 635             elemObj,
 636             elemClass = 'dialogModal',
 637             prevBut = 'dialogPrev',
 638             nextBut = 'dialogNext',
 639             _options,
 640             animTime;
 641
 642         var methods = {
 643             init: function (params) {
 644                 var _defaults = {
 645                     topOffset: 0,
 646                     top: '10%',
 647                     type: '',
 648                     onOkBut: function () {
 649                         return true;
 650                     },
 651                     onCancelBut: function () {
 652                     },
 653                     onLoad: function () {
 654                     },
 655                     onClose: function () {
 656                     },
 657                     onChange: function () {
 658                     }
 659                 };
 660                 _options = $.extend(_defaults, params);
 661
 662                 $('html.' + elemClass + 'Open').off('.' + elemClass + 'Event').removeClass(elemClass + 'Open');
 663                 $('.' + elemClass + ' .' + prevBut + ', .' + elemClass + ' .' + nextBut).off('click');
 664                 $('.' + elemClass).remove();
 665
 666                 if (_options.type == '') {
 667                     _options.top = 0;
 668                 } else {
 669                     _options.top = 'calc(' + _options.top + ' + 60px)';
 670                 }
 671
 672                 var currentDialog = 0,
 673                     maxDialog = elem.length - 1,
 674                     dialogMain = $('<div class="' + elemClass + ' ' + _options.type + '" style="top:' + _options.topOffset + 'px"></div>'),
 675                     dialogContainer = $('<div class="' + elemClass + '_container" style="top:' + _options.top + '"></div>'),
 676                     dialogTop = $('<div class="' + elemClass + '_top animated"></div>'),
 677                     dialogHeader = $('<div class="' + elemClass + '_header"></div>'),
 678                     dialogBody = $('<div class="' + elemClass + '_body animated"></div>'),
 679                     dialogCloseBut = $('<button type="button" class="close">&times;</button>');
 680                 dialogMain.append(dialogContainer);
 681                 dialogContainer.append(dialogTop, dialogBody);
 682                 dialogTop.append(dialogHeader);
 683                 dialogHeader.append(dialogCloseBut);
 684                 dialogBody.append(elem[currentDialog].innerHTML);
 685
 686                 if (maxDialog > 0) {
 687                     dialogHeader.append($('<div class="' + nextBut + '">&rsaquo;</div><div class="' + prevBut + ' notactive">&lsaquo;</div>'));
 688                 }
 689                 dialogHeader.append('<span>' + elem.find('.' + elemClass + '_header')[currentDialog].innerHTML + '</span>');
 690
 691                 $('body').append(dialogMain).addClass(elemClass + 'Open');
 692                 if (_options.type == '') {
 693                     var getScrollBarWidth = dialogMain.outerWidth() - dialogMain[0].scrollWidth;
 694                     dialogTop.css({right: getScrollBarWidth + 'px'});
 695                 }
 696
 697                 elemObj = $('.' + elemClass);
 698                 getAnimTime();
 699
 700                 if (_options.onLoad && $.isFunction(_options.onLoad)) {
 701                     _options.onLoad(elemObj, currentDialog + 1);
 702                 }
 703                 elem.trigger('load', {el: elemObj, current: currentDialog + 1});
 704
 705                 elemObj.on('destroyed', function () {
 706                     if (_options.onClose && $.isFunction(_options.onClose)) {
 707                         _options.onClose();
 708                     }
 709                     elem.trigger('close');
 710                 });
 711
 712                 elemObj.addClass('open');
 713                 setTimeout(function () {
 714                     if (_options.type != '') {
 715                         dialogContainer.css({opacity: 1});
 716                     }
 717                     dialogTop.addClass('fadeInTopBig');
 718                     dialogBody.addClass('fadeInTopBig');
 719                 }, animTime + 100);
 720
 721                 bindFooterButtons();
 722
 723                 function bindFooterButtons() {
 724                     elemObj.find('[data-dialogmodal-but="close"]').on('click', function () {
 725                         dialogModalClose();
 726                         $(this).off('click');
 727                     });
 728
 729                     elemObj.find('[data-dialogmodal-but="ok"]').on('click', function (event) {
 730                         var ok;
 731                         if (_options.onOkBut && $.isFunction(_options.onOkBut)) {
 732                             ok = _options.onOkBut(event);
 733                         }
 734                         if (ok !== false) {
 735                             dialogModalClose();
 736                         }
 737                         $(this).off('click');
 738                         elem.trigger('okbut');
 739                     });
 740
 741                     elemObj.find('[data-dialogmodal-but="cancel"]').on('click', function () {
 742                         if (_options.onCancelBut && $.isFunction(_options.onCancelBut)) {
 743                             _options.onCancelBut();
 744                         }
 745                         dialogModalClose();
 746                         $(this).off('click');
 747                         elem.trigger('cancelbut');
 748                     });
 749
 750                     elemObj.find('[data-dialogmodal-but="prev"]').on('click', function () {
 751                         elemObj.find('.' + prevBut).click();
 752                     });
 753
 754                     elemObj.find('[data-dialogmodal-but="next"]').on('click', function () {
 755                         elemObj.find('.' + nextBut).click();
 756                     });
 757                 }
 758
 759                 elemObj.find('.' + prevBut).on('click', function () {
 760                     if (currentDialog > 0) {
 761                         --currentDialog;
 762                         if (currentDialog < maxDialog) {
 763                             elemObj.find('.' + nextBut).removeClass('notactive');
 764                         }
 765                         if (currentDialog === 0) {
 766                             elemObj.find('.' + prevBut).addClass('notactive');
 767                         }
 768                         changeDialogContent();
 769                     }
 770                 });
 771
 772                 elemObj.find('.' + nextBut).on('click', function () {
 773                     if (currentDialog < maxDialog) {
 774                         ++currentDialog;
 775                         if (currentDialog > 0) {
 776                             elemObj.find('.' + prevBut).removeClass('notactive');
 777                         }
 778                         if (currentDialog == maxDialog) {
 779                             elemObj.find('.' + nextBut).addClass('notactive');
 780                         }
 781                         changeDialogContent();
 782                     }
 783                 });
 784
 785                 function changeDialogContent() {
 786                     dialogBody.empty().append(elem[currentDialog].innerHTML);
 787                     dialogHeader.find('span').html(elem.find('.' + elemClass + '_header')[currentDialog].innerHTML);
 788                     bindFooterButtons();
 789                     if (_options.onChange && $.isFunction(_options.onChange)) {
 790                         _options.onChange(elemObj, currentDialog + 1);
 791                     }
 792                     elem.trigger('change', {el: elemObj, current: currentDialog + 1});
 793                 }
 794
 795                 elemObj.find('.close').on('click', function () {
 796                     dialogModalClose();
 797                     $(this).off('click');
 798                 });
 799
 800                 $('html').on('keydown.' + elemClass + 'Event', function (event) {
 801                     if (event.keyCode == 27) {
 802                         dialogModalClose();
 803                     } else if (event.keyCode == 37) {
 804                         elemObj.find('.' + prevBut).click();
 805                     } else if (event.keyCode == 39) {
 806                         elemObj.find('.' + nextBut).click();
 807                     }
 808                 });
 809
 810             },
 811             hide: function () {
 812                 dialogModalClose();
 813             }
 814         };
 815
 816         function dialogModalClose() {
 817             var elemObj = $('.' + elemClass);
 818             elemObj.removeClass('open');
 819             setTimeout(function () {
 820                 elemObj.remove();
 821                 $('body').removeClass(elemClass + 'Open').css({paddingRight: ''});
 822                 $('html.' + elemClass + 'Open').off('.' + elemClass + 'Event').removeClass(elemClass + 'Open');
 823                 elemObj.find('.' + prevBut).off('click');
 824                 elemObj.find('.' + nextBut).off('click');
 825             }, animTime);
 826         }
 827
 828         function getAnimTime() {
 829             if (!animTime) {
 830                 animTime = elemObj.css('transitionDuration');
 831                 if (animTime !== undefined) {
 832                     animTime = animTime.replace('s', '') * 1000;
 833                 } else {
 834                     animTime = 0;
 835                 }
 836             }
 837         }
 838
 839         if (methods[method]) {
 840             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
 841         } else if (typeof method === 'object' || !method) {
 842             return methods.init.apply(this, arguments);
 843         }
 844
 845     };
 846
 847     $('* [data-dialogmodal-bind]').bind('click', function () {
 848         var elemBind = $(this).attr('data-dialogmodal-bind');
 849         var params = {};
 850         if ($(this).attr('data-topoffset') !== undefined) {
 851             params['topOffset'] = $(this).attr('data-topoffset');
 852         }
 853         if ($(this).attr('data-top') !== undefined) {
 854             params['top'] = $(this).attr('data-top');
 855         }
 856         if ($(this).attr('data-topoffset') !== undefined) {
 857             params['type'] = $(this).attr('data-type');
 858         }
 859         $(elemBind).dialogModal(params);
 860     });
 861
 862     $.event.special.destroyed = {
 863         remove: function (o) {
 864             if (o.handler) {
 865                 o.handler();
 866             }
 867         }
 868     };
 869 })(jQuery);
 870
 871
 872 /* titleModal */
 873 (function ($) {
 874     $.fn.titleModal = function (method) {
 875         $('.titleModal').off();
 876
 877         var methods = {
 878             init: function () {
 879                 var elem,
 880                     elemObj,
 881                     elemClass = 'titleModal',
 882                     getElem = $('.' + elemClass),
 883                     effectIn = 'fadeIn',
 884                     effectOut = 'fadeOut';
 885
 886                 getElem.on('mouseenter', function () {
 887                     elem = $(this);
 888                     var titleAttr;
 889                     if (elem.attr('title') !== undefined || elem.css('textOverflow') == 'ellipsis' || elem.css('textOverflow') == 'clip') {
 890                         if (elem.attr('title') !== undefined) {
 891                             titleAttr = elem.attr('title');
 892                         } else {
 893                             titleAttr = elem.text();
 894                         }
 895                         elem.removeAttr('title');
 896                         elem.attr('data-title', titleAttr);
 897                         var titleModal = $('<div class="' + elemClass + '_container animated"></div>');
 898                         elemObj = $('.' + elemClass + '_container');
 899                         var placement = elem.attr('data-placement');
 900                         if (placement === undefined) {
 901                             placement = 'bottom';
 902                         }
 903                         if (elemObj) {
 904                             elemObj.remove();
 905                         }
 906                         elem.append(titleModal.append(titleAttr));
 907                         getPlacement(placement);
 908                     }
 909                 });
 910
 911                 getElem.on('mouseleave', function () {
 912                     elem = $(this);
 913                     var titleAttr;
 914                     if (elem.attr('data-title') !== undefined) {
 915                         titleAttr = elem.attr('data-title');
 916                         elem.removeAttr('data-title');
 917                         elem.attr('title', titleAttr);
 918                         reverseEffect();
 919                         elemObj.remove();
 920                     }
 921                 });
 922
 923                 function getPlacement(placement) {
 924                     elemObj = $('.' + elemClass + '_container');
 925                     var eLeft, eTop,
 926                         eMLeft = elem.css('marginLeft'),
 927                         eMTop = elem.css('marginTop'),
 928                         eMBottom = elem.css('marginBottom'),
 929                         eHeight = elem.outerHeight(),
 930                         eWidth = elem.outerWidth(),
 931                         eObjMTop = elemObj.css('marginTop'),
 932                         eObjWidth = elemObj.outerWidth(),
 933                         eObjHeight = elemObj.outerHeight();
 934                     if (elem.css('position') == 'fixed' || elem.css('position') == 'absolute') {
 935                         eLeft = 0;
 936                         eTop = 0;
 937                     } else {
 938                         eLeft = elem.position().left;
 939                         eTop = elem.position().top;
 940                     }
 941                     switch (placement) {
 942                         case 'bottom':
 943                             elemObj.css({
 944                                 marginTop: parseInt(eObjMTop) - parseInt(eMBottom) + 'px',
 945                                 left: eLeft + parseInt(eMLeft) + (eWidth - eObjWidth) / 2 + 'px'
 946                             }).addClass(effectIn + 'Bottom');
 947                             break;
 948                         case 'top':
 949                             elemObj.css({
 950                                 top: eTop + parseInt(eMTop) - eObjHeight + 'px',
 951                                 left: eLeft + parseInt(eMLeft) + (eWidth - eObjWidth) / 2 + 'px'
 952                             }).addClass('top ' + effectIn + 'Top');
 953                             break;
 954                         case 'left':
 955                             elemObj.css({
 956                                 top: eTop + parseInt(eMTop) + eHeight / 2 - eObjHeight / 2 + 'px',
 957                                 left: eLeft + parseInt(eMLeft) - eObjWidth - 10 + 'px'
 958                             }).addClass('left ' + effectIn + 'Left');
 959                             break;
 960                         case 'right':
 961                             elemObj.css({
 962                                 top: eTop + parseInt(eMTop) + eHeight / 2 - eObjHeight / 2 + 'px',
 963                                 left: eLeft + parseInt(eMLeft) + eWidth + 10 + 'px'
 964                             }).addClass('right ' + effectIn + 'Right');
 965                             break;
 966                     }
 967                 }
 968
 969                 function reverseEffect() {
 970                     var animClassOld = elemObj.attr('class'),
 971                         animClassNew = animClassOld.replace(effectIn, effectOut);
 972                     elemObj.removeClass(animClassOld).addClass(animClassNew);
 973                 }
 974
 975             }
 976         };
 977
 978         if (methods[method]) {
 979             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
 980         } else if (typeof method === 'object' || !method) {
 981             return methods.init.apply(this, arguments);
 982         }
 983
 984     };
 985     $('.titleModal').titleModal();
 986     document.addEventListener("DOMNodeInserted", function (event) {
 987         if ($(event.target).hasClass('titleModal')) {
 988             $('.titleModal').titleModal();
 989         }
 990     }, false);
 991 })(jQuery);
 992
 993
 994 /* confirmModal */
 995 (function ($) {
 996     $.fn.confirmModal = function (method) {
 997         var elem = $(this),
 998             elemObj,
 999             elemClass = 'confirmModal',
1000             _options,
1001             animTime;
1002
1003         var methods = {
1004             init: function (params) {
1005                 var _defaults = {
1006                     topOffset: 0,
1007                     onOkBut: function () {
1008                         return true;
1009                     },
1010                     onCancelBut: function () {
1011                     },
1012                     onLoad: function () {
1013                     },
1014                     onClose: function () {
1015                     }
1016                 };
1017                 _options = $.extend(_defaults, params);
1018
1019                 $('html.' + elemClass + 'Open').off('.' + elemClass + 'Event').removeClass(elemClass + 'Open');
1020                 $('.' + elemClass).remove();
1021
1022                 var dialogMain = $('<div class="' + elemClass + '" style="top:' + _options.topOffset + 'px"></div>'),
1023                     dialogBody = $('<div class="' + elemClass + '_body animated"></div>');
1024                 dialogMain.append(dialogBody);
1025                 dialogBody.append(elem[0].innerHTML);
1026
1027                 $('body').append(dialogMain).addClass(elemClass + 'Open');
1028
1029                 elemObj = $('.' + elemClass);
1030                 getAnimTime();
1031
1032                 if (_options.onLoad && $.isFunction(_options.onLoad)) {
1033                     _options.onLoad();
1034                 }
1035
1036                 elemObj.on('destroyed', function () {
1037                     if (_options.onClose && $.isFunction(_options.onClose)) {
1038                         _options.onClose();
1039                     }
1040                 });
1041
1042                 elemObj.addClass('open');
1043                 setTimeout(function () {
1044                     dialogBody.addClass('fadeInTopBig');
1045
1046                     setTimeout(function () {
1047                         dialogBody.removeClass('fadeInTopBig').addClass('open');
1048                     }, animTime + 100);
1049
1050                 }, animTime + 100);
1051
1052                 bindFooterButtons();
1053
1054                 function bindFooterButtons() {
1055                     elemObj.find('[data-confirmmodal-but="close"]').on('click', function () {
1056                         confirmModalClose();
1057                         $(this).off('click');
1058                     });
1059
1060                     elemObj.find('[data-confirmmodal-but="ok"]').on('click', function (event) {
1061                         var ok;
1062                         if (_options.onOkBut && $.isFunction(_options.onOkBut)) {
1063                             ok = _options.onOkBut(event);
1064                         }
1065                         if (ok !== false) {
1066                             confirmModalClose();
1067                         }
1068                         $(this).off('click');
1069                     });
1070
1071                     elemObj.find('[data-confirmmodal-but="cancel"]').on('click', function () {
1072                         if (_options.onCancelBut && $.isFunction(_options.onCancelBut)) {
1073                             _options.onCancelBut();
1074                         }
1075                         confirmModalClose();
1076                         $(this).off('click');
1077                     });
1078
1079
1080                     function needConfirm() {
1081                         dialogBody.addClass('needConfirm');
1082                         setTimeout(function () {
1083                             dialogBody.removeClass('needConfirm');
1084                         }, animTime + 100);
1085                     }
1086
1087                     elemObj.on('click', function (event) {
1088                         var target = $(event.target);
1089                         if (!target.parents().andSelf().is(dialogBody)) {
1090                             needConfirm();
1091                         }
1092                     });
1093
1094                     $('html').on('keydown.' + elemClass + 'Event', function (event) {
1095                         if (event.keyCode == 27) {
1096                             needConfirm();
1097                         }
1098                     });
1099
1100                 }
1101
1102             },
1103             hide: function () {
1104                 confirmModalClose();
1105             }
1106         };
1107
1108         function confirmModalClose() {
1109             var elemObj = $('.' + elemClass);
1110             elemObj.removeClass('open');
1111             setTimeout(function () {
1112                 elemObj.remove();
1113                 $('body').removeClass(elemClass + 'Open').css({paddingRight: ''});
1114                 $('html.' + elemClass + 'Open').off('.' + elemClass + 'Event').removeClass(elemClass + 'Open');
1115             }, animTime);
1116         }
1117
1118         function getAnimTime() {
1119             if (!animTime) {
1120                 animTime = elemObj.css('transitionDuration');
1121                 if (animTime !== undefined) {
1122                     animTime = animTime.replace('s', '') * 1000;
1123                 } else {
1124                     animTime = 0;
1125                 }
1126             }
1127         }
1128
1129         if (methods[method]) {
1130             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
1131         } else if (typeof method === 'object' || !method) {
1132             return methods.init.apply(this, arguments);
1133         }
1134
1135     };
1136
1137     $('* [data-confirmmodal-bind]').bind('click', function () {
1138         var elemBind = $(this).attr('data-confirmmodal-bind');
1139         var params = {};
1140         if ($(this).attr('data-topoffset') !== undefined) {
1141             params['topOffset'] = $(this).attr('data-topoffset');
1142         }
1143         $(elemBind).confirmModal(params);
1144     });
1145
1146     $.event.special.destroyed = {
1147         remove: function (o) {
1148             if (o.handler) {
1149                 o.handler();
1150             }
1151         }
1152     };
1153 })(jQuery);