Foundation JS is partially Down

[jbonlinea]

Hi,

I've been digging into bones template and really enjoy many of its features.

My next move was to integrate Foundation ready made "kitchen sinks" into my pages however it appears that some do not work. Of courses I did activated the needed js and css in the template settings (as well as page setting - with cross tests).

• Acordeon is displayed properly but do not operate and link/lead you to the top of the page.
• Dropdown is also displayed properly but the console returns what you may see in the attachement.

To further my test I tried with bones 0.5.2 and 0.6, but had the same result. Also, with bones 0.6 I updated the dependencis via bower, with no more luck.

I then modified partials/css.html.twig and partials/js.html.twig to use the css and js of a freshly downloaded foundation for site complete css version ; Then both archodeon and dropdown were working, but of off-canvas wasn't anymore.

I've spend the morning checking if my configuration was fine, which I now am confident with, and the fix suggested above by using my own foundation JS and CSS seems a bit extreme.

Regards

J.

PS : I'm running on debian 9 ; php 7.0, apache 2.4.25

[jbonlinea]

Ho !

Just bumped in the right page of foundation doc.

Is say that when loading modules at once, like we do with the toggles in bones admin, script loading order must be respected as such

<script src="js/jquery.min.js"></script>
<script src="js/foundation.core.js"></script>
<script src="js/foundation.util.mediaQuery.js"></script>

Only then a module scirpt may be loaded

Changing the js.html.twig solved the issue.

I did a pull request for that.

I let you close the issue if the pull reques is ok with you

Cheers

[benblee]

The priority setting in the twig code should allow for the JS to be ordered properly. JQuery is loaded in the head and the rest is loaded in the footer, with foundation.core loaded first. I'll test it, but for the sites I've set up, the ordering is correct.

[jbonlinea]

Hi

Thank's for your quick reply ! I wasn't sure bones was actively maintained as there were not many comits over last year and some unanswered open issues, but it's great seing you here, It would be a huge waste to let thie die !

Actually I have to give more tries but after 5h my brain is not up anymore. I got enthusiastic when I foud this page of the documentation, but I was already burned.

I knew that depending of the module, some extra utilities were needed, and I may as well have mixed things up.

However if I activate all CSS and all JS, I still bump in the error above and for whatever reason I can't have acordeon working.

I'll take a rest and come back to that later. maybe starting from a clean install to make it easier

Cheers

[jbonlinea]

Ok

I'm back with a fresh brain and a fresh install.

There's definitly an issue somewhere, or more than one... and it's definitly weird thing.

As insane at it might seems, I belive it is partly due to a "line ending" ! As well as script loading order priority ! But neither the one nor the other works ! Si si !

Check that, I've left some of my testing for you to reproduce it and understand the crasyness I faced.

If you're ok I'll re-open my pull request with a new and clean commit.

Fresh install background :

• fresh install of grav via composer
• admin plugin install via grav cli
• bones theme install via grav cli (thus bones 0.5.2)
• cache regularly cleared during test

Out of the box

Off Canvas

Enabling Off-Canvas JS and CCS (default settings actually)

--> working

Accordion - issue I

Enabling Acordeon JS and CSS + Keyboard utils from theme configuration

--> Not working, clicking on any links of the accordion jump to top of the page ; screen shot :

More issues

If I use others Kitchen-sinks requiering others Foundations JS and Utilities, the console start returning errors about undefined values related to "missing" utilites, despite these utilities are enabled.

Tweaking js.html.twig partial of Bones - I

Replaced everything with foundation from CDN

{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js',{'priority':104, 'group':'bottom'}) %}
{% do assets.addInlineJs('$(document).foundation();',{'priority':99, 'pipeline':false, 'group':'bottom'}) %}

--> Accordion is working

--> BUT OFF CANVAS FAILS !!

What the F***!

Replace everything with simplier foundation files

{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.core.min.js',{'priority':104, 'group':'bottom'}) %}
{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.accordion.min.js',{'priority':103, 'group':'bottom'}) %}
{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.offcanvas.min.js',{'priority':103, 'group':'bottom'}) %}
{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.util.keyboard.min.js',{'priority':102, 'group':'bottom'}) %}
{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.util.mediaQuery.min.js',{'priority':102, 'group':'bottom'}) %}
{% do assets.addInlineJs('$(document).foundation();',{'priority':99, 'pipeline':false, 'group':'bottom'}) %}

--> Off-Canvas still fails and the console return error message related to Media-Query and Keyboard utils.

Note that here I'be kept your sorting and pririty values.

Rearange order AND priority

{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.core.min.js',{'priority':104, 'group':'bottom'}) %}
{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.util.mediaQuery.min.js',{'priority':103, 'group':'bottom'}) %}
{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.util.keyboard.min.js',{'priority':103, 'group':'bottom'}) %}
{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.accordion.min.js',{'priority':102, 'group':'bottom'}) %}
{% do assets.addJs('https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.offcanvas.min.js',{'priority':102, 'group':'bottom'}) %}
{% do assets.addInlineJs('$(document).foundation();',{'priority':99, 'pipeline':false, 'group':'bottom'}) %}

--> Off-Canvas still fails BUT the console is clean

Tweaking js.html.twig partial of Bones - II

Starting again from the duplicate of the original js.html.twig, I did many, many many many tries, mixing of local and distant source, with and without "if" to overridefoundationg settings togle from the admin panel, changing sorting, priorities... untill I got something fully functional.

At this stage I only kept what I needed in my file, thus

• foundation-core
• foundation-MediaQuery
• foundation-keyboard
• foundation-accordion
• foundation-off-canvas

But when I copied pasted from the original what was missing, then accordeon was failing agian... WTF!

I said, ok, let me copy paste each modules one by one and check when it'll fail, but it didn't !

Then I said, ok it's simple, let's start over from the original page and do the minimum edit to reach the same code as the functional one. I thus copy-pasted the utils to place them before the kitchen-sinks, and changed the priorities as mine was, but it failed.

Then I said, ok might be due to a problematic end of line, so I manually minified the original file, but it failed again.

Then I edited the minified file to change priorities, but it still failed !

So basically everything I did to get to a functional file from the original one failed, but a suite of changes that led to a working code.

The yet unexplained magic fix

This worked !!!

It's only based on local files, but RE-SORTED and RE-PRIORITIZE

{% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.core.js',{'priority':105, 'group':'bottom'}) %}

{% if page.header.foundation_util_box_js == "disabled" %}
{% elseif page.header.foundation_util_box_js == "enabled" or theme_config.foundation_util_box_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.util.box.js',{'priority':104, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_util_keyboard_js == "disabled" %}
{% elseif page.header.foundation_util_keyboard_js == "enabled" or theme_config.foundation_util_keyboard_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.util.keyboard.js',{'priority':104, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_util_mediaQuery_js == "disabled" %}
{% elseif page.header.foundation_util_mediaQuery_js == "enabled" or theme_config.foundation_util_mediaQuery_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.util.mediaQuery.js',{'priority':104, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_util_motion_js == "disabled" %}
{% elseif page.header.foundation_util_motion_js == "enabled" or theme_config.foundation_util_motion_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.util.motion.js',{'priority':104, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_util_nest_js == "disabled" %}
{% elseif page.header.foundation_nest_util_js == "enabled" or theme_config.foundation_util_nest_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.util.nest.js',{'priority':104, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_util_timerAndImageLoader_js == "disabled" %}
{% elseif page.header.foundation_util_timerAndImageLoader_js == "enabled" or theme_config.foundation_util_timerAndImageLoader_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.util.timerAndImageLoader.js',{'priority':104, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_util_touch_js == "disabled" %}
{% elseif page.header.foundation_util_touch_js == "enabled" or theme_config.foundation_util_touch_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.util.touch.js',{'priority':104, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_util_triggers_js == "disabled" %}
{% elseif page.header.foundation_util_triggers_js == "enabled" or theme_config.foundation_util_triggers_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.util.triggers.js',{'priority':104, 'group':'bottom'}) %}
{% endif %}

{% if page.header.foundation_abide_js == "disabled" %}
{% elseif page.header.foundation_abide_js == "enabled" or theme_config.foundation_abide_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.abide.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_offcanvas_js == "disabled" %}
{% elseif page.header.foundation_offcanvas_js == "enabled" or theme_config.foundation_offcanvas_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.accordion.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_accordionMenu_js == "disabled" %}
{% elseif page.header.foundation_accordionMenu_js == "enabled" or theme_config.foundation_accordionMenu_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.accordionMenu.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_drilldown_js == "disabled" %}
{% elseif page.header.foundation_drilldown_js == "enabled" or theme_config.foundation_drilldown_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.drilldown.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_dropdown_js == "disabled" %}
{% elseif page.header.foundation_dropdown_js == "enabled" or theme_config.foundation_dropdown_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.dropdown.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_dropdownMenu_js == "disabled" %}
{% elseif page.header.foundation_dropdownMenu_js == "enabled" or theme_config.foundation_dropdownMenu_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.dropdownMenu.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_equalizer_js == "disabled" %}
{% elseif page.header.foundation_equalizer_js == "enabled" or theme_config.foundation_equalizer_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.equalizer.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_interchange_js == "disabled" %}
{% elseif page.header.foundation_interchange_js == "enabled" or theme_config.foundation_interchange_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.interchange.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_magellan_js == "disabled" %}
{% elseif page.header.foundation_magellan_js == "enabled" or theme_config.foundation_magellan_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.magellan.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_offcanvas_js == "disabled" %}
{% elseif page.header.foundation_offcanvas_js == "enabled" or theme_config.foundation_offcanvas_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.offcanvas.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_orbit_js == "disabled" %}
{% elseif page.header.foundation_orbit_js == "enabled" or theme_config.foundation_orbit_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.orbit.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_responsiveMenu_js == "disabled" %}
{% elseif page.header.foundation_responsiveMenu_js == "enabled" or theme_config.foundation_responsiveMenu_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.responsiveMenu.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_responsiveToggle_js == "disabled" %}
{% elseif page.header.foundation_responsiveToggle_js == "enabled" or theme_config.foundation_responsiveToggle_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.responsiveToggle.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_reveal_js == "disabled" %}
{% elseif page.header.foundation_reveal_js == "enabled" or theme_config.foundation_reveal_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.reveal.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_slider_js == "disabled" %}
{% elseif page.header.foundation_slider_js == "enabled" or theme_config.foundation_slider_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.slider.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_sticky_js == "disabled" %}
{% elseif page.header.foundation_sticky_js == "enabled" or theme_config.foundation_sticky_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.sticky.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_tabs_js == "disabled" %}
{% elseif page.header.foundation_tabs_js == "enabled" or theme_config.foundation_tabs_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.tabs.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_toggler_js == "disabled" %}
{% elseif page.header.foundation_toggler_js == "enabled" or theme_config.foundation_toggler_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.toggler.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% if page.header.foundation_tooltip_js == "disabled" %}
{% elseif page.header.foundation_tooltip_js == "enabled" or theme_config.foundation_tooltip_js.enabled %}
    {% do assets.addJs('theme://bower_components/foundation-sites/js/foundation.tooltip.js',{'priority':103, 'group':'bottom'}) %}
{% endif %}
{% do assets.addInlineJs('$(document).foundation();',{'priority':99, 'pipeline':false, 'group':'bottom'}) %}

I have no rational explainaition why copy pasting this in the original js.html.twig works, but it does !

I wonder if it my be due to the original file being slightly corupt, but it happend on two of my installs ;

NOTE THAT I HAVE RISED THE PRIORITIES FROM 104 TO 105 TO CORE, 102 TO 104 FOR UTILS

so what what what so ever else ?

I've spend the damn morning on that, was about to give up since I'm not sure I'll ever use both Accordion and Off-Canvas at the same time, but if this fails, then something else might fail and it was probably easier to identify it here rather than later in on my owns coding.

Again, I've left some of my test so that you can see for yourself !

I'll be really curious to hear how it turns on your side !

Cheers

[benblee]

I'm getting back into things here after somewhat of a hiatus and working on upgrading Bones. I am definitely noticing some ordering issues, but also some "sticky cache" issues where the site isn't responding properly at first, but after a thorough cleaning of cache, it responds properly.

It'll be some days before I have a full test branch up and running as there were a LOT of changes to Foundation over the last year, but it's getting there.

Off-Canvas is one of the bigger changes with many more options now and I'm noticing others as I'm going through the logs.

My plan as of now is to move all JS to a central directory and not worry about retaining the compiling ability. This will clear up a lot of files and it seems that most people are only customizing SCSS anyway.

I'm seeing a few places where I can consolidate options, but then opening up more where they make sense.

[jbonlinea]

Hi Ben Yes, I've also notice that I had to clear the cache to update the sticky in_navigation_menu, but it wasn't as detrimental as the above.

I'l actually new to grav and foundation and can't provide much imput about the how and why, and the best path for the upgrade, however I'll be happy to help with some unitary test, despite time is always an issue I might encounter and try some while working on my site.

Actually, I'm among the one who only customise scss and totaly support your idea, for now, and I can't say for how long, in my previous experience with bootstrap I ended up customizing the whole thing.

For this reason I 'm wondering why not keep the best of both world. As a beginer, discovering grav and foundation and bones, I would love to have a native, full support of Fundation in bones, with no more no less that the two foundation.min.js and foundation.min.css ; just to be on the same page as anyone starting with foundation independtly of bones and grav.

As a more advanced and curious user, I do relly appreciate the idea of beeing able to customise foundation within grav through the toggle in the bone admin settings, or further depending of my needs, I would be happy to have the machinery to compile foundation js, as I may compile my scss.

If I may I would suggest to add a toggle in the bone setting and let the user select between and "easy/vanilla" mode with a complete, native, vanilla foundation and a "advanced/custom" mode as it is now.

I've never tried to edit the admin panel, but as advanced as you are in the project, it must be pretty straight-forward.

Cheers