Foundation 6 is out, lets upgrade!

[Martinspire]

So v6 was coming for some time now and its out! I don't expect it to be immediately implemented, but it would be nice to have it ASAP. Will the project move to v6 soon? Are some steps already taken or do you guys need (more) help? If so: what can we do?

I like the Foundation for Apps framework but i'd rather use the Angular components and normal styling and let my current framework what ties all my code together, do the rest. Plus i don't like using Ruby next to NodeJS (they should really drop Ruby), so there's that.

Keep us up 2 date ;)

[sn0rcha]

+1 for this, love these directives, fingers crossed for a version 6 implementation.

[talmog]

+1

[codynegri]

Foundation changed modal-reveal to just reveal. I have got this working with Foundation 6 by changing lines 3436 and 3442 in mm-foundation-tpls-0.8.0.js. See the new code below:

angular.module("template/modal/backdrop.html", []).run(["$templateCache", function ($templateCache) {
    $templateCache.put("template/modal/backdrop.html",
      "<div class=\"reveal-overlay\" ng-class=\"{in: animate}\" ng-click=\"close($event)\" style=\"display: block\"></div>\n" +
      "");
}]);

angular.module("template/modal/window.html", []).run(["$templateCache", function ($templateCache) {
    $templateCache.put("template/modal/window.html",
      "<div tabindex=\"-1\"  class=\"reveal {{ windowClass }}\"\n" +
      "  ng-class=\"{in: animate}\" style=\"display: block; visibility: visible\">\n" +
      "  <div ng-transclude></div>\n" +
      "</div>\n" +
      "");
}]);

Hope this helps someone.

[bcam2]

Here is a working codepen for anyone if it helps further

http://codepen.io/bcam2/pen/VeLjaP

[jbrowning]

Thanks for the request for Foundation 6 support! We'd like to support Foundation 6 as well and the timeline and feasibility to do so really depends on the complexity involved. According to this post, Zurb is still preparing an upgrade guide. Once that's out, we'll take a look and see what it'll take to jump to :six:.

[olefredrik]

Any progress on this?

[jbrowning]

ZURB hasn't released an upgrade guide yet so nothing new to see here.

[Martinspire]

@jbrowning might be so, but the code is already out there. I'm guessing i wasn't the first to auto-download Foundation 6 with this plugin. If you have to wait for a guide, you are doing it wrong imo. (not to burst your balls, still love this module)

[sn0rcha]

Still no update on this, has anyone forked this for Foundation 6 yet?

[cameronlowry]

Yes please.

[circlingthesun]

I've started porting. Have a look at http://circlingthesun.github.io/angular-foundation-6/. All of the directives on the page looks about done. Components that still needs to be ported can be found in ./src with an underscore prefixed to their directories. Removing the underscore includes a component in tests/builds.

[tinyfly]

Foundation for apps is build on Angular and has angular modules. This probably means we don't need this library anymore no?

[circlingthesun]

Zurb makes a distinction between 'apps' and 'sites'. It appears that Foundation for apps is mainly geared towards single page js heavy sites like an email client or a music player. Foundation for sites seems to be aimed towards traditional sites that consists of a collection of pages. As such, the styles are a bit different and they don't have the same set of components. Some features overlap but foundation for apps don't, for instance, have styles for form errors, breadcrumbs, etc.

Unfortunately foundation for sites doesn't ship with angular bindings for those who prefer it.

On Thu, 3 Mar 2016, 8:37 p.m. Jeff Adams, notifications@github.com wrote:

Foundation for apps http://foundation.zurb.com/apps.html is build on Angular and has angular modules. This probably means we don't need this library anymore no?

— Reply to this email directly or view it on GitHub https://github.com/pineconellc/angular-foundation/issues/280#issuecomment-191904259 .

[Martinspire]

Not to mention that it takes over your whole structure. You can't simply use the components separately but have to define an app, let it build and then you have a whole directory of files to work with (set by their guidelines). So if you have a different way of working or an existing project, it doesn't work properly. Thats my main reason for using angular-foundation. To use the styling and features, but not as a whole framework for an app. Plus its really made for mobile apps, not really webapps

[muckinger]

+1

[circlingthesun]

Update: all* components have been ported except typeahead, interchange, and rating. Some tests are still pending.

• Top bar was canned as in F6

[Martinspire]

@circlingthesun Any issues with those remaining in particular that we can help with? Anyways, good job guys :+1:

[circlingthesun]

@Martinspire, well, you are welcome to take a stab at porting any of the remaining components. Ratings is probably the easiest if it doesn't just work off the bat. Interchange will probably require mediaQueries to be updated to detect foundation 6 breakpoints (I don't personally use this so it's not a high priority for me). Then I've not really had a look at how to deal with typeahead as there is no typeahead component in F5 or F6. In F5 it was created using the dropdown css which has changed a bit in F6. I've been considering using an external library.

Otherwise the dropdownMenu component needs some logic to deal with limited screen real estate. If a menu is opened on the far right side it'll run over the screen border.

The modal component needs the tests to be ported. The callback to the it() functions needs to take a done parameter that should be called when the test is complete as the opening of the modal happens asynchronously. At the moment the tests are only passing because the assertions run after the callback has returned.

I've noticed one bug in the modal. Basically what I'm doing is first opening the modal with no animations off screen (low z-index). Then the modal is measured to determine where to open it on screen, and whether it fits on screen. If it fits on the screen scrolling the page is disabled (always the case for F6 even when it doesn't fit), if it doesn't fit scrolling is enabled (nice for modals that might not fit on screen). Then it's actually opened with ngAnimate. Some modal content might however not be ready when the modal is initially opened off screen, so the measured off screen modal will be smaller than the final on screen size. This can result in the modal opening lower down the screen than it otherwise would and potentially running of the screen (with scrolling disabled :0). The reposition function (https://github.com/circlingthesun/angular-foundation-6/blob/master/src/modal/modal.js#L291) can be called to fix the positioning, I'm not sure when to call it though.

Some of the more recently ported components also needs tests to be ported/added.

[jbrowning]

Please have a look at #311.