UPB Preview Template

Computed Properties

  • attributes - UPB Element attributes
  • uniqueId - unique Id of generated element.
  • hasContents - Check contents is available or not
  • ajaxContents - Get ajax generated content for preview
  • contents - Get contents
  • tag - Get short code tag
  • enabled - Element enabled or disabled
  • title - Get element title attribute value.
  • deviceHiddenClasses - Device hidden class, Added on addClass() method
  • backgroundVariables - Background properties
  • elementID - Value of element id field
  • elementClass - Value of element class field
  • messages - Shortcut of _upb_options.meta.messages
  • keyIndex - Key Index of an element.
  • generatedAttributes - Generated attributes, When you use generated attributes on element.
  • gradientBackgroundClass - get gradient background class.

Methods

  • inlineStyle(style = {}) - Add inline style on element with :style binding.
  • isElementRegistered(tag) - Check is child tag is registered to prevent unexpected error on load.
  • addPreviewClass(extraClass = false) - Add preview class.
  • addClass(extraClass = false, combinePreviewCss = true) - Add css classes. string or array can be pass to extraClass param. Default is false.
  • toRGB(hexColor, opacity) - Convert HEX Color to RGB / RGBA
  • toHEX(rgbColor) - Convert RGB/RGBA Color to HEX Color.
  • openElementItemsPanel(path) - open Specific Element Panel. path should be keyIndex, content._upb_options._keyIndex

  • openElementSettingsPanel(path) - open Specific Element Settings Panel. path should be keyIndex, content._upb_options._keyIndex

  • getSpacingInputValue(id) - Get field type spacing value.
  • hasGradientBackground() - Check element have background field.
  • getAttribute(attribute, defaultValue = '') - Get element attribute.
  • getGeneratedAttributes() - Get generated attributes.
  • openElementsPanel() - Open elements panel.
  • openSettingsPanel() - Open settings panel.
  • openLayoutsPanel() - Open layouts panel.

Component

  • upb-preview-mini-toolbar
    • parent - Pass parent element. Object.
    • model - Pass element model. Object.
    • contents - show Contents Icon. Boolean
    • settings - show Settings Icon. Boolean
    • onlyBorder - show only borders. Boolean
    • showDelete - Show Delete icon. Boolean

Directive

  • v-ui-draggable - Make element draggable droppable
  • v-preview-element - Add preview element class.

Example Template 01:

<?php defined( 'ABSPATH' ) or die( 'Keep Silent' ); ?>
<div v-show="enabled" :id="addID()" :class="addClass()" v-ui-draggable v-preview-element :style="backgroundVariables">
    <upb-preview-mini-toolbar :parent="parent" :model="model"></upb-preview-mini-toolbar>
    <div v-html="contents"></div>
</div>

Example Template 02 ( Nested Element ):

<?php defined( 'ABSPATH' ) or die( 'Keep Silent' ); ?>

<div v-show="enabled" :id="addID()" :class="addClass()" v-ui-draggable v-preview-element :style="backgroundVariables">

    <upb-preview-mini-toolbar :parent="parent" :model="model"></upb-preview-mini-toolbar>

    <div class="upb-tab">
        <ul class="upb-tab-items">
            <li v-for="(content, index) in contents" @click.prevent="openElementSettingsPanel(content._upb_options._keyIndex)" v-if="isElementRegistered(content.tag)" :class="{ active: content.attributes.active, 'upb-tab-item': true }" v-text="content.attributes.title"></li>
        </ul>

        <div class="upb-tab-contents">
            <div v-for="(content, index) in contents" v-if="isElementRegistered(content.tag)" :class="{ active: content.attributes.active, 'upb-tab-content': true }" v-html="content.contents"></div>

            <a href="#" @click.prevent="openElementItemsPanel(keyIndex)" class="upb-add-element-message" v-else v-text="messages.addElement"></a>
        </div>

        <a v-if="!hasContents" href="#" @click.prevent="openElementItemsPanel(keyIndex)" class="upb-add-element-message" v-text="messages.addElement"></a>
    </div>
</div>

Example 03 ( Ajax Preview ):

<?php defined( 'ABSPATH' ) or die( 'Keep Silent' ); ?>

<div v-show="enabled" :id="addID()" :class="addClass()" v-ui-draggable v-preview-element :style="backgroundVariables">

    <upb-preview-mini-toolbar :parent="parent" :model="model"></upb-preview-mini-toolbar>

    <div v-if="!attributes.id" v-text="messages.chooseForm"></div>

    <div v-else v-html="ajaxContents"></div>
</div>

Ajax Filter

add_action( 'wp_ajax__upb_{$tag}_preview_contents', function () {

    upb_check_ajax_access();

    if ( empty( $_POST[ 'shortcode' ] ) )    wp_send_json_error( 'no_shortcode', 204 );

    $contents = do_shortcode( wp_kses_post( stripslashes( $_POST[ 'shortcode' ] ) ) );

    wp_send_json_success( $contents );
});

results matching ""

    No results matching ""