esqueleto basico

This commit is contained in:
Sergio 2017-09-25 14:03:53 +02:00
parent 8eb441e5f5
commit 0dc723713d
350 changed files with 90726 additions and 0 deletions

View file

@ -0,0 +1,58 @@
.jBox-Confirm .jBox-content {
text-align: center;
padding: 46px 35px;
}
.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-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-cancel:active,
.jBox-Confirm-button-submit:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
@media (max-width: 500px) {
.jBox-Confirm .jBox-content {
padding: 32px 20px;
}
}

View file

@ -0,0 +1,74 @@
/**
* jBox Confirm plugin: Add a confirm dialog to links, buttons, etc.
*
* Author: Stephan Wagner (https://stephanwagner.me)
*
* License: MIT (https://opensource.org/licenses/MIT)
*
* Requires: jBox (https://code.jboxcdn.com/jBox.min.js)
*/
jQuery(document).ready(function () {
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,
addClass: 'jBox-Modal',
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 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.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() : eval(this.source.data('jBox-Confirm-submit')); this.options.closeOnConfirm && this.close(); }.bind(this));
}
});
});

View file

@ -0,0 +1 @@
jQuery(document).ready(function(){new jBox.plugin("Confirm",{confirmButton:"Submit",cancelButton:"Cancel",confirm:null,cancel:null,closeOnConfirm:!0,target:window,addClass:"jBox-Modal",fixed:!0,attach:"[data-confirm]",getContent:"data-confirm",content:"Do you really want to do this?",minWidth:360,maxWidth:500,blockScroll:!0,closeOnEsc:!0,closeOnClick:!1,closeButton:!1,overlay:!0,animation:"zoomIn",preventDefault:!0,_onAttach:function(t){if(!this.options.confirm){var o=t.attr("onclick")?t.attr("onclick"):t.attr("href")?t.attr("target")?'window.open("'+t.attr("href")+'", "'+t.attr("target")+'");':'window.location.href = "'+t.attr("href")+'";':"";t.prop("onclick",null).data("jBox-Confirm-submit",o)}},_onCreated:function(){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.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)},_onOpen:function(){this.submitButton.off("click.jBox-Confirm"+this.id).on("click.jBox-Confirm"+this.id,function(){this.options.confirm?this.options.confirm():eval(this.source.data("jBox-Confirm-submit")),this.options.closeOnConfirm&&this.close()}.bind(this))}})});

View file

@ -0,0 +1,168 @@
.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;
}
/* Image spinner */
@keyframes jBoxImageLoading {
to { transform: rotate(360deg); }
}
.jBox-image-loading .jBox-container: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%;
}

View file

@ -0,0 +1,249 @@
/**
* jBox Image plugin: Adds a lightbox to your images
*
* Author: Stephan Wagner (https://stephanwagner.me)
*
* License: MIT (https://opensource.org/licenses/MIT)
*
* Requires: jBox (https://code.jboxcdn.com/jBox.min.js)
*/
jQuery(document).ready(function () {
new jBox.plugin('Image', {
// Options (https://stephanwagner.me/jBox/options#options-confirm)
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 '
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;
// Loop through images, sort and save in global variable
this.attachedElements && jQuery.each(this.attachedElements, function (index, item)
{
item = jQuery(item);
// Abort if the item was added to a gallery already
if (item.data('jBox-image-gallery')) return;
// Add item to a gallery
var gallery = item.attr(this.options.gallery) || 'default';
!this.images[gallery] && (this.images[gallery] = []);
this.images[gallery].push({src: item.attr(this.options.src), label: (item.attr(this.options.imageLabel) || '')});
// 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));
// Helper to inject the image into content area
var appendImage = function (gallery, id, preload, open, error)
{
// 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' + (error ? ' jBox-image-not-found' : '') + (!open && !preload ? ' jBox-image-' + gallery + '-current' : '')
}).css({
backgroundImage: error ? '' : 'url("' + this.images[gallery][id].src + '")',
backgroundSize: this.options.imageSize,
opacity: (open ? 1 : 0),
zIndex: (preload ? 0 : this.imageZIndex++)
}).appendTo(this.content);
// Create labels
jQuery('<div/>', {
id: 'jBox-image-label-' + gallery + '-' + id,
'class': 'jBox-image-label' + (open ? ' active' : '')
}).html(this.images[gallery][id].label).click(function () { $(this).toggleClass('expanded'); }).appendTo(this.imageLabel);
// Show image
!open && !preload && image.animate({opacity: 1}, this.options.imageFade);
}.bind(this);
// 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');
};
// 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 {
var gallery = this.source.data('jBox-image-gallery');
var id = this.source.data('jBox-image-id');
// 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);
showLabel(gallery, id);
// Load image
} else {
this.wrapper.addClass('jBox-image-loading');
jQuery('<img src="' + this.images[gallery][id].src + '"/>').each(function ()
{
var tmpImg = new Image();
tmpImg.onload = function ()
{
appendImage(gallery, id, false);
showLabel(gallery, id);
this.wrapper.removeClass('jBox-image-loading');
}.bind(this);
tmpImg.onerror = function () {
appendImage(gallery, id, false, null, true);
showLabel(gallery, id);
this.wrapper.removeClass('jBox-image-loading');
}.bind(this);
tmpImg.src = this.images[gallery][id].src;
}.bind(this));
}
// 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
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);
(!jQuery('#jBox-image-' + gallery + '-' + next_id).length) && jQuery('<img src="' + this.images[gallery][next_id].src + '"/>').each(function ()
{
var tmpImg = new Image();
tmpImg.onload = function ()
{
appendImage(gallery, next_id, true);
}.bind(this);
tmpImg.onerror = function ()
{
appendImage(gallery, next_id, true, null, true);
}.bind(this);
tmpImg.src = this.images[gallery][next_id].src;
}.bind(this));
};
},
// 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)}));
// 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);
}
});
});

View file

@ -0,0 +1 @@
jQuery(document).ready(function(){new jBox.plugin("Image",{src:"href",gallery:"data-jbox-image",imageLabel:"title",imageFade:360,imageSize:"contain",imageCounter:!1,imageCounterSeparator:"/",target:window,attach:"[data-jbox-image]",fixed:!0,blockScroll:!0,closeOnEsc:!0,closeOnClick:"button",closeButton:!0,overlay:!0,animation:"zoomIn",preventDefault:!0,width:"100%",height:"100%",adjustDistance:{top:40,right:5,bottom:40,left:5},_onInit:function(){this.images=this.currentImage={},this.imageZIndex=1,this.attachedElements&&jQuery.each(this.attachedElements,function(e,i){if(i=jQuery(i),!i.data("jBox-image-gallery")){var a=i.attr(this.options.gallery)||"default";!this.images[a]&&(this.images[a]=[]),this.images[a].push({src:i.attr(this.options.src),label:i.attr(this.options.imageLabel)||""}),"title"==this.options.imageLabel&&i.removeAttr("title"),i.data("jBox-image-gallery",a),i.data("jBox-image-id",this.images[a].length-1)}}.bind(this));var e=function(e,i,a,t,n){if(!jQuery("#jBox-image-"+e+"-"+i).length){var o=jQuery("<div/>",{id:"jBox-image-"+e+"-"+i,class:"jBox-image-container"+(n?" jBox-image-not-found":"")+(t||a?"":" jBox-image-"+e+"-current")}).css({backgroundImage:n?"":'url("'+this.images[e][i].src+'")',backgroundSize:this.options.imageSize,opacity:t?1:0,zIndex:a?0:this.imageZIndex++}).appendTo(this.content);jQuery("<div/>",{id:"jBox-image-label-"+e+"-"+i,class:"jBox-image-label"+(t?" active":"")}).html(this.images[e][i].label).click(function(){$(this).toggleClass("expanded")}).appendTo(this.imageLabel),!t&&!a&&o.animate({opacity:1},this.options.imageFade)}}.bind(this),i=function(e,i){jQuery(".jBox-image-label.active").removeClass("active expanded"),jQuery("#jBox-image-label-"+e+"-"+i).addClass("active")};this.showImage=function(a){if("open"!=a){var t=this.currentImage.gallery,n=this.currentImage.id+(1*("prev"==a)?-1:1);n=n>this.images[t].length-1?0:n<0?this.images[t].length-1:n}else{var t=this.source.data("jBox-image-gallery"),n=this.source.data("jBox-image-id");jQuery(".jBox-image-pointer-prev, .jBox-image-pointer-next").css({display:this.images[t].length>1?"block":"none"})}jQuery(".jBox-image-"+t+"-current").length&&jQuery(".jBox-image-"+t+"-current").removeClass("jBox-image-"+t+"-current").animate({opacity:0},"open"==a?0:this.options.imageFade),this.currentImage={gallery:t,id:n},jQuery("#jBox-image-"+t+"-"+n).length?(jQuery("#jBox-image-"+t+"-"+n).addClass("jBox-image-"+t+"-current").css({zIndex:this.imageZIndex++,opacity:0}).animate({opacity:1},"open"==a?0:this.options.imageFade),i(t,n)):(this.wrapper.addClass("jBox-image-loading"),jQuery('<img src="'+this.images[t][n].src+'"/>').each(function(){var a=new Image;a.onload=function(){e(t,n,!1),i(t,n),this.wrapper.removeClass("jBox-image-loading")}.bind(this),a.onerror=function(){e(t,n,!1,null,!0),i(t,n),this.wrapper.removeClass("jBox-image-loading")}.bind(this),a.src=this.images[t][n].src}.bind(this))),this.imageCounter&&(this.images[t].length>1?(this.wrapper.addClass("jBox-image-has-counter"),this.imageCounter.find(".jBox-image-counter-all").html(this.images[t].length),this.imageCounter.find(".jBox-image-counter-current").html(n+1)):this.wrapper.removeClass("jBox-image-has-counter"));var o=n+1;o=o>this.images[t].length-1?0:o<0?this.images[t].length-1:o,!jQuery("#jBox-image-"+t+"-"+o).length&&jQuery('<img src="'+this.images[t][o].src+'"/>').each(function(){var i=new Image;i.onload=function(){e(t,o,!0)}.bind(this),i.onerror=function(){e(t,o,!0,null,!0)}.bind(this),i.src=this.images[t][o].src}.bind(this))}},_onCreated:function(){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)})),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"})))},_onOpen:function(){jQuery(document).on("keyup.jBox-Image-"+this.id,function(e){37==e.keyCode&&this.showImage("prev"),39==e.keyCode&&this.showImage("next")}.bind(this)),this.showImage("open")},_onClose:function(){jQuery(document).off("keyup.jBox-Image-"+this.id)},_onCloseComplete:function(){this.wrapper.find(".jBox-image-container").css("opacity",0)}})});

View file

@ -0,0 +1,80 @@
.jBox-Notice {
transition: margin .2s;
}
.jBox-Notice .jBox-container {
border-radius: 3px;
box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, .25), inset -1px -1px 0 0 rgba(0, 0, 0, .1);
}
.jBox-Notice .jBox-content {
border-radius: 3px;
padding: 12px 20px;
}
.jBox-Notice .jBox-title {
padding: 12px 20px 0;
font-weight: bold;
}
.jBox-hasTitle.jBox-Notice .jBox-content {
padding-top: 5px;
}
.jBox-Notice-black .jBox-container {
color: #fff;
background: #000;
}
.jBox-Notice-gray .jBox-container {
color: #333;
background: #f6f6f6;
}
.jBox-Notice-red .jBox-container {
color: #fff;
background: #d00;
}
.jBox-Notice-green .jBox-container {
color: #fff;
background: #5d0;
}
.jBox-Notice-blue .jBox-container {
color: #fff;
background: #07d;
}
.jBox-Notice-yellow .jBox-container {
color: #000;
background: #fd0;
}
@media (max-width: 768px) {
.jBox-Notice .jBox-content {
padding: 10px 15px;
}
.jBox-Notice .jBox-title {
padding: 10px 15px 0;
}
}
@media (max-width: 500px) {
.jBox-Notice .jBox-content {
padding: 8px 10px;
}
.jBox-Notice .jBox-title {
padding: 8px 10px 0;
}
.jBox-hasTitle.jBox-Notice .jBox-content {
padding-top: 0;
}
}

View file

@ -0,0 +1,143 @@
/**
* jBox Notice plugin: Opens a popup notice
*
* Author: Stephan Wagner (https://stephanwagner.me)
*
* License: MIT (https://opensource.org/licenses/MIT)
*
* Requires: jBox (https://code.jboxcdn.com/jBox.min.js)
*/
jQuery(document).ready(function () {
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 ()
{
// Adjust position when opening
this._adjustNoticePositon();
// Loop through notices at same window corner and either move or 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;
}
// Get the new margin and add to notices
var margin = (el.data('jBoxNoticeMargin') ? parseInt(el.data('jBoxNoticeMargin')) : parseInt(el.css('margin-' + this.options.attributes.y))) + this.wrapper.outerHeight() + this.options.stackSpacing;
el.data('jBoxNoticeMargin', margin);
el.css('margin-' + this.options.attributes.y, margin);
}.bind(this));
},
// Remove notice from DOM when closing finishes
_onCloseComplete: function ()
{
this.destroy();
}
});
});

View file

@ -0,0 +1 @@
jQuery(document).ready(function(){new jBox.plugin("Notice",{color:null,stack:!0,stackSpacing:10,autoClose:6e3,attributes:{x:"right",y:"top"},position:{x:15,y:15},responsivePositions:{500:{x:5,y:5},768:{x:10,y:10}},target:window,fixed:!0,animation:"zoomIn",closeOnClick:"box",zIndex:12e3,_onInit:function(){this.defaultNoticePosition=jQuery.extend({},this.options.position),this._adjustNoticePositon=function(){var t=jQuery(window),i={x:t.width(),y:t.height()};this.options.position=jQuery.extend({},this.defaultNoticePosition),jQuery.each(this.options.responsivePositions,function(t,o){if(i.x<=t)return this.options.position=o,!1}.bind(this)),this.options.adjustDistance={top:this.options.position.y,right:this.options.position.x,bottom:this.options.position.y,left:this.options.position.x}},this.options.content instanceof jQuery&&(this.options.content=this.options.content.clone().attr("id","")),jQuery(window).on("resize.responsivejBoxNotice-"+this.id,function(t){this.isOpen&&this._adjustNoticePositon()}.bind(this)),this.open()},_onCreated:function(){this.wrapper.addClass("jBox-Notice-color jBox-Notice-"+(this.options.color||"gray")),this.wrapper.data("jBox-Notice-position",this.options.attributes.x+"-"+this.options.attributes.y)},_onOpen:function(){this._adjustNoticePositon(),jQuery.each(jQuery(".jBox-Notice"),function(t,i){if(i=jQuery(i),i.attr("id")!=this.id&&i.data("jBox-Notice-position")==this.options.attributes.x+"-"+this.options.attributes.y){if(!this.options.stack)return void i.data("jBox").close({ignoreDelay:!0});var o=(i.data("jBoxNoticeMargin")?parseInt(i.data("jBoxNoticeMargin")):parseInt(i.css("margin-"+this.options.attributes.y)))+this.wrapper.outerHeight()+this.options.stackSpacing;i.data("jBoxNoticeMargin",o),i.css("margin-"+this.options.attributes.y,o)}}.bind(this))},_onCloseComplete:function(){this.destroy()}})});