From 58967e1e338b036ecf20e877af3ac4dcfd8c3324 Mon Sep 17 00:00:00 2001 From: Jon Nordby Date: Thu, 16 Oct 2014 01:11:34 +0200 Subject: [PATCH] Add rig.simple, for breaks on single element Fixes #1 --- index.coffee | 28 ++++++++++++++++++++++++++++ spec/rig.coffee | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+) diff --git a/index.coffee b/index.coffee index 89f37b6..589acf4 100644 --- a/index.coffee +++ b/index.coffee @@ -96,5 +96,33 @@ rig = (block, config, graph, params, items) -> return mediaQueries.join '\n\n' +rig.simple = (block, config, selector, graph, params, breaks, dimension) -> + + if not graph + graph = 'passthrough' + if not params + params = {} + if not dimension + dimension = 'width' + if not breaks + breaks = [ 400, 800, 1600 ] + + items = [] + for idx in [0...breaks.length] + br = breaks[idx] + size = if idx == breaks.length-1 then br else br-1 + query = if idx == 0 + "(max-#{dimension}: #{br-1}px)" + else if idx == breaks.length-1 + "(min-#{dimension}: #{breaks[idx-1]}px)" + else + "(min-#{dimension}: #{breaks[idx-1]}px) and (max-#{dimension}: #{br-1}px)" + item = + selector: selector + query: query + item[dimension] = size + items.push item + + return rig block, config, graph, params, items module.exports = rig diff --git a/spec/rig.coffee b/spec/rig.coffee index 1045c5f..153c95f 100644 --- a/spec/rig.coffee +++ b/spec/rig.coffee @@ -592,3 +592,41 @@ describe 'Responsive image generator', -> } } """ + + describe 'using simple breaks on single element', -> + + it 'should generate equivalent media query to full notation', -> + + fakeBlock = + type: 'media' + cover: + src: 'https://a.com/b.png' + width: 1600 + height: 900 + + config = + server: 'https://imgflo.herokuapp.com/' + key: process.env.IMGFLO_KEY + secret: process.env.IMGFLO_SECRET + + params = + 'std-dev-x': 15 + 'std-dev-y': 15 + selector = '#my-favorite-id' + + ref = rig fakeBlock, config, 'gaussianblur', params, [ + query: '(max-width: 399px)' + selector: selector + width: 399 + , + query: '(min-width: 400px) and (max-width: 589px)' + selector: selector + width: 589 + , + query: '(min-width: 590px)' + selector: selector + width: 1368 + ] + + css = rig.simple fakeBlock, config, selector, 'gaussianblur', params, [400, 590, 1368], 'width' + expect(css).to.equal ref