How to use vc-cake - 10 common examples

addStorage('assetsBackend', (storage) => {
  const documentManager = getService('document')
  const stylesManager = getService('stylesManager')
  const elementAssetsLibrary = getService('elementAssetsLibrary')
  const assetsStorage = getService('modernAssetsStorage')
  const utils = getService('utils')
  const globalAssetsStorage = assetsStorage.getGlobalInstance()
  // const settingsStorage = getStorage('settings')
  const assetsContentWindow = window.document.querySelector('.vcv-layout-iframe').contentWindow
  const assetsWindow = window
  const builder = new CssBuilder(globalAssetsStorage, elementAssetsLibrary, stylesManager, assetsWindow, assetsContentWindow, utils.slugify)
  const assetsLibraryManager = new AssetsLibraryManager()
  const data = { elements: {} }

  storage.on('addElement', (id) => {
    let ids = Array.isArray(id) ? id : [ id ]
    ids.forEach((id) => {
      const element = documentManager.get(id)
      data.elements[ id ] = element
      storage.trigger('addSharedLibrary', element)
      builder.add(element)
    })

addStorage('shortcodeAssets', (storage) => {
  const utils = getService('utils')

  // new shortcode logic
  let loadedFiles = []
  let collectLoadFiles = () => {
    loadedFiles = []
    const assetsWindow = window.document.querySelector('.vcv-layout-iframe').contentWindow

    let data = {
      domNodes: assetsWindow.document.querySelectorAll('style, link[href], script'),
      cacheInnerHTML: true
    }
    loadFiles(data)
  }

  let scriptsLoader = {
    src: [],

addStorage('wordpressRebuildPostData', (storage) => {
  const controller = new SaveController()

  const elementsStorage = getStorage('elements')
  const settingsStorage = getStorage('settings')
  const wordpressBackendWorkspace = getStorage('wordpressBackendWorkspace')
  const documentManager = getService('document')
  const modernAssetsStorage = getService('modernAssetsStorage')

  storage.on('save', (id, options, source = '') => {
    storage.state('status').set({ status: 'saving' }, source)
    settingsStorage.state('status').set({ status: 'ready' })
    const documentData = documentManager.all()
    // check this
    storage.trigger('wordpress:beforeSave', {
      pageElements: documentData
    })
    options = Object.assign({}, {
      elements: documentData
    }, options)

getPublicImage (filename) {
    let { metaAssetsPath } = this.props
    if (!filename) {
      return ''
    }
    const isDynamic = env('VCV_JS_FT_DYNAMIC_FIELDS')
    if (isDynamic && filename.match(blockRegexp)) {
      let blockInfo = filename.split(blockRegexp)
      let blockAtts = JSON.parse(blockInfo[ 4 ])
      filename = getDynamicFieldsData({
        blockAtts: blockAtts
      })

      return filename
    }
    return filename.match('^(https?:)?\\/\\/?') ? filename : metaAssetsPath + filename
  }

constructor (props) {
    super(props)
    this.handleDynamicFieldOpen = this.handleDynamicFieldOpen.bind(this)
    this.handleDynamicFieldClose = this.handleDynamicFieldClose.bind(this)
    this.handleDynamicFieldChange = this.handleDynamicFieldChange.bind(this)
    this.onLoadPostFields = this.onLoadPostFields.bind(this)
    this.open = this.open.bind(this)
    this.hide = this.hide.bind(this)

    const isDynamic = env('VCV_JS_FT_DYNAMIC_FIELDS') && this.props.options && this.props.options.dynamicField
    let state = {
      isDynamic: isDynamic,
      dynamicFieldOpened: false,
      isWindowOpen: false,
      blockInfo: false
    }

    if (isDynamic) {
      let newState = this.getStateFromValue(this.props.value)
      state = { ...state, ...newState }
      if (state.blockInfo && state.blockInfo.blockAtts && state.blockInfo.blockAtts.sourceId) {
        window.setTimeout(() => {
          settingsStorage.trigger('loadDynamicPost', state.blockInfo.blockAtts.sourceId, this.onLoadPostFields, (error) => {
            console.warn('Error loading dynamic post info', error)
            this.onLoadPostFields(state.blockInfo.blockAtts.sourceId, {}, {})
          }, true)

constructor (props) {
    super(props)

    this.handleChangeSourceId = this.handleChangeSourceId.bind(this)
    this.handleDynamicFieldOpen = this.handleDynamicFieldOpen.bind(this)
    this.handleDynamicFieldClose = this.handleDynamicFieldClose.bind(this)
    this.handleDynamicFieldChange = this.handleDynamicFieldChange.bind(this)
    this.handleAutocompleteToggle = this.handleAutocompleteToggle.bind(this)
    this.onLoadPostFields = this.onLoadPostFields.bind(this)

    const isDynamic = env('VCV_JS_FT_DYNAMIC_FIELDS') && this.props.options && this.props.options.dynamicField && !(this.props.editFormOptions && this.props.editFormOptions.nestedAttr)
    let state = {
      isDynamic: isDynamic,
      dynamicFieldOpened: false
    }

    if (isDynamic) {
      let newState = this.getStateFromValue(this.props.value)
      window.setTimeout(() => {
        settingsStorage.trigger('loadDynamicPost', state.sourceId, this.onLoadPostFields, function (error) {
          console.warn('Error loading dynamic post info', error)
          this.onLoadPostFields(this.state.sourceId, {}, {})
        })
      }, 1)
      state = { ...state, ...newState }
    }
    this.state = state

getElement: function(name, settings, value, element) {
    if ('public' === settings.getAccess()) {
      let ComponentView = this.getComponent(settings.getType().toLowerCase());
      return React.createElement(ComponentView, {
        value: value,
        key: vcCake.getService('utils').createKey(),
        element: element,
        settings: settings,
        name: name
      });
    }
    return null;
  },
  shouldComponentUpdate(nextProps, nextState) {

addStorage('assets', (storage) => {
  const cook = getService('cook')
  const documentManager = getService('document')
  const stylesManager = getService('stylesManager')
  const elementAssetsLibrary = getService('elementAssetsLibrary')
  const assetsStorage = getService('modernAssetsStorage')
  const wordpressDataStorage = getStorage('wordpressData')
  const utils = getService('utils')
  const globalAssetsStorage = assetsStorage.create()
  const settingsStorage = getStorage('settings')
  const assetsLibraryManager = new AssetsLibraryManager()
  const data = { elements: {} }
  const getAssetsWindow = () => {
    return window && window.document.querySelector('.vcv-layout-iframe') ? window.document.querySelector('.vcv-layout-iframe').contentWindow : window
  }
  const setAttributeLibNames = () => {
    let storageLibs = storage.state('attributeLibs').get()
    if (!storageLibs) {
      storageLibs = AttributeLibNames
    } else {
      storageLibs = [...storageLibs, ...AttributeLibNames]
    }
    storage.state('attributeLibs').set(storageLibs)
  }

import { addService, getService, getStorage, env } from 'vc-cake'
import { getResponse } from 'public/tools/response'

const utils = getService('utils')
const documentManager = getService('document')
let getType = {}.toString

let processRequest = (action, key, data, successCallback, errorCallback) => {
  let ajax = getService('utils').ajax

  return ajax({
    'vcv-action': `editorTemplates:${action}:adminNonce`,
    'vcv-nonce': window.vcvNonce,
    'vcv-template-type': (window.VCV_EDITOR_TYPE && window.VCV_EDITOR_TYPE()) || 'default',
    [ key ]: data
  }, (result) => {
    let response = getResponse(result.response)
    if (response && response.status) {
      successCallback && typeof successCallback === 'function' && successCallback(response)
    } else {

valueChangeHandler (fieldKey, value) {
    const storage = getStorage('fieldOptions')
    const options = {
      fieldKey: fieldKey,
      fieldType: this.props.fieldType,
      id: this.props.elementAccessPoint.id
    }
    storage.trigger('fieldOptionsChange', options)
    let newState = lodash.defaultsDeep({}, this.state)
    newState.devices[ newState.currentDevice ][ fieldKey ] = value
    this.updateValue(newState, fieldKey)
  }