1<?php use Fisharebest\Webtrees\I18N; ?> 2<?php use Fisharebest\Webtrees\View; ?> 3 4<h2><?= $title ?></h2> 5 6<p> 7 <?= I18N::translate('Select a block and use the arrows to move it.') ?> 8</p> 9 10<form name="config_setup" method="post" action="<?= e($url_save) ?>" onsubmit="select_options();" > 11 <?= csrf_field() ?> 12 <table border="1" id="change_blocks"> 13 <thead> 14 <tr> 15 <th class="descriptionbox text-center vmiddle" colspan="2"> 16 <label for="main_select"> 17 <?= I18N::translate('Main section blocks') ?> 18 </label> 19 </th> 20 <th class="descriptionbox text-center vmiddle" colspan="3"> 21 <label for="available_select"> 22 <?= I18N::translate('Available blocks') ?> 23 </label> 24 </th> 25 <th class="descriptionbox text-center vmiddle" colspan="2"> 26 <label for="side_select"> 27 <?= I18N::translate('Right section blocks') ?> 28 </label> 29 </th> 30 </tr> 31 </thead> 32 <tbody> 33 <tr> 34 <td class="optionbox text-center vmiddle"> 35 <a href="#" class="btn btn-link" onclick="<?= e('return move_up_block("main_select");') ?>" title="<?= I18N::translate('Move up') ?>"> 36 <?= view('icons/arrow-up') ?> 37 </a> 38 <br> 39 <a href="#" class="btn btn-link" onclick="<?= e('return move_left_right_block("main_select", "side_select");') ?>" title="<?= I18N::translate('Move right') ?>"> 40 <?= view('icons/arrow-right') ?> 41 </a> 42 <br> 43 <a href="#" class="btn btn-link" onclick="<?= e('return move_left_right_block("main_select", "available_select");') ?>" title="<?= I18N::translate('Remove') ?>"> 44 <?= view('icons/delete') ?> 45 </a> 46 <br> 47 <a href="#" class="btn btn-link" onclick="<?= e('return move_down_block("main_select");') ?>" title="<?= I18N::translate('Move down') ?>"> 48 <?= view('icons/arrow-down') ?> 49 </a> 50 </td> 51 <td class="optionbox center"> 52 <select multiple="multiple" id="main_select" name="main[]" size="10" onchange="show_description('main_select');"> 53 <?php foreach ($main_blocks as $block_id => $block) : ?> 54 <option value="<?= $block_id ?>"> 55 <?= $all_blocks[$block->name()]->title() ?> 56 </option> 57 <?php endforeach ?> 58 </select> 59 </td> 60 <td class="optionbox text-center vmiddle"> 61 <a href="#" class="btn btn-link" onclick="<?= e('return move_left_right_block("available_select", "main_select");') ?>" title="<?= I18N::translate('Add') ?>"> 62 <?= view('icons/arrow-left') ?> 63 </a> 64 </td> 65 <td class="optionbox center"> 66 <select multiple id="available_select" size="10" onchange="show_description('available_select');"> 67 <?php foreach ($all_blocks as $block_name => $block) : ?> 68 <option value="<?= $block_name ?>"> 69 <?= $block->title() ?> 70 </option> 71 <?php endforeach ?> 72 </select> 73 </td> 74 <td class="optionbox text-center vmiddle"> 75 <a href="#" class="btn btn-link" onclick="<?= e('return move_left_right_block("available_select", "side_select");') ?>" title="<?= I18N::translate('Add') ?>"> 76 <?= view('icons/arrow-right') ?> 77 </a> 78 </td> 79 <td class="optionbox center"> 80 <select multiple="multiple" id="side_select" name="side[]" size="10" onchange="show_description('side_select');"> 81 <?php foreach ($side_blocks as $block_id => $block) : ?> 82 <option value="<?= $block_id ?>"> 83 <?= $all_blocks[$block->name()]->title() ?> 84 </option> 85 <?php endforeach ?> 86 </select> 87 </td> 88 <td class="optionbox text-center vmiddle"> 89 <a href="#" class="btn btn-link" onclick="<?= e('return move_up_block("side_select");') ?>" title="<?= I18N::translate('Move up') ?>"> 90 <?= view('icons/arrow-up') ?> 91 </a> 92 <br> 93 <a href="#" class="btn btn-link" onclick="<?= e('return move_left_right_block("side_select", "main_select");') ?>" title="<?= I18N::translate('Move left') ?>"> 94 <?= view('icons/arrow-left') ?> 95 </a> 96 <br> 97 <a href="#" class="btn btn-link" onclick="<?= e('return move_left_right_block("side_select", "available_select");') ?>" title="<?= I18N::translate('Remove') ?>"> 98 <?= view('icons/delete') ?> 99 </a> 100 <br> 101 <a href="#" class="btn btn-link" onclick="<?= e('return move_down_block("side_select");') ?>" title="<?= I18N::translate('Move down') ?>"> 102 <?= view('icons/arrow-down') ?> 103 </a> 104 </td> 105 </tr> 106 </tbody> 107 <tfoot> 108 <tr> 109 <td class="descriptionbox wrap" colspan="7"> 110 <div id="instructions"> 111 112 </div> 113 </td> 114 </tr> 115 <tr> 116 <td class="topbottombar" colspan="4"> 117 <?php if ($can_reset) : ?> 118 <label> 119 <input type="checkbox" name="default"> 120 <?= I18N::translate('Restore the default block layout') ?> 121 </label> 122 <?php endif ?> 123 </td> 124 <td class="topbottombar" colspan="3"> 125 <button type="submit" class="btn btn-primary"> 126 <?= view('icons/save') ?> 127 <?= I18N::translate('save') ?> 128 </button> 129 <a class="btn btn-secondary" href="<?= e($url_cancel) ?>"> 130 <?= view('icons/cancel') ?> 131 <?= I18N::translate('cancel') ?> 132 </a> 133 </td> 134 </tr> 135 </tfoot> 136 </table> 137</form> 138 139<?php View::push('javascript') ?> 140<script> 141 /** 142 * This function moves the selected option up in the given select list 143 * 144 * @param section_name the name of the select to move the options 145 */ 146 function move_up_block(section_name) { 147 var section_select = document.getElementById(section_name); 148 if (section_select) { 149 if (section_select.selectedIndex <= 0) { 150 return false; 151 } 152 var index = section_select.selectedIndex; 153 var temp = new Option(section_select.options[index-1].text, section_select.options[index-1].value); 154 section_select.options[index-1] = new Option(section_select.options[index].text, section_select.options[index].value); 155 section_select.options[index] = temp; 156 section_select.selectedIndex = index-1; 157 } 158 159 return false; 160 } 161 162 /** 163 * This function moves the selected option down in the given select list 164 * 165 * @param section_name the name of the select to move the options 166 */ 167 function move_down_block(section_name) { 168 var section_select = document.getElementById(section_name); 169 if (section_select) { 170 if (section_select.selectedIndex < 0) { 171 return false; 172 } 173 if (section_select.selectedIndex >= section_select.length - 1) { 174 return false; 175 } 176 var index = section_select.selectedIndex; 177 var temp = new Option(section_select.options[index + 1].text, section_select.options[index + 1].value); 178 section_select.options[index + 1] = new Option(section_select.options[index].text, section_select.options[index].value); 179 section_select.options[index] = temp; 180 section_select.selectedIndex = index + 1; 181 } 182 183 return false; 184 } 185 186 /** 187 * This function moves the selected option down in the given select list 188 * 189 * @param from_column the name of the select to move the option from 190 * @param to_column the name of the select to remove the option to 191 */ 192 function move_left_right_block(from_column, to_column) { 193 var to_select = document.getElementById(to_column); 194 var from_select = document.getElementById(from_column); 195 if ((to_select) && (from_select)) { 196 var add_option = from_select.options[from_select.selectedIndex]; 197 if (to_column !== "available_select") { 198 to_select.options[to_select.length] = new Option(add_option.text, add_option.value); 199 } 200 if (from_column !== "available_select") { 201 from_select.options[from_select.selectedIndex] = null; //remove from list 202 } 203 } 204 205 return false; 206 } 207 /** 208 * Select Options Javascript function 209 * 210 * This function selects all the options in the multiple select lists 211 */ 212 function select_options() { 213 var section_select = document.getElementById("main_select"); 214 var i; 215 if (section_select) { 216 for (i = 0; i < section_select.length; i++) { 217 section_select.options[i].selected=true; 218 } 219 } 220 section_select = document.getElementById("side_select"); 221 if (section_select) { 222 for (i = 0; i < section_select.length; i++) { 223 section_select.options[i].selected=true; 224 } 225 } 226 return true; 227 } 228 229 /** 230 * Show Block Description Javascript function 231 * 232 * This function shows a description for the selected option 233 * 234 * @param list_name the name of the select to get the option from 235 */ 236 function show_description(list_name) { 237 var list_select = document.getElementById(list_name); 238 var instruct = document.getElementById("instructions"); 239 if (block_descr[list_select.options[list_select.selectedIndex].value] && instruct) { 240 instruct.innerHTML = block_descr[list_select.options[list_select.selectedIndex].value]; 241 } else { 242 instruct.innerHTML = block_descr["advice1"]; 243 } 244 if (list_name === "main_select") { 245 document.getElementById("available_select").selectedIndex = -1; 246 document.getElementById("side_select").selectedIndex = -1; 247 } 248 if (list_name === "available_select") { 249 document.getElementById("main_select").selectedIndex = -1; 250 document.getElementById("side_select").selectedIndex = -1; 251 } 252 if (list_name === "side_select") { 253 document.getElementById("main_select").selectedIndex = -1; 254 document.getElementById("available_select").selectedIndex = -1; 255 } 256 } 257 var block_descr = { advice1: " "}; 258 <?php foreach ($all_blocks as $block_name => $block) : ?> 259 block_descr[<?= json_encode($block_name) ?>] = <?= json_encode($block->description()) ?>; 260 <?php endforeach ?> 261</script> 262<?php View::endpush() ?> 263