window.scwShapeDividerPlugin = window.scwShapeDividerPlugin || {};
window.SEMICOLON_shapeDividerInit = function( $shapeDividerEl ){
$shapeDividerEl = $shapeDividerEl.filter(':not(.customjs)');
if( $shapeDividerEl.length < 1 ){
return true;
}
$shapeDividerEl.each( function(){
let element = $(this),
elShape = element.attr('data-shape') || 'valley',
elWidth = element.attr('data-width') || 100,
elHeight = element.attr('data-height') || 100,
elFill = element.attr('data-fill'),
elOut = element.attr('data-outside') || 'false',
elPos = element.attr('data-position') || 'top',
elId = 'shape-divider-' + Math.floor( Math.random() * 10000 ),
shape = '',
width, height, fill,
outside = '';
if( elWidth < 100 ) {
elWidth = 100;
}
width = 'width: calc( '+ Number( elWidth ) +'% + 1.5px );';
height = 'height: '+ Number( elHeight ) +'px;';
fill = 'fill: '+elFill+';';
if( elOut == 'true' ) {
if( elPos == 'bottom' ) {
outside = '#'+ elId +'.shape-divider { bottom: -'+( Number( elHeight ) - 1 ) +'px; } ';
} else {
outside = '#'+ elId +'.shape-divider { top: -'+( Number( elHeight ) - 1 ) +'px; } ';
}
}
let css = outside + '#'+ elId +'.shape-divider svg { '+ width + height +' } #'+ elId +'.shape-divider .shape-divider-fill { '+ fill +' }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
element.attr( 'id', elId );
switch( elShape ){
case 'valley':
shape = '';
break;
case 'valley-2':
shape = '';
break;
case 'valley-3':
shape = '';
break;
case 'mountain':
shape = '';
break;
case 'mountain-2':
shape = '';
break;
case 'mountain-3':
shape = '';
break;
case 'mountain-4':
shape = '';
break;
case 'mountain-5':
shape = '';
break;
case 'mountains':
shape = '';
break;
case 'mountains-2':
shape = '';
break;
case 'mountains-3':
shape = '';
break;
case 'mountains-4':
shape = '';
break;
case 'plataeu':
shape = '';
break;
case 'plataeu-2':
shape = '';
break;
case 'hills':
shape = '';
break;
case 'hills-2':
shape = '';
break;
case 'hills-3':
shape = '';
break;
case 'hills-4':
shape = '';
break;
case 'cloud':
shape = '';
break;
case 'cloud-2':
shape = '';
break;
case 'cloud-3':
shape = '';
break;
case 'wave':
shape = '';
break;
case 'wave-2':
shape = '';
break;
case 'wave-3':
shape = '';
break;
case 'wave-4':
shape = '';
break;
case 'wave-5':
shape = '';
break;
case 'wave-6':
shape = '';
break;
case 'slant':
shape = '';
break;
case 'slant-2':
shape = '';
break;
case 'slant-3':
shape = '';
break;
case 'rounded':
shape = '';
break;
case 'rounded-2':
shape = '';
break;
case 'rounded-3':
shape = '';
break;
case 'rounded-4':
shape = '';
break;
case 'rounded-5':
shape = '';
break;
case 'triangle':
shape = '';
break;
case 'drops':
shape = '';
break;
case 'cliff':
shape = '';
break;
case 'zigzag':
shape = '';
break;
case 'illusion':
shape = '';
break;
default:
shape = '';
break;
}
element.html( shape );
element.find('svg').addClass( 'op-ts' );
setTimeout( function(){
element.find('svg').addClass( 'op-1' );
}, 500);
});
};