Reply To: Use ACF as a custom shortcode generator

• Tazintosh

• February 7, 2017 at 6:58 am

ybdigital, I’m not planning to integrate any modal thingy.
The way it’s actually working is actually fine for my needs.

Here’s the main part of my Javascript code, you guys are free to enhance it and share it back 😉

jQuery(document).ready(function($){
	// Make sure acf is loaded
	if (typeof acf == 'undefined'){return;}

	var
		stylesheet	= '<style type="text/css">\
							.taz_shortcodeOutput {\
								background-color: rgb(226, 236, 251)!important;\
								font-size: 1.4rem!important;\
							}\
						</style>',
		textarea	= '<div class="acf-field acf-field-textarea">\
							<div class="acf-label">\
								<label for="taz_shortcodeOutput">Generated Shortcode</label>\
							</div>\
							<div class="acf-input">\
								<textarea class="taz_shortcodeOutput" rows="8"></textarea>\
							</div>\
						</div>',
		triggers	= '.acf-field[data-type=select] select,\
						.acf-field[data-type=text] input,\
						.acf-field[data-type=textarea] textarea,\
						.acf-field[data-type=wysiwyg] textarea,\
						.acf-field[data-type=number] input,\
						.acf-field[data-type=radio] input,\
						.acf-field[data-type=checkbox] .acf-checkbox-list input,\
						.acf-field[data-type=true_false] .acf-input label input,\
						.acf-field[data-type=color_picker] .acf-color_picker > input\
					';

	function taz_buildShortcode(currentLayoutName, triggersElements){
		var
			output			= '',
			content			= '',
			settingsValue	= {};

		function taz_getSettingsValue(triggersElements){
			triggersElements.each(function(index, elem){
				var
					settingType			= $(elem).parents('.acf-field').data('type'),
					settingLabel		= $(elem).parents('.acf-field').data('name'),
					checkboxesValues	= '',
					isContent			= $(elem).parents('.acf-field').hasClass('taz_isShortcodeContent'); // The "content" is detected by the class "taz_isShortcodeContent"

				if (isContent){
					settingLabel = 'content';
				}

				switch(settingType){
					case 'textarea':
						settingsValue[settingLabel] = (!isContent) ? encodeURIComponent($(elem).val()) : $(elem).val();
						break;
					// Add as many cases you want to handle. Note that depending the type, the way to get values could change.
					default:
						break;
				}
			});
			return settingsValue;
		}

		settingsValue = taz_getSettingsValue(triggersElements);
		$.each(settingsValue, function(key, value){
			if (value !== ''){
				if (key !== 'content'){
					output += ' ' + key + '="' + value + '"';
				} else {
					content = value;
				}
			}
		});
		output = '[taz_' + currentLayoutName + output + ']' + content + '[/taz_' + currentLayoutName + ']'
		$('.taz_shortcodeOutput').html(output);
	}

	/* ================================================== */
	/* ================================================== Everything starts here */
	/* ================================================== */

	acf.add_action('append', function($el){ // The user adds a new flexible content
		var
			currentLayout		= $el,
			currentLayoutName	= currentLayout.data('layout'),
			triggersElements	= null;

		switch(currentLayoutName){
			case 'shortcode_tester': // Name of the flexible content added
				if (!$('.taz_shortcodeOutput').length){ // Only prepend once
					currentLayout.parents('.inside.acf-fields').prepend(textarea);
					currentLayout.parents('.inside.acf-fields').prepend(stylesheet);
				}
				triggersElements = currentLayout.find(triggers);

				triggersElements.on('change keyup', function(){
					taz_buildShortcode(currentLayoutName, triggersElements);
				});
				break;
			default:
				break;
		}

	});
});