-
Notifications
You must be signed in to change notification settings - Fork 19
COVE ‐ Wordpress JS
David Cummo edited this page Aug 28, 2024
·
3 revisions
jQuery( document ).ready( function( $ ) {
var $temporaryInput = $(".cdc-viz-editor-hidden-temp-input");
var $persistedInput = $(".cdc-viz-editor-hidden-input");
var $vizContainer = $(".wcms-viz-container");
// Store the data in the temporary input every time the viz sends an event from it's editor.
window.addEventListener('updateVizConfig', function(e) {
$temporaryInput.val(e.detail);
updateDetailsOnScreen( e.detail );
}, false)
function updateDetailsOnScreen( config ) {
//Get config object
var configObject;
if ( undefined !== config ) {
configObject = JSON.parse( config );
} else if ( undefined !== vizVariables.config && vizVariables.config.length > 0 ) {
configObject = JSON.parse( vizVariables.config );
} else { //New viz
return false;
}
const getPropHtml = (pathArr, title, defaultVal = 'Not Set', alwaysShow = true) => {
let val = getConfigProp( pathArr )
if ( ( undefined === val ) && alwaysShow ) {
val = defaultVal;
}
return undefined !== val ? getHtml( title, val) : '';
}
const friendlies = {
'us': 'U.S.',
'world': 'World',
'chart': 'Chart',
'equalnumber': 'Equal Number',
'equalinterval': 'Equal Interval',
'category': 'Categorical',
'data': 'Data',
'navigation': 'Navigation',
'map': 'Map'
}
const getHtml = (title,val) => {
if ( friendlies.hasOwnProperty( val ) ) {
val = friendlies[val];
}
return '<div>' + title + ':</div><div>' + val + '</div>';
}
const getConfigProp = (pathArr) => {
return pathArr.reduce((configObject, key) =>
(configObject && configObject[key] !== 'undefined') ? configObject[key] : undefined, configObject);
}
let summaryInfo = '';
const vizType = configObject.type;
if ( 'chart' === vizType ) { //Handle Charts
summaryInfo += getPropHtml( ['title'], 'Title', 'Not Set' );
summaryInfo += getPropHtml( ['type'], 'Type', 'Not Set' );
summaryInfo += getPropHtml( ['visualizationType'], 'Sub Type', 'Not Set' );
if ( configObject.hasOwnProperty('series') && Array.isArray( configObject.series ) && configObject.series.length ) {
let dataSeries = configObject.series.map(a => a.dataKey);
summaryInfo += getHtml( 'Data Series', dataSeries.join(', ') );
}
summaryInfo += getHtml('Number of Rows', configObject.data.length);
} else if ( 'map' === vizType ) { //Handle Maps
summaryInfo += getPropHtml( ['general', 'title'], 'Title', 'Not Set' );
summaryInfo += getPropHtml( ['type'], 'Type', 'Not Set' );
summaryInfo += getPropHtml( ['general', 'type'], 'Sub Type', 'Not Set' );
summaryInfo += getPropHtml( ['general', 'geoType'], 'Geo Type', 'Not Set' );
var displayAsHex = getConfigProp( ['general', 'displayAsHex'] );
if ( displayAsHex ) {
summaryInfo += getHtml('Is Hex Tile', 'Yes');
}
summaryInfo += getHtml('Number of Rows', configObject.data.length);
summaryInfo += getPropHtml( ['legend', 'type'], 'Classification Type', 'Not Set' );
summaryInfo += getPropHtml( ['legend', 'numberOfItems'], 'Number of Classes (Legend Items)', 'Not Set', true );
}
$('.viz-details').html( summaryInfo );
}
function saveVizData() {
// Apply the temporary value
window.SAVEVIZ = true
$persistedInput.val( $temporaryInput.val() );
$vizContainer.attr('data-config', $persistedInput.val());
$('body').css('overflow', 'auto')
}
function cancelVizEdit() {
// This is so this function can work every time the modal closes - ESC button or clicking outside the modal.
if(window.SAVEVIZ) {
return;
}
// Blank out temporary value
$temporaryInput.val('');
$('body').css('overflow', 'auto');
var dataVal = $persistedInput.val()
if(dataVal) {
// Revert to persisted configuration behind the scenes
$vizContainer.attr('data-config', dataVal);
window.CDC_Load_Viz();
}
}
var vizModal = CDC_Modal.create({
title: 'Visualization Editor',
// data-viz uses the older modal center method 'modal-transform'
classNames: ['cdc-cove-editor modal-transform'],
closed: true,
fullbody: true,
fullscreen: true,
onOpen: function() {
$('body').css('overflow', 'hidden'); // Disable scrolling
window.SAVEVIZ = false;
},
onClose: cancelVizEdit,
message: $vizContainer,
buttons: [
{
text: 'OK',
click: saveVizData,
className: 'button-primary'
},
{
text: 'Cancel',
className: 'button-secondary'
}
]
})
$( '.open-viz-editor-anchor').on( 'click', function( e ) {
e.preventDefault();
vizModal.open();
} );
updateDetailsOnScreen();
return false;
});