toddzebert

// requires https://gist.github.com/toddzebert/b4465de41b0f8d317d7a685604983c36
function asyncSim (res, data, onDone) {
  var result = (typeof res === "function") ? res(data) : res;
  setTimeout(function () { onDone(result); }
  , randInt(400, 200));
};

toddzebert

function randInt (spread, base) {
  return Math.floor(Math.random() * spread + (isNaN(base) ? 0: base));
}

toddzebert

site breakpoint: <span class="my-site-breakpoint"></span>

<div class="my-div">
  my div breakpoint: <span class="my-div-breakpoint"></span>
</div>

<div class="my-color-div"></div>

toddzebert

$(function() {
  
  bodyBP = bpExport.breakpoint('body');
  bodyBP.onChange(function(bp) {
    $('.my-site-breakpoint').html(bp);
  });
  
  myDivBP = bpExport.breakpoint('.my-div');
  myDivBP.onChange(function(bp) {
    $('.my-div-breakpoint').html(bp);

toddzebert

// see https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript

// module pattern
var bpExport = (function (bpExport) {
  
  // this will create a closure
  bpExport.breakpoint = function(sel) {
    
    // define private state
    var state = null;

toddzebert

// set our site's breakpoints
$site-breakpoints: (
  "small": 320px,
  "medium": 460px,
  "large": 969px,
  "x-large": 1061px,
  "xx-large": 1284px
);

@include add-bp($site-breakpoints);

toddzebert

@import "breakpoint";

// loop through the map and add the breakpoints
@mixin add-bp($bps) {
  @each $bp-name, $bp in $bps {
    @include add-breakpoint($bp-name, $bp);
  }
}

// loop through the map and set `content`

toddzebert

/**
 * Controller module
 */
var simpleMVC = (function simpleMVC(simple) {
  'use strict';

  simple.Controller = function SimpleController(model, view) {

    this._model = model;
    this._view = view;

toddzebert

/**
 * A 2-way View Module
 */
var simpleMVC = (function simpleMVC(simple) {
  'use strict';

  // selector is a DOM element that supports .onChanged and .value
  simple.TwoWayView = function simpleTwoWayView(model, selector) {

    this._model = model;

toddzebert

/**
 * A 1-way View Module
 */
var simpleMVC = (function simpleMVC(simple) {
  'use strict';

  simple.OneWayView = function simpleOneWayView(model, selector) {

    this._model = model;
    this._selector = selector;