add files
This commit is contained in:
Andrey Kuvshinov
58
assets/js/vendor/jBox/plugins/jBox.Confirm.css
vendored
Normal file
58
assets/js/vendor/jBox/plugins/jBox.Confirm.css
vendored
Normal file
@@ -0,0 +1,58 @@
|
||||
.jBox-Confirm .jBox-content {
|
||||
text-align: center;
|
||||
padding: 46px 35px;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.jBox-Confirm .jBox-content {
|
||||
padding: 32px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.jBox-Confirm-footer {
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.jBox-Confirm-button {
|
||||
display: block;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
line-height: 46px;
|
||||
height: 46px;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
transition: color .2s, background-color .2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.jBox-Confirm-button-cancel {
|
||||
border-bottom-left-radius: 4px;
|
||||
background: #ddd;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.jBox-Confirm-button-cancel:hover, .jBox-Confirm-button-cancel:active {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.jBox-Confirm-button-cancel:active {
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.jBox-Confirm-button-submit {
|
||||
border-bottom-right-radius: 4px;
|
||||
background: #7d0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.jBox-Confirm-button-submit:hover, .jBox-Confirm-button-submit:active {
|
||||
background: #6c0;
|
||||
}
|
||||
|
||||
.jBox-Confirm-button-submit:active {
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=jBox.Confirm.css.map */
|
||||
97
assets/js/vendor/jBox/plugins/jBox.Confirm.js
vendored
Normal file
97
assets/js/vendor/jBox/plugins/jBox.Confirm.js
vendored
Normal file
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* jBox Confirm plugin: Add a confirm dialog to links, buttons, etc.
|
||||
*
|
||||
* Author: Stephan Wagner <stephanwagner.me@gmail.com> (https://stephanwagner.me)
|
||||
*
|
||||
* License: MIT (https://opensource.org/licenses/MIT)
|
||||
*
|
||||
* Requires: jBox (https://cdn.jsdelivr.net/gh/StephanWagner/jBox@latest/dist/jBox.min.js)
|
||||
*/
|
||||
|
||||
function jBoxConfirmWrapper(jBox, jQuery) {
|
||||
|
||||
new jBox.plugin('Confirm', {
|
||||
|
||||
|
||||
// Options (https://stephanwagner.me/jBox/options#options-confirm)
|
||||
|
||||
confirmButton: 'Submit', // Text for the submit button
|
||||
cancelButton: 'Cancel', // Text for the cancel button
|
||||
confirm: null, // Function to execute when clicking the submit button. By default jBox will use the onclick or href attribute in that order if found
|
||||
cancel: null, // Function to execute when clicking the cancel button
|
||||
closeOnConfirm: true, // Close jBox when the user clicks the confirm button
|
||||
target: window,
|
||||
fixed: true,
|
||||
attach: '[data-confirm]',
|
||||
getContent: 'data-confirm',
|
||||
content: 'Do you really want to do this?',
|
||||
minWidth: 360,
|
||||
maxWidth: 500,
|
||||
blockScroll: true,
|
||||
closeOnEsc: true,
|
||||
closeOnClick: false,
|
||||
closeButton: false,
|
||||
overlay: true,
|
||||
animation: 'zoomIn',
|
||||
preventDefault: true,
|
||||
|
||||
|
||||
// Triggered when jBox is attached to the element
|
||||
|
||||
_onAttach: function (el)
|
||||
{
|
||||
// Extract the href or the onclick event if no submit event is passed
|
||||
if (!this.options.confirm) {
|
||||
var submit = el.attr('onclick') ? el.attr('onclick') : (
|
||||
el.attr('href') ? (
|
||||
el.attr('target') ? 'window.open("' + el.attr('href') + '", "' + el.attr('target') + '");' : 'window.location.href = "' + el.attr('href') + '";'
|
||||
) : '');
|
||||
el.prop('onclick', null).data('jBox-Confirm-submit', submit);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Triggered when jBox was created
|
||||
|
||||
_onCreated: function ()
|
||||
{
|
||||
// Add modal class to mimic jBox modal
|
||||
this.wrapper.addClass('jBox-Modal');
|
||||
|
||||
// Add a footer to the jBox container
|
||||
this.footer = jQuery('<div class="jBox-Confirm-footer"/>');
|
||||
|
||||
jQuery('<div class="jBox-Confirm-button jBox-Confirm-button-cancel"/>')
|
||||
.html(this.options.cancelButton)
|
||||
.click(function () {
|
||||
this.options.cancel && this.options.cancel(this.source);
|
||||
this.close();
|
||||
}.bind(this))
|
||||
.appendTo(this.footer);
|
||||
|
||||
this.submitButton = jQuery('<div class="jBox-Confirm-button jBox-Confirm-button-submit"/>')
|
||||
.html(this.options.confirmButton)
|
||||
.appendTo(this.footer);
|
||||
|
||||
this.footer.appendTo(this.container);
|
||||
},
|
||||
|
||||
|
||||
// Triggered when jBox is opened
|
||||
|
||||
_onOpen: function ()
|
||||
{
|
||||
// Set the new action for the submit button
|
||||
this.submitButton
|
||||
.off('click.jBox-Confirm' + this.id)
|
||||
.on('click.jBox-Confirm' + this.id, function () {
|
||||
this.options.confirm ? this.options.confirm(this.source) : eval(this.source.data('jBox-Confirm-submit'));
|
||||
this.options.closeOnConfirm && this.close();
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
//# sourceMappingURL=jBox.Confirm.js.map
|
||||
199
assets/js/vendor/jBox/plugins/jBox.Image.css
vendored
Normal file
199
assets/js/vendor/jBox/plugins/jBox.Image.css
vendored
Normal file
@@ -0,0 +1,199 @@
|
||||
.jBox-Image .jBox-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.jBox-Image .jBox-content {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.jBox-image-container {
|
||||
background: center center no-repeat;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.jBox-image-label-container {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.jBox-image-label {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
padding: 8px 40px;
|
||||
line-height: 24px;
|
||||
transition: opacity .36s;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.jBox-image-label.expanded {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.jBox-image-label:not(.expanded) {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.jBox-image-label.active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.jBox-image-pointer-next,
|
||||
.jBox-image-pointer-prev {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
opacity: .8;
|
||||
transition: opacity .2s;
|
||||
background: no-repeat center center url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ijc0LjcgMjI0IDE4LjcgMzIiPg0KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTkzLDIyNy40TDgwLjQsMjQwTDkzLDI1Mi42YzAuNCwwLjQsMC40LDEuMSwwLDEuNWwtMS42LDEuNmMtMC40LDAuNC0xLDAuNS0xLjUsMEw3NSwyNDAuN2MtMC40LTAuNC0wLjUtMSwwLTEuNWwxNC45LTE0LjljMC40LTAuNCwxLTAuNCwxLjUsMGwxLjYsMS42QzkzLjUsMjI2LjQsOTMuNCwyMjcsOTMsMjI3LjR6Ii8+DQo8L3N2Zz4=);
|
||||
background-size: 11px auto;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jBox-image-pointer-next:hover,
|
||||
.jBox-image-pointer-prev:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.jBox-image-pointer-next {
|
||||
right: 0;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.jBox-image-pointer-prev {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.jBox-image-counter-container {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jBox-image-has-counter .jBox-image-counter-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.jBox-image-has-counter .jBox-image-label:not(.expanded) {
|
||||
padding-right: 80px;
|
||||
text-indent: 40px;
|
||||
}
|
||||
|
||||
.jBox-overlay.jBox-overlay-Image {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.jBox-image-not-found {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.jBox-image-not-found:before {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-top: -40px;
|
||||
margin-left: -40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border: 5px solid #222;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.jBox-image-not-found:after {
|
||||
content: '';
|
||||
display: block;
|
||||
box-sizing: content-box;
|
||||
z-index: auto;
|
||||
width: 6px;
|
||||
height: 74px;
|
||||
margin-top: -37px;
|
||||
margin-left: -3px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: #222;
|
||||
transform: rotateZ(45deg);
|
||||
transform-origin: 50% 50% 0;
|
||||
}
|
||||
|
||||
.jBox-image-download-button-wrapper {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
right: 35px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
opacity: .8;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
.jBox-image-download-button-wrapper:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.jBox-image-download-button-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: center center no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDE2IDI1NnYtMTkyaC0xOTJ2MTkyaC0xNjBsMjU2IDI1NiAyNTYtMjU2aC0xNjB6TTAgNTc2aDY0MHY2NGgtNjQwdi02NHoiPjwvcGF0aD48L3N2Zz4=);
|
||||
background-size: 60%;
|
||||
}
|
||||
|
||||
.jBox-image-download-button-text {
|
||||
white-space: nowrap;
|
||||
line-height: 40px;
|
||||
padding: 0 10px 0 0;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@keyframes jBoxImageLoading {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.jBox-image-loading:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: -16px;
|
||||
margin-left: -16px;
|
||||
border: 4px solid #333;
|
||||
border-bottom-color: #666;
|
||||
animation: jBoxImageLoading 1.2s linear infinite;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=jBox.Image.css.map */
|
||||
320
assets/js/vendor/jBox/plugins/jBox.Image.js
vendored
Normal file
320
assets/js/vendor/jBox/plugins/jBox.Image.js
vendored
Normal file
@@ -0,0 +1,320 @@
|
||||
/**
|
||||
* jBox Image plugin: Adds a lightbox to your images
|
||||
*
|
||||
* Author: Stephan Wagner <stephanwagner.me@gmail.com> (https://stephanwagner.me)
|
||||
*
|
||||
* License: MIT (https://opensource.org/licenses/MIT)
|
||||
*
|
||||
* Requires: jBox (https://cdn.jsdelivr.net/gh/StephanWagner/jBox@latest/dist/jBox.min.js)
|
||||
*/
|
||||
|
||||
function jBoxImageWrapper(jBox, jQuery) {
|
||||
|
||||
new jBox.plugin('Image', {
|
||||
|
||||
|
||||
// Options (https://stephanwagner.me/jBox/options#options-image)
|
||||
|
||||
src: 'href', // The attribute where jBox gets the image source from, e.g. href="/path_to_image/image.jpg"
|
||||
gallery: 'data-jbox-image', // The attribute to set the galleries, e.g. data-jbox-image="gallery1"
|
||||
imageLabel: 'title', // The attribute where jBox gets the image label from, e.g. title="My label"
|
||||
imageFade: 360, // The fade duration for images in ms
|
||||
imageSize: 'contain', // How to display the images. Use CSS background-position values, e.g. 'cover', 'contain', 'auto', 'initial', '50% 50%'
|
||||
imageCounter: false, // Set to true to add an image counter, e.g. 4/20
|
||||
imageCounterSeparator: '/', // HTML to separate the current image number from all image numbers, e.g. '/' or ' of '
|
||||
downloadButton: false, // Adds a download button
|
||||
downloadButtonText: null, // Text for the download button
|
||||
downloadButtonUrl: null, // The attribute at the source element where to find the image to download, e.g. data-download="/path_to_image/image.jpg". If none provided, the currently active image will be downloaded
|
||||
mobileImageAttr: null, // The attribute to look for an mobile version of the image
|
||||
mobileImageBreakpoint: null, // The upper breakpoint to load the mobile image
|
||||
preloadFirstImage: false, // Preload the first image when page is loaded
|
||||
target: window,
|
||||
attach: '[data-jbox-image]',
|
||||
fixed: true,
|
||||
blockScroll: true,
|
||||
closeOnEsc: true,
|
||||
closeOnClick: 'button',
|
||||
closeButton: true,
|
||||
overlay: true,
|
||||
animation: 'zoomIn',
|
||||
preventDefault: true,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
adjustDistance: {
|
||||
top: 40,
|
||||
right: 5,
|
||||
bottom: 40,
|
||||
left: 5
|
||||
},
|
||||
|
||||
|
||||
// Triggered when jBox is initialized
|
||||
|
||||
_onInit: function ()
|
||||
{
|
||||
// Initial images and z-index
|
||||
this.images = this.currentImage = {};
|
||||
this.imageZIndex = 1;
|
||||
|
||||
this.initImage = function (item) {
|
||||
item = jQuery(item);
|
||||
|
||||
// Abort if the item was added to a gallery already
|
||||
if (item.data('jBox-image-gallery')) return;
|
||||
|
||||
// Get the image src
|
||||
var src = item.attr(this.options.src);
|
||||
|
||||
// Update responsive image src
|
||||
if (this.options.mobileImageAttr && this.options.mobileImageBreakpoint && item.attr(this.options.mobileImageAttr)) {
|
||||
if (jQuery(window).width() <= this.options.mobileImageBreakpoint) {
|
||||
src = item.attr(this.options.mobileImageAttr);
|
||||
}
|
||||
}
|
||||
|
||||
// Add item to a gallery
|
||||
var gallery = item.attr(this.options.gallery) || 'default';
|
||||
!this.images[gallery] && (this.images[gallery] = []);
|
||||
this.images[gallery].push({
|
||||
src: src,
|
||||
label: (item.attr(this.options.imageLabel) || ''),
|
||||
downloadUrl: this.options.downloadButtonUrl && item.attr(this.options.downloadButtonUrl) ? item.attr(this.options.downloadButtonUrl) : null
|
||||
});
|
||||
|
||||
// Remove the title attribute so it won't show the browsers tooltip
|
||||
this.options.imageLabel == 'title' && item.removeAttr('title');
|
||||
|
||||
// Store data in source element for easy access
|
||||
item.data('jBox-image-gallery', gallery);
|
||||
item.data('jBox-image-id', (this.images[gallery].length - 1));
|
||||
}.bind(this);
|
||||
|
||||
// Loop through images, sort and save in global variable
|
||||
this.attachedElements && this.attachedElements.length && jQuery.each(this.attachedElements, function (index, item) {
|
||||
this.initImage(item);
|
||||
}.bind(this));
|
||||
|
||||
// Helper to inject the image into content area
|
||||
var appendImage = function (gallery, id, show, instant) {
|
||||
// Abort if image was appended already
|
||||
if (jQuery('#jBox-image-' + gallery + '-' + id).length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create image container
|
||||
var image = jQuery('<div/>', {
|
||||
id: 'jBox-image-' + gallery + '-' + id,
|
||||
'class': 'jBox-image-container' + (show ? ' jBox-image-' + gallery + '-current' : '')
|
||||
}).css({
|
||||
backgroundSize: this.options.imageSize,
|
||||
opacity: (instant ? 1 : 0),
|
||||
zIndex: (show ? this.imageZIndex++ : 0)
|
||||
}).appendTo(this.content);
|
||||
|
||||
// Create labels
|
||||
jQuery('<div/>', {
|
||||
id: 'jBox-image-label-' + gallery + '-' + id,
|
||||
'class': 'jBox-image-label' + (show ? ' active' : '')
|
||||
}).html(this.images[gallery][id].label).click(function () { jQuery(this).toggleClass('expanded'); }).appendTo(this.imageLabel);
|
||||
|
||||
// Show image
|
||||
show && image.animate({opacity: 1}, instant ? 0 : this.options.imageFade);
|
||||
|
||||
return image;
|
||||
}.bind(this);
|
||||
|
||||
// Function to download an image
|
||||
this.downloadImage = function (imageUrl) {
|
||||
var link = document.createElement('a');
|
||||
link.href = imageUrl;
|
||||
link.setAttribute('download', imageUrl.substring(imageUrl.lastIndexOf('/')+1));
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
};
|
||||
|
||||
// Helper to show new image label
|
||||
var showLabel = function (gallery, id) {
|
||||
jQuery('.jBox-image-label.active').removeClass('active expanded');
|
||||
jQuery('#jBox-image-label-' + gallery + '-' + id).addClass('active');
|
||||
};
|
||||
|
||||
// Helper to load image
|
||||
var loadImage = function (gallery, id, show, instant) {
|
||||
var imageContainer = appendImage(gallery, id, show, instant);
|
||||
imageContainer.addClass('jBox-image-loading');
|
||||
|
||||
jQuery('<img src="' + this.images[gallery][id].src + '" />').each(function () {
|
||||
var tmpImg = new Image();
|
||||
tmpImg.onload = function () {
|
||||
imageContainer.removeClass('jBox-image-loading');
|
||||
imageContainer.css({backgroundImage: 'url("' + this.images[gallery][id].src + '")'});
|
||||
}.bind(this);
|
||||
|
||||
tmpImg.onerror = function () {
|
||||
imageContainer.removeClass('jBox-image-loading');
|
||||
imageContainer.addClass('jBox-image-not-found');
|
||||
}.bind(this);
|
||||
|
||||
tmpImg.src = this.images[gallery][id].src;
|
||||
}.bind(this));
|
||||
}.bind(this);
|
||||
|
||||
// Show images when they are loaded or load them if not
|
||||
this.showImage = function (img) {
|
||||
// Get the gallery and the image id from the next or the previous image
|
||||
if (img != 'open') {
|
||||
var gallery = this.currentImage.gallery;
|
||||
var id = this.currentImage.id + (1 * (img == 'prev') ? -1 : 1);
|
||||
id = id > (this.images[gallery].length - 1) ? 0 : (id < 0 ? (this.images[gallery].length - 1) : id);
|
||||
|
||||
// Or get image data from source element
|
||||
} else {
|
||||
// Get gallery and image id from source element
|
||||
if (this.source) {
|
||||
var gallery = this.source.data('jBox-image-gallery');
|
||||
var id = this.source.data('jBox-image-id');
|
||||
|
||||
// Get gallery and image id attached elements
|
||||
} else if (this.attachedElements && this.attachedElements.length) {
|
||||
var gallery = jQuery(this.attachedElements[0]).data('jBox-image-gallery');
|
||||
var id = jQuery(this.attachedElements[0]).data('jBox-image-id');
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove or show the next and prev buttons
|
||||
jQuery('.jBox-image-pointer-prev, .jBox-image-pointer-next').css({display: (this.images[gallery].length > 1 ? 'block' : 'none')});
|
||||
}
|
||||
|
||||
// If there is a current image already shown, hide it
|
||||
if (jQuery('.jBox-image-' + gallery + '-current').length) {
|
||||
jQuery('.jBox-image-' + gallery + '-current').removeClass('jBox-image-' + gallery + '-current').animate({opacity: 0}, (img == 'open') ? 0 : this.options.imageFade);
|
||||
}
|
||||
|
||||
// Set new current image
|
||||
this.currentImage = {gallery: gallery, id: id};
|
||||
|
||||
// Show image if it already exists
|
||||
if (jQuery('#jBox-image-' + gallery + '-' + id).length) {
|
||||
jQuery('#jBox-image-' + gallery + '-' + id).addClass('jBox-image-' + gallery + '-current').css({zIndex: this.imageZIndex++, opacity: 0}).animate({opacity: 1}, (img == 'open') ? 0 : this.options.imageFade);
|
||||
|
||||
// Load image
|
||||
} else {
|
||||
loadImage(gallery, id, true, (img === 'open'));
|
||||
}
|
||||
|
||||
// Show label
|
||||
showLabel(gallery, id);
|
||||
|
||||
// Update the image counter numbers
|
||||
if (this.imageCounter) {
|
||||
if (this.images[gallery].length > 1) {
|
||||
this.wrapper.addClass('jBox-image-has-counter');
|
||||
this.imageCounter.find('.jBox-image-counter-all').html(this.images[gallery].length);
|
||||
this.imageCounter.find('.jBox-image-counter-current').html(id + 1);
|
||||
} else {
|
||||
this.wrapper.removeClass('jBox-image-has-counter');
|
||||
}
|
||||
}
|
||||
|
||||
// Preload next image
|
||||
if (this.images[gallery].length - 1) {
|
||||
var next_id = id + 1;
|
||||
next_id = next_id > (this.images[gallery].length - 1) ? 0 : (next_id < 0 ? (this.images[gallery].length - 1) : next_id);
|
||||
|
||||
if (!jQuery('#jBox-image-' + gallery + '-' + next_id).length) {
|
||||
loadImage(gallery, next_id, false, false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Preload image
|
||||
if (this.options.preloadFirstImage) {
|
||||
jQuery(window).on('load', function() {
|
||||
this.showImage('open');
|
||||
}.bind(this));
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Triggered when jBox attaches a new element
|
||||
|
||||
_onAttach: function (item) {
|
||||
this.initImage && this.initImage(item);
|
||||
},
|
||||
|
||||
|
||||
// Triggered when jBox was created
|
||||
|
||||
_onCreated: function ()
|
||||
{
|
||||
// Append image label containers
|
||||
this.imageLabel = jQuery('<div/>', {'class': 'jBox-image-label-container'}).appendTo(this.wrapper);
|
||||
this.imageLabel.append(jQuery('<div/>', {'class': 'jBox-image-pointer-prev', click: function () { this.showImage('prev'); }.bind(this)})).append(jQuery('<div/>', {'class': 'jBox-image-pointer-next', click: function () { this.showImage('next'); }.bind(this)}));
|
||||
|
||||
// Append the download button
|
||||
if (this.options.downloadButton) {
|
||||
this.downloadButton = jQuery('<div/>', {'class': 'jBox-image-download-button-wrapper'})
|
||||
.appendTo(this.wrapper)
|
||||
.append(
|
||||
this.options.downloadButtonText ? jQuery('<div/>', {'class': 'jBox-image-download-button-text'}).html(this.options.downloadButtonText) : null
|
||||
)
|
||||
.append(
|
||||
jQuery('<div/>', {'class': 'jBox-image-download-button-icon'})
|
||||
).on('click touchdown', function () {
|
||||
if (this.images[this.currentImage.gallery][this.currentImage.id].downloadUrl) {
|
||||
var currentImageUrl = this.images[this.currentImage.gallery][this.currentImage.id].downloadUrl;
|
||||
} else {
|
||||
var currentImage = this.wrapper.find('.jBox-image-' + this.currentImage.gallery + '-current');
|
||||
var currentImageStyle = currentImage[0].style.backgroundImage;
|
||||
var currentImageUrl = currentImageStyle.slice(4, -1).replace(/["']/g, '');
|
||||
}
|
||||
this.downloadImage(currentImageUrl);
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
// Creating the image counter containers
|
||||
if (this.options.imageCounter) {
|
||||
this.imageCounter = jQuery('<div/>', {'class': 'jBox-image-counter-container'}).appendTo(this.wrapper);
|
||||
this.imageCounter.append(jQuery('<span/>', {'class': 'jBox-image-counter-current'})).append(jQuery('<span/>').html(this.options.imageCounterSeparator)).append(jQuery('<span/>', {'class': 'jBox-image-counter-all'}));
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Triggered when jBox opens
|
||||
|
||||
_onOpen: function ()
|
||||
{
|
||||
// Add key events
|
||||
jQuery(document).on('keyup.jBox-Image-' + this.id, function (ev) {
|
||||
(ev.keyCode == 37) && this.showImage('prev');
|
||||
(ev.keyCode == 39) && this.showImage('next');
|
||||
}.bind(this));
|
||||
|
||||
// Load the image from the attached element
|
||||
this.showImage('open');
|
||||
},
|
||||
|
||||
|
||||
// Triggered when jBox closes
|
||||
|
||||
_onClose: function ()
|
||||
{
|
||||
// Remove key events
|
||||
jQuery(document).off('keyup.jBox-Image-' + this.id);
|
||||
},
|
||||
|
||||
|
||||
// Triggered when jBox finished closing
|
||||
|
||||
_onCloseComplete: function ()
|
||||
{
|
||||
// Hide all image containers
|
||||
this.wrapper.find('.jBox-image-container').css('opacity', 0);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
//# sourceMappingURL=jBox.Image.js.map
|
||||
122
assets/js/vendor/jBox/plugins/jBox.Notice.css
vendored
Normal file
122
assets/js/vendor/jBox/plugins/jBox.Notice.css
vendored
Normal file
@@ -0,0 +1,122 @@
|
||||
.jBox-Notice {
|
||||
transition: margin .2s;
|
||||
}
|
||||
|
||||
.jBox-Notice .jBox-container {
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.25), inset -1px -1px 0 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.jBox-Notice .jBox-content {
|
||||
border-radius: 4px;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.jBox-Notice .jBox-content {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.jBox-Notice .jBox-content {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-hasTitle .jBox-content {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.jBox-Notice.jBox-hasTitle .jBox-content {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-hasTitle .jBox-title {
|
||||
padding: 12px 20px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.jBox-Notice.jBox-hasTitle .jBox-title {
|
||||
padding: 10px 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.jBox-Notice.jBox-hasTitle .jBox-title {
|
||||
padding: 8px 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-closeButton-title .jBox-title {
|
||||
padding-right: 55px;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-Notice-black .jBox-container {
|
||||
color: #fff;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-Notice-black.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path,
|
||||
.jBox-Notice.jBox-Notice-black.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-Notice-gray .jBox-container {
|
||||
color: #222;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-Notice-gray.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path,
|
||||
.jBox-Notice.jBox-Notice-gray.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path {
|
||||
fill: #222;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-Notice-red .jBox-container {
|
||||
color: #fff;
|
||||
background: #d00;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-Notice-red.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path,
|
||||
.jBox-Notice.jBox-Notice-red.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-Notice-green .jBox-container {
|
||||
color: #fff;
|
||||
background: #5d0;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-Notice-green.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path,
|
||||
.jBox-Notice.jBox-Notice-green.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-Notice-blue .jBox-container {
|
||||
color: #fff;
|
||||
background: #49d;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-Notice-blue.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path,
|
||||
.jBox-Notice.jBox-Notice-blue.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-Notice-yellow .jBox-container {
|
||||
color: #000;
|
||||
background: #fd0;
|
||||
}
|
||||
|
||||
.jBox-Notice.jBox-Notice-yellow.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton path,
|
||||
.jBox-Notice.jBox-Notice-yellow.jBox-closeButton-title.jBox-hasTitle .jBox-closeButton:hover path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=jBox.Notice.css.map */
|
||||
173
assets/js/vendor/jBox/plugins/jBox.Notice.js
vendored
Normal file
173
assets/js/vendor/jBox/plugins/jBox.Notice.js
vendored
Normal file
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* jBox Notice plugin: Opens a popup notice
|
||||
*
|
||||
* Author: Stephan Wagner <stephanwagner.me@gmail.com> (https://stephanwagner.me)
|
||||
*
|
||||
* License: MIT (https://opensource.org/licenses/MIT)
|
||||
*
|
||||
* Requires: jBox (https://cdn.jsdelivr.net/gh/StephanWagner/jBox@latest/dist/jBox.min.js)
|
||||
*/
|
||||
|
||||
function jBoxNoticeWrapper(jBox, jQuery) {
|
||||
|
||||
new jBox.plugin('Notice', {
|
||||
|
||||
|
||||
// Options (https://stephanwagner.me/jBox/options#options-notice)
|
||||
|
||||
color: null, // Add a color to your notices, use 'gray' (default), 'black', 'red', 'green', 'blue' or 'yellow'
|
||||
stack: true, // Set to false to disable notice-stacking
|
||||
stackSpacing: 10, // Spacing between notices when they stack
|
||||
autoClose: 6000, // Time in ms after which the notice will disappear
|
||||
attributes: { // Defines where the notice will pop up
|
||||
x: 'right', // 'left' or 'right'
|
||||
y: 'top' // 'top' or 'bottom'
|
||||
},
|
||||
position: { // Defines the distance to the viewport boundary
|
||||
x: 15,
|
||||
y: 15
|
||||
},
|
||||
responsivePositions: { // Responsive positions
|
||||
500: { // The key defines the maximum width of the viewport, the values will replace the default position options
|
||||
x: 5, // Start with the lowest viewport
|
||||
y: 5
|
||||
},
|
||||
768: {
|
||||
x: 10,
|
||||
y: 10
|
||||
}
|
||||
},
|
||||
target: window,
|
||||
fixed: true,
|
||||
animation: 'zoomIn',
|
||||
closeOnClick: 'box',
|
||||
zIndex: 12000,
|
||||
|
||||
|
||||
// Triggered when notice is initialized
|
||||
|
||||
_onInit: function ()
|
||||
{
|
||||
// Cache position values
|
||||
this.defaultNoticePosition = jQuery.extend({}, this.options.position);
|
||||
|
||||
// Type Notice has its own adjust position function
|
||||
this._adjustNoticePositon = function () {
|
||||
var win = jQuery(window);
|
||||
var windowDimensions = {
|
||||
x: win.width(),
|
||||
y: win.height()
|
||||
};
|
||||
|
||||
// Reset default position
|
||||
this.options.position = jQuery.extend({}, this.defaultNoticePosition);
|
||||
|
||||
// Adjust depending on viewport
|
||||
jQuery.each(this.options.responsivePositions, function (viewport, position) {
|
||||
if (windowDimensions.x <= viewport) {
|
||||
this.options.position = position;
|
||||
return false;
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
// Set new padding options
|
||||
this.options.adjustDistance = {
|
||||
top: this.options.position.y,
|
||||
right: this.options.position.x,
|
||||
bottom: this.options.position.y,
|
||||
left: this.options.position.x
|
||||
};
|
||||
};
|
||||
|
||||
// If jBox grabs an element as content, crab a clone instead
|
||||
this.options.content instanceof jQuery && (this.options.content = this.options.content.clone().attr('id', ''));
|
||||
|
||||
// Adjust paddings when window resizes
|
||||
jQuery(window).on('resize.responsivejBoxNotice-' + this.id, function (ev) { if (this.isOpen) { this._adjustNoticePositon(); } }.bind(this));
|
||||
|
||||
this.open();
|
||||
},
|
||||
|
||||
|
||||
// Triggered when notice was created
|
||||
|
||||
_onCreated: function ()
|
||||
{
|
||||
// Add color class
|
||||
this.wrapper.addClass('jBox-Notice-color jBox-Notice-' + (this.options.color || 'gray'));
|
||||
|
||||
// Store position in jBox wrapper
|
||||
this.wrapper.data('jBox-Notice-position', this.options.attributes.x + '-' + this.options.attributes.y);
|
||||
},
|
||||
|
||||
|
||||
// Triggered when notice opens
|
||||
|
||||
_onOpen: function ()
|
||||
{
|
||||
// Bail if we're stacking
|
||||
if (this.options.stack) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Adjust position when opening
|
||||
this._adjustNoticePositon();
|
||||
|
||||
// Loop through notices at same window corner destroy them
|
||||
jQuery.each(jQuery('.jBox-Notice'), function (index, el)
|
||||
{
|
||||
el = jQuery(el);
|
||||
|
||||
// Abort if the element is this notice or when it's not at the same position
|
||||
if (el.attr('id') == this.id || el.data('jBox-Notice-position') != this.options.attributes.x + '-' + this.options.attributes.y) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove notice when we don't wont to stack them
|
||||
if (!this.options.stack) {
|
||||
el.data('jBox').close({ignoreDelay: true});
|
||||
return;
|
||||
}
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
// Triggered when resizing window etc.
|
||||
|
||||
_onPosition: function ()
|
||||
{
|
||||
var stacks = {};
|
||||
jQuery.each(jQuery('.jBox-Notice'), function (index, el)
|
||||
{
|
||||
el = jQuery(el);
|
||||
var pos = el.data('jBox-Notice-position');
|
||||
if (!stacks[pos]) {
|
||||
stacks[pos] = [];
|
||||
}
|
||||
stacks[pos].push(el);
|
||||
});
|
||||
for (var pos in stacks) {
|
||||
var position = pos.split('-');
|
||||
var direction = position[1];
|
||||
stacks[pos].reverse();
|
||||
var margin = 0;
|
||||
for (var i in stacks[pos]) {
|
||||
el = stacks[pos][i];
|
||||
el.css('margin-' + direction, margin);
|
||||
margin += el.outerHeight() + this.options.stackSpacing;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Remove notice from DOM and reposition other notices when closing finishes
|
||||
|
||||
_onCloseComplete: function ()
|
||||
{
|
||||
this.destroy();
|
||||
this.options._onPosition.bind(this).call();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
//# sourceMappingURL=jBox.Notice.js.map
|
||||
Reference in New Issue
Block a user