( function ( $ ) {
var Jetpack_CSS = {
modes: {
default: 'text/css',
less: 'text/x-less',
sass: 'text/x-scss',
},
init: function () {
this.$textarea = $( '#safecss' );
this.editor = window.CodeMirror.fromTextArea( this.$textarea.get( 0 ), {
mode: this.getMode(),
lineNumbers: true,
tabSize: 2,
indentWithTabs: true,
lineWrapping: true,
} );
this.setEditorHeight();
},
addListeners: function () {
// nice sizing
$( window ).on( 'resize', _.bind( _.debounce( this.setEditorHeight, 100 ), this ) );
// keep textarea synced up
this.editor.on(
'change',
_.bind( function ( editor ) {
this.$textarea.val( editor.getValue() );
}, this )
);
// change mode
$( '#preprocessor_choices' ).change(
_.bind( function () {
this.editor.setOption( 'mode', this.getMode() );
}, this )
);
},
setEditorHeight: function () {
var height = $( 'html' ).height() - $( this.editor.getWrapperElement() ).offset().top;
this.editor.setSize( null, height );
},
getMode: function () {
var mode = $( '#preprocessor_choices' ).val();
if ( '' === mode || ! this.modes[ mode ] ) {
mode = 'default';
}
return this.modes[ mode ];
},
};
$( document ).ready( _.bind( Jetpack_CSS.init, Jetpack_CSS ) );
} )( jQuery );