reference architecture

e
Each module is a function so we can also pass variables, arguments, thru the function, in the list above represented by the letter   (e)

Example: module | cycle
module property: code modification | variable

   function (myVariables) -----> javascript before -----> module cycle script -----> javascript after
                  |
           pass variables

NOTE: when a module is run by a   run on load   any argument passed ( = the actual name used ) will also run at that instance
             therefore it is required that arguments added are defined before a   run on load   executes
             either define them within the   Template Set   or use the   easy tools | javascript | before   property
             or create a new   function call   with ie. the   easy tools | javascript | after   property without arguments

scope
In addition each module, which is a function, also has it's own BEFORE and AFTER input, above represented by the word   (scope)

Example: module | cycle
module property: code modification | before - code modification | after

     javascript before ---------------> module cycle script ---------------> javascript after
            |                                    |                                 |
       additional code                    execute script                      additional code

NOTE: the scope here is inside the function vs the easy tools before/after which is in scope to the Template

global - local (var)
With the property   easy tools | global - local   all modules (functions) are set to either   local   or   global   scope
Most likely this will be set to   local   to keep all functions contained to this TEMPLATE jQuery ready function
see easy tools | global - local   here

callbacks + actions + events
Additionally, each module in itself may have it's own outputs depending on the script itself    callbacks, actions and/ or events

Example: module | cycle
module property: code modification | before - code modification | after - code modification | variable - cycle script callback(s)

   function (myVariables) -----> javascript before -----> module cycle script -----> javascript after
                                                                    |
                                                                    +--> callback(s)
Example: module | OnEvent
module property: code modification | before - code modification | after - code modification | variable - event object function (e) - callback(s)

   function (myVariables) -----> javascript before -----> module event script -----> javascript after
                                                                    |
                                                                    +--> (e) event object function
                                                                    +--> (e,delta) mousewheel delta
                                                                    +--> callback(s)

LOCAL SCOPE TEMPLATE

To create an extension that will not conflict with other jscripts we need to keep our variables and functions contained
This architecture shows how to keep our variables and function in local scope to this TEMPLATE jQuery ready function

REFERENCE - ARCHITECTURE

ARCHITECTURE

•••• css (external)
•
•    <script type="text/javascript">
•
•    $(document).ready(function (){
•
•••• default variables (jorID + jorRay)
•                        ------------------------------------------------------+
•••• template set                                                              +-----
•••• easy tools | javascript | before                                          |
•                        ------------------------------------------------------+
•                              ---------------------------------------------+
•••• easy tools | preblock                                                  |
•••• easy tools | page load                                                 +-------
•                              ---------------------------------------------+
•                                                                  --------+
•                                                                          |
•                                                                          +------
•••• tubeplayer function - var Call_Tube_1        = function (e) {scope} |
•                                                                          |
•••• disable     function - var Call_Disable_1     = function (e) {scope} |
•                                                                          |
•••• iframe      function - var Call_Frame_1       = function (e) {scope} |
•                                                                          |
•••• append      function - var Call_Append_1      = function (e) {scope} |
•                                                                          |
•••• list        function - var Call_List_1        = function (e) {scope} |
•                                                                          |
•••• reposition function - var Call_Repos_1       = function (e) {scope} |
•                                                                          |
•••• onscroll    function - var Call_OnScroll_1    = function (e) {scope} |
•                                                                          |
•••• onload      function - var Call_Load_1        = function (e) {scope} |
•                                                                          |
•••• draggable   function - var Call_Drag_1        = function (e) {scope} |
•                                                                          |
•••• resizable   function - var Call_Resize_1      = function (e) {scope} |
•                                                                          |
•••• droppable   function - var Call_Drop_1        = function (e) {scope} |
•                                                                          |
••••             function - var Call_Break_1       = function (-) {     } |
•••• onevent     function - var Call_Event_1       = function (e) {scope} |
•                                                                          |
•••• cycle       function - var Call_Cycle_1       = function (e) {scope} |
•                                                                          |
•••• scroll      function - var Call_Scroll_1      = function (e) {scope} |
•                                                                          |
•••• parallax    function - var Call_Parallax_1    = function (e) {scope} |
•                                                                          |
•                                                                  --------+
•••• easy tools | custom fx
•
•••• easy tools | momentum scroll
•
•                             -------------------------------------------------+
•••• easy tools | javascript | after                                           +----
•                             -------------------------------------------------+
•
•
•    });
•
•    </script>

BEFORE

AFTER

MODULES

EASY
TOOLS

jQuery
ready

- execute additional custom code before the modules are declared

jor_aniMateTEMPLATE's architecture allows for many ways to interact on the script to achieve the desired result we are after
Of course these are all advanced functions which can enhance our script, but are all non required properties ...

- execute additional custom code after the modules are declared

BEFORE

AFTER

<-----------------------------------------------------------+