mirror of
https://github.com/snipe/snipe-it.git
synced 2024-11-09 23:24:06 -08:00
Use lightbox for images in asset file listing
This commit is contained in:
snipe
parent
90d4a8b2e3
commit
6f9bad1005
|
|
@ -260,4 +260,19 @@ class Helper
|
|||
|
||||
|
||||
}
|
||||
|
||||
|
||||
public static function checkUploadIsImage($file)
|
||||
{
|
||||
// Check if the file is an image, so we can show a preview
|
||||
$finfo = @finfo_open(FILEINFO_MIME_TYPE); // return mime type ala mimetype extension
|
||||
$filetype = @finfo_file($finfo, $file);
|
||||
finfo_close($finfo);
|
||||
|
||||
if (($filetype=="image/jpeg") || ($filetype=="image/jpg") || ($filetype=="image/png") || ($filetype=="image/bmp") || ($filetype=="image/gif")) {
|
||||
return $filetype;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1052,17 +1052,13 @@ class AssetsController extends Controller
|
|||
}
|
||||
|
||||
$log = Actionlog::find($fileId);
|
||||
$file = $log->get_src();
|
||||
$file = $log->get_src('assets');
|
||||
|
||||
$filetype = Asset::checkUploadIsImage($file);
|
||||
$filetype = Helper::checkUploadIsImage($file);
|
||||
|
||||
if ($filetype) {
|
||||
|
||||
$contents = file_get_contents($file);
|
||||
$response = Response::make($contents);
|
||||
$response->header('Content-Type', $filetype);
|
||||
return $response;
|
||||
|
||||
return Response::make($contents)->header('Content-Type', $filetype);
|
||||
} else {
|
||||
return Response::download($file);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ use Watson\Validating\ValidatingTrait;
|
|||
use DateTime;
|
||||
use App\Models\Setting;
|
||||
|
||||
|
||||
class Asset extends Depreciable
|
||||
{
|
||||
use SoftDeletes;
|
||||
|
|
@ -221,20 +222,6 @@ class Asset extends Depreciable
|
|||
->orderBy('created_at', 'desc');
|
||||
}
|
||||
|
||||
public static function checkUploadIsImage($file)
|
||||
{
|
||||
// Check if the file is an image, so we can show a preview
|
||||
$finfo = @finfo_open(FILEINFO_MIME_TYPE); // return mime type ala mimetype extension
|
||||
$filetype = @finfo_file($finfo, $file);
|
||||
finfo_close($finfo);
|
||||
|
||||
if (($filetype=="image/jpeg") || ($filetype=="image/jpg") || ($filetype=="image/gif")) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
public function assigneduser()
|
||||
{
|
||||
return $this->belongsTo('\App\Models\User', 'assigned_to')
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ require('laravel-elixir-codeception');
|
|||
*/
|
||||
|
||||
elixir(function(mix) {
|
||||
mix.less(['AdminLTE.less','skins/skin-blue.less','overrides.less'],'public/assets/css');
|
||||
mix.less(['AdminLTE.less','skins/skin-blue.less','ekko-lightbox.less','overrides.less'],'public/assets/css');
|
||||
|
||||
|
||||
mix.scripts([
|
||||
|
|
@ -30,6 +30,7 @@ elixir(function(mix) {
|
|||
'plugins/datepicker/bootstrap-datepicker.js',
|
||||
'plugins/select2/select2.js',
|
||||
'plugins/iCheck/icheck.js',
|
||||
'ekko-lightbox.js',
|
||||
'snipeit.js',
|
||||
'app.js'
|
||||
|
||||
|
|
|
|||
|
|
@ -4890,6 +4890,59 @@ fieldset[disabled] .btn-yahoo.active {
|
|||
background-color: #3b8ab8;
|
||||
}
|
||||
|
||||
/*!
|
||||
* Lightbox for Bootstrap 3 by @ashleydw
|
||||
* https://github.com/ashleydw/lightbox
|
||||
*
|
||||
* License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
|
||||
*/
|
||||
.ekko-lightbox-container {
|
||||
position: relative;
|
||||
}
|
||||
.ekko-lightbox-nav-overlay {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ekko-lightbox-nav-overlay a {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
height: 100%;
|
||||
width: 49%;
|
||||
display: block;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
-webkit-filter: dropshadow(color=#000, offx=2, offy=2);
|
||||
filter: dropshadow(color=#000, offx=2, offy=2);
|
||||
z-index: 100;
|
||||
}
|
||||
.ekko-lightbox-nav-overlay a:empty {
|
||||
width: 49%;
|
||||
}
|
||||
.ekko-lightbox a:hover {
|
||||
opacity: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ekko-lightbox .glyphicon-chevron-left {
|
||||
padding-left: 15px;
|
||||
float: left;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.ekko-lightbox .glyphicon-chevron-right {
|
||||
padding-right: 15px;
|
||||
float: right;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.ekko-lightbox .modal-footer {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.skin-blue .main-header .logo {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
62
public/assets/css/ekko-lightbox.css
Executable file
62
public/assets/css/ekko-lightbox.css
Executable file
|
|
@ -0,0 +1,62 @@
|
|||
/*!
|
||||
* Lightbox for Bootstrap 3 by @ashleydw
|
||||
* https://github.com/ashleydw/lightbox
|
||||
*
|
||||
* License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
.ekko-lightbox-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ekko-lightbox-nav-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ekko-lightbox-nav-overlay a {
|
||||
z-index: 100;
|
||||
display: block;
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
opacity: 0;
|
||||
filter: dropshadow(color=#000000, offx=2, offy=2);
|
||||
-webkit-transition: opacity 0.5s;
|
||||
-moz-transition: opacity 0.5s;
|
||||
-o-transition: opacity 0.5s;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.ekko-lightbox-nav-overlay a:empty {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.ekko-lightbox a:hover {
|
||||
text-decoration: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ekko-lightbox .glyphicon-chevron-left {
|
||||
left: 0;
|
||||
float: left;
|
||||
padding-left: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ekko-lightbox .glyphicon-chevron-right {
|
||||
right: 0;
|
||||
float: right;
|
||||
padding-right: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ekko-lightbox .modal-footer {
|
||||
text-align: left;
|
||||
}
|
||||
6
public/assets/css/ekko-lightbox.min.css
vendored
Executable file
6
public/assets/css/ekko-lightbox.min.css
vendored
Executable file
|
|
@ -0,0 +1,6 @@
|
|||
/*!
|
||||
* Lightbox for Bootstrap 3 by @ashleydw
|
||||
* https://github.com/ashleydw/lightbox
|
||||
*
|
||||
* License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
|
||||
*/.ekko-lightbox-container{position:relative}.ekko-lightbox-nav-overlay{position:absolute;top:0;left:0;z-index:100;width:100%;height:100%}.ekko-lightbox-nav-overlay a{z-index:100;display:block;width:49%;height:100%;font-size:30px;color:#fff;text-shadow:2px 2px 4px #000;opacity:0;filter:dropshadow(color=#000000,offx=2,offy=2);-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-o-transition:opacity .5s;transition:opacity .5s}.ekko-lightbox-nav-overlay a:empty{width:49%}.ekko-lightbox a:hover{text-decoration:none;opacity:1}.ekko-lightbox .glyphicon-chevron-left{left:0;float:left;padding-left:15px;text-align:left}.ekko-lightbox .glyphicon-chevron-right{right:0;float:right;padding-right:15px;text-align:right}.ekko-lightbox .modal-footer{text-align:left}
|
||||
|
|
@ -33770,6 +33770,447 @@ S2.define('jquery.mousewheel',[
|
|||
}
|
||||
})(window.jQuery || window.Zepto);
|
||||
|
||||
|
||||
/*
|
||||
Lightbox for Bootstrap 3 by @ashleydw
|
||||
https://github.com/ashleydw/lightbox
|
||||
|
||||
License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
var $, EkkoLightbox;
|
||||
|
||||
$ = jQuery;
|
||||
|
||||
EkkoLightbox = function(element, options) {
|
||||
var content, footer, header;
|
||||
this.options = $.extend({
|
||||
title: null,
|
||||
footer: null,
|
||||
remote: null
|
||||
}, $.fn.ekkoLightbox.defaults, options || {});
|
||||
this.$element = $(element);
|
||||
content = '';
|
||||
this.modal_id = this.options.modal_id ? this.options.modal_id : 'ekkoLightbox-' + Math.floor((Math.random() * 1000) + 1);
|
||||
header = '<div class="modal-header"' + (this.options.title || this.options.always_show_close ? '' : ' style="display:none"') + '><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">' + (this.options.title || " ") + '</h4></div>';
|
||||
footer = '<div class="modal-footer"' + (this.options.footer ? '' : ' style="display:none"') + '>' + this.options.footer + '</div>';
|
||||
$(document.body).append('<div id="' + this.modal_id + '" class="ekko-lightbox modal fade" tabindex="-1"><div class="modal-dialog"><div class="modal-content">' + header + '<div class="modal-body"><div class="ekko-lightbox-container"><div></div></div></div>' + footer + '</div></div></div>');
|
||||
this.modal = $('#' + this.modal_id);
|
||||
this.modal_dialog = this.modal.find('.modal-dialog').first();
|
||||
this.modal_content = this.modal.find('.modal-content').first();
|
||||
this.modal_body = this.modal.find('.modal-body').first();
|
||||
this.modal_header = this.modal.find('.modal-header').first();
|
||||
this.modal_footer = this.modal.find('.modal-footer').first();
|
||||
this.lightbox_container = this.modal_body.find('.ekko-lightbox-container').first();
|
||||
this.lightbox_body = this.lightbox_container.find('> div:first-child').first();
|
||||
this.showLoading();
|
||||
this.modal_arrows = null;
|
||||
this.border = {
|
||||
top: parseFloat(this.modal_dialog.css('border-top-width')) + parseFloat(this.modal_content.css('border-top-width')) + parseFloat(this.modal_body.css('border-top-width')),
|
||||
right: parseFloat(this.modal_dialog.css('border-right-width')) + parseFloat(this.modal_content.css('border-right-width')) + parseFloat(this.modal_body.css('border-right-width')),
|
||||
bottom: parseFloat(this.modal_dialog.css('border-bottom-width')) + parseFloat(this.modal_content.css('border-bottom-width')) + parseFloat(this.modal_body.css('border-bottom-width')),
|
||||
left: parseFloat(this.modal_dialog.css('border-left-width')) + parseFloat(this.modal_content.css('border-left-width')) + parseFloat(this.modal_body.css('border-left-width'))
|
||||
};
|
||||
this.padding = {
|
||||
top: parseFloat(this.modal_dialog.css('padding-top')) + parseFloat(this.modal_content.css('padding-top')) + parseFloat(this.modal_body.css('padding-top')),
|
||||
right: parseFloat(this.modal_dialog.css('padding-right')) + parseFloat(this.modal_content.css('padding-right')) + parseFloat(this.modal_body.css('padding-right')),
|
||||
bottom: parseFloat(this.modal_dialog.css('padding-bottom')) + parseFloat(this.modal_content.css('padding-bottom')) + parseFloat(this.modal_body.css('padding-bottom')),
|
||||
left: parseFloat(this.modal_dialog.css('padding-left')) + parseFloat(this.modal_content.css('padding-left')) + parseFloat(this.modal_body.css('padding-left'))
|
||||
};
|
||||
this.modal.on('show.bs.modal', this.options.onShow.bind(this)).on('shown.bs.modal', (function(_this) {
|
||||
return function() {
|
||||
_this.modal_shown();
|
||||
return _this.options.onShown.call(_this);
|
||||
};
|
||||
})(this)).on('hide.bs.modal', this.options.onHide.bind(this)).on('hidden.bs.modal', (function(_this) {
|
||||
return function() {
|
||||
if (_this.gallery) {
|
||||
$(document).off('keydown.ekkoLightbox');
|
||||
}
|
||||
_this.modal.remove();
|
||||
return _this.options.onHidden.call(_this);
|
||||
};
|
||||
})(this)).modal('show', options);
|
||||
return this.modal;
|
||||
};
|
||||
|
||||
EkkoLightbox.prototype = {
|
||||
modal_shown: function() {
|
||||
var video_id;
|
||||
if (!this.options.remote) {
|
||||
return this.error('No remote target given');
|
||||
} else {
|
||||
this.gallery = this.$element.data('gallery');
|
||||
if (this.gallery) {
|
||||
if (this.options.gallery_parent_selector === 'document.body' || this.options.gallery_parent_selector === '') {
|
||||
this.gallery_items = $(document.body).find('*[data-gallery="' + this.gallery + '"]');
|
||||
} else {
|
||||
this.gallery_items = this.$element.parents(this.options.gallery_parent_selector).first().find('*[data-gallery="' + this.gallery + '"]');
|
||||
}
|
||||
this.gallery_index = this.gallery_items.index(this.$element);
|
||||
$(document).on('keydown.ekkoLightbox', this.navigate.bind(this));
|
||||
if (this.options.directional_arrows && this.gallery_items.length > 1) {
|
||||
this.lightbox_container.append('<div class="ekko-lightbox-nav-overlay"><a href="#" class="' + this.strip_stops(this.options.left_arrow_class) + '"></a><a href="#" class="' + this.strip_stops(this.options.right_arrow_class) + '"></a></div>');
|
||||
this.modal_arrows = this.lightbox_container.find('div.ekko-lightbox-nav-overlay').first();
|
||||
this.lightbox_container.find('a' + this.strip_spaces(this.options.left_arrow_class)).on('click', (function(_this) {
|
||||
return function(event) {
|
||||
event.preventDefault();
|
||||
return _this.navigate_left();
|
||||
};
|
||||
})(this));
|
||||
this.lightbox_container.find('a' + this.strip_spaces(this.options.right_arrow_class)).on('click', (function(_this) {
|
||||
return function(event) {
|
||||
event.preventDefault();
|
||||
return _this.navigate_right();
|
||||
};
|
||||
})(this));
|
||||
}
|
||||
}
|
||||
if (this.options.type) {
|
||||
if (this.options.type === 'image') {
|
||||
return this.preloadImage(this.options.remote, true);
|
||||
} else if (this.options.type === 'youtube' && (video_id = this.getYoutubeId(this.options.remote))) {
|
||||
return this.showYoutubeVideo(video_id);
|
||||
} else if (this.options.type === 'vimeo') {
|
||||
return this.showVimeoVideo(this.options.remote);
|
||||
} else if (this.options.type === 'instagram') {
|
||||
return this.showInstagramVideo(this.options.remote);
|
||||
} else if (this.options.type === 'url') {
|
||||
return this.loadRemoteContent(this.options.remote);
|
||||
} else if (this.options.type === 'video') {
|
||||
return this.showVideoIframe(this.options.remote);
|
||||
} else {
|
||||
return this.error("Could not detect remote target type. Force the type using data-type=\"image|youtube|vimeo|instagram|url|video\"");
|
||||
}
|
||||
} else {
|
||||
return this.detectRemoteType(this.options.remote);
|
||||
}
|
||||
}
|
||||
},
|
||||
strip_stops: function(str) {
|
||||
return str.replace(/\./g, '');
|
||||
},
|
||||
strip_spaces: function(str) {
|
||||
return str.replace(/\s/g, '');
|
||||
},
|
||||
isImage: function(str) {
|
||||
return str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
|
||||
},
|
||||
isSwf: function(str) {
|
||||
return str.match(/\.(swf)((\?|#).*)?$/i);
|
||||
},
|
||||
getYoutubeId: function(str) {
|
||||
var match;
|
||||
match = str.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
|
||||
if (match && match[2].length === 11) {
|
||||
return match[2];
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getVimeoId: function(str) {
|
||||
if (str.indexOf('vimeo') > 0) {
|
||||
return str;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getInstagramId: function(str) {
|
||||
if (str.indexOf('instagram') > 0) {
|
||||
return str;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
navigate: function(event) {
|
||||
event = event || window.event;
|
||||
if (event.keyCode === 39 || event.keyCode === 37) {
|
||||
if (event.keyCode === 39) {
|
||||
return this.navigate_right();
|
||||
} else if (event.keyCode === 37) {
|
||||
return this.navigate_left();
|
||||
}
|
||||
}
|
||||
},
|
||||
navigateTo: function(index) {
|
||||
var next, src;
|
||||
if (index < 0 || index > this.gallery_items.length - 1) {
|
||||
return this;
|
||||
}
|
||||
this.showLoading();
|
||||
this.gallery_index = index;
|
||||
this.$element = $(this.gallery_items.get(this.gallery_index));
|
||||
this.updateTitleAndFooter();
|
||||
src = this.$element.attr('data-remote') || this.$element.attr('href');
|
||||
this.detectRemoteType(src, this.$element.attr('data-type') || false);
|
||||
if (this.gallery_index + 1 < this.gallery_items.length) {
|
||||
next = $(this.gallery_items.get(this.gallery_index + 1), false);
|
||||
src = next.attr('data-remote') || next.attr('href');
|
||||
if (next.attr('data-type') === 'image' || this.isImage(src)) {
|
||||
return this.preloadImage(src, false);
|
||||
}
|
||||
}
|
||||
},
|
||||
navigate_left: function() {
|
||||
if (this.gallery_items.length === 1) {
|
||||
return;
|
||||
}
|
||||
if (this.gallery_index === 0) {
|
||||
this.gallery_index = this.gallery_items.length - 1;
|
||||
} else {
|
||||
this.gallery_index--;
|
||||
}
|
||||
this.options.onNavigate.call(this, 'left', this.gallery_index);
|
||||
return this.navigateTo(this.gallery_index);
|
||||
},
|
||||
navigate_right: function() {
|
||||
if (this.gallery_items.length === 1) {
|
||||
return;
|
||||
}
|
||||
if (this.gallery_index === this.gallery_items.length - 1) {
|
||||
this.gallery_index = 0;
|
||||
} else {
|
||||
this.gallery_index++;
|
||||
}
|
||||
this.options.onNavigate.call(this, 'right', this.gallery_index);
|
||||
return this.navigateTo(this.gallery_index);
|
||||
},
|
||||
detectRemoteType: function(src, type) {
|
||||
var video_id;
|
||||
type = type || false;
|
||||
if (type === 'image' || this.isImage(src)) {
|
||||
this.options.type = 'image';
|
||||
return this.preloadImage(src, true);
|
||||
} else if (type === 'youtube' || (video_id = this.getYoutubeId(src))) {
|
||||
this.options.type = 'youtube';
|
||||
return this.showYoutubeVideo(video_id);
|
||||
} else if (type === 'vimeo' || (video_id = this.getVimeoId(src))) {
|
||||
this.options.type = 'vimeo';
|
||||
return this.showVimeoVideo(video_id);
|
||||
} else if (type === 'instagram' || (video_id = this.getInstagramId(src))) {
|
||||
this.options.type = 'instagram';
|
||||
return this.showInstagramVideo(video_id);
|
||||
} else if (type === 'video') {
|
||||
this.options.type = 'video';
|
||||
return this.showVideoIframe(video_id);
|
||||
} else {
|
||||
this.options.type = 'url';
|
||||
return this.loadRemoteContent(src);
|
||||
}
|
||||
},
|
||||
updateTitleAndFooter: function() {
|
||||
var caption, footer, header, title;
|
||||
header = this.modal_content.find('.modal-header');
|
||||
footer = this.modal_content.find('.modal-footer');
|
||||
title = this.$element.data('title') || "";
|
||||
caption = this.$element.data('footer') || "";
|
||||
if (title || this.options.always_show_close) {
|
||||
header.css('display', '').find('.modal-title').html(title || " ");
|
||||
} else {
|
||||
header.css('display', 'none');
|
||||
}
|
||||
if (caption) {
|
||||
footer.css('display', '').html(caption);
|
||||
} else {
|
||||
footer.css('display', 'none');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
showLoading: function() {
|
||||
this.lightbox_body.html('<div class="modal-loading">' + this.options.loadingMessage + '</div>');
|
||||
return this;
|
||||
},
|
||||
showYoutubeVideo: function(id) {
|
||||
var height, rel, width;
|
||||
if ((this.$element.attr('data-norelated') != null) || this.options.no_related) {
|
||||
rel = "&rel=0";
|
||||
} else {
|
||||
rel = "";
|
||||
}
|
||||
width = this.checkDimensions(this.$element.data('width') || 560);
|
||||
height = width / (560 / 315);
|
||||
return this.showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + rel, width, height);
|
||||
},
|
||||
showVimeoVideo: function(id) {
|
||||
var height, width;
|
||||
width = this.checkDimensions(this.$element.data('width') || 560);
|
||||
height = width / (500 / 281);
|
||||
return this.showVideoIframe(id + '?autoplay=1', width, height);
|
||||
},
|
||||
showInstagramVideo: function(id) {
|
||||
var height, width;
|
||||
width = this.checkDimensions(this.$element.data('width') || 612);
|
||||
this.resize(width);
|
||||
height = width + 80;
|
||||
this.lightbox_body.html('<iframe width="' + width + '" height="' + height + '" src="' + this.addTrailingSlash(id) + 'embed/" frameborder="0" allowfullscreen></iframe>');
|
||||
this.options.onContentLoaded.call(this);
|
||||
if (this.modal_arrows) {
|
||||
return this.modal_arrows.css('display', 'none');
|
||||
}
|
||||
},
|
||||
showVideoIframe: function(url, width, height) {
|
||||
height = height || width;
|
||||
this.resize(width);
|
||||
this.lightbox_body.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="' + width + '" height="' + height + '" src="' + url + '" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>');
|
||||
this.options.onContentLoaded.call(this);
|
||||
if (this.modal_arrows) {
|
||||
this.modal_arrows.css('display', 'none');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
loadRemoteContent: function(url) {
|
||||
var disableExternalCheck, width;
|
||||
width = this.$element.data('width') || 560;
|
||||
this.resize(width);
|
||||
disableExternalCheck = this.$element.data('disableExternalCheck') || false;
|
||||
if (!disableExternalCheck && !this.isExternal(url)) {
|
||||
this.lightbox_body.load(url, $.proxy((function(_this) {
|
||||
return function() {
|
||||
return _this.$element.trigger('loaded.bs.modal');
|
||||
};
|
||||
})(this)));
|
||||
} else {
|
||||
this.lightbox_body.html('<iframe width="' + width + '" height="' + width + '" src="' + url + '" frameborder="0" allowfullscreen></iframe>');
|
||||
this.options.onContentLoaded.call(this);
|
||||
}
|
||||
if (this.modal_arrows) {
|
||||
this.modal_arrows.css('display', 'none');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
isExternal: function(url) {
|
||||
var match;
|
||||
match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
|
||||
if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) {
|
||||
return true;
|
||||
}
|
||||
if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":(" + {
|
||||
"http:": 80,
|
||||
"https:": 443
|
||||
}[location.protocol] + ")?$"), "") !== location.host) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
error: function(message) {
|
||||
this.lightbox_body.html(message);
|
||||
return this;
|
||||
},
|
||||
preloadImage: function(src, onLoadShowImage) {
|
||||
var img;
|
||||
img = new Image();
|
||||
if ((onLoadShowImage == null) || onLoadShowImage === true) {
|
||||
img.onload = (function(_this) {
|
||||
return function() {
|
||||
var image;
|
||||
image = $('<img />');
|
||||
image.attr('src', img.src);
|
||||
image.addClass('img-responsive');
|
||||
_this.lightbox_body.html(image);
|
||||
if (_this.modal_arrows) {
|
||||
_this.modal_arrows.css('display', 'block');
|
||||
}
|
||||
return image.load(function() {
|
||||
if (_this.options.scale_height) {
|
||||
_this.scaleHeight(img.height, img.width);
|
||||
} else {
|
||||
_this.resize(img.width);
|
||||
}
|
||||
return _this.options.onContentLoaded.call(_this);
|
||||
});
|
||||
};
|
||||
})(this);
|
||||
img.onerror = (function(_this) {
|
||||
return function() {
|
||||
return _this.error('Failed to load image: ' + src);
|
||||
};
|
||||
})(this);
|
||||
}
|
||||
img.src = src;
|
||||
return img;
|
||||
},
|
||||
scaleHeight: function(height, width) {
|
||||
var border_padding, factor, footer_height, header_height, margins, max_height;
|
||||
header_height = this.modal_header.outerHeight(true) || 0;
|
||||
footer_height = this.modal_footer.outerHeight(true) || 0;
|
||||
if (!this.modal_footer.is(':visible')) {
|
||||
footer_height = 0;
|
||||
}
|
||||
if (!this.modal_header.is(':visible')) {
|
||||
header_height = 0;
|
||||
}
|
||||
border_padding = this.border.top + this.border.bottom + this.padding.top + this.padding.bottom;
|
||||
margins = parseFloat(this.modal_dialog.css('margin-top')) + parseFloat(this.modal_dialog.css('margin-bottom'));
|
||||
max_height = $(window).height() - border_padding - margins - header_height - footer_height;
|
||||
factor = Math.min(max_height / height, 1);
|
||||
this.modal_dialog.css('height', 'auto').css('max-height', max_height);
|
||||
return this.resize(factor * width);
|
||||
},
|
||||
resize: function(width) {
|
||||
var width_total;
|
||||
width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
|
||||
this.modal_dialog.css('width', 'auto').css('max-width', width_total);
|
||||
this.lightbox_container.find('a').css('line-height', function() {
|
||||
return $(this).parent().height() + 'px';
|
||||
});
|
||||
return this;
|
||||
},
|
||||
checkDimensions: function(width) {
|
||||
var body_width, width_total;
|
||||
width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
|
||||
body_width = document.body.clientWidth;
|
||||
if (width_total > body_width) {
|
||||
width = this.modal_body.width();
|
||||
}
|
||||
return width;
|
||||
},
|
||||
close: function() {
|
||||
return this.modal.modal('hide');
|
||||
},
|
||||
addTrailingSlash: function(url) {
|
||||
if (url.substr(-1) !== '/') {
|
||||
url += '/';
|
||||
}
|
||||
return url;
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.ekkoLightbox = function(options) {
|
||||
return this.each(function() {
|
||||
var $this;
|
||||
$this = $(this);
|
||||
options = $.extend({
|
||||
remote: $this.attr('data-remote') || $this.attr('href'),
|
||||
gallery_parent_selector: $this.attr('data-parent'),
|
||||
type: $this.attr('data-type')
|
||||
}, options, $this.data());
|
||||
new EkkoLightbox(this, options);
|
||||
return this;
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.ekkoLightbox.defaults = {
|
||||
gallery_parent_selector: 'document.body',
|
||||
left_arrow_class: '.glyphicon .glyphicon-chevron-left',
|
||||
right_arrow_class: '.glyphicon .glyphicon-chevron-right',
|
||||
directional_arrows: true,
|
||||
type: null,
|
||||
always_show_close: true,
|
||||
no_related: false,
|
||||
scale_height: true,
|
||||
loadingMessage: 'Loading...',
|
||||
onShow: function() {},
|
||||
onShown: function() {},
|
||||
onHide: function() {},
|
||||
onHidden: function() {},
|
||||
onNavigate: function() {},
|
||||
onContentLoaded: function() {}
|
||||
};
|
||||
|
||||
}).call(this);
|
||||
|
||||
/**
|
||||
* Module containing core application logic.
|
||||
* @param {jQuery} $ Insulated jQuery object
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
440
public/assets/js/ekko-lightbox.js
Executable file
440
public/assets/js/ekko-lightbox.js
Executable file
|
|
@ -0,0 +1,440 @@
|
|||
|
||||
/*
|
||||
Lightbox for Bootstrap 3 by @ashleydw
|
||||
https://github.com/ashleydw/lightbox
|
||||
|
||||
License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
var $, EkkoLightbox;
|
||||
|
||||
$ = jQuery;
|
||||
|
||||
EkkoLightbox = function(element, options) {
|
||||
var content, footer, header;
|
||||
this.options = $.extend({
|
||||
title: null,
|
||||
footer: null,
|
||||
remote: null
|
||||
}, $.fn.ekkoLightbox.defaults, options || {});
|
||||
this.$element = $(element);
|
||||
content = '';
|
||||
this.modal_id = this.options.modal_id ? this.options.modal_id : 'ekkoLightbox-' + Math.floor((Math.random() * 1000) + 1);
|
||||
header = '<div class="modal-header"' + (this.options.title || this.options.always_show_close ? '' : ' style="display:none"') + '><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">' + (this.options.title || " ") + '</h4></div>';
|
||||
footer = '<div class="modal-footer"' + (this.options.footer ? '' : ' style="display:none"') + '>' + this.options.footer + '</div>';
|
||||
$(document.body).append('<div id="' + this.modal_id + '" class="ekko-lightbox modal fade" tabindex="-1"><div class="modal-dialog"><div class="modal-content">' + header + '<div class="modal-body"><div class="ekko-lightbox-container"><div></div></div></div>' + footer + '</div></div></div>');
|
||||
this.modal = $('#' + this.modal_id);
|
||||
this.modal_dialog = this.modal.find('.modal-dialog').first();
|
||||
this.modal_content = this.modal.find('.modal-content').first();
|
||||
this.modal_body = this.modal.find('.modal-body').first();
|
||||
this.modal_header = this.modal.find('.modal-header').first();
|
||||
this.modal_footer = this.modal.find('.modal-footer').first();
|
||||
this.lightbox_container = this.modal_body.find('.ekko-lightbox-container').first();
|
||||
this.lightbox_body = this.lightbox_container.find('> div:first-child').first();
|
||||
this.showLoading();
|
||||
this.modal_arrows = null;
|
||||
this.border = {
|
||||
top: parseFloat(this.modal_dialog.css('border-top-width')) + parseFloat(this.modal_content.css('border-top-width')) + parseFloat(this.modal_body.css('border-top-width')),
|
||||
right: parseFloat(this.modal_dialog.css('border-right-width')) + parseFloat(this.modal_content.css('border-right-width')) + parseFloat(this.modal_body.css('border-right-width')),
|
||||
bottom: parseFloat(this.modal_dialog.css('border-bottom-width')) + parseFloat(this.modal_content.css('border-bottom-width')) + parseFloat(this.modal_body.css('border-bottom-width')),
|
||||
left: parseFloat(this.modal_dialog.css('border-left-width')) + parseFloat(this.modal_content.css('border-left-width')) + parseFloat(this.modal_body.css('border-left-width'))
|
||||
};
|
||||
this.padding = {
|
||||
top: parseFloat(this.modal_dialog.css('padding-top')) + parseFloat(this.modal_content.css('padding-top')) + parseFloat(this.modal_body.css('padding-top')),
|
||||
right: parseFloat(this.modal_dialog.css('padding-right')) + parseFloat(this.modal_content.css('padding-right')) + parseFloat(this.modal_body.css('padding-right')),
|
||||
bottom: parseFloat(this.modal_dialog.css('padding-bottom')) + parseFloat(this.modal_content.css('padding-bottom')) + parseFloat(this.modal_body.css('padding-bottom')),
|
||||
left: parseFloat(this.modal_dialog.css('padding-left')) + parseFloat(this.modal_content.css('padding-left')) + parseFloat(this.modal_body.css('padding-left'))
|
||||
};
|
||||
this.modal.on('show.bs.modal', this.options.onShow.bind(this)).on('shown.bs.modal', (function(_this) {
|
||||
return function() {
|
||||
_this.modal_shown();
|
||||
return _this.options.onShown.call(_this);
|
||||
};
|
||||
})(this)).on('hide.bs.modal', this.options.onHide.bind(this)).on('hidden.bs.modal', (function(_this) {
|
||||
return function() {
|
||||
if (_this.gallery) {
|
||||
$(document).off('keydown.ekkoLightbox');
|
||||
}
|
||||
_this.modal.remove();
|
||||
return _this.options.onHidden.call(_this);
|
||||
};
|
||||
})(this)).modal('show', options);
|
||||
return this.modal;
|
||||
};
|
||||
|
||||
EkkoLightbox.prototype = {
|
||||
modal_shown: function() {
|
||||
var video_id;
|
||||
if (!this.options.remote) {
|
||||
return this.error('No remote target given');
|
||||
} else {
|
||||
this.gallery = this.$element.data('gallery');
|
||||
if (this.gallery) {
|
||||
if (this.options.gallery_parent_selector === 'document.body' || this.options.gallery_parent_selector === '') {
|
||||
this.gallery_items = $(document.body).find('*[data-gallery="' + this.gallery + '"]');
|
||||
} else {
|
||||
this.gallery_items = this.$element.parents(this.options.gallery_parent_selector).first().find('*[data-gallery="' + this.gallery + '"]');
|
||||
}
|
||||
this.gallery_index = this.gallery_items.index(this.$element);
|
||||
$(document).on('keydown.ekkoLightbox', this.navigate.bind(this));
|
||||
if (this.options.directional_arrows && this.gallery_items.length > 1) {
|
||||
this.lightbox_container.append('<div class="ekko-lightbox-nav-overlay"><a href="#" class="' + this.strip_stops(this.options.left_arrow_class) + '"></a><a href="#" class="' + this.strip_stops(this.options.right_arrow_class) + '"></a></div>');
|
||||
this.modal_arrows = this.lightbox_container.find('div.ekko-lightbox-nav-overlay').first();
|
||||
this.lightbox_container.find('a' + this.strip_spaces(this.options.left_arrow_class)).on('click', (function(_this) {
|
||||
return function(event) {
|
||||
event.preventDefault();
|
||||
return _this.navigate_left();
|
||||
};
|
||||
})(this));
|
||||
this.lightbox_container.find('a' + this.strip_spaces(this.options.right_arrow_class)).on('click', (function(_this) {
|
||||
return function(event) {
|
||||
event.preventDefault();
|
||||
return _this.navigate_right();
|
||||
};
|
||||
})(this));
|
||||
}
|
||||
}
|
||||
if (this.options.type) {
|
||||
if (this.options.type === 'image') {
|
||||
return this.preloadImage(this.options.remote, true);
|
||||
} else if (this.options.type === 'youtube' && (video_id = this.getYoutubeId(this.options.remote))) {
|
||||
return this.showYoutubeVideo(video_id);
|
||||
} else if (this.options.type === 'vimeo') {
|
||||
return this.showVimeoVideo(this.options.remote);
|
||||
} else if (this.options.type === 'instagram') {
|
||||
return this.showInstagramVideo(this.options.remote);
|
||||
} else if (this.options.type === 'url') {
|
||||
return this.loadRemoteContent(this.options.remote);
|
||||
} else if (this.options.type === 'video') {
|
||||
return this.showVideoIframe(this.options.remote);
|
||||
} else {
|
||||
return this.error("Could not detect remote target type. Force the type using data-type=\"image|youtube|vimeo|instagram|url|video\"");
|
||||
}
|
||||
} else {
|
||||
return this.detectRemoteType(this.options.remote);
|
||||
}
|
||||
}
|
||||
},
|
||||
strip_stops: function(str) {
|
||||
return str.replace(/\./g, '');
|
||||
},
|
||||
strip_spaces: function(str) {
|
||||
return str.replace(/\s/g, '');
|
||||
},
|
||||
isImage: function(str) {
|
||||
return str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
|
||||
},
|
||||
isSwf: function(str) {
|
||||
return str.match(/\.(swf)((\?|#).*)?$/i);
|
||||
},
|
||||
getYoutubeId: function(str) {
|
||||
var match;
|
||||
match = str.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
|
||||
if (match && match[2].length === 11) {
|
||||
return match[2];
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getVimeoId: function(str) {
|
||||
if (str.indexOf('vimeo') > 0) {
|
||||
return str;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getInstagramId: function(str) {
|
||||
if (str.indexOf('instagram') > 0) {
|
||||
return str;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
navigate: function(event) {
|
||||
event = event || window.event;
|
||||
if (event.keyCode === 39 || event.keyCode === 37) {
|
||||
if (event.keyCode === 39) {
|
||||
return this.navigate_right();
|
||||
} else if (event.keyCode === 37) {
|
||||
return this.navigate_left();
|
||||
}
|
||||
}
|
||||
},
|
||||
navigateTo: function(index) {
|
||||
var next, src;
|
||||
if (index < 0 || index > this.gallery_items.length - 1) {
|
||||
return this;
|
||||
}
|
||||
this.showLoading();
|
||||
this.gallery_index = index;
|
||||
this.$element = $(this.gallery_items.get(this.gallery_index));
|
||||
this.updateTitleAndFooter();
|
||||
src = this.$element.attr('data-remote') || this.$element.attr('href');
|
||||
this.detectRemoteType(src, this.$element.attr('data-type') || false);
|
||||
if (this.gallery_index + 1 < this.gallery_items.length) {
|
||||
next = $(this.gallery_items.get(this.gallery_index + 1), false);
|
||||
src = next.attr('data-remote') || next.attr('href');
|
||||
if (next.attr('data-type') === 'image' || this.isImage(src)) {
|
||||
return this.preloadImage(src, false);
|
||||
}
|
||||
}
|
||||
},
|
||||
navigate_left: function() {
|
||||
if (this.gallery_items.length === 1) {
|
||||
return;
|
||||
}
|
||||
if (this.gallery_index === 0) {
|
||||
this.gallery_index = this.gallery_items.length - 1;
|
||||
} else {
|
||||
this.gallery_index--;
|
||||
}
|
||||
this.options.onNavigate.call(this, 'left', this.gallery_index);
|
||||
return this.navigateTo(this.gallery_index);
|
||||
},
|
||||
navigate_right: function() {
|
||||
if (this.gallery_items.length === 1) {
|
||||
return;
|
||||
}
|
||||
if (this.gallery_index === this.gallery_items.length - 1) {
|
||||
this.gallery_index = 0;
|
||||
} else {
|
||||
this.gallery_index++;
|
||||
}
|
||||
this.options.onNavigate.call(this, 'right', this.gallery_index);
|
||||
return this.navigateTo(this.gallery_index);
|
||||
},
|
||||
detectRemoteType: function(src, type) {
|
||||
var video_id;
|
||||
type = type || false;
|
||||
if (type === 'image' || this.isImage(src)) {
|
||||
this.options.type = 'image';
|
||||
return this.preloadImage(src, true);
|
||||
} else if (type === 'youtube' || (video_id = this.getYoutubeId(src))) {
|
||||
this.options.type = 'youtube';
|
||||
return this.showYoutubeVideo(video_id);
|
||||
} else if (type === 'vimeo' || (video_id = this.getVimeoId(src))) {
|
||||
this.options.type = 'vimeo';
|
||||
return this.showVimeoVideo(video_id);
|
||||
} else if (type === 'instagram' || (video_id = this.getInstagramId(src))) {
|
||||
this.options.type = 'instagram';
|
||||
return this.showInstagramVideo(video_id);
|
||||
} else if (type === 'video') {
|
||||
this.options.type = 'video';
|
||||
return this.showVideoIframe(video_id);
|
||||
} else {
|
||||
this.options.type = 'url';
|
||||
return this.loadRemoteContent(src);
|
||||
}
|
||||
},
|
||||
updateTitleAndFooter: function() {
|
||||
var caption, footer, header, title;
|
||||
header = this.modal_content.find('.modal-header');
|
||||
footer = this.modal_content.find('.modal-footer');
|
||||
title = this.$element.data('title') || "";
|
||||
caption = this.$element.data('footer') || "";
|
||||
if (title || this.options.always_show_close) {
|
||||
header.css('display', '').find('.modal-title').html(title || " ");
|
||||
} else {
|
||||
header.css('display', 'none');
|
||||
}
|
||||
if (caption) {
|
||||
footer.css('display', '').html(caption);
|
||||
} else {
|
||||
footer.css('display', 'none');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
showLoading: function() {
|
||||
this.lightbox_body.html('<div class="modal-loading">' + this.options.loadingMessage + '</div>');
|
||||
return this;
|
||||
},
|
||||
showYoutubeVideo: function(id) {
|
||||
var height, rel, width;
|
||||
if ((this.$element.attr('data-norelated') != null) || this.options.no_related) {
|
||||
rel = "&rel=0";
|
||||
} else {
|
||||
rel = "";
|
||||
}
|
||||
width = this.checkDimensions(this.$element.data('width') || 560);
|
||||
height = width / (560 / 315);
|
||||
return this.showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + rel, width, height);
|
||||
},
|
||||
showVimeoVideo: function(id) {
|
||||
var height, width;
|
||||
width = this.checkDimensions(this.$element.data('width') || 560);
|
||||
height = width / (500 / 281);
|
||||
return this.showVideoIframe(id + '?autoplay=1', width, height);
|
||||
},
|
||||
showInstagramVideo: function(id) {
|
||||
var height, width;
|
||||
width = this.checkDimensions(this.$element.data('width') || 612);
|
||||
this.resize(width);
|
||||
height = width + 80;
|
||||
this.lightbox_body.html('<iframe width="' + width + '" height="' + height + '" src="' + this.addTrailingSlash(id) + 'embed/" frameborder="0" allowfullscreen></iframe>');
|
||||
this.options.onContentLoaded.call(this);
|
||||
if (this.modal_arrows) {
|
||||
return this.modal_arrows.css('display', 'none');
|
||||
}
|
||||
},
|
||||
showVideoIframe: function(url, width, height) {
|
||||
height = height || width;
|
||||
this.resize(width);
|
||||
this.lightbox_body.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="' + width + '" height="' + height + '" src="' + url + '" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>');
|
||||
this.options.onContentLoaded.call(this);
|
||||
if (this.modal_arrows) {
|
||||
this.modal_arrows.css('display', 'none');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
loadRemoteContent: function(url) {
|
||||
var disableExternalCheck, width;
|
||||
width = this.$element.data('width') || 560;
|
||||
this.resize(width);
|
||||
disableExternalCheck = this.$element.data('disableExternalCheck') || false;
|
||||
if (!disableExternalCheck && !this.isExternal(url)) {
|
||||
this.lightbox_body.load(url, $.proxy((function(_this) {
|
||||
return function() {
|
||||
return _this.$element.trigger('loaded.bs.modal');
|
||||
};
|
||||
})(this)));
|
||||
} else {
|
||||
this.lightbox_body.html('<iframe width="' + width + '" height="' + width + '" src="' + url + '" frameborder="0" allowfullscreen></iframe>');
|
||||
this.options.onContentLoaded.call(this);
|
||||
}
|
||||
if (this.modal_arrows) {
|
||||
this.modal_arrows.css('display', 'none');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
isExternal: function(url) {
|
||||
var match;
|
||||
match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
|
||||
if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) {
|
||||
return true;
|
||||
}
|
||||
if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":(" + {
|
||||
"http:": 80,
|
||||
"https:": 443
|
||||
}[location.protocol] + ")?$"), "") !== location.host) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
error: function(message) {
|
||||
this.lightbox_body.html(message);
|
||||
return this;
|
||||
},
|
||||
preloadImage: function(src, onLoadShowImage) {
|
||||
var img;
|
||||
img = new Image();
|
||||
if ((onLoadShowImage == null) || onLoadShowImage === true) {
|
||||
img.onload = (function(_this) {
|
||||
return function() {
|
||||
var image;
|
||||
image = $('<img />');
|
||||
image.attr('src', img.src);
|
||||
image.addClass('img-responsive');
|
||||
_this.lightbox_body.html(image);
|
||||
if (_this.modal_arrows) {
|
||||
_this.modal_arrows.css('display', 'block');
|
||||
}
|
||||
return image.load(function() {
|
||||
if (_this.options.scale_height) {
|
||||
_this.scaleHeight(img.height, img.width);
|
||||
} else {
|
||||
_this.resize(img.width);
|
||||
}
|
||||
return _this.options.onContentLoaded.call(_this);
|
||||
});
|
||||
};
|
||||
})(this);
|
||||
img.onerror = (function(_this) {
|
||||
return function() {
|
||||
return _this.error('Failed to load image: ' + src);
|
||||
};
|
||||
})(this);
|
||||
}
|
||||
img.src = src;
|
||||
return img;
|
||||
},
|
||||
scaleHeight: function(height, width) {
|
||||
var border_padding, factor, footer_height, header_height, margins, max_height;
|
||||
header_height = this.modal_header.outerHeight(true) || 0;
|
||||
footer_height = this.modal_footer.outerHeight(true) || 0;
|
||||
if (!this.modal_footer.is(':visible')) {
|
||||
footer_height = 0;
|
||||
}
|
||||
if (!this.modal_header.is(':visible')) {
|
||||
header_height = 0;
|
||||
}
|
||||
border_padding = this.border.top + this.border.bottom + this.padding.top + this.padding.bottom;
|
||||
margins = parseFloat(this.modal_dialog.css('margin-top')) + parseFloat(this.modal_dialog.css('margin-bottom'));
|
||||
max_height = $(window).height() - border_padding - margins - header_height - footer_height;
|
||||
factor = Math.min(max_height / height, 1);
|
||||
this.modal_dialog.css('height', 'auto').css('max-height', max_height);
|
||||
return this.resize(factor * width);
|
||||
},
|
||||
resize: function(width) {
|
||||
var width_total;
|
||||
width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
|
||||
this.modal_dialog.css('width', 'auto').css('max-width', width_total);
|
||||
this.lightbox_container.find('a').css('line-height', function() {
|
||||
return $(this).parent().height() + 'px';
|
||||
});
|
||||
return this;
|
||||
},
|
||||
checkDimensions: function(width) {
|
||||
var body_width, width_total;
|
||||
width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
|
||||
body_width = document.body.clientWidth;
|
||||
if (width_total > body_width) {
|
||||
width = this.modal_body.width();
|
||||
}
|
||||
return width;
|
||||
},
|
||||
close: function() {
|
||||
return this.modal.modal('hide');
|
||||
},
|
||||
addTrailingSlash: function(url) {
|
||||
if (url.substr(-1) !== '/') {
|
||||
url += '/';
|
||||
}
|
||||
return url;
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.ekkoLightbox = function(options) {
|
||||
return this.each(function() {
|
||||
var $this;
|
||||
$this = $(this);
|
||||
options = $.extend({
|
||||
remote: $this.attr('data-remote') || $this.attr('href'),
|
||||
gallery_parent_selector: $this.attr('data-parent'),
|
||||
type: $this.attr('data-type')
|
||||
}, options, $this.data());
|
||||
new EkkoLightbox(this, options);
|
||||
return this;
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.ekkoLightbox.defaults = {
|
||||
gallery_parent_selector: 'document.body',
|
||||
left_arrow_class: '.glyphicon .glyphicon-chevron-left',
|
||||
right_arrow_class: '.glyphicon .glyphicon-chevron-right',
|
||||
directional_arrows: true,
|
||||
type: null,
|
||||
always_show_close: true,
|
||||
no_related: false,
|
||||
scale_height: true,
|
||||
loadingMessage: 'Loading...',
|
||||
onShow: function() {},
|
||||
onShown: function() {},
|
||||
onHide: function() {},
|
||||
onHidden: function() {},
|
||||
onNavigate: function() {},
|
||||
onContentLoaded: function() {}
|
||||
};
|
||||
|
||||
}).call(this);
|
||||
7
public/assets/js/ekko-lightbox.min.js
vendored
Executable file
7
public/assets/js/ekko-lightbox.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
|
|
@ -4890,6 +4890,59 @@ fieldset[disabled] .btn-yahoo.active {
|
|||
background-color: #3b8ab8;
|
||||
}
|
||||
|
||||
/*!
|
||||
* Lightbox for Bootstrap 3 by @ashleydw
|
||||
* https://github.com/ashleydw/lightbox
|
||||
*
|
||||
* License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
|
||||
*/
|
||||
.ekko-lightbox-container {
|
||||
position: relative;
|
||||
}
|
||||
.ekko-lightbox-nav-overlay {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ekko-lightbox-nav-overlay a {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
height: 100%;
|
||||
width: 49%;
|
||||
display: block;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
-webkit-filter: dropshadow(color=#000, offx=2, offy=2);
|
||||
filter: dropshadow(color=#000, offx=2, offy=2);
|
||||
z-index: 100;
|
||||
}
|
||||
.ekko-lightbox-nav-overlay a:empty {
|
||||
width: 49%;
|
||||
}
|
||||
.ekko-lightbox a:hover {
|
||||
opacity: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ekko-lightbox .glyphicon-chevron-left {
|
||||
padding-left: 15px;
|
||||
float: left;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.ekko-lightbox .glyphicon-chevron-right {
|
||||
padding-right: 15px;
|
||||
float: right;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.ekko-lightbox .modal-footer {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.skin-blue .main-header .logo {
|
||||
background-color: inherit;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -33770,6 +33770,447 @@ S2.define('jquery.mousewheel',[
|
|||
}
|
||||
})(window.jQuery || window.Zepto);
|
||||
|
||||
|
||||
/*
|
||||
Lightbox for Bootstrap 3 by @ashleydw
|
||||
https://github.com/ashleydw/lightbox
|
||||
|
||||
License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
var $, EkkoLightbox;
|
||||
|
||||
$ = jQuery;
|
||||
|
||||
EkkoLightbox = function(element, options) {
|
||||
var content, footer, header;
|
||||
this.options = $.extend({
|
||||
title: null,
|
||||
footer: null,
|
||||
remote: null
|
||||
}, $.fn.ekkoLightbox.defaults, options || {});
|
||||
this.$element = $(element);
|
||||
content = '';
|
||||
this.modal_id = this.options.modal_id ? this.options.modal_id : 'ekkoLightbox-' + Math.floor((Math.random() * 1000) + 1);
|
||||
header = '<div class="modal-header"' + (this.options.title || this.options.always_show_close ? '' : ' style="display:none"') + '><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">' + (this.options.title || " ") + '</h4></div>';
|
||||
footer = '<div class="modal-footer"' + (this.options.footer ? '' : ' style="display:none"') + '>' + this.options.footer + '</div>';
|
||||
$(document.body).append('<div id="' + this.modal_id + '" class="ekko-lightbox modal fade" tabindex="-1"><div class="modal-dialog"><div class="modal-content">' + header + '<div class="modal-body"><div class="ekko-lightbox-container"><div></div></div></div>' + footer + '</div></div></div>');
|
||||
this.modal = $('#' + this.modal_id);
|
||||
this.modal_dialog = this.modal.find('.modal-dialog').first();
|
||||
this.modal_content = this.modal.find('.modal-content').first();
|
||||
this.modal_body = this.modal.find('.modal-body').first();
|
||||
this.modal_header = this.modal.find('.modal-header').first();
|
||||
this.modal_footer = this.modal.find('.modal-footer').first();
|
||||
this.lightbox_container = this.modal_body.find('.ekko-lightbox-container').first();
|
||||
this.lightbox_body = this.lightbox_container.find('> div:first-child').first();
|
||||
this.showLoading();
|
||||
this.modal_arrows = null;
|
||||
this.border = {
|
||||
top: parseFloat(this.modal_dialog.css('border-top-width')) + parseFloat(this.modal_content.css('border-top-width')) + parseFloat(this.modal_body.css('border-top-width')),
|
||||
right: parseFloat(this.modal_dialog.css('border-right-width')) + parseFloat(this.modal_content.css('border-right-width')) + parseFloat(this.modal_body.css('border-right-width')),
|
||||
bottom: parseFloat(this.modal_dialog.css('border-bottom-width')) + parseFloat(this.modal_content.css('border-bottom-width')) + parseFloat(this.modal_body.css('border-bottom-width')),
|
||||
left: parseFloat(this.modal_dialog.css('border-left-width')) + parseFloat(this.modal_content.css('border-left-width')) + parseFloat(this.modal_body.css('border-left-width'))
|
||||
};
|
||||
this.padding = {
|
||||
top: parseFloat(this.modal_dialog.css('padding-top')) + parseFloat(this.modal_content.css('padding-top')) + parseFloat(this.modal_body.css('padding-top')),
|
||||
right: parseFloat(this.modal_dialog.css('padding-right')) + parseFloat(this.modal_content.css('padding-right')) + parseFloat(this.modal_body.css('padding-right')),
|
||||
bottom: parseFloat(this.modal_dialog.css('padding-bottom')) + parseFloat(this.modal_content.css('padding-bottom')) + parseFloat(this.modal_body.css('padding-bottom')),
|
||||
left: parseFloat(this.modal_dialog.css('padding-left')) + parseFloat(this.modal_content.css('padding-left')) + parseFloat(this.modal_body.css('padding-left'))
|
||||
};
|
||||
this.modal.on('show.bs.modal', this.options.onShow.bind(this)).on('shown.bs.modal', (function(_this) {
|
||||
return function() {
|
||||
_this.modal_shown();
|
||||
return _this.options.onShown.call(_this);
|
||||
};
|
||||
})(this)).on('hide.bs.modal', this.options.onHide.bind(this)).on('hidden.bs.modal', (function(_this) {
|
||||
return function() {
|
||||
if (_this.gallery) {
|
||||
$(document).off('keydown.ekkoLightbox');
|
||||
}
|
||||
_this.modal.remove();
|
||||
return _this.options.onHidden.call(_this);
|
||||
};
|
||||
})(this)).modal('show', options);
|
||||
return this.modal;
|
||||
};
|
||||
|
||||
EkkoLightbox.prototype = {
|
||||
modal_shown: function() {
|
||||
var video_id;
|
||||
if (!this.options.remote) {
|
||||
return this.error('No remote target given');
|
||||
} else {
|
||||
this.gallery = this.$element.data('gallery');
|
||||
if (this.gallery) {
|
||||
if (this.options.gallery_parent_selector === 'document.body' || this.options.gallery_parent_selector === '') {
|
||||
this.gallery_items = $(document.body).find('*[data-gallery="' + this.gallery + '"]');
|
||||
} else {
|
||||
this.gallery_items = this.$element.parents(this.options.gallery_parent_selector).first().find('*[data-gallery="' + this.gallery + '"]');
|
||||
}
|
||||
this.gallery_index = this.gallery_items.index(this.$element);
|
||||
$(document).on('keydown.ekkoLightbox', this.navigate.bind(this));
|
||||
if (this.options.directional_arrows && this.gallery_items.length > 1) {
|
||||
this.lightbox_container.append('<div class="ekko-lightbox-nav-overlay"><a href="#" class="' + this.strip_stops(this.options.left_arrow_class) + '"></a><a href="#" class="' + this.strip_stops(this.options.right_arrow_class) + '"></a></div>');
|
||||
this.modal_arrows = this.lightbox_container.find('div.ekko-lightbox-nav-overlay').first();
|
||||
this.lightbox_container.find('a' + this.strip_spaces(this.options.left_arrow_class)).on('click', (function(_this) {
|
||||
return function(event) {
|
||||
event.preventDefault();
|
||||
return _this.navigate_left();
|
||||
};
|
||||
})(this));
|
||||
this.lightbox_container.find('a' + this.strip_spaces(this.options.right_arrow_class)).on('click', (function(_this) {
|
||||
return function(event) {
|
||||
event.preventDefault();
|
||||
return _this.navigate_right();
|
||||
};
|
||||
})(this));
|
||||
}
|
||||
}
|
||||
if (this.options.type) {
|
||||
if (this.options.type === 'image') {
|
||||
return this.preloadImage(this.options.remote, true);
|
||||
} else if (this.options.type === 'youtube' && (video_id = this.getYoutubeId(this.options.remote))) {
|
||||
return this.showYoutubeVideo(video_id);
|
||||
} else if (this.options.type === 'vimeo') {
|
||||
return this.showVimeoVideo(this.options.remote);
|
||||
} else if (this.options.type === 'instagram') {
|
||||
return this.showInstagramVideo(this.options.remote);
|
||||
} else if (this.options.type === 'url') {
|
||||
return this.loadRemoteContent(this.options.remote);
|
||||
} else if (this.options.type === 'video') {
|
||||
return this.showVideoIframe(this.options.remote);
|
||||
} else {
|
||||
return this.error("Could not detect remote target type. Force the type using data-type=\"image|youtube|vimeo|instagram|url|video\"");
|
||||
}
|
||||
} else {
|
||||
return this.detectRemoteType(this.options.remote);
|
||||
}
|
||||
}
|
||||
},
|
||||
strip_stops: function(str) {
|
||||
return str.replace(/\./g, '');
|
||||
},
|
||||
strip_spaces: function(str) {
|
||||
return str.replace(/\s/g, '');
|
||||
},
|
||||
isImage: function(str) {
|
||||
return str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
|
||||
},
|
||||
isSwf: function(str) {
|
||||
return str.match(/\.(swf)((\?|#).*)?$/i);
|
||||
},
|
||||
getYoutubeId: function(str) {
|
||||
var match;
|
||||
match = str.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
|
||||
if (match && match[2].length === 11) {
|
||||
return match[2];
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getVimeoId: function(str) {
|
||||
if (str.indexOf('vimeo') > 0) {
|
||||
return str;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getInstagramId: function(str) {
|
||||
if (str.indexOf('instagram') > 0) {
|
||||
return str;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
navigate: function(event) {
|
||||
event = event || window.event;
|
||||
if (event.keyCode === 39 || event.keyCode === 37) {
|
||||
if (event.keyCode === 39) {
|
||||
return this.navigate_right();
|
||||
} else if (event.keyCode === 37) {
|
||||
return this.navigate_left();
|
||||
}
|
||||
}
|
||||
},
|
||||
navigateTo: function(index) {
|
||||
var next, src;
|
||||
if (index < 0 || index > this.gallery_items.length - 1) {
|
||||
return this;
|
||||
}
|
||||
this.showLoading();
|
||||
this.gallery_index = index;
|
||||
this.$element = $(this.gallery_items.get(this.gallery_index));
|
||||
this.updateTitleAndFooter();
|
||||
src = this.$element.attr('data-remote') || this.$element.attr('href');
|
||||
this.detectRemoteType(src, this.$element.attr('data-type') || false);
|
||||
if (this.gallery_index + 1 < this.gallery_items.length) {
|
||||
next = $(this.gallery_items.get(this.gallery_index + 1), false);
|
||||
src = next.attr('data-remote') || next.attr('href');
|
||||
if (next.attr('data-type') === 'image' || this.isImage(src)) {
|
||||
return this.preloadImage(src, false);
|
||||
}
|
||||
}
|
||||
},
|
||||
navigate_left: function() {
|
||||
if (this.gallery_items.length === 1) {
|
||||
return;
|
||||
}
|
||||
if (this.gallery_index === 0) {
|
||||
this.gallery_index = this.gallery_items.length - 1;
|
||||
} else {
|
||||
this.gallery_index--;
|
||||
}
|
||||
this.options.onNavigate.call(this, 'left', this.gallery_index);
|
||||
return this.navigateTo(this.gallery_index);
|
||||
},
|
||||
navigate_right: function() {
|
||||
if (this.gallery_items.length === 1) {
|
||||
return;
|
||||
}
|
||||
if (this.gallery_index === this.gallery_items.length - 1) {
|
||||
this.gallery_index = 0;
|
||||
} else {
|
||||
this.gallery_index++;
|
||||
}
|
||||
this.options.onNavigate.call(this, 'right', this.gallery_index);
|
||||
return this.navigateTo(this.gallery_index);
|
||||
},
|
||||
detectRemoteType: function(src, type) {
|
||||
var video_id;
|
||||
type = type || false;
|
||||
if (type === 'image' || this.isImage(src)) {
|
||||
this.options.type = 'image';
|
||||
return this.preloadImage(src, true);
|
||||
} else if (type === 'youtube' || (video_id = this.getYoutubeId(src))) {
|
||||
this.options.type = 'youtube';
|
||||
return this.showYoutubeVideo(video_id);
|
||||
} else if (type === 'vimeo' || (video_id = this.getVimeoId(src))) {
|
||||
this.options.type = 'vimeo';
|
||||
return this.showVimeoVideo(video_id);
|
||||
} else if (type === 'instagram' || (video_id = this.getInstagramId(src))) {
|
||||
this.options.type = 'instagram';
|
||||
return this.showInstagramVideo(video_id);
|
||||
} else if (type === 'video') {
|
||||
this.options.type = 'video';
|
||||
return this.showVideoIframe(video_id);
|
||||
} else {
|
||||
this.options.type = 'url';
|
||||
return this.loadRemoteContent(src);
|
||||
}
|
||||
},
|
||||
updateTitleAndFooter: function() {
|
||||
var caption, footer, header, title;
|
||||
header = this.modal_content.find('.modal-header');
|
||||
footer = this.modal_content.find('.modal-footer');
|
||||
title = this.$element.data('title') || "";
|
||||
caption = this.$element.data('footer') || "";
|
||||
if (title || this.options.always_show_close) {
|
||||
header.css('display', '').find('.modal-title').html(title || " ");
|
||||
} else {
|
||||
header.css('display', 'none');
|
||||
}
|
||||
if (caption) {
|
||||
footer.css('display', '').html(caption);
|
||||
} else {
|
||||
footer.css('display', 'none');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
showLoading: function() {
|
||||
this.lightbox_body.html('<div class="modal-loading">' + this.options.loadingMessage + '</div>');
|
||||
return this;
|
||||
},
|
||||
showYoutubeVideo: function(id) {
|
||||
var height, rel, width;
|
||||
if ((this.$element.attr('data-norelated') != null) || this.options.no_related) {
|
||||
rel = "&rel=0";
|
||||
} else {
|
||||
rel = "";
|
||||
}
|
||||
width = this.checkDimensions(this.$element.data('width') || 560);
|
||||
height = width / (560 / 315);
|
||||
return this.showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + rel, width, height);
|
||||
},
|
||||
showVimeoVideo: function(id) {
|
||||
var height, width;
|
||||
width = this.checkDimensions(this.$element.data('width') || 560);
|
||||
height = width / (500 / 281);
|
||||
return this.showVideoIframe(id + '?autoplay=1', width, height);
|
||||
},
|
||||
showInstagramVideo: function(id) {
|
||||
var height, width;
|
||||
width = this.checkDimensions(this.$element.data('width') || 612);
|
||||
this.resize(width);
|
||||
height = width + 80;
|
||||
this.lightbox_body.html('<iframe width="' + width + '" height="' + height + '" src="' + this.addTrailingSlash(id) + 'embed/" frameborder="0" allowfullscreen></iframe>');
|
||||
this.options.onContentLoaded.call(this);
|
||||
if (this.modal_arrows) {
|
||||
return this.modal_arrows.css('display', 'none');
|
||||
}
|
||||
},
|
||||
showVideoIframe: function(url, width, height) {
|
||||
height = height || width;
|
||||
this.resize(width);
|
||||
this.lightbox_body.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="' + width + '" height="' + height + '" src="' + url + '" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>');
|
||||
this.options.onContentLoaded.call(this);
|
||||
if (this.modal_arrows) {
|
||||
this.modal_arrows.css('display', 'none');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
loadRemoteContent: function(url) {
|
||||
var disableExternalCheck, width;
|
||||
width = this.$element.data('width') || 560;
|
||||
this.resize(width);
|
||||
disableExternalCheck = this.$element.data('disableExternalCheck') || false;
|
||||
if (!disableExternalCheck && !this.isExternal(url)) {
|
||||
this.lightbox_body.load(url, $.proxy((function(_this) {
|
||||
return function() {
|
||||
return _this.$element.trigger('loaded.bs.modal');
|
||||
};
|
||||
})(this)));
|
||||
} else {
|
||||
this.lightbox_body.html('<iframe width="' + width + '" height="' + width + '" src="' + url + '" frameborder="0" allowfullscreen></iframe>');
|
||||
this.options.onContentLoaded.call(this);
|
||||
}
|
||||
if (this.modal_arrows) {
|
||||
this.modal_arrows.css('display', 'none');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
isExternal: function(url) {
|
||||
var match;
|
||||
match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
|
||||
if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) {
|
||||
return true;
|
||||
}
|
||||
if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":(" + {
|
||||
"http:": 80,
|
||||
"https:": 443
|
||||
}[location.protocol] + ")?$"), "") !== location.host) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
error: function(message) {
|
||||
this.lightbox_body.html(message);
|
||||
return this;
|
||||
},
|
||||
preloadImage: function(src, onLoadShowImage) {
|
||||
var img;
|
||||
img = new Image();
|
||||
if ((onLoadShowImage == null) || onLoadShowImage === true) {
|
||||
img.onload = (function(_this) {
|
||||
return function() {
|
||||
var image;
|
||||
image = $('<img />');
|
||||
image.attr('src', img.src);
|
||||
image.addClass('img-responsive');
|
||||
_this.lightbox_body.html(image);
|
||||
if (_this.modal_arrows) {
|
||||
_this.modal_arrows.css('display', 'block');
|
||||
}
|
||||
return image.load(function() {
|
||||
if (_this.options.scale_height) {
|
||||
_this.scaleHeight(img.height, img.width);
|
||||
} else {
|
||||
_this.resize(img.width);
|
||||
}
|
||||
return _this.options.onContentLoaded.call(_this);
|
||||
});
|
||||
};
|
||||
})(this);
|
||||
img.onerror = (function(_this) {
|
||||
return function() {
|
||||
return _this.error('Failed to load image: ' + src);
|
||||
};
|
||||
})(this);
|
||||
}
|
||||
img.src = src;
|
||||
return img;
|
||||
},
|
||||
scaleHeight: function(height, width) {
|
||||
var border_padding, factor, footer_height, header_height, margins, max_height;
|
||||
header_height = this.modal_header.outerHeight(true) || 0;
|
||||
footer_height = this.modal_footer.outerHeight(true) || 0;
|
||||
if (!this.modal_footer.is(':visible')) {
|
||||
footer_height = 0;
|
||||
}
|
||||
if (!this.modal_header.is(':visible')) {
|
||||
header_height = 0;
|
||||
}
|
||||
border_padding = this.border.top + this.border.bottom + this.padding.top + this.padding.bottom;
|
||||
margins = parseFloat(this.modal_dialog.css('margin-top')) + parseFloat(this.modal_dialog.css('margin-bottom'));
|
||||
max_height = $(window).height() - border_padding - margins - header_height - footer_height;
|
||||
factor = Math.min(max_height / height, 1);
|
||||
this.modal_dialog.css('height', 'auto').css('max-height', max_height);
|
||||
return this.resize(factor * width);
|
||||
},
|
||||
resize: function(width) {
|
||||
var width_total;
|
||||
width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
|
||||
this.modal_dialog.css('width', 'auto').css('max-width', width_total);
|
||||
this.lightbox_container.find('a').css('line-height', function() {
|
||||
return $(this).parent().height() + 'px';
|
||||
});
|
||||
return this;
|
||||
},
|
||||
checkDimensions: function(width) {
|
||||
var body_width, width_total;
|
||||
width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
|
||||
body_width = document.body.clientWidth;
|
||||
if (width_total > body_width) {
|
||||
width = this.modal_body.width();
|
||||
}
|
||||
return width;
|
||||
},
|
||||
close: function() {
|
||||
return this.modal.modal('hide');
|
||||
},
|
||||
addTrailingSlash: function(url) {
|
||||
if (url.substr(-1) !== '/') {
|
||||
url += '/';
|
||||
}
|
||||
return url;
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.ekkoLightbox = function(options) {
|
||||
return this.each(function() {
|
||||
var $this;
|
||||
$this = $(this);
|
||||
options = $.extend({
|
||||
remote: $this.attr('data-remote') || $this.attr('href'),
|
||||
gallery_parent_selector: $this.attr('data-parent'),
|
||||
type: $this.attr('data-type')
|
||||
}, options, $this.data());
|
||||
new EkkoLightbox(this, options);
|
||||
return this;
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.ekkoLightbox.defaults = {
|
||||
gallery_parent_selector: 'document.body',
|
||||
left_arrow_class: '.glyphicon .glyphicon-chevron-left',
|
||||
right_arrow_class: '.glyphicon .glyphicon-chevron-right',
|
||||
directional_arrows: true,
|
||||
type: null,
|
||||
always_show_close: true,
|
||||
no_related: false,
|
||||
scale_height: true,
|
||||
loadingMessage: 'Loading...',
|
||||
onShow: function() {},
|
||||
onShown: function() {},
|
||||
onHide: function() {},
|
||||
onHidden: function() {},
|
||||
onNavigate: function() {},
|
||||
onContentLoaded: function() {}
|
||||
};
|
||||
|
||||
}).call(this);
|
||||
|
||||
/**
|
||||
* Module containing core application logic.
|
||||
* @param {jQuery} $ Insulated jQuery object
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"assets/css/app.css": "assets/css/app-9d069e8b08.css",
|
||||
"assets/js/all.js": "assets/js/all-e475e3820a.js"
|
||||
"assets/css/app.css": "assets/css/app-aa4905dc46.css",
|
||||
"assets/js/all.js": "assets/js/all-640cf0ee36.js"
|
||||
}
|
||||
440
resources/assets/js/ekko-lightbox.js
Executable file
440
resources/assets/js/ekko-lightbox.js
Executable file
|
|
@ -0,0 +1,440 @@
|
|||
|
||||
/*
|
||||
Lightbox for Bootstrap 3 by @ashleydw
|
||||
https://github.com/ashleydw/lightbox
|
||||
|
||||
License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
var $, EkkoLightbox;
|
||||
|
||||
$ = jQuery;
|
||||
|
||||
EkkoLightbox = function(element, options) {
|
||||
var content, footer, header;
|
||||
this.options = $.extend({
|
||||
title: null,
|
||||
footer: null,
|
||||
remote: null
|
||||
}, $.fn.ekkoLightbox.defaults, options || {});
|
||||
this.$element = $(element);
|
||||
content = '';
|
||||
this.modal_id = this.options.modal_id ? this.options.modal_id : 'ekkoLightbox-' + Math.floor((Math.random() * 1000) + 1);
|
||||
header = '<div class="modal-header"' + (this.options.title || this.options.always_show_close ? '' : ' style="display:none"') + '><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">' + (this.options.title || " ") + '</h4></div>';
|
||||
footer = '<div class="modal-footer"' + (this.options.footer ? '' : ' style="display:none"') + '>' + this.options.footer + '</div>';
|
||||
$(document.body).append('<div id="' + this.modal_id + '" class="ekko-lightbox modal fade" tabindex="-1"><div class="modal-dialog"><div class="modal-content">' + header + '<div class="modal-body"><div class="ekko-lightbox-container"><div></div></div></div>' + footer + '</div></div></div>');
|
||||
this.modal = $('#' + this.modal_id);
|
||||
this.modal_dialog = this.modal.find('.modal-dialog').first();
|
||||
this.modal_content = this.modal.find('.modal-content').first();
|
||||
this.modal_body = this.modal.find('.modal-body').first();
|
||||
this.modal_header = this.modal.find('.modal-header').first();
|
||||
this.modal_footer = this.modal.find('.modal-footer').first();
|
||||
this.lightbox_container = this.modal_body.find('.ekko-lightbox-container').first();
|
||||
this.lightbox_body = this.lightbox_container.find('> div:first-child').first();
|
||||
this.showLoading();
|
||||
this.modal_arrows = null;
|
||||
this.border = {
|
||||
top: parseFloat(this.modal_dialog.css('border-top-width')) + parseFloat(this.modal_content.css('border-top-width')) + parseFloat(this.modal_body.css('border-top-width')),
|
||||
right: parseFloat(this.modal_dialog.css('border-right-width')) + parseFloat(this.modal_content.css('border-right-width')) + parseFloat(this.modal_body.css('border-right-width')),
|
||||
bottom: parseFloat(this.modal_dialog.css('border-bottom-width')) + parseFloat(this.modal_content.css('border-bottom-width')) + parseFloat(this.modal_body.css('border-bottom-width')),
|
||||
left: parseFloat(this.modal_dialog.css('border-left-width')) + parseFloat(this.modal_content.css('border-left-width')) + parseFloat(this.modal_body.css('border-left-width'))
|
||||
};
|
||||
this.padding = {
|
||||
top: parseFloat(this.modal_dialog.css('padding-top')) + parseFloat(this.modal_content.css('padding-top')) + parseFloat(this.modal_body.css('padding-top')),
|
||||
right: parseFloat(this.modal_dialog.css('padding-right')) + parseFloat(this.modal_content.css('padding-right')) + parseFloat(this.modal_body.css('padding-right')),
|
||||
bottom: parseFloat(this.modal_dialog.css('padding-bottom')) + parseFloat(this.modal_content.css('padding-bottom')) + parseFloat(this.modal_body.css('padding-bottom')),
|
||||
left: parseFloat(this.modal_dialog.css('padding-left')) + parseFloat(this.modal_content.css('padding-left')) + parseFloat(this.modal_body.css('padding-left'))
|
||||
};
|
||||
this.modal.on('show.bs.modal', this.options.onShow.bind(this)).on('shown.bs.modal', (function(_this) {
|
||||
return function() {
|
||||
_this.modal_shown();
|
||||
return _this.options.onShown.call(_this);
|
||||
};
|
||||
})(this)).on('hide.bs.modal', this.options.onHide.bind(this)).on('hidden.bs.modal', (function(_this) {
|
||||
return function() {
|
||||
if (_this.gallery) {
|
||||
$(document).off('keydown.ekkoLightbox');
|
||||
}
|
||||
_this.modal.remove();
|
||||
return _this.options.onHidden.call(_this);
|
||||
};
|
||||
})(this)).modal('show', options);
|
||||
return this.modal;
|
||||
};
|
||||
|
||||
EkkoLightbox.prototype = {
|
||||
modal_shown: function() {
|
||||
var video_id;
|
||||
if (!this.options.remote) {
|
||||
return this.error('No remote target given');
|
||||
} else {
|
||||
this.gallery = this.$element.data('gallery');
|
||||
if (this.gallery) {
|
||||
if (this.options.gallery_parent_selector === 'document.body' || this.options.gallery_parent_selector === '') {
|
||||
this.gallery_items = $(document.body).find('*[data-gallery="' + this.gallery + '"]');
|
||||
} else {
|
||||
this.gallery_items = this.$element.parents(this.options.gallery_parent_selector).first().find('*[data-gallery="' + this.gallery + '"]');
|
||||
}
|
||||
this.gallery_index = this.gallery_items.index(this.$element);
|
||||
$(document).on('keydown.ekkoLightbox', this.navigate.bind(this));
|
||||
if (this.options.directional_arrows && this.gallery_items.length > 1) {
|
||||
this.lightbox_container.append('<div class="ekko-lightbox-nav-overlay"><a href="#" class="' + this.strip_stops(this.options.left_arrow_class) + '"></a><a href="#" class="' + this.strip_stops(this.options.right_arrow_class) + '"></a></div>');
|
||||
this.modal_arrows = this.lightbox_container.find('div.ekko-lightbox-nav-overlay').first();
|
||||
this.lightbox_container.find('a' + this.strip_spaces(this.options.left_arrow_class)).on('click', (function(_this) {
|
||||
return function(event) {
|
||||
event.preventDefault();
|
||||
return _this.navigate_left();
|
||||
};
|
||||
})(this));
|
||||
this.lightbox_container.find('a' + this.strip_spaces(this.options.right_arrow_class)).on('click', (function(_this) {
|
||||
return function(event) {
|
||||
event.preventDefault();
|
||||
return _this.navigate_right();
|
||||
};
|
||||
})(this));
|
||||
}
|
||||
}
|
||||
if (this.options.type) {
|
||||
if (this.options.type === 'image') {
|
||||
return this.preloadImage(this.options.remote, true);
|
||||
} else if (this.options.type === 'youtube' && (video_id = this.getYoutubeId(this.options.remote))) {
|
||||
return this.showYoutubeVideo(video_id);
|
||||
} else if (this.options.type === 'vimeo') {
|
||||
return this.showVimeoVideo(this.options.remote);
|
||||
} else if (this.options.type === 'instagram') {
|
||||
return this.showInstagramVideo(this.options.remote);
|
||||
} else if (this.options.type === 'url') {
|
||||
return this.loadRemoteContent(this.options.remote);
|
||||
} else if (this.options.type === 'video') {
|
||||
return this.showVideoIframe(this.options.remote);
|
||||
} else {
|
||||
return this.error("Could not detect remote target type. Force the type using data-type=\"image|youtube|vimeo|instagram|url|video\"");
|
||||
}
|
||||
} else {
|
||||
return this.detectRemoteType(this.options.remote);
|
||||
}
|
||||
}
|
||||
},
|
||||
strip_stops: function(str) {
|
||||
return str.replace(/\./g, '');
|
||||
},
|
||||
strip_spaces: function(str) {
|
||||
return str.replace(/\s/g, '');
|
||||
},
|
||||
isImage: function(str) {
|
||||
return str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
|
||||
},
|
||||
isSwf: function(str) {
|
||||
return str.match(/\.(swf)((\?|#).*)?$/i);
|
||||
},
|
||||
getYoutubeId: function(str) {
|
||||
var match;
|
||||
match = str.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
|
||||
if (match && match[2].length === 11) {
|
||||
return match[2];
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getVimeoId: function(str) {
|
||||
if (str.indexOf('vimeo') > 0) {
|
||||
return str;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getInstagramId: function(str) {
|
||||
if (str.indexOf('instagram') > 0) {
|
||||
return str;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
navigate: function(event) {
|
||||
event = event || window.event;
|
||||
if (event.keyCode === 39 || event.keyCode === 37) {
|
||||
if (event.keyCode === 39) {
|
||||
return this.navigate_right();
|
||||
} else if (event.keyCode === 37) {
|
||||
return this.navigate_left();
|
||||
}
|
||||
}
|
||||
},
|
||||
navigateTo: function(index) {
|
||||
var next, src;
|
||||
if (index < 0 || index > this.gallery_items.length - 1) {
|
||||
return this;
|
||||
}
|
||||
this.showLoading();
|
||||
this.gallery_index = index;
|
||||
this.$element = $(this.gallery_items.get(this.gallery_index));
|
||||
this.updateTitleAndFooter();
|
||||
src = this.$element.attr('data-remote') || this.$element.attr('href');
|
||||
this.detectRemoteType(src, this.$element.attr('data-type') || false);
|
||||
if (this.gallery_index + 1 < this.gallery_items.length) {
|
||||
next = $(this.gallery_items.get(this.gallery_index + 1), false);
|
||||
src = next.attr('data-remote') || next.attr('href');
|
||||
if (next.attr('data-type') === 'image' || this.isImage(src)) {
|
||||
return this.preloadImage(src, false);
|
||||
}
|
||||
}
|
||||
},
|
||||
navigate_left: function() {
|
||||
if (this.gallery_items.length === 1) {
|
||||
return;
|
||||
}
|
||||
if (this.gallery_index === 0) {
|
||||
this.gallery_index = this.gallery_items.length - 1;
|
||||
} else {
|
||||
this.gallery_index--;
|
||||
}
|
||||
this.options.onNavigate.call(this, 'left', this.gallery_index);
|
||||
return this.navigateTo(this.gallery_index);
|
||||
},
|
||||
navigate_right: function() {
|
||||
if (this.gallery_items.length === 1) {
|
||||
return;
|
||||
}
|
||||
if (this.gallery_index === this.gallery_items.length - 1) {
|
||||
this.gallery_index = 0;
|
||||
} else {
|
||||
this.gallery_index++;
|
||||
}
|
||||
this.options.onNavigate.call(this, 'right', this.gallery_index);
|
||||
return this.navigateTo(this.gallery_index);
|
||||
},
|
||||
detectRemoteType: function(src, type) {
|
||||
var video_id;
|
||||
type = type || false;
|
||||
if (type === 'image' || this.isImage(src)) {
|
||||
this.options.type = 'image';
|
||||
return this.preloadImage(src, true);
|
||||
} else if (type === 'youtube' || (video_id = this.getYoutubeId(src))) {
|
||||
this.options.type = 'youtube';
|
||||
return this.showYoutubeVideo(video_id);
|
||||
} else if (type === 'vimeo' || (video_id = this.getVimeoId(src))) {
|
||||
this.options.type = 'vimeo';
|
||||
return this.showVimeoVideo(video_id);
|
||||
} else if (type === 'instagram' || (video_id = this.getInstagramId(src))) {
|
||||
this.options.type = 'instagram';
|
||||
return this.showInstagramVideo(video_id);
|
||||
} else if (type === 'video') {
|
||||
this.options.type = 'video';
|
||||
return this.showVideoIframe(video_id);
|
||||
} else {
|
||||
this.options.type = 'url';
|
||||
return this.loadRemoteContent(src);
|
||||
}
|
||||
},
|
||||
updateTitleAndFooter: function() {
|
||||
var caption, footer, header, title;
|
||||
header = this.modal_content.find('.modal-header');
|
||||
footer = this.modal_content.find('.modal-footer');
|
||||
title = this.$element.data('title') || "";
|
||||
caption = this.$element.data('footer') || "";
|
||||
if (title || this.options.always_show_close) {
|
||||
header.css('display', '').find('.modal-title').html(title || " ");
|
||||
} else {
|
||||
header.css('display', 'none');
|
||||
}
|
||||
if (caption) {
|
||||
footer.css('display', '').html(caption);
|
||||
} else {
|
||||
footer.css('display', 'none');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
showLoading: function() {
|
||||
this.lightbox_body.html('<div class="modal-loading">' + this.options.loadingMessage + '</div>');
|
||||
return this;
|
||||
},
|
||||
showYoutubeVideo: function(id) {
|
||||
var height, rel, width;
|
||||
if ((this.$element.attr('data-norelated') != null) || this.options.no_related) {
|
||||
rel = "&rel=0";
|
||||
} else {
|
||||
rel = "";
|
||||
}
|
||||
width = this.checkDimensions(this.$element.data('width') || 560);
|
||||
height = width / (560 / 315);
|
||||
return this.showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + rel, width, height);
|
||||
},
|
||||
showVimeoVideo: function(id) {
|
||||
var height, width;
|
||||
width = this.checkDimensions(this.$element.data('width') || 560);
|
||||
height = width / (500 / 281);
|
||||
return this.showVideoIframe(id + '?autoplay=1', width, height);
|
||||
},
|
||||
showInstagramVideo: function(id) {
|
||||
var height, width;
|
||||
width = this.checkDimensions(this.$element.data('width') || 612);
|
||||
this.resize(width);
|
||||
height = width + 80;
|
||||
this.lightbox_body.html('<iframe width="' + width + '" height="' + height + '" src="' + this.addTrailingSlash(id) + 'embed/" frameborder="0" allowfullscreen></iframe>');
|
||||
this.options.onContentLoaded.call(this);
|
||||
if (this.modal_arrows) {
|
||||
return this.modal_arrows.css('display', 'none');
|
||||
}
|
||||
},
|
||||
showVideoIframe: function(url, width, height) {
|
||||
height = height || width;
|
||||
this.resize(width);
|
||||
this.lightbox_body.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="' + width + '" height="' + height + '" src="' + url + '" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>');
|
||||
this.options.onContentLoaded.call(this);
|
||||
if (this.modal_arrows) {
|
||||
this.modal_arrows.css('display', 'none');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
loadRemoteContent: function(url) {
|
||||
var disableExternalCheck, width;
|
||||
width = this.$element.data('width') || 560;
|
||||
this.resize(width);
|
||||
disableExternalCheck = this.$element.data('disableExternalCheck') || false;
|
||||
if (!disableExternalCheck && !this.isExternal(url)) {
|
||||
this.lightbox_body.load(url, $.proxy((function(_this) {
|
||||
return function() {
|
||||
return _this.$element.trigger('loaded.bs.modal');
|
||||
};
|
||||
})(this)));
|
||||
} else {
|
||||
this.lightbox_body.html('<iframe width="' + width + '" height="' + width + '" src="' + url + '" frameborder="0" allowfullscreen></iframe>');
|
||||
this.options.onContentLoaded.call(this);
|
||||
}
|
||||
if (this.modal_arrows) {
|
||||
this.modal_arrows.css('display', 'none');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
isExternal: function(url) {
|
||||
var match;
|
||||
match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
|
||||
if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) {
|
||||
return true;
|
||||
}
|
||||
if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":(" + {
|
||||
"http:": 80,
|
||||
"https:": 443
|
||||
}[location.protocol] + ")?$"), "") !== location.host) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
error: function(message) {
|
||||
this.lightbox_body.html(message);
|
||||
return this;
|
||||
},
|
||||
preloadImage: function(src, onLoadShowImage) {
|
||||
var img;
|
||||
img = new Image();
|
||||
if ((onLoadShowImage == null) || onLoadShowImage === true) {
|
||||
img.onload = (function(_this) {
|
||||
return function() {
|
||||
var image;
|
||||
image = $('<img />');
|
||||
image.attr('src', img.src);
|
||||
image.addClass('img-responsive');
|
||||
_this.lightbox_body.html(image);
|
||||
if (_this.modal_arrows) {
|
||||
_this.modal_arrows.css('display', 'block');
|
||||
}
|
||||
return image.load(function() {
|
||||
if (_this.options.scale_height) {
|
||||
_this.scaleHeight(img.height, img.width);
|
||||
} else {
|
||||
_this.resize(img.width);
|
||||
}
|
||||
return _this.options.onContentLoaded.call(_this);
|
||||
});
|
||||
};
|
||||
})(this);
|
||||
img.onerror = (function(_this) {
|
||||
return function() {
|
||||
return _this.error('Failed to load image: ' + src);
|
||||
};
|
||||
})(this);
|
||||
}
|
||||
img.src = src;
|
||||
return img;
|
||||
},
|
||||
scaleHeight: function(height, width) {
|
||||
var border_padding, factor, footer_height, header_height, margins, max_height;
|
||||
header_height = this.modal_header.outerHeight(true) || 0;
|
||||
footer_height = this.modal_footer.outerHeight(true) || 0;
|
||||
if (!this.modal_footer.is(':visible')) {
|
||||
footer_height = 0;
|
||||
}
|
||||
if (!this.modal_header.is(':visible')) {
|
||||
header_height = 0;
|
||||
}
|
||||
border_padding = this.border.top + this.border.bottom + this.padding.top + this.padding.bottom;
|
||||
margins = parseFloat(this.modal_dialog.css('margin-top')) + parseFloat(this.modal_dialog.css('margin-bottom'));
|
||||
max_height = $(window).height() - border_padding - margins - header_height - footer_height;
|
||||
factor = Math.min(max_height / height, 1);
|
||||
this.modal_dialog.css('height', 'auto').css('max-height', max_height);
|
||||
return this.resize(factor * width);
|
||||
},
|
||||
resize: function(width) {
|
||||
var width_total;
|
||||
width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
|
||||
this.modal_dialog.css('width', 'auto').css('max-width', width_total);
|
||||
this.lightbox_container.find('a').css('line-height', function() {
|
||||
return $(this).parent().height() + 'px';
|
||||
});
|
||||
return this;
|
||||
},
|
||||
checkDimensions: function(width) {
|
||||
var body_width, width_total;
|
||||
width_total = width + this.border.left + this.padding.left + this.padding.right + this.border.right;
|
||||
body_width = document.body.clientWidth;
|
||||
if (width_total > body_width) {
|
||||
width = this.modal_body.width();
|
||||
}
|
||||
return width;
|
||||
},
|
||||
close: function() {
|
||||
return this.modal.modal('hide');
|
||||
},
|
||||
addTrailingSlash: function(url) {
|
||||
if (url.substr(-1) !== '/') {
|
||||
url += '/';
|
||||
}
|
||||
return url;
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.ekkoLightbox = function(options) {
|
||||
return this.each(function() {
|
||||
var $this;
|
||||
$this = $(this);
|
||||
options = $.extend({
|
||||
remote: $this.attr('data-remote') || $this.attr('href'),
|
||||
gallery_parent_selector: $this.attr('data-parent'),
|
||||
type: $this.attr('data-type')
|
||||
}, options, $this.data());
|
||||
new EkkoLightbox(this, options);
|
||||
return this;
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.ekkoLightbox.defaults = {
|
||||
gallery_parent_selector: 'document.body',
|
||||
left_arrow_class: '.glyphicon .glyphicon-chevron-left',
|
||||
right_arrow_class: '.glyphicon .glyphicon-chevron-right',
|
||||
directional_arrows: true,
|
||||
type: null,
|
||||
always_show_close: true,
|
||||
no_related: false,
|
||||
scale_height: true,
|
||||
loadingMessage: 'Loading...',
|
||||
onShow: function() {},
|
||||
onShown: function() {},
|
||||
onHide: function() {},
|
||||
onHidden: function() {},
|
||||
onNavigate: function() {},
|
||||
onContentLoaded: function() {}
|
||||
};
|
||||
|
||||
}).call(this);
|
||||
7
resources/assets/js/ekko-lightbox.min.js
vendored
Executable file
7
resources/assets/js/ekko-lightbox.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
64
resources/assets/less/ekko-lightbox.less
Executable file
64
resources/assets/less/ekko-lightbox.less
Executable file
|
|
@ -0,0 +1,64 @@
|
|||
/*!
|
||||
* Lightbox for Bootstrap 3 by @ashleydw
|
||||
* https://github.com/ashleydw/lightbox
|
||||
*
|
||||
* License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
.ekko-lightbox {
|
||||
&-container {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
&-nav-overlay {
|
||||
z-index:100;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
|
||||
a {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.5s;
|
||||
-moz-transition: opacity 0.5s;
|
||||
-o-transition: opacity 0.5s;
|
||||
transition: opacity 0.5s;
|
||||
color:#fff;
|
||||
font-size:30px;
|
||||
height: 100%;
|
||||
width:49%;
|
||||
display:block;
|
||||
text-shadow: 2px 2px 4px #000;
|
||||
filter: dropshadow(color=#000, offx=2, offy=2);
|
||||
z-index:100;
|
||||
|
||||
&:empty {
|
||||
width:49%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: 1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.glyphicon-chevron-left {
|
||||
padding-left:15px;
|
||||
float:left;
|
||||
left:0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.glyphicon-chevron-right {
|
||||
padding-right:15px;
|
||||
float:right;
|
||||
right:0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
6
resources/assets/less/ekko-lightbox.min.css
vendored
Executable file
6
resources/assets/less/ekko-lightbox.min.css
vendored
Executable file
|
|
@ -0,0 +1,6 @@
|
|||
/*!
|
||||
* Lightbox for Bootstrap 3 by @ashleydw
|
||||
* https://github.com/ashleydw/lightbox
|
||||
*
|
||||
* License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
|
||||
*/.ekko-lightbox-container{position:relative}.ekko-lightbox-nav-overlay{position:absolute;top:0;left:0;z-index:100;width:100%;height:100%}.ekko-lightbox-nav-overlay a{z-index:100;display:block;width:49%;height:100%;font-size:30px;color:#fff;text-shadow:2px 2px 4px #000;opacity:0;filter:dropshadow(color=#000000,offx=2,offy=2);-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-o-transition:opacity .5s;transition:opacity .5s}.ekko-lightbox-nav-overlay a:empty{width:49%}.ekko-lightbox a:hover{text-decoration:none;opacity:1}.ekko-lightbox .glyphicon-chevron-left{left:0;float:left;padding-left:15px;text-align:left}.ekko-lightbox .glyphicon-chevron-right{right:0;float:right;padding-right:15px;text-align:right}.ekko-lightbox .modal-footer{text-align:left}
|
||||
|
|
@ -481,8 +481,9 @@
|
|||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-md-5">{{ trans('general.notes') }}</th>
|
||||
<th class="col-md-5"><span class="line"></span>{{ trans('general.file_name') }}</th>
|
||||
<th class="col-md-4">{{ trans('general.notes') }}</th>
|
||||
<th class="col-md-2"></th>
|
||||
<th class="col-md-4"><span class="line"></span>{{ trans('general.file_name') }}</th>
|
||||
<th class="col-md-2"></th>
|
||||
<th class="col-md-2"></th>
|
||||
</tr>
|
||||
|
|
@ -492,15 +493,17 @@
|
|||
@foreach ($asset->uploads as $file)
|
||||
<tr>
|
||||
<td>
|
||||
@if ($file->note) {{ $file->note }}
|
||||
@if ($file->note)
|
||||
{{ $file->note }}
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
@if (\App\Models\Asset::checkUploadIsImage($file->get_src()))
|
||||
<a class='preview' data-placement="top" data-image-url="showfile/{{ $file->id }}" data-container="body" data-toggle="popover" data-placement="top" >{{ $file->filename }}</a>
|
||||
@else
|
||||
{{ $file->filename }}
|
||||
@endif
|
||||
@if ( \App\Helpers\Helper::checkUploadIsImage($file->get_src('assets')))
|
||||
<a href="../{{ $asset->id }}/showfile/{{ $file->id }}" data-toggle="lightbox" data-type="image"><img src="../{{ $asset->id }}/showfile/{{ $file->id }}"" class="img-thumbnail" style="max-width: 50px;"></a>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
{{ $file->filename }}
|
||||
</td>
|
||||
<td>
|
||||
@if ($file->filename)
|
||||
|
|
@ -535,13 +538,10 @@
|
|||
|
||||
@section('moar_scripts')
|
||||
<script>
|
||||
$('.preview').popover({
|
||||
'trigger':'hover',
|
||||
'html':true,
|
||||
'content':function(){
|
||||
return "<img src='"+$(this).data('imageUrl')+"' style='max-height: 350px; max-width: 250px;'>";
|
||||
}
|
||||
});
|
||||
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
|
||||
event.preventDefault();
|
||||
$(this).ekkoLightbox();
|
||||
});
|
||||
</script>
|
||||
@stop
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue