Ratio Tagger

README.md

Aspect Ratio Tagger

Usage

(function(){
  var aspect_ratios = {
    0.75: 'portrait',
    1: 'square',
    1.3333: 'landscape',
    1.7777: 'wide'
  };

  var tagger = new RatioTagger({ratios: aspect_ratios, css_prefix: 'aspect-ratio', class_name: 'splat-image'});
  tagger.update();
  window.onresize = function() { tagger.update(); }
})();

ratio_tagger.coffee

class RatioTagger
  constructor: ({ratios: @ratios, css_prefix: @prefix, class_name: @class_name}) ->    

  update: ->
    elements = document.getElementsByClassName(@class_name)
    for element in elements
      @clear_aspect_class(element)
      @add_aspect_class(element)
    elements

  clear_aspect_class: (element) ->
    class_list = element.classList
    remove_list = @aspect_classes(class_list, @prefix)
    class_list.remove(css_class) for css_class in remove_list
    remove_list

  add_aspect_class: (element) ->
    this_aspect = element.offsetWidth/element.offsetHeight
    near_aspects = for aspect, name of @ratios
                     [Math.abs(this_aspect - aspect), name]
    [[error, name]] = near_aspects.sort ([a], [b])-> a - b
    element.classList.add "#{@prefix}-#{name}"
    element

  aspect_classes: (class_list, prefix) ->
    expr = new RegExp("^#{@prefix}")
    css_class for css_class in class_list when css_class.match(expr)

window["RatioTagger"] = RatioTagger

ratio_tagger.js

// Generated by CoffeeScript 1.10.0
(function() {
  var RatioTagger;

  RatioTagger = (function() {
    function RatioTagger(arg) {
      this.ratios = arg.ratios, this.prefix = arg.css_prefix, this.class_name = arg.class_name;
    }

    RatioTagger.prototype.update = function() {
      var element, elements, i, len;
      elements = document.getElementsByClassName(this.class_name);
      for (i = 0, len = elements.length; i < len; i++) {
        element = elements[i];
        this.clear_aspect_class(element);
        this.add_aspect_class(element);
      }
      return elements;
    };

    RatioTagger.prototype.clear_aspect_class = function(element) {
      var class_list, css_class, i, len, remove_list;
      class_list = element.classList;
      remove_list = this.aspect_classes(class_list, this.prefix);
      for (i = 0, len = remove_list.length; i < len; i++) {
        css_class = remove_list[i];
        class_list.remove(css_class);
      }
      return remove_list;
    };

    RatioTagger.prototype.add_aspect_class = function(element) {
      var aspect, error, name, near_aspects, ref, this_aspect;
      this_aspect = element.offsetWidth / element.offsetHeight;
      near_aspects = (function() {
        var ref, results;
        ref = this.ratios;
        results = [];
        for (aspect in ref) {
          name = ref[aspect];
          results.push([Math.abs(this_aspect - aspect), name]);
        }
        return results;
      }).call(this);
      ref = near_aspects.sort(function(arg, arg1) {
        var a, b;
        a = arg[0];
        b = arg1[0];
        return a - b;
      })[0], error = ref[0], name = ref[1];
      element.classList.add(this.prefix + "-" + name);
      return element;
    };

    RatioTagger.prototype.aspect_classes = function(class_list, prefix) {
      var css_class, expr, i, len, results;
      expr = new RegExp("^" + this.prefix);
      results = [];
      for (i = 0, len = class_list.length; i < len; i++) {
        css_class = class_list[i];
        if (css_class.match(expr)) {
          results.push(css_class);
        }
      }
      return results;
    };

    return RatioTagger;

  })();

  window["RatioTagger"] = RatioTagger;

}).call(this);

//# sourceMappingURL=ratio_tagger.js.map

ratio_tagger.js.map

{
  "version": 3,
  "file": "ratio_tagger.js",
  "sourceRoot": "",
  "sources": [
    "ratio_tagger.coffee"
  ],
  "names": [],
  "mappings": ";AAAA;AAAA,MAAA;;EAAM;IACS,qBAAC,GAAD;MAAU,IAAC,CAAA,aAAT,QAA6B,IAAC,CAAA,aAAb,YAAiC,IAAC,CAAA,iBAAb;IAAxC;;0BAEb,MAAA,GAAQ,SAAA;AACN,UAAA;MAAA,QAAA,GAAW,QAAQ,CAAC,sBAAT,CAAgC,IAAC,CAAA,UAAjC;AACX,WAAA,0CAAA;;QACE,IAAC,CAAA,kBAAD,CAAoB,OAApB;QACA,IAAC,CAAA,gBAAD,CAAkB,OAAlB;AAFF;aAGA;IALM;;0BAOR,kBAAA,GAAoB,SAAC,OAAD;AAClB,UAAA;MAAA,UAAA,GAAa,OAAO,CAAC;MACrB,WAAA,GAAc,IAAC,CAAA,cAAD,CAAgB,UAAhB,EAA4B,IAAC,CAAA,MAA7B;AACd,WAAA,6CAAA;;QAAA,UAAU,CAAC,MAAX,CAAkB,SAAlB;AAAA;aACA;IAJkB;;0BAMpB,gBAAA,GAAkB,SAAC,OAAD;AAChB,UAAA;MAAA,WAAA,GAAc,OAAO,CAAC,WAAR,GAAoB,OAAO,CAAC;MAC1C,YAAA;;AAAe;AAAA;aAAA,aAAA;;uBACE,CAAC,IAAI,CAAC,GAAL,CAAS,WAAA,GAAc,MAAvB,CAAD,EAAiC,IAAjC;AADF;;;YAEG,YAAY,CAAC,IAAb,CAAkB,SAAC,GAAD,EAAM,IAAN;AAAa,YAAA;QAAX,IAAD;QAAM,IAAD;eAAO,CAAA,GAAI;MAAjB,CAAlB,MAAhB,gBAAO;MACT,OAAO,CAAC,SAAS,CAAC,GAAlB,CAAyB,IAAC,CAAA,MAAF,GAAS,GAAT,GAAY,IAApC;aACA;IANgB;;0BAQlB,cAAA,GAAgB,SAAC,UAAD,EAAa,MAAb;AACd,UAAA;MAAA,IAAA,GAAW,IAAA,MAAA,CAAO,GAAA,GAAI,IAAC,CAAA,MAAZ;AACX;WAAA,4CAAA;;YAA2C,SAAS,CAAC,KAAV,CAAgB,IAAhB;uBAA3C;;AAAA;;IAFc;;;;;;EAIlB,MAAO,CAAA,aAAA,CAAP,GAAwB;AA5BxB"
}

ratio_tagger.min.js

(function(){var t;t=function(){function t(t){this.ratios=t.ratios,this.prefix=t.css_prefix,this.class_name=t.class_name}return t.prototype.update=function(){var t,s,e,a;for(s=document.getElementsByClassName(this.class_name),e=0,a=s.length;a>e;e++)t=s[e],this.clear_aspect_class(t),this.add_aspect_class(t);return s},t.prototype.clear_aspect_class=function(t){var s,e,a,r,i;for(s=t.classList,i=this.aspect_classes(s,this.prefix),a=0,r=i.length;r>a;a++)e=i[a],s.remove(e);return i},t.prototype.add_aspect_class=function(t){var s,e,a,r,i,n;return n=t.offsetWidth/t.offsetHeight,r=function(){var t,e;t=this.ratios,e=[];for(s in t)a=t[s],e.push([Math.abs(n-s),a]);return e}.call(this),i=r.sort(function(t,s){var e,a;return e=t[0],a=s[0],e-a})[0],e=i[0],a=i[1],t.classList.add(this.prefix+"-"+a),t},t.prototype.aspect_classes=function(t,s){var e,a,r,i,n;for(a=new RegExp("^"+this.prefix),n=[],r=0,i=t.length;i>r;r++)e=t[r],e.match(a)&&n.push(e);return n},t}(),window.RatioTagger=t}).call(this);
//# sourceMappingURL=ratio_tagger.min.js.map

ratio_tagger.min.js.map

{"version":3,"file":"ratio_tagger.js","sources":["ratio_tagger.coffee"],"names":["RatioTagger","arg","this","ratios","prefix","css_prefix","class_name","update","element","elements","i","len","document","getElementsByClassName","length","clear_aspect_class","add_aspect_class","class_list","css_class","remove_list","classList","aspect_classes","remove","aspect","error","name","near_aspects","ref","this_aspect","offsetWidth","offsetHeight","results","Math","abs","sort","arg1","a","b","add","expr","RegExp","match","window"],"mappings":"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"}