Skip to content

Instantly share code, notes, and snippets.

@dustinrjo
Created March 31, 2015 23:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dustinrjo/41878f68a73278600cb4 to your computer and use it in GitHub Desktop.
Save dustinrjo/41878f68a73278600cb4 to your computer and use it in GitHub Desktop.
Angular JS directive to Maintaining Aspect Ratio for any block level element
app.directive 'aspectRatio', () ->
exports =
scope: {}, # reset scope value to empty between each element otherwise shared ng-repeat pairs will share scope
replace: false, # this keeps the container element on the page
transclude: true, # this wraps the template around the content rather than placing the template inside the content
templateUrl: 'app/directives/aspect-ratio.jade',
link: (scope, elem, attrs) ->
# initialize basic aspect ratio
if attrs.aspectRatio
scope.ratio = (attrs.aspectRatio*100) + '%'
# set mobile ratio value to scope for testing
scope.attrsmobile = attrs.aspectRatioMobile
# capture and apply min height value, assumes pixel value without unit suffix
if attrs.minHeight
scope.minHeight = attrs.minHeight + 'px'
# test for blank mobile aspect ratio
if attrs.aspectRatioMobile is '' or attrs.aspectRatioMobile is undefined
scope.mobileratio = scope.ratio
# test for explicit mobile aspect ratio and apply value
if attrs.aspectRatioMobile isnt '' and attrs.aspectRatioMobile isnt undefined and attrs.aspectRatioMobile isnt 'auto'
scope.mobileratio = (attrs.aspectRatioMobile*100) + '%' # convert the aspect ratio to height % for padded element
scope.auto = false # prevenet auto aspect ratio for mobile
if attrs.aspectRatioMobile is 'auto'
scope.auto = true
.aspect-ratio-block
.set-aspect-ratio(ng-class="{'auto-height': auto == true}", ng-style="{'min-height': minHeight}")
.sizing-element.desktop-ratio(ng-style="{'padding-top': ratio}")
.sizing-element.mobile-ratio(ng-style="{'padding-top': mobileratio}")
.content-element
.transcluded(ng-transclude)
// ASPECT RATIO DIRECTIVE
// ---------------------------------------------------------------------------
.set-aspect-ratio
position relative
display block
width 100%
.content-element
absolute top left
right 0px
bottom 0px
.transcluded
height 100%
+below(tablet-portrait)
.sizing-element
&.mobile-ratio
display block
&.desktop-ratio
display none
.set-aspect-ratio.auto-height
display inline-block
.content-element
// border 10px solid blue
height auto
min-height 200px
position static
.sizing-element
display none !important
+above(769px)
.sizing-element
&.mobile-ratio
display none
&.desktop-ratio
display block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment