'use strict';
/**
* [description] PageTransition - change pages
*/
var PageTransitions = (function () {
var $main = $( '#pt-main' ),
$pages = $main.children( 'div.pt-page' ),
$iterate = $( '#iterateEffects' ),
animcursor = 1,
pagesCount = $pages.length,
current = 0,
isAnimating = false,
endCurrPage = false,
endNextPage = false,
animEndEventNames = {
'WebkitAnimation': 'webkitAnimationEnd',
'OAnimation' : 'oAnimationEnd',
'msAnimation' : 'MSAnimationEnd',
'animation' : 'animationend'
},
// animation end event name
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
// support css animations
support = Modernizr.cssanimations;
function init() {
$pages.each(
function () {
var $page = $( this );
$page.data( 'originalClassList', $page.attr( 'class' ) );
}
);
$pages.eq( current ).addClass( 'pt-page-current' );
$('#all-pages,.katplanpages').dlmenu(
{
onLinkClick: function ( el, ev ) {
ev.preventDefault();
if ( isAnimating )
return;
var link = el.find('a')[0];
var hash = $(link).attr('href');
if (history.pushState) {
history.pushState(null, null, hash);
}
else {
location.hash = hash;
}
var nameClass = el.attr( 'class' );
nameClass = nameClass.replace('open', 'pt');
var page = document.getElementsByClassName( nameClass )[ 0 ];
var openPage = $( page ).index();
var animate = 22;
if ( current > openPage ) {
animate = 21;
}
if (nameClass.indexOf('katplan')) {
$('#all-pages li').removeClass('active');
choosenPage(animate, openPage);
//el.addClass('active');
}
else if (openPage !== $pages.eq(current).index() && openPage !== -1) {
choosenPage( animate, openPage );
el.parent().children().removeClass( 'active' );
el.addClass( 'active' );
}
return false;
}
}
);
$( 'nav .navbar-brand' ).on('click',
function ( el ) {
el.preventDefault();
if ( $pages.eq( current ).index() !== 0 ) {
if ( ! isAnimating ) {
if ( history.pushState ) {
//history.pushState('', document.title, window.location.pathname);
history.pushState( null, null, this.getAttribute('href') );
}
else {
location.hash = this.getAttribute('href');
}
choosenPage( 21, 0 );
var $links = $( '#all-pages' ).children().children();
$links.removeClass( 'active' );
}
}
}
);
$( '.prev-page' ).on('click',
function ( el ) {
el.preventDefault();
prevPage( 21 );
}
);
$( '.next-page' ).on('click',
function ( el ) {
el.preventDefault();
nextPage( 22 );
}
);
$( '.close-this' ).on(
'click', function ( e ) {
if ( $( this ).parent().parent().hasClass( 'info-about-app' ) ) {
$( '.about-app' ).removeClass( 'hide' );
$( 'body' ).keyup(
function ( e ) {
if ( e.keyCode === 37 ) {
prevPage( 21 );
}
if ( e.keyCode === 39 ) {
nextPage( 22 );
}
}
);
}
}
);
var hash = location.hash;
if( hash && hash !=='' ) {
var element = document.querySelector(hash);
var openPage = $(element).index();
var link = document.querySelector('a[href="'+hash+'"]');
if ( link ) {
$(link).parent().parent().children().removeClass('active');
$(link).parent().addClass('active');
}
if ( openPage !== $pages.eq( current ).index() && openPage !== - 1 ) {
choosenPage( 21, openPage );
}
}
}
function nextPage( options ) {
LoadPrecenter.stopRotate();
$( "#pt-main" ).animate(
{
scrollTop: 0
}, 300
);
$( '#pt-main' ).css(
{
overflow: 'hidden'
}
);
var animation = ( options.animation ) ? options.animation : options;
if ( isAnimating ) {
return false;
}
isAnimating = true;
var $currPage = $pages.eq( current );
if ( options.showPage ) {
if ( options.showPage < pagesCount - 1 ) {
current = options.showPage;
}
else {
current = 0;
}
}
else {
if ( current < pagesCount - 1 ) {
++ current;
}
else {
current = 0;
}
}
var $links = $( '#all-pages' ).children().children();
$links.removeClass( 'active' );
var setActive = 'pt-page-' + ( current + 1 );
setActive = setActive.replace( 'pt', 'open' );
if ( document.getElementsByClassName( setActive ).length > 0 ) {
var activeLink = document.getElementsByClassName( setActive )[ 0 ];
$( activeLink ).addClass( 'active' );
}
var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
outClass = '', inClass = '';
switch ( animation ) {
case 5:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromRight pt-page-ontop';
break;
case 6:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromLeft pt-page-ontop';
break;
case 21:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-scaleUpDown pt-page-delay300';
break;
case 22:
outClass = 'pt-page-scaleDownUp';
inClass = 'pt-page-scaleUp pt-page-delay300';
break;
}
$currPage.addClass( outClass ).on(
animEndEventName, function () {
$currPage.off( animEndEventName );
endCurrPage = true;
if ( endNextPage ) {
onEndAnimation( $currPage, $nextPage );
}
}
);
$nextPage.addClass( inClass ).on(
animEndEventName, function () {
$nextPage.off( animEndEventName );
endNextPage = true;
if ( endCurrPage ) {
onEndAnimation( $currPage, $nextPage );
}
}
);
if ( ! support ) {
onEndAnimation( $currPage, $nextPage );
}
}
function prevPage( options ) {
LoadPrecenter.stopRotate();
$( "#pt-main" ).animate(
{
scrollTop: 0
}, 300
);
$( '#pt-main' ).css(
{
overflow: 'hidden'
}
);
var animation = ( options.animation ) ? options.animation : options;
if ( isAnimating ) {
return false;
}
isAnimating = true;
var $currPage = $pages.eq( current );
if ( options.showPage ) {
if ( options.showPage >= 0 ) {
current = options.showPage;
}
else {
current = pagesCount - 1;
}
}
else {
if ( current > 0 ) {
-- current;
}
else {
current = pagesCount - 1;
}
}
var $links = $( '#all-pages' ).children().children();
$links.removeClass( 'active' );
var setActive = 'pt-page-' + ( current + 1 );
setActive = setActive.replace( 'pt', 'open' );
if ( document.getElementsByClassName( setActive ).length > 0 ) {
var activeLink = document.getElementsByClassName( setActive )[ 0 ];
$( activeLink ).addClass( 'active' );
}
var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
outClass = '', inClass = '';
switch ( animation ) {
case 5:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromRight pt-page-ontop';
break;
case 6:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromLeft pt-page-ontop';
break;
case 21:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-scaleUpDown pt-page-delay300';
break;
case 22:
outClass = 'pt-page-scaleDownUp';
inClass = 'pt-page-scaleUp pt-page-delay300';
break;
}
$currPage.addClass( outClass ).on(
animEndEventName, function () {
$currPage.off( animEndEventName );
endCurrPage = true;
if ( endNextPage ) {
onEndAnimation( $currPage, $nextPage );
}
}
);
$nextPage.addClass( inClass ).on(
animEndEventName, function () {
$nextPage.off( animEndEventName );
endNextPage = true;
if ( endCurrPage ) {
onEndAnimation( $currPage, $nextPage );
}
}
);
if ( ! support ) {
onEndAnimation( $currPage, $nextPage );
}
}
function choosenPage( options, openPage ) {
designChanger();
LoadPrecenter.stopRotate();
$( "#pt-main" ).animate(
{
scrollTop: 0
}, 300
);
$( '#pt-main' ).css(
{
overflow: 'hidden'
}
);
var animation = ( options.animation ) ? options.animation : options;
if ( isAnimating ) {
return false;
}
isAnimating = true;
var $currPage = $pages.eq( current );
current = openPage;
var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
outClass = '', inClass = '';
switch ( animation ) {
case 5:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromRight pt-page-ontop';
break;
case 6:
outClass = 'pt-page-fade';
inClass = 'pt-page-moveFromLeft pt-page-ontop';
break;
case 21:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-scaleUpDown pt-page-delay300';
break;
case 22:
outClass = 'pt-page-scaleDownUp';
inClass = 'pt-page-scaleUp pt-page-delay300';
break;
}
$currPage.addClass( outClass ).on(
animEndEventName, function () {
$currPage.off( animEndEventName );
endCurrPage = true;
if ( endNextPage ) {
onEndAnimation( $currPage, $nextPage );
}
}
);
$nextPage.addClass( inClass ).on(
animEndEventName, function () {
$nextPage.off( animEndEventName );
endNextPage = true;
if ( endCurrPage ) {
onEndAnimation( $currPage, $nextPage );
}
}
);
if ( ! support ) {
onEndAnimation( $currPage, $nextPage );
}
}
function onEndAnimation( $outpage, $inpage ) {
endCurrPage = false;
endNextPage = false;
resetPage( $outpage, $inpage );
isAnimating = false;
$( '#pt-main' ).css(
{
overflow: ''
}
);
RunScrollStyler({
element: '#pt-main'
} );
runClipCanvas();
LoadPrecenter.startRotate();
var tmp = $('.pt-page-current' ).find('.timer');
}
function resetPage( $outpage, $inpage ) {
$outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
$inpage.attr(
'class', $inpage.data( 'originalClassList' )
+ ' pt-page-current'
);
}
try{
init();
} catch(e){
alert(e);
} finally {
return {
init : init,
nextPage: nextPage,
prevPage: prevPage
};
}
})();
var canvasObject = [];
/**
* Клас для роботи з картинками, анімовано обрізає картинки при ховері, відкриває на весь екран при клікові
* @constructor
*/
function CanvasClip() {
this.duration = 300;
this.durationFull = 300;
this._rand = 0;
this._element = null;
this._image = null;
this._points = [ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ];
this._pointsFull = [ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ];
this._width = 0;
this._height = 0;
this._fit = 'contain';
this.devPix;
}
CanvasClip.prototype.buildCanvas = function ( item, img ) {
var self = this;
var block = $( item ).parent();
self._setProperties( item );
self._createElement( block, img );
};
CanvasClip.prototype.clipCanvas = function () {
var self = this;
var x1End, x1Start, x1Width,
y1End, y1Start, y1Width,
x2End, x2Start, x2Width,
y2End, y2Start, y2Width,
x3End, x3Start, x3Width,
y3End, y3Start, y3Width,
x4End, x4Start, x4Width,
y4End, y4Start, y4Width;
// self._setPoints();
self._setRandom();
if ( ! self._getRandom() ) {
x1End = getRandomInt( ( 30 * self._getWidth() / 100 ), self._getWidth() - ( 20 * self._getWidth() / 100 ) );
x1Start = self._getPoint( 0, 0 );
x1Width = x1End - x1Start;
y1Start = self._getPoint( 0, 1 );
y1End = 0;
y1Width = y1Start - y1End;
x2Start = self._getPoint( 1, 0 );
x2End = self._getWidth();
x2Width = x2End - x2Start;
y2End = getRandomInt( ( 30 * self._getHeight() / 100 ), self._getHeight() - ( 20 * self._getHeight() / 100 ) );
y2Start = self._getPoint( 1, 1 );
y2Width = y2End - y2Start;
x3End = getRandomInt( self._getWidth() / 1.5, self._getWidth() - ( 20 * self._getWidth() / 100 ) );
x3Start = self._getPoint( 2, 0 );
x3Width = x3Start - x3End;
y3Start = self._getPoint( 2, 1 );
y3End = self._getHeight();
y3Width = y3End - y3Start;
x4Start = self._getPoint( 3, 0 );
x4End = 0;
x4Width = x4Start - x4End;
y4End = getRandomInt( ( 40 * self._getHeight() / 100 ), self._getHeight() - ( 20 * self._getHeight() / 100 ) );
y4Start = self._getPoint( 3, 1 );
y4Width = y4Start - y4End;
}
if ( self._getRandom() ) {
y1End = getRandomInt( ( 30 * self._getHeight() / 100 ), self._getHeight() / 1.5 );
y1Start = self._getPoint( 0, 1 );
y1Width = y1End - y1Start;
x1Start = self._getPoint( 0, 0 );
x1End = 0;
x1Width = x1Start - x1End;
x2End = getRandomInt( self._getWidth() / 1.5, self._getWidth() - ( 30 * self._getWidth() / 100 ) );
x2Start = self._getPoint( 1, 0 );
x2Width = x2Start - x2End;
y2Start = self._getPoint( 1, 1 );
y2End = 0;
y2Width = y2Start - y2End;
y3End = getRandomInt( self._getHeight() / 1.5, self._getHeight() - ( 30 * self._getHeight() / 100 ) );
y3Start = self._getPoint( 2, 1 );
y3Width = y3Start - y3End;
x3Start = self._getPoint( 2, 0 );
x3End = self._getWidth();
x3Width = x3End - x3Start;
x4End = getRandomInt( ( 30 * self._getWidth() / 100 ), self._getWidth() / 1.5 );
x4Start = self._getPoint( 3, 0 );
x4Width = x4End - x4Start;
y4Start = self._getPoint( 3, 1 );
y4End = self._getHeight();
y4Width = y4End - y4Start;
}
var canvas = self._getElement();
if ( canvas.getContext ) {
var ctx = canvas.getContext( '2d' );
var left = 0;
var top = 0;
var imgWidth = $( self._getImage() ).width();
var imgHeight = $( self._getImage() ).height();
var proportion = imgWidth / imgHeight;
imgWidth = self._getHeight() * proportion;
imgHeight = self._getHeight();
if ( imgWidth < self._getWidth() ) {
imgWidth = self._getWidth();
imgHeight = imgWidth / proportion;
}
if ( self._getHeight() < imgHeight ) {
top = - ( imgHeight - self._getHeight() ) / 2;
}
if ( self._getWidth() < imgWidth ) {
left = - ( imgWidth - self._getWidth() ) / 2;
}
this._animate(
{
duration: self._getDuration(),
timing : function ( timeFraction ) {
return Math.pow( timeFraction, 2 ) * Math.pow( timeFraction - 2, 2 );
},
draw : function ( progress ) {
ctx.clearRect( 0, 0, self._getWidth(), self._getHeight() );
progress = progress * 100;
if ( x1Start < x1End ) {
x1Start = ( x1End - x1Width ) + x1Width * progress / 100;
}
if ( x1Start > x1End ) {
x1Start = ( x1End + x1Width ) - x1Width * progress / 100;
}
if ( y1Start < y1End ) {
y1Start = ( y1End - y1Width ) + y1Width * progress / 100;
}
if ( y1Start > y1End ) {
y1Start = ( y1End + y1Width ) - y1Width * progress / 100;
}
if ( x2Start > x2End ) {
x2Start = ( x2End + x2Width ) - ( x2Width * progress / 100 );
}
if ( x2Start < x2End ) {
x2Start = ( x2End - x2Width ) + ( x2Width * progress / 100 );
}
if ( y2Start < y2End ) {
y2Start = ( y2End - y2Width ) + y2Width * progress / 100;
}
if ( y2Start > y2End ) {
y2Start = ( y2End + y2Width ) - y2Width * progress / 100;
}
if ( x3Start > x3End ) {
x3Start = ( x3End + x3Width ) - ( x3Width * progress / 100 );
}
if ( x3Start < x3End ) {
x3Start = ( x3End - x3Width ) + ( x3Width * progress / 100 );
}
if ( y3Start > y3End ) {
y3Start = ( y3End + y3Width ) - ( y3Width * progress / 100 );
}
if ( y3Start < y3End ) {
y3Start = ( y3End - y3Width ) + ( y3Width * progress / 100 );
}
if ( x4Start < x4End ) {
x4Start = ( x4End - x4Width ) + x4Width * progress / 100;
}
if ( x4Start > x4End ) {
x4Start = ( x4End + x4Width ) - x4Width * progress / 100;
}
if ( y4Start > y4End ) {
y4Start = ( y4End + y4Width ) - ( y4Width * progress / 100 );
}
if ( y4Start < y4End ) {
y4Start = ( y4End - y4Width ) + ( y4Width * progress / 100 );
}
ctx.save();
ctx.beginPath();
ctx.moveTo( x1Start, y1Start );
ctx.lineTo( x2Start, y2Start );
ctx.lineTo( x3Start, y3Start );
ctx.lineTo( x4Start, y4Start );
ctx.lineTo( x1Start, y1Start );
ctx.closePath();
ctx.clip();
ctx.drawImage( self._getImage(), left, top, imgWidth, imgHeight );
ctx.restore();
self._setPoint( 0, 0, x1Start );
self._setPoint( 0, 1, y1Start );
self._setPoint( 1, 0, x2Start );
self._setPoint( 1, 1, y2Start );
self._setPoint( 2, 0, x3Start );
self._setPoint( 2, 1, y3Start );
self._setPoint( 3, 0, x4Start );
self._setPoint( 3, 1, y4Start );
}
}
);
}
};
CanvasClip.prototype.unclipCanvas = function () {
var self = this;
var x1End, x1Start, x1Width, y1End, y1Start, y1Width, x2End, x2Start, x2Width, y2End, y2Start, y2Width, x3End,
x3Start, x3Width, y3End, y3Start, y3Width, x4End, x4Start, x4Width, y4End, y4Start, y4Width;
if ( ! self._getRandom() ) {
x1Start = self._getPoint( 0, 0 );
x1End = 0;
x1Width = self._getPoint( 0, 0 );
y1Start = self._getPoint( 0, 1 );
y1End = 0;
y1Width = y1Start - y1End;
x2Start = self._getPoint( 1, 0 );
x2End = self._getWidth();
x2Width = x2End - x2Start;
y2Start = self._getPoint( 1, 1 );
y2End = 0;
y2Width = y2Start;
x3Start = self._getPoint( 2, 0 );
x3End = self._getWidth();
x3Width = x3End - x3Start;
y3Start = self._getHeight();
x4Start = 0;
y4Start = self._getPoint( 3, 1 );
y4End = self._getHeight();
y4Width = y4End - y4Start;
}
if ( self._getRandom() ) {
y1Start = self._getPoint( 0, 1 );
y1End = 0;
y1Width = self._getPoint( 0, 1 );
x1Start = 0;
y2Start = 0;
x2Start = self._getPoint( 1, 0 );
x2End = self._getWidth();
x2Width = x2End - x2Start;
y3Start = self._getPoint( 2, 1 );
y3End = self._getHeight();
y3Width = y3End - y3Start;
x3Start = self._getWidth();
y4Start = self._getHeight();
x4Start = self._getPoint( 3, 0 );
x4End = 0;
x4Width = self._getPoint( 3, 0 );
}
var canvas = self._getElement();
if ( canvas.getContext ) {
var ctx = canvas.getContext( '2d' );
var left = 0;
var top = 0;
var imgWidth = $( self._getImage() ).width();
var imgHeight = $( self._getImage() ).height();
var proportion = imgWidth / imgHeight;
imgWidth = self._getHeight() * proportion;
imgHeight = self._getHeight();
if ( imgWidth < self._getWidth() ) {
imgWidth = self._getWidth();
imgHeight = imgWidth / proportion;
}
if ( self._getHeight() < imgHeight ) {
top = - ( imgHeight - self._getHeight() ) / 2;
}
if ( self._getWidth() < imgWidth ) {
left = - ( imgWidth - self._getWidth() ) / 2;
}
self._animate(
{
duration: self._getDuration(),
timing : function ( timeFraction ) {
return Math.pow( timeFraction, 2 ) * Math.pow( timeFraction - 2, 2 );
},
draw : function ( progress ) {
ctx.clearRect( 0, 0, self._getWidth(), self._getHeight() );
progress = progress * 100;
if ( x1Start > x1End ) {
x1Start = x1Width - x1Width * progress / 100;
}
if ( y2Start > y2End ) {
y2Start = y2Width - y2Width * progress / 100;
}
if ( x3Start < x3End ) {
x3Start = ( x3End - x3Width ) + x3Width * progress / 100;
}
if ( y4Start < y4End ) {
y4Start = ( y4End - y4Width ) + ( y4Width * progress / 100 );
}
if ( y1Start > y1End ) {
y1Start = y1Width - y1Width * progress / 100;
}
if ( x2Start < x2End ) {
x2Start = ( x2End - x2Width ) + ( x2Width * progress / 100 );
}
if ( y3Start < y3End ) {
y3Start = ( y3End - y3Width ) + ( y3Width * progress / 100 );
}
if ( x4Start > x4End ) {
x4Start = x4Width - x4Width * progress / 100;
}
ctx.save();
ctx.beginPath();
ctx.moveTo( x1Start, y1Start );
ctx.lineTo( x2Start, y2Start );
ctx.lineTo( x3Start, y3Start );
ctx.lineTo( x4Start, y4Start );
ctx.lineTo( x1Start, y1Start );
ctx.closePath();
ctx.clip();
ctx.drawImage( self._getImage(), left, top, imgWidth, imgHeight );
ctx.restore();
self._setPoint( 0, 0, x1Start );
self._setPoint( 0, 1, y1Start );
self._setPoint( 1, 0, x2Start );
self._setPoint( 1, 1, y2Start );
self._setPoint( 2, 0, x3Start );
self._setPoint( 2, 1, y3Start );
self._setPoint( 3, 0, x4Start );
self._setPoint( 3, 1, y4Start );
}
}
);
}
};
CanvasClip.prototype.openFullCanvas = function ( position ) {
LoadPrecenter.stopRotate();
var self = this;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight - 62;
if( $('body' ).hasClass('inverse') )
windowHeight = window.innerHeight - 80;
var canvas = document.querySelector( '.full-canvas' );
if ( ! canvas ) {
$( 'body' ).append( '' );
canvas = document.querySelector( '.full-canvas' );
}
$( self._getElement() ).addClass( 'opacity' );
setTimeout(
function () {
$( canvas ).addClass( 'opened' );
}, self._getFullDuration() / 10
);
try {
if ( canvas.getContext ) {
var ctx = canvas.getContext( "2d" );
//*****************************************************************/
var top = position.top;
var left = position.left;
self._setPointFull( 0, 0, left );
self._setPointFull( 0, 1, top );
self._setPointFull( 1, 0, self._getWidth() + left );
self._setPointFull( 1, 1, top );
self._setPointFull( 2, 0, left + self._getWidth() );
self._setPointFull( 2, 1, self._getHeight() + top );
self._setPointFull( 3, 0, left );
self._setPointFull( 3, 1, top + self._getHeight() );
//***************************************************************/
var x1pos, x1interval,
y1pos, y1interval,
x2pos, x2interval,
y2pos, y2interval,
x3pos, x3interval,
y3pos, y3interval,
x4pos, x4interval,
y4pos, y4interval;
//***************************************************************/
if ( ! self._getRandom() ) {
x1pos = self._getPoint( 0, 0 ) + left;
x1interval = x1pos;
y1pos = top;
y1interval = y1pos;
x2pos = self._getWidth() + left;
x2interval = canvas.width - x2pos;
y2pos = self._getPoint( 1, 1 ) + top;
y2interval = y2pos;
x3pos = self._getPoint( 2, 0 ) + left;
x3interval = canvas.width - x3pos;
y3pos = self._getHeight() + top;
y3interval = windowHeight - y3pos;
x4pos = left;
x4interval = x4pos;
y4pos = self._getPoint( 3, 1 ) + top;
y4interval = windowHeight - y4pos;
}
if ( self._getRandom() ) {
x1pos = left;
x1interval = x1pos;
y1pos = self._getPoint( 0, 1 ) + top;
y1interval = y1pos;
x2pos = self._getPoint( 1, 0 ) + left;
x2interval = windowWidth - x2pos;
y2pos = top;
y2interval = y2pos;
x3pos = left + self._getWidth();
x3interval = windowWidth - x3pos;
y3pos = self._getPoint( 2, 1 ) + top;
y3interval = windowHeight - y3pos;
x4pos = self._getPoint( 3, 0 ) + left;
x4interval = x4pos;
y4pos = top + self._getHeight();
y4interval = windowHeight - y4pos;
}
//***************************************************************/
var left2 = 0;
var top2 = 0;
var imgWidth = $( self._getImage() ).width();
var imgHeight = $( self._getImage() ).height();
var prop = imgWidth / imgHeight;
imgWidth = self._getHeight() * prop;
imgHeight = self._getHeight();
if ( imgWidth < self._getWidth() ) {
imgWidth = self._getWidth();
imgHeight = imgWidth / prop;
}
if ( self._getHeight() < imgHeight ) {
top2 = - ( imgHeight - self._getHeight() ) / 2;
}
if ( self._getWidth() < imgWidth ) {
left2 = - ( imgWidth - self._getWidth() ) / 2;
}
top += top2;
left += left2;
var bottom = top + imgHeight;
var right = left + imgWidth;
var imgFullWidth, imgFullHeight;
var minTop, minLeft, minBottom, minRight;
var leftWidth, topWidth, bottomWidth, rightWidth;
imgFullWidth = windowHeight * prop;
imgFullHeight = windowHeight;
//***************************************************************/
if ( self._getFit() === 'cover' ) {
if ( imgFullWidth < windowWidth ) {
imgFullWidth = windowWidth;
imgFullHeight = imgFullWidth / prop;
}
minTop = - (imgFullHeight - windowHeight) / 2;
minLeft = - (imgFullWidth - windowWidth) / 2;
minBottom = (- 1) * minTop + windowHeight;
minRight = (- 1) * minLeft + windowWidth;
leftWidth = left + (- 1) * minLeft;
topWidth = top + (- 1) * minTop;
bottomWidth = (windowHeight - top - imgHeight) + (- 1) * minTop;
rightWidth = (windowWidth - left - imgWidth) + (- 1) * minLeft;
}
if ( self._getFit() === 'contain' ) {
if ( imgFullWidth > windowWidth ) {
imgFullWidth = windowWidth;
imgFullHeight = imgFullWidth / prop;
}
minTop = - (imgFullHeight - windowHeight) / 2;
minLeft = - (imgFullWidth - windowWidth) / 2;
minBottom = (- 1) * minTop + windowHeight;
minRight = (- 1) * minLeft + windowWidth;
if ( left <= minLeft )
leftWidth = minLeft - left;
if ( left > minLeft )
leftWidth = left - minLeft;
if ( top <= minTop )
topWidth = minTop - top;
if ( top > minTop )
topWidth = top - minTop;
if ( right <= minRight )
rightWidth = minRight - right;
if ( bottom <= minBottom )
bottomWidth = minBottom - bottom;
if ( bottom > minBottom )
bottomWidth = bottom - minBottom;
if ( right > minRight )
rightWidth = right - minRight;
}
//***************************************************************/
self._animateFull(
{
duration: self._getFullDuration(),
timing : function ( timeFraction ) {
//return timeFraction<.5 ? 2*timeFraction*timeFraction : -1+(4-2*timeFraction)*timeFraction;
// //easeInOutQuad
return timeFraction<.5 ? 4*timeFraction*timeFraction*timeFraction : (timeFraction-1)*(2*timeFraction-2)*(2*timeFraction-2)+1; //easeInOutCubic
//return timeFraction<.5 ? 8*timeFraction*timeFraction*timeFraction*timeFraction :
// 1-8*(--timeFraction)*timeFraction*timeFraction*timeFraction; //easeInOutQuart return timeFraction<.5 ?
// 16*timeFraction*timeFraction*timeFraction*timeFraction*timeFraction :
// 1+16*(--timeFraction)*timeFraction*timeFraction*timeFraction*timeFraction; //easeInOutQuint
},
draw : function ( progress ) {
ctx.clearRect( 0, 0, windowWidth, windowHeight );
x1pos = x1pos > 0 ? x1interval - (progress * x1interval) : 0;
y1pos = y1pos > 0 ? y1interval - (progress * y1interval) : 0;
x2pos = x2pos < windowWidth ? (windowWidth - x2interval) + (progress * x2interval) : windowWidth;
y2pos = y2pos > 0 ? y2interval - (progress * y2interval) : 0;
x3pos = x3pos < windowWidth ? (windowWidth - x3interval) + (progress * x3interval) : windowWidth;
y3pos = y3pos < windowHeight ? (windowHeight- y3interval) + (progress * y3interval) : windowHeight;
x4pos = x4pos > 0 ? x4interval - (progress * x4interval) : 0;
y4pos = y4pos < windowHeight ? (windowHeight - y4interval) + (progress * y4interval) : windowHeight;
ctx.save();
ctx.beginPath();
ctx.moveTo( x1pos, y1pos );
ctx.lineTo( x2pos, y2pos );
ctx.lineTo( x3pos, y3pos );
ctx.lineTo( x4pos, y4pos );
ctx.lineTo( x1pos, y1pos );
ctx.clip();
if ( self._getFit() === 'cover' ) {
top = top > minTop ? topWidth + minTop - (progress * topWidth) : minTop;
left = left > minLeft ? leftWidth + minLeft - (progress * leftWidth) : minLeft;
bottom = bottom < minBottom ? (imgHeight + topWidth + minTop) + (progress * bottomWidth) : minBottom;
right = right < minRight ? (imgWidth + leftWidth + minLeft) + (progress * rightWidth) : minRight;
}
if ( self._getFit() === 'contain' ) {
top = top > minTop ? (minTop + topWidth) - (progress * topWidth)
: (minTop - topWidth) + (progress * topWidth);
left = left > minLeft ? leftWidth + minLeft - (progress * leftWidth)
: (minLeft - leftWidth) + (progress * leftWidth);
bottom = bottom > minBottom ? bottomWidth + minBottom - (progress * bottomWidth)
: (minBottom - bottomWidth) + (progress * bottomWidth);
right = right > minRight ? rightWidth + minRight - (progress * rightWidth)
: (minRight - rightWidth) + (progress * rightWidth);
}
ctx.drawImage( self._getImage(), left, top, right - left, bottom - top );
ctx.closePath();
ctx.restore();
}
}
);
}
} catch (e) {
console.log('Problem with open Full Canvas ' + e);
} finally {
return;
}
};
CanvasClip.prototype.closeFullCanvas = function ( position, block ) {
var self = this;
//$( block ).find( '.canvaClip' ).removeClass( 'opacity' );
//$( self._getElement() ).addClass( 'opacity' );
var canvas = document.querySelector( '.full-canvas' );
$( canvas ).removeClass( 'opened' );
$( canvas ).addClass( 'opac' );
try {
if ( canvas.getContext ) {
var ctx = canvas.getContext( "2d" );
//***************************************************************/
var top = position.top;
var left = position.left;
var x1Start = 0, x1End = self._getPointFull( 0, 0 ),
y1Start = 0, y1End = self._getPointFull( 0, 1 );
var x2Start = canvas.width, x2End = self._getPointFull( 1, 0 ), x2Width = x2Start - x2End,
y2Start = 0, y2End = self._getPointFull( 1, 1 );
var x3Start = canvas.width, x3End = self._getPointFull( 2, 0 ), x3Width = x3Start - x3End,
y3Start = canvas.height, y3End = self._getPointFull( 2, 1 ), y3Width = y3Start - y3End;
var x4Start = 0, x4End = self._getPointFull( 3, 0 ),
y4Start = canvas.height, y4End = self._getPointFull( 3, 1 ), y4Width = y4Start - y4End;
//***************************************************************/
var left2 = 0;
var top2 = 0;
var imgWidth = $( self._getImage() ).width();
var imgHeight = $( self._getImage() ).height();
var prop = imgWidth / imgHeight;
imgWidth = self._getHeight() * prop;
imgHeight = self._getHeight();
if ( imgWidth < self._getWidth() ) {
imgWidth = self._getWidth();
imgHeight = imgWidth / prop;
}
if ( self._getHeight() < imgHeight ) {
top2 = - ( imgHeight - self._getHeight() ) / 2;
}
if ( self._getWidth() < imgWidth ) {
left2 = - ( imgWidth - self._getWidth() ) / 2;
}
top +=top2;
left +=left2;
//***************************************************************/
var bottom = top + imgHeight;
var right = left + imgWidth;
var imgFullWidth;
var imgFullHeight;
var minTop, minTopTmp;
var minLeft, minLeftTmp;
var minBottom, minBottomTmp;
var minRight, minRightTmp;
var leftWidth;
var topWidth;
var bottomWidth;
var rightWidth;
imgFullWidth = canvas.height * prop;
imgFullHeight = canvas.height;
//***************************************************************/
if ( self._getFit() === 'cover' ) {
if ( imgFullWidth < canvas.width ) {
imgFullWidth = canvas.width;
imgFullHeight = imgFullWidth / prop;
}
}
if ( self._getFit() === 'contain' ) {
if ( imgFullWidth > canvas.width ) {
imgFullWidth = canvas.width;
imgFullHeight = imgFullWidth / prop;
}
}
minTop = - ( imgFullHeight - canvas.height ) / 2;
minLeft = - ( imgFullWidth - canvas.width ) / 2;
minBottom = ( - 1 ) * minTop + canvas.height;
minRight = ( - 1 ) * minLeft + canvas.width;
minTopTmp = minTop;
minLeftTmp = minLeft;
minBottomTmp = minBottom;
minRightTmp = minRight;
if ( left <= minLeft ) {
leftWidth = minLeft - left;
}
if ( left > minLeft ) {
leftWidth = left - minLeft;
}
if ( top <= minTop ) {
topWidth = minTop - top;
}
if ( top > minTop ) {
topWidth = top - minTop;
}
if ( right <= minRight ) {
rightWidth = minRight - right;
}
if ( bottom <= minBottom ) {
bottomWidth = minBottom - bottom;
}
if ( bottom > minBottom ) {
bottomWidth = bottom - minBottom;
}
if ( right > minRight ) {
rightWidth = right - minRight;
}
//***************************************************************/
var canvasWidth = canvas.width,
canvasHeight = canvas.height;
self._animate(
{
duration: self._getFullDuration(),
timing : function ( timeFraction ) {
return timeFraction<.5 ? 4*timeFraction*timeFraction*timeFraction : (timeFraction-1)*(2*timeFraction-2)*(2*timeFraction-2)+1; //easeInOutCubic
},
draw : function ( progress ) {
ctx.clearRect( 0, 0, canvasWidth, canvasHeight );
x1Start = x1Start < x1End ? x1End * progress : x1End;
y1Start = y1Start < y1End ? y1End * progress : y1End;
x2Start = x2Start > x2End ? canvasWidth - ( x2Width * progress ) : x2End;
y2Start = y2Start < y2End ? y2End * progress : y2End;
x3Start = x3Start > x3End ? canvasWidth - ( x3Width * progress ) : x3End;
y3Start = y3Start > y3End ? canvasHeight - ( y3Width * progress ) : y3End;
x4Start = x4Start < x4End ? x4End * progress : x4End;
y4Start = y4Start > y4End ? canvasHeight - ( y4Width * progress ) : y4End;
//****************************************************/
if ( minTop < top ) {
minTop = topWidth * progress + minTopTmp;
if ( minTop >= top ) {
minTop = top;
}
}
if ( minTop > top ) {
minTop = minTopTmp - topWidth * progress;
if ( minTop <= top ) {
minTop = top;
}
}
if ( minLeft > left ) {
minLeft = minLeftTmp - leftWidth * progress;
if ( minLeft <= left ) {
minLeft = left;
}
}
if ( minLeft < left ) {
minLeft = leftWidth * progress + minLeftTmp;
if ( minLeft >= left ) {
minLeft = left;
}
}
if ( minRight > right ) {
minRight = minRightTmp - rightWidth * progress;
if ( minRight <= right ) {
minRight = right;
}
}
if ( minRight < right ) {
minRight = minRightTmp + rightWidth * progress;
if ( minRight >= right ) {
minRight = right;
}
}
if ( minBottom > bottom ) {
minBottom = minBottomTmp - bottomWidth * progress;
if ( minBottom <= bottom ) {
minBottom = bottom;
}
}
if ( minBottom < bottom ) {
minBottom = minBottomTmp + bottomWidth * progress;
if ( minBottom >= bottom ) {
minBottom = bottom;
}
}
ctx.save();
ctx.beginPath();
ctx.moveTo( x1Start, y1Start );
ctx.lineTo( x2Start, y2Start );
ctx.lineTo( x3Start, y3Start );
ctx.lineTo( x4Start, y4Start );
ctx.lineTo( x1Start, y1Start );
ctx.clip();
ctx.drawImage( self._getImage(), minLeft, minTop, minRight - minLeft, minBottom - minTop );
ctx.closePath();
ctx.restore();
}
}
);
setTimeout(
function () {
$( self._getElement() ).removeClass( 'opacity' );
$( '.full-canvas' ).remove();
LoadPrecenter.startRotate();
//rotateSvgElem.startRotate();
}, self._getFullDuration() + 150
);
}
}
catch ( e ) {
console.log( e );
}
};
CanvasClip.prototype.resetFullCanvas = function ( block, position, img ) {
var self = this;
$( block ).find( '.canvaClip' ).removeClass( 'opacity' );
$( self._getElement() ).addClass( 'opacity' );
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight - 62;
if( $('body' ).hasClass('inverse') )
windowHeight = window.innerHeight - 80;
var canvas = document.querySelector( '.full-canvas' );
if ( canvas ) {
$( canvas ).remove();
}
$( 'body' ).append( '' );
canvas = document.querySelector( '.full-canvas' );
$( canvas ).addClass( 'opened' );
try {
if ( canvas.getContext ) {
var ctx = canvas.getContext( "2d" );
var top = parseInt( position.top, 10 );
var left = parseInt( position.left, 10 );
self._setPointFull( 0, 0, left );
self._setPointFull( 0, 1, top );
self._setPointFull( 1, 0, self._getWidth() + left );
self._setPointFull( 1, 1, top );
self._setPointFull( 2, 0, left + self._getWidth() );
self._setPointFull( 2, 1, self._getHeight() + top );
self._setPointFull( 3, 0, left );
self._setPointFull( 3, 1, top + self._getHeight() );
//***************************************************************/
var imgWidth = $( self._getImage() ).width();
var imgHeight = $( self._getImage() ).height();
var prop = imgWidth / imgHeight;
imgWidth = self._getHeight() * prop;
if ( imgWidth < self._getWidth() ) {
imgWidth = self._getWidth();
}
var imgFullWidth;
var imgFullHeight;
var minTop;
var minLeft;
var minBottom;
var minRight;
imgFullWidth = canvas.height * prop;
imgFullHeight = canvas.height;
//***************************************************************/
if ( self._getFit() === 'cover' ) {
if ( imgFullWidth < canvas.width ) {
imgFullWidth = canvas.width;
imgFullHeight = imgFullWidth / prop;
}
minTop = - ( imgFullHeight - canvas.height ) / 2;
minLeft = - ( imgFullWidth - canvas.width ) / 2;
minBottom = ( - 1 ) * minTop + canvas.height;
minRight = ( - 1 ) * minLeft + canvas.width;
}
if ( self._getFit() === 'contain' ) {
if ( imgFullWidth > canvas.width ) {
imgFullWidth = canvas.width;
imgFullHeight = imgFullWidth / prop;
}
minTop = - ( imgFullHeight - canvas.height ) / 2;
minLeft = - ( imgFullWidth - canvas.width ) / 2;
minBottom = ( - 1 ) * minTop + canvas.height;
minRight = ( - 1 ) * minLeft + canvas.width;
}
//***************************************************************/
var img = img ? img : self._getImage();
ctx.drawImage( img, minLeft, minTop, minRight - minLeft, minBottom - minTop );
}
}
catch ( e ) {
console.log( "Problem with reser Full Canvas " + e );
}
};
CanvasClip.prototype._setDuration = function ( duration ) {
if ( ! duration || ! isNumeric( duration ) ) {
return;
}
this.duration = duration;
};
CanvasClip.prototype._getDuration = function () {
return this.duration;
};
CanvasClip.prototype._setFullDuration = function ( duration ) {
if ( ! duration || ! isNumeric( duration ) ) {
return;
}
this.durationFull = duration;
};
CanvasClip.prototype._getFullDuration = function () {
return this.durationFull;
};
CanvasClip.prototype._animate = function ( options ) {
var start = new Date().getTime();
window.requestAnimationFrame(
function animate() {
// timeFraction от 0 до 1
var now = new Date().getTime();
var timeFraction = ( now - start ) / options.duration;
if ( timeFraction > 1 ) {
timeFraction = 1;
}
// текущее состояние анимации
var progress = options.timing( timeFraction );
options.draw( progress );
if ( timeFraction < 1 ) {
window.requestAnimationFrame( animate );
}
}
);
};
CanvasClip.prototype._animateFull = function ( options ) {
//var start = performance.now();
var start = new Date().getTime();
window.requestAnimationFrame(
function animate() {
// timeFraction от 0 до 1
//var now = performance.now();
var now = new Date().getTime();
var timeFraction = ( now - start ) / options.duration;
if ( timeFraction > 1 ) {
timeFraction = 1;
}
// текущее состояние анимации
var progress = options.timing( timeFraction );
options.draw( progress );
if ( timeFraction < 1 )
window.requestAnimationFrame( animate );
}
);
};
CanvasClip.prototype._setProperties = function ( item ) {
var self = this;
var parentWidth = $( item ).parent().width();
var parentHeight = $( item ).parent().height();
self._setWidth( parentWidth );
self._setHeight( parentHeight );
self._setImage( item );
self._setPoints();
};
CanvasClip.prototype._createElement = function ( block, img ) {
var self = this;
if ( block.find( 'canvas.canvaClip' ).length ) {
block.find( 'canvas.canvaClip' ).remove();
}
block.append( '' );
var canvas = block.find( 'canvas.canvaClip' )[ 0 ];
if ( canvas.getContext ) {
var ctx = canvas.getContext( "2d" );
self.devPix = window.devicePixelRatio || window.screen.deviceXDPI / window.screen.logicalXDPI;
self.devPix = (self.devPix).toFixed(1);
canvas.width *= self.devPix;
canvas.height *= self.devPix;
canvas.style.width = self._getWidth() + "px";
canvas.style.height = self._getHeight() + "px";
ctx.scale(self.devPix, self.devPix);
var left = 0;
var top = 0;
var imgWidth = img.naturalWidth;
var imgHeight = img.naturalHeight;
if( ! imgWidth )
imgWidth = $(self._getImage()).innerWidth();
if( ! imgHeight )
imgHeight = $(self._getImage()).innerHeight();
var proportion = imgWidth / imgHeight;
imgWidth = self._getHeight() * proportion;
imgHeight = self._getHeight();
if ( imgWidth < self._getWidth() ) {
imgWidth = self._getWidth();
imgHeight = imgWidth / proportion;
}
if ( self._getHeight() < imgHeight ) {
top = - ( imgHeight - self._getHeight() ) / 2;
}
if ( self._getWidth() < imgWidth ) {
left = - ( imgWidth - self._getWidth() ) / 2;
}
ctx.save();
ctx.beginPath();
ctx.drawImage( img, left, top, imgWidth, imgHeight );
ctx.closePath();
ctx.restore();
}
self._setElement( canvas );
};
CanvasClip.prototype._setElement = function ( element ) {
this._element = element;
};
CanvasClip.prototype._getElement = function () {
return this._element;
};
CanvasClip.prototype._setWidth = function ( width ) {
this._width = width;
};
CanvasClip.prototype._getWidth = function () {
return this._width;
};
CanvasClip.prototype._setHeight = function ( height ) {
this._height = height;
};
CanvasClip.prototype._getHeight = function () {
return this._height;
};
CanvasClip.prototype._setImage = function ( image ) {
this._image = image;
};
CanvasClip.prototype._getImage = function () {
return this._image;
};
CanvasClip.prototype._setPoints = function () {
var self = this;
self._points = [
[
0,
0
],
[
self._getWidth(),
0
],
[
self._getWidth(),
self._getHeight()
],
[
0,
self._getHeight()
]
];
};
CanvasClip.prototype._setPoint = function ( row, collum, value ) {
this._points[ row ][ collum ] = value;
};
CanvasClip.prototype._getPoint = function ( row, collum ) {
return this._points[ row ][ collum ];
};
CanvasClip.prototype._setPointFull = function ( row, collum, value ) {
this._pointsFull[ row ][ collum ] = value;
};
CanvasClip.prototype._getPointFull = function ( row, collum ) {
return this._pointsFull[ row ][ collum ];
};
CanvasClip.prototype._setRandom = function () {
this._rand = getRandomInt( 0, 2 );
};
CanvasClip.prototype._getRandom = function () {
return this._rand;
};
CanvasClip.prototype.onMouseEnter = function ( callback ) {
var self = this;
if ( ! navigator.userAgent.match( /(iPhone|iPod|iPad|Android|BlackBerry)/ ) ) {
$( self._getElement() ).on(
'mouseenter', function () {
self.clipCanvas();
if ( callback ) {
callback();
}
}
);
}
};
CanvasClip.prototype.onMouseLeave = function ( callback ) {
var self = this;
if ( ! navigator.userAgent.match( /(iPhone|iPod|iPad|Android|BlackBerry)/ ) ) {
$( self._getElement() ).on(
'mouseleave', function () {
self.unclipCanvas();
if ( callback ) {
callback();
}
}
);
}
};
CanvasClip.prototype.onMouseMove = function () {
$( this._getElement() ).on(
'mousemove', function () {
console.log( 'mousemove' );
}
);
};
CanvasClip.prototype.onClick = function ( canvasObject, block, count, index, fit ) {
var self = this;
var left, top, position;
//*****************************************************************************/
var currentEvent; // перевіряє який івент( тач або клік )
currentEvent = 'click';
if ( window.ontouchstart !== undefined )
{
currentEvent = 'touch';
$(self._getElement ).on('touchmove', function( e ){
$( block ).find( '.item' ).each(
function ( index ) {
if($(this ).hasClass('hover'))
canvasObject[ count ][ index ].unclipCanvas();
}
);
$( block ).find( '.item' ).removeClass( 'hover' );
});
}
//******************************************************************************/
$( self._getElement() ).on(
'mousedown', function ( e ) {
left = e.clientX;
top = e.clientY;
}
);
$( self._getElement() ).off('mouseup').on(
'mouseup', function ( e ) {
position = $( this ).offset();//coordinate
var left2 = e.clientX,
top2 = e.clientY;
if ( Math.ceil( left ) !== Math.ceil( left2 ) || Math.ceil( top ) !== Math.ceil( top2 ) )
return;
if ( currentEvent === 'touch' ) {
if ( ! $( this ).parent().parent().hasClass( 'hover' ) ) {
$( block ).find( '.item' ).each(
function ( index ) {
canvasObject[ count ][ index ].unclipCanvas();
}
);
canvasObject[ count ][ index ].clipCanvas();
$( block ).find( '.item' ).removeClass( 'hover' );
$( this ).parent().parent().addClass( 'hover' );
return;
}
$( block ).find( '.item' ).removeClass( 'hover' );
$( block ).find( '.item' ).each(
function ( index ) {
canvasObject[ count ][ index ].unclipCanvas();
}
);
}
if ( $( block ).parent().find( '.fotorama' ).length <= 0 ) {
return;
}
self.openFullCanvas( position ); //open full canvas
$( block ).owlCarousel().data( 'owlCarousel' ).settings.autoplay = false; // stop autoplay carousel
var startActiveIndex = 0;
var endActiveIndex = 0;
var numeric = index;
var plus = $( block ).data( 'owlCarousel' ).settings.items;
// carousel was resized
$( block ).off( 'resized.owl.carousel' ).on(
'resized.owl.carousel', function () {
$( '.fotorama--fullscreen' ).find( '.fotorama__nav__frame--thumb' ).each(
function ( ind, item ) {
if ( $( item ).hasClass( 'fotorama__active' ) ) {
endActiveIndex = ind;
}
}
);
plus = $( this ).data( 'owlCarousel' ).settings.items;
if ( startActiveIndex >= plus )
startActiveIndex = 0;
if ( startActiveIndex < 0 )
startActiveIndex = plus;
position = $( this ).find( '.owl-item.active' ).eq( startActiveIndex ).find( '.canvaClip' ).offset();
numeric = endActiveIndex + plus;
canvasObject[ count ][ numeric ].resetFullCanvas( block, position );
}
);
//carousel was translated
$( block ).off( 'translated.owl.carousel' ).on(
'translated.owl.carousel', function () {
$( '.fotorama--fullscreen' ).find( '.fotorama__nav__frame--thumb' ).each(
function ( ind, item ) {
if ( $( item ).hasClass( 'fotorama__active' ) ) {
endActiveIndex = ind;
}
}
);
plus = $( this ).data( 'owlCarousel' ).settings.items;
if ( startActiveIndex >= plus )
startActiveIndex = 0;
position = $( this ).find( '.owl-item.active' ).eq( startActiveIndex ).find( '.canvaClip' ).offset();
numeric = endActiveIndex;
if ( $( block ).owlCarousel().data( 'owlCarousel' ).settings.loop && plus <= $( block ).find( '.owl-item.active' ).length )
numeric = endActiveIndex + plus;
if ( ! $( canvasObject[ count ][ numeric ]._getElement() ).parent().parent().parent().hasClass( 'active' ) ) {
var imgSrc = $( canvasObject[ count ][ numeric ]._getElement() ).parent().find( 'img' ).attr( 'src' );
$( this ).find( '.owl-item.active' ).find( '.item_img' ).find( 'img' ).each(
function ( numer, item ) {
if ( item.src.indexOf(imgSrc) !== -1 ) {
numeric = $( this ).parent().parent().parent().index();
}
}
);
}
canvasObject[ count ][ numeric ].resetFullCanvas( block, position );
$( block ).trigger( 'to.owl.carousel', [ endActiveIndex - startActiveIndex, 1, true ] );
$( block ).off( 'translated.owl.carousel' );
}
);
var isShowEndFotorama = false;
setTimeout(
function () {
//***************************************************************************/
var fotoramaBlock = $( block ).parent().find( '.fotorama' ); // main fotorama's block
var fotorama = $( block ).parent().find( '.fotorama' ).data( 'fotorama' ); // fotorama's object
var number = 0;
// знаходить елемент який пртрібно показати у фоторамі */
fotoramaBlock.find( '.fotorama__nav__frame--thumb' ).find( 'img' ).each(
function ( numer, item ) {
if ( item.src === self._getImage().src ) {
number = numer;
}
}
);
$( block ).parent().find( '.fotorama' ).removeClass( 'hiden' ); // remove class hiden
fotorama.setOptions(
{
fit : fit,
transition: 'slide'
}
); // set some options to fotorama
fotorama.show( number ); // show number element of fotorama
fotorama.requestFullScreen(); // fullscreen
fotorama.clickOn = function () {
alert();
};
var $fotoramaBottom = $( '.fotorama__nav-wrap' );
if ( $fotoramaBottom.find( '.bottom' ).length <= 0 ) // add close button
$fotoramaBottom.append( '' );
var bool = true;
$( block ).find( '.owl-item.active' ).find( 'img' ).each(
function ( numer, item ) {
if ( item.src === self._getImage().src && bool ) {
startActiveIndex = numer;
bool = false;
}
}
);
var $fotoramaFullScreen = $( '.fotorama--fullscreen' );
// fotorama was translated
$fotoramaFullScreen.off( 'fotorama:showend' ).on(
'fotorama:showend', function ( e, fotorama, extra ) {
isShowEndFotorama = true;
$( this ).find( '.fotorama__nav__frame--thumb' ).each(
function ( ind, item ) {
if ( $( item ).hasClass( 'fotorama__active' ) ) {
endActiveIndex = ind;
}
}
);
$( '.fotorama_show-icons' ).off( 'click' ).on(
'click', function ( e ) {
e.preventDefault();
$( this ).addClass( 'open' );
$( this ).parent().find( 'ul' ).addClass( 'open' );
}
);
plus = $( block ).data( 'owlCarousel' ).settings.items;
if ( ! $( block ).owlCarousel().data( 'owlCarousel' ).settings.loop && plus <= $( block ).find( '.owl-item.active' ).length)
{
$( block ).trigger( 'to.owl.carousel', [ endActiveIndex, 1, true ] );
} else {
$( block ).trigger( 'to.owl.carousel', [ endActiveIndex - startActiveIndex, 1, true ] );
}
$( block ).off( 'translated.owl.carousel' );
}
);
if ( $(block ).hasClass('portfolio') ){
$fotoramaFullScreen.addClass( 'portfolio' );
}
setTimeout(function () { // show fullscreen fotorama after some time
$fotoramaFullScreen.addClass( 'open' );
}, canvasObject[count][index]._getFullDuration() / 3);
var $fototramaShowIcons = $( '.fotorama_show-icons' );
$fototramaShowIcons.removeClass( 'open' );
$fototramaShowIcons.parent().find( 'ul' ).removeClass( 'open' );
$fototramaShowIcons.off('click').on(
'click', function ( e ) {
e.preventDefault();
$( this ).addClass( 'open' );
$( this ).parent().find( 'ul' ).addClass( 'open' );
}
);
// CLOSE FOTORAMA */
$fotoramaFullScreen.find( '.close-this' ).off( 'click' ).on(
'click', closeFullFotorama );
function closeFullFotorama ( e ) {
/*************************************/
if ( isShowEndFotorama ) {
if ( $( block ).owlCarousel().data( 'owlCarousel' ).settings.loop && plus <= $( block ).find( '.owl-item.active' ).length ) {
if ( startActiveIndex > plus )
startActiveIndex = 0;
if ( startActiveIndex < 0 )
startActiveIndex = plus;
position = $( block ).find( '.owl-item.active' ).eq( startActiveIndex ).find( '.canvaClip' ).offset();
numeric = endActiveIndex + plus;
//numeric = endActiveIndex;
if ( ! $( canvasObject[ count ][ numeric ]._getElement() ).parent().parent().parent().hasClass( 'active' ) ) {
var imgSrc = $( canvasObject[ count ][ numeric ]._getElement() ).parent().find( 'img' ).attr( 'src' );
$( block ).find( '.owl-item.active' ).find( '.item_img' ).find( 'img' ).each(
function ( numer, item ) {
if ( $(item).attr('src') === imgSrc ) {
numeric = $( this ).parent().parent().parent().index();
}
}
);
}
canvasObject[ count ][ numeric ].resetFullCanvas( block, position );
}
else
{
position = $( block ).find( '.owl-item' ).eq( endActiveIndex ).find( '.canvaClip' ).offset();
canvasObject[ count ][ endActiveIndex ].resetFullCanvas( block, position );
numeric = endActiveIndex;
}
}
/*****************************************/
var $fotoramaFullScreen = $( '.fotorama--fullscreen' );
$fotoramaFullScreen.off();
fotorama.setOptions(
{
transition: 'crossfade'
}
);
e.preventDefault();
$( '.fotorama__nav-wrap .bottom' ).remove();
$fotoramaFullScreen.removeClass( 'open' );
setTimeout(function(){
fotorama.cancelFullScreen();
if ( $( window ).width() > 767 ) {
$( block ).parent().find( '.fotorama' ).addClass( 'hiden' );
setTimeout(
function () {
$( block ).owlCarousel().data( 'owlCarousel' ).settings.autoplay = false;
}, canvasObject[ count ][ index ]._getFullDuration() + 50
);
}
else {
if ( ! $( block ).parent().find( '.fotorama' ).hasClass( 'size-320' ) )
$( block ).parent().find( '.fotorama' ).addClass( 'size-320' );
fotorama.setOptions(
{
fit: canvasObject[ count ][ index ]._getFit()
}
);
}
$( block ).off( 'translated.owl.carousel' );
$( block ).off( 'resized.owl.carousel' );
//setTimeout(function(){
canvasObject[ count ][ numeric ].closeFullCanvas( position, block );
//}, 100);
},300);
}
//***************************************************************************/
}, canvasObject[ count ][ index ]._getFullDuration() + 150
);
});
};
CanvasClip.prototype.disableClick = function () {
$( this._getElement() ).off( 'click' );
};
CanvasClip.prototype._setFit = function ( fit ) {
var a_fit = [ 'cover', 'contain' ];
if ( a_fit.indexOf( fit ) !== - 1 ) {
this._fit = fit;
}
};
CanvasClip.prototype._getFit = function () {
return this._fit;
};
var globalTimer;
/**
* Ініціалізація КліпКанваса
* @param block - блок, в якому знаходяться елементи
* @param count - кількість елементів
* @param option - параметри
* @returns {boolean}
*/
function initClipCanvas( block, count, option ) {
//*****************************************************************************/
var fullCanvas = document.querySelector( '.full-canvas' );
if ( fullCanvas ) {
$( fullCanvas ).remove();
}
if ( $( window ).width() > 767 ) {
canvasObject[ count ] = [];
var z = 0;
$( block ).find( '.item' ).removeClass( 'hover' );
var $items = $( block ).find( '.item_img' ).find( 'img' );
var imgLength = $items.length;
var wWidth = window.innerWidth;
$items.each(
function ( index, item ) {
var img = new Image();
addEvent(img, 'load', function() {
$items[index].setAttribute('src', img.getAttribute('src'));
canvasObject[ count ][ index ] = new CanvasClip();
canvasObject[ count ][ index ].buildCanvas( $items[index], img );
canvasObject[ count ][ index ]._setDuration( option.duration );
canvasObject[ count ][ index ]._setFullDuration( option.durationFull );
canvasObject[ count ][ index ]._setFit( option.fit );
canvasObject[ count ][ index ].onMouseEnter(
function () {
$( canvasObject[ count ][ index ]._getElement() ).parent().parent().addClass( 'hover' );
}
);
canvasObject[ count ][ index ].onMouseLeave(
function () {
$( canvasObject[ count ][ index ]._getElement() ).parent().parent().removeClass( 'hover' );
}
);
canvasObject[ count ][ index ].onClick( canvasObject, block, count, index, canvasObject[ count ][ index ]._getFit() );
z ++;
if ( z === imgLength ) {
$( block ).find( '.item_img' ).find( '.canvaClip' ).each(function (i, element) {
setTimeout(function(){
$(element).addClass("showThis");
$(element ).parent().find('.timer' ).remove();
}, i*100);
});
}
});
img.src = item.getAttribute('data-src');
}
);
}
removeEvent(window, 'resize', resize);
addEvent( window, 'resize', resize );
function resize(){
clearTimeout( globalTimer );
globalTimer = setTimeout(
function () {
var owl = $( '.clipCarousel' );
owl.each(
function ( index, carousel ) {
if ( ! $( carousel ).hasClass( 'clipRunned' ) ) {
return;
}
setBlockHeight( carousel );
// $ ( carousel ).find ( '.timer' ).css ( 'display', '' );
var fit = $( carousel ).hasClass( 'cover' ) ? 'cover' : 'contain';
option.fit = fit;
initClipCanvas( carousel, index, option );
}
);
}, 300
);
}
}
/**
* Ініціалізація фоторами
* */
function initFotorama( owl, count ) {
var itemsImages = $( owl ).find( 'img' ), //знаходить усі картинки каруселі
fotoramaImages = [], //масив для запису картинок
fotoramaInfo = [],
j = 0, // допоміжна змінна
i = 0;
// записуємо у масив усі картинки для побудови фоторами
for ( i; i < itemsImages.length; i ++ ) {
// якщо картинка не являється клоном
if ( itemsImages[ i ].parentNode.parentNode.parentNode.className.indexOf( 'clone' ) === - 1 ) {
fotoramaImages[ j ] = itemsImages[ i ]; // записується у масив
var p = itemsImages[ i ].parentNode.parentNode.getElementsByClassName( 'item-info' )[ 0 ];
fotoramaInfo[ j ] = $( p ).html();
j ++;
}
}
// додає головний блок для фоторами */
if ( ! $( owl ).parent().find( '.fotorama' ).length && ! $( owl ).parent().find( '.fotorama--hidden' ).length ) {
$( owl ).parent().append( ' ' );
}
var fotorama_div = $( owl ).parent().find( '.fotorama div' );
for ( var i = 0; i < fotoramaImages.length; i ++ ) {
var src = $( fotoramaImages[ i ] ).attr( 'data-src' );
if ( fotorama_div[ i ] ) {
fotorama_div[ i ].setAttribute( 'data-thumb', src );
fotorama_div[ i ].setAttribute( 'data-img', src );
if ( ! $( fotorama_div[ i ] ).find( '.item-info' ).html() && ! $( fotorama_div[ i ] ).find( '.item-info' ).length ) {
$( fotorama_div[ i ] ).find( '.item-info' ).html( fotoramaInfo[ i ] );
}
}
else {
var info = fotoramaInfo[ i ] ? fotoramaInfo[ i ] : '';
$( owl ).parent().find( '.fotorama' ).append( ' ' + info + '
' );
}
}
// 1. Initialize fotorama manually.
var $fotoramaDiv = $( owl ).parent().find( '.fotorama' ).fotorama(
{
width : '100%',
allowfullscreen: true,
nav : 'thumbs',
arrows : false,
transition : 'slide',
clicktransition: 'dissolve',
keyboard : false,
click : false,
loop : true,
thumbwidth : 61,
thumbheight : 40,
thumbmargin : 10,
shadows : false,
navwidth : '85%'
}
);
//$('.fotorama__html').click(function (e) {
// e.preventDefault();
// //var img = $(this).closest(".fotorama__stage").find('img');
// var img = $(this).parent().find('img');
// if (img.hasClass("zoom-in")) {
// img
// .css({
// width: img.attr("data-org-width") + "px",
// height: img.attr("data-org-height") + "px",
// top: img.attr("data-org-top") + "px",
// left: img.attr("data-org-left") + "px"
// });
// img.removeClass("zoom-in");
// $('.fotorama__html').unbind('mousemove');
// }
// else {
// var width = img.width();
// var height = img.height();
// var naturalWidth;
// var naturalHeight;
// var image = new Image();
// image.src = img.attr("src");
// image.onload = function () {
// naturalWidth = this.width;
// naturalHeight = this.height;
// if (naturalWidth > $(window).width()) {
// var l_ = parseInt(img.css("left"));
// var t_ = parseInt(img.css("top"));
// var left = ((e.pageX - l_) * (naturalWidth / width));
// var top = ((e.pageY - t_) * (naturalHeight / height));
// console.log(left);
// console.log(top);
// console.log(width);
// console.log(height);
// img.addClass("zoom-in")
// //.css("left", -(naturalWidth / 2))
// //.css("top", -(naturalHeight / 2))
// .css("left", 0)
// .css("top", 0)
// .css("width", naturalWidth)
// .css("height", naturalHeight)
// .attr("data-org-width", width)
// .attr("data-org-height", height)
// .attr("data-org-left", l_)
// .attr("data-org-top", t_)
// $('.fotorama__html').mousemove(function (e) {
// var img_height = img.height();
// var img_width = img.width();
// var window_height = $(window).height();
// var window_width = $(window).width();
// var yfactor = (img_height - window_height) / window_height;
// if (yfactor < 1) {
// yfactor = 1;
// }
// var xfactor = (img_width - window_width) / window_width;
// if (xfactor < 1) {
// xfactor = 1;
// }
// var avatar = img;
// var yheight = parseInt(e.clientY);
// var xwidth = parseInt(e.clientX);
// img.css({
// top: '-' + (yheight * yfactor) + "px",
// left: '-' + (xwidth * xfactor) + "px"
// });
// //console.log(parseInt($(this).css("left")));
// //var x = e.pageX;
// //var y = e.pageY;
// //var wWidth = $(window).width();
// //var wHeight = $(window).height();
// //x = wWidth / 2 - x;
// //y = wHeight / 2 - y;
// //console.log(x);
// //console.log(y);
// //var leftLimit = img.width() - wWidth;
// //var topLimit = img.height() - wHeight;
// //var left = parseInt(img.css("left"));
// //var top = parseInt(img.css("top"));
// //if (left >= -(leftLimit) && left <= leftLimit && top >= -(topLimit) && top <= topLimit) {
// // img.css({
// // left: left - x,
// // top: top - y,
// // })
// //}
// });
// }
// };
// }
//});
if( $('body' ).hasClass('inverse') ) {
$fotoramaDiv.data( 'fotorama' ).options.thumbheight = 60;
$fotoramaDiv.data( 'fotorama' ).options.thumbwidth = 81;
}
// 2. Get the API object.
var fotorama = $fotoramaDiv.data( 'fotorama' );
function runFotorama() {
var $owl = $( owl ),
$fotorama = $owl.parent().find( '.fotorama' );
if ( $( window ).width() > 767 ) {
if ( $owl.hasClass( 'hiden' ) ) {
$owl.removeClass( 'hiden' );
}
if ( $fotorama.addClass( 'size-320' ) ) {
$fotorama.removeClass( 'size-320' );
}
if ( ! $fotorama.hasClass( 'hiden' ) ) {
$fotorama.addClass( 'hiden' );
}
fotorama.setOptions(
{
navwidth: '80%'
}
);
}
if ( $( window ).width() <= 767 ) {
if ( ! $owl.hasClass( 'hiden' ) )
$owl.addClass( 'hiden' );
if ( $( '.full-canvas' ).length )
$( '.full-canvas' ).remove();
if ( fotorama !== undefined ) {
if ( ! $fotorama.hasClass( 'size-320' ) ) {
$fotorama.addClass( 'size-320' );
}
if ( $fotorama.hasClass( 'hiden' ) ) {
$fotorama.removeClass( 'hiden' );
}
fotorama.cancelFullScreen();
fotorama.setOptions(
{
navwidth: '100%',
fit : 'cover',
height : '50%',
spinner : {
lines: 13,
color: 'rgba(0, 0, 0, 0)'
}
}
);
mobileFotorama();
var $showIcons = $fotorama.find( '.fotorama_show-icons' );
$showIcons.off().on(
'click', function ( e ) {
e.preventDefault();
$( this ).addClass( 'open' );
$( this ).parent().find( 'ul' ).addClass( 'open' );
}
);
$showIcons.removeClass( 'open' );
$showIcons.parent().find( 'ul' ).removeClass( 'open' );
$fotorama.find( '.fotorama__nav-wrap' ).find( '.fotorama__nav__frame--thumb' ).each(
function ( index, item ) {
if ( $( item ).hasClass( 'fotorama__active' ) ) {
if ( ! $( item ).parent().parent().find( '.fotorama_mobile-count' ).length ) {
$( item ).parent().parent().append( '' + index + 1 + ' / ' + $( item ).parent().find( '.fotorama__nav__frame--thumb' ).length + '
' );
}
$( item ).parent().parent().find( '.fotorama_mobile-count' ).html( index + 1 + ' / ' + $( item ).parent().find( '.fotorama__nav__frame--thumb' ).length );
}
}
);
$fotorama.on(
'fotorama:showend', function ( e, fotorama, extra ) {
mobileFotorama();
$( this ).find( '.fotorama__nav-wrap' ).find( '.fotorama__nav__frame--thumb' ).each(
function ( index, item ) {
if ( $( item ).hasClass( 'fotorama__active' ) ) {
if ( ! $( item ).parent().parent().find( '.fotorama_mobile-count' ).length ) {
$( item ).parent().parent().append( '
' + index + 1 + ' / ' + $( item ).parent().find( '.fotorama__nav__frame--thumb' ).length + '
' );
}
$( item ).parent().parent().find( '.fotorama_mobile-count' ).html( index + 1 + ' / ' + $( item ).parent().find( '.fotorama__nav__frame--thumb' ).length );
}
}
);
$fotorama.find( '.fotorama_show-icons' ).off( 'click' ).on(
'click', function ( e ) {
e.preventDefault();
$( this ).addClass( 'open' );
$( this ).parent().find( 'ul' ).addClass( 'open' );
}
);
}
);
}
}
function mobileFotorama() {
var $active = $( owl ).parent().find( '.fotorama' ).find( '.fotorama__stage__frame.fotorama__active' );
var startx;
var endx;
$active.off('touchstart').on(
'touchstart', function ( e ) {
var touchobj = e.originalEvent; // reference first touch point (ie: first finger)
startx = parseInt( touchobj.targetTouches[0].pageX, 10 ); // get x position of touch point relative to left
// edge of browser
}
);
$active.off('touchend').on(
'touchend', function ( e ) {
var touchobj = e.originalEvent; // reference first touch point (ie: first finger)
endx = parseInt( touchobj.changedTouches[0].pageX, 10 ); // get x position of touch point relative to left
// edge of browser
if ( startx !== endx ) {
return;
}
if ( $( owl ).hasClass( 'portfolio' ) ) {
return;
}
$( this ).find( '.fotorama__html' ).addClass( 'open' );
$( this ).find( '.fotorama-info' ).addClass( 'open' );
fotorama.setOptions(
{
swipe: false
}
);
var $fotoramaMobile = $( owl ).parent().find( '.fotorama' ),
$fotoramaStage = $fotoramaMobile.find( '.fotorama__stage' ),
$fotoramaNav = $fotoramaMobile.find( '.fotorama__nav' );
$fotoramaMobile.find( '.fotorama__nav__shaft' ).addClass( 'hiden' );
$fotoramaStage.addClass( 'open' );
$fotoramaStage.find( '.fotorama__img' ).addClass( 'hidden' );
$( owl ).parent().find( '.fotorama_mobile-count' ).addClass( 'opacity' );
if ( $fotoramaNav.find( '.bottom' ).length <= 0 ) {
$fotoramaNav.append( '
' );
}
$fotoramaNav.find( '.close-this' ).off( 'click' ).on('click',
function ( e ) {
$('.zoom-in').removeClass("zoom-in");
$('.fotorama__html').unbind('mousemove');
$( owl ).parent().find( '.fotorama__html' ).removeClass( 'open' );
var $fotoramaShowIcons = $fotoramaMobile.find( '.fotorama_show-icons' );
$fotoramaShowIcons.removeClass( 'open' );
$fotoramaShowIcons.parent().find( 'ul' ).removeClass( 'open' );
$( owl ).parent().find( '.fotorama_mobile-count' ).removeClass( 'opacity' );
e.preventDefault();
$fotoramaMobile.find( '.fotorama__nav .bottom' ).remove();
$fotoramaMobile.find( '.fotorama-info' ).removeClass( 'open' );
$fotoramaStage.removeClass( 'open' );
$fotoramaStage.removeClass( 'open' );
fotorama.setOptions(
{
swipe: true
}
);
$fotoramaStage.find( '.fotorama__img' ).removeClass( 'hidden' );
$fotoramaMobile.find( '.fotorama__nav__shaft' ).removeClass( 'hiden' );
}
);
}
);
}
}
runFotorama();
addEvent(
window, 'resize', function () {
runFotorama();
}
);
}
/**
* Ініціалізація усіх карусельок із заданим класов
* @param owl
*/
function initCarousel( owl ) {
$( owl ).each(
function ( index, carousel ) {
var obj;
if ( $( carousel ).hasClass( 'demo' ) ) {
setElemNumber( carousel );
obj = $( carousel ).owlCarousel(
{
center : true,
margin : 30,
loop : false,
autoplay : false,
autoplayTimeout : 3000,
autoplaySpeed : 1000,
nav : false,
smartSpeed : 1000,
autoplayHoverPause: true,
responsive : {
0 : {
items: 1
},
500 : {
items: 2
},
800 : {
items: 3
},
1140 : {
items: 4
},
callbacks: true
}
}
);
var isTranslate = false;
$( carousel ).find('.owl-item' ).on('click', function(e){
e.stopPropagation();
if ( ! $(this ).hasClass('center') || isTranslate ) {
e.preventDefault();
$( carousel ).trigger('to.owl.carousel', [ $(this ).index(), 400 ]);
isTranslate = true;
}
$( carousel ).on('translated.owl.carousel', function(){
isTranslate = false;
});
} );
}
else {
setElemNumber( carousel );
obj = $( carousel ).owlCarousel(
{
margin : 30,
loop : false,
autoplay : false,
autoplayTimeout : 3000,
autoplaySpeed : 1000,
nav : false,
smartSpeed : 1000,
autoplayHoverPause: true,
responsive : {
0 : {
items: 1
},
500 : {
items: 2
},
768 : {
items: 3
},
997 : {
items: 4
},
1140 : {
items: 5
},
callbacks: true
}
}
);
setBlockHeight( carousel );
}
var isAnimate = false;
$( carousel ).on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
if( ! isAnimate ) {
$( carousel ).trigger('next.owl.carousel', [300]);
}
} else {
if( ! isAnimate ) {
$( carousel ).trigger('prev.owl.carousel', [300]);
}
}
$( carousel ).on('translate.owl.carousel', function(){
isAnimate = true;
});
$( carousel ).on('translated.owl.carousel', function(){
isAnimate = false;
});
e.preventDefault();
});
recalcCarouselWidth( carousel );
removeEvent(window, 'resize', resize);
//var timer;
addEvent( window, 'resize', resize );
function resize(){
if ( ! $( carousel ).hasClass( 'demo' ) )
setBlockHeight( carousel );
recalcCarouselWidth( carousel );
}
// LEFT RIGHT NAVIGATION
var urlRight = "url('img/gright_white.svg'), e-resize",
urlLeft = "url('img/gleft_white.svg'), w-resize";
var isChange = false;
if ( $('body' ).hasClass('inverse') || $('body' ).hasClass('color_bg') || $('body' ).hasClass('gradient_bg') ){
urlRight = "url('img/gright.svg'), e-resize",
urlLeft = "url('img/gleft.svg'), w-resize";
}
var goRight = false;
//var clickCount = 0;
var $owlItems = $(carousel).find('.owl-item');
var owlItemsLength = $owlItems.length;
var findClass = 'active';
if($( carousel ).owlCarousel().data( 'owlCarousel' ).settings.center) {
findClass = 'center';
}
$(carousel).parent().on('mousemove', function(event){
if( event.pageX > window.innerWidth/2 ) {
$(this).parent().css('cursor', urlRight);
goRight = true;
}
else {
$(this).parent().css('cursor', urlLeft);
goRight = false;
}
});
obj.on('change.owl.carousel', function(){
isChange = true;
});
$(carousel).find('.owl-stage').on('click', function(e){
e.stopPropagation();
});
$(carousel).parent().on('click', function(e){
e.preventDefault();
e.stopPropagation();
var self = this;
if( goRight ) {
obj.trigger('next.owl.carousel', [500]);
} else {
obj.trigger('prev.owl.carousel', [500]);
}
});
}
);
// }
function setElemNumber( carousel ) {
$( carousel ).find( '.item' ).each(
function ( index ) {
var index = $( this ).index();
if ( ! $( this ).find( '.item-info' ).length ) {
$( this ).append( '' );
}
if ( ! $( this ).find( '.item-info' ).find( '.item-index' ).length ) {
$( this ).find( '.item-info' ).append( '' + ( index + 1 ) + ' / ' + $( carousel ).find( '.item' ).length + '
' );
}
}
);
}
function recalcCarouselWidth( carousel ) {
var stage = $( carousel ).find( '.owl-stage' );
stage.width( Math.ceil( stage.width() ) + 1 );
}
}
function setBlockHeight( carousel ) {
$( carousel ).find( '.item_img' ).each(
function ( index, item ) {
$( item ).height( $( item ).width() / 1.5 );
}
);
}
// Init Owl Carousel
( function () {
// initialize
initCarousel( '.clipCarousel' );
initCarousel( '.demo' );
}() );
/**
* Ініціалізує фотораму, овл-карусель, та кліп-Канвас
* @returns {undefined}
* */
function runClipCanvas() {
var $ptPage = $( '.pt-page-current' )
var owl = $ptPage.find( '.clipCarousel' );
if ( ! owl.length )
return;
if ( owl.hasClass( 'clipRunned' ) )
return;
var number = $ptPage[ 0 ].className.replace( /^\D+/g, '' );
number = number.replace( ' pt-page-current', '' );
var wWidth = window.innerWidth;
if( wWidth > 991 ) {
var itemImg = document.querySelectorAll( '.pt-page-current .clipCarousel .item_img' );
if ( itemImg ) {
var width = itemImg.clientWidth;
var height = itemImg.clientHeight;
var $body = $('body');
if( $body.hasClass('inverse') || $body.hasClass('color_bg') || $body.hasClass('gradient_bg') ) {
initDaysLeft(
itemImg, {
width : width / 2,
height : height / 2,
duration : 1000,
time : 0,
numberColor: 'rgba(0,0,0,1)',
numberFont : '30px Abel',
textColor : 'rgba(0,0,0,0.2)',
textFont : ' ',
data : "",
text : ' ',
lineColor : 'rgba(0, 0, 0, 0.5)'
}
);
}
else {
initDaysLeft(
itemImg, {
width : width / 2,
height : height / 2,
duration : 1000,
time : 0,
numberColor: 'rgba(255,255,255,1)',
numberFont : '30px Abel',
textColor : 'rgba(255,255,255,0.2)',
textFont : ' ',
data : "",
text : ' ',
lineColor : 'rgba(255, 255, 255, 0.5)'
}
);
}
}
}
owl.each(
function ( index, carousel ) {
$( carousel ).addClass( 'clipRunned' );
initFotorama( carousel, index );
//initCarousel ( carousel );
var fit = $( carousel ).hasClass( 'cover' ) ? 'cover' : 'contain';
// change initClipCanvas setting
initClipCanvas(
$( carousel ), number + index, {
duration : 300, // change if you want
durationFull: 500, // change if you want
fit : fit // if has class cover, fit = cover else fit = contain
// if you want that all carousel open the same, you catn change fit on the string
// "cover" or "contain"
}
);
}
);
}
// Timer **********************************************************************/
//class
function DaysLeft() {
this.points = [
[ 0, 0 ],
[ 0, 0 ],
[ 0, 0 ],
[ 0, 0 ]
];
this.element = null;
this.width = 146;
this.height = 122;
this.duration = 300;
this.time = true;
this.autoplay = true;
this.numberColor = 'yellow';
this.numberFont = '30px Abel';
this.text = 'Days Left';
this.textColor = 'white';
this.textFont = '30px Abel';
this.data = "";
this.path = 1;
this.lineColor = 'rgba(255,255,255,0.5)';
//*****************************/
this.x1Rand;
this.x1Width;
this.y1Rand;
this.y1Width;
this.x2Rand;
this.x2Width;
this.y2Rand;
this.y2Width;
this.x3Rand;
this.x3Width;
this.y3Rand;
this.y3Width;
this.x4Rand;
this.x4Width;
this.y4Rand;
this.y4Width;
//**************************/
this.x1;
this.circleX1;
this.circleX1Width;
this.elipseX1;
this.elipseX1Width;
this.y1;
this.circleY1;
this.circleY1Width;
this.elipseY1;
this.elipseY1Width;
/*************************/
this.devPix;
}
DaysLeft.prototype = {
constructor: DaysLeft,
createElement: function ( block, options ) {
var self = this;
if ( options ) {
self.devPix = window.devicePixelRatio || window.screen.deviceXDPI / window.screen.logicalXDPI;
self.devPix = (self.devPix).toFixed(1);
self._setWidth( options.width );
self._setHeight( options.height );
self._setDuration( options.duration );
self._setTime( options.time );
self._setAutoplay( options.autoplay );
self._setTextColor( options.textColor );
self._setTextFont( options.textFont );
self._setNumberColor( options.numberColor );
self._setNumberFont( options.numberFont );
self._setData( options.data );
self._setText( options.text );
self.lineColor = options.lineColor ? options.lineColor : self.lineColor;
}
self._setPoint( 0, 0, self._getWidth() / 2 );
self._setPoint( 0, 1, 0 );
self._setPoint( 1, 0, self._getWidth() );
self._setPoint( 1, 1, self._getHeight() / 2 );
self._setPoint( 2, 0, self._getWidth() / 2 );
self._setPoint( 2, 1, self._getHeight() );
self._setPoint( 3, 0, 0 );
self._setPoint( 3, 1, self._getHeight() / 2 );
if ( ! $( block ).find( '.timer' ).length )
$( block ).prepend( '' );
var canvas = $( block ).find( '.timer' )[0];
self._setElement( canvas );
},
drawElement: function () {
var self = this;
var canvas = self._getElement();
if ( canvas.getContext ) {
var timer = canvas.getContext( '2d' );
canvas.width *= self.devPix;
canvas.height *= self.devPix;
canvas.style.width = this.width + "px";
canvas.style.height = this.height + "px";
timer.scale(self.devPix, self.devPix);
self._animate( {
duration: self._getDuration(),
timing: function ( timeFraction ) {
return timeFraction*timeFraction*timeFraction*timeFraction*timeFraction*timeFraction;
},
draw: function ( progress ) {
//===================================================================================
if ( self._getPoint( 0, 0 ) < self.x1Rand ) {
self._setPoint( 0, 0, (self.x1Rand - self.x1Width) + (self.x1Width * progress) );
if ( self._getPoint( 0, 0 ) >= self.x1Rand ) {
self._setPoint( 0, 0, self.x1Rand);
}
}
if ( self._getPoint( 0, 0 ) > self.x1Rand ) {
self._setPoint( 0, 0, (self.x1Rand + self.x1Width) - (self.x1Width * progress) );
if ( self._getPoint( 0, 0 ) <= self.x1Rand ) {
self._setPoint( 0, 0, self.x1Rand);
}
}
if ( self._getPoint( 0, 1 ) > self.y1Rand ) {
self._setPoint( 0, 1, (self.y1Rand + self.y1Width) - (self.y1Width * progress) );
if ( self._getPoint( 0, 1 ) <= self.y1Rand ) {
self._setPoint( 0, 1, self.y1Rand);
}
}
if ( self._getPoint( 0, 1 ) < self.y1Rand ) {
self._setPoint( 0, 1, (self.y1Rand - self.y1Width) + (self.y1Width * progress) );
if ( self._getPoint( 0, 1 ) >= self.y1Rand ) {
self._setPoint( 0, 1, self.y1Rand);
}
}
//===================================================================================
if ( self._getPoint( 1, 0 ) < self.x2Rand ) {
self._setPoint( 1, 0, (self.x2Rand - self.x2Width) + (self.x2Width * progress) );
if ( self._getPoint( 1, 0 ) >= self.x2Rand ) {
self._setPoint( 1, 0, self.x2Rand);
}
}
if ( self._getPoint( 1, 0 ) > self.x2Rand ) {
self._setPoint( 1, 0, (self.x2Rand + self.x2Width) - (self.x2Width * progress) );
if ( self._getPoint( 1, 0 ) <= self.x2Rand ) {
self._setPoint( 1, 0, self.x2Rand);
}
}
if ( self._getPoint( 1, 1 ) < self.y2Rand ) {
self._setPoint( 1, 1, (self.y2Rand - self.y2Width) + (self.y2Width * progress) );
if ( self._getPoint( 1, 1 ) >= self.y2Rand )
self._setPoint( 1, 1, self.y2Rand );
}
if ( self._getPoint( 1, 1 ) > self.y2Rand ) {
self._setPoint( 1, 1, (self.y2Rand + self.y2Width) - (self.y2Width * progress) );
if ( self._getPoint( 1, 1 ) <= self.y2Rand )
self._setPoint( 1, 1, self.y2Rand);
}
//===================================================================================
if ( self._getPoint( 2, 0 ) < self.x3Rand ) {
self._setPoint( 2, 0, (self.x3Rand - self.x3Width) + (self.x3Width * progress) );
if ( self._getPoint( 2, 0 ) >= self.x3Rand )
self._setPoint( 2, 0, self.x3Rand);
}
if ( self._getPoint( 2, 0 ) > self.x3Rand ) {
self._setPoint( 2, 0, (self.x3Rand + self.x3Width) - (self.x3Width * progress) );
if ( self._getPoint( 2, 0 ) <= self.x3Rand ) {
self._setPoint( 2, 0, self.x3Rand);
}
}
if ( self._getPoint( 2, 1 ) < self.y3Rand ) {
self._setPoint( 2, 1, (self.y3Rand - self.y3Width) + (self.y3Width * progress) );
if ( self._getPoint( 2, 1 ) >= self.y3Rand ) {
self._setPoint( 2, 1, self.y3Rand);
}
}
if ( self._getPoint( 2, 1 ) > self.y3Rand ) {
self._setPoint( 2, 1, (self.y3Rand + self.y3Width) - (self.y3Width * progress) );
if ( self._getPoint( 2, 1 ) <= self.y3Rand ) {
self._setPoint( 2, 1, self.y3Rand);
}
}
//===================================================================================
if ( self._getPoint( 3, 0 ) > self.x4Rand ) {
self._setPoint( 3, 0, (self.x4Rand + self.x4Width) - (self.x4Width * progress) );
if ( self._getPoint( 3, 0 ) <= self.x4Rand ) {
self._setPoint( 3, 0, self.x4Rand);
}
}
if ( self._getPoint( 3, 0 ) < self.x4Rand ) {
self._setPoint( 3, 0, (self.x4Rand - self.x4Width) + (self.x4Width * progress) );
if ( self._getPoint( 3, 0 ) >= self.x4Rand ) {
self._setPoint( 3, 0, self.x4Rand);
}
}
if ( self._getPoint( 3, 1 ) < self.y4Rand ) {
self._setPoint( 3, 1, (self.y4Rand - self.y4Width) + (self.y4Width * progress) );
if ( self._getPoint( 3, 1 ) >= self.y4Rand )
self._setPoint( 3, 1, self.y4Rand);
}
if ( self._getPoint( 3, 1 ) > self.y4Rand ) {
self._setPoint( 3, 1, (self.y4Rand + self.y4Width) - (self.y4Width * progress) );
if ( self._getPoint( 3, 1 ) <= self.y4Rand ) {
self._setPoint( 3, 1, self.y4Rand);
}
}
timer.clearRect( 0, 0, canvas.width, canvas.height );
timer.save();
timer.beginPath();
timer.moveTo( self._getPoint( 0, 0 ), self._getPoint( 0, 1 ) );
timer.lineTo( self._getPoint( 1, 0 ), self._getPoint( 1, 1 ) );
timer.lineTo( self._getPoint( 2, 0 ), self._getPoint( 2, 1 ) );
timer.lineTo( self._getPoint( 3, 0 ), self._getPoint( 3, 1 ) );
timer.lineTo( self._getPoint( 0, 0 ), self._getPoint( 0, 1 ) );
timer.strokeStyle = self.lineColor;
timer.lineWidth = 1;
timer.stroke();
if ( self._getData() ) {
var now = new Date();
var destination_day = self._getData() + ' ' + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
var deadLineDate = new Date( destination_day );
var daysLeft = deadLineDate > now ?
Math.ceil( (deadLineDate - now) / (1000 * 60 * 60 * 24) ) :
0;
timer.font = self._getNumberFont();
timer.fillStyle = self._getNumberColor();
timer.renderText( daysLeft.toString(), self._getWidth() / 2 - timer.measureText( daysLeft ).width / 2 - 5,
self._getHeight() / 2, 5 );
}
timer.font = self._getTextFont();
timer.fillStyle = self._getTextColor();
timer.renderText( self._getText(), self._getWidth() / 2 - timer.measureText( self._getText() ).width / 2 - 15, 95, 4 );
timer.closePath();
timer.restore();
}
} );
}
},
drawElInElips: function () {
var self = this;
var canvas = self._getElement();
if ( canvas.getContext ) {
var timer = canvas.getContext( '2d' );
timer.moveTo( canvas.width, canvas.height / 2 );
self._animate( {
duration: self._getDuration(),
timing: function ( timeFraction ) {
return timeFraction;
},
draw: function ( progress ) {
progress = progress * 100;
timer.clearRect( 0, 0, canvas.width, canvas.height );
timer.save();
/* ELIPSE */
timer.beginPath();
//
var rX = canvas.width / 2;
var rY = canvas.height / 2;
//
var x = rX + rX * Math.cos( 2 * Math.PI * progress / 100 );
var y = rY + rY * Math.sin( 2 * Math.PI * progress / 100 );
timer.moveTo( canvas.width, canvas.height / 2 );
timer.lineTo( x, y );
timer.strokeStyle = 'rgba(255, 255, 255, 1)';
timer.stroke();
timer.closePath();
//
/* CIRCLE */
timer.beginPath();
if ( rY > rX )
rY = rX;
rY /= 2;
timer.arc( canvas.width / 2, canvas.height / 2, rY, 0, Math.PI * 2 * progress / 100 );
timer.strokeStyle = 'rgba(255, 255, 255, 1)';
timer.stroke();
timer.closePath();
/* RECTANGLE */
timer.beginPath();
timer.moveTo( self._getPoint( 0, 0 ), self._getPoint( 0, 1 ) );
timer.lineTo( self._getPoint( 1, 0 ), self._getPoint( 1, 1 ) );
timer.lineTo( self._getPoint( 2, 0 ), self._getPoint( 2, 1 ) );
timer.lineTo( self._getPoint( 3, 0 ), self._getPoint( 3, 1 ) );
timer.lineTo( self._getPoint( 0, 0 ), self._getPoint( 0, 1 ) );
timer.strokeStyle = 'green';
timer.stroke();
timer.closePath();
timer.restore();
if ( self._getPoint( 0, 0 ) >= self.elipseX1 )
self._setPoint( 0, 0, (self.elipseX1 + self.elipseX1Width) - (self.elipseX1Width * progress) / 100 );
if ( self._getPoint( 0, 0 ) < self.elipseX1 )
self._setPoint( 0, 0, (self.elipseX1 - self.elipseX1Width) + (self.elipseX1Width * progress) / 100 );
if ( self._getPoint( 0, 1 ) >= self.elipseY1 )
self._setPoint( 0, 1, (self.elipseY1 + self.elipseY1Width) - (self.elipseY1Width * progress) / 100 );
if ( self._getPoint( 0, 1 ) < self.elipseY1 )
self._setPoint( 0, 1, (self.elipseY1 - self.elipseY1Width) + (self.elipseY1Width * progress) / 100 );
if ( self._getPoint( 1, 0 ) >= self.elipseX2 )
self._setPoint( 1, 0, (self.elipseX2 + self.elipseX2Width) - (self.elipseX2Width * progress) / 100 );
if ( self._getPoint( 1, 0 ) < self.elipseX2 )
self._setPoint( 1, 0, (self.elipseX2 - self.elipseX2Width) + (self.elipseX2Width * progress) / 100 );
if ( self._getPoint( 1, 1 ) >= self.elipseY2 )
self._setPoint( 1, 1, (self.elipseY2 + self.elipseY2Width) - (self.elipseY2Width * progress) / 100 );
if ( self._getPoint( 1, 1 ) < self.elipseY2 )
self._setPoint( 1, 1, (self.elipseY2 - self.elipseY2Width) + (self.elipseY2Width * progress) / 100 );
if ( self._getPoint( 2, 0 ) >= self.elipseX3 )
self._setPoint( 2, 0, (self.elipseX3 + self.elipseX3Width) - (self.elipseX3Width * progress) / 100 );
if ( self._getPoint( 2, 0 ) < self.elipseX3 )
self._setPoint( 2, 0, (self.elipseX3 - self.elipseX3Width) + (self.elipseX3Width * progress) / 100 );
if ( self._getPoint( 2, 1 ) >= self.elipseY3 )
self._setPoint( 2, 1, (self.elipseY3 + self.elipseY3Width) - (self.elipseY3Width * progress) / 100 );
if ( self._getPoint( 2, 1 ) < self.elipseY3 )
self._setPoint( 2, 1, (self.elipseY3 - self.elipseY3Width) + (self.elipseY3Width * progress) / 100 );
if ( self._getPoint( 3, 0 ) >= self.elipseX4 )
self._setPoint( 3, 0, (self.elipseX4 + self.elipseX4Width) - (self.elipseX4Width * progress) / 100 );
if ( self._getPoint( 3, 0 ) < self.elipseX4 )
self._setPoint( 3, 0, (self.elipseX4 - self.elipseX4Width) + (self.elipseX4Width * progress) / 100 );
if ( self._getPoint( 3, 1 ) >= self.elipseY4 )
self._setPoint( 3, 1, (self.elipseY4 + self.elipseY4Width) - (self.elipseY4Width * progress) / 100 );
if ( self._getPoint( 3, 1 ) < self.elipseY4 )
self._setPoint( 3, 1, (self.elipseY4 - self.elipseY4Width) + (self.elipseY4Width * progress) / 100 );
}
} );
}
},
_animate: function ( options ) {
var self = this;
self._setPath();
var canvas = self._getElement();
var start = new Date().getTime();
window.requestAnimationFrame( function animate( time ) {
// timeFraction от 0 до 1
var now = new Date().getTime();
var timeFraction = (now - start) / options.duration;
if ( timeFraction >= 1 ) {
setTimeout( function () {
if ( canvas.getContext ) {
var timer = canvas.getContext( '2d' );
self._setPath();
start = new Date().getTime();
window.requestAnimationFrame( animate );
}
}, self._getTime() );
}
// текущее состояние анимации
var progress = options.timing( timeFraction );
options.draw( progress );
if ( timeFraction < 1 )
window.requestAnimationFrame( animate );
} );
},
_setPath: function () {
var self = this;
self._setRandom();
if ( self._getPoint( 0, 0 ) < 0 || self._getPoint( 0, 0 ) > self._getWidth() )
self._setPoint( 0, 0, 5 );
if ( self._getPoint( 0, 1 ) < 0 || self._getPoint( 0, 1 ) > self._getHeight() )
self._setPoint( 0, 1, 5 );
if ( self._getPoint( 1, 0 ) < 0 || self._getPoint( 1, 0 ) > self._getWidth() )
self._setPoint( 1, 0, self._getWidth() );
if ( self._getPoint( 1, 1 ) < 0 || self._getPoint( 1, 1 ) > self._getHeight() )
self._setPoint( 1, 1, 5 );
if ( self._getPoint( 2, 0 ) < 0 || self._getPoint( 2, 0 ) > self._getWidth() )
self._setPoint( 2, 0, self._getWidth() );
if ( self._getPoint( 2, 1 ) < 0 || self._getPoint( 2, 1 ) > self._getHeight() )
self._setPoint( 2, 1, self._getHeight() );
if ( self._getPoint( 3, 0 ) < 0 || self._getPoint( 3, 0 ) > self._getWidth() )
self._setPoint( 3, 0, 5 );
if ( self._getPoint( 3, 1 ) < 0 || self._getPoint( 3, 1 ) > self._getHeight() )
self._setPoint( 3, 1, self._getHeight() );
var n = 4;
if ( self._getRandom() ) {
self.x1Rand = getRandomInt( self._getWidth() / n, self._getWidth() - self._getWidth() / n );
self.x1Width = Math.abs( self._getPoint( 0, 0 ) - self.x1Rand );
self.y1Rand = 5;
self.y1Width = Math.abs( self._getPoint( 0, 1 ) - self.y1Rand );
self.x2Rand = self._getWidth() - 5;
self.x2Width = Math.abs( self._getPoint( 1, 0 ) - self.x2Rand );
self.y2Rand = getRandomInt( self._getHeight() / n, self._getHeight() - self._getHeight() / n );
self.y2Width = Math.abs( self._getPoint( 1, 1 ) - self.y2Rand );
self.x3Rand = getRandomInt( self._getWidth() / n, self._getWidth() - self._getWidth() / n );
self.x3Width = Math.abs( self._getPoint( 2, 0 ) - self.x3Rand );
self.y3Rand = self._getHeight() - 5;
self.y3Width = Math.abs( self._getPoint( 2, 1 ) - self.y3Rand );
self.x4Rand = 5;
self.x4Width = Math.abs( self._getPoint( 3, 0 ) - self.x4Rand );
self.y4Rand = getRandomInt( self._getHeight() / n, self._getHeight() - self._getHeight() / n );
self.y4Width = Math.abs( self._getPoint( 3, 1 ) - self.y4Rand );
}
if ( ! self._getRandom() ) {
self.x1Rand = 5;
self.x1Width = Math.abs( self._getPoint( 0, 0 ) - self.x1Rand );
self.y1Rand = getRandomInt( self._getHeight() / n, self._getHeight() - self._getHeight() / n );
self.y1Width = Math.abs( self._getPoint( 0, 1 ) - self.y1Rand );
self.x2Rand = getRandomInt( self._getWidth() / n, self._getWidth() - self._getWidth() / n );
self.x2Width = Math.abs( self._getPoint( 1, 0 ) - self.x2Rand );
self.y2Rand = 5;
self.y2Width = Math.abs( self._getPoint( 1, 1 ) - self.y2Rand );
self.x3Rand = self._getWidth() - 5;
self.x3Width = Math.abs( self._getPoint( 2, 0 ) - self.x3Rand );
self.y3Rand = getRandomInt( self._getHeight() / n, self._getHeight() - self._getHeight() / n );
self.y3Width = Math.abs( self._getPoint( 2, 1 ) - self.y3Rand );
self.x4Rand = getRandomInt( self._getWidth() / n, self._getWidth() - self._getWidth() / n );
self.x4Width = Math.abs( self._getPoint( 3, 0 ) - self.x4Rand );
self.y4Rand = self._getHeight() - 5;
self.y4Width = Math.abs( self._getPoint( 3, 1 ) - self.y4Rand );
}
},
_setPathElipse: function () {
var self = this;
var elipseAngle = getRandomArbitrary( 3 * Math.PI / 2, Math.PI * 2 );
self.elipseX1 = self._getWidth() / 2 + self._getWidth() / 2 * Math.cos( elipseAngle );
self.elipseX1Width = Math.abs( self._getPoint( 0, 0 ) - self.elipseX1 );
self.elipseY1 = self._getHeight() / 2 + self._getHeight() / 2 * Math.sin( elipseAngle );
self.elipseY1Width = Math.abs( self._getPoint( 0, 1 ) - self.elipseY1 );
elipseAngle = getRandomArbitrary( Math.PI / 2, 0 );
self.elipseX2 = self._getWidth() / 2 + self._getWidth() / 2 * Math.cos( elipseAngle );
self.elipseX2Width = Math.abs( self._getPoint( 1, 0 ) - self.elipseX2 );
self.elipseY2 = self._getHeight() / 2 + self._getHeight() / 2 * Math.sin( elipseAngle );
self.elipseY2Width = Math.abs( self._getPoint( 1, 1 ) - self.elipseY2 );
elipseAngle = getRandomArbitrary( Math.PI / 2, Math.PI );
self.elipseX3 = self._getWidth() / 2 + self._getWidth() / 2 * Math.cos( elipseAngle );
self.elipseX3Width = Math.abs( self._getPoint( 2, 0 ) - self.elipseX3 );
self.elipseY3 = self._getHeight() / 2 + self._getHeight() / 2 * Math.sin( elipseAngle );
self.elipseY3Width = Math.abs( self._getPoint( 2, 1 ) - self.elipseY3 );
elipseAngle = getRandomArbitrary( 3 * Math.PI / 2, Math.PI );
self.elipseX4 = self._getWidth() / 2 + self._getWidth() / 2 * Math.cos( elipseAngle );
self.elipseX4Width = Math.abs( self._getPoint( 3, 0 ) - self.elipseX4 );
self.elipseY4 = self._getHeight() / 2 + self._getHeight() / 2 * Math.sin( elipseAngle );
self.elipseY4Width = Math.abs( self._getPoint( 3, 1 ) - self.elipseY4 );
},
_setWidth: function ( width ) {
if ( width )
this.width = width;
},
_getWidth: function () {
return this.width;
},
_setHeight: function ( height ) {
if ( height )
this.height = height;
},
_getHeight: function () {
return this.height;
},
_setDuration: function ( duration ) {
if ( duration )
this.duration = duration;
},
_getDuration: function () {
return this.duration;
},
_setTime: function ( time ) {
if ( time )
this.time = time;
},
_getTime: function () {
return this.time;
},
_setAutoplay: function ( autoplay ) {
this.autoplay = autoplay;
},
_getAutoplay: function () {
return this.autoplay;
},
_setPoint: function ( row, collum, value ) {
this.points[row][collum] = value;
},
_getPoint: function ( row, collum ) {
return this.points[row][collum];
},
_setElement: function ( element ) {
this.element = element;
},
_getElement: function () {
return this.element;
},
_setRandom: function () {
this.path = getRandomInt( 0, 2 );
},
_getRandom: function () {
return this.path;
},
_setTextColor: function ( color ) {
if ( color )
this.textColor = color;
},
_getTextColor: function () {
return this.textColor;
},
_setText: function ( text ) {
if ( text )
this.text = text;
},
_getText: function () {
return this.text;
},
_setTextFont: function ( size ) {
if ( size )
this.fontSize = size;
},
_getTextFont: function () {
return this.fontSize;
},
_setNumberColor: function ( color ) {
if ( color )
this.numberColor = color;
},
_getNumberColor: function () {
return this.numberColor;
},
_setNumberFont: function ( size ) {
if ( size )
this.numberFont = size;
},
_getNumberFont: function () {
return this.numberFont;
},
_setData: function ( data ) {
if ( data )
this.data = data;
},
_getData: function () {
return this.data;
}
};
function initDaysLeft( block, options ) {
var timer = [ ];
$( block ).each( function ( index, item ) {
timer[index] = new DaysLeft();
timer[index].createElement( this, options );
timer[index].drawElement();
} );
}
// Init days left
(function(){
// initialize
//try {
var dayBlocks = document.querySelectorAll('.show-timer');
if( dayBlocks ) {
// change initDaysLeft settings
if ( $('body' ).hasClass('inverse') || $('body' ).hasClass('color_bg') || $('body' ).hasClass('gradient_bg') ) {
initDaysLeft(
dayBlocks, {
width : 146, // width element
height : 122, // height element
duration : 2000, // duration animation
time : 500, // duration delay
numberColor: 'rgba(0,0,0,1)', // color of Number
numberFont : '30px Abel', // font
textColor : 'rgba(0,0,0,0.5)',
textFont : '18px Abel',
data : "August 04, 2016", // YOUR DATA
text : 'DAYS LEFT', // text
lineColor : 'rgba(0,0,0,0.5)'
}
);
}
else {
initDaysLeft(
dayBlocks, {
width : 146, // width element
height : 122, // height element
duration : 2000, // duration animation
time : 500, // duration delay
numberColor: 'rgba(255,255,255,1)', // color of Number
numberFont : '30px Abel', // font
textColor : 'rgba(255,255,255,0.5)',
textFont : '18px Abel',
data : "August 04, 2016", // YOUR DATA
text : 'DAYS LEFT', // text
lineColor : 'rgba(255,255,255,0.5)'
}
);
}
}
var blockquotes = document.querySelectorAll('blockquote');
if( blockquotes ) {
if ( $('body' ).hasClass('inverse') || $('body' ).hasClass('color_bg') || $('body' ).hasClass('gradient_bg') ) {
initDaysLeft(
blockquotes, {
width: 50,
height: 50,
duration: 2000,
time: 1000,
numberColor: 'rgba(255,255,255,1)',
numberFont: '30px Abel',
textColor: 'rgba(255,255,255,0.2)',
textFont: ' ',
data: "",
text: ' ',
lineColor : 'rgba(0,0,0,0.5)'
}
);
} else {
initDaysLeft(
blockquotes, {
width: 50,
height: 50,
duration: 2000,
time: 1000,
numberColor: 'rgba(255,255,255,1)',
numberFont: '30px Abel',
textColor: 'rgba(255,255,255,0.2)',
textFont: ' ',
data: "",
text: ' ',
lineColor : 'rgba(255,255,255,0.5)'
}
);
}
}
var preload = document.querySelector('.pre-timer');
if( preload ) {
initDaysLeft(
preload, {
width : 150,
height : 150,
duration : 0,
time : 0,
numberColor: 'rgba(255,255,255,1)',
numberFont : '30px Abel',
textColor : 'rgba(255,255,255,0.2)',
textFont : ' ',
data : "",
text : ' '
}
);
}
//} catch ( e ) {
// throw 'Problem with initialize Timer ' + e;
//} finally {
// return;
//}
}());
// CHANGE CATEGORY
( function () {
var changeCategory = function () {
$( '.category-group' ).parent().find( '.info' ).height( '' );
$( '.category-group' ).find( 'li a' ).off( 'click' ).on('click',
function ( e ) {
e.preventDefault();
$( '#pt-main' ).css(
{
overflow: 'hidden'
}
);
if ( $( this ).hasClass( 'open-map' ) ) {
var self = this;
var position = $( this ).offset();
var width = $( this ).outerWidth();
var height = $( this ).outerHeight( true );
$( '.map' ).width( width );
$( '.map' ).height( height );
$( '.map' ).offset(
{
top : position.top,
left: position.left
}
);
$( '.map' ).addClass( 'open' );
$( '#map-canvas' ).css(
{
top : - position.top + 'px',
left: - position.left + 'px'
}
);
$( '#map-canvas' ).animate(
{
top : 0,
left: 0
}, 500
);
$( '.map' ).animate(
{
left : 0,
top : 0,
width : '100%',
height: '100%'
}, 500
);
$( '.map' ).find( '.bottom .close-this' ).off( 'click' ).on(
'click', function ( e ) {
e.preventDefault();
position = $( self ).offset();
$( this ).parent().parent().find( '#map-canvas' ).animate(
{
top : - position.top + 'px',
left: - position.left + 'px'
}, 500
);
$( this ).parent().parent().animate(
{
left : position.left,
top : position.top,
width : width,
height: height
}, 500, function () {
$( this ).removeClass( 'open' );
}
);
}
);
}
else {
var height = $( this ).parent().parent().parent().find( '.info.open' ).outerHeight( true );
$( this ).parent().parent().parent().find( '.info' ).height( '' );
$( this ).parent().parent().find( 'li' ).removeClass( 'active' );
$( this ).parent().addClass( 'active' );
var current = $( this ).parent().index();
var info = $( this ).parent().parent().parent().find( '.info' );
$( info ).removeClass( 'open' );
$( info ).eq( current ).addClass( 'open' );
var tmpHeight = $( info ).eq( current ).outerHeight( true );
$( info ).eq( current ).height( height );
$( info ).eq( current ).animate(
{
height: tmpHeight
}, 300, 'linear', function () {
}
);
}
setTimeout(function(){
$( '#pt-main' ).css(
{
overflow: ''
}
);
RunScrollStyler({
element: '#pt-main',
//child: '.pt-page-curret'
} );
},400);
}
);
};
try {
changeCategory();
removeEvent(window, 'resize', resize);
addEvent( window, 'resize', resize );
} catch (e) {
console.log(e);
} finally {
return;
}
function resize(){
changeCategory();
}
}() );
// SHOW SUBSCRIBE FORM
( function () {
$( '.subscribe-btn' ).on(
'click', function ( e ) {
e.stopPropagation();
var self = this;
$( self ).parent().addClass('open');
$( self ).addClass( 'open' );
$( '.subscribe-form' ).addClass( 'open' );
$( '.subscribe-form' ).find('.subsubmit' ).css({
backgroundColor : ''
});
document.forms[ 'subscribe-form' ].style.backgroundColor = '';
//document.forms[ 'subscribe-form' ].style.visibility = 'visible';
document.forms['subscribe-form']['Phone'].focus();
document.forms['subscribe-form']['Phone'].placeholder = '(5xx) xxx-xx-xx';
$( 'body' ).on(
'click', function ( e ) {
if (e.target.parentNode !== document.forms['Phone']) {
$( '.subscribe-form' ).removeClass( 'open' );
$( self ).parent().removeClass( 'open' );
$( self ).removeClass( 'open' );
}
}
);
}
);
}() );
// SHOW SOCIAL ICONS IN MAIN MENU
( function () {
var showSocialIcons = function () {
$( '.navbar_show-icons' ).off('click').on(
'click', function ( e ) {
e.preventDefault();
e.stopPropagation();
$(this ).toggleClass( 'active' );
if ( this.parentNode.getElementsByClassName( 'navbar_icons' ).length ) {
var ul = this.parentNode.getElementsByClassName( 'navbar_icons' )[ 0 ].getElementsByTagName( 'ul' )[ 0 ];
ul.classList.toggle( 'open' );
}
if ( this.parentNode.getElementsByTagName( 'p' ).length ) {
var p = this.parentNode.getElementsByTagName( 'p' )[ 0 ];
p.classList.toggle( 'open' );
}
if ( this.parentNode.getElementsByTagName( 'span' ).length ) {
var p = this.parentNode.getElementsByTagName( 'span' )[ 0 ];
p.classList.toggle( 'open' );
}
if ( $( '.center-menu' ).length ) {
$( '.center-menu' ).toggleClass( 'iconOpen' );
}
}
);
};
$(document ).on('click', function(){
var $navShowIcons = $( '.navbar_show-icons' );
$navShowIcons.removeClass('active');
$navShowIcons.parent().find('.navbar_icons ul' ).removeClass('open');
$navShowIcons.parent().find('p' ).removeClass('open');
$navShowIcons.parent().find('span' ).removeClass('open');
$( '.center-menu' ).removeClass( 'iconOpen' );
});
showSocialIcons();
removeEvent(window, 'resize', resize);
addEvent( window, 'resize', resize );
function resize(){
var $navShowIcons = $( '.navbar_show-icons' );
$navShowIcons.removeClass('active');
$navShowIcons.parent().find('.navbar_icons ul' ).removeClass('open');
$navShowIcons.parent().find('p' ).removeClass('open');
$navShowIcons.parent().find('span' ).removeClass('open');
$( '.center-menu' ).removeClass( 'iconOpen' );
showSocialIcons();
}
}() );
// COLLAPSED MENU
( function () {
function collapsedMenu() {
this.collapsed = false;
this.elementWidth;
this.freeWidth;
}
collapsedMenu.prototype = {
collapsing : function () {
this.elementWidth = $( '.navbar-nav' ).width();
this.freeWidth = $( window ).width() - $( '.navbar_share-icons' ).width() - $( '.navbar-brand' ).width();
this.collapsed = this.elementWidth > this.freeWidth ? true : false;
if ( this.collapsed ) {
this.hideMenu();
}
else {
this.showMenu();
}
},
hideMenu : function () {
$( 'main' ).addClass( 'collapsedMenu' );
$( 'nav' ).addClass( 'collapsed' );
$( '.navbar-toggle' ).css(
{
display: 'block'
}
);
this.showCollapsedMenu();
},
showMenu : function () {
$( 'main' ).removeClass( 'collapsedMenu' );
$( 'nav' ).removeClass( 'collapsed' );
$( '.navbar-toggle' ).css(
{
display: ''
}
);
$( '#navbar' ).removeClass( 'small' );
$( 'nav' ).removeClass( 'open' );
$( 'main' ).removeClass( 'collapsedOpen' );
},
showCollapsedMenu: function () {
$( '.navbar-toggle' ).off( 'click' ).on(
'click', function ( e ) {
e.preventDefault();
e.stopPropagation();
if ( ! $( 'nav' ).hasClass( 'open' ) ) {
$( 'nav' ).addClass( 'open' );
$( 'main' ).addClass( 'collapsedOpen' );
$( 'ul.nav' ).find( 'li' ).find( 'a' ).off( 'click' ).on(
'click', function ( e ) {
$( 'nav' ).removeClass( 'open' );
$( 'main' ).removeClass( 'collapsedOpen' );
}
);
if ( $( 'ul.nav' ).find( 'li' ).height() * $( 'ul.nav' ).find( 'li' ).length > $( window ).height() ) {
$( '#navbar' ).addClass( 'small' );
}
}
else if ( $( 'nav' ).hasClass( 'open' ) ) {
$( '#navbar' ).removeClass( 'small' );
$( 'nav' ).removeClass( 'open' );
$( 'main' ).removeClass( 'collapsedOpen' );
}
}
);
},
init : function () {
var self = this;
self.collapsing();
}
};
var collaps = new collapsedMenu();
collaps.init();
var timer;
removeEvent(window, 'resize', resize);
addEvent( window, 'resize', resize );
function resize(){
collaps.showMenu();
collaps.collapsing();
}
}() );
// FUNCTION GOOGLE MAPS API
( function () {
var initialize_map = function () {
try {
if ( ! $( '.map' ).length )
return;
$( '.map' ).css(
{
top : '',
left : '',
width : '',
height: ''
}
);
// customize google map api
var mapOptions = {
zoom : 10,
center: new google.maps.LatLng(40.712206, 29.791250),
scrollwheel : false,
panControl : false,
zoomControl : false,
scaleControl: true,
disableDefaultUI: true
};
var marker = new google.maps.Marker(
{
position: new google.maps.LatLng(40.712206, 29.791250),
title : "Barış İnşaat",
icon: 'img/map-cursor.png'
}
);
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), mapOptions );
marker.setMap( map );
}
catch ( e ) {
console.log( 'Problem with init google.map ' + e );
} finally {
return;
}
};
initialize_map();
removeEvent(window, 'resize', resize);
addEvent( window, 'resize', resize );
var timer;
function resize(){
clearTimeout( timer );
timer = setTimeout(
function () {
initialize_map();
}, 300
);
}
}() );
// Slider proportional image
function sliderImages() {
var winWidth = $( window ).width();
var winHeight = $( window ).height();
$( '.rslides' ).find( 'img' ).each(
function ( index, item ) {
$( item ).width( '' );
$( item ).height( '' );
$( item ).css( {
top: '',
left: ''
} );
var imgWidth = $( item ).width();
var imgHeight = $( item ).height();
var proportion = imgWidth / imgHeight;
if ( imgWidth < imgHeight ) {
$( item ).width( winWidth );
$( item ).height( winWidth / proportion );
if ( $( item ).height() > winHeight ) {
$( item ).css(
{
top: - ($( item ).height() - winHeight) / 2
}
);
}
}
else {
$( item ).width( winHeight * proportion );
$( item ).height( winHeight );
if( $( item ).width() < winWidth ) {
$( item ).width( winWidth );
$( item ).height( winWidth / proportion );
}
if ( $( item ).width() > winWidth ) {
$( item ).css(
{
left: - ($( item ).width() - winWidth) / 2
}
);
}
if ( $( item ).height() > winHeight ) {
$( item ).css(
{
top: - ($( item ).height() - winHeight) / 2
}
);
}
}
}
);
}
(function(){
sliderImages();
removeEvent(window, 'resize', resize);
addEvent( window, 'resize', resize );
//var timer;
function resize(){
sliderImages();
}
}());
// validate email
function validateEmail(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return re.test(email);
}
/**
* Повертає усі елементи, які подані на вхід навколо своєї осі
* @param array - масив елементів, які потрібно повертати
* @constructor
*/
function RotateSvgElem( array ){
this.elements = Array.prototype.slice.call( array, 0 );
this.stop = null;
this.deg = 0;
this.length = array.length;
this.isAnimate = true;
}
RotateSvgElem.prototype = {
constructor: RotateSvgElem,
rotate : function () {
return;
},
stopRotate : function () {
this.isAnimate = false;
},
startRotate: function () {
this.isAnimate = true;
this.rotate();
}
};
// ajax
function ajax ( method, url, data, callback ) {
if ( !method || !url || !data ) {
console.log ( 'Need all arguments: method:post/get, url, data' );
return;
}
try {
console.log ( method === 'post' );
if ( !method === 'post' || !method === 'get' ) {
console.log ( 'Invalid first argument' );
return;
}
var xhr = new XMLHttpRequest ();
if ( method === 'post' ) {
xhr.open ( "POST.html", url, true );
xhr.setRequestHeader ( 'Content-Type', 'application/x-www-form-urlencoded' );
xhr.send ( data );
} else
if ( method === 'get' ) {
xhr.open ( "GET.html", url + '?' + data, true );
xhr.send ();
}
xhr.onreadystatechange = function () { // (3)
if ( xhr.readyState != 4 )
return;
if ( xhr.status != 200 ) {
alert ( xhr.status + ': ' + xhr.statusText );
} else {
if ( callback )
callback ( xhr.responseText ); else
alert ( xhr.responseText );
}
}
} catch ( e ) {
console.log ( e );
} finally {
return;
}
}
// hide main, nav
function hideAll () {
var main = document.querySelector('#pt-main' ),
nav = document.querySelector('.navbar');
if ( main )
main.className += ' invis';
if ( nav )
nav.className += ' invis';
}
function showAll () {
var main = document.querySelector('#pt-main' ),
nav = document.querySelector('.navbar');
if ( main )
main.className = main.className.replace(' invis','');
if ( nav )
nav.className = nav.className.replace(' invis','');
}
// document is ready
$(document ).ready(function(){
/**
* run scroll styler
*/
RunScrollStyler(
{
element: '#pt-main'
}
);
// send email
if( document.forms[ 'subscribe-form' ] ) {
addEvent(document.forms['subscribe-form']['Phone'], 'click', function (event) {
event = event || window.event;
event.stopPropagation();
});
addEvent(document.forms[ 'subscribe-form' ][ 'subsubmit' ], 'click', function(event){
event = event || window.event;
event.stopPropagation();
});
}
//Notify Me
$('.notify-me').submit(function (e) {
e.preventDefault();
var form = $(this),
message = form.find('.form-message'),
messageSuccess = 'Teşekkürler... Yakın zamanda sizi bilgilendirmek için arayacağız!',
messageInvalid = 'Lütfen geçerli bir telefon numarası girin',
messageSigned = 'This email is already signed',
messageErrore = 'Hata oluştu.';
var self = this;
var value = this.querySelector('.submail').value;
this.querySelector('.submail').focus();
if( value.length <= 0) {
self.style.backgroundColor = 'rgba(245, 0, 87, 0.5)';
self.parentNode.querySelector('.submail').placeholder = 'GEÇERLİ DEĞİL';
return;
}
self.style.backgroundColor = 'rgba(162, 255, 0, 0.5)';
$.ajax({
url: 'http://seysane-extension-methods.bonappio.com/Barisinsaat/SavePhoneNumberFromAtlantisPremium',
type : 'POST',
data : form.serialize(),
success : function(data){
form.find('.btn').prop('disabled', true);
message.removeClass('text-danger').removeClass('text-success').fadeIn();
switch(data) {
case 0:
self['Phone'].placeholder = '(5xx) xxx-xx-xx';
message.html(messageSuccess).addClass('text-success').fadeIn();
setTimeout(function(){
form.trigger('reset');
message.fadeOut().delay(500).queue(function(){
message.html('').dequeue();
self.style.backgroundColor = '';
$('[name="Phone"]').val('');
$('.form-message').append('Bir hata oluştu...');
setTimeout(function () {
$('.form-message').html('');
$('.container').click();
}, 3000)
});
}, 1000);
break;
case 1:
self.style.backgroundColor = 'rgba(162, 255, 0, 0.5)';
setTimeout(function(){
self.style.backgroundColor = '';
$('[name="Phone"]').val('');
$('.form-message').append('Numaranızı aldık, kısa zamanda size ulaşacağız...');
setTimeout(function () {
$('.form-message').html('');
$('.container').click();
},3000)
},1000);
break;
default:
message.html(messageErrore).addClass('text-danger').fadeIn();
self.style.backgroundColor = 'rgba(245, 0, 87, 0.5)';
setTimeout(function(){
self.style.backgroundColor = '';
},1000);
}
form.find('.btn').prop('disabled', false);
}
});
return false;
});
/**
* run ElastiStack
*/
initElastiStack();
/**
* run clip canvas
*/
runClipCanvas();
/**
* style select list
*/
$( "select" )
.selectmenu({
width: '100%'
} ).selectmenu( "menuWidget" )
.addClass( "overflow" );
/**
* Event for select list
*/
var selectIsClick = false;
var select = document.querySelectorAll('.ui-selectmenu-button');
for(var i = 0; i < select.length; i++){
addEvent(
select[ i ], 'click', function ( e ) {
e = e || window.Event;
e.stopPropagation();
selectIsClick = true;
RunScrollStyler(
{
element: '#pt-main'
}
);
addEvent(
document.body, 'click', function () {
if ( selectIsClick ) {
RunScrollStyler(
{
element: '#pt-main'
}
);
selectIsClick = false;
}
}
);
}
);
}
// hide timer, main, nav
hideAll ();
});
//var rotateSvgElem;
/**
* Уся сторінка завантажена
*/
$( window ).load(
function () {
}
);
$(function(){
designChanger();
// show main, nav
sliderImages();
//$('.preloader_logo').fadeOut();
/**
* responsive slider
*/
$( ".rslides" ).responsiveSlides(
{
auto : true, // Boolean: Animate automatically, true or false
speed : 1000, // Integer: Speed of the transition, in milliseconds
timeout : 4000, // Integer: Time between slide transitions, in milliseconds
pager : false, // Boolean: Show pager, true or false
nav : false, // Boolean: Show navigation, true or false
random : false, // Boolean: Randomize the order of the slides, true or false
pause : false, // Boolean: Pause on hover, true or false
pauseControls: true // Boolean: Pause when hovering controls, true or false
}
);
showAll();
});
function designChanger() {
var url = window.location.href;
if (url.indexOf('#') == -1 || url.indexOf('#anasayfa') > 0) {
console.log("anasayfada");
// anasayfada
$('.preload-bg').css('background', 'none');
$('.navbar.navbar-fixed-bottom').css('background', 'rgba(0, 0, 0, 0.8)')
}
else {
console.log("anasayfada değil");
$('.preload-bg').css('background', 'rgba(0, 0, 0, 0.8)');
$('.navbar.navbar-fixed-bottom').css('background', 'none')
}
}