299 lines
10 KiB
JavaScript
299 lines
10 KiB
JavaScript
/* global FusionPageBuilderApp */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// Syntax Highlighter Element View.
|
|
FusionPageBuilder.fusion_syntax_highlighter = FusionPageBuilder.ElementView.extend( {
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
onRender: function() {
|
|
var self = this;
|
|
|
|
setTimeout( function() {
|
|
self.fusionSyntaxHighlighter( self.$el.find( 'textarea' )[ 0 ] );
|
|
}, 500 );
|
|
},
|
|
|
|
/**
|
|
* Runs before view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
beforePatch: function() {
|
|
this.syntaxHighlighter.toTextArea();
|
|
this.$el.find( '.CodeMirror' ).remove();
|
|
},
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 2.0
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() {
|
|
jQuery( this.$el.find( 'textarea' )[ 0 ] ).val( this.output );
|
|
this.fusionSyntaxHighlighter( this.$el.find( 'textarea' )[ 0 ] );
|
|
},
|
|
|
|
/**
|
|
* Init highlighter.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} syntaxHighlighterTextarea - selector object.
|
|
* @return {void}
|
|
*/
|
|
fusionSyntaxHighlighter: function( syntaxHighlighterTextarea ) {
|
|
var syntaxHighlighter,
|
|
syntaxHighlighterSettings;
|
|
|
|
// Set settings to empty for each highlighter.
|
|
syntaxHighlighterSettings = {};
|
|
|
|
// Set custom values as per the settings set by user.
|
|
syntaxHighlighterSettings.readOnly = ( 'undefined' !== typeof jQuery( syntaxHighlighterTextarea ).attr( 'data-readonly' ) ) ? jQuery( syntaxHighlighterTextarea ).attr( 'data-readonly' ) : false;
|
|
syntaxHighlighterSettings.lineNumbers = ( 'undefined' !== typeof jQuery( syntaxHighlighterTextarea ).attr( 'data-linenumbers' ) ) ? jQuery( syntaxHighlighterTextarea ).attr( 'data-linenumbers' ) : false;
|
|
syntaxHighlighterSettings.lineWrapping = ( 'undefined' !== typeof jQuery( syntaxHighlighterTextarea ).attr( 'data-linewrapping' ) ) ? jQuery( syntaxHighlighterTextarea ).attr( 'data-linewrapping' ) : false;
|
|
syntaxHighlighterSettings.theme = ( 'undefined' !== typeof jQuery( syntaxHighlighterTextarea ).attr( 'data-theme' ) ) ? jQuery( syntaxHighlighterTextarea ).attr( 'data-theme' ) : 'default';
|
|
syntaxHighlighterSettings.mode = ( 'undefined' !== typeof jQuery( syntaxHighlighterTextarea ).attr( 'data-mode' ) ) ? jQuery( syntaxHighlighterTextarea ).attr( 'data-mode' ) : 'text/html';
|
|
|
|
// Instantiate new CodeMirror for each highlighter.
|
|
syntaxHighlighter = wp.CodeMirror.fromTextArea( syntaxHighlighterTextarea, syntaxHighlighterSettings );
|
|
jQuery( syntaxHighlighterTextarea ).addClass( 'code-mirror-initialized' );
|
|
jQuery( syntaxHighlighterTextarea ).data( 'code-mirror', syntaxHighlighter );
|
|
|
|
// Make sure the highlighter don't add extra lines.
|
|
syntaxHighlighter.setSize( '100%', 'auto' );
|
|
jQuery( document ).trigger( 'resize' );
|
|
jQuery( syntaxHighlighterTextarea ).closest( '.fusion-syntax-highlighter-container' ).css( 'opacity', '1' );
|
|
|
|
this.syntaxHighlighter = syntaxHighlighter;
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
var attributes = {};
|
|
|
|
// Validate values.
|
|
this.validateValues( atts.values );
|
|
this.extras = atts.extras;
|
|
|
|
// Create attribute objects
|
|
attributes.syntaxAttr = this.buildSyntaxAttr( atts.values );
|
|
attributes.textareaAttr = this.buildTextareaAttr( atts.values );
|
|
attributes.syntaxHighlighterCopyCodeTitleAttr = this.buildSyntaxHighlighterCopyCodeTitleAttr( atts.values );
|
|
attributes.styles = this.buildStyles( atts.values );
|
|
|
|
// Any extras that need passed on.
|
|
attributes.cid = this.model.get( 'cid' );
|
|
attributes.output = atts.values.element_content;
|
|
this.output = atts.values.element_content;
|
|
attributes.wp_enqueue_code_editor = atts.extras.wp_enqueue_code_editor;
|
|
attributes.copy_to_clipboard = atts.values.copy_to_clipboard;
|
|
attributes.copy_to_clipboard_text = atts.values.copy_to_clipboard_text;
|
|
|
|
return attributes;
|
|
},
|
|
|
|
/**
|
|
* Modifies the values.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values object.
|
|
* @return {void}
|
|
*/
|
|
validateValues: function( values ) {
|
|
|
|
// Validate margin values.
|
|
values.margin_top = _.fusionValidateAttrValue( values.margin_top, 'px' );
|
|
values.margin_left = _.fusionValidateAttrValue( values.margin_left, 'px' );
|
|
values.margin_bottom = _.fusionValidateAttrValue( values.margin_bottom, 'px' );
|
|
values.margin_right = _.fusionValidateAttrValue( values.margin_right, 'px' );
|
|
|
|
// Validate border size value.
|
|
values.border_size = _.fusionValidateAttrValue( values.border_size, 'px' );
|
|
|
|
// Validate font size value.
|
|
values.font_size = _.fusionValidateAttrValue( values.font_size, 'px' );
|
|
|
|
// Set background color to TO value if theme is set to TO default.
|
|
if ( '' === values.theme ) {
|
|
values.background_color = this.extras.syntax_highlighter_background_color;
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.element_content && '' !== values.element_content ) {
|
|
if ( values.element_content && FusionPageBuilderApp.base64Encode( FusionPageBuilderApp.base64Decode( values.element_content ) ) === values.element_content ) {
|
|
values.element_content = FusionPageBuilderApp.base64Decode( values.element_content );
|
|
}
|
|
|
|
// Remove br tags added by WP from the code.
|
|
values.element_content = values.element_content.replace( /<br \/>/g, '' );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Builds main attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildSyntaxAttr: function( values ) {
|
|
var theme = '',
|
|
syntaxAttr = _.fusionVisibilityAtts( values.hide_on_mobile, {
|
|
class: 'fusion-syntax-highlighter-container',
|
|
style: ''
|
|
} );
|
|
|
|
syntaxAttr[ 'class' ] += ' fusion-syntax-highlighter-cid' + this.model.get( 'cid' );
|
|
|
|
theme = ( 'default' === values.theme || 'elegant' === values.theme ) ? 'light' : 'dark';
|
|
syntaxAttr[ 'class' ] += ' fusion-syntax-highlighter-theme-' + theme;
|
|
|
|
if ( 'undefined' !== typeof values[ 'class' ] && '' !== values[ 'class' ] ) {
|
|
syntaxAttr[ 'class' ] += ' ' + values[ 'class' ];
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.id && '' !== values.id ) {
|
|
syntaxAttr.id = values.id;
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.margin_top && '' !== values.margin_top ) {
|
|
syntaxAttr.style += 'margin-top:' + values.margin_top + ';';
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.margin_left && '' !== values.margin_left ) {
|
|
syntaxAttr.style += 'margin-left:' + values.margin_left + ';';
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.margin_bottom && '' !== values.margin_bottom ) {
|
|
syntaxAttr.style += 'margin-bottom:' + values.margin_bottom + ';';
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.margin_right && '' !== values.margin_right ) {
|
|
syntaxAttr.style += 'margin-right:' + values.margin_right + ';';
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.font_size && '' !== values.font_size ) {
|
|
syntaxAttr.style += 'font-size:' + values.font_size + ';';
|
|
}
|
|
|
|
if ( 'undefined' !== typeof values.border_size && '' !== values.border_size ) {
|
|
syntaxAttr.style += 'border-width:' + values.border_size + ';';
|
|
|
|
if ( '' !== values.border_style ) {
|
|
syntaxAttr.style += 'border-style:' + values.border_style + ';';
|
|
}
|
|
|
|
if ( '' !== values.border_color ) {
|
|
syntaxAttr.style += 'border-color:' + values.border_color + ';';
|
|
}
|
|
}
|
|
|
|
// Compatibility for WP < 4.9.
|
|
if ( ! this.extras.wp_enqueue_code_editor && '' !== values.background_color ) {
|
|
syntaxAttr.style += 'background-color:' + values.background_color + ';';
|
|
syntaxAttr.style += 'padding: 0 1em';
|
|
}
|
|
|
|
return syntaxAttr;
|
|
},
|
|
|
|
/**
|
|
* Builds text area attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildTextareaAttr: function( values ) {
|
|
|
|
// Text area attr.
|
|
var textareaAttr = {
|
|
class: 'fusion-syntax-highlighter-textarea',
|
|
id: 'fusion_syntax_highlighter_' + this.model.get( 'cid' ),
|
|
style: ''
|
|
},
|
|
languageType,
|
|
settings = {
|
|
readOnly: 'nocursor',
|
|
lineNumbers: 'yes' === values.line_numbers ? true : '',
|
|
lineWrapping: 'break' === values.line_wrapping ? true : '',
|
|
theme: values.theme
|
|
};
|
|
|
|
if ( '' !== values.language ) {
|
|
languageType = 'json' === values.language || 'xml' === values.language ? 'application' : 'text';
|
|
settings.mode = languageType + '/' + values.language;
|
|
}
|
|
|
|
_.each( settings, function( value, setting ) {
|
|
textareaAttr[ 'data-' + setting ] = value;
|
|
} );
|
|
|
|
return textareaAttr;
|
|
},
|
|
|
|
/**
|
|
* Builds copy code area attributes.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {Object}
|
|
*/
|
|
buildSyntaxHighlighterCopyCodeTitleAttr: function( values ) {
|
|
var syntaxHighlighterCopyCodeTitle = {
|
|
class: 'syntax-highlighter-copy-code-title',
|
|
style: ''
|
|
};
|
|
syntaxHighlighterCopyCodeTitle[ 'data-id' ] = 'fusion_syntax_highlighter_' + this.model.get( 'cid' );
|
|
|
|
if ( values.font_size ) {
|
|
syntaxHighlighterCopyCodeTitle.style += 'font-size:' + values.font_size + ';';
|
|
}
|
|
|
|
return syntaxHighlighterCopyCodeTitle;
|
|
},
|
|
|
|
/**
|
|
* Builds styles.
|
|
*
|
|
* @since 2.0
|
|
* @param {Object} values - The values.
|
|
* @return {string}
|
|
*/
|
|
buildStyles: function( values ) {
|
|
var style = '<style type="text/css" scopped="scopped">',
|
|
cid = this.model.get( 'cid' );
|
|
|
|
if ( values.background_color && '' !== values.background_color ) {
|
|
style += '.fusion-syntax-highlighter-cid' + cid + ' > .CodeMirror, .fusion-syntax-highlighter-cid' + cid + ' > .CodeMirror .CodeMirror-gutters { background-color:' + values.background_color + ';}';
|
|
}
|
|
|
|
if ( 'no' !== values.line_numbers ) {
|
|
style += '.fusion-syntax-highlighter-cid' + cid + ' > .CodeMirror .CodeMirror-gutters { background-color: ' + values.line_number_background_color + '; }';
|
|
style += '.fusion-syntax-highlighter-cid' + cid + ' > .CodeMirror .CodeMirror-linenumber { color: ' + values.line_number_text_color + '; }';
|
|
}
|
|
|
|
style += '</style>';
|
|
|
|
return style;
|
|
}
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|