Difference between revisions of "Web2.0 Javascript use and maintenance"

From WormBaseWiki
Jump to navigationJump to search
Line 115: Line 115:
 
                         colorbox: "/js/jquery/plugins/colorbox/colorbox/jquery.colorbox-min.js",
 
                         colorbox: "/js/jquery/plugins/colorbox/colorbox/jquery.colorbox-min.js",
 
                         .....
 
                         .....
                         MY_PLUGIN: "/js/jquery/plugin/MY_PLUGIN/MY_PLUGIN.js"
+
                         '''MY_PLUGIN: "/js/jquery/plugin/MY_PLUGIN/MY_PLUGIN.js"'''
  
 
           },
 
           },
Line 121: Line 121:
 
                         colorbox: "/js/jquery/plugins/colorbox/colorbox/colorbox.css",
 
                         colorbox: "/js/jquery/plugins/colorbox/colorbox/colorbox.css",
 
                         ...
 
                         ...
                         MY_PLUGIN: "js/jquery/plugins/MY_PLUGIN/MY_PLUGIN.css"
+
                         '''MY_PLUGIN: "js/jquery/plugins/MY_PLUGIN/MY_PLUGIN.css"'''
 
           };
 
           };
 
</pre>
 
</pre>

Revision as of 21:44, 19 August 2013

Layout

The javascript is all in /root/js/wormbase.js. Wrapped in an anonymous IFFE to preserve scope. Public functions are stored inside window.WB.

Public functions in window.WB:

   {
     // initiate page
     init: init,                                   // initiate all js on wormbase page
     // searching
     search: search,                               // run search using current filters
     search_change: search_change,                 // change the class search filter
     search_species_change: search_species_change, // change the species search filter
     checkSearch: checkSearch,                     // check search results - post-format if needed
     allResults: allResults,                       // setup search all page
     // static widgets
     getMarkItUp: getMarkItUp,                     // get markup language for static widgets
     StaticWidgets: StaticWidgets,                 // modify static widgets (edit/update)
     // layouts
     deleteLayout: Layout.deleteLayout,            // delete saved layout
     columns: Layout.columns,                      // get column configuration from layout
     setLayout: Layout.setLayout,                  // save a layout
     resetPageLayout: Layout.resetPageLayout,      // reset page to default widget layout
     resetLayout: Layout.resetLayout,              // change page layout
     openAllWidgets: Layout.openAllWidgets,        // open all widgets on the page
     newLayout: Layout.newLayout,                  // create a new layout
     resize: Layout.resize,                        // resize the page
     // scrolling
     goToAnchor: Scrolling.goToAnchor,             // Scroll page to certain anchor
     scrollToTop: scrollToTop,                     // scroll to the top of the page
     // loading - ajax/plugins/files/RSS
     ajaxGet: ajaxGet,                             // load data via ajax request
     setLoading: setLoading,                       // add the loading image to a certain div
     loadRSS: loadRSS,                             // load RSS (homepage)
     loadFile: Plugin.loadFile                     // load a file dynamically
     getPlugin: Plugin.getPlugin,                  // load plugin
     // notifications
     displayNotification: displayNotification,     // display notification at the top of the page
     // user session, comments/issues
     openid: openid,                               // login via openid
     historyOn: historyOn,                         // turn on history
     comment: comment,                             // add comment to a page
     issue: issue,                                 // submit an issue
     // miscellaneous 
     validate_fields: validate_fields,             // validate form fields
     recordOutboundLink: recordOutboundLink,       // record external links
     setupCytoscape: setupCytoscape,               // setup cytoscape for use
     reloadWidget: reloadWidget,                   // refresh a widget
   }


This file is loaded dynamically at the bottom of root/boilerplate/html. Minified version is loaded depending on installation_type.

   <script>
     var se = document.createElement('script');
     se.src = "/js/wormbase[% c.config.installation_type == 'development' ?  : '.min' %].js?v[% git_commit_id %]";
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(se, s);
    ...
   </script>

Some JS effects

toggle

use the jquery slideToggle call

      $(".toggle").live('click',function() {
             $(this).toggleClass("active").next().slideToggle("fast");
             return false;
       });

In the template, do as follow:

   <div class="toggle">some hint text...</div>
   <div>.... the content you want to toggle</div>

tooltip

using custom css tooltip To use, do as follow:

       <a  tip="this is the tooltip">Some text</a>

dataTable

--- note: old info ----

using the dataTable jquery plugin, in the template do:

 [% dataTable_list(header array,data,table_id,styling) %]
 eg. [% dataTable_list(['Gene','Coding sequences','Species','Experiment'],fields.rnai.data.1.aaData,'table_rnai_1') %]

data struction is an array of array reference and save in an hash with keyword "aaData", the reason to do this is dataTable can also load data from external file which requires to be in such JSON format.

 eg. { aaData=> [ ['a','b',..],
                  ['c','d',..],
                  ['e','f',..],
                  ....
                ]

note: the "styling" parameter is optional, it helps to further define the look&function of your dataTable, for more pls look at dataTable's website.


Plugins

to add a new plugin, inside the var Plugin object in root/js/wormbase.js. Insert the full path to the js file in pScripts, and the full path to the stylesheet in pStyle (if applicable). Here is an example using MY_PLUGIN.

          pScripts = {  highlight: "/js/jquery/plugins/jquery.highlight-1.1.js",
                        dataTables: "/js/jquery/plugins/dataTables/media/js/jquery.dataTables.min.js",
                        colorbox: "/js/jquery/plugins/colorbox/colorbox/jquery.colorbox-min.js",
                        .....
                        '''MY_PLUGIN: "/js/jquery/plugin/MY_PLUGIN/MY_PLUGIN.js"'''

          },
          pStyle = {    dataTables: "/js/jquery/plugins/dataTables/media/css/demo_table.css",
                        colorbox: "/js/jquery/plugins/colorbox/colorbox/colorbox.css",
                        ...
                        '''MY_PLUGIN: "js/jquery/plugins/MY_PLUGIN/MY_PLUGIN.css"'''
          };

to load a plugin before some code:

              Plugin.getPlugin("MY_PLUGIN", function(){ 

                  /* The code here will execute only after the plugin is loaded */
                  /* ... */

                });