KOK - MANAGER

Edit File: responsive-switchers.js

jQuery( document ).ready(
	function ( $ ) {
		'use strict';

$.responsiveSwitchers = {
			'init': function () {
				this.manageSwitchers();
				this.manageWPDevices();
			},

'manageSwitchers': function () {
				// Responsive switchers
				jQuery( '.customize-control .responsive-switchers button' ).on(
					'click', function( event ) {
						// Set up variables
						var $self 		= $( this ),
							devices 	= $( '.responsive-switchers' ),
							device 	= $( event.currentTarget ).data( 'device' ),
							control 	= $( '.customize-control .has-media-queries' ),
							body 		= $( '.wp-full-overlay' ),
							footerDevices = $( '.wp-full-overlay-footer .devices' );

// Button class
						devices.find( 'button' ).removeClass( 'active' );
						devices.find( 'button.preview-' + device ).addClass( 'active' );

// Control class
						control.find( '.control-wrap' ).removeClass( 'active' );
						control.find( '.control-wrap.' + device ).addClass( 'active' );

// Wrapper class
						body.removeClass( 'preview-desktop preview-tablet preview-mobile' ).addClass( 'preview-' + device );

// Panel footer buttons
						footerDevices.find( 'button' ).removeClass( 'active' ).attr( 'aria-pressed', 'false' );
						footerDevices.find( 'button.preview-' + device ).addClass( 'active' ).attr( 'aria-pressed', 'true' );

// Open switchers
						if ( $self.hasClass( 'preview-desktop' ) ) {
							devices.toggleClass( 'responsive-switchers-open' );
						}

}
				);
			},

'manageWPDevices': function () {
				// If panel footer buttons clicked
				jQuery( '#customize-footer-actions .devices button' ).on(
					'click', function( event ) {
						event.preventDefault();
						var device  = jQuery( this ).data( 'device' );
						var queries = jQuery( '.responsive-switchers' );
						if( device !== 'desktop' ){
							queries.addClass( 'responsive-switchers-open' );
						} else {
							queries.removeClass( 'responsive-switchers-open' );
						}

queries.find( 'button' ).removeClass( 'active' );
						queries.find( 'button.preview-' + device ).addClass( 'active' );

var control = jQuery( '.range-slider.has-media-queries' );
						control.find( '.desktop-range' ).removeClass( 'active' );
						control.find( '.tablet-range' ).removeClass( 'active' );
						control.find( '.mobile-range' ).removeClass( 'active' );
						control.find( '.' + device + '-range' ).addClass( 'active' );

// Control class
						control.find( '.control-wrap' ).removeClass( 'active' );
						control.find( '.control-wrap.' + device ).addClass( 'active' );
					}
				);
			}
		};
		$.responsiveSwitchers.init();
	}
);