Skip to content

Instantly share code, notes, and snippets.

View asolove's full-sized avatar
🤔
Thinking about the essence of UI programming

Adam Solove asolove

🤔
Thinking about the essence of UI programming
View GitHub Profile
@asolove
asolove / cursor.cljs
Created January 6, 2014 21:43
Om polymorphic cursor
(def map-state { :layers [{:selected true :title "Layer One"}, {:selected false :title "Layer Two" }]})
; I want a way to write reusable components that take and update data from a cursor,
; where the parent decides how the data is calculated and updated.
(defn checkbox [checked]
(om/component
(dom/input {:type "checkbox" :checked checked
:onClick #(om/update! checked (not checked)})))
@asolove
asolove / bindings!.js
Created November 18, 2013 18:56
Two-way binding through rangeContent()
describe("makeRangeContentBinder", function () {
it("should work", function () {
var o = Bindings.defineBindings({
source: [1, 2, 3]
}, {
target: {"<->": "source.rangeContent()"}
});
expect(o.target).toEqual([1,2,3]);
@asolove
asolove / hasOwnPropertyConfusion.js
Last active December 25, 2015 01:08
Montage inheritance problem
var Component = require("montage/ui/Component").Component;
var Parent = Component.specialize({
thingy: {
value: true
}
});
var Child = Parent.specialize({
thingies: {
@asolove
asolove / stateMachineDd.js
Created September 27, 2012 23:46
State machine drag & drop
var Dragger = StatefulView.extend({
states: {
"dragging": function(e){ el.css({ opacity: 0.5 }) },
"inactive": function(e){ el.css({ opacity: 1 }); }
},
transitions: {
"mousedown .handle": ["inactive", "dragging"],
"mouseup": ["dragging", "inactive"],
"mousemove": ["dragging", "dragging", function(e){
el.css({ left: e.pageX, top: e.pageY });
@asolove
asolove / naiveDd.js
Created September 27, 2012 23:46
Naive drag and drop
var draggable = $("#drag");
var handle = draggable.find(".handle");
handle.on("mousedown.drag", function mousedown(e){
handle.off("mousedown.drag");
draggable.animate({ opacity: 0.5 });
draggable.on("mouseup.drag", function mouseup(e){
draggable.off("mouseup.drag");
$("body").off("mousemove.drag");
handle.on("mousedown", mousedown);
@asolove
asolove / sendMoreMoney.clj
Created September 25, 2012 00:47
Send more cpu cycles!
(ns learn-logic.core)
(use 'clojure.core.logic)
; an attempt to solve the classic "Send more money" problem, where
; S E N D
; + M O R E
; ----------
; M O N E Y
;
@asolove
asolove / deferredThingy.js
Created September 4, 2012 19:22
Subclass deferred
// DeferredThingy is a class that present the interface of a deferred
// plus provides public methods that will only run after it is resolved.
function DeferredThingy(opts) {
this.opts = opts;
_.extend(this, new $.Deferred());
}
DeferredThingy.prototype.ready = function(){
this.resolve(data);
};
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<link href="/stylesheets/reset_min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/apply.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/login.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/program.css" media="screen" rel="stylesheet" type="text/css" />
<script>
<![--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<link href="/stylesheets/reset_min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/apply.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/login.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/program.css" media="screen" rel="stylesheet" type="text/css" />
<script>
<![--