jfu-1.0.x-dev/modules/jfu_examples/assets/js/index.js

/// Define component display custom example1
Vue.component('display-example1', {
  props: ['o_data', 'index', 'field_name', 'is_load', 'cardinality', 'options'],
  data: function () {
    return {
      isActive: true
    };
  },
  methods: {
    activeToggle: function() {
      this.isActive = !this.isActive;
    }
  },
  template: `
    <div class="component-item--wrapper" draggable="true" v-on:dragstart="dragStart($event, index)" v-on:dragend="dragEnd($event, field_name)">
      <a v-show="cardinality != 1" class="tabledrag-handle" title="Drag to re-order">
        <div class="handle">&nbsp;</div>
      </a>
      <div class="jfu-toggle" v-on:click="activeToggle">
        <span>{{ o_data.label }}</span>
        <span class="jfu-toggle-trigger-icon" v-bind:class="{'is-active' :isActive}"></span>
      </div>
      <div class="accordion-item--content" v-bind:class="{'is-active' :isActive}">
        <display-content-example1 v-bind:o_data="o_data" v-bind:options="options"></display-content-example1>
        <display-operations v-bind:index="index" v-bind:field_name="field_name" v-bind:is_load="is_load" v-bind:type="o_data.type" v-bind:options="options"></display-operations>
      </div>
    </div>
  `
});

// Define component display content example1
Vue.component('display-content-example1', {
  props: ['o_data', 'options'],
  template: `
    <div class="component-item custom-component-item">
      <div class="custom-component-item--title-container">
        <h3 v-if="o_data.title" class="custom-component--title">{{ o_data.title }}</h3>
      </div>
      <div class="custom-component-item--content">
        <div class="custom-component-info--subtitle" v-if="o_data.subtitle">
          <display-text v-bind:content="o_data.subtitle"></display-text>
        </div>
        <div v-if="o_data.body.value" class="custom-component-info--body">
           <display-text v-bind:content="o_data.body.value"></display-text>
        </div>
        <div v-if="o_data.image.value" class="custom-component-info--image">
          <display-image v-bind:o_image="o_data.image" v-bind:options="options"></display-image>
        </div>
        <div class="custom-component-info--link" v-if="o_data.link.value">
          <display-link v-bind:o_link="o_data.link" v-bind:options="options"></display-link>
        </div>
      </div>
    </div>
  `
});

// Define component form example1
Vue.component('form-example1', {
  props: ['o_json', 'edit_index', 'field_name', 'component', 'options'],
  template: `
    <form v-on:submit.prevent="edit_index === '' ? addToJfu($event) : updateToJfu($event, o_json.type, edit_index)">
      <form-elements-example1 v-bind:o_json="o_json" v-bind:field_name="field_name" v-bind:options="options" v-bind:index="0"></form-elements-example1>
      <input class="link-to link-to-add" type="submit" v-bind:value="options.defaultLabels.save" />
    </form>
  `
});

// Define component form content example1
Vue.component('form-elements-example1', {
  props: ['o_json', 'field_name', 'options', 'index'],
  template: `
    <div class="form-component">
      <form-classes v-bind:o_json="o_json" v-bind:index="index" v-bind:field_name="field_name" v-bind:options="options"></form-classes>
      <p>
        <label>{{ options.defaultLabels.title }}
          <input type="text" name="needed_accordion_slider_title" size="60" maxlength="255" placeholder="Title" v-model="o_json.title" />
        </label>
      </p>
      <p>
        <label>{{ options.defaultLabels.subtitle }}
          <input type="text" name="needed_accordion_slider_title" size="60" maxlength="255" placeholder="Subtitle" v-model="o_json.subtitle" />
        </label>
      </p>
      <form-text v-bind:o_json="o_json.body" v-bind:field_name="field_name" v-bind:options="options" v-bind:index="index"></form-text>
      <form-image v-bind:o_image="o_json.image" v-bind:field_name="field_name" v-bind:index="index" v-bind:component="'example1'" v-bind:options="options"></form-image>
      <form-link v-bind:o_link="o_json.link" v-bind:field_name="field_name" v-bind:options="options"></form-link>
      <p>
        <label>{{ options.defaultLabels.full_width }}
          <label><input type="checkbox" id="full_width" v-model="o_json.options.full_width">{{ options.defaultLabels.activate_full_width }}</label>
        </label>
      </p>
    </div>
  `
});


/// Define component display custom example2
Vue.component('display-example2', {
  props: ['o_data', 'index', 'field_name', 'is_load', 'cardinality', 'options'],
  data: function () {
    return {
      isActive: true
    };
  },
  methods: {
    activeToggle: function() {
      this.isActive = !this.isActive;
    }
  },
  template: `
    <div class="component-item--wrapper" draggable="true" v-on:dragstart="dragStart($event, index)" v-on:dragend="dragEnd($event, field_name)">
      <a v-show="cardinality != 1" class="tabledrag-handle" title="Drag to re-order">
        <div class="handle">&nbsp;</div>
      </a>
      <div class="jfu-toggle" v-on:click="activeToggle">
        <span>{{ o_data.label }}</span>
        <span class="jfu-toggle-trigger-icon" v-bind:class="{'is-active' :isActive}"></span>
      </div>
      <div class="accordion-item--content" v-bind:class="{'is-active' :isActive}">
        <display-content-example2 v-bind:o_data="o_data" v-bind:options="options"></display-content-example2>
        <display-operations v-bind:index="index" v-bind:field_name="field_name" v-bind:is_load="is_load" v-bind:type="o_data.type" v-bind:options="options"></display-operations>
      </div>
    </div>
  `
});

// Define component display content example2
Vue.component('display-content-example2', {
  props: ['o_data', 'options'],
  template: `
    <div class="component-item custom-component-item">
      <div class="custom-component-item--title-container">
        <h3 v-if="o_data.title" class="custom-component--title">{{ o_data.title }}</h3>
      </div>
      <div class="custom-component-info--subtitle" v-if="o_data.subtitle">
        <display-text v-bind:content="o_data.subtitle"></display-text>
      </div>
      <div class="custom-component-item--content" v-for="item in o_data.items.items">
        <div v-if="item.body.value" class="custom-component-info--body">
           <display-text v-bind:content="item.body.value"></display-text>
        </div>
        <div v-if="item.image.value" class="custom-component-info--image">
          <display-image v-bind:o_image="item.image" v-bind:options="options"></display-image>
        </div>
      </div>
    </div>
  `
});

// Define component form custom component
Vue.component('form-example2', {
  props: ['o_json', 'edit_index', 'field_name', 'component', 'options'],
  template: `
    <form v-on:submit.prevent="edit_index === '' ? addToJfu($event) : updateToJfu($event, o_json.type, edit_index)">
      <form-elements-example2 v-bind:o_json="o_json" v-bind:field_name="field_name" v-bind:options="options" v-bind:index="0"></form-elements-example2>
      <input class="link-to link-to-add" type="submit" v-bind:value="options.defaultLabels.save" />
    </form>
  `
});

// Define component form content example2
Vue.component('form-elements-example2', {
  props: ['o_json', 'field_name', 'options', 'index'],
  template: `
    <div class="form-component">
      <form-classes v-bind:o_json="o_json" v-bind:index="index" v-bind:field_name="field_name" v-bind:options="options"></form-classes>
      <p>
        <label>{{ options.defaultLabels.title }}
          <input type="text" name="needed_accordion_slider_title" size="60" maxlength="255" placeholder="Title" v-model="o_json.title" />
        </label>
      </p>
      <p>
        <label>{{ options.defaultLabels.subtitle }}
          <input type="text" name="needed_accordion_slider_title" size="60" maxlength="255" placeholder="Subtitle" v-model="o_json.subtitle" />
        </label>
      </p>
      <form-example2_items v-bind:o_items="o_json.items.items" v-bind:field_name="field_name" v-bind:options="options" v-bind:index="index"></form-example2_items>
      <p>
        <label>{{ options.defaultLabels.full_width }}
          <label><input type="checkbox" id="full_width" v-model="o_json.options.full_width">{{ options.defaultLabels.activate_full_width }}</label>
        </label>
      </p>
    </div>
  `
});

// Define component form example2_items
Vue.component('form-example2_items', {
  props: ['o_items', 'index', 'field_name', 'options'],
  updated: function () {
    this.$nextTick(function () {
      // Reaload ajax link
      app.reloadAjaxLinks();
    });
  },
  methods: {
    addElement: function (event) {
      var item = {
        "type": "example2_item",
        "body": {
          "type": "text",
          "value": "",
          "format": "basic_html"
        },
        "image": {
          "type": "image",
          "fid": "",
          "alt": "",
          "title": "",
          "value": ""
        }
      };
      this.o_items.push(item);
    },
    deleteItem: function(event, items, key) {
      items.splice(parseInt(key), 1);
    }
  },
  template: `
    <div class="jfu-example2-items">
      <div class="jfu-field-form--container">
        <div v-for="(item, i) in o_items" class="jfu-form-example2-item jfu-link-image--item" @drop="onDrop($event, i, o_items)" @dragover.prevent @dragenter.prevent>
          <div class="jfu-tabledrag" draggable  @dragstart="startDrag($event, i)">
            <div class="jfu-toggle jfu-multi-row-accordion-edit" v-on:click="activeToggle('.example2-item-' + i, '.example2-toggle-item-' + i)">
              <a class="tabledrag-handle" title="Drag to re-order"><div class="handle">&nbsp;</div></a>
              <span>{{ 'Example2 - ' + (i + 1) }}
                <span class="jfu-drop-changed" :class="'jfu-drop-changed-' + i"> * </span>
              </span>
              <span class="jfu-toggle-trigger-icon is-active" v-bind:class="'example2-toggle-item-' + i"></span>
            </div>
            <div class="accordion-item--content is-active" :class="'example2-item-' + i">
              <form-text v-bind:o_json="item.body" v-bind:field_name="field_name" v-bind:options="options" v-bind:index="index" v-bind:subindex="i"></form-text>
              <form-image v-bind:o_image="item.image" v-bind:field_name="field_name" v-bind:subindex="i" v-bind:index="index" v-bind:component="'example2'" v-bind:options="options" v-bind:subindexitem="'image'"></form-image>
              <div v-if="o_items.length > 1" class="operations" style="padding: 10px;">
                <span class="jfu-button jfu-button--delete" v-on:click="deleteItem($event, o_items, i)">{{ options.defaultLabels.delete_item }}</span>
              </div>
            </div>
          </div>
        </div>
        <span v-on:click="addElement($event)" class="jfu-button jfu-button--edit ade--example2-item">{{ options.defaultLabels.add_new_item }}</span>
      </div>
    </div>
  `
});