File "page-builder.js"

Full Path: /var/www/bvnghean.vn/wp-content/plugins/sneeit-framework/js/page-builder.js
File size: 22.12 KB
MIME-type: text/plain
Charset: utf-8

// https://stackoverflow.com/questions/14199681/jquery-ui-sortable-move-clone-but-keep-original
// https://jsfiddle.net/v265q/
// 
// 
// Gutenberg insert content:
// https://wordpress.org/support/topic/getting-and-modifying-gutenberg-post-content-with-javascript/
//
// Gutenberg get content
// https://wordpress.stackexchange.com/questions/351787/block-editor-how-to-get-title-and-post-content-within-the-wordpress-admin-ui-in
// // https://stackoverflow.com/questions/14199681/jquery-ui-sortable-move-clone-but-keep-original


var sneeit_page_builder_editing = false;
jQuery(function($) {	
	var sneeit_main_content_field = $('#content');
	// not empty = gutenberg enabled
	var sneeit_gutenberg = !$('#wp-content-wrap .wp-editor-tabs').length;
	if (sneeit_gutenberg) {
		$('body').addClass('gutenberg');
	}
		
	function sneeit_page_builder_was_edited(edited = true) {		
		if (sneeit_gutenberg) {
			if (edited) {
				$('#sneeit-page-builder-apply')
					.removeAttr('disabled')
					.addClass('active');
			} else {
				$('#sneeit-page-builder-apply')
					.attr('disabled', 'on')
					.removeClass('active');
				$('.sneeit-page-builder-gutenberg-notify-bar').stop().slideDown(300, function(){
					$(this).stop().fadeOut(2000);
				});
			}
		}
	}
	function sneeit_page_builder_come_in () {
		sneeit_page_builder_editing = true;
		if (sneeit_gutenberg) {
			// show sneeit_page builder when switch to
			
			$('#wpwrap').hide();
			
			$('#wp-content-wrap').show();
			const { select } = wp.data;	
			var content = select("core/editor").getEditedPostAttribute( 'content' );
			$('#sneeit-page-builder-dummy').html(content);
			$('#sneeit-page-builder-dummy').find('p').each(function(){
				var text = $(this).text();
				text = jQuery.trim(text);
				if ('' == text) {
					$(this).remove();
				}
			});
			content = $('#sneeit-page-builder-dummy').html();
			$('#content').val(content);
			
			$('#sneeit-page-builder-apply').removeClass('active').attr('disabled', 'on');
		}
		else {
			
			// update content before scanning
			if (typeof(switchEditors) != 'undefined') {
				switchEditors.go('content', 'html');		
			}
		}
		

		$('#wp-content-wrap')
			.removeClass('html-active')
			.removeClass('tmce-active')
			.addClass('sneeit-page-builder-active');
	
		setTimeout(function () {
			$('#wp-content-wrap').removeClass('html-active');
		}, 100);

		var processor_selector = '#sneeit-page-builder-workspace';
		
		// move content to work space to process
		sneeit_main_content_field = sneeit_page_builder_main_content_field();		
		if (sneeit_main_content_field.length == 0) {
			console.log('NOT FOUND CONTENT TEXTAREA TAG');
			return;
		}
		$(processor_selector).html(
			sneeit_page_builder_shortcode_to_html(
				sneeit_main_content_field.val(), 
				Sneeit_Shortcodes.declaration, 0
			)
		);

		// mark all raw shortcode div with an attribute, we will remove it after wrapped
		$(processor_selector+' div[data-sneeit_shortcode_id]').each(function() {
			$(this).attr('data-sneeit_shortcode_id_pending', $(this).attr('data-sneeit_shortcode_id'));
		});
		
		// apply wrapper for the converted shortcode		
		$.each(Sneeit_Shortcodes.declaration, function (shortcode_id, shortcode_declaration) {
			// allow scanning nested max levels
			for (var i = 0; i < Sneeit_PageBuilder_Options.max_nested_level; i++) {
				if (!$(processor_selector+' div[data-sneeit_shortcode_id_pending="'+shortcode_id+'"]').length) {
					// scanned all shortcode with this id within max levels
					return;
				}
				$(processor_selector+' div[data-sneeit_shortcode_id_pending="'+shortcode_id+'"]').each(function () {
					// mark this was processed
					$(this).removeAttr('data-sneeit_shortcode_id_pending');

					// then process it
					var shortcode_content = this.outerHTML;
					shortcode_content = sneeit_page_builder_workspace_wrapper_html(
						shortcode_id, 
						shortcode_declaration, 
						shortcode_content
					);
					
					// and remove it when done
					$(this).replaceWith(shortcode_content);
				});
			}		
		});

		// add inner sortable handler inside column
		// mark all column element with pending status
		$(processor_selector+' div[data-sneeit_shortcode_id="column"]').attr('data-sneeit_shortcode_id_pending', 'column');

		// scan with max levels for all columns 
		for (var i = 0; i < Sneeit_PageBuilder_Options.max_nested_level; i++) {
			if (!$(processor_selector+' div[data-sneeit_shortcode_id_pending="column"]').length) {
				// processed all
				break;
			}

			// still have? wrap it content for ui-sortable
			$(processor_selector+' div[data-sneeit_shortcode_id_pending="column"]').each(function () {
				// mark this was processed
				$(this).removeAttr('data-sneeit_shortcode_id_pending');

				// then process it
				var shortcode_inner_content = $(this).html();
				$(this).html('<div class="sneeit-page-builder-workspace-box-content-column-linked-sortable sneeit-page-builder-linked-sortable">'+shortcode_inner_content+'</div>');
			});
		}
		

		// apply sortable wrapper for column shortcodes
		sneeit_page_builder_apply_sortable(sneeit_page_builder_was_edited);
	}
	
	function sneeit_page_builder_come_out() {
		$('#wp-content-wrap').removeClass('sneeit-page-builder-active');
		if ($(this).is('#content-tmce')) {
			$('#wp-content-wrap').addClass('tmce-active');
		} else {
			$('#wp-content-wrap').addClass('html-active');
		}
		sneeit_page_builder_editing = false;
		
		if (sneeit_gutenberg) {
			// check if update content
			if (
				$('#sneeit-page-builder-apply.active').length &&
				!confirm(Sneeit_PageBuilder_Options.text.You_made_changes_Are_you_sure_to_exit)
			) {
				return;
			}
			
			// switch ui
			$('#wp-content-wrap.sneeit-page-builder-active')
				.hide()
				.removeClass('sneeit-page-builder-active');
			$('#wpwrap').show();
		}
	}
	
	function sneeit_page_builder() {		
		// interact with the default UI of wordpress post editor toolbar
		if (sneeit_gutenberg) {
			// still not find a way to insert shortcode to gutenberg
			// so we decide to redirect the post to classic editor
			// $('.edit-post-header__settings').prepend					
			$('.edit-post-header__settings').prepend(
				'<button id="content-sneeit-page-builder" '+
				'class="button button-primary button-large switch-sneeit-page-builder"><i class="fa fa-gittip"></i> '+
					Sneeit_PageBuilder_Options.text.Page_builder +
				'</button>'
			);
	
			if (!$('#wp-content-wrap').length) {
				$('<div id="wp-content-wrap"><div id="wp-content-editor-container"></div></div>').appendTo($('body'));
				$('<div id="content" style="display:none"></div>').appendTo($('body'));						
			}
			if (!$('.sneeit-page-builder-gutenberg-notify-bar').length) {
				$('<div class="sneeit-page-builder-gutenberg-notify-bar">'+
					Sneeit_PageBuilder_Options.text.Applied_your_changes +
				'</div>').appendTo($('body'));
			}			
		} else {
			$('#wp-content-wrap .wp-editor-tabs')
			.prepend(
				'<button type="button" id="content-sneeit-page-builder" class="\n\
					wp-switch-editor \n\
					switch-sneeit-page-builder \n\
					components-button editor-post-save-draft is-tertiary\n\
				">'+
					Sneeit_PageBuilder_Options.text.Page_builder+
				'</button>'
			);
		}
		
		

		// page builder come in
		// ####################
		// when start, if has shortcode list, just enter mode
	//	var sneeit_content_has_shortcode = false;
	//	var start_content = $('#content').val();	
	//	$.each(Sneeit_Shortcodes.declaration, function (shortcode_id, shortcode_declaration) {
	//		if (sneeit_content_has_shortcode || !start_content) {
	//			return;
	//		}
	//		if (start_content.indexOf(shortcode_id) != -1) {
	//			sneeit_content_has_shortcode = true;
	//			sneeit_page_builder_come_in();
	//		}
	//	});

		// init start ui for sneeit page builder box
		var workspace_content = '';
		var toolbar_content = '<div id="sneeit-page-builder-toolbar-tab"><ul>'
		+sneeit_page_builder_box_toolbar_tab_columns('header')
		+sneeit_page_builder_box_toolbar_tab_shortcodes('header')
		+'</ul>'
		+sneeit_page_builder_box_toolbar_tab_columns('content')
		+sneeit_page_builder_box_toolbar_tab_shortcodes('content')
		+'</div>';
				
		if (sneeit_gutenberg) {
			toolbar_content += 
				'<div id="sneeit-page-builder-toolbar-gutenberg">' +
					'<button type="button" id="sneeit-page-builder-exit" '+
					'class="components-button is-pressed">' + 
						Sneeit_PageBuilder_Options.text.Exit +
					'</button>' +
					'<button type="button" id="sneeit-page-builder-apply" ' + 
					'class="components-button is-primary" disabled="on">'+
						Sneeit_PageBuilder_Options.text.Apply +
					'</button>' +
				'</div>'
			;
		}
		
		sneeit_page_builder_box(toolbar_content, workspace_content);
		
		// - apply tab ui to toolbar tab
		$('#sneeit-page-builder-toolbar-tab').tabs();
		
		// when switch to sneeit page builder
		$('#content-sneeit-page-builder').click(function () {
			sneeit_page_builder_come_in();
		});
		
		// page builder come out when click other editor tab
		// ################################################
		$('#content-tmce, #content-html, #sneeit-page-builder-exit').click(function () {
			sneeit_page_builder_come_out();
		});
		

		// apply tooltip ui for any buttons
		$( document ).tooltip({
			items: "[data-tooltip]",
			track: true,
			content: function() {
				var tooltip = $( this ).attr('data-tooltip');
				var lw_tt = tooltip.toLowerCase();
				if (lw_tt.indexOf('.png') != -1 || 
					lw_tt.indexOf('.gif') != -1 || 
					lw_tt.indexOf('.jpg') != -1 || 
					lw_tt.indexOf('.bmp') != -1) {
					return '<img src="' + tooltip+'"/>';
				} else {
					return tooltip;
				}		  	
			}
		});


		/* PAGE BUILDER ACTIONS for COLUMN & SHORTCODE BUTTONS */
		// insert column element
		// #####################
		$('.sneeit-page-builder-toolbar-tab-content-columns-button').click(function () {		
			sneeit_page_builder_was_edited();
			
			$('#sneeit-page-builder-workspace').prepend(
				sneeit_page_builder_workspace_wrapper_html(
					'column', 
					Sneeit_Shortcodes.declaration['column'], 
					'<div data-sneeit_shortcode_id="column" width="'+$(this).attr('data-width')+'"><div class="sneeit-page-builder-workspace-box-content-column-linked-sortable sneeit-page-builder-linked-sortable"></div></div>'
				)
			);	
			sneeit_page_builder_apply_sortable(sneeit_page_builder_was_edited);
		});

		// insert shortcode element
		// #####################
		$('.sneeit-page-builder-toolbar-tab-shortcodes-button').click(function () {
			sneeit_page_builder_was_edited();
			
			var shortcode_id = $(this).attr('data-shortcode_id');
			var shortcode_declaration = Sneeit_Shortcodes.declaration[shortcode_id];
			var shortcode_content = '<div data-sneeit_shortcode_id="'+shortcode_id+'"">';
			if ('nested' in shortcode_declaration) {
				$.each(shortcode_declaration['nested'], function (nested_shortcode_id, nested_shortcode_declaration) {
					shortcode_content += '<div data-sneeit_shortcode_id="'+nested_shortcode_id+'""></div>';
				});
			}
			shortcode_content += '</div>';
			$('#sneeit-page-builder-workspace').prepend(
				sneeit_page_builder_workspace_wrapper_html (
					shortcode_id, 
					Sneeit_Shortcodes.declaration[shortcode_id],
					shortcode_content
				)
			);
		});

		if (Sneeit_PageBuilder_Declaration.nested) {
			$('#sneeit-page-builder-box').addClass('enabled-nested');
		} else {
			$('#sneeit-page-builder-box').addClass('disabled-nested');
		}

		// increase/decrease width
		$(document).on('click', '.sneeit-page-builder-workspace-box-column-change-width', function () {
			sneeit_page_builder_was_edited();
			
			var column_box = $(this).parents('.sneeit-page-builder-workspace-box').first();
			var column_width = Number(column_box.attr('data-width'));		
			var column_width_pattern = new Array();
			// convert text column pattern to number pattern
			for (var i = 0; i < Sneeit_PageBuilder_Options.column_pattern.length; i++) {
				column_width_pattern.push(sneeit_page_builder_column_label_to_width_percent(Sneeit_PageBuilder_Options.column_pattern[i]));
			}

			// sort from small to big
			for (var i = 0; i < column_width_pattern.length - 1; i++) {
				for (var j = i+1; j < column_width_pattern.length; j++) {
					if (column_width_pattern[i] > column_width_pattern[j]) {
						var temp = column_width_pattern[i];
						column_width_pattern[i] = column_width_pattern[j];
						column_width_pattern[j] = temp;
					}				
				}
			}

			// scan and find the suitable value
			var found_index = -1;
			for (var i = 0; i < column_width_pattern.length; i++) {
				if (column_width == column_width_pattern[i]) {
					if ($(this).is('.sneeit-page-builder-workspace-box-column-increase-width')) {
						if (i < column_width_pattern.length - 1) {
							found_index = i+1;
						}					
					} else if (i > 0) {
						found_index = i - 1;
					}
					break;
				} else if (column_width < column_width_pattern[i]) {
					if ($(this).is('.sneeit-page-builder-workspace-box-column-increase-width')) {
						found_index = i;			
					} else if (i > 0) {
						found_index = i - 1;
					}
					break;
				}
			}

			// update data when increase / decrease
			if (found_index != -1) {
				column_width = column_width_pattern[found_index];
				column_box.css('width', column_width+'%').attr('data-width', column_width);
				column_box.find('div[data-sneeit_shortcode_id="column"]').first().attr('width', column_width);
				column_box.find('.sneeit-page-builder-workspace-box-header-column-value').first().text(' '+sneeit_page_builder_width_percent_to_column_label(column_width, '%')+' ');
			}
		});

		// delete boxes
		$(document).on('click', '.sneeit-page-builder-workspace-box-header-button-delete', function () {
			sneeit_page_builder_was_edited();
			
			$(this).parents('.sneeit-page-builder-workspace-box').first().remove();
		});

		// clone boxes
		$(document).on('click', '.sneeit-page-builder-workspace-box-header-button-duplicate', function () {		
			sneeit_page_builder_was_edited();
			
			var box_container = $(this).parents('.sneeit-page-builder-workspace-box').first();
			if (box_container.length) {
				$(box_container).clone().insertAfter($(box_container));
				sneeit_page_builder_apply_sortable(sneeit_page_builder_was_edited);	
			}
		});

		// when editing boxes
		$(document).on('click', '.sneeit-page-builder-workspace-box-header-button-edit', function () {		
			sneeit_page_builder_was_edited();
			
			var box_container = $(this).parents('.sneeit-page-builder-workspace-box').first();
			if (box_container.length) {	
				// get data
				var shortcode_id = box_container.attr('data-shortcode_id');
				var shortcode_declaration = Sneeit_Shortcodes.declaration[shortcode_id];
				var shortcode_holder = box_container.find('div[data-sneeit_shortcode_id="'+shortcode_id+'"]');
				var shortcode_content = '';
				var editor = new Object();

				if ('nested' in shortcode_declaration) {
					// init editor nested fields
					editor.nested = new Array();
					$.each(shortcode_declaration['nested'], function(nested_shortcode_id, nested_shortcode_declaration) {
						var index = 0;

						// scan all nested shortcodes inside
						shortcode_holder.find('div[data-sneeit_shortcode_id="'+nested_shortcode_id+'"]').each(function () {			
							var temp = new Object();
							var nested_shortcode_holder = $(this);
							$.each(nested_shortcode_declaration['fields'], function(nested_shortcode_field_id, nested_shortcode_field_declaration) {
								// collect attribute
								if ('type' in nested_shortcode_field_declaration && nested_shortcode_field_declaration['type'] == 'content') {
									// if content
									temp[nested_shortcode_field_id] = nested_shortcode_holder.html();
								} else {
									// if field value
									var field_value = nested_shortcode_holder.attr(nested_shortcode_field_id);
									if (typeof(field_value) != 'undefined') {									
										temp[nested_shortcode_field_id] = field_value;
									} else {
										if ('default' in nested_shortcode_field_declaration) {
											temp[nested_shortcode_field_id] = nested_shortcode_field_declaration['default'];
										} else {
											temp[nested_shortcode_field_id] = '';
										}
									}
								}
							});

							if (typeof(editor.nested[index]) == 'undefined') {
								editor.nested[index] = new Object();
							}

							// append to editor
							editor.nested[index][nested_shortcode_id] = temp;
							index++;

						});					
					});				
				} else {
					shortcode_content = sneeit_page_builder_workspace_html_to_shortcode(
						shortcode_holder.html(),
						Sneeit_Shortcodes.declaration,
						'.sneeit-page-builder-workspace-box',
						0
					);


					// remove sortable list from column
					$('#sneeit-page-builder-dummy').html(shortcode_content);
					$('#sneeit-page-builder-dummy .sneeit-page-builder-workspace-box-content-column-linked-sortable').each(function () {
						var inner_html = $(this).html();
						$(this).replaceWith(inner_html);
					});
					shortcode_content = $('#sneeit-page-builder-dummy').html();
				}

				// modify delacration
				if ('fields' in shortcode_declaration) {
					$.each(shortcode_declaration['fields'], function (field_id, field_declaration) {
						if ('type' in field_declaration && field_declaration['type'] == 'content') {
							shortcode_declaration['fields'][field_id]['value'] = shortcode_content;						
						} else {
							var field_value = shortcode_holder.attr(field_id);
							if (typeof(field_value) != 'undefined') {
								shortcode_declaration['fields'][field_id]['value'] = field_value;
							}
						}					
					});	
				}

				
				// create editor			
				editor.selection = new Object();
				editor.selection.getContent = function () {
					return shortcode_content;	
				}
				// mceInsertContent
				editor.execCommand = function (action, position, shortcode_result) {

					var processor_selector = '#sneeit-page-builder-dummy';

					// add to dummy to pre-process before apply to workspace				
					$(processor_selector).html(sneeit_page_builder_shortcode_to_html(shortcode_result, Sneeit_Shortcodes.declaration, 0));

					// mark all raw shortcode div with an attribute, we will remove it after wrapped
					$(processor_selector+' div[data-sneeit_shortcode_id]').each(function() {
						$(this).attr('data-sneeit_shortcode_id_pending', $(this).attr('data-sneeit_shortcode_id'));
					});

					$.each(Sneeit_Shortcodes.declaration, function (shortcode_id, shortcode_declaration) {
						// allow scanning nested max levels
						for (var i = 0; i < Sneeit_PageBuilder_Options.max_nested_level; i++) {
							if (!$(processor_selector+' div[data-sneeit_shortcode_id_pending="'+shortcode_id+'"]').length) {
								// scanned all shortcode with this id within max levels
								return;
							}
							$(processor_selector+' div[data-sneeit_shortcode_id_pending="'+shortcode_id+'"]').each(function () {
								// mark this was processed
								$(this).removeAttr('data-sneeit_shortcode_id_pending');

								// then process it
								var shortcode_content = this.outerHTML;
								shortcode_content = sneeit_page_builder_workspace_wrapper_html(
									shortcode_id, 
									shortcode_declaration, 
									shortcode_content
								);

								// and remove it when done
								$(this).replaceWith(shortcode_content);
							});
						}
					});

					// add inner sortable handler inside column
					// mark all column element with pending status
					$(processor_selector+' div[data-sneeit_shortcode_id="column"]').attr('data-sneeit_shortcode_id_pending', 'column');

					// scan with max levels for all columns 
					for (var i = 0; i < Sneeit_PageBuilder_Options.max_nested_level; i++) {
						if (!$(processor_selector+' div[data-sneeit_shortcode_id_pending="column"]').length) {
							// processed all
							break;
						}

						// still have? wrap it content for ui-sortable
						$(processor_selector+' div[data-sneeit_shortcode_id_pending="column"]').each(function () {
							// mark this processed
							$(this).removeAttr('data-sneeit_shortcode_id_pending');

							// then process it
							var shortcode_inner_content = $(this).html();
							$(this).html('<div class="sneeit-page-builder-workspace-box-content-column-linked-sortable sneeit-page-builder-linked-sortable">'+shortcode_inner_content+'</div>');
						});
					}

					box_container.replaceWith($(processor_selector).html());

					// box_container.replaceWith
					sneeit_page_builder_apply_sortable(sneeit_page_builder_was_edited);
					$('html,body').removeClass('disabled-scroll');
				}
				sneeit_shortcodes_box(editor, shortcode_id, shortcode_declaration);			
			}		
		});

		/*UPDATE CONTENT TEXT AREA*/
		// replace shortcode if press below buttons:
		if (!sneeit_gutenberg) {		
			var sneeit_pagebuilder_affected_elemenets = '#save-post, #post-preview, #publish, #content-tmce, #content-html, #sneeit-page-builder-exit, .edit-post-more-menu';
			$(sneeit_pagebuilder_affected_elemenets).mouseenter(function () {
				if (sneeit_page_builder_editing) {
					sneeit_main_content_field = sneeit_page_builder_main_content_field();
					sneeit_page_builder_workspace_to_content_textarea(sneeit_main_content_field, sneeit_gutenberg);	
				}
			});
			$(sneeit_pagebuilder_affected_elemenets).click(function () {		
				if (sneeit_page_builder_editing) {
					sneeit_main_content_field = sneeit_page_builder_main_content_field();
					sneeit_page_builder_workspace_to_content_textarea(sneeit_main_content_field, sneeit_gutenberg);	
				}
			});

			$('#wpwrap').click(function () {
				$('html,body').remove('disabled-scroll'); // just in case the shortcode not work properly
			})
			$('#sneeit-page-builder-toolbar').mouseenter(function () {
				$('html,body').remove('disabled-scroll'); // just in case the shortcode not work properly	
			});
		} //end of action and animation only for classic editor 
		
		else {
			// press Apply button
			$('#sneeit-page-builder-apply').click(function(){
				if ($(this).is('[disabled]')) {
					return;
				}
				
				sneeit_main_content_field = sneeit_page_builder_main_content_field();
				sneeit_page_builder_workspace_to_content_textarea(sneeit_main_content_field, sneeit_gutenberg);	
				sneeit_page_builder_was_edited(false);
			});
		}
	} // function sneeit_page_builder
		
		
	/**
	 * 
	 * Add Page Builder link to Editor List
	 */
	if (sneeit_gutenberg) {
		
		var waiting_gutenberg_editor = setInterval(function(){
			if (!$('.edit-post-header__settings').length) {
				return;
			}
			clearInterval(waiting_gutenberg_editor);				
			sneeit_page_builder();							
		}, 100);		 
		return;		 
	}
	
	sneeit_page_builder();
});