Jump to content

RockFrontend 🚀🚀 The Powerful Toolbox for ProcessWire Frontend Development

bernhard

By bernhard,
in RockFrontend

 Share

Recommended Posts

maetmar Jr. Member

maetmar

Posted
Posted

Hi @bernhard,

I realized that RockFrontend is adding "<div edit=title hidden>title</div>" before the closing body tag, because of line 260 in RockFrontend.module.php (faketag)

Is this used for Alfred? And if yes, is there a way to only output this if Alfred is actually used?

Thanks for checking

Link to comment
Share on other sites
Stefanowitsch Sr. Member

Stefanowitsch

Posted
Posted
On 1/26/2023 at 1:58 PM, bernhard said:

v2.19.0 comes with a new handy javascript snippet that can help, for example, to create to-top-links that slide in after a certain scroll position:

If you have ideas for improvement let me know!

@bernhard can you take a look?

When using the minify function of RockFrontend the "defer" attribute gets lost. So the script will never fire. 

A workaround for me was to wrap the script into a JS "DOMContentLoaded" Function.

Link to comment
Share on other sites
Stefanowitsch Sr. Member

Stefanowitsch

Posted
Posted
18 minutes ago, bernhard said:

@Stefanowitsch thx for the report. Could you please provide a step by step instruction what you did so that I can try to reproduce the issue?

I included the script in my head like this: 

<? $rockfrontend->scripts()
  ->add($config->urls->templates . 'scripts/uikit/uikit.min.js')
  ->add($config->urls->templates . 'scripts/uikit/uikit-icons.min.js')
  ->add("/site/modules/RockFrontend/scripts/rf-scrollclass.js", "defer")
  ->minify(!$config->debug);
?>

When minify is set to "true" this is rendered in the <head> section ("defer" missing):

image.png.d24a43b0c779ca71ec679c2e01686524.png

  • Thanks 1
Link to comment
Share on other sites
Stefanowitsch Sr. Member

Stefanowitsch

Posted
Posted

@bernhard I made a little tweak to the rf-scrollclass script. Okay it was not me directly. Instead I asked a certain AI if it is possible to alter the script... just for scientific purposes of course 😉

I want to add multiple rf-scrollclass attributes to one DOM element: 

<header class="rf-scrollclass" rf-scrollclass="scrolled@20 scrolledmobile@15">

Now the class "scrolledmobile" gets added at 15px, the "scrolled" class gets added at 20px - all on the same element.

This gives me the ability to use css media queries for some responsive tweaking of the position of my fixed navbar (for example!) 

header {
  position: absolute;
  top: 40px;
  width: 100%;
  z-index: 100;

  @media @min-m {

    &.scrolled {
      top: 20px;
      position: fixed;
    }

  }

  @media @max-s {
    top: 30px;

    &.scrolledmobile {
        top: 15px;
        position: fixed;
    }
  }

}

Long story short, here's the updated script: 

(function () {
  let scrollElements = document.querySelectorAll("[rf-scrollclass]");
  for (i = 0; i < scrollElements.length; i++) {
    let el = scrollElements[i];
    let attrs = el.getAttribute("rf-scrollclass").split(" ");
    for (j = 0; j < attrs.length; j++) {
      let parts = attrs[j].split("@");
      if (parts.length != 2) return;
      let cls = parts[0];
      let y = parts[1] * 1;
      window.addEventListener("scroll", function () {
        scrollpos = window.scrollY;
        if (scrollpos >= y) el.classList.add(cls);
        else el.classList.remove(cls);
      });
    }
  }
})();

 

  • Like 1
Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted
On 3/17/2023 at 5:02 PM, Stefanowitsch said: 
<header class="rf-scrollclass" rf-scrollclass="scrolled@20 scrolledmobile@15">

Hey @Stefanowitsch thx, I've pushed that update to v2.33.0 🙂 

Not sure if it's intentional, but you don't need the class "rf-scrollclass" on your <header>, you only need the attribute.

Also I've been thinking if something like this would make sense: rf-scrollclass="show@300-800" ? But I can't think of a scenario where I'd really need that?! The feature was only developed for to-top scrollbuttons that appear when scrolled down for a certain amount. Not sure if it could be helpful for anything else?

  • Thanks 1
Link to comment
Share on other sites
eydun Sr. Member

eydun

Posted
Posted

I would love to use this module on one of my website, which is unfortunately still running PHP 7.4.

I can see that minimum requirement is PHP ver. 8. I guess this is because of Latte 3.

Will I be able to tweak the module to use Latte 2 and PHP 7.4, or will I be hit by an avalanche of challenges?

 

Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

Hey @eydun

39 minutes ago, eydun said:

I can see that minimum requirement is PHP ver. 8. I guess this is because of Latte 3.

The module uses PHP8 syntax/features on several spots. All my modules do, as PHP7.4 is end of life and updating should be very easy.

40 minutes ago, eydun said:

Will I be able to tweak the module to use Latte 2 and PHP 7.4, or will I be hit by an avalanche of challenges?

There will definitely be some challenges. Most likely a lot more than upgrading your site to PHP8.1 or 8.2 which would be the best thing to do anyhow 😉 

  • Like 2
Link to comment
Share on other sites
  • 1 month later...
protro Jr. Member

protro

Posted
Posted

How can I safely update the UIkit version? Do I re-install uikit profile in the Rockfrontend module and then that repopulates the Download UIkit dropdown menu? My issue is that I updated Rockfrontend fine but the versions of UIkit available to me are stuck at 3.16.15 as the latest version.

Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

It depends on which version you are using. Older versions of rockfrontend downloaded uikit to /site/templates/uikit-3.X.X whereas newer versions download it to /site/templates/uikit

This is to make it easy for me to provide profiles - then I can simply include /site/templates/uikit and it will always work no matter which version the user downloaded.

And it will also help with updates. Just delete /site/templates/uikit and then download the latest version via RockFrontend's config screen.

I've also just pushed an update that flushes the cache for the dropdown. So if you happen to see an outdated version of the dropdown just do a modules refresh and it should grab the latest versions from github properly.

If all that does not work you can simply download uikit from github and replace /site/templates/uikit manually.

PS: All updates are in the DEV branch at the moment: https://github.com/baumrock/RockFrontend/tree/dev

Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

Just released v2.40.0 with some nice updates 😎 https://github.com/baumrock/RockFrontend/releases/tag/v2.40.0

I started to adopt a new workflow, because I often heard that "it's hard to keep track". That's why from now on I'll push updates to the dev branch and then merge them to main from time to time.

The topbar now shows the current page's template, which is handy:

y8yscln.png

 

Link to comment
Share on other sites
protro Jr. Member

protro

Posted
Posted

I seem to be running into an issue where woff2 fonts that I have manually added to site/templates/webfonts directory are triggering livereload in an endless loop every second. I tried setting the livereload config to have a longer interval, e.g. '2', but this seemed to stop livereload from registering changes entirely. 

$config->livereload = ['interval' => 2];

The Livereload logs shows (at random) one of several woff2 files repeatedly.

1409279752_ScreenShot2023-05-04at1_00_59PM.thumb.png.df1649e37f6758cd9e9d8467350abda5.png

Is there something I am missing with regard to adding fonts? Should I exclude the webfonts directory from livereload, and if so, what is the proper syntax for doing so using the 'exclude' parameter ?

Thanks @bernhard

Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

Hey @protro that's strange - why should it find the woff file as changed file if it didn't change?

Though you can customize livereload to your needs like this: 

$config->livereload = [
  // interval to watch for changes
  'interval' => 1, // 1s = default

  // user defined include paths
  'include' => [
    '.*/foo/bar',
  ],

  // you can reset default include paths
  'includeDefaults' => [],

  // user defined exclude regexes
  'exclude' => [
    '.*/site/my-ignored-folder',
  ],

  // you can reset default excludes
  'excludeDefaults' => [],
];

livereload.png?t=1683207904

I might exclude /site/assets entirely one day ...

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...