SiteOrigin CSS - Version 1.0.7

Version Description

  • 4 July 2016 =
  • Ensure user can copy/paste in editor via context menu.
  • Added plugin action links
  • Add classes on body element to selectors window.
Download this release

Release Info

Developer gpriday
Plugin Icon 128x128 SiteOrigin CSS
Version 1.0.7
Comparing to
See all releases

Code changes from version 1.0.6 to 1.0.7

Files changed (6) hide show
  1. js/editor.js +22 -9
  2. js/editor.min.js +1 -1
  3. js/inspector.js +31 -18
  4. js/inspector.min.js +1 -1
  5. readme.txt +11 -6
  6. so-css.php +12 -2
js/editor.js CHANGED
@@ -92,7 +92,7 @@
92
  });
93
 
94
  this.toolbar.on('click_visual', function () {
95
- thisView.visualProperties.loadCSS( thisView.codeMirror.getValue() );
96
  thisView.visualProperties.show();
97
  });
98
 
@@ -111,24 +111,37 @@
111
  this.registerCodeMirrorAutocomplete();
112
 
113
  // Setup the Codemirror instance
114
- this.codeMirror = CodeMirror.fromTextArea(this.$('textarea.css-editor').get(0), {
 
 
 
 
 
 
 
 
 
 
 
 
115
  tabSize: 2,
116
  lineNumbers: true,
117
  mode: 'css',
118
  theme: 'neat',
 
119
  gutters: [
120
  "CodeMirror-lint-markers"
121
  ],
122
- lint: true
123
  });
124
 
125
  // Make sure the user doesn't leave without saving
126
- var startCss = this.$('textarea.css-editor').val();
127
  this.$el.on('submit', function(){
128
- startCss = thisView.codeMirror.getValue();
129
  });
130
  $(window).bind('beforeunload', function(){
131
- if( thisView.codeMirror.getValue() !== startCss ) {
 
132
  return socssOptions.loc.leave;
133
  }
134
  });
@@ -463,7 +476,7 @@
463
  var style = head.find('style.siteorigin-custom-css');
464
 
465
  // Update the CSS after a short delay
466
- var css = this.editor.codeMirror.getValue();
467
  style.html(css);
468
  },
469
 
@@ -897,7 +910,7 @@
897
  else {
898
  // The selector doesn't exist, so add it to the CSS, then reload
899
  this.editor.addEmptySelector(selector);
900
- this.loadCSS( this.editor.codeMirror.getValue(), selector );
901
  }
902
 
903
  dropdown.addClass('highlighted');
@@ -1527,4 +1540,4 @@ jQuery(function ($) {
1527
  $('#so-custom-css-getting-started').slideUp();
1528
  $.get( $(this).attr('href') );
1529
  } );
1530
- });
92
  });
93
 
94
  this.toolbar.on('click_visual', function () {
95
+ thisView.visualProperties.loadCSS( thisView.codeMirror.getValue().trim() );
96
  thisView.visualProperties.show();
97
  });
98
 
111
  this.registerCodeMirrorAutocomplete();
112
 
113
  // Setup the Codemirror instance
114
+ var $textArea = this.$('textarea.css-editor');
115
+ var initValue = $textArea.val();
116
+ // Pad with empty lines so the editor takes up all the white space. To try make sure user gets copy/paste
117
+ // options in context menu.
118
+ var newlineMatches = initValue.match(/\n/gm);
119
+ var lineCount = newlineMatches ? newlineMatches.length+1 : 1;
120
+ var numPadLines = 15 - lineCount;
121
+ var paddedValue = initValue;
122
+ for(var i = 0; i < numPadLines; i++) {
123
+ paddedValue += '\n';
124
+ }
125
+ $textArea.val(paddedValue);
126
+ this.codeMirror = CodeMirror.fromTextArea($textArea.get(0), {
127
  tabSize: 2,
128
  lineNumbers: true,
129
  mode: 'css',
130
  theme: 'neat',
131
+ inputStyle: 'contenteditable', //necessary to allow context menu (right click) copy/paste etc.
132
  gutters: [
133
  "CodeMirror-lint-markers"
134
  ],
135
+ lint: true,
136
  });
137
 
138
  // Make sure the user doesn't leave without saving
 
139
  this.$el.on('submit', function(){
140
+ initValue = thisView.codeMirror.getValue().trim();
141
  });
142
  $(window).bind('beforeunload', function(){
143
+ var editorValue = thisView.codeMirror.getValue().trim();
144
+ if( editorValue !== initValue ) {
145
  return socssOptions.loc.leave;
146
  }
147
  });
476
  var style = head.find('style.siteorigin-custom-css');
477
 
478
  // Update the CSS after a short delay
479
+ var css = this.editor.codeMirror.getValue().trim();
480
  style.html(css);
481
  },
482
 
910
  else {
911
  // The selector doesn't exist, so add it to the CSS, then reload
912
  this.editor.addEmptySelector(selector);
913
+ this.loadCSS( this.editor.codeMirror.getValue().trim(), selector );
914
  }
915
 
916
  dropdown.addClass('highlighted');
1540
  $('#so-custom-css-getting-started').slideUp();
1541
  $.get( $(this).attr('href') );
1542
  } );
1543
+ });
js/editor.min.js CHANGED
@@ -1 +1 @@
1
- !function(e,t,i){var s={model:{},collection:{},view:{},fn:{}};window.socss=s,s.view.toolbar=Backbone.View.extend({button:t.template('<li><a href="#" class="toolbar-button socss-button"><%= text %></a></li>'),editor:null,initialize:function(t){this.editor=t.editor;var i=this;this.$(".editor-expand").click(function(t){t.preventDefault(),e(this).blur(),i.trigger("click_expand")}),this.$(".editor-visual").click(function(t){t.preventDefault(),e(this).blur(),i.trigger("click_visual")})},addButton:function(t,i){var s=this,n=e(this.button({text:t})).appendTo(this.$(".toolbar-function-buttons .toolbar-buttons")).click(function(t){t.preventDefault(),e(this).blur(),s.trigger("click_"+i)});return n}}),s.view.editor=Backbone.View.extend({codeMirror:null,snippets:null,toolbar:null,visualProperties:null,inspector:null,cssSelectors:[],initialize:function(e){this.setupEditor()},render:function(){var t=this;this.toolbar=new s.view.toolbar({editor:this,el:this.$(".custom-css-toolbar")}),this.toolbar.editor=this,this.toolbar.render(),this.visualProperties=new s.view.properties({editor:this,el:e("#so-custom-css-properties")}),this.visualProperties.render(),this.toolbar.on("click_expand",function(){t.toggleExpand()}),this.toolbar.on("click_visual",function(){t.visualProperties.loadCSS(t.codeMirror.getValue()),t.visualProperties.show()}),this.preview=new s.view.preview({editor:this,el:this.$(".custom-css-preview")}),this.preview.render()},setupEditor:function(){var t=this;this.registerCodeMirrorAutocomplete(),this.codeMirror=CodeMirror.fromTextArea(this.$("textarea.css-editor").get(0),{tabSize:2,lineNumbers:!0,mode:"css",theme:"neat",gutters:["CodeMirror-lint-markers"],lint:!0});var s=this.$("textarea.css-editor").val();this.$el.on("submit",function(){s=t.codeMirror.getValue()}),e(window).bind("beforeunload",function(){return t.codeMirror.getValue()!==s?i.loc.leave:void 0}),this.$el.find(".custom-css-container").css("overflow","visible"),this.scaleEditor(),e(window).resize(function(){t.scaleEditor()}),this.setupCodeMirrorExtensions()},registerCodeMirrorAutocomplete:function(){var e=this,t={link:1,visited:1,active:1,hover:1,focus:1,"first-letter":1,"first-line":1,"first-child":1,before:1,after:1,lang:1};CodeMirror.registerHelper("hint","css",function(i){function s(e){for(var t in e)c&&0!==t.lastIndexOf(c,0)||p.push(t)}var n=i.getCursor(),r=i.getTokenAt(n),o=CodeMirror.innerMode(i.getMode(),r.state);if("css"===o.mode.name){if("keyword"===r.type&&0==="!important".indexOf(r.string))return{list:["!important"],from:CodeMirror.Pos(n.line,r.start),to:CodeMirror.Pos(n.line,r.end)};var a=r.start,l=n.ch,c=r.string.slice(0,l-a);/[^\w$_-]/.test(c)&&(c="",a=l=n.ch);var d=CodeMirror.resolveMode("text/css"),p=[],h=o.state.state;if("top"===h){for(var u=i.getLine(n.line).trim(),v=e.cssSelectors,f=0;f<v.length;f++)-1!==v[f].selector.indexOf(u)&&p.push(v[f].selector);if(p.length)return{list:p,from:CodeMirror.Pos(n.line,0),to:CodeMirror.Pos(n.line,l)}}else if("pseudo"===h||"variable-3"===r.type?s(t):"block"===h||"maybeprop"===h?s(d.propertyKeywords):"prop"===h||"parens"===h||"at"===h||"params"===h?(s(d.valueKeywords),s(d.colorKeywords)):("media"===h||"media_parens"===h)&&(s(d.mediaTypes),s(d.mediaFeatures)),p.length)return{list:p,from:CodeMirror.Pos(n.line,a),to:CodeMirror.Pos(n.line,l)}}})},setupCodeMirrorExtensions:function(){var e=this;this.codeMirror.on("cursorActivity",function(t){var i=t.getCursor(),s=t.getTokenAt(i);CodeMirror.innerMode(t.getMode(),s.state);if("qualifier"===s.type||"tag"===s.type||"builtin"===s.type){var n=t.getLine(i.line),r=n.substring(0,s.end);e.preview.highlight(r)}else e.preview.clearHighlight()}),this.codeMirror.on("keyup",function(e,t){(t.keyCode>=65&&t.keyCode<=90||189===t.keyCode&&!t.shiftKey||190===t.keyCode&&!t.shiftKey||51===t.keyCode&&t.shiftKey||189===t.keyCode&&t.shiftKey)&&e.showHint({completeSingle:!1})})},scaleEditor:function(){this.$el.hasClass("expanded")?this.codeMirror.setSize("100%",e(window).outerHeight()-this.$(".custom-css-toolbar").outerHeight()):this.codeMirror.setSize("100%","auto")},isExpanded:function(){return this.$el.hasClass("expanded")},toggleExpand:function(){this.$el.toggleClass("expanded"),this.scaleEditor()},setExpand:function(e){e?this.$el.addClass("expanded"):this.$el.removeClass("expanded"),this.scaleEditor()},setSnippets:function(e){if(!t.isEmpty(e)){var i=this;this.snippets=new s.view.snippets({snippets:e}),this.snippets.editor=this,this.snippets.render(),this.toolbar.addButton("Snippets","snippets"),this.toolbar.on("click_snippets",function(){i.snippets.show()})}},addCode:function(e){var t=this.codeMirror,i="";i=1===t.doc.lineCount()&&0===t.doc.getLine(t.doc.lastLine()).length?"":0===t.doc.getLine(t.doc.lastLine()).length?"\n":"\n\n",t.doc.setCursor(t.doc.lastLine(),t.doc.getLine(t.doc.lastLine()).length),t.doc.replaceSelection(i+e)},addEmptySelector:function(e){this.addCode(e+" {\n \n}")},setInspector:function(e){var t=this;this.inspector=e,this.cssSelectors=e.pageSelectors,e.on("click_selector",function(e){t.visualProperties.isVisible()?t.visualProperties.addSelector(e):t.addEmptySelector(e)}),e.on("click_property",function(e){t.visualProperties.isVisible()||t.codeMirror.replaceSelection(e+";\n ")}),e.on("set_active_element",function(e,i){t.visualProperties.isVisible()&&i.length&&t.visualProperties.addSelector(i[0].selector)})}}),s.view.preview=Backbone.View.extend({template:t.template('<iframe class="preview-iframe" seamless="seamless"></iframe>'),editor:null,initialize:function(e){this.editor=e.editor;var t=this;this.editor.codeMirror.on("change",function(e,i){t.updatePreviewCss()})},render:function(){var t=this;this.$el.html(this.template()),this.$(".preview-iframe").attr("src",i.homeURL).load(function(){var i=e(this);i.contents().find("a").each(function(){var t=e(this).attr("href");if(void 0===t)return!0;var i=-1===t.indexOf("?")?"?":"&";e(this).attr("href",t+i+"so_css_preview=1")}),t.updatePreviewCss()}).mouseleave(function(){t.clearHighlight()})},updatePreviewCss:function(){var e=this.$(".preview-iframe");if(0!==e.length){var t=e.contents().find("head");0===t.find("style.siteorigin-custom-css").length&&t.append('<style class="siteorigin-custom-css" type="text/css"></style>');var i=t.find("style.siteorigin-custom-css"),s=this.editor.codeMirror.getValue();i.html(s)}},highlight:function(e){try{this.editor.inspector.hl.highlight(e)}catch(t){console.log("No inspector to highlight with")}},clearHighlight:function(){try{this.editor.inspector.hl.clear()}catch(e){console.log("No inspector to highlight with")}}}),s.view.snippets=Backbone.View.extend({template:t.template(e("#template-snippet-browser").html()),snippet:t.template('<li class="snippet"><%- name %></li>'),className:"css-editor-snippet-browser",snippets:null,editor:null,events:{"click .close":"hide","click .buttons .insert-snippet":"insertSnippet"},currentSnippet:null,initialize:function(e){this.snippets=e.snippets},render:function(){var t=this,i=function(i){i.preventDefault();var s=e(this);t.$(".snippets li.snippet").removeClass("active"),e(this).addClass("active"),t.viewSnippet({name:s.html(),description:s.data("description"),css:s.data("css")})};this.$el.html(this.template());for(var s=0;s<this.snippets.length;s++)e(this.snippet({name:this.snippets[s].Name})).data({description:this.snippets[s].Description,css:this.snippets[s].css}).appendTo(this.$("ul.snippets")).click(i);return t.$(".snippets li.snippet").eq(0).click(),this.attach(),this},viewSnippet:function(e){var t=this.$(".main .snippet-view");t.find(".snippet-title").html(e.name),t.find(".snippet-description").html(e.description),t.find(".snippet-code").html(e.css),this.currentSnippet=e},insertSnippet:function(){var e=this.editor.codeMirror,t=this.currentSnippet.css,i="";i=1===e.doc.lineCount()&&0===e.doc.getLine(e.doc.lastLine()).length?"":0===e.doc.getLine(e.doc.lastLine()).length?"\n":"\n\n",e.doc.setCursor(e.doc.lastLine(),e.doc.getLine(e.doc.lastLine()).length),e.doc.replaceSelection(i+t),this.hide()},attach:function(){this.$el.appendTo("body")},show:function(){this.$el.show()},hide:function(){this.$el.hide()}}),s.view.properties=Backbone.View.extend({model:s.model.cssRules,tabTemplate:t.template('<li data-section="<%- id %>"><span class="fa fa-<%- icon %>"></span> <%- title %></li>'),sectionTemplate:t.template('<div class="section" data-section="<%- id %>"><table class="fields-table"><tbody></tbody></table></div>'),controllerTemplate:t.template('<tr><th scope="row"><%- title %></th><td></td></tr>'),propertyControllers:[],editor:null,css:"",parsed:{},activeSelector:"",editorExpandedBefore:!1,events:{"click .close":"hide"},initialize:function(e){this.parser=new cssjs,this.editor=e.editor},render:function(){var n=this,r=i.propertyControllers;for(var o in r){var a=(e(this.tabTemplate({id:o,icon:r[o].icon,title:r[o].title})).appendTo(this.$(".section-tabs")),e(this.sectionTemplate({id:o})).appendTo(this.$(".sections")));if(!t.isEmpty(r[o].controllers))for(var l=0;l<r[o].controllers.length;l++){var c,d=e(n.controllerTemplate({title:r[o].controllers[l].title})).appendTo(a.find("tbody")),p=r[o].controllers[l];c="undefined"==typeof s.view.properties.controllers[p.type]?new s.view.propertyController({el:d.find("td"),propertiesView:n,args:"undefined"==typeof p.args?{}:p.args}):new s.view.properties.controllers[p.type]({el:d.find("td"),propertiesView:n,args:"undefined"==typeof p.args?{}:p.args}),n.propertyControllers.push(c),c.render(),c.initChangeEvents()}}this.$(".section-tabs li").click(function(){var t=e(this),i=n.$('.sections .section[data-section="'+t.data("section")+'"]');n.$(".sections .section").not(i).hide().removeClass("active"),i.show().addClass("active"),n.$(".section-tabs li").not(t).removeClass("active"),t.addClass("active")}).eq(0).click(),this.$(".toolbar select").change(function(){n.setActivateSelector(e(this).find(":selected").data("selector"))})},setRuleValue:function(e,t){if("undefined"!=typeof this.activeSelector&&"undefined"!=typeof this.activeSelector.rules){for(var i=!0,s=0;s<this.activeSelector.rules.length;s++)if(this.activeSelector.rules[s].directive===e){this.activeSelector.rules[s].value=t,i=!1;break}i&&this.activeSelector.rules.push({directive:e,value:t}),this.updateMainEditor(!1)}},getRuleValue:function(e){if("undefined"==typeof this.activeSelector||"undefined"==typeof this.activeSelector.rules)return"";for(var t=0;t<this.activeSelector.rules.length;t++)if(this.activeSelector.rules[t].directive===e)return this.activeSelector.rules[t].value;return""},updateMainEditor:function(e){var t;"undefined"==typeof e||e===!0?(t=this.parser.compressCSS(this.parsed),t=t.filter(function(e){return"undefined"!=typeof e.type||e.rules.length>0})):t=this.parsed,this.editor.codeMirror.setValue(this.parser.getCSSForEditor(t).trim())},show:function(){this.editorExpandedBefore=this.editor.isExpanded(),this.editor.setExpand(!0),this.$el.show().animate({left:0},"fast")},hide:function(){this.editor.setExpand(this.editorExpandedBefore),this.$el.animate({left:-338},"fast",function(){e(this).hide()}),this.updateMainEditor(!0)},isVisible:function(){return this.$el.is(":visible")},loadCSS:function(t,i){this.css=t,this.parsed=this.parser.compressCSS(this.parser.parseCSS(t));for(var s=this.$(".toolbar select").empty(),n=0;n<this.parsed.length;n++){var r=this.parsed[n];if("undefined"!=typeof r.subStyles)for(var o=0;o<r.subStyles.length;o++){var a=r.subStyles[o];s.append(e("<option>").html(r.selector+": "+a.selector).attr("val",r.selector+": "+a.selector).data("selector",a))}else s.append(e("<option>").html(r.selector).attr("val",r.selector).data("selector",r))}"undefined"==typeof i&&(i=s.find("option").eq(0).attr("val")),s.val(i).change()},setActivateSelector:function(e){this.activeSelector=e;for(var t=0;t<this.propertyControllers.length;t++)this.propertyControllers[t].refreshFromRule()},addSelector:function(e){var t=this.$(".toolbar select");t.val(e),t.val()===e?t.change():(this.editor.addEmptySelector(e),this.loadCSS(this.editor.codeMirror.getValue(),e)),t.addClass("highlighted"),setTimeout(function(){t.removeClass("highlighted")},2e3)}}),s.view.propertyController=Backbone.View.extend({template:t.template('<input type="text" value="" />'),activeRule:null,args:null,propertiesView:null,initialize:function(e){this.args=e.args,this.propertiesView=e.propertiesView,this.on("set_value",this.updateRule,this),this.on("change",this.updateRule,this)},render:function(){this.$el.append(e(this.template({}))),this.field=this.$("input")},initChangeEvents:function(){var t=this;this.field.on("change keyup",function(){t.trigger("change",e(this).val())})},updateRule:function(){this.propertiesView.setRuleValue(this.args.property,this.getValue())},refreshFromRule:function(){var e=this.propertiesView.getRuleValue(this.args.property);this.setValue(e,{silent:!0})},getValue:function(){return this.field.val()},setValue:function(e,i){i=t.extend({silent:!1},i),this.field.val(e),i.silent||this.trigger("set_value",e)},reset:function(e){e=t.extend({silent:!1},e),this.setValue("",e)}}),s.view.properties.controllers={},s.view.properties.controllers.color=s.view.propertyController.extend({template:t.template('<input type="text" value="" />'),render:function(){this.$el.append(e(this.template({}))),this.field=this.$el.find("input"),this.field.minicolors({})},initChangeEvents:function(){var e=this;this.field.on("change keyup",function(){e.trigger("change",e.field.minicolors("value"))})},getValue:function(){return this.field.minicolors("value")},setValue:function(e,i){i=t.extend({silent:!1},i),this.field.minicolors("value",e),i.silent||this.trigger("set_value",e)}}),s.view.properties.controllers.select=s.view.propertyController.extend({template:t.template("<select></select>"),render:function(){this.$el.append(e(this.template({}))),this.field=this.$el.find("select"),this.field.append(e('<option value=""></option>').html(""));for(var t in this.args.options)this.field.append(e("<option></option>").attr("value",t).html(this.args.options[t]));"undefined"!=typeof this.args.option_icons&&this.setupVisualSelect()},setupVisualSelect:function(){var t=this;this.field.hide();var i=e('<div class="select-tabs"></div>').appendTo(this.$el);e('<div class="select-tab" data-value=""><span class="fa fa-circle-o"></span></div>').appendTo(i);for(var s in this.args.option_icons)e('<div class="select-tab"></div>').appendTo(i).append(e('<span class="fa"></span>').addClass("fa-"+this.args.option_icons[s])).attr("data-value",s);i.find(".select-tab").css("width",100/i.find(">div").length+"%").click(function(){var s=e(this);i.find(".select-tab").removeClass("active"),s.addClass("active"),t.field.val(s.data("value")).change()})},setValue:function(e,i){i=t.extend({silent:!1},i),this.field.val(e),this.$(".select-tabs .select-tab").removeClass("active").filter('[data-value="'+e+'"]').addClass("active"),i.silent||this.trigger("set_value",e)}}),s.view.properties.controllers.image=s.view.propertyController.extend({template:t.template('<input type="text" value="" /> <span class="select socss-button"><span class="fa fa-upload"></span></span>'),render:function(){var t=this;this.media=wp.media({title:i.loc.select_image,library:{type:"image"},button:{text:i.loc.select,close:!1}}),this.$el.append(e(this.template({select:i.loc.select}))),this.field=this.$el.find("input"),this.$(".select").click(function(){t.media.open()}),this.media.on("select",function(){var e=this.state().get("selection").first().attributes,i=t.args.value.replace("{{url}}",e.url);t.field.val(i).change(),t.media.close()},this.media)}}),s.view.properties.controllers.measurement=s.view.propertyController.extend({wrapperClass:"socss-field-measurement",render:function(){this.$el.append(e(this.template({}))),this.field=this.$("input"),this.setupMeasurementField(this.field,{})},setValue:function(e,i){i=t.extend({silent:!1},i),this.field.val(e).trigger("measurement_refresh"),i.silent||this.trigger("set_value",e)},units:["px","%","em","cm","mm","in","pt","pc","ex","ch","rem","vw","vh","vmin","vmax"],parseUnits:function(e){var t=function(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")},i=this.units.map(t),s=new RegExp("([0-9\\.\\-]+)("+i.join("|")+")?","i"),n=s.exec(e);return null===n?{value:"",unit:""}:{value:n[1],unit:void 0===n[2]?"":n[2]}},setupMeasurementField:function(i,s){var n=this,r=i.parent();s=t.extend({defaultUnit:"px"},s),i.hide(),r.addClass(this.wrapperClass).data("unit",s.defaultUnit);for(var o=e('<input type="text" class="socss-field-input"/>').appendTo(r),a=e('<span class="dashicons dashicons-arrow-down"></span>').appendTo(r),l=e('<ul class="dropdown"></ul>').appendTo(r),c=e('<span class="units"></span>').html(s.defaultUnit).appendTo(r),d=0;d<n.units.length;d++){var p=e("<li></li>").html(n.units[d]).data("unit",n.units[d]);n.units[d]===s.defaultUnit&&p.addClass("active"),l.append(p)}var h=function(){var e=n.parseUnits(o.val());""!==e.unit&&e.unit!==r.data("unit")&&(o.val(e.value),u(e.unit)),""===e.value?i.val(""):i.val(e.value+r.data("unit"))},u=function(e){c.html(e),r.data("unit",e),o.trigger("keydown")};a.click(function(){l.toggle()}),l.find("li").click(function(){l.toggle(),u(e(this).data("unit")),h(),i.trigger("change")}),o.on("keyup keydown",function(t){var i=(e(this),"");"keydown"===t.type&&(t.keyCode>=48&&t.keyCode<=57?i=String.fromCharCode(t.keyCode):189===t.keyCode?i="-":190===t.keyCode&&(i="."));var s=e('<span class="socss-hidden-placeholder"></span>').css({"font-size":"14px"}).html(o.val()+i).appendTo("body"),n=s.width();n=Math.min(n,63),s.remove(),c.css("left",n+12)}),o.on("keyup",function(e){h(),i.trigger("change")}),i.on("measurement_refresh",function(){var t=n.parseUnits(i.val());o.val(t.value);var a=""===t.unit?s.defaultUnit:t.unit;r.data("unit",a),c.html(a);var l=e('<span class="socss-hidden-placeholder"></span>').css({"font-size":"14px"}).html(t.value).appendTo("body"),d=l.width();d=Math.min(d,63),l.remove(),c.css("left",d+12)});var v=e('<div class="socss-diw"></div>').appendTo(r),f=e('<div class="dec-button socss-button"><span class="fa fa-minus"></span></div>').appendTo(v),m=e('<div class="inc-button socss-button"><span class="fa fa-plus"></span></div>').appendTo(v);m.click(function(){var e=n.parseUnits(i.val());if(""===e.value)return!0;var t=Math.ceil(1.05*e.value);o.val(t),h(),i.trigger("change").trigger("measurement_refresh")}),f.click(function(){var e=n.parseUnits(i.val());if(""===e.value)return!0;var t=Math.floor(e.value/1.05);o.val(t),h(),i.trigger("change").trigger("measurement_refresh")})}}),s.view.properties.controllers.number=s.view.propertyController.extend({render:function(){this.$el.append(e(this.template({}))),this.field=this.$("input"),this.setupNumberField(this.field,this.args)},setupNumberField:function(i,s){s=t.extend({change:null,"default":0,increment:1,decrement:-1,max:null,min:null},s);var n=i.parent();n.addClass("socss-field-number");var r=e('<div class="socss-diw"></div>').appendTo(n),o=e('<div class="dec-button socss-button">-</div>').appendTo(r);e('<div class="inc-button socss-button">+</div>').appendTo(r);return r.find("> div").click(function(t){t.preventDefault();var n=s["default"];""!==i.val()&&(n=Number(i.val())),n+=e(this).is(o)?s.decrement:s.increment,n=Math.round(100*n)/100,null!==s.max&&(n=Math.min(s.max,n)),null!==s.min&&(n=Math.max(s.min,n)),i.val(n),i.trigger("change")}),this}}),s.view.properties.controllers.sides=s.view.propertyController.extend({template:t.template(e("#template-sides-field").html().trim()),controllers:[],render:function(){var i=this;this.$el.append(e(this.template({}))),this.field=this.$el.find("input"),i.args.hasAll||(this.$(".select-tab").eq(0).remove(),this.$(".select-tab").css("width","25%")),this.$(".select-tab").each(function(){for(var n=e(this).data("direction"),r=e('<li class="side">').appendTo(i.$(".sides")).hide(),o=0;o<i.args.controllers.length;o++){var a=i.args.controllers[o],l="";l="all"===n?a.args.propertyAll:a.args.property.replace("{dir}",n);var c=t.extend({},a.args,{property:l}),d=new s.view.properties.controllers[a.type]({el:e("<div>").appendTo(r),propertiesView:i.propertiesView,args:c});d.render(),d.initChangeEvents(),i.propertiesView.propertyControllers.push(d)}e(this).on("click",function(){i.$(".select-tab").removeClass("active"),e(this).addClass("active"),i.$(".sides .side").hide(),r.show()})}),this.$(".select-tab").eq(0).click()}})}(jQuery,_,socssOptions),jQuery(function(e){var t=window.socss,i=new t.view.editor({el:e("#so-custom-css-form").get(0)});i.render(),i.setSnippets(socssOptions.snippets),window.socss.mainEditor=i,e("#so-custom-css-getting-started a.hide").click(function(t){t.preventDefault(),e("#so-custom-css-getting-started").slideUp(),e.get(e(this).attr("href"))})});
1
+ !function(e,t,i){var s={model:{},collection:{},view:{},fn:{}};window.socss=s,s.view.toolbar=Backbone.View.extend({button:t.template('<li><a href="#" class="toolbar-button socss-button"><%= text %></a></li>'),editor:null,initialize:function(t){this.editor=t.editor;var i=this;this.$(".editor-expand").click(function(t){t.preventDefault(),e(this).blur(),i.trigger("click_expand")}),this.$(".editor-visual").click(function(t){t.preventDefault(),e(this).blur(),i.trigger("click_visual")})},addButton:function(t,i){var s=this,n=e(this.button({text:t})).appendTo(this.$(".toolbar-function-buttons .toolbar-buttons")).click(function(t){t.preventDefault(),e(this).blur(),s.trigger("click_"+i)});return n}}),s.view.editor=Backbone.View.extend({codeMirror:null,snippets:null,toolbar:null,visualProperties:null,inspector:null,cssSelectors:[],initialize:function(e){this.setupEditor()},render:function(){var t=this;this.toolbar=new s.view.toolbar({editor:this,el:this.$(".custom-css-toolbar")}),this.toolbar.editor=this,this.toolbar.render(),this.visualProperties=new s.view.properties({editor:this,el:e("#so-custom-css-properties")}),this.visualProperties.render(),this.toolbar.on("click_expand",function(){t.toggleExpand()}),this.toolbar.on("click_visual",function(){t.visualProperties.loadCSS(t.codeMirror.getValue().trim()),t.visualProperties.show()}),this.preview=new s.view.preview({editor:this,el:this.$(".custom-css-preview")}),this.preview.render()},setupEditor:function(){var t=this;this.registerCodeMirrorAutocomplete();for(var s=this.$("textarea.css-editor"),n=s.val(),r=n.match(/\n/gm),o=r?r.length+1:1,a=15-o,l=n,c=0;a>c;c++)l+="\n";s.val(l),this.codeMirror=CodeMirror.fromTextArea(s.get(0),{tabSize:2,lineNumbers:!0,mode:"css",theme:"neat",inputStyle:"contenteditable",gutters:["CodeMirror-lint-markers"],lint:!0}),this.$el.on("submit",function(){n=t.codeMirror.getValue().trim()}),e(window).bind("beforeunload",function(){var e=t.codeMirror.getValue().trim();return e!==n?i.loc.leave:void 0}),this.$el.find(".custom-css-container").css("overflow","visible"),this.scaleEditor(),e(window).resize(function(){t.scaleEditor()}),this.setupCodeMirrorExtensions()},registerCodeMirrorAutocomplete:function(){var e=this,t={link:1,visited:1,active:1,hover:1,focus:1,"first-letter":1,"first-line":1,"first-child":1,before:1,after:1,lang:1};CodeMirror.registerHelper("hint","css",function(i){function s(e){for(var t in e)c&&0!==t.lastIndexOf(c,0)||p.push(t)}var n=i.getCursor(),r=i.getTokenAt(n),o=CodeMirror.innerMode(i.getMode(),r.state);if("css"===o.mode.name){if("keyword"===r.type&&0==="!important".indexOf(r.string))return{list:["!important"],from:CodeMirror.Pos(n.line,r.start),to:CodeMirror.Pos(n.line,r.end)};var a=r.start,l=n.ch,c=r.string.slice(0,l-a);/[^\w$_-]/.test(c)&&(c="",a=l=n.ch);var d=CodeMirror.resolveMode("text/css"),p=[],h=o.state.state;if("top"===h){for(var u=i.getLine(n.line).trim(),v=e.cssSelectors,f=0;f<v.length;f++)-1!==v[f].selector.indexOf(u)&&p.push(v[f].selector);if(p.length)return{list:p,from:CodeMirror.Pos(n.line,0),to:CodeMirror.Pos(n.line,l)}}else if("pseudo"===h||"variable-3"===r.type?s(t):"block"===h||"maybeprop"===h?s(d.propertyKeywords):"prop"===h||"parens"===h||"at"===h||"params"===h?(s(d.valueKeywords),s(d.colorKeywords)):("media"===h||"media_parens"===h)&&(s(d.mediaTypes),s(d.mediaFeatures)),p.length)return{list:p,from:CodeMirror.Pos(n.line,a),to:CodeMirror.Pos(n.line,l)}}})},setupCodeMirrorExtensions:function(){var e=this;this.codeMirror.on("cursorActivity",function(t){var i=t.getCursor(),s=t.getTokenAt(i);CodeMirror.innerMode(t.getMode(),s.state);if("qualifier"===s.type||"tag"===s.type||"builtin"===s.type){var n=t.getLine(i.line),r=n.substring(0,s.end);e.preview.highlight(r)}else e.preview.clearHighlight()}),this.codeMirror.on("keyup",function(e,t){(t.keyCode>=65&&t.keyCode<=90||189===t.keyCode&&!t.shiftKey||190===t.keyCode&&!t.shiftKey||51===t.keyCode&&t.shiftKey||189===t.keyCode&&t.shiftKey)&&e.showHint({completeSingle:!1})})},scaleEditor:function(){this.$el.hasClass("expanded")?this.codeMirror.setSize("100%",e(window).outerHeight()-this.$(".custom-css-toolbar").outerHeight()):this.codeMirror.setSize("100%","auto")},isExpanded:function(){return this.$el.hasClass("expanded")},toggleExpand:function(){this.$el.toggleClass("expanded"),this.scaleEditor()},setExpand:function(e){e?this.$el.addClass("expanded"):this.$el.removeClass("expanded"),this.scaleEditor()},setSnippets:function(e){if(!t.isEmpty(e)){var i=this;this.snippets=new s.view.snippets({snippets:e}),this.snippets.editor=this,this.snippets.render(),this.toolbar.addButton("Snippets","snippets"),this.toolbar.on("click_snippets",function(){i.snippets.show()})}},addCode:function(e){var t=this.codeMirror,i="";i=1===t.doc.lineCount()&&0===t.doc.getLine(t.doc.lastLine()).length?"":0===t.doc.getLine(t.doc.lastLine()).length?"\n":"\n\n",t.doc.setCursor(t.doc.lastLine(),t.doc.getLine(t.doc.lastLine()).length),t.doc.replaceSelection(i+e)},addEmptySelector:function(e){this.addCode(e+" {\n \n}")},setInspector:function(e){var t=this;this.inspector=e,this.cssSelectors=e.pageSelectors,e.on("click_selector",function(e){t.visualProperties.isVisible()?t.visualProperties.addSelector(e):t.addEmptySelector(e)}),e.on("click_property",function(e){t.visualProperties.isVisible()||t.codeMirror.replaceSelection(e+";\n ")}),e.on("set_active_element",function(e,i){t.visualProperties.isVisible()&&i.length&&t.visualProperties.addSelector(i[0].selector)})}}),s.view.preview=Backbone.View.extend({template:t.template('<iframe class="preview-iframe" seamless="seamless"></iframe>'),editor:null,initialize:function(e){this.editor=e.editor;var t=this;this.editor.codeMirror.on("change",function(e,i){t.updatePreviewCss()})},render:function(){var t=this;this.$el.html(this.template()),this.$(".preview-iframe").attr("src",i.homeURL).load(function(){var i=e(this);i.contents().find("a").each(function(){var t=e(this).attr("href");if(void 0===t)return!0;var i=-1===t.indexOf("?")?"?":"&";e(this).attr("href",t+i+"so_css_preview=1")}),t.updatePreviewCss()}).mouseleave(function(){t.clearHighlight()})},updatePreviewCss:function(){var e=this.$(".preview-iframe");if(0!==e.length){var t=e.contents().find("head");0===t.find("style.siteorigin-custom-css").length&&t.append('<style class="siteorigin-custom-css" type="text/css"></style>');var i=t.find("style.siteorigin-custom-css"),s=this.editor.codeMirror.getValue().trim();i.html(s)}},highlight:function(e){try{this.editor.inspector.hl.highlight(e)}catch(t){console.log("No inspector to highlight with")}},clearHighlight:function(){try{this.editor.inspector.hl.clear()}catch(e){console.log("No inspector to highlight with")}}}),s.view.snippets=Backbone.View.extend({template:t.template(e("#template-snippet-browser").html()),snippet:t.template('<li class="snippet"><%- name %></li>'),className:"css-editor-snippet-browser",snippets:null,editor:null,events:{"click .close":"hide","click .buttons .insert-snippet":"insertSnippet"},currentSnippet:null,initialize:function(e){this.snippets=e.snippets},render:function(){var t=this,i=function(i){i.preventDefault();var s=e(this);t.$(".snippets li.snippet").removeClass("active"),e(this).addClass("active"),t.viewSnippet({name:s.html(),description:s.data("description"),css:s.data("css")})};this.$el.html(this.template());for(var s=0;s<this.snippets.length;s++)e(this.snippet({name:this.snippets[s].Name})).data({description:this.snippets[s].Description,css:this.snippets[s].css}).appendTo(this.$("ul.snippets")).click(i);return t.$(".snippets li.snippet").eq(0).click(),this.attach(),this},viewSnippet:function(e){var t=this.$(".main .snippet-view");t.find(".snippet-title").html(e.name),t.find(".snippet-description").html(e.description),t.find(".snippet-code").html(e.css),this.currentSnippet=e},insertSnippet:function(){var e=this.editor.codeMirror,t=this.currentSnippet.css,i="";i=1===e.doc.lineCount()&&0===e.doc.getLine(e.doc.lastLine()).length?"":0===e.doc.getLine(e.doc.lastLine()).length?"\n":"\n\n",e.doc.setCursor(e.doc.lastLine(),e.doc.getLine(e.doc.lastLine()).length),e.doc.replaceSelection(i+t),this.hide()},attach:function(){this.$el.appendTo("body")},show:function(){this.$el.show()},hide:function(){this.$el.hide()}}),s.view.properties=Backbone.View.extend({model:s.model.cssRules,tabTemplate:t.template('<li data-section="<%- id %>"><span class="fa fa-<%- icon %>"></span> <%- title %></li>'),sectionTemplate:t.template('<div class="section" data-section="<%- id %>"><table class="fields-table"><tbody></tbody></table></div>'),controllerTemplate:t.template('<tr><th scope="row"><%- title %></th><td></td></tr>'),propertyControllers:[],editor:null,css:"",parsed:{},activeSelector:"",editorExpandedBefore:!1,events:{"click .close":"hide"},initialize:function(e){this.parser=new cssjs,this.editor=e.editor},render:function(){var n=this,r=i.propertyControllers;for(var o in r){var a=(e(this.tabTemplate({id:o,icon:r[o].icon,title:r[o].title})).appendTo(this.$(".section-tabs")),e(this.sectionTemplate({id:o})).appendTo(this.$(".sections")));if(!t.isEmpty(r[o].controllers))for(var l=0;l<r[o].controllers.length;l++){var c,d=e(n.controllerTemplate({title:r[o].controllers[l].title})).appendTo(a.find("tbody")),p=r[o].controllers[l];c="undefined"==typeof s.view.properties.controllers[p.type]?new s.view.propertyController({el:d.find("td"),propertiesView:n,args:"undefined"==typeof p.args?{}:p.args}):new s.view.properties.controllers[p.type]({el:d.find("td"),propertiesView:n,args:"undefined"==typeof p.args?{}:p.args}),n.propertyControllers.push(c),c.render(),c.initChangeEvents()}}this.$(".section-tabs li").click(function(){var t=e(this),i=n.$('.sections .section[data-section="'+t.data("section")+'"]');n.$(".sections .section").not(i).hide().removeClass("active"),i.show().addClass("active"),n.$(".section-tabs li").not(t).removeClass("active"),t.addClass("active")}).eq(0).click(),this.$(".toolbar select").change(function(){n.setActivateSelector(e(this).find(":selected").data("selector"))})},setRuleValue:function(e,t){if("undefined"!=typeof this.activeSelector&&"undefined"!=typeof this.activeSelector.rules){for(var i=!0,s=0;s<this.activeSelector.rules.length;s++)if(this.activeSelector.rules[s].directive===e){this.activeSelector.rules[s].value=t,i=!1;break}i&&this.activeSelector.rules.push({directive:e,value:t}),this.updateMainEditor(!1)}},getRuleValue:function(e){if("undefined"==typeof this.activeSelector||"undefined"==typeof this.activeSelector.rules)return"";for(var t=0;t<this.activeSelector.rules.length;t++)if(this.activeSelector.rules[t].directive===e)return this.activeSelector.rules[t].value;return""},updateMainEditor:function(e){var t;"undefined"==typeof e||e===!0?(t=this.parser.compressCSS(this.parsed),t=t.filter(function(e){return"undefined"!=typeof e.type||e.rules.length>0})):t=this.parsed,this.editor.codeMirror.setValue(this.parser.getCSSForEditor(t).trim())},show:function(){this.editorExpandedBefore=this.editor.isExpanded(),this.editor.setExpand(!0),this.$el.show().animate({left:0},"fast")},hide:function(){this.editor.setExpand(this.editorExpandedBefore),this.$el.animate({left:-338},"fast",function(){e(this).hide()}),this.updateMainEditor(!0)},isVisible:function(){return this.$el.is(":visible")},loadCSS:function(t,i){this.css=t,this.parsed=this.parser.compressCSS(this.parser.parseCSS(t));for(var s=this.$(".toolbar select").empty(),n=0;n<this.parsed.length;n++){var r=this.parsed[n];if("undefined"!=typeof r.subStyles)for(var o=0;o<r.subStyles.length;o++){var a=r.subStyles[o];s.append(e("<option>").html(r.selector+": "+a.selector).attr("val",r.selector+": "+a.selector).data("selector",a))}else s.append(e("<option>").html(r.selector).attr("val",r.selector).data("selector",r))}"undefined"==typeof i&&(i=s.find("option").eq(0).attr("val")),s.val(i).change()},setActivateSelector:function(e){this.activeSelector=e;for(var t=0;t<this.propertyControllers.length;t++)this.propertyControllers[t].refreshFromRule()},addSelector:function(e){var t=this.$(".toolbar select");t.val(e),t.val()===e?t.change():(this.editor.addEmptySelector(e),this.loadCSS(this.editor.codeMirror.getValue().trim(),e)),t.addClass("highlighted"),setTimeout(function(){t.removeClass("highlighted")},2e3)}}),s.view.propertyController=Backbone.View.extend({template:t.template('<input type="text" value="" />'),activeRule:null,args:null,propertiesView:null,initialize:function(e){this.args=e.args,this.propertiesView=e.propertiesView,this.on("set_value",this.updateRule,this),this.on("change",this.updateRule,this)},render:function(){this.$el.append(e(this.template({}))),this.field=this.$("input")},initChangeEvents:function(){var t=this;this.field.on("change keyup",function(){t.trigger("change",e(this).val())})},updateRule:function(){this.propertiesView.setRuleValue(this.args.property,this.getValue())},refreshFromRule:function(){var e=this.propertiesView.getRuleValue(this.args.property);this.setValue(e,{silent:!0})},getValue:function(){return this.field.val()},setValue:function(e,i){i=t.extend({silent:!1},i),this.field.val(e),i.silent||this.trigger("set_value",e)},reset:function(e){e=t.extend({silent:!1},e),this.setValue("",e)}}),s.view.properties.controllers={},s.view.properties.controllers.color=s.view.propertyController.extend({template:t.template('<input type="text" value="" />'),render:function(){this.$el.append(e(this.template({}))),this.field=this.$el.find("input"),this.field.minicolors({})},initChangeEvents:function(){var e=this;this.field.on("change keyup",function(){e.trigger("change",e.field.minicolors("value"))})},getValue:function(){return this.field.minicolors("value")},setValue:function(e,i){i=t.extend({silent:!1},i),this.field.minicolors("value",e),i.silent||this.trigger("set_value",e)}}),s.view.properties.controllers.select=s.view.propertyController.extend({template:t.template("<select></select>"),render:function(){this.$el.append(e(this.template({}))),this.field=this.$el.find("select"),this.field.append(e('<option value=""></option>').html(""));for(var t in this.args.options)this.field.append(e("<option></option>").attr("value",t).html(this.args.options[t]));"undefined"!=typeof this.args.option_icons&&this.setupVisualSelect()},setupVisualSelect:function(){var t=this;this.field.hide();var i=e('<div class="select-tabs"></div>').appendTo(this.$el);e('<div class="select-tab" data-value=""><span class="fa fa-circle-o"></span></div>').appendTo(i);for(var s in this.args.option_icons)e('<div class="select-tab"></div>').appendTo(i).append(e('<span class="fa"></span>').addClass("fa-"+this.args.option_icons[s])).attr("data-value",s);i.find(".select-tab").css("width",100/i.find(">div").length+"%").click(function(){var s=e(this);i.find(".select-tab").removeClass("active"),s.addClass("active"),t.field.val(s.data("value")).change()})},setValue:function(e,i){i=t.extend({silent:!1},i),this.field.val(e),this.$(".select-tabs .select-tab").removeClass("active").filter('[data-value="'+e+'"]').addClass("active"),i.silent||this.trigger("set_value",e)}}),s.view.properties.controllers.image=s.view.propertyController.extend({template:t.template('<input type="text" value="" /> <span class="select socss-button"><span class="fa fa-upload"></span></span>'),render:function(){var t=this;this.media=wp.media({title:i.loc.select_image,library:{type:"image"},button:{text:i.loc.select,close:!1}}),this.$el.append(e(this.template({select:i.loc.select}))),this.field=this.$el.find("input"),this.$(".select").click(function(){t.media.open()}),this.media.on("select",function(){var e=this.state().get("selection").first().attributes,i=t.args.value.replace("{{url}}",e.url);t.field.val(i).change(),t.media.close()},this.media)}}),s.view.properties.controllers.measurement=s.view.propertyController.extend({wrapperClass:"socss-field-measurement",render:function(){this.$el.append(e(this.template({}))),this.field=this.$("input"),this.setupMeasurementField(this.field,{})},setValue:function(e,i){i=t.extend({silent:!1},i),this.field.val(e).trigger("measurement_refresh"),i.silent||this.trigger("set_value",e)},units:["px","%","em","cm","mm","in","pt","pc","ex","ch","rem","vw","vh","vmin","vmax"],parseUnits:function(e){var t=function(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")},i=this.units.map(t),s=new RegExp("([0-9\\.\\-]+)("+i.join("|")+")?","i"),n=s.exec(e);return null===n?{value:"",unit:""}:{value:n[1],unit:void 0===n[2]?"":n[2]}},setupMeasurementField:function(i,s){var n=this,r=i.parent();s=t.extend({defaultUnit:"px"},s),i.hide(),r.addClass(this.wrapperClass).data("unit",s.defaultUnit);for(var o=e('<input type="text" class="socss-field-input"/>').appendTo(r),a=e('<span class="dashicons dashicons-arrow-down"></span>').appendTo(r),l=e('<ul class="dropdown"></ul>').appendTo(r),c=e('<span class="units"></span>').html(s.defaultUnit).appendTo(r),d=0;d<n.units.length;d++){var p=e("<li></li>").html(n.units[d]).data("unit",n.units[d]);n.units[d]===s.defaultUnit&&p.addClass("active"),l.append(p)}var h=function(){var e=n.parseUnits(o.val());""!==e.unit&&e.unit!==r.data("unit")&&(o.val(e.value),u(e.unit)),""===e.value?i.val(""):i.val(e.value+r.data("unit"))},u=function(e){c.html(e),r.data("unit",e),o.trigger("keydown")};a.click(function(){l.toggle()}),l.find("li").click(function(){l.toggle(),u(e(this).data("unit")),h(),i.trigger("change")}),o.on("keyup keydown",function(t){var i=(e(this),"");"keydown"===t.type&&(t.keyCode>=48&&t.keyCode<=57?i=String.fromCharCode(t.keyCode):189===t.keyCode?i="-":190===t.keyCode&&(i="."));var s=e('<span class="socss-hidden-placeholder"></span>').css({"font-size":"14px"}).html(o.val()+i).appendTo("body"),n=s.width();n=Math.min(n,63),s.remove(),c.css("left",n+12)}),o.on("keyup",function(e){h(),i.trigger("change")}),i.on("measurement_refresh",function(){var t=n.parseUnits(i.val());o.val(t.value);var a=""===t.unit?s.defaultUnit:t.unit;r.data("unit",a),c.html(a);var l=e('<span class="socss-hidden-placeholder"></span>').css({"font-size":"14px"}).html(t.value).appendTo("body"),d=l.width();d=Math.min(d,63),l.remove(),c.css("left",d+12)});var v=e('<div class="socss-diw"></div>').appendTo(r),f=e('<div class="dec-button socss-button"><span class="fa fa-minus"></span></div>').appendTo(v),m=e('<div class="inc-button socss-button"><span class="fa fa-plus"></span></div>').appendTo(v);m.click(function(){var e=n.parseUnits(i.val());if(""===e.value)return!0;var t=Math.ceil(1.05*e.value);o.val(t),h(),i.trigger("change").trigger("measurement_refresh")}),f.click(function(){var e=n.parseUnits(i.val());if(""===e.value)return!0;var t=Math.floor(e.value/1.05);o.val(t),h(),i.trigger("change").trigger("measurement_refresh")})}}),s.view.properties.controllers.number=s.view.propertyController.extend({render:function(){this.$el.append(e(this.template({}))),this.field=this.$("input"),this.setupNumberField(this.field,this.args)},setupNumberField:function(i,s){s=t.extend({change:null,"default":0,increment:1,decrement:-1,max:null,min:null},s);var n=i.parent();n.addClass("socss-field-number");var r=e('<div class="socss-diw"></div>').appendTo(n),o=e('<div class="dec-button socss-button">-</div>').appendTo(r);e('<div class="inc-button socss-button">+</div>').appendTo(r);return r.find("> div").click(function(t){t.preventDefault();var n=s["default"];""!==i.val()&&(n=Number(i.val())),n+=e(this).is(o)?s.decrement:s.increment,n=Math.round(100*n)/100,null!==s.max&&(n=Math.min(s.max,n)),null!==s.min&&(n=Math.max(s.min,n)),i.val(n),i.trigger("change")}),this}}),s.view.properties.controllers.sides=s.view.propertyController.extend({template:t.template(e("#template-sides-field").html().trim()),controllers:[],render:function(){var i=this;this.$el.append(e(this.template({}))),this.field=this.$el.find("input"),i.args.hasAll||(this.$(".select-tab").eq(0).remove(),this.$(".select-tab").css("width","25%")),this.$(".select-tab").each(function(){for(var n=e(this).data("direction"),r=e('<li class="side">').appendTo(i.$(".sides")).hide(),o=0;o<i.args.controllers.length;o++){var a=i.args.controllers[o],l="";l="all"===n?a.args.propertyAll:a.args.property.replace("{dir}",n);var c=t.extend({},a.args,{property:l}),d=new s.view.properties.controllers[a.type]({el:e("<div>").appendTo(r),propertiesView:i.propertiesView,args:c});d.render(),d.initChangeEvents(),i.propertiesView.propertyControllers.push(d)}e(this).on("click",function(){i.$(".select-tab").removeClass("active"),e(this).addClass("active"),i.$(".sides .side").hide(),r.show()})}),this.$(".select-tab").eq(0).click()}})}(jQuery,_,socssOptions),jQuery(function(e){var t=window.socss,i=new t.view.editor({el:e("#so-custom-css-form").get(0)});i.render(),i.setSnippets(socssOptions.snippets),window.socss.mainEditor=i,e("#so-custom-css-getting-started a.hide").click(function(t){t.preventDefault(),e("#so-custom-css-getting-started").slideUp(),e.get(e(this).attr("href"))})});
js/inspector.js CHANGED
@@ -9,6 +9,27 @@
9
  view : { },
10
  fn : {}
11
  };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
 
13
  /**
14
  * This is the main view for the app
@@ -308,15 +329,8 @@
308
  if (typeof parsedCss[k][i].selector === 'undefined') {
309
  continue;
310
  }
311
-
312
- var ruleSpecificity = SPECIFICITY.calculate( parsedCss[k][i].selector );
313
- for (var j = 0; j < ruleSpecificity.length; j++) {
314
- selectors.push({
315
- 'selector': ruleSpecificity[j].selector.trim(),
316
- 'specificity': parseInt(ruleSpecificity[j].specificity.replace(/,/g, ''))
317
- });
318
- }
319
-
320
  }
321
  }
322
 
@@ -324,14 +338,13 @@
324
  $('body *').each(function(){
325
  var $$ = $(this);
326
  var elName = socss.fn.elSelector( $$ );
327
- var ruleSpecificity = SPECIFICITY.calculate( elName );
328
- for (var k = 0; k < ruleSpecificity.length; k++) {
329
- selectors.push({
330
- 'selector': ruleSpecificity[k].selector.trim(),
331
- 'specificity': parseInt(ruleSpecificity[k].specificity.replace(/,/g, ''))
332
- });
333
- }
334
  });
 
 
 
 
335
 
336
  selectors = _.uniq( selectors, false, function( a ){
337
  return a.selector;
@@ -417,7 +430,7 @@
417
  elName += '#' + el.attr('id');
418
  }
419
  if( el.attr('class') !== undefined ) {
420
- elName += '.' + el.attr('class').replace(/\s+/, '.');
421
  }
422
 
423
  if( elName === '' ) {
@@ -441,4 +454,4 @@ jQuery( function($){
441
  inspector.activate();
442
 
443
  window.socssInspector.mainInspector = inspector;
444
- } );
9
  view : { },
10
  fn : {}
11
  };
12
+
13
+ var getSelectorSpecificity = function(selector, useParts) {
14
+ var specificities = [];
15
+ var ruleSpecificity = SPECIFICITY.calculate( selector );
16
+ for (var i = 0; i < ruleSpecificity.length; i++) {
17
+ var specificity = ruleSpecificity[ i ];
18
+ if ( useParts ) {
19
+ for ( var j = 0; j < specificity.parts.length; j++ ) {
20
+ var specificityPart = specificity.parts[ j ];
21
+ // Recursive call to add specificities for parts.
22
+ specificities = specificities.concat(getSelectorSpecificity(specificityPart.selector));
23
+ }
24
+ } else {
25
+ specificities.push({
26
+ 'selector': specificity.selector.trim(),
27
+ 'specificity': parseInt(specificity.specificity.replace(/,/g, ''))
28
+ });
29
+ }
30
+ }
31
+ return specificities;
32
+ };
33
 
34
  /**
35
  * This is the main view for the app
329
  if (typeof parsedCss[k][i].selector === 'undefined') {
330
  continue;
331
  }
332
+
333
+ selectors = selectors.concat( getSelectorSpecificity( parsedCss[ k ][ i ].selector ) );
 
 
 
 
 
 
 
334
  }
335
  }
336
 
338
  $('body *').each(function(){
339
  var $$ = $(this);
340
  var elName = socss.fn.elSelector( $$ );
341
+
342
+ selectors = selectors.concat(getSelectorSpecificity(elName));
 
 
 
 
 
343
  });
344
+
345
+ var $body = $('body');
346
+ var bName = socss.fn.elSelector($body);
347
+ selectors = selectors.concat(getSelectorSpecificity(bName, true));
348
 
349
  selectors = _.uniq( selectors, false, function( a ){
350
  return a.selector;
430
  elName += '#' + el.attr('id');
431
  }
432
  if( el.attr('class') !== undefined ) {
433
+ elName += '.' + el.attr('class').replace(/\s+/g, '.');
434
  }
435
 
436
  if( elName === '' ) {
454
  inspector.activate();
455
 
456
  window.socssInspector.mainInspector = inspector;
457
+ } );
js/inspector.min.js CHANGED
@@ -1 +1 @@
1
- !function(e,t,s){var i={model:{},collection:{},view:{},fn:{}};i.view.inspector=Backbone.View.extend({active:!1,hl:!1,hoverEl:!1,pageSelectors:[],selectorTemplate:t.template('<div class="socss-selector"><%= selector %></div>'),initialize:function(){var t=this;this.hl=new i.view.highlighter,this.hl.initialize(),this.pageSelectors=i.fn.pageSelectors(),e("body").on("mouseover","*",function(s){if(!t.active)return!0;var i=e(this);0===i.closest(".socss-element").length&&(s.stopPropagation(),t.setHoverEl(e(this)))}),e("body *").click(function(s){if(!t.active||t.$el.is(":hover"))return!0;s.preventDefault(),s.stopPropagation();var i=e(this);i.blur(),t.setActiveEl(t.hoverEl)}),this.$(".socss-enable-inspector").click(function(){t.toggleActive()}),this.$el.mouseenter(function(){t.hl.clear()});try{parent.socss.mainEditor.setInspector(this)}catch(s){console.log("No editor to register this inspector with")}},setHoverEl:function(e){this.hoverEl=e,this.hl.highlight(e)},activate:function(){this.active=!0,e("body").addClass("socss-active"),e("body").removeClass("socss-inactive")},deactivate:function(){this.active=!1,e("body").addClass("socss-inactive"),e("body").removeClass("socss-active"),this.hl.clear(),this.$(".socss-hierarchy").empty()},toggleActive:function(){this.active?this.deactivate():this.activate()},setActiveEl:function(s){var r=this,o=this.$(".socss-hierarchy");if(o.empty(),"body"!==s.prop("tagName").toLowerCase()){var c=e(s);do e(this.selectorTemplate({selector:i.fn.elSelector(c)})).prependTo(o).data("el",c),c=c.parent();while("body"!==c.prop("tagName").toLowerCase());e(this.selectorTemplate({selector:"body"})).prependTo(o).data("el",e("body")),this.$(".socss-hierarchy .socss-selector").hover(function(){r.hl.highlight(e(this).data("el"))}).click(function(t){t.preventDefault(),t.stopPropagation(),r.setActiveEl(e(this).data("el"))})}o.scrollLeft(99999);var n=this.pageSelectors.filter(function(e){try{return s.is(e.selector)}catch(t){return!1}}),a=this.$(".socss-selectors-window").empty();t.each(n,function(t){a.append(e(r.selectorTemplate(t)).data(t))}),a.find("> div").mouseenter(function(){r.hl.highlight(e(this).data("selector"))}).click(function(t){t.preventDefault(),t.stopPropagation(),r.trigger("click_selector",e(this).data("selector"))});var l=i.fn.elementAttributes(s);a=this.$(".socss-properties-window").empty(),t.each(l,function(t,s){a.append(e(r.selectorTemplate({selector:"<strong>"+s+"</strong>: "+t})).data("property",s+": "+t))}),a.find("> div").click(function(t){t.preventDefault(),t.stopPropagation(),r.trigger("click_property",e(this).data("property"))});var h=s.closest("a[href]"),p=this.$(".socss-link");h.length?p.show().find("a").html(h.attr("href").replace(/[\?&]*so_css_preview=1/,"")).attr("href",h.attr("href")):p.hide(),this.trigger("set_active_element",s,n)}}),i.view.highlighter=Backbone.View.extend({template:t.template(e("#socss-template-hover").html().trim()),highlighted:[],highlight:function(t){this.clear();var s=this;e(t).each(function(t,i){if(i=e(i),!i.is(":visible"))return!0;var r=e(s.template());r.css({top:i.offset().top,left:i.offset().left,width:i.outerWidth(),height:i.outerHeight()}).appendTo("body");var o,c=i.padding();for(var n in c)parseInt(c[n])>0&&(o=r.find(".socss-guide-padding.socss-guide-"+n).show(),"top"===n||"bottom"===n?o.css("height",c[n]):(o.css("width",c[n]),o.css({width:c[n],top:c.top,bottom:c.bottom})));var a=i.margin();for(var n in a)parseInt(a[n])>0&&(o=r.find(".socss-guide-margin.socss-guide-"+n).show(),"top"===n||"bottom"===n?o.css("height",a[n]):o.css("width",a[n]));s.highlighted.push(r)})},clear:function(){for(;this.highlighted.length;)this.highlighted.pop().remove()}}),i.parsedCss={},i.fn.getParsedCss=function(){if(0===Object.keys(i.parsedCss).length){var t=new cssjs;e(".socss-theme-styles").each(function(){var s=e(this),r=t.parseCSS(s.html());i.parsedCss[s.attr("id")]=r})}return i.parsedCss},i.fn.pageSelectors=function(){var s=[],r=i.fn.getParsedCss();for(var o in r)for(var c=0;c<r[o].length;c++)if("undefined"!=typeof r[o][c].selector)for(var n=SPECIFICITY.calculate(r[o][c].selector),a=0;a<n.length;a++)s.push({selector:n[a].selector.trim(),specificity:parseInt(n[a].specificity.replace(/,/g,""))});return e("body *").each(function(){for(var t=e(this),r=i.fn.elSelector(t),o=SPECIFICITY.calculate(r),c=0;c<o.length;c++)s.push({selector:o[c].selector.trim(),specificity:parseInt(o[c].specificity.replace(/,/g,""))})}),s=t.uniq(s,!1,function(e){return e.selector}),s.sort(function(e,t){return e.specificity>t.specificity?-1:1}),s},i.fn.elementAttributes=function(e){if(!document.styleSheets)return[];var t=[],s=i.fn.getParsedCss();for(var r in s)for(var o=0;o<s[r].length;o++)if("undefined"!=typeof s[r][o].selector&&"undefined"==typeof s[r][o].type&&"@"!==s[r][o].selector[0])for(var c=SPECIFICITY.calculate(s[r][o].selector),n=0;n<c.length;n++)try{if(e.is(c[n].selector))for(var a=0;a<s[r][o].rules.length;a++)t.push({name:s[r][o].rules[a].directive,value:s[r][o].rules[a].value,specificity:parseInt(c[n].specificity.replace(/,/g,""))})}catch(l){}t.sort(function(e,t){return e.specificity>t.specificity?1:-1}).reverse();for(var h={},p=0;p<t.length;p++)"undefined"==typeof h[t[p].name]&&(h[t[p].name]=t[p].value);return h},i.fn.elSelector=function(e){var t="";return void 0!==e.attr("id")&&(t+="#"+e.attr("id")),void 0!==e.attr("class")&&(t+="."+e.attr("class").replace(/\s+/,".")),""===t&&(t=e.prop("tagName").toLowerCase()),t},window.socssInspector=i}(jQuery,_,socssOptions),jQuery(function(e){var t=window.socssInspector,s=new t.view.inspector({el:e("#socss-inspector-interface").get(0)});s.activate(),window.socssInspector.mainInspector=s});
1
+ !function(e,t,s){var i={model:{},collection:{},view:{},fn:{}},r=function(e,t){for(var s=[],i=SPECIFICITY.calculate(e),o=0;o<i.length;o++){var c=i[o];if(t)for(var n=0;n<c.parts.length;n++){var a=c.parts[n];s=s.concat(r(a.selector))}else s.push({selector:c.selector.trim(),specificity:parseInt(c.specificity.replace(/,/g,""))})}return s};i.view.inspector=Backbone.View.extend({active:!1,hl:!1,hoverEl:!1,pageSelectors:[],selectorTemplate:t.template('<div class="socss-selector"><%= selector %></div>'),initialize:function(){var t=this;this.hl=new i.view.highlighter,this.hl.initialize(),this.pageSelectors=i.fn.pageSelectors(),e("body").on("mouseover","*",function(s){if(!t.active)return!0;var i=e(this);0===i.closest(".socss-element").length&&(s.stopPropagation(),t.setHoverEl(e(this)))}),e("body *").click(function(s){if(!t.active||t.$el.is(":hover"))return!0;s.preventDefault(),s.stopPropagation();var i=e(this);i.blur(),t.setActiveEl(t.hoverEl)}),this.$(".socss-enable-inspector").click(function(){t.toggleActive()}),this.$el.mouseenter(function(){t.hl.clear()});try{parent.socss.mainEditor.setInspector(this)}catch(s){console.log("No editor to register this inspector with")}},setHoverEl:function(e){this.hoverEl=e,this.hl.highlight(e)},activate:function(){this.active=!0,e("body").addClass("socss-active"),e("body").removeClass("socss-inactive")},deactivate:function(){this.active=!1,e("body").addClass("socss-inactive"),e("body").removeClass("socss-active"),this.hl.clear(),this.$(".socss-hierarchy").empty()},toggleActive:function(){this.active?this.deactivate():this.activate()},setActiveEl:function(s){var r=this,o=this.$(".socss-hierarchy");if(o.empty(),"body"!==s.prop("tagName").toLowerCase()){var c=e(s);do e(this.selectorTemplate({selector:i.fn.elSelector(c)})).prependTo(o).data("el",c),c=c.parent();while("body"!==c.prop("tagName").toLowerCase());e(this.selectorTemplate({selector:"body"})).prependTo(o).data("el",e("body")),this.$(".socss-hierarchy .socss-selector").hover(function(){r.hl.highlight(e(this).data("el"))}).click(function(t){t.preventDefault(),t.stopPropagation(),r.setActiveEl(e(this).data("el"))})}o.scrollLeft(99999);var n=this.pageSelectors.filter(function(e){try{return s.is(e.selector)}catch(t){return!1}}),a=this.$(".socss-selectors-window").empty();t.each(n,function(t){a.append(e(r.selectorTemplate(t)).data(t))}),a.find("> div").mouseenter(function(){r.hl.highlight(e(this).data("selector"))}).click(function(t){t.preventDefault(),t.stopPropagation(),r.trigger("click_selector",e(this).data("selector"))});var l=i.fn.elementAttributes(s);a=this.$(".socss-properties-window").empty(),t.each(l,function(t,s){a.append(e(r.selectorTemplate({selector:"<strong>"+s+"</strong>: "+t})).data("property",s+": "+t))}),a.find("> div").click(function(t){t.preventDefault(),t.stopPropagation(),r.trigger("click_property",e(this).data("property"))});var h=s.closest("a[href]"),p=this.$(".socss-link");h.length?p.show().find("a").html(h.attr("href").replace(/[\?&]*so_css_preview=1/,"")).attr("href",h.attr("href")):p.hide(),this.trigger("set_active_element",s,n)}}),i.view.highlighter=Backbone.View.extend({template:t.template(e("#socss-template-hover").html().trim()),highlighted:[],highlight:function(t){this.clear();var s=this;e(t).each(function(t,i){if(i=e(i),!i.is(":visible"))return!0;var r=e(s.template());r.css({top:i.offset().top,left:i.offset().left,width:i.outerWidth(),height:i.outerHeight()}).appendTo("body");var o,c=i.padding();for(var n in c)parseInt(c[n])>0&&(o=r.find(".socss-guide-padding.socss-guide-"+n).show(),"top"===n||"bottom"===n?o.css("height",c[n]):(o.css("width",c[n]),o.css({width:c[n],top:c.top,bottom:c.bottom})));var a=i.margin();for(var n in a)parseInt(a[n])>0&&(o=r.find(".socss-guide-margin.socss-guide-"+n).show(),"top"===n||"bottom"===n?o.css("height",a[n]):o.css("width",a[n]));s.highlighted.push(r)})},clear:function(){for(;this.highlighted.length;)this.highlighted.pop().remove()}}),i.parsedCss={},i.fn.getParsedCss=function(){if(0===Object.keys(i.parsedCss).length){var t=new cssjs;e(".socss-theme-styles").each(function(){var s=e(this),r=t.parseCSS(s.html());i.parsedCss[s.attr("id")]=r})}return i.parsedCss},i.fn.pageSelectors=function(){var s=[],o=i.fn.getParsedCss();for(var c in o)for(var n=0;n<o[c].length;n++)"undefined"!=typeof o[c][n].selector&&(s=s.concat(r(o[c][n].selector)));e("body *").each(function(){var t=e(this),o=i.fn.elSelector(t);s=s.concat(r(o))});var a=e("body"),l=i.fn.elSelector(a);return s=s.concat(r(l,!0)),s=t.uniq(s,!1,function(e){return e.selector}),s.sort(function(e,t){return e.specificity>t.specificity?-1:1}),s},i.fn.elementAttributes=function(e){if(!document.styleSheets)return[];var t=[],s=i.fn.getParsedCss();for(var r in s)for(var o=0;o<s[r].length;o++)if("undefined"!=typeof s[r][o].selector&&"undefined"==typeof s[r][o].type&&"@"!==s[r][o].selector[0])for(var c=SPECIFICITY.calculate(s[r][o].selector),n=0;n<c.length;n++)try{if(e.is(c[n].selector))for(var a=0;a<s[r][o].rules.length;a++)t.push({name:s[r][o].rules[a].directive,value:s[r][o].rules[a].value,specificity:parseInt(c[n].specificity.replace(/,/g,""))})}catch(l){}t.sort(function(e,t){return e.specificity>t.specificity?1:-1}).reverse();for(var h={},p=0;p<t.length;p++)"undefined"==typeof h[t[p].name]&&(h[t[p].name]=t[p].value);return h},i.fn.elSelector=function(e){var t="";return void 0!==e.attr("id")&&(t+="#"+e.attr("id")),void 0!==e.attr("class")&&(t+="."+e.attr("class").replace(/\s+/g,".")),""===t&&(t=e.prop("tagName").toLowerCase()),t},window.socssInspector=i}(jQuery,_,socssOptions),jQuery(function(e){var t=window.socssInspector,s=new t.view.inspector({el:e("#socss-inspector-interface").get(0)});s.activate(),window.socssInspector.mainInspector=s});
readme.txt CHANGED
@@ -2,8 +2,8 @@
2
  Tags: css, design, edit, customize
3
  Requires at least: 3.9
4
  Tested up to: 4.4.1
5
- Stable tag: 1.0.5
6
- Build time: 2016-02-24T12:18:55+02:00
7
  License: GPLv2 or later
8
  Contributors: gpriday
9
 
@@ -62,18 +62,23 @@ We offer free support on the [SiteOrigin support forums](https://siteorigin.com/
62
 
63
  == Changelog ==
64
 
65
- = 1.0.6 - 24 February 2016=
 
 
 
 
 
66
  * Disabled autocompletion on single item (automatic autocompletion).
67
  * Fixed conflict with NextGen Gallery.
68
  * Only display relevant linting messages.
69
 
70
- = 1.0.5 - 21 January 2016=
71
  * Updated to latest version of Code Mirror.
72
 
73
- = 1.0.4 - 10 November 2015=
74
  * Fixed CSS parsing when going into visual mode.
75
 
76
- = 1.0.3 - 29 October 2015=
77
  * Changed video image
78
  * Adjust revision times by GMT offset.
79
  * Don't overwrite media queries sub styles, rather just append them.
2
  Tags: css, design, edit, customize
3
  Requires at least: 3.9
4
  Tested up to: 4.4.1
5
+ Stable tag: 1.0.7
6
+ Build time: unbuilt
7
  License: GPLv2 or later
8
  Contributors: gpriday
9
 
62
 
63
  == Changelog ==
64
 
65
+ = 1.0.7 - 4 July 2016 =
66
+ * Ensure user can copy/paste in editor via context menu.
67
+ * Added plugin action links
68
+ * Add classes on `body` element to selectors window.
69
+
70
+ = 1.0.6 - 24 February 2016 =
71
  * Disabled autocompletion on single item (automatic autocompletion).
72
  * Fixed conflict with NextGen Gallery.
73
  * Only display relevant linting messages.
74
 
75
+ = 1.0.5 - 21 January 2016 =
76
  * Updated to latest version of Code Mirror.
77
 
78
+ = 1.0.4 - 10 November 2015 =
79
  * Fixed CSS parsing when going into visual mode.
80
 
81
+ = 1.0.3 - 29 October 2015 =
82
  * Changed video image
83
  * Adjust revision times by GMT offset.
84
  * Don't overwrite media queries sub styles, rather just append them.
so-css.php CHANGED
@@ -2,7 +2,7 @@
2
  /*
3
  Plugin Name: SiteOrigin CSS
4
  Description: An advanced CSS editor from SiteOrigin.
5
- Version: 1.0.6
6
  Author: SiteOrigin
7
  Author URI: https://siteorigin.com
8
  Plugin URI: https://siteorigin.com/css/
@@ -13,7 +13,7 @@ License URI: https://www.gnu.org/licenses/gpl-3.0.txt
13
  // Handle the legacy CSS editor that came with SiteOrigin themes
14
  include plugin_dir_path(__FILE__) . '/inc/legacy.php';
15
 
16
- define('SOCSS_VERSION', '1.0.6');
17
  define('SOCSS_JS_SUFFIX', '.min');
18
 
19
  /**
@@ -37,6 +37,9 @@ class SiteOrigin_CSS {
37
  add_action( 'load-appearance_page_so_custom_css', array($this, 'add_help_tab') );
38
  add_action( 'admin_footer', array($this, 'action_admin_footer') );
39
 
 
 
 
40
  // The request to hide the getting started video
41
  add_action( 'wp_ajax_socss_hide_getting_started', array( $this, 'admin_action_hide_getting_started' ) );
42
 
@@ -226,6 +229,13 @@ class SiteOrigin_CSS {
226
  include plugin_dir_path( __FILE__ ) . 'tpl/js-templates.php';
227
  }
228
 
 
 
 
 
 
 
 
229
  function display_admin_page(){
230
  $theme = basename( get_template_directory() );
231
 
2
  /*
3
  Plugin Name: SiteOrigin CSS
4
  Description: An advanced CSS editor from SiteOrigin.
5
+ Version: 1.0.7
6
  Author: SiteOrigin
7
  Author URI: https://siteorigin.com
8
  Plugin URI: https://siteorigin.com/css/
13
  // Handle the legacy CSS editor that came with SiteOrigin themes
14
  include plugin_dir_path(__FILE__) . '/inc/legacy.php';
15
 
16
+ define('SOCSS_VERSION', '1.0.7');
17
  define('SOCSS_JS_SUFFIX', '.min');
18
 
19
  /**
37
  add_action( 'load-appearance_page_so_custom_css', array($this, 'add_help_tab') );
38
  add_action( 'admin_footer', array($this, 'action_admin_footer') );
39
 
40
+ // Add the action links.
41
+ add_action( 'plugin_action_links_' . plugin_basename(__FILE__), array($this, 'plugin_action_links') );
42
+
43
  // The request to hide the getting started video
44
  add_action( 'wp_ajax_socss_hide_getting_started', array( $this, 'admin_action_hide_getting_started' ) );
45
 
229
  include plugin_dir_path( __FILE__ ) . 'tpl/js-templates.php';
230
  }
231
 
232
+ function plugin_action_links( $links ){
233
+ if( isset($links['edit']) ) unset( $links['edit'] );
234
+ $links['css_editor'] = '<a href="' . admin_url('plugins.php?page=so-widgets-plugins') . '">'.__('CSS Editor', 'so-css').'</a>';
235
+ $links['support'] = '<a href="https://siteorigin.com/thread/" target="_blank">'.__('Support', 'so-css').'</a>';
236
+ return $links;
237
+ }
238
+
239
  function display_admin_page(){
240
  $theme = basename( get_template_directory() );
241