bludit/bl-themes/story/assets/js/demo.js

563 lines
15 KiB
JavaScript

/*
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Note: Only needed for demo purposes. Delete for production sites.
*/
(function($) {
var $window = $(window);
// Styles.
$(
'<style>' +
'.demo-animate-all:not(.gallery), .demo-animate-all:not(.gallery) *, .demo-animate-all:not(.gallery) *:before, .demo-animate-all:not(.gallery) *:after { transition: all 0.5s ease-in-out; }' +
'.demo-controls .property .classes { display: none; }' +
'.demo-controls .property[data-requires] { display: none; }' +
'.demo-controls .property[data-requires].active { display: inline; }' +
'.demo-controls .property .tooltip { position: relative; }' +
'.demo-controls .property .tooltip:before { content: \'Click to change!\'; font-size: 0.7rem; position: absolute; bottom: 100%; left: 0; background: #47D3E5; color: #ffffff; line-height: 1; white-space: nowrap; font-weight: bold; border-radius: 0.125rem; padding: 0.325rem 0.425rem; animation: demo-controls-tooltip 1.5s forwards; animation-delay: 1s; opacity: 0; }' +
'.demo-controls .property .tooltip:after { content: \'\'; position: absolute; bottom: calc(100% - 0.25rem); left: 0.5rem; border-left: solid 0.5rem transparent; border-right: solid 0.5rem transparent; border-top: solid 0.5rem #47D3E5; width: 0.5rem; height: 0.5rem; animation: demo-controls-tooltip 1.5s forwards; animation-delay: 1s; opacity: 0; }' +
'@keyframes demo-controls-tooltip {' +
'0% { opacity: 0; transform: translateY(0); }' +
'10% { opacity: 1; transform: translateY(0.125rem); }' +
'20% { opacity: 1; transform: translateY(-0.125rem); }' +
'30% { opacity: 1; transform: translateY(0.125rem); }' +
'40% { opacity: 1; transform: translateY(-0.125rem); }' +
'50% { opacity: 1; transform: translateY(0.125rem); }' +
'60% { opacity: 1; transform: translateY(0); }' +
'90% { opacity: 1; }' +
'100% { opacity: 0; }' +
'}' +
'</style>'
).appendTo($('head'));
// Functions.
$.fn.demo_controls = function(styles, userOptions) {
var $this = $(this),
$styleProperty, $stylePropertyClasses,
$controls, $x, $y, $z,
options,
current, i, j, k, s, n, count;
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).demo_controls(styles, userOptions);
return $this;
}
// Options.
options = $.extend({
target: null,
palette: true
}, userOptions);
// Controls.
if (styles) {
$controls = $(
'<span class="demo-controls">' +
'<span class="property" data-name="style">' +
'<a href="#" class="title tooltip">style</a>' +
'<span class="classes"></span>' + (options.palette ? ', ' : ' ') +
'</span>' +
(options.palette ?
'<span class="property active" data-name="scheme">' +
'<a href="#" class="title">scheme</a>' +
'<span class="classes">' +
'<span data-class="-" class="active">default</span>' +
'<span data-class="invert">invert</span>' +
'</span>, ' +
'</span>' +
'<span class="property active" data-name="color">' +
'<a href="#" class="title">color</a>' +
'<span class="classes">' +
'<span data-class="-" class="active">default</span>' +
'<span data-class="color1">color1</span>' +
'<span data-class="color2">color2</span>' +
'<span data-class="color3">color3</span>' +
'<span data-class="color4">color4</span>' +
'<span data-class="color5">color5</span>' +
'<span data-class="color6">color6</span>' +
'<span data-class="color7">color7</span>' +
'</span>, ' +
'</span>'
: '') +
'</span>'
);
}
else {
$controls = $(
'<span class="demo-controls">' +
(options.palette ?
'<span class="property active" data-name="scheme">' +
'<a href="#" class="title">scheme</a>' +
'<span class="classes">' +
'<span data-class="-" class="active">default</span>' +
'<span data-class="invert">invert</span>' +
'</span> and ' +
'</span>' +
'<span class="property active" data-name="color">' +
'<a href="#" class="title">color</a>' +
'<span class="classes">' +
'<span data-class="-" class="active">default</span>' +
'<span data-class="color1">color1</span>' +
'<span data-class="color2">color2</span>' +
'<span data-class="color3">color3</span>' +
'<span data-class="color4">color4</span>' +
'<span data-class="color5">color5</span>' +
'<span data-class="color6">color6</span>' +
'<span data-class="color7">color7</span>' +
'</span>' +
'</span>'
: '') +
'</span>'
);
}
// Target.
switch (options.target) {
case 'previous':
$this.prev().find('.demo-controls').replaceWith($controls);
break;
default:
$this.find('.demo-controls').replaceWith($controls);
break;
}
// Styles.
if (styles) {
$styleProperty = $controls.find('.property[data-name="style"]');
$stylePropertyClasses = $styleProperty.children('.classes');
for (i in styles) {
current = false;
count = Object.keys(styles[i]).length;
n = 1;
// Add to style property.
$x = $('<span data-class="' + i + '">, ' + i + '</span>')
.appendTo($stylePropertyClasses);
if ($this.hasClass(i)) {
$x.addClass('active');
current = true;
}
// Step through properties.
for (j in styles[i]) {
$x = $(
'<span class="property" data-name="' + j + '" data-requires="' + i + '">' +
(n == count ? '<span>and </span>' : '') +
'<a href="#" class="title">' + j + '</a>' +
'<span class="classes">' +
'</span>' + (n < count ? ', ' : '') +
'</span>'
).appendTo($controls);
$y = $x.children('.classes');
if (current)
$x.addClass('active');
for (k in styles[i][j]) {
$z = $('<span data-class="' + k + '">, ' + styles[i][j][k].replace('*', '') + '</span>')
.appendTo($y);
if (styles[i][j][k].substr(-1, 1) == '*')
$z.addClass('default');
if (current
&& $this.hasClass(k))
$z.addClass('active');
}
n++;
}
}
}
// Events.
$controls.on('click', 'a', function(event) {
event.preventDefault();
});
$controls.on('click', '.property.active', function(event) {
var $property = $(this);
var $classes = $property.find('.classes > *');
var $current = $classes.filter('.active');
var $next;
// Determine next.
if ($current.length == 0
|| $current.index() == $classes.length - 1)
$next = $classes.first();
else
$next = $current.next();
// Turn on animate all.
$this.addClass('demo-animate-all');
// Deactivate current.
$current.removeClass('active');
$this.removeClass($current.data('class'));
// Activate next.
$next.addClass('active');
$this.addClass($next.data('class'));
// Turn off animate all.
setTimeout(function() {
$this.removeClass('demo-animate-all');
}, 500);
});
$controls.on('click', '.property[data-name="style"]', function(event) {
var $property = $(this);
var $classes = $property.find('.classes > *');
var $current = $classes.filter('.active');
var $next;
// Determine next.
if ($current.length == 0
|| $current.index() == $classes.length - 1)
$next = $classes.first();
else
$next = $current.next();
// Turn on animate all.
$this.addClass('demo-animate-all');
// Deactivate current.
$current.removeClass('active');
$this.removeClass($current.data('class'));
$controls.find('.property[data-requires="' + $current.data('class') + '"]')
.removeClass('active');
$controls.find('.property[data-requires="' + $current.data('class') + '"] > .classes > .active').each(function() {
$(this).removeClass('active');
if ($(this).data('class') != '-')
$this.removeClass($(this).data('class'));
});
// Activate next.
$next.addClass('active');
$this.addClass($next.data('class'));
$controls.find('.property[data-requires="' + $next.data('class') + '"]')
.addClass('active');
$controls.find('.property[data-requires="' + $next.data('class') + '"] > .classes > .default').each(function() {
$(this).addClass('active');
if ($(this).data('class') != '-')
$this.addClass($(this).data('class'));
});
// Turn off animate all.
setTimeout(function() {
$this.removeClass('demo-animate-all');
}, 500);
});
};
// Elements.
// Wrappers.
$('.wrapper').demo_controls(null, {
palette: true
});
// Banner.
$('.banner').demo_controls({
style1: {
'size': {
'-': 'normal',
'fullscreen': 'fullscreen*'
},
'orientation': {
'orient-left': 'left*',
'orient-right': 'right'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style2: {
'size': {
'-': 'normal',
'fullscreen': 'fullscreen*'
},
'orientation': {
'orient-left': 'left',
'orient-center': 'center*',
'orient-right': 'right'
},
'content alignment': {
'content-align-left': 'left',
'content-align-center': 'center*',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style3: {
'size': {
'-': 'normal',
'fullscreen': 'fullscreen*'
},
'orientation': {
'orient-left': 'left',
'orient-right': 'right*'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style4: {
'size': {
'-': 'normal',
'fullscreen': 'fullscreen*'
},
'phone type': {
'iphone': 'iphone*',
'android': 'android'
},
'orientation': {
'orient-left': 'left',
'orient-right': 'right*'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style5: {
'size': {
'-': 'normal',
'fullscreen': 'fullscreen*'
},
'content alignment': {
'content-align-left': 'left',
'content-align-center': 'center*',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
}
});
// Spotlight.
$('.spotlight').demo_controls({
style1: {
'orientation': {
'orient-left': 'left',
'orient-right': 'right*'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left*',
'image-position-center': 'center',
'image-position-right': 'right'
}
},
style2: {
'orientation': {
'orient-left': 'left',
'orient-right': 'right*'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style3: {
'phone type': {
'iphone': 'iphone*',
'android': 'android'
},
'orientation': {
'orient-left': 'left',
'orient-right': 'right*'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style4: {
'size': {
'-size': 'normal',
'fullscreen': 'fullscreen*',
'halfscreen': 'halfscreen'
},
'orientation': {
'orient-left': 'left*',
'orient-center': 'center',
'orient-right': 'right'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style5: {
'size': {
'-size': 'normal',
'fullscreen': 'fullscreen*',
'halfscreen': 'halfscreen'
},
'orientation': {
'orient-left': 'left*',
'orient-center': 'center',
'orient-right': 'right'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
});
// Gallery.
$('.gallery').demo_controls({
style1: {
'size': {
'small': 'small',
'medium': 'medium*',
'big': 'big'
}
},
style2: {
'size': {
'small': 'small',
'medium': 'medium*',
'big': 'big'
}
},
}, {
target: 'previous',
palette: false
});
// Items.
$('.items').demo_controls({
style1: {
'size': {
'small': 'small',
'medium': 'medium*',
'big': 'big'
}
},
style2: {
'size': {
'small': 'small',
'medium': 'medium*',
'big': 'big'
}
},
style3: {
'size': {
'small': 'small',
'medium': 'medium*',
'big': 'big'
}
}
}, {
target: 'previous',
palette: false
});
})(jQuery);