Add responsive height feature

[sahilchinoy]

Adds two settings, use_responsive_height and responsive_height_limit. If use_responsive_height is yes, then the height of the artboard will not exceed responsive_height_limit percent of the window height. If every artboard exceeds this height, ai2html will display the smallest artboard (by width).

Note that responsive_height_limit must be between 0 and 100 inclusive.

[sahilchinoy]

This looks good to me, but here's an edge case we haven't handled. Suppose there are two artboards with a min_width of 300px. One has an aspect ratio of 1, the other has an aspect ratio of 2. The viewport is 1000px tall, responsive_height_limit is 90. Neither artboard overflows the height limit. Currently, the resizer will pick the first artboard. Do we want to pick the second one, since it takes up more of the vertical height of the page, without overflowing?

[sahilchinoy]

Here is a (currently failing) test that illustrates what I'm talking about:

it('height-limited, "fixed", two artboards with same width, neither overflow height limit', function () {
      var data = [
        // two abs have same width but neither overflows -> pick the tallest one
        {id: 0, min_width: 300, aspect_ratio: 1},
        {id: 1, min_width: 300, aspect_ratio: 2}
      ];
      var opts = {responsiveness: 'fixed', responsive_height_limit: 90};
      var containerWidth = 400;
      var windowHeight = 1000; // limit is 900px
      var expect = {
        id: 0, min_width: 300, aspect_ratio: 1};
      var result = findVisibleArtboard(data, containerWidth, windowHeight, opts);
      assert.deepEqual(result, expect);
});

[mbloch]

After talking with Archie, it looks like we'll need to change the behavior of our updated resizer function a bit. We need be able to display multiple artboards at the same time if they have the same minimum width, and they should be in the same order as the original artboards in the Artboards palette of the AI document.