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'); }); } }; }();