rtmedia_gallery shortcode generator

function.php

/* gallery_shortcode_helper Shortcode */
function rtp_gallery_shortcode_helper_callback() {
    ob_start(); ?>
        <style>
            .rtm_gallery_shortcode {
                clear: both;
                overflow: hidden;
            }
            .rtm_gallery_shortcode > div >  * {
                width: 100%;
            }
            .rtm_gallery_shortcode > div {
                width: 40%;
                float: left;
                margin: 0px 5% 9px;
            }
            .rtm_gallery_shortcode > div >  * {
                height: 29px;
            }
            #rtm_gallery_shortcode_view {
                clear: both;
            }
        </style>
        <div class="rtm_gallery_shortcode">
            <div title="Add tool-tip here">
                <b>Global:</b>
                <select id="rtm_gallery_shortcode_globle" class="rtm_gallery_shortcode_generator">
                    <option value="">select</option>
                    <option value="true">true</option>
                    <option value="false" >false</option>
                </select>
            </div>
            <div title="Add tool-tip here">
                <b>Context:</b>
                <select id="rtm_gallery_shortcode_context"  class="rtm_gallery_shortcode_generator">
                    <option value="">select</option>
                    <option value="post">post</option>
                    <option value="page">page</option>
                    <option value="profile">profile</option>
                    <option value="group">group</option>
                    <option value="topic">topic</option>
                    <option value="reply">reply</option>
                    <option value="NULL">NULL</option>
                    <option value="dashboard">dashboard</option>
                    <option value="comment">comment</option>
                    <option value="comment-media">comment-media</option>
                </select>
            </div>
            <div title="Add tool-tip here">
                <b>Context id:</b>
                <input type="text" id="rtm_gallery_shortcode_context_id" / class="rtm_gallery_shortcode_generator">
            </div>
            <div title="Add tool-tip here">
                <b>Media type:</b>
                <select id="rtm_gallery_shortcode_media_type" class="rtm_gallery_shortcode_generator">
                    <option value="">select</option>
                    <option value="all">all</option>
                    <option value="music">music</option>
                    <option value="video">video</option>
                    <option value="photo">photo</option>
                    <option value="album">album</option>
                </select>
            </div>
            <div title="Add tool-tip here">
                <b>Media author:</b>
                <input type="text" id="rtm_gallery_shortcode_media_author" / class="rtm_gallery_shortcode_generator">
            </div>
            <div title="Add tool-tip here">
                <b>Album id:</b>
                <input type="text" id="rtm_gallery_shortcode_album_id" / class="rtm_gallery_shortcode_generator">
            </div>
            <div title="Add tool-tip here">
                <b>Media ids:</b>
                <input type="text" id="rtm_gallery_shortcode_media_ids" / class="rtm_gallery_shortcode_generator">
            </div>
            <div title="Add tool-tip here">
                <b>Privacy:</b>
                <select id="rtm_gallery_shortcode_privacy" class="rtm_gallery_shortcode_generator">
                    <option value="">select</option>
                    <option value="20">Logged in users</option>
                    <option value="40">Friends</option>
                    <option value="60">Private</option>
                    <option value="0">Public</option>
                </select>
            </div>
            <div title="Add tool-tip here">
                <b>Uploader:</b>
                <select id="rtm_gallery_shortcode_uploader" class="rtm_gallery_shortcode_generator">
                    <option value="">select</option>
                    <option value="before">before</option>
                    <option value="after">after</option>
                    <option value="true">true</option>
                    <option value="false">false</option>
                </select>
            </div>
            <div title="Add tool-tip here">
                <b>Per page:</b>
                <input type="text" id="rtm_gallery_shortcode_per_page" / class="rtm_gallery_shortcode_generator">
            </div>
            <div title="Add tool-tip here">
                <b>Lightbox:</b>
                <select id="rtm_gallery_shortcode_lightbox" class="rtm_gallery_shortcode_generator">
                    <option value="">select</option>
                    <option value="true">true</option>
                    <option value="false">false</option>
                </select>
            </div>
            <div title="Add tool-tip here">
                <b>Media title:</b>
                <select id="rtm_gallery_shortcode_media_title" class="rtm_gallery_shortcode_generator">
                    <option value="">select</option>
                    <option value="true">true</option>
                    <option value="false">false</option>
                </select>
            </div>
        </div>
        <div id="rtm_gallery_shortcode_view"><pre>[rtmedia_gallery]</pre></div>

    <?php
    $output = ob_get_contents();
    ob_end_clean();
    echo $output;
}
add_shortcode( 'rtp_gallery_shortcode_helper' , 'rtp_gallery_shortcode_helper_callback' );

/* Script to generate shortcode */
jQuery( document ).on( 'keyup change', '.rtm_gallery_shortcode_generator', function() {
	var globle			= jQuery( '#rtm_gallery_shortcode_globle' );
	var context			= jQuery( '#rtm_gallery_shortcode_context' );
	var context_id		= jQuery( '#rtm_gallery_shortcode_context_id' );
	var media_type		= jQuery( '#rtm_gallery_shortcode_media_type' );
	var media_author	= jQuery( '#rtm_gallery_shortcode_media_author' );
	var album_id		= jQuery( '#rtm_gallery_shortcode_album_id' );
	var media_ids		= jQuery( '#rtm_gallery_shortcode_media_ids' );
	var privacy			= jQuery( '#rtm_gallery_shortcode_privacy' );
	var uploader		= jQuery( '#rtm_gallery_shortcode_uploader' );
	var per_page		= jQuery( '#rtm_gallery_shortcode_per_page' );
	var lightbox		= jQuery( '#rtm_gallery_shortcode_lightbox' );
	var media_title		= jQuery( '#rtm_gallery_shortcode_media_title' );
	var output			= '';

	if ( 'false' == globle.val() ) {
    	media_author.prop( 'disabled', true );
    	privacy.prop( 'disabled', true );
    	album_id.prop( 'disabled', true );
    } else {
    	media_author.prop( 'disabled', false );
    	privacy.prop( 'disabled', false );
    	album_id.prop( 'disabled', false );
    }

    if ( '' !== media_ids.val() || 'true' == globle.val() ) {
    	context.prop( 'disabled', true );
    	context_id.prop( 'disabled', true );
    } else {
    	context.prop( 'disabled', false );
    	context_id.prop( 'disabled', false );
    }

    if ( '' !== media_ids.val() ) {
    	globle.prop( 'disabled', true );
    } else {
    	globle.prop( 'disabled', false );
    }

    $( '.rtm_gallery_shortcode_generator' ).each( function() {
    	if ( $( this ).prop( 'disabled' ) ) {
    		$( this ).css({
    			opacity: '0.2',
    		});
        } else {
        	$( this ).css({
        		opacity: '1',
        	});
        }
    } );

    /* Shortcode Generator */
    output += '<pre>[rtmedia_gallery';
    if ( ! $( globle ).prop( 'disabled' ) && '' !== globle.val() )
        output += ' globle=' + globle.val();

	if ( ! $( media_author ).prop( 'disabled' ) && '' !== media_author.val() )
	    output += ' media_author=' + media_author.val();

	if ( ! $( privacy ).prop( 'disabled' ) && '' !== privacy.val() )
	    output += ' privacy=' + privacy.val();

	if ( ! $( album_id ).prop( 'disabled' ) && '' !== album_id.val() )
	    output += ' album_id=' + album_id.val();

   	if ( ! $( context ).prop( 'disabled' ) && '' !== context.val() )
    		output += ' context=' + context.val();

	if ( ! $( context_id ).prop( 'disabled' ) && '' !== context_id.val() )
		output += ' context_id=' + context_id.val();

    if ( ! $( media_type ).prop( 'disabled' ) && '' !== media_type.val() )
        output += ' media_type=' + media_type.val();

    if ( ! $( media_ids ).prop( 'disabled' ) && '' !== media_ids.val() )
        output += ' media_ids=' + media_ids.val();

    if ( ! $( uploader ).prop( 'disabled' ) && '' !== uploader.val() )
        output += ' uploader=' + uploader.val();

    if ( ! $( per_page ).prop( 'disabled' ) && '' !== per_page.val() )
        output += ' per_page=' + per_page.val();

    if ( ! $( lightbox ).prop( 'disabled' ) && '' !== lightbox.val() )
        output += ' lightbox=' + lightbox.val();

    if ( ! $( media_title ).prop( 'disabled' ) && '' !== media_title.val() )
        output += ' media_title=' + media_title.val();

    output += ']</pre>';
    jQuery( '#rtm_gallery_shortcode_view' ).html(output);
} );