CNVS.ShapeDivider = function() {
var __core = SEMICOLON.Core;
return {
init: function(selector) {
if( __core.getSelector(selector, false, false).length < 1 ){
return true;
}
__core.initFunction({ class: 'has-plugin-shapedivider', event: 'pluginShapeDividerReady' });
selector = __core.getSelector( selector, false );
if( selector.length < 1 ){
return true;
}
selector.forEach( function(element) {
var elShape = element.getAttribute('data-shape') || 'valley',
elWidth = element.getAttribute('data-width') || 100,
elHeight = element.getAttribute('data-height') || 100,
elFill = element.getAttribute('data-fill'),
elOut = element.getAttribute('data-outside') || 'false',
elPos = element.getAttribute('data-position') || 'top',
elId = 'shape-divider-' + Math.floor( Math.random() * 10000 ),
shape = '',
width, height, fill,
outside = '';
if( element.classList.contains('shape-divider-complete') ) {
return true;
}
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; } ';
}
}
var css = outside + '#'+ elId +'.shape-divider svg { '+ width + height +' } #'+ elId +'.shape-divider .shape-divider-fill { '+ fill +' }',
style = document.createElement('style');
__core.getVars.elHead.appendChild(style);
style.appendChild(document.createTextNode(css));
element.setAttribute( '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.innerHTML = shape;
element.querySelector('svg').classList.add( 'op-ts' );
setTimeout( function() {
element.querySelector('svg').classList.add( 'op-1' );
}, 500);
element.classList.add('shape-divider-complete');
});
}
};
}();