Menu icon Foundation

My Posts


  • NEW
  • Dropdown menu submenu position

    By Nick TC

    Foundation 6.4.2

    Hi, After the upgrade I have a bug with my dropdown menu, like the example in the manual: <ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 250px;"> <li> <a href="#">Item 1</a> <ul class="ver... (continued)


  • 4
    Replies
  • Exports is not defined

    By Nick TC

    foundation 6.4

    Hi,   I just upgraded my ZURB starter project from 6.3 to 6.4. Almost everything is fine (I can run 'npm start' and build and watch changes), but when I open my application none of the JS is working and the console is logging the following error: ... (continued)

    Last Reply by Nick TC 12 days ago


  • 2
    Replies
  • Dropdown menu not opening on the right side

    By Nick TC

    dropdown

    Hi All, I have some problems using dropdown menu's and dropdown functionality in general. Below URL the two menu items on the right side (search-icon + NTC) are dropdown menu items. The goal is to have the submenu open on the left relative to the paren... (continued)

    Last Reply by Nick TC over 1 year ago



  • 26
    Replies
  • Disaster release Foundation 6

    By Nick TC

    foundation 6disaster

    Last year I have done a few projects with Foundation 5. Therefor I have been playing with Foundation 6 since the launch. I can't believe ZURB is releasing a product that's not ready and full of errors. 1. No migration guide between foundation 5 and 6 (... (continued)

    Last Reply by Nick TC almost 2 years ago


My Comments

Nick TC commented on Nick TC's post 12 days

Fixed that as well. Had to add
.pipe($.concat('app.js'))
After '.pipe(webpackStream(webpackConfig, webpack2))'
Topic closed.

Nick TC commented on Nick TC's post 12 days

Ok, I think I worked it out. I ones created my project using the ZURB template (https://github.com/zurb/foundation-zurb-template/). It appears that Bower is dropped, and not used anymore. I am wondering if there were every migration notes about this?
I now have it almost all working, except for the following. In my 'gulpfile.babel.js' i have the following:
// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
return gulp.src(PATHS.entries)
.pipe(named())
.pipe($.sourcemaps.init())
.pipe(webpackStream(webpackConfig, webpack2))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/js'));
}
And my PATHS.entries inside my config.yml is:
# Paths to JavaScript entry points for webpack to bundle modules
entries:
- "node_modules/select2/dist/js/select2.min.js"
- "src/assets/js/!(app).js"
- "src/assets/js/app.js"
As you can see I am also including some other JS files that don't have the name app.js (!(app).js). Previously this worked fine, and all JS files were combined into 1 single app.js file. But since this webpack change, those files are copied over to the dist folder instead of merged into the app.js file. This is what I get when I run 'npm start'
[11:05:50] Starting 'javascript'...
[11:05:50] Starting 'images'...
[11:05:50] Starting 'copy'...
[11:05:51] Finished 'copy' after 374 ms
[11:05:54] Finished 'sass' after 3.44 s
[11:05:54] Finished 'images' after 3.52 s
[11:05:56] Version: webpack 2.7.0
Asset Size Chunks Chunk Names
grid.js 5.34 kB 6 [emitted] grid
app.js 678 kB 0 [emitted] [big] app
select2.js 6.06 kB 2 [emitted] select2
search.js 2.97 kB 3 [emitted] search
rememberstate.js 6.59 kB 4 [emitted] rememberstate
identifier.js 6.27 kB 5 [emitted] identifier
select2.min.js 362 kB 1 [emitted] [big] select2.min
energy.js 5.87 kB 7 [emitted] energy
customfield.js 3.49 kB 8 [emitted] customfield
checkout.js 3.4 kB 9 [emitted] checkout
charts.js 7.44 kB 10 [emitted] charts
callout.js 3.17 kB 11 [emitted] callout
[11:05:56] Finished 'javascript' after 5.84 s
All these files that I created myself (customfield.js, callout.js, etc) are simple regular JS stuff. No fancy ES-stuff :-).
Can someone explain why it's not combining all files into 1 single app.js file?
 

Nick TC commented on Nick TC's post 12 days

Hi Rafi,
I didn't change anything, except that I upgraded my Foundation 6.3 to a 6.4.
 
It seems to go wrong here:
Object.defineProperty(exports, "__esModule", {
The full block of code is:
"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Foundation = undefined;
In the console I litterally get this:
Uncaught ReferenceError: exports is not defined

at app.js:10187</code></pre>

 
 

Nick TC commented on Dan's post over 1 year

Hi Dan,

You could look at http://gulpjs.com/. This is the (task)engine used for 'building' your website/assets. Some tasks will only be executed in case of a production build (npm run build). For example:

// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function (e) {
      console.log(e);
    }));

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.concat('app.js'))
    .pipe(uglify)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('./dist/assets/js'));
});

You can see here that in case of production it will uglify, and it will not write sourcemaps.

Nick TC commented on Dan's post over 1 year

Just run 'npm run build' instead of 'npm start'. It will let gulp run additional tasks like minifying, etc. Removeing components that you don't like to use can be simply done by commenting out the specific includes in the top of your app.scss file before you execute 'npm start'.

Nick TC commented on Nick TC's post over 1 year

Great, that resolved the problem!

Nick TC commented on Nick TC's post over 1 year

@sankhabanerjee, this is exactly how it comes out of the Zurb Advanced template stack. I don't think it's a problem of how I load the JS, it's just a bug in the framework.

Nick TC commented on Nick TC's post almost 2 years
Nick TC commented on Nick TC's post almost 2 years

@Knight Yoshi
Are you sure? Like I said I am using the full stack, so everything is combined into 1 css and 1 js file. I think both files contain jquery, foundation, motion ui, etc. You can see that my main menu is working fine (js based), and also the equalizer is working fine. Only problem is Orbit + Equalizer, that's causing the orbit to not work. Without equalizer it's all fine.

@Brandon Arnold
I am missing includes, or is this a bug?

Nick TC commented on Nick TC's post almost 2 years

@Brandon Arnold @Rafi Benkual

Could you please help me to at least determine if the problem is on my or Foundation side? The biggest problem for now is that the Orbit is not working (= taking up space for slides that should not be shown). Currently running Foundation 6.0.6.

http://www.victoria28.nl/f6/home.html

Next to that the other problems are also still there. When using production setting JS is not working (orbit, menu, etc). There is still a shadow in the bottom of the page. Since 6.0.6 the search button is not fitting in the topbar and is being stacked. Not sure if this is a bug or desired functionality on a big screen (for now I commented out the search box).

At least help me with the Orbit problem. Is it caused in my or your domain? And if in your domain, is this issue known and being fixed?

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Nick TC's post 12 days

Fixed that as well. Had to add
.pipe($.concat('app.js'))
After '.pipe(webpackStream(webpackConfig, webpack2))'
Topic closed.

You commented on Nick TC's post 12 days

Ok, I think I worked it out. I ones created my project using the ZURB template (https://github.com/zurb/foundation-zurb-template/). It appears that Bower is dropped, and not used anymore. I am wondering if there were every migration notes about this?
I now have it almost all working, except for the following. In my 'gulpfile.babel.js' i have the following:
// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
return gulp.src(PATHS.entries)
.pipe(named())
.pipe($.sourcemaps.init())
.pipe(webpackStream(webpackConfig, webpack2))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/js'));
}
And my PATHS.entries inside my config.yml is:
# Paths to JavaScript entry points for webpack to bundle modules
entries:
- "node_modules/select2/dist/js/select2.min.js"
- "src/assets/js/!(app).js"
- "src/assets/js/app.js"
As you can see I am also including some other JS files that don't have the name app.js (!(app).js). Previously this worked fine, and all JS files were combined into 1 single app.js file. But since this webpack change, those files are copied over to the dist folder instead of merged into the app.js file. This is what I get when I run 'npm start'
[11:05:50] Starting 'javascript'...
[11:05:50] Starting 'images'...
[11:05:50] Starting 'copy'...
[11:05:51] Finished 'copy' after 374 ms
[11:05:54] Finished 'sass' after 3.44 s
[11:05:54] Finished 'images' after 3.52 s
[11:05:56] Version: webpack 2.7.0
Asset Size Chunks Chunk Names
grid.js 5.34 kB 6 [emitted] grid
app.js 678 kB 0 [emitted] [big] app
select2.js 6.06 kB 2 [emitted] select2
search.js 2.97 kB 3 [emitted] search
rememberstate.js 6.59 kB 4 [emitted] rememberstate
identifier.js 6.27 kB 5 [emitted] identifier
select2.min.js 362 kB 1 [emitted] [big] select2.min
energy.js 5.87 kB 7 [emitted] energy
customfield.js 3.49 kB 8 [emitted] customfield
checkout.js 3.4 kB 9 [emitted] checkout
charts.js 7.44 kB 10 [emitted] charts
callout.js 3.17 kB 11 [emitted] callout
[11:05:56] Finished 'javascript' after 5.84 s
All these files that I created myself (customfield.js, callout.js, etc) are simple regular JS stuff. No fancy ES-stuff :-).
Can someone explain why it's not combining all files into 1 single app.js file?
 

You commented on Nick TC's post 12 days

Hi Rafi,
I didn't change anything, except that I upgraded my Foundation 6.3 to a 6.4.
 
It seems to go wrong here:
Object.defineProperty(exports, "__esModule", {
The full block of code is:
"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Foundation = undefined;
In the console I litterally get this:
Uncaught ReferenceError: exports is not defined

at app.js:10187</code></pre>

 
 

You commented on Dan's post over 1 year

Hi Dan,

You could look at http://gulpjs.com/. This is the (task)engine used for 'building' your website/assets. Some tasks will only be executed in case of a production build (npm run build). For example:

// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function (e) {
      console.log(e);
    }));

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.concat('app.js'))
    .pipe(uglify)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('./dist/assets/js'));
});

You can see here that in case of production it will uglify, and it will not write sourcemaps.

You commented on Dan's post over 1 year

Just run 'npm run build' instead of 'npm start'. It will let gulp run additional tasks like minifying, etc. Removeing components that you don't like to use can be simply done by commenting out the specific includes in the top of your app.scss file before you execute 'npm start'.

You commented on Nick TC's post over 1 year

Great, that resolved the problem!

You commented on Nick TC's post over 1 year

@sankhabanerjee, this is exactly how it comes out of the Zurb Advanced template stack. I don't think it's a problem of how I load the JS, it's just a bug in the framework.

You commented on Nick TC's post almost 2 years
You commented on Nick TC's post almost 2 years

@Knight Yoshi
Are you sure? Like I said I am using the full stack, so everything is combined into 1 css and 1 js file. I think both files contain jquery, foundation, motion ui, etc. You can see that my main menu is working fine (js based), and also the equalizer is working fine. Only problem is Orbit + Equalizer, that's causing the orbit to not work. Without equalizer it's all fine.

@Brandon Arnold
I am missing includes, or is this a bug?

You commented on Nick TC's post almost 2 years

@Brandon Arnold @Rafi Benkual

Could you please help me to at least determine if the problem is on my or Foundation side? The biggest problem for now is that the Orbit is not working (= taking up space for slides that should not be shown). Currently running Foundation 6.0.6.

http://www.victoria28.nl/f6/home.html

Next to that the other problems are also still there. When using production setting JS is not working (orbit, menu, etc). There is still a shadow in the bottom of the page. Since 6.0.6 the search button is not fitting in the topbar and is being stacked. Not sure if this is a bug or desired functionality on a big screen (for now I commented out the search box).

At least help me with the Orbit problem. Is it caused in my or your domain? And if in your domain, is this issue known and being fixed?

Posts Followed

Following

  • No Content

Followers

  • No Content