JSFiddle - React, Tailwind, and code Playground
by nathan
JavaScript
var filter = (function () {
var classPrefix = 'filter',
filterTypes = ['greyscale', 'opacity', 'blur'],
numFilterTypes,
styleElement,
trim;
numFilterTypes = filterTypes.length;
styleElement = document.createElement('style');
document.head.appendChild('style');
trim = function (s) {
var l = s.length - 1;
while (s.indexOf(' ') === 0) {
s = s.substr(1);
}
while (s.lastIndexOf(' ') === l) {
s = s.substr(0, l);
}
return s;
};
filterStringToObj = function (str) {
var closeBracketPos = str.indexOf(')'),
filterName,
numeric,
obj = {},
openBracketPos,
unit,
value;
while (closeBracketPos !== -1) {
openBracketPos = str.indexOf('(');
filterName = trim(str.substr(0, openBracketPos - 1));
obj[filterName] = {};
value = trim(str.substr(openBracketPos + 1, closeBracketPos - 1));
obj[filterName].value = parseFloat(value);
obj[filterName].unit = value.substr(obj[filterName].value.toString().length);
}
return obj;
};
objToFilterString = function (obj) {
};
return function (element) {
var className,
definitionText,
getterFn,
i,
setterFn;
className = classPrefix + Math.round(Math.rand() * 100000);
getterFn = function (prop) {
return function () {
var filterProperty,
propPosition;
filterProperty = window.getComputedStyle(element).filter;
return filterStringToObj(filterProperty)[prop];
};
};
setterFn = function (prop) {
return function (val) {
var filterObj,
filterString;
val = parseFloat(val);
filterString =...