No images in this repository’s iceberg at this time
Download raw (11.4 KB)
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script>
var ratios = {}
function proportionate () {
for (selector in ratios) {
for (property in ratios[selector]) {
var obj = $(selector)
console.log (property)
var value = eval (ratios[selector][property])
setProperty (selector, property, value);
}
}
}
function setProperty (selector, key, value) {
dictionary = {
'rotate': {
'transform': 'rotate(%ideg)',
'-ms-transform': 'rotate(%ideg)',
'-moz-transform': 'rotate(%ideg)',
'-webkit-transform': 'rotate(%ideg)',
'-o-transform': 'rotate(%ideg)',
}
}
if (dictionary[key] != undefined) {
for (translate_key in dictionary[key]) {
$(selector).css (translate_key, dictionary[key][translate_key].replace ('%s', value).replace ('%i', parseInt (value)))
}
} else {
$(selector).css (key, value)
}
}
function parseToObject (input) {
input = input.replace (/\n/gm, '')
block_patt = /([\.#]?[a-zA-Z0-9]+)\s*\{([^}]+)\}/g
ratios = {}
// Walk through all the CSS blocks
while (block = block_patt.exec(input)) {
// Extract selector and imploded rules.
selector = '#__CANVAS ' + block[1]
rules = block[2]
frm_rules = {} // Formatted rules
rule_patt = /\s*([^:]*)\s*:\s*([^;]+);/g
while (rule = rule_patt.exec(rules)) {
// Find the property and its value
property = rule[1]
value = rule[2]
frm_value = value // Formatted value
value_patt = /([\.#]?[a-zA-Z0-9_-]+)\.([a-zA-Z_-]+)/g
// Turn .obj.width to $('.obj').width()
while (chunks = value_patt.exec (value)) {
obj = chunks[1]
attr = chunks[2]
if (obj == 'self') {
// Self is the shortcut to the object
obj = 'obj'
} else if (obj == 'window' || obj == 'screen' && obj == 'document') {
// We don't want objects between quotes, then jQuery will parse them as string selector
obj = '$(' + obj + ')'
} else {
obj = '$(\'#__CANVAS ' + obj + '\')'
}
if (attr == 'width' || attr == 'height' || attr == 'innerWidth' || attr == 'innerHeight') {
attr += '()'
} else {
attr = 'css(\'' + attr + '\')'
}
frm_value = frm_value.replace (chunks[0], obj + '.' + attr)
}
frm_rules[property] = frm_value;
}
ratios[selector] = frm_rules
}
}
function buildObjectList (selector, inputHook) {
var children = $(selector + ' > *').not ('.__HIDE')
var list = jQuery ('<ul></ul>')
list.data ('inputHook', inputHook)
list.data ('selector', selector)
inputHook.append(list)
for (var i=0;i<children.length;i++) {
var child = children[i]
item = jQuery('<li class="__TAG">' + child.tagName.toLowerCase() + '</li>')
if ($(child).attr('id') != '')
item.append ('#' + $(child).attr('id'))
if ($(child).attr('class') != '')
item.append ('.' + $(child).attr('class').replace (/\s/g, '.'))
item.data ('obj', child)
var delLink = jQuery('<span class="__TAG_DELETE">X</span>');
delLink.click (function () {
if (confirm ("Are you sure?")) {
$($(this).parent().data('obj')).remove()
rebuildObjectList ()
}
})
item.append (delLink)
item.hover (
function (e) {
$($(this).data('obj')).addClass ('__HILITE')
},
function (e) {
$($(this).data('obj')).removeClass ('__HILITE')
})
tagSelector = child.tagName.toLowerCase()
if ($(child).attr('id') != '')
tagSelector += '#' + $(child).attr('id')
if ($(child).attr('class') != '')
tagSelector += '.' + $(child).attr('class').replace (/\s/g, '.')
list.append (item)
buildObjectList (tagSelector, item)
}
item = jQuery ('<li class="__TAG"><input type="text" /></li>');
addLink = jQuery ('<span class="__TAG_ADD">+</span>');
addLink.click (function () {
value = $(this).prev ('input').val()
if (value.indexOf ('#') > 0) {
parts = value.split ('#')
tag = parts.shift()
parts = parts.shift().split('.')
id = parts.shift()
} else {
id = ''
parts = value.split ('.')
tag = parts.shift()
}
cls = parts.join (' ')
obj = jQuery ('<' + tag + '></' + tag + '>').attr('id', id).attr('class', cls)
$($(this).parent().parent().data('selector')).append (obj)
$(this).prev ('input').val('')
rebuildObjectList ()
})
item.append (addLink)
list.append (item)
}
function rebuildObjectList () {
$('#__OBJECT_LIST').empty()
$('.__HILITE').removeClass ('.__HILITE')
buildObjectList("#__CANVAS", $('#__OBJECT_LIST'));
}
$(document).ready (function () {
$(window).resize(function() {
proportionate();
});
parseToObject ($('#__RULES_TEXTAREA').val());
proportionate();
$('#__RULES_SUBMIT').click(function () {
parseToObject ($('#__RULES_TEXTAREA').val());
proportionate();
});
$('#__RULES_LABEL').click(function () {
$('#__RULES').toggleClass ('__EXPANDED')
});
$('#__OBJECTS_LABEL').click(function () {
$('#__OBJECTS').toggleClass ('__EXPANDED')
});
rebuildObjectList ()
})
</script>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#__CANVAS {
widht: 100%;
height: 100%;
}
#__CONTROLS {
position: fixed;
right: 0px;
top: 0px;
height: 100%;
}
#__CONTROLS > div {
float: left;
height: 100%;
width: 30px;
overflow: none;
border-left: 1px #efefef solid;
background-color: rgba(255,255,255,0.5);
}
#__CONTROLS div div {
visibility: hidden;
}
#__CONTROLS div.__EXPANDED {
width: auto;
}
#__CONTROLS div.__EXPANDED div {
visibility: visible;
}
.__CONTROL_LABEL, .__TAG, .__TAG input {
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
}
.__TAG input {
border: none;
border-bottom: 1px #000 solid;
color: #000;
width: 90%;
}
.__TAG_DELETE, .__TAG_ADD {
cursor: pointer;
float: right;
}
.__TAG_DELETE:hover {
color: #800;
}
.__TAG_ADD:hover {
color: #0f1;
}
.__CONTROL_LABEL {
display: inline-block;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
height: 200px;
margin: 5px 0px -195px 7px;
cursor: pointer;
}
#__OBJECT_LIST {
width: 400px;
}
#__OBJECT_LIST ul {
width: 80%;
margin: 0px 10px 10px 0px;
list-style-type: none;
}
#__OBJECT_LIST ul li {
width: 100%;
padding: 5px 0 0 0;
}
#__RULES_TEXTAREA, #__RULES_SUBMIT {
margin: 0px 10px 10px 30px;
background-color: rgba(255,255,255,0.5);
}
#__RULES_TEXTAREA {
width: 400px;
height: 80%;
}
.__HILITE {
-moz-box-shadow: 0px 0px 15px #444;
-webkit-box-shadow: 0px 0px 15px #444;
box-shadow: 0px 0px 5px #444;
}
</style>
</head>
<body>
<div id="__CANVAS">
<div id="box"></div>
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
</div>
<div id="__CONTROLS" class="__HIDE">
<div id="__OBJECTS">
<span id="__OBJECTS_LABEL" class="__CONTROL_LABEL">∴</span>
<div>
<div id="__OBJECT_LIST"></div>
</div>
</div>
<div id="__RULES">
<span id="__RULES_LABEL" class="__CONTROL_LABEL">=</span>
<div>
<textarea id="__RULES_TEXTAREA">
div.letter {
width: 20;
height: 20;
rotate: 15;
margin-top: 20;
margin-left: 20;
}
div#box {
}
</textarea><br /><input id="__RULES_SUBMIT" type="submit" value="update" />
</div>
</div>
</div>
</body>
</html>