Jason Mitchell jasonmit

🌴

On a hiatus from open source

jasonmit / evented-localStorage.js

Created December 1, 2013 08:10

Evented localStorage (used for data-binding)

	var store = (function($) {
	if(typeof(Storage) === 'undefined') {
	throw new Error('This browser does not support localStorage')
	}

	var _$ = $({});

	this.get = function(key) {
	return localStorage.hasOwnProperty(key) ? localStorage[key] : false;
	};

jasonmit / gist:7819701

Created December 6, 2013 07:02

My base64 Ember View for File Uploading

	var UploaderView = Ember.ContainerView.extend({
	tagName: 'button',
	classNames: ['btn', 'btn-white', 'has-icon', 'uploader'],

	didInsertElement: function() {
	this.pushObject(this.uploadView.create());
	},

	render: function(buffer) {
	buffer.push('<i class="icon-download"></i> Upload');

jasonmit / custom-list-view.js

Created December 18, 2013 23:49

Ember list view

	import LazyLoadingViewMixin from 'app/mixins/grouped_view';
	import LoadingBarView from 'app/views/universal/loading_bar';

	var EntityListView = Ember.CollectionView.extend(LazyLoadingViewMixin, {
	tagName: 'ul',
	classNames: ['list-group']
	});

	var ContainerView = Ember.ContainerView.extend({
	childViews: ['loader', 'list'],

jasonmit / gist:8193147

Created December 31, 2013 05:52

Custom Ember Textfield Input where placeholder floats to top of input when populated

	Working example http://jsfiddle.net/NQKvy/475/

	<script type="text/x-handlebars" data-template-name="application">
	{{outlet}}
	</script>

	<script type="text/x-handlebars" data-template-name="index">
	{{view 'form-group' placeholder='First Name'}}
	{{view 'form-group' placeholder='Last Name'}}
	{{view 'form-group' placeholder='Website'}}

jasonmit / gist:8235003

Last active January 2, 2016 02:09

Ember: Loading Substate Entry Threshold - Prevents the loading substate from entering when not needed

	var ApplicationRoute = Ember.Route.extend({
	actions: {
	/*
	* Ensures that the loading substate is not entered until at least
	* 500ms of waiting for the model to resolve
	*/
	loading: function() {
	var scheduledIntermediate = Ember.run.later(this, function() {
	this.intermediateTransitionTo('loading');
	}, 500);

jasonmit / gist:8728438

Created January 31, 2014 08:32

Simple Ember Tree View

	<script type="text/x-handlebars" data-template-name="application">
	{{outlet}}
	</script>

	<script type="text/x-handlebars" data-template-name="tree-item">
	{{#if view.hasChildren}}
	<a {{action 'expand' target=view}}>
	{{#if view.parentView.shrinkDepth}}
	{{{view.parentView.depthLabel}}}
	{{/if}}

jasonmit / gist:9046681

Created February 17, 2014 08:13

Ember: Partial model loading vs waiting for complete model (http://jsfiddle.net/NQKvy/704/)

	<style type="text/css">
	body { font-family: "Helvetica Neue"; font-weight: 300; margin: 15px; font-color: dimgray; }
	a { margin-right: 15px; }
	h1 { font-size: 1.6em; padding-bottom: 10px; }
	h2 { font-size: 1.4em; }
	th { border-bottom: 1px solid darkgray; }
	th, td { padding: 10px 15px 10px 0; }
	</style>

	<script type="text/x-handlebars" data-template-name="application">

jasonmit / gist:9146072

Created February 21, 2014 23:43

Ember Tooltip (raw) http://jsfiddle.net/NQKvy/776/

	<script type="text/x-handlebars" data-template-name="application">
	<h1>ember-latest jsfiddle</h1>
	{{outlet}}
	</script>
	<script type="text/x-handlebars" data-template-name="index">
	<h2>Index Content:</h2>

	{{#tool-tip view='sampleArray' content=content}}
	<button>Sample Button (mouse over)</button>
	{{/tool-tip}}

jasonmit / gist:9909430

Created April 1, 2014 07:23

Ember: Search example http://jsfiddle.net/NQKvy/884/

	<script type="text/x-handlebars" data-template-name="application">
	{{#search-container action='search' content=filteredContent}}
	{{search-input}}
	{{search-results row=App.PersonView}}
	{{/search-container}}
	</script>

	<script type="text/x-handlebars" data-template-name="person">
	<li>{{fullName}}</li>
	</script>

jasonmit / gist:11123666

Created April 20, 2014 19:58

Ember: Component that creates child components http://jsfiddle.net/NQKvy/910/

	<style>
	h1 { font-size: 1.6em; padding-bottom: 10px; }
	h2 { font-size: 1.4em; }
	ul { padding: 15px; font-size: 1.4em; color: green; }

	.parent-component,
	.child-component { display: block; }
	</style>

	<script type="text/x-handlebars" data-template-name="application">