mirror of
https://github.com/monstra-cms/monstra.git
synced 2025-08-01 19:00:36 +02:00
Filesmanager: Bootstrap Lightbox added instead of default Modal Dialog. #100
This commit is contained in:
Awilum
19
public/assets/css/bootstrap-lightbox.css
vendored
Normal file
19
public/assets/css/bootstrap-lightbox.css
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
/*!=========================================================
|
||||
* bootstrap-lightbox v0.5 - 1/14/2013
|
||||
* http://jbutz.github.com/bootstrap-lightbox/
|
||||
* HEAVILY based off bootstrap-modal.js
|
||||
* ==========================================================
|
||||
* Copyright (c) 2013 Jason Butz (http://jasonbutz.info)
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ========================================================= */.lightbox{background-color:transparent;text-align:center;line-height:0;z-index:1050;position:relative;top:70px;outline:0}.lightbox .hide{display:none}.lightbox .in{display:block}.lightbox-content{display:inline-block;padding:10px;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);-moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);box-shadow:0 3px 7px rgba(0,0,0,0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box}.lightbox-content .lightbox-caption{padding:2%;position:absolute;left:11px;right:12px;bottom:11px;background:#000;background:rgba(0,0,0,0.6);color:white;text-align:center;text-shadow:0 -1px 0 #000;text-shadow:0 -1px 0 rgba(0,0,0,0.3);font-size:14px;line-height:18px}.lightbox-header .close{color:white;margin-right:-16px;margin-top:-16px;font-size:2em;opacity:.8;filter:alpha(opacity=80)}.lightbox-header .close :hover{opacity:.4;filter:alpha(opacity=40)}
|
||||
342
public/assets/js/bootstrap-lightbox.js
vendored
Normal file
342
public/assets/js/bootstrap-lightbox.js
vendored
Normal file
@@ -0,0 +1,342 @@
|
||||
/* =========================================================
|
||||
* bootstrap-lightbox.js
|
||||
* ========================================================= */
|
||||
|
||||
|
||||
!function ($) {
|
||||
// browser:true, jquery:true, node:true, laxbreak:true
|
||||
"use strict"; // jshint ;_;
|
||||
|
||||
|
||||
/* LIGHTBOX CLASS DEFINITION
|
||||
* ========================= */
|
||||
|
||||
var Lightbox = function (element, options)
|
||||
{
|
||||
this.options = options;
|
||||
this.$element = $(element)
|
||||
.delegate('[data-dismiss="lightbox"]', 'click.dismiss.lightbox', $.proxy(this.hide, this));
|
||||
|
||||
this.options.remote && this.$element.find('.lightbox-body').load(this.options.remote);
|
||||
|
||||
this.cloneSize();
|
||||
}
|
||||
|
||||
Lightbox.prototype = {
|
||||
constructor: Lightbox,
|
||||
|
||||
toggle: function ()
|
||||
{
|
||||
return this[!this.isShown ? 'show' : 'hide']();
|
||||
},
|
||||
|
||||
show: function ()
|
||||
{
|
||||
var that = this;
|
||||
var e = $.Event('show')
|
||||
|
||||
this.$element.trigger(e);
|
||||
|
||||
if (this.isShown || e.isDefaultPrevented()) return;
|
||||
|
||||
|
||||
this.isShown = true;
|
||||
|
||||
this.escape();
|
||||
|
||||
this.backdrop(function ()
|
||||
{
|
||||
var transition = $.support.transition && that.$element.hasClass('fade');
|
||||
|
||||
if (!that.$element.parent().length)
|
||||
{
|
||||
that.$element.appendTo(document.body); //don't move modals dom position
|
||||
}
|
||||
|
||||
that.$element
|
||||
.show();
|
||||
|
||||
if (transition)
|
||||
{
|
||||
that.$element[0].offsetWidth; // force reflow
|
||||
}
|
||||
|
||||
that.$element
|
||||
.addClass('in')
|
||||
.attr('aria-hidden', false);
|
||||
|
||||
that.enforceFocus();
|
||||
|
||||
transition ?
|
||||
that.$element.one($.support.transition.end, function () { that.centerImage(); that.$element.focus().trigger('shown'); }) :
|
||||
(function(){ that.centerImage(); that.$element.focus().trigger('shown'); })()
|
||||
|
||||
});
|
||||
},
|
||||
hide: function (e)
|
||||
{
|
||||
e && e.preventDefault();
|
||||
|
||||
var that = this;
|
||||
|
||||
e = $.Event('hide');
|
||||
|
||||
this.$element.trigger(e);
|
||||
|
||||
if (!this.isShown || e.isDefaultPrevented()) return;
|
||||
|
||||
this.isShown = false;
|
||||
|
||||
this.escape();
|
||||
|
||||
$(document).off('focusin.lightbox');
|
||||
|
||||
this.$element
|
||||
.removeClass('in')
|
||||
.attr('aria-hidden', true);
|
||||
|
||||
$.support.transition && this.$element.hasClass('fade') ?
|
||||
this.hideWithTransition() :
|
||||
this.hideLightbox();
|
||||
},
|
||||
enforceFocus: function ()
|
||||
{
|
||||
var that = this;
|
||||
$(document).on('focusin.lightbox', function (e)
|
||||
{
|
||||
if (that.$element[0] !== e.target && !that.$element.has(e.target).length)
|
||||
{
|
||||
that.$element.focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
escape: function ()
|
||||
{
|
||||
var that = this;
|
||||
if (this.isShown && this.options.keyboard)
|
||||
{
|
||||
this.$element.on('keypress.dismiss.lightbox, keyup.dismiss.lightbox', function ( e )
|
||||
{
|
||||
e.which == 27 && that.hide();
|
||||
});
|
||||
}
|
||||
else if (!this.isShown)
|
||||
{
|
||||
this.$element.off('keypress.dismiss.lightbox, keyup.dismiss.lightbox');
|
||||
}
|
||||
},
|
||||
hideWithTransition: function ()
|
||||
{
|
||||
var that = this;
|
||||
var timeout = setTimeout(function ()
|
||||
{
|
||||
that.$element.off($.support.transition.end);
|
||||
that.hideLightbox();
|
||||
}, 500);
|
||||
|
||||
this.$element.one($.support.transition.end, function ()
|
||||
{
|
||||
clearTimeout(timeout);
|
||||
that.hideLightbox();
|
||||
});
|
||||
},
|
||||
hideLightbox: function (that)
|
||||
{
|
||||
this.$element
|
||||
.hide()
|
||||
.trigger('hidden');
|
||||
|
||||
this.backdrop();
|
||||
},
|
||||
removeBackdrop: function ()
|
||||
{
|
||||
this.$backdrop.remove();
|
||||
this.$backdrop = null;
|
||||
},
|
||||
backdrop: function (callback)
|
||||
{
|
||||
var that = this;
|
||||
var animate = this.$element.hasClass('fade') ? 'fade' : '';
|
||||
|
||||
if (this.isShown && this.options.backdrop)
|
||||
{
|
||||
var doAnimate = $.support.transition && animate;
|
||||
|
||||
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
|
||||
.appendTo(document.body);
|
||||
|
||||
this.$backdrop.click(
|
||||
this.options.backdrop == 'static' ?
|
||||
$.proxy(this.$element[0].focus, this.$element[0]) :
|
||||
$.proxy(this.hide, this)
|
||||
);
|
||||
|
||||
if (doAnimate) this.$backdrop[0].offsetWidth; // force reflow
|
||||
|
||||
this.$backdrop.addClass('in');
|
||||
|
||||
doAnimate ?
|
||||
this.$backdrop.one($.support.transition.end, callback) :
|
||||
callback();
|
||||
|
||||
}
|
||||
else if (!this.isShown && this.$backdrop)
|
||||
{
|
||||
this.$backdrop.removeClass('in');
|
||||
|
||||
$.support.transition && this.$element.hasClass('fade')?
|
||||
this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
|
||||
this.removeBackdrop();
|
||||
|
||||
}
|
||||
else if (callback)
|
||||
{
|
||||
callback();
|
||||
}
|
||||
},
|
||||
centerImage: function()
|
||||
{
|
||||
var that = this;
|
||||
var resizedOffs = 0;
|
||||
var $img;
|
||||
|
||||
that.h = that.$element.height();
|
||||
that.w = that.$element.width();
|
||||
|
||||
if(that.options.resizeToFit)
|
||||
{
|
||||
|
||||
resizedOffs = 10;
|
||||
$img = that.$element.find('.lightbox-content').find('img:first');
|
||||
// Save original filesize
|
||||
if(!$img.data('osizew')) $img.data('osizew', $img.width());
|
||||
if(!$img.data('osizeh')) $img.data('osizeh', $img.height());
|
||||
|
||||
var osizew = $img.data('osizew');
|
||||
var osizeh = $img.data('osizeh');
|
||||
|
||||
// Resize for window dimension < than image
|
||||
// Reset previous
|
||||
$img.css('max-width', 'none');
|
||||
$img.css('max-height', 'none');
|
||||
|
||||
|
||||
var wOffs = 50; // STYLE ?
|
||||
var hOffs = 40; // STYLE ?
|
||||
if(that.$element.find('.lightbox-header').length > 0)
|
||||
{
|
||||
wOffs += 40;
|
||||
hOffs += 10;
|
||||
}
|
||||
$img.css('max-width', $(window).width() - wOffs);
|
||||
$img.css('max-height', $(window).height() - hOffs);
|
||||
|
||||
that.w = $img.width();
|
||||
that.h = $img.height();
|
||||
}
|
||||
|
||||
that.$element.css({
|
||||
"position": "fixed",
|
||||
"left": ( $(window).width() / 2 ) - ( that.w / 2 ),
|
||||
"top": ( $(window).height() / 2 ) - ( that.h / 2 ) - resizedOffs
|
||||
});
|
||||
that.enforceFocus();
|
||||
},
|
||||
cloneSize: function() // The cloneSize function is only run once, but it helps keep image jumping down
|
||||
{
|
||||
var that = this;
|
||||
// Clone the element and append it to the body
|
||||
// this allows us to get an idea for the size of the lightbox
|
||||
that.$clone = that.$element.filter(':first').clone()
|
||||
.css(
|
||||
{
|
||||
'position': 'absolute',
|
||||
'top' : -2000,
|
||||
'display' : 'block',
|
||||
'visibility': 'visible',
|
||||
'opacity': 100
|
||||
})
|
||||
.removeClass('fade')
|
||||
.appendTo('body');
|
||||
|
||||
that.h = that.$clone.height();
|
||||
that.w = that.$clone.width();
|
||||
that.$clone.remove();
|
||||
|
||||
// try and center the element based on the
|
||||
// height and width retrieved from the clone
|
||||
that.$element.css({
|
||||
"position": "fixed",
|
||||
"left": ( $(window).width() / 2 ) - ( that.w / 2 ),
|
||||
"top": ( $(window).height() / 2 ) - ( that.h / 2 )
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* LIGHTBOX PLUGIN DEFINITION
|
||||
* ======================= */
|
||||
|
||||
$.fn.lightbox = function (option)
|
||||
{
|
||||
return this.each(function ()
|
||||
{
|
||||
var $this = $(this);
|
||||
var data = $this.data('lightbox');
|
||||
var options = $.extend({}, $.fn.lightbox.defaults, $this.data(), typeof option == 'object' && option);
|
||||
if (!data) $this.data('lightbox', (data = new Lightbox(this, options)));
|
||||
|
||||
if (typeof option == 'string')
|
||||
data[option]()
|
||||
else if (options.show)
|
||||
data.show()
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.lightbox.defaults = {
|
||||
backdrop: true,
|
||||
keyboard: true,
|
||||
show: true,
|
||||
resizeToFit: true
|
||||
};
|
||||
|
||||
$.fn.lightbox.Constructor = Lightbox;
|
||||
|
||||
|
||||
/* LIGHTBOX DATA-API
|
||||
* ================== */
|
||||
|
||||
$(document).on('click.lightbox.data-api', '[data-toggle="lightbox"]', function (e)
|
||||
{
|
||||
var $this = $(this);
|
||||
var href = $this.attr('href');
|
||||
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))); //strip for ie7
|
||||
var option = $target.data('lightbox') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data());
|
||||
var img = $this.attr('data-image') || false;
|
||||
var $imgElem;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if(img)
|
||||
{
|
||||
$target.data('original-content', $target.find('.lightbox-content').html());
|
||||
$target.find('.lightbox-content').html('<img border="0" src="'+img+'" />');
|
||||
}
|
||||
|
||||
$target
|
||||
.lightbox(option)
|
||||
.one('hide', function ()
|
||||
{
|
||||
$this.focus()
|
||||
})
|
||||
.one('hidden',function ()
|
||||
{
|
||||
if( img )
|
||||
{
|
||||
$target.find('.lightbox-content').html( $target.data('original-content') );
|
||||
img = undefined;
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
}(window.jQuery);
|
||||
Reference in New Issue
Block a user