Skip to content

Instantly share code, notes, and snippets.

View megawac's full-sized avatar

Graeme Yeates megawac

  • Clearpath Robotics
  • Waterloo, Ontario
View GitHub Profile
@megawac
megawac / gist:8201012
Last active January 1, 2016 20:59
Saving the state of an element and its children.

Problem

A problem I ran into implementing my MutationObserver shimmed interface is being able to save the state of an elements children for later use. Naively I started by just using $oldnode = $node.cloneNode(true) which would give me an atomic node at a previous state. The problem with using cloneNode is when it comes time to compare. Any children in $oldnode will be !== to the same child in $node.

I addressed this issue by assigning a unique id to all elements and checking if the unique id of an old node is the same as from an earlier state. This is ugly and noone wants me adding my own unique id property on their elements.

var counter = 0;
var getId = function($ele) {
 var id = $ele.nodeType === 3 ? $ele.nodeValue ://text node id is the text content
@megawac
megawac / jsbin.uhoVibU.html
Created December 31, 2013 02:51
childList and subtree tests
<!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/qunit/qunit-git.css" rel="stylesheet" type="text/css" />
<script src="//cdn.jsdelivr.net/es5.shim/2.1.0/es5-shim.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/curl.js/0.7.5/jquery/curl.js"></script>
<script src="//code.jquery.com/qunit/qunit-git.js"></script>
<script src="//www.broofa.com/Tools/JSLitmus/JSLitmus.js"></script>
@megawac
megawac / css-calc-polyfill.js
Last active December 22, 2015 20:18
Mootools css calc polyfill. Only for relatively simple cases. Usage: util.calc($$('div')[8], 'width', '70% - 40px'); This will yield a cross browser calc. It uses native if it should be supported. Only supporting a few units for now.
//http://caniuse.com/#feat=calc
//union bool str (-webkit-calc, -moz-calc, calc)
//alternatively see last version where i did a version check based on can i use
document.addEvent("domready", function() {//based off https://gist.github.com/Rob-ot/3399053
Browser.Features.calc = false;//union bool str (-webkit-calc, -moz-calc, calc)
["","-webkit-","-moz-","-o-"].some(function(prefix) {
var $el = new Element('div', {
styles: {
width: prefix + "calc(5px)"
}
/**
* Assign a value to the delimited key in the given object. The inverse of `_.lookup`
*
* @example
*
* var myObj = {};
*
* _.assign(myObj, 'foo.bar', 'baz'); // myObj = { foo: { bar: 'baz' }}
*
* @param {Object} obj the object to assign to