Skip to content

Instantly share code, notes, and snippets.

@willxyu
Last active May 15, 2018
Embed
What would you like to do?
Mutable Priority Entries
mpe = typeof mpe !== 'undefined' ? mpe : {}
mpe.inject = function(rule) { $('body').append('<div class="mpe-style">&shy;<style>' + rule + '</style></div>') }
if ($('.mpe-style').length) { $('.mpe-style').remove() }
mpe.inject(`.mpe-holder {
pointer: cursor;
list-style: none;
width: 230px;
height: 500px;
position: absolute;
right: 4px;
bottom: 14px;
background: rgba( 11, 67, 91, 0.89);
border: 2px solid rgba( 1, 1, 1, 1);
border-radius: 6px;
padding: 6px;
padding-top: 27px;
boxShadow: inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2),
inset 0 3px 2px rgba(255,255,255,0.22),
inset 0 -3px 2px rgba(0,0,0,0.15),
inset 0 20px 10px rgba(255,255,255,0.12),
0 0 4px 1px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.2);
z-index: 100; }
`)
mpe.inject('.mpe-true-element { color: rgba( 14, 144, 14, 1); }')
mpe.inject('.mpe-false-element { color: rgba( 178, 67, 91, 1); }')
mpe.inject(`.mpe-element {
font-family: 'Overpass','Fantasque';
font-size: 9pt;
height: 1.2em;
width: 222px;
padding: 0.2em;
border-radius: 3px;
border: 1px solid rgba( 34, 34, 34, 1);
list-style-type: none; }`)
mpe.inject(`.mpe-element:hover {
border: 1px solid rgba( 104, 104, 104, 1); }`)
mpe.inject(`.mpe-element.mpe-true-element:hover {
background: rgba( 27, 96, 66, 0.23);
border: 1px solid rgba( 104, 104, 104, 1); }`)
mpe.inject(`.mpe-element.mpe-false-element:hover {
background: rgba( 96, 27, 53, 0.23);
border: 1px solid rgba( 104, 104, 104, 1); }`)
mpe.functional = function(func) { // remember, please pass me the actual function, not its name
// https://stackoverflow.com/a/9924463
var stripper = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg
var argnames = /([^\s,]+)/g
var fxstr = func.toString().replace(stripper,'')
var result = fxstr.slice(fxstr.indexOf("(")+1, fxstr.indexOf(")")).match(argnames)
return result
}
mpe.remove = function(id) {
if ($('#mpe-'+id).length) { $('#mpe-'+id).remove() }
if (typeof mpe.registry[id] !== 'undefined') {
// retrieve old altered assignment function
var x = mpe.registry[id]
if (typeof x.listeners !== 'undefined') {
for (var k in x.listeners) {
var exec = x.listeners[k]
window[k] = exec
}
}
// if (typeof x.assign !== 'undefined' && x.originalX instanceof Function) { window[x.assign] = x.originalX }
}
delete mpe.registry[id] }
mpe.emptyRegistry = function() {
if (mpe.registry instanceof Object) {
for (var k in mpe.registry) { mpe.remove(k) } }
}
mpe.emptyRegistry()
mpe.registry = []
mpe.make = function(id, anchor, assign, locate, query, evaluateToTrue, x, y, w, h, form) {
var copy = ju.clone // or your cloning facility
var actualA = mpe.namespaceReader(anchor) // window[anchor]
var actualX = mpe.namespaceReader(assign) // window[assign]
var a = copy(actualA)
if (typeof mpe.registry[id] !== 'undefined') {
mpe.remove(id) }
var d = ''
d += '<ul id="mpe-'+id+'" class="mpe-holder mpe-'+id+'" data="'+anchor+'">'
for (var i=0; i<a.length; i++) {
var element = a[i]
d += '<li id="mpe-element-'+id+'-'+element+'" class="mpe-element mpe-element-'+id+' mpe-false-element">'
d += element
d += '</li>'
}
d += '</ul>'
$('body').append(d)
var g = $('#mpe-'+id)
g.sortable({
placeholder: "ui-state-highlight",
stop: function(e, ui) {
var t = ui.item[0].id
t = t.replace('mpe-element-')
var u = mpe.registry[t] || {}
var v = g.toArray()
v = v[0].innerText
v = v.split('\n')
mpe.namespaceReader(anchor, copy(v))
// window[anchor] = copy(v)
// window[anchor] = g.toArray() // console.log(window[anchor])
}
})
g.disableSelection()
g.draggable()
// Register the damned thing
mpe.registry[id] = {
actual : g,
anchor : anchor,
actualA: actualA,
assign : assign,
actualX: actualX,
evaluated: evaluateToTrue,
}
mpe.attach(id, assign, locate, query, evaluateToTrue)
}
mpe.attach = function(id, assign, locate, query, evaluateToTrue) {
// if (!window[assign] instanceof Function) { return }
if (!mpe.namespaceReader(assign) instanceof Function) { return }
var original = mpe.namespaceReader(assign) // window[assign]
// save the original
mpe.registry[id].listeners = mpe.registry[id].listeners || {}
mpe.registry[id].listeners[assign] = original
// window[assign] = function(...args) {
var m = mpe.namespaceReader(assign, function(...args) {
original(...args)
var r = mpe.functional(original)
for (var i=0; i<r.length; i++) {
if (r[i] == locate) {
// console.log(args[0]); console.log(query(args[0])); console.log(evaluateToTrue)
if (query(args[0]) == evaluateToTrue) {
mpe.update(id, args[0], true)
} else {
mpe.update(id, args[0], false)
}
}
}
})
}
mpe.update = function(id, element, value) {
// color changes
var g = $('#mpe-element-'+id+'-'+element)
// console.log(value); console.log('true-element'); console.log(g.hasClass('mpe-true-element')); console.log('false-element'); console.log(g.hasClass('mpe-false-element'))
if (g.hasClass('mpe-false-element') && value == true) {
g.removeClass('mpe-false-element')
g.addClass('mpe-true-element')
} else if (g.hasClass('mpe-true-element') && value == false) {
g.removeClass('mpe-true-element')
g.addClass('mpe-false-element')
}
}
mpe.namespaceReader = function(str, newValue) {
var s = str.split('.')
var parent = window
for (var i=0; i<s.length; i++) {
var n = s[i]
if (parent[n]) {
if (i >= (s.length - 1) && newValue) {
parent[n] = newValue
parent = parent[n]
} else {
parent = parent[n]
}
// console.log(parent)
} else if (i >= (s.length - 1)) {
log('approaching terminus')
return parent
} else {
log('Could not resolve address: ' + str + '.')
return false
}
}
return parent
}
// Test unit
/*
afflictAsPriority = [
'paralysis',
'asthma',
'impatience',
'anorexia',
'dementia',
]
tracked = {
asthma: false,
paralysis: false,
impatience: false,
dementia: false,
anorexia: false,
}
give = function(aff, value) {
tracked[aff] = value
}
remove = function(affliction) {
tracked[affliction] = false
}
have = function(what) {
return tracked[what]
}
mpe.make('MalleableList','afflictAsPriority','give','aff',have,true)
mpe.attach('MalleableList','remove','affliction',have,true)
give('asthma',true)
have('asthma')
setTimeout( function() { give('impatience',true); }, 3100 )
setTimeout( function() { give('asthma', false); }, 5600 )
setTimeout( function() { have('impatience') }, 7000 )
setTimeout( function() { remove('impatience'); }, 8600 )
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment