feat: add topbar feature (mobile preview + edit links)

Alfred.js

@@ -68,6 +68,10 @@
   };
 
   Alfred.prototype.init = function () {
+    // early exit when in mobile preview iframe
+    if (document.querySelector("body").classList.contains("rpb-preview")) {
+      return;
+    }
     let items = document.querySelectorAll("[alfred]:not(.alfred)");
     if (!items.length) return;
     items.forEach(function (item) {

README.md

@@ -1,3 +1,5 @@
+<img src=RockFrontend.svg height=80><br><br>
+
 # Take your ProcessWire Frontend Development to the Next Level 🚀🚀
 
 <br>
@@ -210,14 +212,8 @@ href=/site/assets/files/1/favicon.192x192.png> <link rel='apple-touch-icon'
 type='image/png' sizes='167x167' href=/site/assets/files/1/favicon.167x167.png>
 <link rel='apple-touch-icon' type='image/png' sizes='180x180'
 href=/site/assets/files/1/favicon.180x180.png>
-<link
-  rel="manifest"
-  href="/website.webmanifest"
-/>
-<meta
-  name="theme-color"
-  content="#074589"
-/>
+<link rel="manifest" href="/website.webmanifest" />
+<meta name="theme-color" content="#074589" />
 ```
 
 ### Adding a manifest file to your project
@@ -549,11 +545,7 @@ You can even provide variables to replace, so you can create completely dynamic
 RockFrontend comes with a handy method `isActive()` to keep your menu markup clean. Using `latte` you'll get super simple markup without if-else-hell:
 
 ```html
-<nav
-  id="tm-menu"
-  class="tm-boxed-padding"
-  uk-navbar
->
+<nav id="tm-menu" class="tm-boxed-padding" uk-navbar>
   <div class="uk-navbar-center uk-visible@m">
     <ul class="uk-navbar-nav">
       <li n:foreach="$home->children() as $item">
@@ -563,10 +555,7 @@ RockFrontend comes with a handy method `isActive()` to keep your menu markup cle
         >
           {$item->title}
         </a>
-        <div
-          class="uk-navbar-dropdown"
-          n:if="$item->numChildren()"
-        >
+        <div class="uk-navbar-dropdown" n:if="$item->numChildren()">
           <ul class="uk-nav uk-navbar-dropdown-nav">
             <li
               n:foreach="$item->children() as $child"

RockFrontend.module.php

@@ -106,7 +106,7 @@ public static function getModuleInfo()
   {
     return [
       'title' => 'RockFrontend',
-      'version' => '2.14.1',
+      'version' => '2.15.0',
       'summary' => 'Module for easy frontend development',
       'autoload' => true,
       'singular' => true,
@@ -218,7 +218,6 @@ public function addAssets()
     $this->addHookAfter(
       "Page::render",
       function (HookEvent $event) {
-        $page = $event->object;
         $html = $event->return;
         $styles = $this->styles();
         $scripts = $this->scripts();
@@ -263,6 +262,8 @@ function (HookEvent $event) {
           }
         }
 
+        $this->addTopBar($html);
+
         // at the very end we inject the js variables
         $assets = '';
         $json = count($this->js) ? json_encode($this->js) : '';
@@ -333,6 +334,33 @@ public function addPostCSS($key, $callback)
     $this->postCSS->set($key, $callback);
   }
 
+  /**
+   * Show topbar with sitemap and edit and mobile preview
+   */
+  public function addTopBar(&$html)
+  {
+    if (!$this->isEnabled('topbar')) return;
+
+    $page = $this->wire->page;
+    if (!$page->editable()) return;
+    if ($page->template == 'admin') return;
+    if ($this->wire->input->get('rfpreview')) return;
+
+    /** @var RockMigrations $rm */
+    $less = __DIR__ . "/bar/bar.less";
+    if ($rm = $this->wire->modules->get('RockMigrations')) {
+      $rm->saveCSS($less); // recompile less if changed
+    }
+    $css = $this->toUrl("$less.css", true);
+    $style = "<link rel='stylesheet' href='$css'>";
+    $html = str_replace("</head", "$style</head", $html);
+
+    $topbar = $this->wire->files->render(__DIR__ . "/bar/topbar.php", [
+      'logourl' => $this->toUrl(__DIR__ . "/RockFrontend.svg", true),
+    ]);
+    $html = str_replace("</body", "$topbar</body", $html);
+  }
+
   /**
    * Apply postCSS rules to given string
    */
@@ -1028,6 +1056,17 @@ public function initPostCSS()
 
   public function rfGrow($_data, $shrink = false): string
   {
+    if (is_string($_data)) {
+      $tmp = explode(",", $_data);
+      $_data = [
+        'min' => trim($tmp[0]),
+        'max' => trim($tmp[1]),
+      ];
+    }
+    if (!is_array($_data)) {
+      // bd(Debug::backtrace());
+      throw new WireException("data for rfGrow must be an array");
+    }
     $data = new WireData();
     $data->setArray([
       'min' => null,
@@ -1525,8 +1564,9 @@ public function renderIf($path, $condition, $vars = null, $options = [])
    * Custom
    * @return string
    */
-  public function renderLayout(Page $page, $fallback = [], $noMerge = false)
+  public function renderLayout(Page $page = null, $fallback = [], $noMerge = false)
   {
+    if (!$page) $page = $this->wire->page;
     $defaultFallback = [
       "layouts/{$page->template}",
       "layouts/default",
@@ -1671,6 +1711,38 @@ public function svg($filename, $replacements = [])
     return $this->html($svg);
   }
 
+  /**
+   * Make sure that the given file/directory path is absolute
+   * This will NOT check if the directory or path exists!
+   * It will always prepend the PW root directory so this method does not work
+   * for absolute paths outside of PW!
+   */
+  public function toPath($url): string
+  {
+    $url = $this->toUrl($url);
+    return $this->wire->config->paths->root . ltrim($url, "/");
+  }
+
+  /**
+   * Make sure that the given file/directory path is relative to PW root
+   * This will NOT check if the directory or path exists!
+   * If provided a path outside of PW root it will return that path because
+   * the str_replace only works if the path starts with the pw root path!
+   */
+  public function toUrl($path, $cachebuster = false): string
+  {
+    $cache = '';
+    if ($cachebuster) {
+      $path = $this->toPath($path);
+      if (is_file($path)) $cache = "?m=" . filemtime($path);
+    }
+    return str_replace(
+      $this->wire->config->paths->root,
+      $this->wire->config->urls->root,
+      Paths::normalizeSeparators((string)$path) . $cache
+    );
+  }
+
   /**
    * Given a path return the url relative to pw root
    *
@@ -1825,6 +1897,7 @@ private function configSettings($inputfields)
     $f->label = "Features";
     $f->addOption('postCSS', 'postCSS - Use the internel postCSS feature (eg to use rfGrow() syntax)');
     $f->addOption('minify', 'minify - Auto-create minified CSS/JS assets ([see docs](https://github.com/baumrock/RockFrontend/wiki/Auto-Minify-Feature))');
+    $f->addOption('topbar', 'topbar - Show topbar (sitemap, edit page, toggle mobile preview)');
     $f->value = (array)$this->features;
     $fs->add($f);
 
@@ -1834,7 +1907,6 @@ private function configSettings($inputfields)
     $f->addOption('favicon', 'favicon - Create an image field for a favicon and add it to the home template');
     $f->addOption('ogimage', 'ogimage - Create an image field for an og:image and add it to the home template');
     $f->addOption('footerlinks', 'footerlinks - Create a page field for selecting pages for the footer menu and add it to the home template');
-    $f->addOption('layoutfield', 'layoutfield - Create the layout field that can override layout rendering');
     $f->value = (array)$this->migrations;
     $fs->add($f);