file theme-settings.php

Provides theme settings for UIkit themes.

File

theme-settings.php
View source
  1. <?php
  2. /**
  3. * @file
  4. * Provides theme settings for UIkit themes.
  5. */
  6. use Drupal\Core\Extension\InfoParser;
  7. use Drupal\uikit\UIkit;
  8. /**
  9. * Implements hook_form_system_theme_settings_alter().
  10. */
  11. function uikit_form_system_theme_settings_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id = NULL) {
  12. // General "alters" use a form id. Settings should not be set here. The only
  13. // thing useful about this is if you need to alter the form for the running
  14. // theme and *not* the theme setting.
  15. // @see http://drupal.org/node/943212
  16. if (isset($form_id)) {
  17. return;
  18. }
  19. // Attach the uikit.admin library from the base theme.
  20. $form['#attached']['library'][] = 'uikit/uikit';
  21. $form['#attached']['library'][] = 'uikit/uikit.admin';
  22. // Get the active theme name.
  23. $build_info = $form_state->getBuildInfo();
  24. $active_theme = \Drupal::theme()->getActiveTheme();
  25. $theme = $active_theme->getName();
  26. $theme_key = $build_info['args'][0] === $theme ? $build_info['args'][0] : $theme;
  27. // Build the markup for the layout demos.
  28. $demo_layout = '<div class="uk-layout-wrapper">';
  29. $demo_layout .= '<div class="uk-layout-container">';
  30. $demo_layout .= '<div class="uk-layout-content"></div>';
  31. $demo_layout .= '<div class="uk-layout-sidebar uk-layout-sidebar-left"></div>';
  32. $demo_layout .= '<div class="uk-layout-sidebar uk-layout-sidebar-right"></div>';
  33. $demo_layout .= '</div></div>';
  34. // Get the sidebar positions for each layout.
  35. $standard_sidebar_pos = UIkit::getThemeSetting('standard_sidebar_positions', $theme_key);
  36. $tablet_sidebar_pos = UIkit::getThemeSetting('tablet_sidebar_positions', $theme_key);
  37. $mobile_sidebar_pos = UIkit::getThemeSetting('mobile_sidebar_positions', $theme_key);
  38. // Build the markup for the local task demos.
  39. $demo_local_tasks = '<ul>';
  40. $demo_local_tasks .= '<li class="uk-active"><a href="#">Item</a></li>';
  41. $demo_local_tasks .= '<li><a href="#">Item</a></li>';
  42. $demo_local_tasks .= '<li><a href="#">Item</a></li>';
  43. $demo_local_tasks .= '<li class="uk-disabled"><a href="#">Disabled</a></li>';
  44. $demo_local_tasks .= '</ul>';
  45. // Set the subnav options for primary and secondary tasks.
  46. $primary_subnav_options = [
  47. 0 => 'Basic subnav',
  48. 'uk-subnav-divider' => 'Subnav divider',
  49. 'uk-subnav-pill' => 'Subnav pill',
  50. 'uk-tab' => 'Tabbed',
  51. ];
  52. $secondary_subnav_options = [
  53. 0 => 'Basic subnav',
  54. 'uk-subnav-divider' => 'Subnav divider',
  55. 'uk-subnav-pill' => 'Subnav pill',
  56. ];
  57. // Set the region style options.
  58. $region_style_options = [
  59. 0 => 'No style',
  60. 'card' => 'Card',
  61. ];
  62. $region_card_style_options = [
  63. 0 => 'No card style',
  64. 'default' => 'Default',
  65. 'primary' => 'Primary',
  66. 'secondary' => 'Secondary',
  67. ];
  68. // Fetch a list of regions for the current theme.
  69. $all_regions = system_region_list($theme, $show = REGIONS_VISIBLE);
  70. // Create markup for UIkit theme information.
  71. $info_parser = new InfoParser();
  72. $uikit_theme_info = $info_parser->parse(drupal_get_path('theme', 'uikit') . '/uikit.info.yml');
  73. $uikit_version = isset($uikit_theme_info['version']) ? $uikit_theme_info['version'] : UIkit::UIKIT_PROJECT_BRANCH;
  74. $uikit_info = '<div class="uk-container uk-margin-top">';
  75. $uikit_info .= '<div class="uk-grid">';
  76. $uikit_info .= '<div class="uk-width-1-1">';
  77. $uikit_info .= '<div class="uk-text-center"><img src="/' . drupal_get_path('theme', 'uikit') . '/images/uikit-small.png" /></div>';
  78. $uikit_info .= '<blockquote class="uk-text-small">';
  79. $uikit_info .= '<p class="uk-text-center">';
  80. $uikit_info .= '<span class="uk-margin-small-right" uk-icon="quote-right"></span> ' . $uikit_theme_info['description'];
  81. $uikit_info .= '</p>';
  82. $uikit_info .= '</blockquote>';
  83. $uikit_info .= '</div>';
  84. $uikit_info .= '<div class="uk-width-1-1 uk-margin">';
  85. $uikit_info .= '<ul class="uk-list uk-width-1-1 uk-text-center" uk-grid>';
  86. $uikit_info .= '<li class="uk-width-1-1@s uk-width-1-3@m"><a href="' . UIkit::UIKIT_LIBRARY . '" target="_blank">UIkit homepage</a></li>';
  87. $uikit_info .= '<li class="uk-width-1-1@s uk-width-1-3@m"><a href="' . UIkit::UIKIT_PROJECT . '" target="_blank">Drupal.org project page</a></li>';
  88. $uikit_info .= '<li class="uk-width-1-1@s uk-width-1-3@m"><a href="' . UIkit::UIKIT_PROJECT_API . '" target="_blank">UIkit API site</a></li>';
  89. $uikit_info .= '<li class="uk-width-1-1@s uk-width-1-3@m"><strong>UIkit library version</strong>: v' . UIkit::UIKIT_LIBRARY_VERSION . '</li>';
  90. $uikit_info .= '<li class="uk-width-1-1@s uk-width-1-3@m"><strong>UIkit Drupal version</strong>: ' . $uikit_version . '</li>';
  91. $uikit_info .= '<li class="uk-width-1-1@s uk-width-1-3@m"><strong>Ported to Drupal by</strong>: <a href="http://richardbuchanan.com" target="_blank">Richard Buchanan</a></li>';
  92. $uikit_info .= '<li class="uk-width-1-1@s uk-margin-top">UIkit <span class="uk-admin-text-medium">&copy;</span> <a href="http://www.yootheme.com/" target="_blank">YOOtheme</a>, with love and caffeine, under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>.</li>';
  93. $uikit_info .= '<li class="uk-width-1-1@s">UIkit for Drupal <span class="uk-admin-text-medium">&copy;</span> <a href="http://richardbuchanan.com" target="_blank">Richard Buchanan</a></li>';
  94. $uikit_info .= '</ul>';
  95. $uikit_info .= '</div></div></div>';
  96. // Create vertical tabs for all UIkit related settings.
  97. $form['uikit'] = [
  98. '#type' => 'vertical_tabs',
  99. '#prefix' => '<h3>' . t('UIkit Settings') . '</h3>',
  100. '#weight' => -10,
  101. ];
  102. // Layout settings.
  103. $form['layout'] = [
  104. '#type' => 'details',
  105. '#title' => t('Layout'),
  106. '#description' => t('Apply our fully responsive fluid grid system and panels, common layout parts like blog articles and comments and useful utility classes.'),
  107. '#group' => 'uikit',
  108. '#attributes' => [
  109. 'class' => [
  110. 'uikit-layout-settings-form',
  111. ],
  112. ],
  113. ];
  114. $form['layout']['layout_advanced'] = [
  115. '#type' => 'checkbox',
  116. '#title' => t('Show advanced layout settings'),
  117. '#default_value' => UIkit::getThemeSetting('layout_advanced', $theme_key),
  118. ];
  119. $form['layout']['page_layout'] = [
  120. '#type' => 'details',
  121. '#title' => t('Page Layout'),
  122. '#description' => t('Change page layout settings.'),
  123. '#attributes' => [
  124. 'open' => 'open',
  125. ],
  126. ];
  127. $form['layout']['page_layout']['standard_layout'] = [
  128. '#type' => 'details',
  129. '#title' => t('Standard Layout'),
  130. '#description' => t('Change layout settings for desktops and large screens.'),
  131. '#collapsible' => TRUE,
  132. '#collapsed' => TRUE,
  133. ];
  134. $form['layout']['page_layout']['standard_layout']['standard_layout_demo'] = [
  135. '#type' => 'container',
  136. ];
  137. $form['layout']['page_layout']['standard_layout']['standard_layout_demo']['#attributes']['class'][] = 'uk-admin-demo';
  138. $form['layout']['page_layout']['standard_layout']['standard_layout_demo']['#attributes']['class'][] = 'uk-layout-' . $standard_sidebar_pos;
  139. $form['layout']['page_layout']['standard_layout']['standard_layout_demo']['standard_demo'] = [
  140. '#markup' => '<div id="standard-layout-demo">' . $demo_layout . '</div>',
  141. ];
  142. $form['layout']['page_layout']['standard_layout']['standard_sidebar_positions'] = [
  143. '#type' => 'radios',
  144. '#title' => t('Sidebar positions'),
  145. '#description' => t('Position the sidebars in the standard layout.'),
  146. '#default_value' => UIkit::getThemeSetting('standard_sidebar_positions', $theme_key),
  147. '#options' => [
  148. 'holy-grail' => t('Holy grail'),
  149. 'sidebars-left' => t('Both sidebars left'),
  150. 'sidebars-right' => t('Both sidebars right'),
  151. ],
  152. ];
  153. $form['layout']['page_layout']['tablet_layout'] = [
  154. '#type' => 'details',
  155. '#title' => t('Tablet Layout'),
  156. '#description' => t('Change layout settings for tablets and medium screens.'),
  157. '#collapsible' => TRUE,
  158. '#collapsed' => TRUE,
  159. ];
  160. $form['layout']['page_layout']['tablet_layout']['tablet_layout_demo'] = [
  161. '#type' => 'container',
  162. ];
  163. $form['layout']['page_layout']['tablet_layout']['tablet_layout_demo']['#attributes']['class'][] = 'uk-admin-demo';
  164. $form['layout']['page_layout']['tablet_layout']['tablet_layout_demo']['#attributes']['class'][] = 'uk-layout-' . $tablet_sidebar_pos;
  165. $form['layout']['page_layout']['tablet_layout']['tablet_layout_demo']['tablet_demo'] = [
  166. '#markup' => '<div id="tablet-layout-demo">' . $demo_layout . '</div>',
  167. ];
  168. $form['layout']['page_layout']['tablet_layout']['tablet_sidebar_positions'] = [
  169. '#type' => 'radios',
  170. '#title' => t('Sidebar positions'),
  171. '#description' => t('Position the sidebars in the tablet layout.'),
  172. '#default_value' => UIkit::getThemeSetting('tablet_sidebar_positions', $theme_key),
  173. '#options' => [
  174. 'holy-grail' => t('Holy grail'),
  175. 'sidebars-left' => t('Both sidebars left'),
  176. 'sidebar-left-stacked' => t('Left sidebar stacked'),
  177. 'sidebars-right' => t('Both sidebars right'),
  178. 'sidebar-right-stacked' => t('Right sidebar stacked'),
  179. ],
  180. ];
  181. $form['layout']['page_layout']['mobile_layout'] = [
  182. '#type' => 'details',
  183. '#title' => t('Mobile Layout'),
  184. '#description' => t('Change layout settings for mobile devices and small screens.'),
  185. '#collapsible' => TRUE,
  186. '#collapsed' => TRUE,
  187. ];
  188. $form['layout']['page_layout']['mobile_layout']['mobile_layout_demo'] = [
  189. '#type' => 'container',
  190. ];
  191. $form['layout']['page_layout']['mobile_layout']['mobile_layout_demo']['#attributes']['class'][] = 'uk-admin-demo';
  192. $form['layout']['page_layout']['mobile_layout']['mobile_layout_demo']['#attributes']['class'][] = 'uk-layout-' . $mobile_sidebar_pos;
  193. $form['layout']['page_layout']['mobile_layout']['mobile_layout_demo']['mobile_demo'] = [
  194. '#markup' => '<div id="mobile-layout-demo">' . $demo_layout . '</div>',
  195. ];
  196. $form['layout']['page_layout']['mobile_layout']['mobile_sidebar_positions'] = [
  197. '#type' => 'radios',
  198. '#title' => t('Sidebar positions'),
  199. '#description' => t('Position the sidebars in the mobile layout.'),
  200. '#default_value' => UIkit::getThemeSetting('mobile_sidebar_positions', $theme_key),
  201. '#options' => [
  202. 'sidebars-stacked' => t('Sidebars stacked'),
  203. 'sidebars-vertical' => t('Sidebars vertical'),
  204. ],
  205. ];
  206. $form['layout']['page_layout']['page_container'] = [
  207. '#type' => 'checkbox',
  208. '#title' => t('Page Container'),
  209. '#description' => t('Add the .uk-container class to the page container to give it a max-width and wrap the main content of your website. For large screens it applies a different max-width.'),
  210. '#default_value' => UIkit::getThemeSetting('page_container', $theme_key),
  211. '#states' => [
  212. 'visible' => [
  213. ':input[name="layout_advanced"]' => ['checked' => TRUE],
  214. ],
  215. ],
  216. ];
  217. $form['layout']['page_layout']['page_margin'] = [
  218. '#type' => 'select',
  219. '#title' => t('Page margin'),
  220. '#description' => t('Select the margin to add to the top and bottom of the page container. This is useful, for example, when using the gradient style with a centered page container and a navbar.'),
  221. '#default_value' => UIkit::getThemeSetting('page_margin', $theme_key),
  222. '#options' => [
  223. 0 => t('No margin'),
  224. 'uk-margin-top' => t('Top margin'),
  225. 'uk-margin-bottom' => t('Bottom margin'),
  226. 'uk-margin' => t('Top and bottom margin'),
  227. ],
  228. '#states' => [
  229. 'visible' => [
  230. ':input[name="layout_advanced"]' => ['checked' => TRUE],
  231. ],
  232. ],
  233. ];
  234. $form['layout']['region_layout'] = [
  235. '#type' => 'details',
  236. '#title' => t('Region Layout'),
  237. '#description' => t('Change region layout settings.<br><br>Use the following links to see an example of each component style.<ul class="links"><li><a href="https://getuikit.com/docs/card" target="_blank">Card</a></li></ul>'),
  238. '#states' => [
  239. 'visible' => [
  240. ':input[name="layout_advanced"]' => ['checked' => TRUE],
  241. ],
  242. ],
  243. ];
  244. // Load all regions to assign separate settings for each region.
  245. foreach ($all_regions as $region_key => $region) {
  246. if ($region_key != 'navbar' && $region_key != 'offcanvas') {
  247. $form['layout']['region_layout'][$region_key] = [
  248. '#type' => 'details',
  249. '#title' => t('@region region', ['@region' => $region]),
  250. '#description' => t('Change the @region region settings.', ['@region' => $region]),
  251. '#collapsible' => TRUE,
  252. '#collapsed' => TRUE,
  253. ];
  254. $form['layout']['region_layout'][$region_key][$region_key . '_style'] = [
  255. '#type' => 'select',
  256. '#title' => t('@title style', ['@title' => $region]),
  257. '#description' => t('Set the style for the @region region. The theme will automatically style the region accordingly.', ['@region' => $region]),
  258. '#default_value' => UIkit::getThemeSetting($region_key . '_style', $theme_key),
  259. '#options' => $region_style_options,
  260. ];
  261. $form['layout']['region_layout'][$region_key][$region_key . '_card_style'] = array(
  262. '#type' => 'select',
  263. '#title' => t('@title card style', ['@title' => $region]),
  264. '#description' => t('Set the card style for the @region region.', ['@region' => $region]),
  265. '#default_value' => UIkit::getThemeSetting($region_key . '_card_style', $theme_key),
  266. '#options' => $region_card_style_options,
  267. '#states' => [
  268. 'visible' => [
  269. ':input[name="' . $region_key . '_style"]' => ['value' => 'card'],
  270. ],
  271. ],
  272. );
  273. }
  274. }
  275. // Navigational settings.
  276. $form['navigations'] = [
  277. '#type' => 'details',
  278. '#title' => t('Navigations'),
  279. '#description' => t('UIkit offers different types of navigations, like navigation bars and side navigations. Use breadcrumbs or a pagination to steer through articles.'),
  280. '#group' => 'uikit',
  281. ];
  282. $form['navigations']['local_tasks'] = [
  283. '#type' => 'details',
  284. '#title' => t('Local tasks'),
  285. '#description' => t('Configure settings for the local tasks menus.'),
  286. '#attributes' => [
  287. 'open' => 'open',
  288. ],
  289. ];
  290. $form['navigations']['local_tasks']['primary_tasks'] = [
  291. '#type' => 'container',
  292. ];
  293. $form['navigations']['local_tasks']['primary_tasks']['primary_tasks_demo'] = [
  294. '#markup' => '<div id="primary-tasks-demo" class="uk-admin-demo">' . $demo_local_tasks . '</div>',
  295. ];
  296. $form['navigations']['local_tasks']['primary_tasks']['primary_tasks_style'] = [
  297. '#type' => 'select',
  298. '#title' => t('Primary tasks style'),
  299. '#description' => t('Select the style to apply to the primary local tasks.'),
  300. '#default_value' => UIkit::getThemeSetting('primary_tasks_style', $theme_key),
  301. '#options' => $primary_subnav_options,
  302. ];
  303. $form['navigations']['local_tasks']['secondary_tasks'] = [
  304. '#type' => 'container',
  305. ];
  306. $form['navigations']['local_tasks']['secondary_tasks']['secondary_tasks_demo'] = [
  307. '#markup' => '<div id="secondary-tasks-demo" class="uk-admin-demo">' . $demo_local_tasks . '</div>',
  308. ];
  309. $form['navigations']['local_tasks']['secondary_tasks']['secondary_tasks_style'] = [
  310. '#type' => 'select',
  311. '#title' => t('Secondary tasks style'),
  312. '#description' => t('Select the style to apply to the secondary local tasks.'),
  313. '#default_value' => UIkit::getThemeSetting('secondary_tasks_style', $theme_key),
  314. '#options' => $secondary_subnav_options,
  315. ];
  316. $form['navigations']['breadcrumb'] = [
  317. '#type' => 'details',
  318. '#title' => t('Breadcrumbs'),
  319. '#description' => t('Configure settings for breadcrumb navigation.'),
  320. '#attributes' => [
  321. 'open' => 'open',
  322. ],
  323. ];
  324. $form['navigations']['breadcrumb']['display_breadcrumbs'] = [
  325. '#type' => 'checkbox',
  326. '#title' => t('Display breadcrumbs'),
  327. '#description' => t('Check this box to display the breadcrumb.'),
  328. '#default_value' => UIkit::getThemeSetting('display_breadcrumbs', $theme_key),
  329. ];
  330. $form['navigations']['breadcrumb']['breakcrumbs_home_link'] = [
  331. '#type' => 'checkbox',
  332. '#title' => t('Display home link in breadcrumbs'),
  333. '#description' => t('Check this box to display the home link in breadcrumb trail.'),
  334. '#default_value' => UIkit::getThemeSetting('breakcrumbs_home_link', $theme_key),
  335. '#states' => [
  336. 'disabled' => [
  337. ':input[name="display_breadcrumbs"]' => ['checked' => FALSE],
  338. ],
  339. ],
  340. ];
  341. $form['navigations']['breadcrumb']['breakcrumbs_current_page'] = [
  342. '#type' => 'checkbox',
  343. '#title' => t('Display current page title in breadcrumbs'),
  344. '#description' => t('Check this box to display the current page title in breadcrumb trail.'),
  345. '#default_value' => UIkit::getThemeSetting('breakcrumbs_current_page', $theme_key),
  346. '#states' => [
  347. 'disabled' => [
  348. ':input[name="display_breadcrumbs"]' => ['checked' => FALSE],
  349. ],
  350. ],
  351. ];
  352. // UIkit theme information.
  353. $form['uikit_details'] = [
  354. '#type' => 'details',
  355. '#title' => t('About UIkit'),
  356. '#group' => 'uikit',
  357. ];
  358. $form['uikit_details']['info'] = [
  359. '#markup' => $uikit_info,
  360. ];
  361. // Get logo from theme settings to show a preview.
  362. $logo = UIkit::getThemeSetting('logo');
  363. $render_logo = [
  364. '#theme' => 'image',
  365. '#uri' => $logo['url'],
  366. '#prefix' => '<div id="logo-preview">',
  367. '#suffix' => '</div>',
  368. ];
  369. $form['logo']['logo_preview'] = [
  370. '#type' => 'item',
  371. '#title' => t('Logo preview'),
  372. '#markup' => render($render_logo),
  373. '#description' => t('Preview of image to display as the site logo. The preview will be updated when the configuration is saved.'),
  374. ];
  375. // Get favicon from theme settings to show a preview.
  376. $favicon = UIkit::getThemeSetting('favicon');
  377. $render_favicon = [
  378. '#theme' => 'image',
  379. '#uri' => $favicon['url'],
  380. '#prefix' => '<div id="favicon-preview">',
  381. '#suffix' => '</div>',
  382. ];
  383. $form['favicon']['favicon_preview'] = [
  384. '#type' => 'item',
  385. '#title' => t('Favicon preview'),
  386. '#markup' => render($render_favicon),
  387. '#description' => t('Preview of favicon displayed in the address bar and bookmarks of most browsers. The preview will be updated when the configuration is saved.'),
  388. ];
  389. // Close the logo and favicon details elements by default.
  390. $form['logo']['#open'] = FALSE;
  391. $form['favicon']['#open'] = FALSE;
  392. }

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Log in