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