НЕГІЗГІ ӘДІСТЕР - «ui::» КЛАССЫ : Өрістер және Формаларды өңдеу

$args = array();
$args['in_div'] = true;
$args['name'] = 'my_onoff_short_form';
$args['value_storage'] = array('api_docs_examples', 'access');
$str .= ui::btn_onoff_with_save($args);

public function save_my_onoff_short_form() { 
	$now_val = ui::get_post_VAL();
	if($now_val === 'Y') {
		// YOUR code
	}
	else {
		// YOUR code
	}
	storage::auto();
	//---
	$msg = e_p(mlang('s_status__success', 1).'!');
	$msg .= e_p('<strong>VALUE:</strong> <br>'.$now_val);
	ojsucc($msg, 3000);
}

$args = array();
$args['in_div'] = true;
$args['name'] = 'my_input_short_form';
$args['value'] = '';
$args['label'] = 'Type in the word:';
$args['value_storage'] = array('api_docs_examples', 'access');
$str .= ui::input_with_save($args);

public function save_my_input_short_form() { 
	$now_val = (string) ui::get_post_VAL();
	if($now_val !== '') {
		// YOUR code
		storage::auto();
		//---
		$msg = e_p(mlang('s_status__success', 1).'!');
		$msg .= e_p('<strong>VALUE:</strong> <br>'.$now_val);
		ojsucc($msg, 3000);
	}
	else {
		ojerr(mlang('s_form__fill', 1).'!');
	}
}

$args = array();
$args['name'] = 'my_ui_file_input';
$args['in_div'] = true;
$args['inp_file_only_imgs'] = true;
$args['with_caption'] = true;
$args['multiple'] = true;
$args['auto_delete'] = 1;
$str .= ui::input_file_with_save($args);

$args = array();
$args['in_div'] = true;
$args['name'] = 'my_textarea_short_form';
$args['value'] = '';
$args['label'] = 'Type in the words:';
$args['rows'] = 3;
$args['value_storage'] = array('api_docs_examples', 'access');
$str .= ui::textarea_with_save($args);

public function save_my_textarea_short_form() { 
	$now_val = (string) ui::get_post_VAL();
	if($now_val !== '') {
		// YOUR code
		storage::auto();
		//---
		$msg = e_p(mlang('s_status__success', 1).'!');
		$msg .= e_p('<strong>VALUE:</strong> <br>'.nl2br($now_val));
		ojsucc($msg, 3000);
	}
	else {
		ojerr(mlang('s_form__fill', 1).'!');
	}
}

$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select_short_form';
$args['value'] = '';
$args['label'] = 'Select option:';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	,	'opt_2_value'=>'Option 2'
	,	'opt_3_value'=>'Option 3'
	,	'opt_4_value'=>'Option 4'
	,	'opt_5_value'=>'Option 5'
);
$args['include_opt_not_set'] = true;
$args['value_storage'] = array('api_docs_examples', 'access');
$args['_auto_handler'] = true;
$str .= ui::select_with_save($args);

$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select_multiple_short_form';
$args['value'] = '';
$args['label'] = 'Select option:';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	,	'opt_2_value'=>'Option 2'
	,	'opt_3_value'=>'Option 3'
	,	'opt_4_value'=>'Option 4'
	,	'opt_5_value'=>'Option 5'
);
$args['include_opt_not_set'] = true;
$args['multiple'] = true;
$args['value_storage'] = array('api_docs_examples', 'access');
$str .= ui::select_with_save($args);

public function save_my_select_multiple_short_form() { 
	$now_val = ui::get_post_VAL();
	if(!empty($now_val)) {
		// YOUR code
		storage::auto();
		//---
		$msg = e_p(mlang('s_status__success', 1).'!');
		$now_val_format = "<pre>\n";
			$now_val_format .= print_r($now_val, true);
		$now_val_format .= "</pre>";
		$msg .= e_p('<strong>VALUE:</strong> <br>'.$now_val_format);
		ojsucc($msg, 3000);
	}
	else {
		ojerr(mlang('s_form__fill', 1).'!');
	}
}

$args = array();
$args['in_div'] = true;
$args['name'] = 'my_checkboxes_short_form';
$args['value'] = '';
$args['label'] = 'Check options:';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	,	'opt_2_value'=>'Option 2'
	,	'opt_3_value'=>'Option 3'
	,	'opt_4_value'=>'Option 4'
	,	'opt_5_value'=>'Option 5'
);
$args['max_opts_in_block'] = 2;
$args['value_storage'] = array('api_docs_examples', 'access');
$args['_auto_handler'] = true;
$str .= ui::checkbox_with_save($args);

$args = array();
$args['in_div'] = true;
$args['name'] = 'my_radios_short_form';
$args['value'] = '';
$args['label'] = 'Select radio:';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	,	'opt_2_value'=>'Option 2'
	,	'opt_3_value'=>'Option 3'
	,	'opt_4_value'=>'Option 4'
	,	'opt_5_value'=>'Option 5'
);
$args['max_opts_in_block'] = 2;
$args['value_storage'] = array('api_docs_examples', 'access');
$args['_auto_handler'] = true;
$str .= ui::radio_with_save($args);

$str .= ui::form_start();
//--- INPUT number
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_input_number';
$args['label'] = 'Type in the number:';
$args['type'] = 'number';
$args['inp_type_number_min'] = 0;
$args['inp_type_number_max'] = 1000;
$args['value_storage'] = array('api_docs_examples_complex', 'access');
$str .= ui::input($args);
//--- SELECT
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select';
$args['value'] = '';
$args['label'] = 'Select the option:';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	,	'opt_2_value'=>'Option 2'
	,	'opt_3_value'=>'Option 3'
	,	'opt_4_value'=>'Option 4'
);
$args['include_opt_not_set'] = true;
$args['value_storage'] = array('api_docs_examples_complex', 'access');
$str .= ui::select($args);
//--- CHECKBOXES
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_checkboxes';
$args['value'] = '';
$args['label'] = 'Check the checkboxes:';
$args['opts'] = array(
		'check_1_value'=>'Option 1'
	,	'check_2_value'=>'Option 2'
	,	'check_3_value'=>'Option 3'
	,	'check_4_value'=>'Option 4'
);
$args['max_opts_in_block'] = 2;
$args['value_storage'] = array('api_docs_examples_complex', 'access');
$str .= ui::checkbox($args);
//--- INPUT TYPE FILE
$args = array();
$args['name'] = 'my_form_file_example_1_';
$args['in_div'] = true;
$args['multiple'] = true;
$args['with_caption'] = true;
$args['auto_delete'] = 1;
$str .= ui::input_file($args);
//=== form end
$str .= ui::form_end('saves_form_example_1');

public function saves_form_example_1() { 
	$now_vals = ui::get_post_VALS();
	//if(...) {
		// YOUR code
	// }
	storage::auto();
	//---
	$msg = e_p(mlang('s_status__success', 1).'!');
	$now_vals_format = "<pre>\n";
		$now_vals_format .= print_r($now_vals, true);
	$now_vals_format .= "</pre>";
	$msg .= e_p('<strong>VALUES:</strong> <br>'.$now_vals_format);
	//---
	$now_uploaded = upload::get_uploaded();
	$now_uploaded_format = "<pre>\n";
		$now_uploaded_format .= print_r($now_uploaded, true);
	$now_uploaded_format .= "</pre>";
	$msg .= e_p('<strong>UPLOADED:</strong> <br>'.$now_uploaded_format);
	ojsucc($msg, false);
}

$str .= ui::form_start();
//--- INPUT number
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_input_number';
$args['label'] = 'Type in the number:';
$args['type'] = 'number';
$args['inp_type_number_min'] = 0;
$args['inp_type_number_max'] = 1000;
$args['required'] = true;
$args['value_storage'] = array('api_docs_examples_complex_auto', 'access');
$str .= ui::input($args);
//--- SELECT
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select';
$args['value'] = '';
$args['label'] = 'Select the option:';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	,	'opt_2_value'=>'Option 2'
	,	'opt_3_value'=>'Option 3'
	,	'opt_4_value'=>'Option 4'
);
$args['include_opt_not_set'] = true;
$args['required'] = true;
$args['value_storage'] = array('api_docs_examples_complex_auto', 'access');
$str .= ui::select($args);
//--- CHECKBOXES
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_checkboxes';
$args['value'] = '';
$args['label'] = 'Check the checkboxes:';
$args['opts'] = array(
		'check_1_value'=>'Option 1'
	,	'check_2_value'=>'Option 2'
	,	'check_3_value'=>'Option 3'
	,	'check_4_value'=>'Option 4'
);
$args['max_opts_in_block'] = 2;
$args['required'] = true;
$args['value_storage'] = array('api_docs_examples_complex_auto', 'access');
$str .= ui::checkbox($args);
//--- INPUT TYPE FILE
$args = array();
$args['name'] = 'my_form_file_example_2_';
$args['in_div'] = true;
$args['multiple'] = true;
$args['with_caption'] = true;
$args['auto_delete'] = 1;
$args['required'] = true;
$str .= ui::input_file($args);
//=== form end
$str .= ui::form_end('auto:saves_form_example_2');

public function saves_form_example_1() { 
	$now_vals = ui::get_post_VALS();
	//if(...) {
		// YOUR code
	// }
	storage::auto();
	//---
	$msg = e_p(mlang('s_status__success', 1).'!');
	$now_vals_format = "<pre>\n";
		$now_vals_format .= print_r($now_vals, true);
	$now_vals_format .= "</pre>";
	$msg .= e_p('<strong>VALUES:</strong> <br>'.$now_vals_format);
	//---
	$now_uploaded = upload::get_uploaded();
	$now_uploaded_format = "<pre>\n";
		$now_uploaded_format .= print_r($now_uploaded, true);
	$now_uploaded_format .= "</pre>";
	$msg .= e_p('<strong>UPLOADED:</strong> <br>'.$now_uploaded_format);
	ojsucc($msg, false);
}

$args = array();
$args['in_div'] = true;
$args['name'] = 'input_extend_js_1';
$args['label'] = 'Type in the word:';
$args['value_storage'] = array('api_docs_examples_js', 'access');
$str .= ui::input_with_save($args);

public function save_input_extend_js_1() { 
	$now_val = ui::get_post_VAL();
	if(!empty($now_val)) {
		// YOUR code
		storage::auto();
		//---
		$msg = e_p(mlang('s_status__success', 1).'!');
		$msg .= e_p('<strong>VALUE:</strong> <br>'.$now_val);
		ojsucc($msg, 3000);
	}
	else {
		ojerr(mlang('s_form__fill', 1).'!');
	}
}

$$.save_input_extend_js_1 = {};
$$.save_input_extend_js_1.start = function(data, element, event) {
	console.log('data', data);
  var confirm_text = $$.mlang('forms_example__extend_js_confirm_example');
  confirm_text += ' '+data.val.length;
  confirm_text +='?';
  if(!confirm(confirm_text)) return false;
  data.my_par_1 = 'my_value_1';
}

$args = array();
$args['in_div'] = true;
$args['name'] = 'select_extend_js_2';
$args['label'] = 'Select option:';
$args['opts'] = array(
    'opt_1_value'=>'opt_1_label'
  , 'opt_2_value'=>'opt_2_label'
  , 'opt_3_value'=>'opt_3_label'
  , 'opt_4_value'=>'opt_4_label'
);
$str .= ui::select_with_save($args);

public function save_select_extend_js_2() { 
	$now_val = ui::get_post_VAL();
	if(!empty($now_val)) {
		// YOUR code
		$msg = e_p(mlang('s_status__success', 1).'!');
		$msg .= e_p('<strong>VALUE:</strong> <br>'.$now_val);
		ojsucc($msg, 3000);
	}
	else {
		ojerr(mlang('s_form__fill', 1).'!');
	}
}

$$.save_select_extend_js_2 = {};
$$.save_select_extend_js_2.cb = function(json, element, event) {
  console.log('json', json);
  var field =	element.closest('form').find('select');
  field.prop('disabled', true).css({'background-color': '#d4f0ff'});
}

$str .= ui::form_start();
	$args = array();
	$args['in_div'] = true;
	$args['name'] = 'select_complex_js';
	$args['label'] = 'Select option:';
	$args['handler_change'] = 'select_interaction';
	$args['opts'] = array(
			'opt_1_value'=>'opt_1_label'
		, 'opt_2_value'=>'opt_2_label'
		, 'opt_3_value'=>'opt_3_label'
		, 'opt_4_value'=>'opt_4_label'
	);
	$args['include_opt_not_set'] = true;
	$args['value_storage'] = array('api_docs_examples_js_complex', 'access');
	$str .= ui::select($args);
	
	$str .= '<div class="js-by_select_interaction" style="display: none;">';
		$args = array();
		$args['in_div'] = true;
		$args['name'] = 'checkbox_complex_js';
		$args['label'] = 'Check options:';
		$args['opts'] = array(
				'opt_1_value'=>'opt_1_label'
			, 'opt_2_value'=>'opt_2_label'
			, 'opt_3_value'=>'opt_3_label'
			, 'opt_4_value'=>'opt_4_label'
		);
		$args['value_storage'] = array('api_docs_examples_js_complex', 'access');
		$str .= ui::checkbox($args);
	$str .= '</div>';
	
	$args = array();
	$args['in_div'] = true;
	$args['name'] = 'textarea_complex_js';
	$args['label'] = 'Type in the words:';
	$args['value_storage'] = array('api_docs_examples_js_complex', 'access');
	$str .= ui::textarea($args);

$str .= ui::form_end('auto:saves_complex_extend_js');

$$.select_interaction = function(data, element, event) {
  var div_by_select_interaction = element.closest('form').find('.js-by_select_interaction');
  if(data.val!=='') div_by_select_interaction.slideDown();
  else div_by_select_interaction.slideUp();
  return true;
}

$$.saves_complex_extend_js = {};
$$.saves_complex_extend_js.start = function(data, element, event) {
  console.log('data', data);
  var form = element.closest('form');
  form.css({'transform': 'rotate(-5deg)'});
}
$$.saves_complex_extend_js.cb = function(json, element, event) {
  console.log('json', json);
  var form = element.closest('form');
  form.css({'transform': 'rotate(0deg)'});
}

$args = array();
$args['handler_click'] = 'color_my_box';
$args['id'] = set_id('my_coloring_div');
$args['addclass'] = 'p-3 border';
$args['attrs'] = array(
	  'data-color_1'=>'red'
	, 'data-color_2'=>'blue'
	, 'data-color_3'=>'green'
	, 'data-color_4'=>'orange'
	, 'style'=>'background: orange; color: white;'
);
$args['cursor'] = 'pointer';
$str .= '<div '.ui::dom_element($args).' >';
  $str .= 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat lacinia nunc, eget tincidunt est maximus eu.';
$str .= '</div>';

$$._now_color = 1;
$$.color_my_box = function(data, element, event){
	element.css({'background': element.data('color_'+$$._now_color)});
	$$._now_color++;
	if($$._now_color>4) $$._now_color = 1;
	return true;
}

$args = array();
$args['handler_click'] = 'color_my_box_with_ajax';
$args['id'] = set_id('my_coloring_div_with_ajax');
$args['addclass'] = 'p-3 border';
$args['attrs'] = array(
	  'data-color_1'=>'orange'
	, 'data-color_2'=>'red'
	, 'data-color_3'=>'blue'
	, 'data-color_4'=>'green'
	, 'style'=>'background: green; color: white;'
);
$args['cursor'] = 'pointer';
$str .= '<div '.ui::dom_element($args).' >';
  $str .= 'Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.';
$str .= '</div>';

public function color_my_box_with_ajax() { 
	$_number_color = (!empty($this->post['_number_color']) ? intval($this->post['_number_color']) : 1);
	switch($_number_color) {
		case 2: $text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; break;
		case 3: $text = 'Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.'; break;
		case 4: $text = 'Curabitur commodo eget nisl et laoreet. Morbi vitae venenatis nisl.'; break;
		default: $text = 'Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.';
	}
	oj_html_1(find_ele('my_coloring_div_with_ajax'), $text);
	ojend();
}

$$._number_color = 1;
$$.color_my_box_with_ajax = {};
$$.color_my_box_with_ajax.start = function(data, element, event){
	element.css({'background': element.data('color_'+$$._number_color)});
	data._number_color = $$._number_color;
	$$._number_color++;
	if($$._number_color>4) $$._number_color = 1;
}

$args = array();
$args['btn_text'] = 'Text for button';
$args['body'] = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat lacinia nunc, eget tincidunt est maximus eu.';
$str .= ui::dropdown($args);

$args = array();
$args['children'] = array();
//--- Tab 1
$tab = array(
		'btn_text'=>'Tab 1'
	, 'body'=>'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a eleifend ante, sed ultrices ipsum. Praesent id lectus mattis, dapibus massa et, blandit ipsum. Pellentesque ullamcorper ante augue, id aliquam sem vulputate id. Sed elit augue, molestie a elit aliquet, facilisis elementum eros. Nam non enim sapien. Vivamus non eleifend quam. Nam dapibus condimentum porttitor. Aenean tempor tincidunt tristique.'
);
$args['children'][] = $tab;
//--- Tab 2
$tab = array(
		'btn_text'=>'Tab 2'
	, 'body'=>'Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.'
);
$args['children'][] = $tab;
//--- Tab 3
$tab = array(
		'btn_text'=>'Tab 3'
	, 'body'=>'Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты.'
);
$args['children'][] = $tab;
//---
$args['style_pills'] = false;
$str .= ui::tabs($args);

$args = array();
$args['children'] = array();
//--- Image 1
$image_set = array(
		'src'=>media_link('011ab21242e86e7d7635')
	, 'caption'=>'Caption for image 1'
);
$args['children'][] = $image_set;
//--- Image 2
$image_set = array(
		'src'=>media_link('3e1861d3864ba55b27a8')
	, 'caption'=>'Caption for image 2'
);
$args['children'][] = $image_set;
//---
$str .= ui::gallery($args);

$args = array();
//===  get saved open_tab
$saved_open_tab = storage::get_value('api_docs_examples_storage', 'open_tab');
if(!$saved_open_tab) $saved_open_tab = 0;
//===
$args['children'] = array();
$args['children'][] = array(
		'btn_text'=>'Tab 1'
	, 'handler_tab'=>'open_tab'
	, 'handler_tab_force'=>true
	, 'use_btn_reload'=>false
	, 'init_open'=>($saved_open_tab === 0 ? true : false)
);
$args['children'][] = array(
		'btn_text'=>'Tab 2'
	, 'handler_tab'=>'open_tab'
	, 'handler_tab_force'=>true
	, 'use_btn_reload'=>false
	, 'init_open'=>($saved_open_tab === 1 ? true : false)
);
$args['children'][] = array(
		'btn_text'=>'Tab 3'
	, 'handler_tab'=>'open_tab'
	, 'handler_tab_force'=>true
	, 'use_btn_reload'=>false
	, 'init_open'=>($saved_open_tab === 2 ? true : false)
);
$str .= ui::tabs($args);

public function open_tab() { 
	$str = '';
	$open_tab = $this->post['_tab'];
	//=== save to storage
	storage::init('api_docs_examples_storage', 'access');
	storage::set_f('open_tab', $open_tab, 'int');
	storage::save();
	//=== get saved open_sub_tab
	$saved_open_sub_tab_rels = storage::get_value('api_docs_examples_storage', 'open_sub_tab');
	if(!$saved_open_sub_tab_rels) $saved_open_sub_tab_rels = array();
	$saved_open_sub_tab = (isset($saved_open_sub_tab_rels[$open_tab]) ? (int) $saved_open_sub_tab_rels[$open_tab] : 0);
	//===
	$str .= '<div class="pl-3 border-left border-warning">';
		$str .= '<div class="py-4">My content for Tab '.($open_tab+1).'</div>';
		//===
		$args = array();
		$args['children'] = array();
		$args['children'][] = array(
				'btn_text'=>'SubTab 1'
			, 'handler_tab'=>'open_sub_tab'
			, 'handler_tab_force'=>true
			, 'handler_tab_pars'=>array('open_tab'=>$open_tab)
			, 'use_btn_reload'=>false
			, 'init_open'=>($saved_open_sub_tab === 0 ? true : false)
		);
		$args['children'][] = array(
				'btn_text'=>'SubTab 2'
			, 'handler_tab'=>'open_sub_tab'
			, 'handler_tab_force'=>true
			, 'handler_tab_pars'=>array('open_tab'=>$open_tab)
			, 'use_btn_reload'=>false
			, 'init_open'=>($saved_open_sub_tab === 1 ? true : false)
		);
		$args['children'][] = array(
				'btn_text'=>'SubTab 3'
			, 'handler_tab'=>'open_sub_tab'
			, 'handler_tab_force'=>true
			, 'handler_tab_pars'=>array('open_tab'=>$open_tab)
			, 'use_btn_reload'=>false
			, 'init_open'=>($saved_open_sub_tab === 2 ? true : false)
		);
		$args['children'][] = array(
				'btn_text'=>'SubTab 4'
			, 'handler_tab'=>'open_sub_tab'
			, 'handler_tab_force'=>true
			, 'handler_tab_pars'=>array('open_tab'=>$open_tab)
			, 'use_btn_reload'=>false
			, 'init_open'=>($saved_open_sub_tab === 3 ? true : false)
		);
		$str .= ui::tabs($args);
	$str .= '</div>';
	oj_tab($str);
}

public function open_sub_tab() { 
	$str = '';
	$open_sub_tab = $this->post['_tab'];
	$open_tab = $this->post['open_tab'];
	//=== save to storage
	$open_sub_tabs_rels = array($open_tab=>$open_sub_tab);
	storage::init('api_docs_examples_storage', 'access');
	storage::set_f('open_sub_tab', $open_sub_tabs_rels, 'array:add');
	storage::save();
	//===
	$str .= '<div class="py-4">My SubTab '.($open_sub_tab+1).' content for Tab '.($open_tab+1).'</div>';
	oj_tab($str);
}