Commit realizado el 12:13:52 08-04-2024

wp-content/themes/Divi/epanel/theme-options-library/app/boot.js

@@ -0,0 +1,76 @@
+// External Dependencies
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import $ from 'jquery';
+import App from 'cerebral';
+import Devtools from 'cerebral/devtools';
+import { Container } from '@cerebral/react';
+
+
+// Internal Dependencies
+import store from './store/index';
+import ThemeOptionsApp from './components/App';
+
+const initialState = {
+  content:              '',
+  context:              'theme-options',
+  items:                [],
+  showLibrary:          false,
+  showPortability:      false,
+  showSave:             false,
+};
+
+const unMountCommonLibraryApp = () => {
+  const container = document.getElementById('et-theme-options-container');
+  if (container) {
+    unmountComponentAtNode(container);
+    container.remove();
+  }
+}
+
+// Note: Hyphen is used to stay consistent w/ the Cloud context.
+$(window).on(`et_theme-options_container_ready`, (event, preferences) => {
+  let devtools = null;
+
+  if (process.env.NODE_ENV === 'development') {
+    devtools = Devtools({
+      host:                 '127.0.0.1:22722',
+      reconnect:            false,
+      bigComponentsWarning: 15,
+    });
+  }
+
+  const modalType = preferences?.modalType || '';
+
+  const state = {
+    ...initialState,
+    modalType
+  };
+
+  state.sidebarLabel = preferences?.sidebarLabel || '';
+  state.builtFor     = preferences?.builtFor ?? 'Divi';
+
+  const app = App(store(state), {
+    devtools,
+    returnSequencePromise: true,
+  });
+
+  const {
+    containerId = 'et-theme-options-container',
+    containerClass = 'et-theme-options-container'
+  } = preferences;
+
+  $(document.body).first().append(`<div id=${containerId} class=${containerClass}></div>`);
+
+  render(
+    <Container app={app}>
+      <ThemeOptionsApp />
+    </Container>,
+    document.getElementById(containerId)
+  );
+});
+
+
+$(window).on('et_theme-options_container_close', () => {
+  unMountCommonLibraryApp();
+});

wp-content/themes/Divi/epanel/theme-options-library/app/lib/config.js

@@ -0,0 +1 @@
+export default window.et_theme_options_data;

wp-content/themes/Divi/epanel/theme-options-library/app/lib/constants.js

@@ -0,0 +1,4 @@
+// Portability states.
+export const PORTABILITY_STATE_DEFAULT = 'default';
+export const PORTABILITY_STATE_EXPORT_THEME_OPTIONS = 'export';
+export const PORTABILITY_STATE_IMPORT_THEME_OPTIONS = 'import';

wp-content/themes/Divi/epanel/theme-options-library/app/lib/i18n.js

@@ -0,0 +1,23 @@
+// External dependencies.
+import { get } from 'lodash';
+
+// Internal dependencies.
+import config from './config';
+
+
+const i18n = (context, key, ...args) => {
+  const value = get(context, key, '');
+
+  if ('production' !== process.env.NODE_ENV && '' === value) {
+    console.error('Failed to find i18n string:', key);
+  }
+
+  if (args.length > 0) {
+    const sprintf = get(window, 'wp.i18n.sprintf');
+    return sprintf(value, ...args);
+  }
+
+  return value;
+};
+
+export default (path, key, ...args) => i18n(config.i18n, [path, key], ...args);

wp-content/themes/Divi/epanel/theme-options-library/app/lib/request.js

@@ -0,0 +1,26 @@
+// External dependencies.
+import $ from 'jquery';
+
+// Internal dependencies.
+import config from './config';
+
+
+export const request = (method, data, options = {}) => {
+  const deferred = $.ajax({
+    type: method,
+    url: config.api,
+    dataType: 'json',
+    data,
+    ...options,
+  });
+
+  return Promise.resolve(deferred.promise())
+    .then(response => {
+      if (false === response.success) {
+        return Promise.reject(response.data || {});
+      }
+      return Promise.resolve(response.data);
+    });
+};
+
+export const post = (data, options = {}) => request('POST', data, options);

wp-content/themes/Divi/epanel/theme-options-library/app/lib/theme-options-library.js

@@ -0,0 +1,12 @@
+// Set global variable to detect new library item creation.
+window.themeOptionsLibraryItemsLoaded = {};
+
+export const setThemeOptionsLibraryItemsLoaded = (context, flag) => {
+  window.themeOptionsLibraryItemsLoaded = {
+    [context] : flag,
+  };
+};
+
+export const setThemeOptionsLibraryToken = (token) => {
+  window.globalCloudToken = token;
+};

wp-content/themes/Divi/epanel/theme-options-library/app/lib/theme-options-utils.js

@@ -0,0 +1,81 @@
+import {
+  noop,
+  trim,
+  set,
+} from 'lodash';
+
+import config from '@common-ui/lib/config';
+import { post } from '@common-ui/lib/request';
+import { saveToCloudPure } from '@cloud/app/lib/api';
+
+/* eslint-disable import/prefer-default-export */
+const saveThemeOptionsToLocal = (item, content) => {
+  const {
+    item_name,
+    selected_cats,
+    new_category_name,
+    new_tag_name,
+    builtFor,
+  } = item;
+
+  const {
+    nonces,
+    post_types,
+  } = config;
+
+  return post({
+    action: 'et_library_save_item',
+    et_library_save_item_nonce: nonces.et_library_save_item,
+    post_type: post_types.et_theme_options,
+    item_name,
+    selected_cats,
+    new_category_name,
+    new_tag_name,
+    content,
+    builtFor,
+  });
+};
+
+// eslint-disable-next-line arrow-parens
+const sanitizeCommaSeparatedTaxNames = (taxName) => {
+  const categoryName = 'string' === typeof taxName && taxName ? taxName : '';
+
+  return categoryName.split(',').map(newCategory => trim(newCategory));
+};
+
+const saveThemeOptionsToCloud = async (obj, content) => {
+  const {
+    builtFor,
+    item_name,
+    new_category_name,
+    new_tag_name,
+    providedBaseUrl,
+    selected_cats,
+    selected_tags,
+  } = obj;
+
+  const newCategories = sanitizeCommaSeparatedTaxNames(new_category_name);
+  const newTags       = sanitizeCommaSeparatedTaxNames(new_tag_name);
+  const termsData     = {
+    tags: [...selected_tags, ...newTags],
+    categories: [...selected_cats, ...newCategories],
+  };
+
+  const newCloudItem = {
+    title: item_name,
+    content,
+    status: 'publish',
+  };
+
+  if (builtFor) {
+    set(newCloudItem, 'meta._built_for', builtFor);
+  }
+
+  return saveToCloudPure('theme-options', newCloudItem, termsData, noop, 0, providedBaseUrl);
+};
+/* eslint-enable */
+
+export {
+  saveThemeOptionsToCloud,
+  saveThemeOptionsToLocal,
+};

wp-content/themes/Divi/epanel/theme-options-library/app/store/index.js

@@ -0,0 +1,5 @@
+// Internal dependencies.
+import themeOptionsLibrary from './theme-options-library/module';
+
+
+export default themeOptionsLibrary;

wp-content/themes/Divi/epanel/theme-options-library/app/store/theme-options-library/actions.js

@@ -0,0 +1,12 @@
+async function importThemeOptions({ themeOptionsLibApi, props: { item } }) {
+  const exportedContent   = item;
+  exportedContent.context = 'epanel';
+
+  const file = new File([JSON.stringify(exportedContent)], 'theme_option.json', { type: 'application/json' });
+  await themeOptionsLibApi.importContent(file);
+  window.location = window.location.href.replace(/reset\=true\&|\&reset\=true/, '');
+};
+
+export default {
+  importThemeOptions,
+};

wp-content/themes/Divi/epanel/theme-options-library/app/store/theme-options-library/module.js

@@ -0,0 +1,24 @@
+import { state } from 'cerebral';
+import * as sequences from './sequences';
+import themeOptionsLibApi from './providers';
+import { PORTABILITY_STATE_DEFAULT } from '../../lib/constants';
+
+
+export default initialState => (
+  {
+    state: {
+      ...initialState,
+      showSaveModal: get => 'save' === get(state`modalType`),
+      showLibraryModal: get => 'add' === get(state`modalType`),
+      itemsLoadedAndCached: false,
+      portability: {
+        state: PORTABILITY_STATE_DEFAULT,
+        export: {},
+      },
+    },
+    providers: {
+      themeOptionsLibApi,
+    },
+    sequences,
+  }
+);

wp-content/themes/Divi/epanel/theme-options-library/app/store/theme-options-library/providers.js

@@ -0,0 +1,225 @@
+// Internal dependencies.
+import { noop } from 'lodash';
+
+// Internal dependencies.
+import { post } from '../../lib/request';
+import config from '../../lib/config';
+import { saveToCloudPure } from '@cloud/app/lib/api';
+
+export default {
+  /**
+   * Gets the Theme Options library items.
+   *
+   * @param {string} context Context (a.k.a Item type).
+   *
+   * @returns {Array} Resolved value from promise. Array of objects.
+   */
+  getItems(context) {
+    /* eslint-disable key-spacing */
+    return post({
+      action: 'et_theme_options_library_get_items',
+      context,
+      nonce: config.nonces.et_theme_options_library_get_items,
+    });
+    /* eslint-enable key-spacing */
+  },
+
+  getItemsContent(item) {
+    return post({
+      action: 'et_theme_options_library_get_item_content',
+      et_theme_option_id: item,
+      nonce: config.nonces.et_theme_options_library_get_item_content,
+    });
+  },
+
+  importContent(file) {
+    const formData = new FormData();
+    formData.append('action', 'et_core_portability_import');
+    formData.append('file', file, 'theme-options.json');
+    formData.append('context', 'epanel');
+    formData.append('nonce', config.nonces.et_core_portability_import);
+    return post(formData, {
+      contentType: false,
+      processData: false,
+    });
+  },
+
+  exportItem(id, cloudContent) {
+    return post({
+      action: 'et_theme_options_library_export_item',
+      nonce: config.nonces.et_theme_options_library_export_item,
+      id,
+      cloudContent,
+    });
+  },
+
+  downloadExportFile(id, fileName) {
+    const args = {
+      action: 'et_theme_options_library_export_item_download',
+      nonce: config.nonces.et_theme_options_library_export_item,
+      fileName,
+      id,
+    };
+
+    return `${config.api}?${jQuery.param(args)}`;
+  },
+
+  /**
+   * Update Local Tags/Categories and return updated list.
+   *
+   * @param {object} payload Payload.
+   * @returns {Array}        Response.
+   */
+  updateFilters(payload) {
+    return post({
+      action: 'et_theme_options_library_update_terms',
+      nonce: config.nonces.et_theme_options_library_update_terms,
+      payload,
+    });
+  },
+
+  /**
+   * Update the theme options library item.
+   *
+   * @param {object} payload Updated item details.
+   * @returns {Array}        Resolved value from promise. Array of objects.
+   */
+  updateItem(payload) {
+    return post({
+      action : 'et_theme_options_library_update_item',
+      nonce  : config.nonces.et_theme_options_library_update_item,
+      payload,
+    });
+  },
+
+  /*
+   * Gets the Theme Options library item content.
+   *
+   * @returns {Array} Resolved value from promise. Array of objects.
+   */
+  getItemContent(id) {
+    return post({
+      action: 'et_theme_options_library_get_item_content',
+      nonce: config.nonces.et_theme_options_library_get_item_content,
+      et_theme_option_id: id,
+    });
+  },
+
+  /**
+   * Retrieve Cloud Token.
+   *
+   * @returns {Array} Response with cloud token.
+   */
+  getCloudToken() {
+    return post({
+      action: 'et_theme_options_library_get_token',
+      nonce : config.nonces.et_theme_options_library_get_token,
+    });
+  },
+
+  /**
+   * Remove local item.
+   *
+   * @param {int} id 
+   * @returns {Array} Response with cloud token.
+   */
+  export() {
+    return post({
+      action: 'et_core_portability_export',
+      nonce: config.nonces.et_core_portability_export,
+      context: 'epanel_temp',
+      content: false,
+      selection: false,
+      timestamp: 0,
+      page: 1,
+    });
+  },
+
+  saveTempOptions() {
+    let opsForm = jQuery('#main_options_form').formSerialize();
+    const nonce = `&_ajax_nonce=${config.nonces.et_core_save_theme_options}`;
+    opsForm    += `${nonce}&action=save_epanel_temp`;
+    return post(opsForm);
+  },
+
+  download(timestamp) {
+    let downloadURL = config.epanel_save_url;
+    const query     = {
+      timestamp,
+      name: '',
+    };
+
+    Object.entries(query).forEach(([key, value]) => {
+      if (value) {
+        downloadURL = `${downloadURL}&${key}=${value}`;
+      }
+    });
+
+    return fetch(downloadURL);
+  },
+
+  saveThemeOptionsToLocal(item, content) {
+    const {
+      item_name,
+      selected_cats,
+      selected_tags,
+      new_category_name,
+      new_tag_name,
+    } = item;
+
+    return post({
+      action: 'et_library_save_item',
+      et_library_save_item_nonce: config.nonces.et_library_save_item,
+      post_type: config.post_types.et_theme_options,
+      item_name,
+      selected_cats,
+      selected_tags,
+      new_category_name,
+      new_tag_name,
+      content,
+    });
+  },
+
+  saveThemeOptionsToCloud(item, content) {
+    const {
+      new_category_name,
+      new_tag_name,
+      selected_tags,
+      selected_cats,
+      item_name,
+      providedBaseUrl,
+    } = item;
+
+    const newCategories = new_category_name.split(',').map(newCategory => newCategory.trim());
+    const newTags       = new_tag_name.split(',').map(newTag => newTag.trim());
+    const termsData     = {
+      tags: [...selected_tags, ...newTags],
+      categories: [...selected_cats, ...newCategories],
+    };
+
+    const newCloudItem = {
+      title: item_name,
+      content,
+      status: 'publish',
+    };
+
+    return saveToCloudPure('theme-options', newCloudItem, termsData, noop, 0, providedBaseUrl);
+  },
+
+  deleteTempOptions() {
+    return post({
+      action: 'et_theme_options_delete_temp_options',
+      et_theme_options_delete_temp_options_nonce: config.nonces.et_theme_options_delete_temp_options,
+    });
+  },
+
+  removeLocalItem(id) {
+    /* eslint-disable key-spacing */
+    return post({
+      action                 : 'et_theme_options_toggle_cloud_status',
+      nonce                  : config.nonces.et_theme_options_library_toggle_item_location,
+      et_theme_option_id     : id,
+    });
+    /* eslint-enable */
+  },
+};

wp-content/themes/Divi/epanel/theme-options-library/app/store/theme-options-library/sequences.js

@@ -0,0 +1,246 @@
+// External dependencies.
+import { props, sequence, state } from 'cerebral';
+import { set, when } from 'cerebral/factories';
+import { get as lodashGet } from 'lodash';
+
+// Internal dependencies.
+import { setThemeOptionsLibraryItemsLoaded, setThemeOptionsLibraryToken } from '../../lib/theme-options-library';
+import actions from './actions';
+import {
+  PORTABILITY_STATE_EXPORT_THEME_OPTIONS,
+  PORTABILITY_STATE_IMPORT_THEME_OPTIONS,
+} from '../../lib/constants';
+
+
+const closePortability = sequence('Close Theme Options portability modal', [
+  set(state`showPortability`, false),
+  set(state`importError`, false),
+]);
+
+const closeThemeOptionApp = sequence('Close theme options library app', [
+  set(state`modalType`, null),
+]);
+
+const loadItems = sequence('Load theme options library items', [
+  /* eslint-disable arrow-body-style, arrow-parens */
+  ({ get, themeOptionsLibApi, path }) => {
+    const context = get(state`context`);
+
+    return themeOptionsLibApi
+      .getItems(context)
+      .then(response => path.success({
+        items: response,
+      }))
+      .catch(() => path.error());
+  },
+  {
+    success: [
+      set(state`items`, props`items`),
+      set(state`itemsLoadedAndCached`, true),
+
+      ({ get }) => {
+        setThemeOptionsLibraryItemsLoaded(get(state`context`), true);
+      },
+    ],
+    error: [],
+  },
+  /* eslint-enable */
+]);
+
+const updateLocalFilters = sequence('Update Local Filters', [
+  ({ themeOptionsLibApi, path, props: { payload } }) => themeOptionsLibApi
+    .updateFilters(payload)
+    .then((response => path.success(response)))
+    .catch(() => path.error()),
+  {
+    success: [Promise.resolve(props`response`)],
+    error: [],
+  },
+]);
+
+const getExportedItem = sequence('Get the exported theme option content', [
+  ({ themeOptionsLibApi, path, props: { id } }) => themeOptionsLibApi
+    .getItemContent(id)
+    .then(response => path.success(response))
+    .catch(() => path.error()),
+  {
+    success: [Promise.resolve(props`response`)],
+    error: [],
+  },
+]);
+
+const updateItem = sequence('Update theme options library item', [
+  ({ themeOptionsLibApi, get, path }) => {
+    const payload = get(props`payload`);
+    return themeOptionsLibApi.updateItem(payload)
+      .then(response => path.success({
+        updatedItem: {
+          success: true,
+          data: response,
+        },
+      }))
+      .catch(() => path.error());
+  },
+  {
+    success: [Promise.resolve(props`updatedItem`)],
+    error: [],
+  },
+]);
+
+const setCloudToken = sequence('Set cloudToken', [
+  ({ get }) => {
+    setThemeOptionsLibraryToken(get(props`cloudToken`));
+  },
+]);
+
+const cacheCloudToken = sequence('Retrieve saved Cloud Access token and save to state', [
+  ({ themeOptionsLibApi, path }) => {
+
+    return themeOptionsLibApi.getCloudToken()
+      .then(cloudTokenData => {
+        return path.success({cloudToken: cloudTokenData.accessToken});
+      })
+      .catch(() => path.error());
+  },
+  {
+    success: [
+      setCloudToken,
+    ],
+    error: [],
+  },
+]);
+
+const setLibraryContext = sequence('Set Theme Options library context', [
+  set(state`context`, props`context`),
+]);
+
+const useThemeOptions = sequence('Insert theme options into a field', [
+  when(props`item`, item => isNaN(parseInt(item))),
+  {
+    true: [
+      ({ props: contextProps }) => ({ item: JSON.parse(contextProps.item) }),
+      actions.importThemeOptions,
+    ],
+    false: [
+      async ({ props: { item }, themeOptionsLibApi }) => {
+        const data         = await themeOptionsLibApi.getItemsContent(item);
+        const { exported } = data;
+        return { item: exported };
+      },
+      actions.importThemeOptions,
+    ],
+  },
+]);
+
+const openPortablity = sequence('Open theme options library modal', [
+  ({ store, props: { data } }) => {
+    const portabilityState = lodashGet(data, 'action');
+
+    if (PORTABILITY_STATE_EXPORT_THEME_OPTIONS === portabilityState) {
+      const itemLocation = lodashGet(data, 'item.item_location');
+      const exportItemId = lodashGet(data, 'item.id');
+      store.set(state`portability.export.id`, exportItemId);
+
+      if ('cloud' === itemLocation) {
+        const exportItemContent = lodashGet(data, 'content');
+        store.set(state`portability.export.content`, exportItemContent);
+        store.set(state`portability.export.item_location`, itemLocation);
+      }
+    }
+
+    if ([PORTABILITY_STATE_IMPORT_THEME_OPTIONS, PORTABILITY_STATE_EXPORT_THEME_OPTIONS].includes(portabilityState)) {
+      store.set(state`portability.state`, portabilityState);
+    } else {
+      store.set(state`portability.state`, PORTABILITY_STATE_IMPORT_THEME_OPTIONS);
+    }
+  },
+
+  set(state`showPortability`, true),
+]);
+
+const setShowLibrary = sequence('Set theme options library', [
+  set(state`showLibrary`, props`toggle`),
+]);
+
+const exportThemeOptions = sequence('Export theme option', [
+  ({ themeOptionsLibApi, path, props: { id, cloudContent } }) => themeOptionsLibApi.exportItem(id, cloudContent)
+    .then(() => path.success())
+    .catch(() => path.error()),
+  {
+    success: [
+      ({ themeOptionsLibApi, props: { id, fileName } }) => {
+        const downloadURI = themeOptionsLibApi.downloadExportFile(id, fileName);
+
+        window.location.assign(downloadURI);
+
+        window.ETCloudApp.emitSignal({
+          signal: 'finishDownload',
+          data: {},
+        });
+      },
+      closePortability,
+    ],
+    error: [],
+  },
+]);
+
+const saveThemeOptions = sequence('Save theme options', [
+  async ({ themeOptionsLibApi }) => {
+    await themeOptionsLibApi.saveTempOptions();
+    const exportRestData = await themeOptionsLibApi.export();
+    return { timestamp: exportRestData.timestamp };
+  },
+  async ({ themeOptionsLibApi, props: contextProps }) => {
+    const response        = await themeOptionsLibApi.download(contextProps.timestamp);
+    const exportedContent = await response.json();
+    return { content: JSON.stringify(exportedContent) };
+  },
+  when(props`item.cloud`, cloud => 'on' === cloud),
+  {
+    true: [
+      ({ themeOptionsLibApi, props: contextProps }) => {
+        const { item, content } = contextProps;
+        return themeOptionsLibApi.saveThemeOptionsToCloud(item, content);
+      },
+    ],
+    false: [
+      ({ themeOptionsLibApi, props: contextProps }) => {
+        const { item, content } = contextProps;
+        return themeOptionsLibApi.saveThemeOptionsToLocal(item, content);
+      },
+    ],
+  },
+  ({ themeOptionsLibApi }) => themeOptionsLibApi.deleteTempOptions(),
+]);
+
+const toggleLibraryItemLocation = sequence('Remove local item from WPDB', [
+  /* eslint-disable-next-line arrow-body-style */
+  ({ themeOptionsLibApi, path, props: { id } }) => {
+    return themeOptionsLibApi.removeLocalItem(id)
+      .then((response => path.success(response)))
+      .catch(() => path.error());
+  },
+  {
+    success: [Promise.resolve(props`response`)],
+    error: [],
+  },
+  /* eslint-enable arrow-body-style */
+]);
+
+export {
+  closePortability,
+  closeThemeOptionApp,
+  exportThemeOptions,
+  cacheCloudToken,
+  getExportedItem,
+  loadItems,
+  openPortablity,
+  setCloudToken,
+  setLibraryContext,
+  setShowLibrary,
+  toggleLibraryItemLocation,
+  updateItem,
+  updateLocalFilters,
+  useThemeOptions,
+  saveThemeOptions,
+};