freewall.js from bower not working (at least with flex-grid.html example)

aleixfabra commented 9 years ago

Freewall is not defined.

captura de pantalla 2015-08-12 a las 15 32 56

drawcard commented 8 years ago

I'm getting this error as well.

drawcard commented 8 years ago

Well I've found a solution but it's not ideal... I'm using a framework called Sage that uses Bower in a Gulp pipeline to get all of Bower's scripts and compile them out (along with custom JS) into a single minified file - main.js. For some reason, freewall.js gets called & compiled correctly by Gulp, but something must be mangling the user's "Freewall" function that's required to trigger the script.

My solution is to remove that function from my custom JS file (/assets/scripts/main.js), and then put it in the footer of my PHP template, like so. Now the reference works properly.

# /templates/footer.php

<?php

use Roots\Sage\Setup;
use Roots\Sage\Wrapper;

// PHP Debugging - uncomment these to turn on notices
// ini_set('display_errors', 'On');
// error_reporting(E_ALL);

?>

<?php include('lib/pods.php'); //Include custom field variables ?>

<!doctype html>
<html <?php language_attributes(); ?>>
  <?php get_template_part('templates/head'); ?>
  <body <?php body_class(); ?>>
    <!--[if IE]>
      <div class="alert alert-warning">
        <?php _e('You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.', 'sage'); ?>
      </div>
    <![endif]-->

    <?php
      do_action('get_header');
      /* Default Sage Nav Walker */
      get_template_part('templates/header');
      /* Bootstrap Nav Walker */
      // get_template_part('templates/header-bootstrap-nav-walker');
    ?>
    <div class="wrap container-fluid" role="document">
      <div class="content row">
        <main class="main">
          <?php include Wrapper\template_path(); ?>
        </main><!-- /.main -->
        <?php if (Setup\display_sidebar()) : ?>
          <aside class="sidebar">
            <?php include Wrapper\sidebar_path(); ?>
          </aside><!-- /.sidebar -->
        <?php endif; ?>
      </div><!-- /.content -->
    </div><!-- /.wrap -->
    <?php
      do_action('get_footer');
      /* Default Sage Nav Walker */
      get_template_part('templates/footer');
      /* Bootstrap Nav Walker */
      // get_template_part('templates/footer-bootstrap-nav-walker');
      wp_footer();
    ?>
    <script>

// FREEWALL.JS
    var wall = new Freewall("#gallery-2");
            wall.reset({
                selector: '.gallery-item',
                animate: true,
                cellW: 200,
                cellH: 'auto',
                onResize: function() {
                    wall.fitWidth();
                }
            });

            wall.container.find('.gallery-item img').load(function() {
                wall.fitWidth();
            });

    </script>
  </body>
</html>

If anyone can shed light on what the exact problem is, that would be great. My gut feeling is that the minifying going on with Gulp is causing the function to fail.

drawcard commented 8 years ago

Another point too, I had to tell Bower to fetch the master branch of Freewall as well, which may be out of sync with the Bower declared version?

bower install --save kombai/freewall#master

After some more experimentation, I've determined that the "var" code definately does not like being minified.

I was able to put it back into my custom JS file in the pipeline after switching off the minifier in Gulp. No need to place it in the footer now unless you want the script unminified.

# /gulpfile.js

//...snip...

var jsTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.init());
    })
    .pipe(concat, filename)
    //.pipe(uglify, {
    //  compress: {
    //    'drop_debugger': enabled.stripJSDebug
    //  }
    //})
    .pipe(function() {
      return gulpif(enabled.rev, rev());
    })

//...snip...

drawcard commented 8 years ago

Foxaii over at the Roots forum suggested a minor alteration that worked for me, and now allows me to minify the Freewall var code:


//Before
var wall = new Freewall("#gallery-2");

//After
var wall = new window.Freewall("#gallery-2");

kombai commented 8 years ago

Fixed with the new release (1.0.6)

https://github.com/kombai/freewall/releases/tag/1.0.6

kombai / freewall

freewall.js from bower not working (at least with flex-grid.html example) #181