Cloning getting slow

This topic has 2 replies, 2 voices, and was last updated 7 years, 4 months ago by web-crossing.
Viewing 3 posts - 1 through 3 (of 3 total)
Author

Posts
December 2, 2016 at 8:50 PM #4624
Participant
Hello,
we have created some fields with the metabox plugin which are cloneable by a group. You can choose between a couple of different elements (like a element "webcam", or "teaser"). All is working fine, but after adding some new elements, it's getting really slow. With every click on "Add more" it's getting slower, and we don't know what we could do. Is there something we can change or make so it's getting faster? Here is our code:
	$meta_boxes[] = array (
		'include' => array(
			'template' => array('page-standard.php')
		),
		'id' => 'page-meta',
		'title' => __('Additional fields', 'webx'),
		'post_types' => array('page'),
		'context' => 'normal',
		'priority' => 'high',
		'autosave' => false,
		'fields' => array(
			array(
				'id'     => "{$prefix}content",
				'type'   => 'group',
				'clone'  => true,
				'sort_clone' => true,
 				'fields' => array(
					array(
						'name'    =>  __('Type', 'webx'),
						'id'      => "{$prefix}type",
						'type'    => 'select_advanced',
						'options' => array(
							'option1'   => __('Header', 'webx'),
							'option2'   => __('Teaser', 'webx'),
							'option3'   => __('Static box', 'webx'),
							'option4'   => __('Gallery', 'webx'),
							'option5'   => __('Map', 'webx'),
							'option6'   => __('Shortcode', 'webx'),
							'option7'   => __('Job offers', 'webx'),
							'option8'   => __('Webcam', 'webx'),
							'option9'   => __('Social', 'webx'),
						),
					),
					
					array(
						'name' => __('Background Image', 'webx'),
						'id' => "{$prefix}header-background", 
						'type' => 'image_advanced', 
						'desc' => __('Optimal size: 1920x450px', 'webx'),
						'max_file_uploads' => 3,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option1')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Headline', 'webx'),
						'id' => "{$prefix}header-headline", 
						'type' => 'WYSIWYG',
						'options' => array(
							'wpautop' => true,
							'textarea_rows' => 2,
							'tabindex' => '',
							'tabfocus_elements' => ':prev,:next', 
							'editor_css' => '', 
							'editor_class' => '',
							'teeny' => true,
							'dfw' => false,
							'tinymce' => true, 
							'quicktags' => true,
							"media_buttons" => false,
						),
						'cols' => 2,
						'rows' => 2,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option1')
							),
							'relation' => 'or'
						),
					),
					array(
						'name'    =>  __('Header Type', 'webx'),
						'id'      => "{$prefix}header-type",
						'type'    => 'select_advanced',
						'options' => array(
							'option2'   => __('Subheadline', 'webx'),
							'option3'   => __('Text', 'webx'),
						),
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option1')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Subheadline', 'webx'),
						'id' => "{$prefix}header-subheadline", 
						'type' => 'WYSIWYG',
						'options' => array(
							'wpautop' => true,
							'textarea_rows' => 2,
							'tabindex' => '',
							'tabfocus_elements' => ':prev,:next', 
							'editor_css' => '', 
							'editor_class' => '',
							'teeny' => true,
							'dfw' => false,
							'tinymce' => true, 
							'quicktags' => true,
							"media_buttons" => false,
						),
						'cols' => 2,
						'rows' => 2,
						'visible' => array(
							'when' => array(
								array("{$prefix}header-type", 'option2')
							),
							'relation' => 'or'
						),
					),
					array(
						'name'  => __('Text', 'webx'), 
						'id'   => "{$prefix}header-text",
						'type' => 'WYSIWYG',
						'options' => array(
							'wpautop' => true,
							'textarea_rows' => 2,
							'tabindex' => '',
							'tabfocus_elements' => ':prev,:next', 
							'editor_css' => '', 
							'editor_class' => '',
							'teeny' => true,
							'dfw' => false,
							'tinymce' => true, 
							'quicktags' => true,
							"media_buttons" => false,
						),
						'cols'  => 4,
						'rows'  => 4,
						'visible' => array(
							'when' => array(
								array("{$prefix}header-type", 'option3')
								
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Headline', 'webx'),
						'id' => "{$prefix}teaser-headline", 
						'type' => 'WYSIWYG',
						'options' => array(
							'wpautop' => true,
							'textarea_rows' => 2,
							'tabindex' => '',
							'tabfocus_elements' => ':prev,:next', 
							'editor_css' => '', 
							'editor_class' => '',
							'teeny' => true,
							'dfw' => false,
							'tinymce' => true, 
							'quicktags' => true,
							"media_buttons" => false,
						),
						'cols' => 2,
						'rows' => 2,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option2')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Text', 'webx'),
						'id' => "{$prefix}teaser-text", 
						'type' => 'WYSIWYG',
						'options' => array(
							'wpautop' => false,
							'textarea_rows' => 2,
							'tabindex' => '',
							'tabfocus_elements' => ':prev,:next', 
							'editor_css' => '', 
							'editor_class' => '',
							'teeny' => true,
							'dfw' => false,
							'tinymce' => true, 
							'quicktags' => true,
							"media_buttons" => false,
						),
						'cols' => 4,
						'rows' => 4,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option2')
							),
							'relation' => 'or'
						),
					),
					
					array(
						'name'      => __('Layout', 'webx'),
						'id'        => "{$prefix}staticbox-layout",
						'type'      => 'select_advanced',
						'inline'    => false,
						'options'   => array(
							'layout1'  => __('Image / Text','webx'),
							'layout2'  => __('Text / Image','webx'),
						),
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option3'),
								array("{$prefix}type", 'option7')
							),
							'relation' => 'or'
						),
					),
					
					array(
						'name' => __('Select Job', 'webx'),
						'id' => "{$prefix}job-selector", 
						'type' => 'select_advanced',
						'options'   => $output_jobs,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option7')
							),
							'relation' => 'or'
						),
					),
					
					array(
						'name' => __('Headline', 'webx'),
						'id' => "{$prefix}staticbox-headline", 
						'type' => 'WYSIWYG',
						'options' => array(
							'wpautop' => true,
							'textarea_rows' => 2,
							'tabindex' => '',
							'tabfocus_elements' => ':prev,:next', 
							'editor_css' => '', 
							'editor_class' => '',
							'teeny' => true,
							'dfw' => false,
							'tinymce' => true, 
							'quicktags' => true,
							"media_buttons" => false,
						),
						'cols' => 2,
						'rows' => 2,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option3')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Text', 'webx'),
						'id' => "{$prefix}staticbox-text", 
						'type' => 'WYSIWYG',
						'options' => array(
							'wpautop' => false,
							'textarea_rows' => 2,
							'tabindex' => '',
							'tabfocus_elements' => ':prev,:next', 
							'editor_css' => '', 
							'editor_class' => '',
							'teeny' => true,
							'dfw' => false,
							'tinymce' => true, 
							'quicktags' => true,
							"media_buttons" => false,
						),
						'cols' => 4,
						'rows' => 4,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option3')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Image', 'webx'),
						'id' => "{$prefix}staticbox-image", 
						'type' => 'image_advanced', 
						'max_file_uploads' => 1,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option3')
							),
							'relation' => 'or'
						),
					),
					array(
						'name'      => __('Additional Content', 'webx'),
						'id'        => "{$prefix}staticbox-additional",
						'type'      => 'select_advanced',
						'inline'    => true,
						'options'   => array(
							'0'  => __('No','webx'),
							'1'  => __('New','webx'),
							'2'  => __('More','webx'),
						),
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option3'),
								array("{$prefix}type", 'option7'),
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Text', 'webx'),
						'id' => "{$prefix}staticbox-additional-new-text", 
						'type' => 'WYSIWYG',
						'options' => array(
							'wpautop' => true,
							'textarea_rows' => 2,
							'tabindex' => '',
							'tabfocus_elements' => ':prev,:next', 
							'editor_css' => '', 
							'editor_class' => '',
							'teeny' => true,
							'dfw' => false,
							'tinymce' => true, 
							'quicktags' => true,
							"media_buttons" => false,
						),
						'cols' => 2,
						'rows' => 2,
						'visible' => array(
							'when' => array(
								array("{$prefix}staticbox-additional", '1')
							),
							'relation' => 'or'
						),
					),
					array(
						'name'      => __('More Type', 'webx'),
						'id'        => "{$prefix}staticbox-additional-more",
						'type'      => 'select_advanced',
						'inline'    => true,
						'options'   => array(
							'1'  => __('Internally','webx'),
							'2'  => __('Externally','webx'),
						),
						'visible' => array(
							'when' => array(
								array("{$prefix}staticbox-additional", '2')
							),
							'relation' => 'or'
						),
					),
					array(
						"name" 	=> __('Select page', 'webx'), 
						'id' 	=> "{$prefix}staticbox-additional-more-internally",
						'type'	=> 'post',
						'post_type' => 'page',
						'field_type' => 'select_advanced',
						'visible' => array(
							'when' => array(
								array("{$prefix}staticbox-additional-more", '1')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Text', 'webx'),
						'id' => "{$prefix}staticbox-additional-more-externally-text", 
						'type' => 'text',
						'size' => 100,
						'visible' => array(
							'when' => array(
								array("{$prefix}staticbox-additional-more", '2')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Link', 'webx'),
						'id' => "{$prefix}staticbox-additional-more-externally-link", 
						'type' => 'text',
						'size' => 100,
						'visible' => array(
							'when' => array(
								array("{$prefix}staticbox-additional-more", '2')
							),
							'relation' => 'or'
						),
					),
					
					array(
						'name' => __('Images', 'webx'),
						'id' => "{$prefix}gallery-images", 
						'type' => 'image_advanced', 
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option4')
							),
							'relation' => 'or'
						),
					),
					array(
						'name'   => __('Videos', 'webx'),
						'id'     => "{$prefix}gallery-video-group",
						'type'   => 'group',
						'clone'  => true,
						'sort_clone' => true,
						'fields' => array(
							array(
								'name' => __('Youtube Link', 'webx'),
								'id' => "{$prefix}gallery-youtube-link", 
								'type' => 'text',
								'size' => 100,
							),
							array(
								'name' => __('Order', 'webx'),
								'id' => "{$prefix}gallery-youtube-order", 
								'type' => 'text',
								'size' => 100,
							),
							array(
								'name'      => __('Is active?', 'webx'),
								'id'        => "{$prefix}gallery-layout",
								'type'      => 'select_advanced',
								'inline'    => true,
								'options'   => array(
									'no'  => __('No','webx'),
									'yes'  => __('Yes','webx'),
								),
							),
						),
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option4')
							),
							'relation' => 'or'
						),
					),
					
					array(
						'name' => __('Shortcode', 'webx'),
						'id' => "{$prefix}shortcode-code",
						'type' => 'WYSIWYG',
						'options' => array(
							'wpautop' => true,
							'textarea_rows' => 2,
							'tabindex' => '',
							'tabfocus_elements' => ':prev,:next', 
							'editor_css' => '', 
							'editor_class' => '',
							'teeny' => true,
							'dfw' => false,
							'tinymce' => true, 
							'quicktags' => true,
							"media_buttons" => false,
						),
						'cols' => 2,
						'rows' => 1,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option6')
							),
							'relation' => 'or'
						),
					),
					
					array(
						'name' => __('Skimap', 'webx'),
						'id' => "{$prefix}webcam-image-left", 
						'type' => 'image_advanced', 
						'desc' => __('Optimal size: 500x375px', 'webx'),
						'max_file_uploads' => 1,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option8')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Headline', 'webx'),
						'id' => "{$prefix}webcam-headline", 
						'type' => 'text',
						'size' => 100,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option8')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Link 1', 'webx'),
						'id' => "{$prefix}webcam-link-1", 
						'type' => 'text',
						'size' => 100,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option8')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Link 2', 'webx'),
						'id' => "{$prefix}webcam-link-2", 
						'type' => 'text',
						'size' => 100,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option8')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Link 3', 'webx'),
						'id' => "{$prefix}webcam-link-3", 
						'type' => 'text',
						'size' => 100,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option8')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Link 4', 'webx'),
						'id' => "{$prefix}webcam-link-4", 
						'type' => 'text',
						'size' => 100,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option8')
							),
							'relation' => 'or'
						),
					),
					array(
						'name' => __('Link 5', 'webx'),
						'id' => "{$prefix}webcam-link-5", 
						'type' => 'text',
						'size' => 100,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option8')
							),
							'relation' => 'or'
						),
					),
					
					array(
						"name" 	=> __('Headline', 'webx'), 
						'id' 	=> "{$prefix}social-headline",
						'type' => 'WYSIWYG',
						'options' => array(
							'wpautop' => true,
							'textarea_rows' => 2,
							'tabindex' => '',
							'tabfocus_elements' => ':prev,:next', 
							'editor_css' => '', 
							'editor_class' => '',
							'teeny' => true,
							'dfw' => false,
							'tinymce' => true, 
							'quicktags' => true,
							"media_buttons" => false,
						),
						'cols'  => 2,
						'rows'  => 2,
						'visible' => array(
							'when' => array(
								array("{$prefix}type", 'option9')
							),
							'relation' => 'or'
						),
					),
				)
			)
		)
	);
December 4, 2016 at 10:21 AM #4634
Anh Tran
Keymaster
Thanks for your report. Yes, the JavaScript code to clone fields works heavily based on jQuery-DOM manipulating. So, it’s a little slow for large meta box or for a field with lots of clones. I will take a note and improve it.
December 5, 2016 at 3:23 PM #4637
web-crossing
Participant
It would be great.
Thanks.
Author

Posts
Viewing 3 posts - 1 through 3 (of 3 total)
The topic ‘Cloning getting slow’ is closed to new replies.