praiadeseselle/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module

<?php namespace ProcessWire;

/**
 * AdminThemeUikit
 * 
 * @property bool $isSuperuser Is current user a superuser?
 * @property bool $isEditor Does current user have page-edit permission?
 * @property bool $isLoggedIn Is current user logged in?
 * @property bool $useOffset Use offset/margin for all Inputfields?
 * @property array $noBorderTypes Inputfield class names that should always use the noBorder option (when 100% width).
 * @property array $cardTypes Inputfield class names that should always use the card option.
 * @property array $offsetTypes Inputfield class names that should always use the offset option.
 * @property string $logoURL URL to custom logo, relative to PW installation root. 
 * @property string $cssURL URL to custom CSS file, relative to PW installation root. 
 * @property string $layout Layout type (blank=default, sidenav=multi-pane, sidenav-tree=left-tree, sidenav-tree-alt=right-tree)
 * @property int $logoAction Logo click action (0=admin root page list, 1=offcanvas nav)
 * @property string $userLabel Text containing user {vars} to use for user label in masthead (default="{Name}")
 * @property int $maxWidth Maximum layout width in pixels, or 0 for no max (default=1600).
 * @property bool|int $groupNotices Whether or not notices should be grouped by type
 * @property string $inputSize Size for input/select elements. One of "s" for small, "m" for medium (default), or "l" for large. 
 * @property bool|int $ukGrid When true, use uk-width classes for Inputfields (rather than CSS percentages). 
 * @property int $toggleBehavior (0=Standard, 1=Consistent)
 * @property string $configPhpHash Hash used internally to detect changes to $config->AdminThemeUikit settings.
 * @property int $cssVersion Current version number of core CSS/LESS files
 * 
 * @method string renderBreadcrumbs()
 * @method string getUikitCSS()
 * 
 * 
 */
class AdminThemeUikit extends AdminThemeFramework implements Module, ConfigurableModule {

	public static function getModuleInfo() {
		return array(
			'title' => 'Uikit',
			'version' => 33,
			'summary' => 'Uikit v3 admin theme',
			'autoload' => 'template=admin', 
		); 
	}

	/**
	 * Development mode, to be used when developing this module’s code
	 * 
	 * Makes it use runtime/temporary compiled CSS files rather than the final ones. 
	 *
	 */
	const dev = false;

	/**
	 * Set to true when upgrading Uikit version
	 * 
	 */
	const upgrade = false;

	/**
	 * Required CSS/LESS files version 
	 * 
	 * Increment on core less file changes that will also require a recompile of /site/assets/admin.css
	 * 
	 */
	const requireCssVersion = 1;

	/**
	 * Default logo image file (relative to this dir)
	 * 
	 */
	const logo = 'uikit-pw/images/pw-mark.png';

	/**
	 * sidenavType: primary navigation on left sidebar
	 * 
	 */
	const sidenavTypePrimary = 0;

	/**
	 * sidenavType: tree navigation on left sidebar
	 * 
	 */
	const sidenavTypeTree = 1;

	/**
	 * Construct and establish default module config settings
	 * 
	 */
	public function __construct() {
		
		parent::__construct();
		
		$this->set('useOffset', false);
		$this->set('cardTypes', array());
		$this->set('offsetTypes', array());
		$this->set('logoURL', '');
		$this->set('cssURL', '');
		$this->set('layout', '');
		$this->set('noBorderTypes', array()); // 'InputfieldCKEditor' is a good one for this
		$this->set('logoAction', 0); 
		$this->set('toggleBehavior', 0);
		$this->set('userLabel', '{Name}'); 
		$this->set('userAvatar', 'icon.user-circle'); 
		$this->set('maxWidth', 1600); 
		$this->set('groupNotices', true);
		$this->set('inputSize', 'm'); // m=medium (default), s=small, l=large
		$this->set('ukGrid', false); 
		$this->set('configPhpHash', '');
		$this->set('cssVersion', 0);
		$this->setClasses(array(
			'input' => 'uk-input',
			'input-small' => 'uk-input uk-form-small',
			'input-checkbox' => 'uk-checkbox',
			'input-radio' => 'uk-radio',
			'input-password' => 'uk-input uk-form-width-medium',
			'select' => 'uk-select',
			'select-asm' => 'uk-select uk-form-small',
			'select-small' => 'uk-select uk-form-small',
			'textarea' => 'uk-textarea',
			'table' => 'uk-table uk-table-divider uk-table-justify uk-table-small',
			'dl' => 'uk-description-list uk-description-list-divider',
		));
		
	}
	
	public function wired() {
		parent::wired();
		$this->addHookAfter('InputfieldSelector::ajaxReady', $this, 'hookInputfieldSelectorAjax');
	}
	
	/**
	 * Initialize and attach hooks
	 * 
	 */
	public function init() {
		parent::init();

		// if this is not the current admin theme, exit now so no hooks are attached
		if(!$this->isCurrent()) return;
	
		/** @var Page $page */
		$page = $this->wire('page');
		/** @var Modules $modules */
		$modules = $this->wire('modules');
		/** @var Modules $modules */
		$session = $this->wire('session');
		
		$sidenav = strpos($this->layout, 'sidenav') === 0;

		// disable sidebar layout if SystemNotifications is active
		if($sidenav && $modules->isInstalled('SystemNotifications')) {
			/** @var SystemNotifications $systemNotifications */
			$systemNotifications = $modules->get('SystemNotifications');
			if(!$systemNotifications->disabled) {
				$this->layout = '';
				$sidenav = false;
			}
		}
		
		if(!$page || $page->template != 'admin') {
			// front-end
			if($sidenav) {
				// ensure that page edit links on front-end load the sidenav-init 
				$session->setFor('Page', 'appendEditUrl', "&layout=sidenav-init");
			}
			return;
		}
	
		$inputSize = $this->get('inputSize');
		if($inputSize && $inputSize != 'm') {
			$inputClass = $inputSize === 'l' ? 'uk-form-large' : 'uk-form-small';
			foreach(array('input', 'select', 'textarea') as $name) {
				$this->addClass($name, $inputClass); 
			}
		}
		
		if(!$this->ukGrid) {
			$this->addClass('body', 'AdminThemeUikitNoGrid'); 
		}
		
		if($this->className() !== 'AdminThemeUikit') {
			$this->addBodyClass('AdminThemeUikit');
		}
		
		$session->removeFor('Page', 'appendEditUrl');
		/** @var JqueryUI $jqueryUI */
		$jqueryUI = $modules->get('JqueryUI');
		$jqueryUI->use('panel');

		// add rendering hooks
		$this->addHookBefore('Inputfield::render', $this, 'hookBeforeRenderInputfield');
		$this->addHookBefore('Inputfield::renderValue', $this, 'hookBeforeRenderInputfield');
		$this->addHookAfter('Inputfield::getConfigInputfields', $this, 'hookAfterInputfieldGetConfigInputfields');
		$this->addHookAfter('Inputfield::getConfigAllowContext', $this, 'hookAfterInputfieldGetConfigAllowContext');
		$this->addHookAfter('MarkupAdminDataTable::render', $this, 'hookAfterTableRender');
	
		// hooks and settings specific to sidebar layouts
		if($sidenav) {
			$this->addHookAfter('ProcessLogin::afterLoginURL', $this, 'hookAfterLoginURL');
			if(strpos($this->layout, 'sidenav-tree') === 0) {
				// page-edit breadcrumbs go to page editor when page tree is always in sidebar
				$this->wire('config')->pageEdit('editCrumbs', true);
			}
		}
		
		// add cache clearing hooks
		$this->wire('pages')->addHookAfter('saved', $this, 'hookClearCaches');
		$modules->addHookAfter('refresh', $this, 'hookClearCaches');
	}
	
	/**
	 * Render an extra markup region
	 *
	 * @param string $for
	 * @return mixed|string
	 *
	 */
	public function renderExtraMarkup($for) {
		$out = parent::renderExtraMarkup($for);
		if($for === 'notices') {
		}
		return $out;
	}

	/**
	 * Test all notice types
	 * 
	 * @return bool
	 *
	 */
	public function testNotices() {
		if(parent::testNotices()) {
			$v = $this->wire('input')->get('test_notices');
			if($v === 'group-off') $this->groupNotices = false; 
			if($v === 'group-on') $this->groupNotices = true; 
			return true;
		}
		return false;
	}

	/**
	 * Get Uikit uk-width-* class for given column width
	 * 
	 * @param int $columnWidth
	 * @param array $widths
	 * @return string
	 * 
	 */
	protected function getUkWidthClass($columnWidth, array $widths) {
		
		static $minColumnWidth = null;
		
		$ukWidthClass = '1-1';
		
		if($minColumnWidth === null) {
			$widthKeys = array_keys($widths);
			sort($widthKeys, SORT_NATURAL);
			$minColumnWidth = (int) reset($widthKeys);
		}

		if($columnWidth < 10) {
			// use uk-width-1-1
		} else if($columnWidth && $columnWidth < 100) {
			if($columnWidth < $minColumnWidth) $columnWidth = $minColumnWidth;
			// determine column width class
			foreach($widths as $pct => $uk) {
				$pct = (int) $pct;
				if($columnWidth >= $pct) {
					$ukWidthClass = $uk;
					break;
				}
			}
		}
		
		if($ukWidthClass === '1-1') {
			return "uk-width-1-1";
		} else {
			return "uk-width-$ukWidthClass@m";
		}
	}
	
	/*******************************************************************************************
	 * HOOKS
	 *
	 */

	/**
	 * Hook called before each Inputfield::render 
	 * 
	 * This updates the Inputfield classes and settings for Uikit. 
	 * 
	 * - themeBorder: none, hide, card, line
	 * - themeOffset: s, m, l
	 * - themeInputSize: s, m, l
	 * - themeInputWidth: xs, s, m, l, f
	 * - themeColor: primary, secondary, warning, danger, success, highlight, none
	 * - themeBlank: no input borders, true or false
	 * 
	 * @param HookEvent $event
	 * 
	 */
	public function hookBeforeRenderInputfield(HookEvent $event) {

		/** @var Inputfield $inputfield */
		$inputfield = $event->object;
		$class = $inputfield->className();
		$formSettings = $event->wire('config')->get('InputfieldForm');
		$widths = $formSettings['ukGridWidths'];
		$columnWidth = (int) $inputfield->getSetting('columnWidth');
		$field = $inputfield->hasField;
		$isFieldset = $inputfield instanceof InputfieldFieldset;
		$isMarkup = $inputfield instanceof InputfieldMarkup; 
		$isWrapper = $inputfield instanceof InputfieldWrapper && !$isFieldset && !$isMarkup;
		$ukWidthClass = 'uk-width-1-1';
		$globalInputSize = $this->get('inputSize');
		$ukGrid = $this->get('ukGrid');
		$themeColor = '';
		$themeBorder = '';
		$themeOffset = '';
		$themeInputSize = '';
		$themeInputWidth = '';
		$themeBlank = false;
		$wrapClasses = array();
		$inputClasses = array();
		$removeInputClasses = array();
		
		if($inputfield instanceof InputfieldForm) {
			if($globalInputSize == 's') {
				$inputfield->addClass('InputfieldFormSmallInputs');	
			} else if($globalInputSize == 'l') {
				$inputfield->addClass('InputfieldFormLargeInputs');	
			}
			return;
		} else if($inputfield instanceof InputfieldSubmit) {
			// button
			$inputfield->addClass('uk-width-auto uk-margin-top', 'wrapClass');
			return; // no further settings needed for button
		}

		if($ukGrid) {
			$ukWidthClass = $this->getUkWidthClass($columnWidth, $widths); 
			if($ukWidthClass) $wrapClasses[] = $ukWidthClass;
		}
		
		if($isWrapper) {
			if($ukWidthClass != 'uk-width-1-1') $inputfield->addClass($ukWidthClass, 'wrapClass');
			return;
		} else if($inputfield instanceof InputfieldTextarea) {
			$inputClasses[] = $this->getClass('textarea'); 
		} else if($inputfield instanceof InputfieldPassword) {
			$inputClasses[] = $this->getClass('input-password');
		} else if($inputfield instanceof InputfieldText) {
			$inputClasses[] = $this->getClass('input');
		} else if($inputfield instanceof InputfieldInteger) {
			$inputClasses[] = $this->getClass('input');
		} else if($inputfield instanceof InputfieldDatetime) {
			$inputClasses[] = $this->getClass('input');
		} else if($inputfield instanceof InputfieldCheckboxes || $inputfield instanceof InputfieldCheckbox) {
			$inputClasses[] = $this->getClass('input-checkbox');
			$inputfield->addClass('uk-form-controls-text', 'contentClass');
		} else if($inputfield instanceof InputfieldRadios) {
			$inputClasses[] = $this->getClass('input-radio');
			$inputfield->addClass('uk-form-controls-text', 'contentClass');
		} else if($inputfield instanceof InputfieldAsmSelect) {
			$inputClasses[] = $this->getClass('select-asm');
		} else if($inputfield instanceof InputfieldSelect && !$inputfield instanceof InputfieldHasArrayValue) {
			$inputClasses[] = $this->getClass('select');
		} else if($inputfield instanceof InputfieldFile) {
			$themeColor = 'secondary';
		}
		
		if($field) {
			// pull optional uikit settings from Field object
			$themeBorder = $field->get('themeBorder');
			$themeOffset = $field->get('themeOffset');
			$themeInputSize = $field->get('themeInputSize');
			$themeInputWidth = $field->get('themeInputWidth');
			$themeColor = $field->get('themeColor') ? $field->get('themeColor') : $themeColor;
			$themeBlank = $field->get('themeBlank');
		}
		
		// determine custom settings which may be defined with Inputfield
		if(!$themeBorder) $themeBorder = $inputfield->getSetting('themeBorder');
		if(!$themeOffset) $themeOffset = $inputfield->getSetting('themeOffset'); // || in_array($class, $this->offsetTypes);
		if(!$themeColor) $themeColor = $inputfield->getSetting('themeColor');
		if(!$themeInputSize) $themeInputSize = $inputfield->getSetting('themeInputSize');
		if(!$themeInputWidth) $themeInputWidth = $inputfield->getSetting('themeInputWidth');
		if(!$themeBlank) $themeBlank = $inputfield->getSetting('themeBlank');
		
		if(!$themeBorder) {
			if($formSettings['useBorders'] === false || in_array($class, $this->noBorderTypes)) {
				$themeBorder = (!$columnWidth || $columnWidth == 100) ? 'none' : 'hide';
			} else if(in_array($class, $this->cardTypes)) {
				$themeBorder = 'card';
			} else {
				$themeBorder = 'line';
			}
		}
		
		if($themeInputSize && $globalInputSize != $themeInputSize) {
			if($globalInputSize === 's') {
				$removeInputClasses[] = 'uk-form-small';
			} else if($globalInputSize === 'l') {
				$removeInputClasses[] = 'uk-form-large';
			}
			if($themeInputSize === 'm') {
				$inputClasses[] = 'uk-form-medium';
			} else if($themeInputSize === 's') {
				$inputClasses[] = 'uk-form-small';
			} else if($themeInputSize === 'l') {
				$inputClasses[] = 'uk-form-large';
			}
		}
	
		if($themeInputWidth) {
			$inputWidthClasses = array(
				'xs' => 'uk-form-width-xsmall',
				's' => 'uk-form-width-small',
				'm' => 'uk-form-width-medium',
				'l' => 'uk-form-width-large',
				'f' => 'InputfieldMaxWidth',
			);
			$inputfield->removeClass($inputWidthClasses);
			if(isset($inputWidthClasses[$themeInputWidth])) {
				$inputClasses[] = $inputWidthClasses[$themeInputWidth];
				if($themeInputWidth != 'f') $inputClasses[] = 'InputfieldSetWidth';
			}
		}
		
		if($themeBlank) {
			$inputClasses[] = 'uk-form-blank';
		}

		if($themeColor) {
			$wrapClasses[] = 'InputfieldIsColor';
		}
		
		switch($themeColor) {
			case 'primary': $wrapClasses[] = 'InputfieldIsPrimary'; break;
			case 'secondary': $wrapClasses[] = 'InputfieldIsSecondary'; break;
			case 'warning': $wrapClasses[] = 'InputfieldIsWarning'; break;
			case 'danger': $wrapClasses[] = 'InputfieldIsError'; break;
			case 'success': $wrapClasses[] = 'InputfieldIsSuccess'; break;
			case 'highlight': $wrapClasses[] = 'InputfieldIsHighlight'; break;
			case 'none': break;
		}
		
		switch($themeBorder) {
			case 'none': $wrapClasses[] = 'InputfieldNoBorder'; break;
			case 'hide': $wrapClasses[] = 'InputfieldHideBorder'; break;
			case 'card': $wrapClasses[] = 'uk-card uk-card-default'; break;
		}
		
		if($themeOffset && $themeOffset !== 'none') {
			$wrapClasses[] = 'InputfieldIsOffset';
			if($themeOffset === 's') {
				$wrapClasses[] = 'InputfieldIsOffsetSm';
			} else if($themeOffset === 'l') {
				$wrapClasses[] = 'InputfieldIsOffsetLg';
			}
		}
		
		if(count($inputClasses)) {
			$inputfield->addClass(implode(' ', $inputClasses));
		}
		
		if(count($removeInputClasses)) {
			$inputfield->removeClass($removeInputClasses);
		}
		
		if(count($wrapClasses)) {
			$inputfield->addClass(implode(' ', $wrapClasses), 'wrapClass');
		}
		
	}

	/**
	 * Hook after Inputfield::getConfigInputfields() to add theme-specific configuration settings
	 * 
	 * @param HookEvent $event
	 * 
	 */
	public function hookAfterInputfieldGetConfigInputfields(HookEvent $event) {
		
		/** @var Inputfield $inputfield */
		$inputfield = $event->object;
		if($inputfield instanceof InputfieldWrapper) return;
		/** @var InputfieldWrapper $inputfields */
		$inputfields = $event->return;
		if(!$inputfields instanceof InputfieldWrapper) return;
		include_once(dirname(__FILE__) . '/config.php'); 
		$configHelper = new AdminThemeUikitConfigHelper($this);
		$configHelper->configInputfield($inputfield, $inputfields); 
	}

	/**
	 * Get fields allowed for field/template context configuration
	 * 
	 * @param HookEvent $event
	 * 
	 */
	public function hookAfterInputfieldGetConfigAllowContext(HookEvent $event) {
		$names = $event->return;
		$names[] = '_adminTheme';
		$names[] = 'themeOffset';
		$names[] = 'themeBorder';
		$names[] = 'themeColor';
		$names[] = 'themeInputSize';
		$names[] = 'themeInputWidth';
		$names[] = 'themeBlank';
		$event->return = $names;
	}

	/**
	 * Hook after MarkupAdminDataTable::render
	 * 
	 * This is primarily to add support for Uikit horizontal scrolling responsive tables,
	 * which is used instead of the default MarkupAdminDataTable responsive table.
	 * 
	 * @param HookEvent $event
	 * 
	 */
	public function hookAfterTableRender(HookEvent $event) {
		/** @var MarkupAdminDataTable $table */
		$table = $event->object;
		$classes = array();
		if($table->responsive) {
			$classes[] = 'pw-table-responsive';
			if(!wireInstanceOf($this->wire()->process, array('ProcessPageLister', 'ProcessUser'))) {
				$classes[] = 'uk-overflow-auto';
			}
		}
		if($table->sortable) {
			$classes[] = 'pw-table-sortable';
		}
		if($table->resizable) {
			$classes[] = 'pw-table-resizable'; 
		}	
		if(count($classes)) {
			$class = implode(' ', $classes);
			$event->return = "<div class='$class'>$event->return</div>";
		}
	}
	
	/**
	 * Event called when a page is saved or modules refreshed to clear caches
	 *
	 * @param HookEvent $event
	 *
	 */
	public function hookClearCaches(HookEvent $event) {

		/** @var Page|User|null $page */
		$page = $event->arguments(0); 
		/** @var array $changes */
		$changes = $event->arguments(1);
		/** @var User $user */
		$user = $this->wire('user'); 
		
		if($page !== null && !($page instanceof Page)) return;
		if(!is_array($changes)) $changes = array();
		
		if($page === null || $page->template == 'admin' || ($page->id === $user->id && in_array('language', $changes))) {
			/** @var Session $session */
			$session = $this->wire('session'); 
			$session->removeFor($this, 'prnav');
			$session->removeFor($this, 'sidenav');
			$session->message("Cleared the admin theme navigation cache (primary nav)", Notice::debug);
		}
	}

	/**
	 * Hook to ProcessLogin::afterLoginURL()
	 * 
	 * @param HookEvent $event
	 * 
	 */
	public function hookAfterLoginURL(HookEvent $event) {
		$layout = $this->layout;
		if(!$layout) return;
		$url = $event->return;
		$url .= (strpos($url, '?') !== false ? '&' : '?') . "layout=$this->layout-init";
		$event->return = $url;
	}

	
	/*******************************************************************************************
	 * MARKUP RENDERING METHODS
	 *
	 */

	/**
	 * Render a list of breadcrumbs (list items), excluding the containing <ul>
	 *
	 * @return string
	 *
	 */
	public function ___renderBreadcrumbs() {

		if(!$this->isLoggedIn || $this->isModal) return '';
		$process = $this->wire('page')->process;
		if($process == 'ProcessPageList') return '';
		$breadcrumbs = $this->wire('breadcrumbs');
		$out = '';

		// don't show breadcrumbs if only one of them (subjective)
		if(count($breadcrumbs) < 2 && $process != 'ProcessPageEdit') return '';

		if(strpos($this->layout, 'sidenav') === false) {
			$out = "<li>" . $this->renderQuickTreeLink() . "</li>";
		}

		foreach($breadcrumbs as $breadcrumb) {
			$title = $breadcrumb->get('titleMarkup');
			if(!$title) $title = $this->wire('sanitizer')->entities1($this->_($breadcrumb->title));
			$out .= "<li><a href='$breadcrumb->url'>$title</a></li>";
		}

		if($out) $out = "<ul class='uk-breadcrumb'>$out</ul>";

		return $out;
	}

	/**
	 * Render the populated “Add New” head button, or blank when not applicable
	 *
	 * @return string
	 *
	 */
	public function renderAddNewButton() {

		$items = array();

		foreach($this->getAddNewActions() as $item) {
			$icon = $this->renderNavIcon($item['icon']);
			$items[] = "<li><a href='$item[url]'>$icon$item[label]</a></li>";
		}

		if(!count($items)) return '';

		$out = implode('', $items);
		$label = $this->getAddNewLabel();
		$icon = $this->renderIcon('angle-down');

		$out =
			"<button class='ui-button pw-dropdown-toggle'>$label $icon</button>" .
			"<ul class='pw-dropdown-menu' data-at='right bottom+1'>$out</ul>";

		return $out;
	}

	/**
	 * Render runtime notices div#notices
	 *
	 * @param Notices|bool $notices
	 * @param array $options See defaults in method
	 * @return string|array
	 *
	 */
	public function renderNotices($notices, array $options = array()) {

		$defaults = array(
			'groupByType' => $this->groupNotices ? true : false, 
			'messageClass' => 'NoticeMessage uk-alert uk-alert-primary', // class for messages
			'messageIcon' => 'check-square', // default icon to show with notices
			'warningClass' => 'NoticeWarning uk-alert uk-alert-warning', // class for warnings
			'warningIcon' => 'exclamation-circle', // icon for warnings
			'errorClass' => 'NoticeError uk-alert uk-alert-danger', // class for errors
			'errorIcon' => 'exclamation-triangle', // icon for errors
			'debugClass' => 'NoticeDebug uk-alert', // class for debug items (appended)
			'debugIcon' => 'bug', // icon for debug notices
			'closeClass' => 'pw-notice-remove notice-remove', // class for close notices link <a>
			'closeIcon' => 'times', // icon for close notices link
			'listMarkup' => "<ul class='pw-notices' id='notices'>{out}</ul><!--/notices-->",
			'itemMarkup' =>
				"<li class='{class}'>" .
					"<div class='pw-container uk-container uk-container-expand'>{remove}{icon}{text}</div>" .
				"</li>"
		);

		$options = array_merge($defaults, $options);
		
		return parent::renderNotices($notices, $options);
	}

	/**
	 * Render a single top navigation item for the given page
	 *
	 * This function designed primarily to be called by the renderPrimaryNavItems() function.
	 *
	 * @param array $item
	 * @return string
	 *
	 */
	protected function renderPrimaryNavItem(array $item) {

		$title = $item['title'];
		$out = "<li class='page-$item[id]-'>";

		if(!count($item['children'])) {
			$out .= "<a href='$item[url]'>$title</a></li>";
			return $out;
		}

		$out .=
			"<a href='$item[url]' " .
				"id='prnav-page-$item[id]' " .
				"data-from='prnav-page-$item[parent_id]' " .
				"class='pw-dropdown-toggle'>" .
				"$title</a>";

		$my = 'left-1 top';
		if(in_array($item['name'], array('access', 'page', 'module'))) $my = 'left top';
		$out .=
			"<ul class='pw-dropdown-menu prnav' data-my='$my' data-at='left bottom'>" .
				$this->renderPrimaryNavItemChildren($item['children']) .
			"</ul>" .
			"</li>";

		return $out;
	}

	/**
	 * Renders <li> items navigation from given nav array
	 *
	 * @param array $items
	 * @return string
	 *
	 */
	protected function renderPrimaryNavItemChildren(array $items) {
		$out = '';

		foreach($items as $item) {

			$icon = empty($item['icon']) ? '' : $this->renderNavIcon($item['icon']);
			$title = $item['title'];
			$out .= "<li class='page-$item[id]-'>";

			if(!empty($item['children'])) {
				$out .=
					"<a class='pw-has-items' data-from='prnav-page-$item[parent_id]' href='$item[url]'>$icon$title</a>" .
					"<ul>" . $this->renderPrimaryNavItemChildren($item['children']) . "</ul>";

			} else if(!empty($item['navJSON'])) {
				$item['navJSON'] = $this->wire('sanitizer')->entities($item['navJSON']); 
				$out .=
					"<a class='pw-has-items pw-has-ajax-items' " .
						"data-from='prnav-page-$item[parent_id]' " .
						"data-json='$item[navJSON]' " .
						"href='$item[url]'>$icon$title" .
					"</a>" .
					"<ul></ul>";
			} else {
				$out .= "<a href='$item[url]'>$icon$title</a>";
			}
		}
		$out .= "</li>";

		return $out;
	}

	/**
	 * Render all top navigation items, ready to populate in ul#prnav
	 *
	 * @return string
	 *
	 */
	public function renderPrimaryNavItems() {

		$cache = self::dev ? '' : $this->wire('session')->getFor($this, 'prnav');
		if($cache) {
			$this->markCurrentNavItems($cache);
			return $cache;
		}

		$out = '';
		$items = $this->getPrimaryNavArray();

		foreach($items as $item) {
			$out .= $this->renderPrimaryNavItem($item);
		}

		if(!self::dev) $this->wire('session')->setFor($this, 'prnav', $out);
		$this->markCurrentNavItems($out);

		return $out;
	}

	/**
	 * Render sidebar navigation that uses uk-nav
	 *
	 * The contents is the same as the Primary nav, except that output is prepared for sidebar.
	 * This method uses a session-cached version. To clear the cache, logout then log back in.
	 *
	 * @return string
	 *
	 */
	public function renderSidebarNavItems() {

		// see if we can get it from the cache
		$out = self::dev ? '' : $this->wire('session')->getFor($this, 'sidenav');
		
		if(empty($out)) {
			$out = $this->renderSidebarNavCache();
			$this->wire('session')->setFor($this, 'sidenav', $out);
		}
		
		$out = str_replace('<!--pw-user-nav-label-->', $this->renderUserNavLabel(), $out);
		$this->markCurrentNavItems($out);

		return $out;
	}

	/**
	 * Re-renders the sidebar nav to be cached
	 * 
	 * @return string
	 * 
	 */
	protected function renderSidebarNavCache() {
		
		$out = '';
		$items = $this->getPrimaryNavArray();
		$ulAttrs = "class='uk-nav-sub uk-nav-default uk-nav-parent-icon' data-uk-nav='animation: false; multiple: true;'";

		foreach($items as $item) {

			$class = "page-$item[id]-";
			$subnav = '';

			foreach($item['children'] as $child) {
				$icon = $child['icon'] ? $this->renderNavIcon($child['icon']) : '';
				$childClass = "page-$child[id]-";
				$childAttr = "";
				$childNav = '';
				if(count($child['children'])) {
					$childClass .= ' uk-parent';
					$childNavList = $this->renderPrimaryNavItemChildren($child['children']);
					$childIcon = $this->renderNavIcon('arrow-circle-right');
					$childNav =
						"<ul $ulAttrs>" .
							"<li class='pw-nav-dup'><a href='$child[url]'>$childIcon$child[title]</a></li>" .
							$childNavList .
						"</ul>";
				} else if($child['navJSON']) {
					$child['navJSON'] = $this->wire('sanitizer')->entities($child['navJSON']); 
					$childClass .= ' uk-parent';
					$childAttr = " class='pw-has-items pw-has-ajax-items' data-json='$child[navJSON]'";
					$childNav = "<ul $ulAttrs></ul>";
				}
				$subnav .= "<li class='$childClass'><a$childAttr href='$child[url]'>$icon$child[title]</a>";
				$subnav .= $childNav . "</li>";
			}

			if($subnav) {
				$icon = $this->renderNavIcon($item['icon']);
				$class .= " uk-parent";
				$subnav =
					"<ul $ulAttrs>" .
						"<li class='pw-nav-dup'><a href='$item[url]'>$icon$item[title]</a></li>" .
						$subnav .
					"</ul>";
			}

			$out .=
				"<li class='$class'><a href='$item[url]' id='sidenav-page-$item[id]'>$item[title]</a>" .
					$subnav .
				"</li>";
		}
		
		// render user nav
		$out .=
			"<li class='uk-parent'>" .
				"<a href='#'><!--pw-user-nav-label--></a>" . 
				"<ul $ulAttrs>" . $this->renderUserNavItems() . "</ul>" .
			"</li>";

		return $out;
	}
	
	/**
	 * Identify current items in the primary nav and add appropriate classes to them
	 *
	 * This presumes that navigation items in given $out markup use "page-[id]-" classes,
	 * which will be updated consistent with the current $page.
	 *
	 * @param $out
	 *
	 */
	protected function markCurrentNavItems(&$out) {
		$page = $this->wire('page');
		foreach($page->parents()->and($page) as $p) {
			$out = str_replace("page-$p-", "page-$p- uk-active", $out);
		}
	}

	/**
	 * Render label for user masthead dropdown nav item
	 * 
	 * @return string
	 * 
	 */
	public function renderUserNavLabel() {
		/** @var User $user */
		$user = $this->wire('user');
		$userLabel = $this->get('userLabel');
		$userAvatar = $this->get('userAvatar');
		$defaultIcon = 'user-circle';
		
		if(strpos($userLabel, '{') !== false) {
			if(strpos($userLabel, '{Name}') !== false) {
				$userLabel = str_replace('{Name}', ucfirst($user->name), $userLabel);
			} else if(strpos($userLabel, '{name}') !== false) {
				$userLabel = str_replace('{name}', $user->name, $userLabel);
			}
			if(strpos($userLabel, '{') !== false) {
				$userLabel = $user->getText($userLabel, true, true);
			}
		} else {
			$userLabel = $this->wire('sanitizer')->entities($userLabel);
		}
		
		if($userAvatar) {
			if($userAvatar === 'gravatar') {
				if($user->email) {
					$url = "https://www.gravatar.com/avatar/" . md5(strtolower(trim($user->email))) . "?s=80&d=mm&r=g";
					$userAvatar = "<img class='pw-avatar' src='$url' alt='$user->name' />&nbsp;";
				} else {
					$userAvatar = $this->renderNavIcon("$defaultIcon fa-lg"); 
				}
			} else if(strpos($userAvatar, 'icon.') === 0) {
				list(,$icon) = explode('.', $userAvatar); 
				$userAvatar = $this->renderNavIcon("$icon fa-lg"); 
			} else if(strpos($userAvatar, ':')) {
				list($fieldID, $fieldName) = explode(':', $userAvatar); 
				$field = $this->wire('fields')->get($fieldName);
				if(!$field || !$field->type instanceof FieldtypeImage) {
					$field = $this->wire('fields')->get((int) $fieldID); 
				}
				if($field && $field->type instanceof FieldtypeImage) {
					$value = $user->get($field->name); 
					if($value instanceof Pageimages) $value = $value->first();
					if($value instanceof Pageimage) {
						$value = $value->size(60, 60); 
						$userAvatar	= "<img class='pw-avatar' src='$value->url' alt='$user->name' />&nbsp;";
					} else {
						$userAvatar = $this->renderNavIcon("$defaultIcon fa-lg"); 
					}
				} else {
					$userAvatar = '';
				}
			}
		}
	
		if($userAvatar) $userLabel = $userAvatar . $userLabel;
		
		return $userLabel;
	}

	/**
	 * Render navigation for the “user” menu
	 *
	 * @return string
	 *
	 */
	public function renderUserNavItems() {

		$items = $this->getUserNavArray();
		$out = '';

		foreach($items as $item) {
			$label = $this->wire('sanitizer')->entities($item['title']);
			$icon = isset($item['icon']) ? $this->renderNavIcon($item['icon']) : ' ';
			$target = isset($item['target']) ? " target='$item[target]'" : '';
			$out .= "<li><a$target href='$item[url]'>$icon$label</a></li>";
		}

		return $out;
	}


	/**
	 * Render link that opens the quick page-tree panel
	 *
	 * @param string $icon Icon to use for link (default=sitemap)
	 * @param string $text Optional text to accompany icon (default=empty)
	 * @return string
	 *
	 */
	public function renderQuickTreeLink($icon = 'tree', $text = '') {
		$tree = $this->_('Tree');
		$url = $this->wire('urls')->admin . 'page/';
		return
			"<a class='pw-panel' href='$url' data-tab-text='$tree' data-tab-icon='$icon' title='$tree'>" .
				$this->renderNavIcon($icon) . $text .
			"</a>";
	}

	/**
	 * Get the URL to the ProcessWire or brand logo (or <img> tag) 
	 * 
	 * @param array $options
	 *  - `getURL` (bool): Return only the URL? (default=false)
	 *  - `getNative` (bool): Return only the ProcessWire brand logo? (default=false)
	 *  - `alt` (string): Alt attribute for <img> tag (default=auto)
	 *  - `height` (string): Height style to use for SVG images (default='')
	 * @return string
	 * 
	 */
	public function getLogo(array $options = array()) {
		
		/** @var Config $config */
		$config = $this->wire('config');
		/** @var Sanitizer $sanitizer */
		$sanitizer = $this->wire('sanitizer');
		
		$defaults = array(
			'getURL' => false, 
			'getNative' => false,
			'alt' => '',
			'height' => '',
		);
	
		$options = array_merge($defaults, $options);
		$logoURL = $this->get('logoURL');
		$logoQS = '';
		$svg = false;
		
		if(empty($logoURL) || $options['getNative'] || strpos($logoURL, '//') !== false) {
			$native = true;
			$logoURL = $this->url() . self::logo;
		} else {
			if(strpos($logoURL, '?')) list($logoURL, $logoQS) = explode('?', $logoURL, 2);
			$logoURL = $config->urls->root . ltrim($logoURL, '/');
			$logoURL = $sanitizer->entities($logoURL);
			$native = false;
			$svg = strtolower(pathinfo($logoURL, PATHINFO_EXTENSION)) === 'svg';
		}
		
		$alt = $options['alt'];
		if(empty($alt) && $this->wire()->user->isLoggedin()) {
			$alt = "ProcessWire $config->version";
		}
		
		$class = 'pw-logo ' . ($native ? 'pw-logo-native' : 'pw-logo-custom');
		$attr = "class='$class' alt='$alt' ";

		if($svg) {
			if($options['height']) $attr .= "style='height:$options[height]' ";
			if(strpos($logoQS, 'uk-svg') === 0) {
				// if logo has "?uk-svg" query string, add uk-svg attribute which makes it styleable via CSS/LESS (PR#77)
				$attr .= 'uk-svg ';
				$logoQS = str_replace(array('uk-svg&', 'uk-svg'), '', $logoQS);
			}
		}
		
		if($logoQS) $logoURL .= '?' . $sanitizer->entities($logoQS);
		
		$img = "<img src='$logoURL' $attr/>";
		
		return $options['getURL'] ? $logoURL : $img;
	}

	/**
	 * Get the URL to the ProcessWire or brand logo
	 * 
	 * @return string
	 * 
	 */
	public function getLogoURL() {
		return $this->getLogo(array('getURL' => true));
	}
	
	/**
	 * Get URL to this admin theme
	 *
	 * @return string
	 * @since 3.0.171
	 *
	 */
	public function url() {
		return $this->wire()->config->urls->modules . 'AdminTheme/AdminThemeUikit/';
	}
	
	/**
	 * Get disk path to this admin theme
	 *
	 * @return string
	 * @since 3.0.171
	 *
	 */
	public function path() {
		return __DIR__ . '/';
	}

	/**
	 * Get the primary Uikit CSS URL to use
	 * 
	 * @return string
	 * @since 3.0.178 Was not hookable in prior versions
	 * 
	 */
	public function ___getUikitCSS() {

		$config = $this->wire()->config;
		$cssUrl = $this->get('cssURL');
		
		if($cssUrl) { // a custom css URL was set in the theme config
			if(strpos($cssUrl, '//') === false) $cssUrl = $config->urls->root . ltrim($cssUrl, '/');
			return $this->wire()->sanitizer->entities($cssUrl);
		}
		
		require_once(__DIR__ . '/AdminThemeUikitCss.php');
		
		$settings = $config->AdminThemeUikit; 
		if(!is_array($settings)) $settings = array();
		$settings['requireCssVersion'] = self::requireCssVersion;
		
		if(self::upgrade) {
			$settings['upgrade'] = true;
			$settings['replacements'] = array('../pw/images/' => 'images/');
		} else {
			if(empty($settings['customCssFile'])) $settings['customCssFile'] = '/site/assets/admin.css';
			$path = 'wire/modules/AdminTheme/AdminThemeUikit/uikit-pw/images/';
			$back = str_repeat('../', substr_count(trim($settings['customCssFile'], '/'), '/'));
			$settings['replacements'] = array(
				'url(../pw/images/' => "url($back$path",
				'url("../pw/images/' => "url(\"$back$path",
				'url(pw/images/' => "url($back$path",
				'url("pw/images/' => "url(\"$back$path"
			);
		}
		
		$css = new AdminThemeUikitCss($this, $settings);
		
		return $css->getCssFile();
	}
	
	/**
	 * Get Javascript that must be present in the document <head>
	 *
	 * @return string
	 *
	 */
	public function getHeadJS() {

		$config = $this->wire()->config;
		$data = $config->js('adminTheme');
		if(!is_array($data)) $data = array();
		$data['logoAction'] = (int) $this->logoAction;
		$data['toggleBehavior'] = (int) $this->toggleBehavior; 
		$config->js('adminTheme', $data);
		
		return parent::getHeadJS();
	}

	/**
	 * Module configuration
	 * 
	 * @param InputfieldWrapper $inputfields
	 * 
	 */
	public function getModuleConfigInputfields(InputfieldWrapper $inputfields) {
		parent::getModuleConfigInputfields($inputfields);
		include_once(__DIR__ . '/config.php');
		$configHelper = new AdminThemeUikitConfigHelper($this);
		$configHelper->configModule($inputfields);
	}
}