css.js
11 years ago
css.min.js
11 years ago
csslint.js
11 years ago
csslint.min.js
11 years ago
editor.js
11 years ago
editor.min.js
11 years ago
inspector.js
11 years ago
inspector.min.js
11 years ago
jquery.sizes.js
11 years ago
jquery.sizes.min.js
11 years ago
specificity.js
11 years ago
specificity.min.js
11 years ago
inspector.min.js
24 lines
| 1 | |
| 2 | (function($,_,socssOptions){var socss={model:{},collection:{},view:{},fn:{}};socss.view.inspector=Backbone.View.extend({active:false,hl:false,hoverEl:false,pageSelectors:[],selectorTemplate:_.template('<div class="socss-selector"><%= selector %></div>'),initialize:function(){var thisView=this;this.hl=new socss.view.highlighter();this.hl.initialize();this.pageSelectors=socss.fn.pageSelectors();$('body').on('mouseover','*',function(e){if(!thisView.active){return true;} |
| 3 | var $$=$(this);if($$.closest('.socss-element').length===0){e.stopPropagation();thisView.setHoverEl($(this));}});$('body *').click(function(e){if(!thisView.active||thisView.$el.is(':hover')){return true;} |
| 4 | e.preventDefault();e.stopPropagation();var $$=$(this);$$.blur();thisView.setActiveEl(thisView.hoverEl);});this.$('.socss-enable-inspector').click(function(){thisView.toggleActive();});this.$el.mouseenter(function(){thisView.hl.clear();});try{parent.socss.mainEditor.setInspector(this);} |
| 5 | catch(err){console.log('No editor to register this inspector with');}},setHoverEl:function(hoverEl){this.hoverEl=hoverEl;this.hl.highlight(hoverEl);},activate:function(){this.active=true;$('body').addClass('socss-active');$('body').removeClass('socss-inactive');},deactivate:function(){this.active=false;$('body').addClass('socss-inactive');$('body').removeClass('socss-active');this.hl.clear();this.$('.socss-hierarchy').empty();},toggleActive:function(){if(this.active){this.deactivate();} |
| 6 | else{this.activate();}},setActiveEl:function(el){var thisView=this;var $h=this.$('.socss-hierarchy');$h.empty();if(el.prop('tagName').toLowerCase()!=='body'){var cel=$(el);do{$(this.selectorTemplate({selector:socss.fn.elSelector(cel)})).prependTo($h).data('el',cel);cel=cel.parent();}while(cel.prop('tagName').toLowerCase()!=='body');$(this.selectorTemplate({selector:'body'})).prependTo($h).data('el',$('body'));this.$('.socss-hierarchy .socss-selector').hover(function(){thisView.hl.highlight($(this).data('el'));}).click(function(e){e.preventDefault();e.stopPropagation();thisView.setActiveEl($(this).data('el'));});} |
| 7 | $h.scrollLeft(99999);var selectors=this.pageSelectors.filter(function(a){try{return el.is(a.selector);} |
| 8 | catch(err){return false;}});var container=this.$('.socss-selectors-window').empty();_.each(selectors,function(selector){container.append($(thisView.selectorTemplate(selector)).data(selector));});container.find('> div').mouseenter(function(){thisView.hl.highlight($(this).data('selector'));}).click(function(e){e.preventDefault();e.stopPropagation();thisView.trigger('click_selector',$(this).data('selector'));});var attributes=socss.fn.elementAttributes(el);container=this.$('.socss-properties-window').empty();_.each(attributes,function(v,k){container.append($(thisView.selectorTemplate({selector:'<strong>'+k+'</strong>: '+v})).data('property',k+': '+v));});container.find('> div').click(function(e){e.preventDefault();e.stopPropagation();thisView.trigger('click_property',$(this).data('property'));});this.trigger('set_active_element',el,selectors);}});socss.view.highlighter=Backbone.View.extend({template:_.template($('#socss-template-hover').html().trim()),highlighted:[],highlight:function(els){this.clear();var thisView=this;$(els).each(function(i,el){el=$(el);if(!el.is(':visible')){return true;} |
| 9 | var hl=$(thisView.template());hl.css({'top':el.offset().top,'left':el.offset().left,'width':el.outerWidth(),'height':el.outerHeight()}).appendTo('body');var g;var padding=el.padding();for(var k in padding){if(parseInt(padding[k])>0){g=hl.find('.socss-guide-padding.socss-guide-'+k).show();if(k==='top'||k==='bottom'){g.css('height',padding[k]);} |
| 10 | else{g.css('width',padding[k]);g.css({'width':padding[k],'top':padding.top,'bottom':padding.bottom});}}} |
| 11 | var margin=el.margin();for(var k in margin){if(parseInt(margin[k])>0){g=hl.find('.socss-guide-margin.socss-guide-'+k).show();if(k==='top'||k==='bottom'){g.css('height',margin[k]);} |
| 12 | else{g.css('width',margin[k]);}}} |
| 13 | thisView.highlighted.push(hl);});},clear:function(){while(this.highlighted.length){this.highlighted.pop().remove();}}});socss.parsedCss={};socss.fn.getParsedCss=function(){if(Object.keys(socss.parsedCss).length===0){var parser=new cssjs();$('.socss-theme-styles').each(function(){var $$=$(this);var p=parser.parseCSS($$.html());socss.parsedCss[$$.attr('id')]=p;});} |
| 14 | return socss.parsedCss;};socss.fn.pageSelectors=function(){var selectors=[];var parsedCss=socss.fn.getParsedCss();for(var k in parsedCss){for(var i=0;i<parsedCss[k].length;i++){if(typeof parsedCss[k][i].selector==='undefined'){continue;} |
| 15 | var ruleSpecificity=SPECIFICITY.calculate(parsedCss[k][i].selector);for(var j=0;j<ruleSpecificity.length;j++){selectors.push({'selector':ruleSpecificity[j].selector.trim(),'specificity':parseInt(ruleSpecificity[j].specificity.replace(/,/g,''))});}}} |
| 16 | $('body *').each(function(){var $$=$(this);var elName=socss.fn.elSelector($$);var ruleSpecificity=SPECIFICITY.calculate(elName);for(var k=0;k<ruleSpecificity.length;k++){selectors.push({'selector':ruleSpecificity[k].selector.trim(),'specificity':parseInt(ruleSpecificity[k].specificity.replace(/,/g,''))});}});selectors=_.uniq(selectors,false,function(a){return a.selector;});selectors.sort(function(a,b){return a.specificity>b.specificity?-1:1;});return selectors;};socss.fn.elementAttributes=function(el){if(!document.styleSheets){return[];} |
| 17 | var elProperties=[];var trimFunc=function(e){return e.trim();};var filterFunc=function(e){return e!=='';};var splitFunc=function(e){return e.split(':').map(trimFunc);};var parsedCss=socss.fn.getParsedCss();for(var k in parsedCss){for(var i=0;i<parsedCss[k].length;i++){if(typeof parsedCss[k][i].selector==='undefined'||typeof parsedCss[k][i].type!=='undefined'||parsedCss[k][i].selector[0]==='@'){continue;} |
| 18 | var ruleSpecificity=SPECIFICITY.calculate(parsedCss[k][i].selector);for(var j=0;j<ruleSpecificity.length;j++){try{if(el.is(ruleSpecificity[j].selector)){for(var l=0;l<parsedCss[k][i].rules.length;l++){elProperties.push({'name':parsedCss[k][i].rules[l].directive,'value':parsedCss[k][i].rules[l].value,'specificity':parseInt(ruleSpecificity[j].specificity.replace(/,/g,''))});}}} |
| 19 | catch(e){}}}} |
| 20 | elProperties.sort(function(a,b){return a.specificity>b.specificity?1:-1;}).reverse();var returnProperties={};for(var pi=0;pi<elProperties.length;pi++){if(typeof returnProperties[elProperties[pi].name]==='undefined'){returnProperties[elProperties[pi].name]=elProperties[pi].value;}} |
| 21 | return returnProperties;};socss.fn.elSelector=function(el){var elName='';if(el.attr('id')!==undefined){elName+='#'+el.attr('id');} |
| 22 | if(el.attr('class')!==undefined){elName+='.'+el.attr('class').replace(/\s+/,'.');} |
| 23 | if(elName===''){elName=el.prop('tagName').toLowerCase();} |
| 24 | return elName;};window.socssInspector=socss;})(jQuery,_,socssOptions);jQuery(function($){var socss=window.socssInspector;var inspector=new socss.view.inspector({el:$('#socss-inspector-interface').get(0)});inspector.activate();window.socssInspector.mainInspector=inspector;}); |