CODEWITHSUNDEEP
javascriptjquerywordpress
user2325396
user2325396

Reputation: 105

Basic Integration of Edge Animate and WordPress

I have a very basic file I created in Edge Animate in which I just fadein and fadeout some text. It's located here:

http://www.threecell.com/demo/simpletext/simpletext.html

Edge Animate exports an HTML file and some JS Files. My question is whether it's possible to make it so that you can update the text in the future using the WordPress framework. I found that the actual text is declared in one of the JS files which I've posted below (the text in question is "THIS IS A TEST".) Ultimately, I'd like to create a WordPress widget that goes into this JS file and changes the text value.

Thanks in advance for any assistance or guidance,

/**
 * Adobe Edge: symbol definitions
 */
(function($, Edge, compId){
//images folder
var im='images/';

var fonts = {};


var resources = [
];
var symbols = {
"stage": {
   version: "2.0.1",
   minimumCompatibleVersion: "2.0.0",
   build: "2.0.1.268",
   baseState: "Base State",
   initialState: "Base State",
   gpuAccelerate: false,
   resizeInstances: false,
   content: {
         dom: [
         {
            id:'Text',
            type:'text',
            rect:['131','190','auto','auto','auto','auto'],
            text:"THIS IS A TEST",
            font:['Arial, Helvetica, sans-serif',24,"rgba(0,0,0,1)","normal","none",""]
         }],
         symbolInstances: [

         ]
      },
   states: {
      "Base State": {
         "${_Stage}": [
            ["color", "background-color", 'rgba(255,255,255,1)'],
            ["style", "overflow", 'hidden'],
            ["style", "height", '400px'],
            ["style", "width", '550px']
         ],
         "${_Text}": [
            ["style", "top", '200px'],
            ["style", "opacity", '0'],
            ["style", "left", '197px']
         ]
      }
   },
   timelines: {
      "Default Timeline": {
         fromState: "Base State",
         toState: "",
         duration: 1500,
         autoPlay: true,
         timeline: [
            { id: "eid7", tween: [ "style", "${_Text}", "opacity", '1', { fromValue: '0'}], position: 0, duration: 1500 },
            { id: "eid4", tween: [ "style", "${_Text}", "left", '297px', { fromValue: '197px'}], position: 0, duration: 1500 },
            { id: "eid5", tween: [ "style", "${_Text}", "top", '193px', { fromValue: '200px'}], position: 0, duration: 1500 }         ]
      }
   }
}
};


Edge.registerCompositionDefn(compId, symbols, fonts, resources);

/**
 * Adobe Edge DOM Ready Event Handler
 */
$(window).ready(function() {
     Edge.launchComposition(compId);
});
})(jQuery, AdobeEdge, "EDGE-2538351");

Upvotes: 0

Views: 927

Answers (1)

brasofilo
brasofilo

Reputation: 26065

You will have to create a plugin and use the Widgets_API.

In the frontend, the widget will use wp_enqueue_script to load simpletext_edgePreload.js. And then pass your text values as JavaScript data with wp_localize_script.
You'll finally be able to use something like this in your JS file: text:my_data.text.

A shortcode example: Wordpress Javascript File SRC File Path.

A widget example: Conditionally enqueue a widget's script/stylesheet in HEAD

Upvotes: 1

Related Questions