189 lines
5.6 KiB
JavaScript
189 lines
5.6 KiB
JavaScript
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
jQuery( document ).ready( function() {
|
|
|
|
// OpenStreetMap View.
|
|
FusionPageBuilder.fusion_openstreetmap = FusionPageBuilder.ParentElementView.extend( {
|
|
|
|
/**
|
|
* Runs after view DOM is patched.
|
|
*
|
|
* @since 3.10
|
|
* @return {void}
|
|
*/
|
|
onRender: function() {
|
|
this.afterPatch();
|
|
},
|
|
|
|
/**
|
|
* Modify template attributes.
|
|
*
|
|
* @since 3.10
|
|
* @param {Object} atts - The attributes.
|
|
* @return {Object}
|
|
*/
|
|
filterTemplateAtts: function( atts ) {
|
|
var attributes = {};
|
|
|
|
// Validate values.
|
|
this.validateValues( atts.values );
|
|
|
|
this.values = atts.values;
|
|
|
|
attributes.cid = this.model.get( 'cid' );
|
|
attributes.elementAttr = this.elementAttr( atts.values );
|
|
|
|
return attributes;
|
|
},
|
|
|
|
/**
|
|
* Modifies the values.
|
|
*
|
|
* @since 3.10
|
|
* @param {Object} values - The values object.
|
|
* @return {void}
|
|
*/
|
|
validateValues: function( values ) {
|
|
if ( 'undefined' === typeof values.shape_color ) {
|
|
values.shape_color = values.parent.shape_color;
|
|
}
|
|
|
|
if ( 'undefined' === typeof values.shape_size ) {
|
|
values.shape_size = values.parent.shape_size;
|
|
}
|
|
|
|
if ( 'undefined' === typeof values.map_style ) {
|
|
values.map_style = values.parent.map_style;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Create the element attributes.
|
|
*
|
|
* @since 3.10
|
|
* @param {Object} values - The options.
|
|
* @return {Object}
|
|
*/
|
|
elementAttr: function( values ) {
|
|
var atts = {
|
|
'style': this.getInlineStyle( values ),
|
|
'class': 'awb-openstreet-map fusion-child-element'
|
|
};
|
|
|
|
atts[ 'class' ] += ' ' + this.getBaseClass();
|
|
|
|
atts = _.fusionVisibilityAtts( values.hide_on_mobile, atts );
|
|
|
|
if ( values[ 'class' ] ) {
|
|
atts[ 'class' ] += ' ' + values[ 'class' ];
|
|
}
|
|
|
|
if ( values.id ) {
|
|
atts.id = values.id;
|
|
}
|
|
|
|
atts = _.fusionAnimations( values, atts );
|
|
|
|
atts[ 'data-map-style' ] = values.map_style;
|
|
atts[ 'data-map-type' ] = values.map_type;
|
|
atts[ 'data-zoom' ] = values.zoom;
|
|
atts[ 'data-zoomsnap' ] = values.zoom_snap;
|
|
atts[ 'data-zoomcontrol' ] = 'yes' === values.zoom_control ? '1' : '';
|
|
atts[ 'data-scrollwheelzoom' ] = 'yes' === values.scrollwheel ? '1' : '';
|
|
atts[ 'data-dragging' ] = 'yes' === values.dragging ? '1' : '';
|
|
atts[ 'data-touchzoom' ] = 'yes' === values.touchzoom ? '1' : '';
|
|
atts[ 'data-dbclickzoom' ] = 'yes' === values.dbclickzoom ? '1' : '';
|
|
atts[ 'data-fitbounds' ] = 'yes' === values.fitbounds ? '1' : '';
|
|
atts[ 'data-shape-color' ] = window.awbPalette.getRealColor( values.shape_color );
|
|
atts[ 'data-shape-weight' ] = values.shape_size;
|
|
|
|
return atts;
|
|
},
|
|
|
|
/**
|
|
* Get inline style.
|
|
*
|
|
* @since 3.10
|
|
* @param {Object} values
|
|
* @return string
|
|
*/
|
|
getInlineStyle: function( values ) {
|
|
var cssVarsOptions = {};
|
|
|
|
cssVarsOptions = [
|
|
'popup_background_color',
|
|
'popup_close_btn_color',
|
|
'popup_title_line_height',
|
|
'popup_title_text_transform',
|
|
'popup_title_color',
|
|
'popup_title_alignment',
|
|
'popup_content_line_height',
|
|
'popup_content_text_transform',
|
|
'popup_content_color',
|
|
'popup_content_alignment'
|
|
];
|
|
|
|
cssVarsOptions.width = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.height = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.margin_left = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.popup_title_font_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.popup_title_letter_spacing = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.popup_title_margin_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.popup_title_margin_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.popup_content_font_size = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.popup_content_letter_spacing = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.popup_padding_top = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.popup_padding_right = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.popup_padding_bottom = { 'callback': _.fusionGetValueWithUnit };
|
|
cssVarsOptions.popup_padding_left = { 'callback': _.fusionGetValueWithUnit };
|
|
|
|
return this.getCssVarsForOptions( cssVarsOptions ) + this.getFontStylingVars( 'popup_title_font', values ) + this.getFontStylingVars( 'popup_content_font', values );
|
|
},
|
|
|
|
/**
|
|
* Get the class name with an unique id among elements.
|
|
*
|
|
* @since 3.10
|
|
* @return {string}
|
|
*/
|
|
getBaseClass: function() {
|
|
return 'awb-openstreet-map-' + this.model.get( 'cid' );
|
|
},
|
|
|
|
/**
|
|
* Run after the element has been patched.
|
|
*
|
|
* @since 3.10
|
|
* @return {void}
|
|
*/
|
|
afterPatch: function() {
|
|
// Call the parent afterPatch.
|
|
FusionPageBuilder.ParentElementView.prototype.afterPatch.bind( this )();
|
|
|
|
this._refreshJs();
|
|
},
|
|
|
|
/**
|
|
* Trigger update markers point.
|
|
*
|
|
* @since 3.10
|
|
* @return {void}
|
|
*/
|
|
updateMarkers: function() {
|
|
const self = this;
|
|
setTimeout( function() {
|
|
jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( self.$el.find( '.awb-openstreet-map' ) )
|
|
.trigger( 'awb_openstreetmap/updateMarker' )
|
|
.trigger( 'awb_openstreetmap/updateCoords' );
|
|
}, 300 );
|
|
}
|
|
|
|
} );
|
|
} );
|
|
}( jQuery ) );
|