css editor
by Darby Rathbone
October 19, 2014
HTML
<div class='test' style='color:blue'>right click me to see my css and to edit them live</div>
<span style='color:red'>then on a table you want to add to press enter and type in the property name on left and value on right you want to add to those types of elements and watch it happen</span>
<ol>test1
<li>test2</li>
<li>test2</li>
<li>test2</li>
<li>test2</li>
<li>test2</li>
</ol>
<div class='dropdown'>
<div class='menu'>
<input type='text' name='name' class='label' id='id'></input>
<input class='cssvalues' type="text" name='add' id='add'></input>
</div>
<div class='buttons'>
<button id='ok'>ok</button>
<button id='cancel'>cancel</button>
</div>
</div>
CSS
.dropdown {
background-color:white;
min-width:250px;
width:250px;
max-height:200px;
overflow-x:show;
overflow-y:scroll;
display:block;
position:absolute;
}
.dropdown *{display:flex;}
.dropdown .label {
width:50%;
}
.dropdown .selector{
background:skyblue;
display:table;
width:100%;
font-weight:bold;
}
.dropdown .menu input{
text-align:center;
width:auto;
}
.dropdown .menu:nth-child(2n+0) *{
background:lightyellow;
}
.dropdown .cssvalues {
width:50%;
}
ol {
background-color:green;
position:absolute;
}
li {
background-color:rgba(255, 0, 0, 0.2);
}
* {
filter:alpha(opacity=50);
transition:all 2s linear;
outline:solid black 1px;
}
body {
padding: 30px;
font: 14px"Lucida Grande", Helvetica, Arial, sans-serif;
}
h2 {
margin:0 0 .5em 0;
}
a {
color: #00B7FF;
}
#wrapper {
padding-left:312px;
position:relative;
}
#userList {
margin:0 0 30px 0;
}
#userList table {
border-collapse:separate;
border-spacing:1px;
background:#CCC;
}
#userList table th {
background:#EEE;
font-weight:600;
padding:10px 20px;
text-align:center;
}
#userList table tbody {
padding:0;
margin:0;
border-collapse:collapse;
border-spacing:0px;
}
#userList table td {
background:#FFF;
padding:5px 10px;
text-align:center;
}
#userInfo {
width:250px;
position:absolute;
top:0;
left:0;
}
#userInfo p {
padding:15px;
border:1px solid #CCC;
background:rgba(80, 120, 255, 0.05);
}
fieldset {
border:0;
padding:0;
margin:0;
}
JavaScript
var fileref = document.createElement("style"),
dropdown = document.getElementsByClassName('dropdown')[0];
fileref.setAttribute("type", "text/css");
fileref.innerHTML += '.test{background-color:#ff0000;}';
//console.dir(fileref);
document.head.appendChild(fileref);
var styles = [];
[].map.call(document.styleSheets, function (e) {
console.dir(e);
return [].map.call(e.rules, function (f) {
f.elements = document.querySelectorAll(f.selectorText);
f.elements.values = {};
[].forEach.call(f.style, function (g) {
f.elements.values[g] = f.style[g];
});
styles.push(f);
return f;
});
});
console.dir(styles);
addEventListener('mousedown', function (e) {
e.target.setAttribute('oncontextmenu', "return false;");
});
var updateFirst = function (j) {
// console.log(j.target.value);
j.target.parentElement.id = j.target.value;
j.target.id = j.target.value;
j.target.parentElement.lastElementChild.id = j.target.value;
};
var updateSecond = function (j) {
if(!j.target.styleSheetReference)
{
j.target.styleSheetReference = document.styleSheet[document.styleSheet.length-1];
}
j.target.styleSheetReference.setProperty(j.target.id, j.target.value);
};
var addEventsToCloned = function(cloned,h){
document.querySelector('.dropdown').insertBefore(cloned,document.querySelector('.dropdown *:focus').parentElement.nextElementSibling);
cloned.firstElementChild.value = '';
cloned.firstElementChild.focus();
cloned.lastElementChild.value = '';
cloned.lastElementChild.styleSheetReference = h.target.styleSheetReference;
cloned.firstElementChild.addEventListener('input', updateFirst);
cloned.lastElementChild.addEventListener('input', updateSecond);
cloned.lastElementChild.addEventListener('keyup', createNew);
cloned.firstElementChild.addEventListener('keyup', createNew);
}
var createNew = function (h) {
...