Skip to content

Instantly share code, notes, and snippets.

View toddzebert's full-sized avatar
💭
coding, of course

Todd Zebert toddzebert

💭
coding, of course
14 followers · 14 following
View GitHub Profile
@toddzebert
toddzebert / simpleMVC.Event.js
Last active November 18, 2016 08:54
The Event module of a simple MVC implementation, in ES6 and module pattern
/**
* Event Listeners and notifications module
*/
var simpleMVC = (function simpleMVC(simple) {
'use strict';
// sender is the context of the Model or View which originates the event
simple._Event = function SimpleEvent(sender) {
this._sender = sender;
this._listeners = [];
@toddzebert
toddzebert / index.html
Last active January 18, 2017 02:43
A small pure-JS "library" similar to jQuery's fadeIn and fadeOut methods, using requestAnimationFrame.
<!DOCTYPE html>
<head>
<script src="loa.js"></script>
</head>
<body>
<h1 id="fade-in-slow">Fade in slow</h1>
<h2 id="fade-out-slower">Fade out slower</h2>
<h3 id="fade-in-out">Fade in and out</32>
<script>
@toddzebert
toddzebert / simpleMVC.Model.js
Last active January 23, 2017 07:59
The Model module of a simple MVC implementation, in ES6 and module pattern
/**
* Simple MVC, 2016 Todd Zebert
* Model module
*/
var simpleMVC = (function simpleMVC(simple) {
'use strict';
simple.Model = function SimpleModel(data) {
this._data = data;
@toddzebert
toddzebert / simpleMVC.OneWayView.js
Last active January 23, 2017 08:51
The OneWayView module of a simple MVC implementation, in ES6 and module pattern
/**
* A 1-way View Module
*/
var simpleMVC = (function simpleMVC(simple) {
'use strict';
simple.OneWayView = function simpleOneWayView(model, selector) {
this._model = model;
this._selector = selector;
@toddzebert
toddzebert / simpleMVC.TwoWayView.js
Created January 23, 2017 08:51
The TwoWayView module of a simple MVC implementation, in ES6 and module pattern
/**
* 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
toddzebert / simpleMVC.Controller.js
Created January 23, 2017 08:59
The Controller module of a simple MVC implementation, in ES6 and module pattern
/**
* Controller module
*/
var simpleMVC = (function simpleMVC(simple) {
'use strict';
simple.Controller = function SimpleController(model, view) {
this._model = model;
this._view = view;
@toddzebert
toddzebert / bpExport.scss
Created February 10, 2017 06:02
Sharing CSS breakpoints with JavaScript - SCSS
@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
toddzebert / bpExport.demo.scss
Last active February 10, 2017 06:31
Sharing CSS breakpoints with JavaScript - Demo SCSS
// 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
toddzebert / bpExport.js
Last active February 10, 2017 06:53
Sharing CSS breakpoints with JavaScript - JavaScript
// 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
toddzebert / bpExport.demo.js
Last active February 10, 2017 06:57
Sharing CSS breakpoints with JavaScript - Demo JavaScript
$(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);