VFS.Editor

Description

• Used to edit product and custom pieces stand-alone or integrated within sponsor tools.

Feature Map

• Text Editing
  • Class: vfsEdit/vfEdit
  • Attributes: vfsEditType - simple, full
• CopyFitting
  • Class: vfsCopyFit
  • Attributes: vf-cf-mf - minimum font the editor is allowed to reduce the font-size.
• Image Editing
  • Class: vfsEdit
  • Class: vfImage
  • Attributes: vfs-image - image array location in the command packet.
• Color Picking
  • Class: vfColor
  • Attributes: vf-color-property - css property to inject color.
• Char Counts
  • Class: vfsEdit/vfEdit
  • Attributes: vf-char-count - css property to inject color.

Editing

• Class: vfsEdit
• Attributes:
  • vfsEditType=”type”
    • Types:
      • simple
      • full
    • the example below demonstrates an Editable Div that has ‘simple’ editing.

    E.g:

        <div title="Property Description" class="**vfsEdit**" vfsEditType="simple" style="font-size:11.9px !important">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur repellendus eum reprehenderit ut quae enim iusto nihil, qui, consequatur impedit dolorem voluptatum, necessitatibus! Voluptas obcaecati ipsam accusantium illum dolorum quaerat cumque praesentium nemo dignissimos necessitatibus non repellat nisi ex est doloremque ut atque, eveniet asperiores ratione minima soluta sint sapiente. Cum suscipit tempore dicta, voluptatem ipsam quibusdam nemo quisquam expedita provident nulla minus aspernatur sequi, quia reprehenderit? Nisi, maiores saepe, sequi totam tempore voluptas. Aut iste nam enim quidem, hic doloribus consequuntur. Ipsam veritatis, perferendis perspiciatis qu</div>
    

CopyFitting

• Class - vfCopyFit Compatible with vfsCopyFit
• Description - enables copyfitting on an element.
• the editor will look at the width of text and see if the text is > than the container
• It will then start reducing the font-size until it sees that the container and the text are the same size and stop.

• UNLESS - vf-cf-mf= “Some number”

  • How to use
    • it’s as easy as adding vf and vf-cf-mf=”size” to an element
    • vfsCopyFit or vfCopyFit: enables copyfitting
    • vf-cf-mf: tells the editor to stop if the font size hits this value (copyfit minimum font size)
    • then apply css to that element so it acts appropriately

    E.g :

      <div>
        <div class="contactEmail vfsCopyFit" vf-cf-mf="9" vf-var="user.email" >john.public@1stDemoMortgage.com</div>
      </div>
    
      <style>
      .contactEmail {
        white-space: nowrap;
        overflow: hidden;
      }
      </style>
    

    • so this is telling the editor to apply copyfitting to this div and only apply it until the font-size is 9….
    • if the font-size hit the state size and the editor has more reducing, it will back off and leave the original font size.

    NOTE - the editor only knows what to do based on how you set up the document.

    CSS Rules:

    • the width of the container need a pixel value

      .contactEmail {
          width: 0px; -- Good
          width: 0;   -- Not good  
      }
      

    • white-space: you are telling that element not to wrap, this forces the text beyond the container.
    • overflow: you are telling it to hide the overflow so we don’t see on the screen.
    • Both these settings create a basis where the editor can see real text size.

Image Editing

Default Image Picker

• The default image picker is the standard picking from desktop picker. Some know it as a file upload picker.

• How to Enable
  • It’s as simple as applying vfsEdit to an img element and wrapping in an ided elements.
  • ided elements allowed: div, td

  E.g:

  <td bgcolor="#ffffff" id="e183702a">
      <img src="http://placehold.it/600x300" class="vfsEdit">
  </td>
  

  • This is telling the editor that I want to have a default image picker for this image the Wrapping code with ‘id’ is necessary so the editor can apply the overlay

  E.g

The Image Toolbar

• ’+’ : zooms in
• ’-‘ : zooms out
• ‘Camera’ - choose an image
• ‘Reset’ - if you zoom in or out and want to reset back to original settings
• ‘X’ - clears the image back to the original filler image

Command Packet Picker

• The command packet picker is controlled by image arrays passed through the command packet.

This now uses two classes for image picking

• Class: vfsEdit/vfEdit - used when the element is an image
• CLass: vfsEdit/vfEdit and vfImage - used when the element is not an image
• Attributes:
  • vfs-image - designates the array to be used in the command packet
  • vf-image-property - designates the css property where the image url should be injected

How to Use

• Add vfs-image=”location” attribute for the array of images
• if the element is not of type ‘img’
  • Add vf-image-property=”prop” to specify the css property for the url

• Wrap with an ided element ( div or td )

• E.g

• The following is a sample command packet passed into the editor.
• Some of the verbose pieces have been removed
• You will notice that in the template node there is an ‘imageArr1’
• You will also notice that in the user node there is also an image array.

There are a few way to have the piece access the images for an element.

NOTE: It’s very important in the HTML to wrap the img element in a (div or td) with an id. The editor uses this div to build it’s controls.

Exact Match - specify the exact node and subnode where the image array exist you want.

<div bgcolor="#ffffff" id="e183702a8dbc4ca28d989af2814800fc">
    <img src="http://placehold.it/600x300" class="vfsEdit" vfs-image="template.imageArr1" style="width: 600px; max-width: 600px; height: auto; background: #dddddd">
</div>

<td bgcolor="#ffffff" id="e183702a8dbc4ca28d989af2814800fc">
    <img src="http://placehold.it/600x300" class="vfsEdit" vfs-image="user.dogs" style="width: 600px; max-width: 600px; height: auto; background: #dddddd">
</td>

Template Assumption Match - specify the exact node you want and the editor will check the root and if not found with then check the template node.

<td bgcolor="#ffffff" id="e183702a8dbc4ca28d989af2814800fc">
    <img src="http://placehold.it/600x300" class="vfsEdit" vfs-image="imageArr1" style="width: 600px; max-width: 600px; height: auto; background: #dddddd">
</td>

**Using a Div to inject the image into the background-image

<div id="divImageParent">
    <div class="vfsEdit vfImage" vf-image-property="background-image" vfs-image="imageArr1">
</td>

Sample Command Packet

    "version": "1.6",
    "type": "email",
    "jobId": "VE2017050920243446785ae1",
    "authentication": {
        "sponsorKey": "70d1e05967d44c8d9a550fefe4530633",
        "clientKey": "f03cbf3cabac41b0ad9518462c897d1c"
    },
    "email": {
        "subject": "Test Email",
        "from" : {
         "name": "John Public",
           "email": "john.public@velma.com"
        }
    },
   "template": {
        "Email_SubjectLine":"text here",
        "description": "VFS Email Editing Images",
        "mediaType":"Email",
        "name":"VFS Email Editing Images",
        "sku":"30551",
        "url":"https://s3-us-west-2.amazonaws.com/vfs-assets/user/dcarter/editor/ImageEditing/emailWithImages.html",
        "imageArr1": [
          {
            "url": "https://s3-us-west-2.amazonaws.com/vfs-assets/user/dcarter/editor/ImageEditing/image1.jpg",
          },
          {
            "url": "https://s3-us-west-2.amazonaws.com/vfs-assets/user/dcarter/editor/ImageEditing/image2.jpg",
          },
          {
            "url": "https://s3-us-west-2.amazonaws.com/vfs-assets/user/dcarter/editor/ImageEditing/image3.jpg",
          }
        ]
    },
    "user": {
        "AppUniqueID": "",
        "ID": 1010,
        "firstName": "John",
        "lastName": "Public",
        "companyName": "The really long first demo mortage company name that doesn't seem to fit",
        "dogs": [
          {
            "url": "https://s3-us-west-2.amazonaws.com/vfs-assets/user/dcarter/editor/ImageEditing/dog1.jpg",
          },
          {
            "url": "https://s3-us-west-2.amazonaws.com/vfs-assets/user/dcarter/editor/ImageEditing/dog2.png",
          },
          {
            "url": "https://s3-us-west-2.amazonaws.com/vfs-assets/user/dcarter/editor/ImageEditing/dog3.jpg",
          }
        ]
    }
}     

Color Picking

• The editor has the ability the have a color picker for the pieces.
• Color picking is as simple as “choose and use”.

Class: vfColor - this enables an element to have a color injected.

Attributes: vf-color-property - this is the css property to inject the color.

To Enable: add “colorPicking”: “true” in the template node of the command packet (can be added from the Fulfillment library in Velma).

This enables the color picking symbol to appear in the editor.

E.g:

Clicking this will show the color picker.

Use Color - Will inject the color into the editor specified elements. Clear Color - Will remove the color from the editor specified elements.

Html

E.g:

This will inject the color choosen into the background-color property.

  <div class="vfColor" vf-color-property="background-color" >
      <h3><b>Some Text </b></h3>
  </div>

This will inject the color choosen into the color property.

  <div class="vfColor" vf-color-property="color" >
      <h3><b>Some Text </b></h3>
  </div>

Color Picking Flow

• Step1 - Click on Color Picker to Open Drawer
• Step2 - Choose color
• Step3 - Click ‘Use Color’ button to inject color into piece

Setting up command packet.

• the color picker will respond to the command packets template node.
• if ‘colorPicking’: ‘true’ is set the picker icon will show, without this flag it will not be enabled for use
• if ‘colors’ node has an array of color as per the example below the color picker will just show the array of colors and nothing else

E.g:

• If the template node is missing the ‘colors’ node then it will show a default setup as follows:

E.g:

• again you just choose and use.
• Fine Tuning
• This is a more advanced color selector that allows you to either choose or manipulate the color.
• just modify the color and click select.

Color Picking with Image Thievery [BETA]

• the color picker and image picker can work together.
• if you happen to have an approved image selected and it’s in a bucket in your s3 that has cors opened up in the bucket permission area the color picker will attempt to generate a color swatch image pallet for you.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

E.g:

• in this example we select the red and black race car.
• the picker generates and image pallet of the colors in the image.
• then choose and use

Characters Counts

• Class: vfsEdit/vfEdit
• Attributes:

  • vf-char-count=”int” - represents the max characters

    E.g:

        <div title="Property Description" class="vfEdit"
         vf-char-count="150" >Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
    

    On the editor you will see a counter on the bottom right of the editable area showing the total and current count of characters.

    

The End