COVE ‐ Wordpress JS

`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)

/**

• Callback for the visualization editor. Catches the config object from COVE,

• then displays some info to the users on the screen.

• @param config

• @returns {boolean} */ 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; }

/**
 * Retrieve config property and return it with HTML wrappers
 *
 * @param pathArr
 * @param title
 * @param defaultVal
 * @param alwaysShow
 * @returns {string|string}
 */
  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) : '';
  }

/**
 * List of friendly translations
 */
  const friendlies = {
    'us': 'U.S.',
    'world': 'World',
    'chart': 'Chart',
    'equalnumber': 'Equal Number',
    'equalinterval': 'Equal Interval',
    'category': 'Categorical',
    'data': 'Data',
    'navigation': 'Navigation',
    'map': 'Map'
  }

/**
 * Get HTML snippet for screen
 *
 * @param title
 * @param val
 * @returns {string}
 */
  const getHtml = (title,val) => {
    if ( friendlies.hasOwnProperty( val ) ) {
      val = friendlies[val];
    }
    return '<div>' + title + ':</div><div>' + val + '</div>';
  }

/**
 * Safely retrieve a prop from the configuration object
 *
 * @param pathArr
 * @returns {*}
 */
  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;

});`