0

I think this could be really useful to the masses. I've so far not found a alternative. If you know of one, please do advise.

My use case is having a banner with a height of 85% of the viewport. The new vh, vw and vmin length units in CSS are great for this. Except they don't work in all browsers and devices.

The vminpoly library looks like a great solution. At window resize time, it generates CSS code for the 'px' equivalents and appends it in a 'style' element at the end of the 'head' element. The generated code respects media queries.

On their demo the JS part of the source code, in the footer, looks like this:

<script type="text/javascript">
      if (!Array.prototype.filter)
      {
        Array.prototype.filter = function(fun /*, thisp*/)
        {
          var len = this.length;
          if (typeof fun != "function")
            throw new TypeError();

          var res = new Array();
          var thisp = arguments[1];
          for (var i = 0; i < len; i++)
          {
            if (i in this)
            {
              var val = this[i]; // in case fun mutates this
              if (fun.call(thisp, val, i, this))
                res.push(val);
            }
          }

          return res;
        };
      }
    </script>
    <script src="tokenizer.js"></script>
    <script src="parser.js"></script>
    <script src="vminpoly.js"></script>

So being as there isn't much to the module and in the interest of being complete, here are my files:

vminpoly.info

name = Vminpoly
description = Adds the vminpoly javascript plugin. It adds support to allow the use of vw,vh/vmin units in your theme.
core = 7.x
dependencies[] = libraries

vminpoly.module

<?php

/**
 * Implements hook_libraries_info().
 */
function vminpoly_libraries_info() {
  $libraries = array();
  $libraries['vminpoly'] = array(
    'name' => 'Vminpoly',
    'vendor url' => 'https://github.com/saabi/vminpoly',
    'download url' => 'https://github.com/saabi/vminpoly',
    'version callback' => 'short_circuit_version',
    'files' => array(
      'js' => array(
        'tokenizer.js',
        'parser.js',
        'vminpoly.js',        
      ),
    ),
  );

  return $libraries;
}


/**
* Short-circuit the version argument.
*/
function short_circuit_version() { 
  return TRUE;
}

/**
* Load all files
*/
drupal_add_js('if (!Array.prototype.filter) { Array.prototype.filter = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var res = new Array(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) { var val = this[i]; if (fun.call(thisp, val, i, this)) res.push(val); } } return res; }; }', array('type' => 'inline'));
$name = 'vminpoly';
libraries_load($name);

I'm sure this will be of help to others, maybe even you.

The question is what is wrong with it. I'm pretty confident (famous last words) that everything is as it should be, except the vminpolydrupal.js file. I'm sure its my lack of understanding when it comes to behaviours and tbh JS generally. I feel as though "context" needs to be added to their code snippet somewhere.

I'm out of my comfort zone and learning. Please help...

4
  • 1
    That code shouldn't be in a behavior, also shouldn't be in a closure at all. You're manipulating something in the global scope, that's where the code should be. It's plain JS, doesn't add any functionality to Drupal, or with jQuery, so wrapping it up in those structures is just confusing, potentially stopping it from working
    – Clive
    Commented Nov 2, 2016 at 22:10
  • Thanks for your help Clive. So does that mean I should just put their code from the demo as it is into the .js file? What I was hoping to achieve was a module that i could turn on to convert those length units in my theme, as mentioned above
    – gMaximus
    Commented Nov 2, 2016 at 22:25
  • 1
    Personally if that's all you've got I'd minify it and add it inline in the <head> - it adds basically no weight to a gzipped page and having it in the head will make it available to the js engine as early as possible. I doubt it'll slow the page load down anything noticeable either
    – Clive
    Commented Nov 2, 2016 at 22:54
  • Just updated the post by removing my JS file and putting it inline inside the .module file. Should that work? Because it doesn't seem to be on my site
    – gMaximus
    Commented Nov 2, 2016 at 23:36

1 Answer 1

0

So I had a few problems with this. First of all my .module file defined a library because that felt like the proper way to do it. However I received errors in the console and needless to say that it didn't work. After Googling the error I found out that it happens when everything is in the head.

So I removed the library implementation. Then the script itself didn't work. Again after searching on Google I found a fork of it where the guy had fixed those errors. This can be found at: https://github.com/gfaceless/vminpoly

I created a directory called lib, then placed parse-css.js & vminpoly.js in it.

My .module file became:

<?php

/**
* Load all files / JS
*/

drupal_add_js('if (!Array.prototype.filter) { Array.prototype.filter = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var res = new Array(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) { var val = this[i]; if (fun.call(thisp, val, i, this)) res.push(val); } } return res; }; }', array('type' => 'inline', 'scope' => 'footer'));
drupal_add_js(drupal_get_path('module', 'vminpoly') . '/lib/parse-css.js', array('scope' => 'footer'));
drupal_add_js(drupal_get_path('module', 'vminpoly') . '/lib/vminpoly.js', array('scope' => 'footer'));

Also removed dependencies[] = libraries from the .info. Lastly, for me it didn't kick in unless I aggregated my CSS files.

Hope this helps others. Now my vh, vw and vmin length units work across browsers. Happy days!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.