( function( $ ) { $(document).ready(function() { /* *** *** Placaholder realization *** *** */ $( '.searchform' ).each(function() { var lbl = $( this ).find( 'label[for="s"]' ); /* label */ var inp = $( this ).find( 'input[name="s"]' ); /* input */ lbl.text( 'Enter search keyword' ); inp.val() == '' ? lbl.show() : lbl.hide(); inp.focusin(function() { $( this ).parent().children( 'label[for="s"]' ).hide(); /* not prev() - IE not supported it */ }); inp.focusout(function() { if( !$( this ).val().length ) { $( this ).parent().children( 'label[for="s"]' ).show(); } }); lbl.click(function(event) { event = event || window.event; /* not next() - IE not work great with it */ $( this ).parent().children( 'input[name="s"]' ).focus(); /* input[name="s"] */ event.preventDefault(); }); }); /* *** *** Scroll to top *** *** */ $( 'a[href="#wrapper"]' ).on( 'click', function(e) { e.preventDefault(); //html - IE, FF, body - Chrome, Safari $( 'html, body' ).animate({ scrollTop: $( '#wrapper' ).offset().top }, 500); }); /* *** *** Create custom select-menu *** *** */ $( 'select' ).each(function(key, val) { var selectDiv = document.createElement( 'div' ); /* create div element */ selectDiv.className = 'archy-select-block'; $( selectDiv ).mousemove(function() { /* reset selected class from choosed element */ $( this ).find( '.archy-option.selected' ).removeClass( 'selected' ); }); var mainSelect = $( val ); /* get select element */ mainSelect.hide(); /* hide all options */ var fakeSelect = document.createElement( 'div' ); fakeSelect.className = 'archy-select'; fakeSelect.setAttribute( 'name', $( mainSelect ).attr( 'name' ) ); var header = document.createElement( 'h1' ); header.innerHTML = $( mainSelect ).find( 'option:selected' ).text(); header.className = 'archy-index-' + $( mainSelect )[0].selectedIndex; fakeSelect.appendChild( header ); /* add h1 element to select instrument */ var counterOptions = 0; mainSelect.find( '*' ).each(function(k, v) { var elem = document.createElement( 'div' ); if( v.tagName == 'OPTGROUP' ) { elem.className = 'archy-optgroup'; /* create optgroup div */ var h1 = document.createElement( 'h1' ); h1.innerHTML = $( v ).attr( 'label' ); h1.className = 'archy-optgroup-h1'; elem.appendChild( h1 ); } else { elem.className = 'archy-option'; /* create option div */ $( elem ).addClass( 'archy-index-' + counterOptions++ ); elem.innerHTML = $( v ).text(); /* set content of select item */ elem.setAttribute( 'title', elem.innerHTML ); elem.setAttribute( 'value', $( v ).attr( 'value' ) ); elem.onclick = function() { if( !( $( this ).attr( 'class' ).indexOf( $( fakeSelect ).children( 'h1' ).attr( 'class' ) ) > 0 ) ) { /* h1 changes */ $( fakeSelect ).children( 'h1' ).text( $( this ).text() ); $( fakeSelect ).children( 'h1' ).attr( 'value', $( this ).attr( 'value' ) ); $( fakeSelect ).children( 'h1' ).get( 0 ).className = $( this ).attr( 'class' ).match( /archy-index-\d+/, 'g' ); /* get index */ mainSelect.prop( 'selectedIndex', $( this ).attr( 'class' ).split( '-' )[1] ).change(); } var selElementIndex = $( this ).index(); $( this ).parent().parent().prev().find( "option" ).removeAttr( 'selected' ); $( this ).parent().parent().prev().find( "option" ).eq( selElementIndex ).attr( 'selected', 'selected' ).trigger( "change" ); $( selectDiv ).hide(); } } if( $( v ).parent().get( 0 ).tagName == 'SELECT' ) { /* fisrt childs of select */ selectDiv.appendChild( elem ); } else { $( selectDiv ).children().last().append( elem ); } }); var hider = function(event) { event = event || window.event; /* crossbrowser event */ if( ( event.target || event.srcElement ).className != 'archy-optgroup-h1' && /* crossbrowser event.target */ ( event.target || event.srcElement ).className != 'archy-optgroup' && ( event.target || event.srcElement ).className != 'archy-select-block' ) { if( clickCleaner ) { /* hide select div */ $( selectDiv ).fadeOut( 200 ); $( this ).off( 'click', hider ); /* reset all selected elements */ $( selectDiv ).trigger( 'mousemove' ); } clickCleaner = true; event.preventDefault(); } } var clickCleaner; $( fakeSelect ).on( 'mousedown', function() { /* show/hide scripts */ clickCleaner = false; $( selectDiv ).fadeIn( 200 ); $( 'html' ).on( 'click', hider); /* set to choosed item class 'selected' */ $( this ).find( '.archy-select-block .' + $( this ).children( 'h1' ).attr( 'class' ) ).addClass( 'selected' ); }); fakeSelect.appendChild( selectDiv ); $( val ).after( fakeSelect ); $( selectDiv ).hide(); }); /* *** *** Create fancy radio *** *** */ if( $( this ).find( 'input[type="radio"]' ) ) { var fakeContainer = $( '' ), fakeRadio = $( '' ), contRadioItem = $( '
' ); $( this ).each(function(k, v){ $( v ).find( '.radio' ).removeClass( 'radio' ).addClass( 'archy-radio-custom' ); $( v ).find( 'input[type="radio"]' ).wrap( fakeContainer ); var label = $( v ).find( '.archy-fake-radio-container' ).next().detach(); /* remove all labels and save in variable */ $( v ).find( '.archy-fake-radio-container' ).wrap( contRadioItem ); $( v ).find( '.archy-radio-item-container' ).each( function() { /* separate label for each radio */ var cont = this; $( label ).each(function() { if( $( this ).attr( 'for' ) == $( cont ).find( 'input' ).attr( 'id' ) ) { $( cont ).append( $( this ) ); } }); }); $( v ).find( '.archy-fake-radio-container' ).append( fakeRadio ); /* if radio was selected */ $( v ).find( 'input[type=radio]:checked' ).next().addClass( 'selected' ); /* if radio is disabled */ $( v ).find( 'input[type=radio]' ).each( function() { if( $( this ).attr( 'disabled' ) ) { $( this ).next().addClass( 'disabled' ); } }); /* events handlers */ $( v ).find( 'input[type="radio"]' ).on( 'click', function(){ $( v ).find( 'input[name="' + $( this ).attr( 'name' ) + '"]' ).next().removeClass( 'selected' ); $( this ).parent().find( '.archy-fake-radio' ).addClass( 'selected' ); }); $( v ).find( '.archy-fake-radio' ).on( 'click', function(){ if(! $( this ).prev().attr( 'disabled' ) ) { $( this ).prev().trigger( 'click' ); } }); }); } /* *** *** Create fancy checkboxes *** *** */ if( $( this ).find( 'input[type="checkbox"]' ) ) { var fakeContainerCheck = $( '' ), fakeCheckbox = $( '' ), contCheckboxItem = $( '' ); $( this ).each(function(k, v){ $( v ).find( '.checkbox' ).removeClass( 'checkbox' ).addClass( 'archy-checkbox-custom' ); $( v ).find( 'input[type="checkbox"]' ).wrap( fakeContainerCheck ); $( v ).find( '.archy-fake-checkbox-container' ).wrap( contCheckboxItem ); $( v ).find( '.archy-checkbox-item-container' ).each( function() { /* separate label for each checkbox */ var cont = this; $( cont ).next().each(function() { if( $( this ).attr( 'for' ) == $( cont ).find( 'input' ).attr( 'id' ) ) { $( cont ).append( $( this ) ); } }); }); $( v ).find( '.archy-fake-checkbox-container' ).append( fakeCheckbox ); /* if checkbox was selected */ $( v ).find( 'input[type=checkbox]:checked' ).next().addClass( 'selected' ); /* if checkbox is disabled */ $( v ).find( 'input[type=checkbox]' ).each( function() { if( $( this ).attr( 'disabled' ) ) { $( this ).next().addClass( 'disabled' ); } }); /* events handlers */ $( v ).find( 'input[type="checkbox"]' ).on( 'click', function(){ var fCh = $( this ).parent().find( '.archy-fake-checkbox' ); if( fCh.hasClass( 'selected' ) ) { fCh.removeClass( 'selected' ); } else { fCh.addClass( 'selected' ); } }); $( v ).find( '.archy-fake-checkbox' ).on( 'click', function(){ if(! $( this ).prev().attr( 'disabled' ) ) { $( this ).prev().trigger( 'click' ); } }); }); } /* *** *** Create upload file instrument *** *** */ if( $( this ).find( 'input[type="file"]' ) ) { $( this ).find( 'input[type="file"]' ).each(function() { /* create fake archy-upload-file instument */ var th = this; $( th ).hide(); $( th ).after( '