Skip to content

Instantly share code, notes, and snippets.

@cillierburger cillierburger/State.js
Last active Apr 29, 2016

Embed
What would you like to do?
State.js - hold values and call named functions on state change
var State = (function() {
var values = {
};
var before = {
};
var after = {
};
var get = function(property) {
if(property in values) {
return values[property];
}
return undefined;
};
var runBefore = function(funcs,property,value) {
if (property in funcs) {
for(var i = 0; i <= funcs[property].length - 1; i+=1) {
/* old,new */
value = funcs[property][i](get(property),value);
}
}
return value;
};
var runAfter = function(funcs,property,value) {
if (property in funcs) {
for(var i = 0; i <= funcs[property].length - 1; i+=1) {
/* old,new */
var v = funcs[property][i](get(property),value);
}
}
return value;
};
var set = function(property,value) {
value = runBefore(before,property,value);
values[property] = value;
runAfter(after,property,value);
};
var setAfter = function(property,func) {
if(! ( property in after)) {
after[property] = [];
}
after[property].push(func);
};
var setBefore = function(property,func) {
if(! ( property in before)) {
before[property] = [];
}
before[property].push(func);
};
return {
set: function(property,value) {
var values;
if(typeof(property) !== 'object') {
values = {};
values[property] = value;
}
else {
values = property;
}
for(var p in values) {
value = values[p];
property = p;
if(typeof(value) === 'function') {
// If the "value" is a function, call it with a callback
// that will call ourselves to set the value later
var callback = value;
callback(function(input) {
set(property,input);
});
continue;
}
set(property,value);
}
},
get: function(property) {
return get(property);
},
before: function(a,b) {
for (var i = 0; i < arguments.length; i++) {
if(i == 0 ) {
var property = arguments[i];
continue;
}
setBefore(property,arguments[i]);
}
return this;
},
after:function(a,b) {
for (var i = 0; i < arguments.length; i++) {
if(i == 0 ) {
var property = arguments[i];
continue;
}
setAfter(property,arguments[i]);
}
return this;
},
prop: function(property) {
return {
after: function(func) {
setAfter(property,func);
return this;
},
before: function(func) {
setBefore(property,func);
return this;
}
}
},
dump: function() {
console.log(values);
},
refresh: function(property) {
//console.log(values);
var v = get(property);
set(property,v);
}
};
});
// Example usage
// Glorious State Pipeline
var s = State();
// Setup the initial state
s.set({
'current.selection': null,
'results.filter': 'both',
'num.results': 100,
'image.scale.class': 'col-md-2',
'image.scale': 200,
'tags.chosen': [],
'item.template': $("#gridOfImagesTmpl"),
'tags.available': service.getAvailableTags
});
// When the list of chosen tags is updated
s.prop('tags.chosen').after(function(old,n) {
s.set('items',function(callback) {
service.getItemsByTags(n, s.get('num.results'), s.get('results.filter'), callback);
})
});
// Before the list of items is updated
s.prop('items').before(function(old,n) {
s.set('tags.available', n);
return n;
}).after(function(old,n) {
var template = s.get('item.template').html();
nodes.container.empty();
if (typeof n == "undefined" || n.items.length == 0) {
return false;
}
$.each(n.items, function (idx, item) {
var doc = item._source;
doc['image_scale_class'] = s.get('image.scale.class');
var html = Mustache.to_html(template, doc);
nodes.container.append(html);
});
}).after(function(old,n) {
if (typeof n == "undefined" || n.items.length == 0) {
return false;
}
$.notify("Found " + n.items.length + " items","success", {'autoHideDelay': 500})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.