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

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...