window.cssMath = { /* Number rounded by Length */ round: function (n, l) { l = Math.pow(10, l); return Math.round(n * l) / l; }, /* X and Y coordinates to Rotation and Strength */ xy2rs: function (x, y) { return { r: this.round(Math.atan2(x, y * -1) * 180 / Math.PI, 3), s: this.round(Math.sqrt((x * x) + (y * y)), 3) }; }, /* Rotation and Strength to X and Y coordinates */ rs2xy: function (r, s) { return { x: this.round(Math.sin(r * Math.PI / 180) * s, 3), y: this.round(Math.cos(r * Math.PI / 180) * s * -1, 3) }; }, /* Rotation to Degree */ r2d: function (r) { return r * 90; }, /* Degree to Rotation */ d2r: function (d) { return d / 90; }, /* Degrees to Radians */ d2rad: function (d){ return (d) * Math.PI / 180; }, /* Radians to Degrees */ rad2d: function (r) { return (180*r)/Math.PI + 360; }, /* matrix to IE String */ m2s: function (M) { return 'M11=' + M.e(1, 1) + ', M12=' + M.e(1,2) + ', M21=' + M.e(2,1) + ', M22=' + M.e(2,2); }, s2m: function (s) { var entries = s.split(','); var values = new Array(); for (var i=0; i -1) { return '#' + cssMath.da2ha(value.replace(/^rgb\s?\(\s?(.*?)\s?\)$/, '$1').split(/,\s?/)).join(''); } else { return cssMath.h2lh(value); } }, // dont include an AA in this hex shortHex : function (value, allValues) { return '#'+cssMath.eval.s2Hex(value,allValues).replace(/^#../,''); }, /* String to Alpha + Hexadecimals */ s2aHex: function (value, allValues) { if (value.indexOf('rgba') > -1) { return cssMath.ac2ah(value); } else if (value.indexOf('rgb') > -1){ return cssMath.ac2ah(value); } else { return value; } }, /* Hexadecimals to Short Hexadecimals */ sHex: function (value, allValues) { return cssMath.h2sh(value); }, /* Hexadecimals to Long Hexadecimals */ lHex: function (value, allValues) { return cssMath.h2lh(value); }, /* Hexadecimals to Color channels */ ch: function (value, allValues) { return cssMath.h2c(value); }, /* Alpha + Hexadecimals to Alpha + Color channels */ aCh: function (value, allValues) { return cssMath.ah2ac(value); }, s2deg: function (value, allValues) { if (value > 4) { return value; } else { return cssMath.round(cssMath.r2d(value), 3); } }, rot: function (value, allValues) { return cssMath.round(cssMath.d2r(value), 3); } , matrix2deg: function (value, allValues) { var M = cssMath.s2m(value); var asin1 = Math.asin(M.e(2,1)); var asin2 = Math.asin(M.e(1,2)); var cos = Math.acos(M.e(1,1)); if (cssMath.areClose(asin1, -asin2) && cssMath.areClose(M.e(1,1),M.e(2,2))) { return asin1; } else { return "NaN"; } }, deg2matrix: function (value, allValues) { var num = cssMath.d2rad(value); return cssMath.m2s(Matrix.Rotation(num)); } } }; window.generator = { $sandbox : undefined, // set in doc ready below styleAllRules: function (ruleList) { var item = -1, innerHTML; while (++item < ruleList.length) { innerHTML = ruleList[item].innerHTML; innerHTML = innerHTML.replace(/(\/\*((\n|.)+)\*\/)/, '$1'); innerHTML = innerHTML.replace(/{((\n|.)+)}/, '{$1}'); innerHTML = innerHTML.replace(/(.*?) {/, '$1 {'); // this next one matches the triple line @font-face rule innerHTML = innerHTML.replace(/(.*?):\s?(.*?\n.*?\n.*);/mg, '$1: $2;'); innerHTML = innerHTML.replace(/(.*?):\s?(.*?);/mg, '$1: $2;'); innerHTML = innerHTML.replace(/}/m, '}'); ruleList[item].innerHTML = innerHTML; } }, makeEditable: function (editList) { var item = -1; while (++item < editList.length) { editList[item].innerHTML = '' + editList[item].innerHTML + ''; } }, collectAllValues: function (rule) { var item = -1, editables = rule.getElementsByTagName('b'), values = []; while (++item < editables.length) { values.push( { styleProperty: editables[item].parentNode.parentNode.getElementsByTagName('span')[0].innerHTML.replace(/^\s+|\s+$/g, ''), styleValue: editables[item].parentNode.parentNode.getElementsByTagName('span')[1][(document.all) ? 'innerText' : 'textContent'].replace(/^\s+|\s+$/g, ''), node: editables[item].getElementsByTagName('span')[0], group: editables[item].getAttribute('g'), output: editables[item].getAttribute('o'), value: editables[item].getElementsByTagName('span')[0].innerHTML } ); } return values; }, grabAndSet : function(elem){ var item = -1; allValues = generator.collectAllValues( $(elem).closest('.declaration-block')[0] || $(elem).closest('.rule')[0] ), group = elem.parentNode.getAttribute('g'), input = elem.parentNode.getAttribute('i'), value = elem.value, itemValue = ''; if (input) { value = cssMath.eval[input](value, allValues); } while (++item < allValues.length) { if (allValues[item].group == group) { if (allValues[item].output) { itemValue = cssMath.eval[ allValues[item].output ](value, allValues); } else { itemValue = value; } allValues[item].node.innerHTML = itemValue; } } generator.applyStyles(elem); getFilters(); return value; }, // eo grabAndSet() // if no elem is passed in, all styles are applied. applyStyles : function(elem){ if (!elem){ $(".selector").closest('pre').each(function(){ generator.applyStyles(this); }) return; } var css = $(elem).closest("pre").not('.comment').text().replace(/(-ms-)?filter:[^\;]*\;/g, ''), wrap = $(elem).closest('.rule_wrapper'), name = wrap.attr('id'); //alert(css); $('style.'+name).remove(); if (name){ var ss = document.createElement('style'); ss.setAttribute("type", "text/css"); ss.className = name; if (ss.styleSheet && name !== 'box_webfont') { // IE crashes hard on @font-face going in through cssText ss.styleSheet.cssText = css; } else { var tt1 = document.createTextNode(css); ss.appendChild(tt1); } document.body.appendChild(ss); } name && generator.$sandbox.toggleClass(name, !wrap.hasClass('commentedout') ); } }; function copypasta(){ if (location.protocol == 'file:'){ $('.copybutton').parent().hide(); return; } $('.rule_wrapper').each(function(){ var name = this.id; var zc = new ZeroClipboard.Client(); zc.glue( name + '_copybutton', name +'_copybutton_container' ); zc.addEventListener( 'mouseDown', (function(){ return function(client) { zc.setText( $("#"+ name + " pre").not('.comment').text() ); } })()); }); } function addFilter (obj, filterName, filterValue){ var filter; var comma = ", "; if (obj.filters.length == 0) { comma = ""; } // remove existing filter. var re = new RegExp("(\\,\\s*)?progid:" + filterName + "\\([^\\)]*\\)") obj.style.filter = obj.style.filter.replace(re, '') + comma + "progid:" + filterName + "(" + filterValue + ")"; return; filter = obj.filters.item(filterName); return filter; } function getFilters () { if (!document.body.filters) { return; } $('#sandbox')[0].style.filter = ""; $('#sandbox')[0].style.zoom = "100%"; if (true) { //document.body.filters) { //var s = []; $('.filter').each(function(){ if ($(this).parents('.rule_wrapper').first().find('a').first().text().match(/off/)) { //s.push($(this).text()); var text = $(this).text().replace(/\)/, '').split('('); addFilter($('#sandbox')[0], text[0].replace(/progid:/, '').trim(), text[1]); } }) } //node.style.filter = s.join(""); } $(document).ready(function () { generator.$sandbox = $('#sandbox'); generator.styleAllRules( $('pre').not('.footer').get() ); generator.makeEditable(document.getElementsByTagName('b')); //clearFilter(); $('pre').each(function () { $(this).find('b span').bind('click',function (e) { // basically calculating where to place the caret. var wrap = $(document.elementFromPoint(e.pageX-$(document).scrollLeft(),e.pageY-$(document).scrollTop())); var clickY = e.pageX - wrap.offset().left, caretY = Math.round(clickY / wrap.width() * wrap.text().length); $(this).parent().addClass('edit') .find('input') .val( $(this).html() ) .focus().caret(caretY,caretY); }).mousedown(function(){ // $(document.activeElement).not(document.body).blur(); }); $(this).find('input').bind('keyup',function () { generator.grabAndSet(this); this.parentNode.getElementsByTagName('span')[0].innerHTML = this.value; } ).bind('blur',function () { $(this).parent().removeClass('edit'); generator.grabAndSet(this); } ).bind("mousewheel keydown", function(e, delta) { // only px values get this treatment for now. if (!(/px|em/.test($(this).val()) || $(this).closest('#box_rotate').length)) return true; var split = this.value.split(/-?[0-9A-F.]+/), num = this.value.match(/-?[0-9A-F.]+/)[0], len, newval; if (delta > 0 || e.which == 38) { newval = parseFloat(num) + 1 * (e.shiftKey ? .1 : 1); } else if ( delta < 0 || e.which == 40 ) { newval = parseFloat(num) - 1 * (e.shiftKey ? .1 : 1); } else { return true; } newval = Math.round(newval*10)/10; len = (''+newval).length $(this).val(split.join(newval)); generator.grabAndSet(this); $(this).caret( len,len ); return false; }); }); // end pre each() // first run on page load getFilters(); if (!document.body.filters) { generator.applyStyles(); } copypasta(); }); window.css = { 'text-shadow': '2px 2px 2px #000;', 'filter': 'Shadow(Color=#666666, Direction=135, Strength=5);' }; /* rule selector declaration property value */ $.fn.applyStyles = function(){ generator.applyStyles(this[0]); return this; } // commenting out $('.rule_wrapper .comment a').live('click',function(){ $(this).text( $(this).text().replace(' off',' !on').replace(' on',' off').replace('!','') ) $(this).closest('.rule_wrapper').toggleClass('commentedout') .find('input').first().applyStyles(); getFilters(); return false; }) /* * Adding trim method to String Object. Ideas from * http://www.faqts.com/knowledge_base/view.phtml/aid/1678/fid/1 and * http://blog.stevenlevithan.com/archives/faster-trim-javascript */ String.prototype.trim = function() { var str = this; // used by the String.prototype.trim() var initWhitespaceRe = /^\s\s*/; var endWhitespaceRe = /\s\s*$/; var whitespaceRe = /\s/; // The first method is faster on long strings than the second and // vice-versa. if (this.length > 6000) { str = this.replace(initWhitespaceRe, ''); var i = str.length; while (whitespaceRe.test(str.charAt(--i))); return str.slice(0, i + 1); } else { return this.replace(initWhitespaceRe, '') .replace(endWhitespaceRe, ''); } };