Difference between revisions of "Web2.0 Javascript use and maintenance"
(→Layout) |
|||
Line 1: | Line 1: | ||
= Layout = | = Layout = | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
At the beginning of template/boilerplate/html, included them as following. | At the beginning of template/boilerplate/html, included them as following. | ||
Line 13: | Line 5: | ||
<script type="text/javascript" src="[% '/js/' _ item _ '.js' %]" ></script> | <script type="text/javascript" src="[% '/js/' _ item _ '.js' %]" ></script> | ||
[% END %] | [% END %] | ||
+ | |||
+ | |||
+ | The javascript is all in /root/js/wormbase.js. Wrapped in an anonymous [http://benalman.com/news/2010/11/immediately-invoked-function-expression/ IFFE] to preserve scope. Public functions are stored inside window.WB. | ||
+ | |||
+ | Public functions in <code>window.WB</code>: | ||
+ | |||
+ | { | ||
+ | // 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 = | = Some JS effects = |
Revision as of 21:25, 19 August 2013
Contents
Layout
At the beginning of template/boilerplate/html, included them as following.
[% FOREACH item IN JavaScripts %] <script type="text/javascript" src="[% '/js/' _ item _ '.js' %]" ></script> [% END %]
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 the clueTip jquery plugin To use, do as follow:
<a class="tooltip" href="#" title="title text.." rel="ajax call url(eg./rest/evidence/phenotype/wph.../description)">hint text</a>
dataTable
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.
update panel
Future Note
- 1. In the future we could use a deployment script to combine+minify them into one file (eg. cat + YUI compressor)
- 2. consider namespace
- 3. probably move all under root/js/jquery ?