view release on metacpan or  search on metacpan

share/modally-1.1.0/jquery.modally.js  view on Meta::CPAN

    var $inner = $('<div></div>');

    $tester.css({
        width:  '100px',
        height: '100px',
        'z-index': 0,
        position: 'fixed',
        left: '-9999px',
        top: 0,
        'overflow-x': 'hidden',
        'overflow-y': 'scroll'
    });

    $inner.css({
      'min-height': '10px'
    });

    $tester.append($inner);
    $('html').append($tester);

    var scroll_width = $inner.width();
    $inner.remove();
    $tester.remove();

    return 100 - scroll_width;
  }

  window.scroll_width = getScrollWidth();

  function storePaddingRight($elem) {
    var padding_right = parseInt($elem.css('padding-right'), 10);
    $elem.data('padding-right', padding_right);
    return padding_right;
  }

  function restorePaddingRight($elem) {
    var padding_right = $elem.data('padding-right');
    $elem.css('padding-right', padding_right);
    $elem.data('padding-right', null);
    return padding_right;
  }

  $.fn.paddingFill = function() {
    var $this = $(this);

    if (window.scroll_width) {
      $this.each(function() {
        var $elem = $(this);
        var data = $elem.data('padding-right');
        if (data === null || data === undefined) {
          $elem.css('padding-right', storePaddingRight($elem) + scroll_width );
        }
      });
    }
  };

  $.fn.disableScroll = function() {
    var $this = $(this);
    var $html = $('html');

    if (!$html.data('scroll-blocked')) {
      $html.css({
        overflow: 'hidden',
        height: '100%'
      });
      $html.data('scroll-blocked', true);
    }

    $this.paddingFill();
  };

  $.fn.undoPaddingFill = function() {
    var $this = $(this);

    if (window.scroll_width) {
      $this.each(function() {
        var $elem = $(this);
        var data = $elem.data('padding-right');
        if (data !== null) {
          $elem.css('padding-right', restorePaddingRight($elem));
        }
      });
    }
  };

  $.fn.enableScroll = function() {
    var $this = $(this);
    $this.undoPaddingFill();
    var $html = $('html');

    if ($html.data('scroll-blocked')) {
      $html.css({
        overflow: 'auto',
        height: 'auto'
      });
      $html.data('scroll-blocked', false);
    }
  };

  // https://www.youtube.com/watch?v=gJ-WmYn_9GE
    window._modally_video_re = {};
    window._modally_video_re.YOUTUBE = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i;
    window._modally_video_re.VIMEO = /(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|album\/(?:\d+)\/video\/|video\/|)(\d+)(?:[a-zA-Z0-9_\-]+)?/i;
    window._modally_video_re.VIDEO = /(.*\/[^\/]+\.mp4|ogg|ogv|ogm|webm|avi)\s?$/i;
  //TODO: add support for brightcove and cloudfront
  //TODO: automatic video modal detection

  window._modally_index = {};

    var Modally = function(id, elem, params) {
        var self = this;
        this.id = id;
        this.$element = $(elem);
        this.params = params;
        this.initial_z_index = null;

        if (this.params === undefined || this.params === null) {
            this.params = {};
        }


        var defaults = {
            'landing': 'body',
            'max-width': 'none',
      'classes': '',
            'vertical-align': 'middle',
            'close-parent': false,
            'close-other': false,
            'image': false,
            'video': false,
            'autoplay': true,
            'template': '<div class="modally-wrap"><div class="modally-table"><div class="modally-cell"><div class="modally-underlay modally-close"></div><div class="modally" role="dialog" aria-modal="true"><button tabindex="1" class="modally-close m...
            'in-duration': 'normal',
            'in-easing': 'swing',
            'out-duration': 'normal',
            'out-easing': 'swing',
            'in-css': null, //TODO: css animation
            'out-css': null //TODO: css animation
        };

        // TODO: maybe image lightbox - you have the old code you did for a mexican guy in 2012
        // TODO: responsive triggers (needs deep extend)
        // TODO: make a modal manager class, should solve the bulky code on open and close - will also enable to reopen the closed parent
        // TODO: iframe modal

        function __init__() {
            for (var k in defaults) {
                //load in defaults
          if (!self.params.hasOwnProperty(k)) {
            self.params[k] = defaults[k];
          }

                //check for inline properties - not deep
                if (self.$element.length) {
                    var attr = self.$element.attr('modally-'+k)