Q4Widgets API Documentation

q4.app

Reuseable functions used on Q4 Websites
Script link
q4.app.1.0.2.min.js
Source file
q4.app.js, line 1

Examples

- q4.app.js is already loaded on blank
- defaults are extended in mainscripts and the init() function is executed (see the below code example)

var q4App = $.extend( q4Defaults, {
    init: function() {
        var app = this;
        
        app.cleanUp();
        app.unWrapLink('a.StockPrice');
        app.submitOnEnter('.ModuleSearch');
        app.submitOnEnter('.MailingListUnsubscribeContainer');
        app.validateSubmit('.ModuleSearch');
        app.accessibleNav($('.navbar-collapse'), 'level1');
        app.onMenuToggle();
        app.onMenuExit($('.PaneNavigation .menu-close'));

    }
)});

q4App.init();

- multiple subpages on blank 
- you can extend q4App inside the global module : 

var q4App = $.extend( q4Defaults, {
    init: function() {
        this.myFunction()
    },
    myFunction: function() {...}
)});

or on an inner page q4App.myFunction() {}

Methods

reveal
Used to reveal an element by clicking on a trigger element. Use this function to create anything from "Read More" buttons to revealing hidden elements with a trigger.
Parameters
selector container
the wrapping element
selector trigger
the element that will be clicked to reveal
selector panel
the element to be revealed
Example
app.reveal('.read-more', '.read-more_button', '.read-more_panel');
moduleNotFound
Hide module if "module not found" text is present
Parameters
element $el
the element containing the "module not found" text
element $hidden
the element that will be hidden
Example
app.moduleNotFound( $('.EditSubscriberConfirmation'), $('.MailingListUnsubscribeContainer, .subscribe-text') );
confirmationScroll
Scroll to an element if a confirmation message is present
Parameters
element $el
A selector containing the element to scroll to
selector confirmationText
A selector containing text to confirm confirmation
Example
app.( $('.MailingListUnsubscribeContainer'), '.MailingListUnsubscribeMessage' );
isValidEmailAddress
Validate if a string is a vaild email address
Parameters
string emailAddress
An email address that will be tested against the regular expression
Example
app.isValidEmailAddress ( 'support@q4inc.com' );
Returns
boolean
validateUnsubscribe
Attaches a click handler to the modules submit button which will not allow the form to submit without a true email address
Parameters
element $el
an element containing the submit button
Example
app.validateUnsubscribe($('.MailingListUnsubscribeContainer'));
validateSubmit
Attaches a check to a search module's submit button which will not allow the module to submit without text inside the search input
Parameters
selector selector
the class being used by the search module
Example
app.validateSubmit('.module-search');
submitOnEnter
Allows the user to submit our forms using the enter key
Parameters
selector selector
the class being used by the formbuilder module
Example
app.submitOnEnter('.module-form')
onMenuToggle
Standard mobile menu functionality
Parameters
element $layout
the default layout element
selector toggleClass
the class assigned to the element used to toggle the mobile navigation
Example
app.onMenuToggle($('.layout'), '.mobile-toggle')
onMenuExit
Additional mobile menu functionality
Parameters
Example
app.onMenuExit($el)
accessibleNav
Gives a navigation element accessibility assistance in the form of the .focused class.
Parameters
element $nav
the navigation element used for this function
selector topLevel
the class assigned to the highest visible level of the navigation
Example
app.accessibleNav($('.nav'), '.level1')
accessibilize
Gives element accessibility properties suitable for accordions, slide toggles, and tab navigation.
Parameters
element $tablist
the wrapping element for the accessible section
element $tab
the element used to toggle the appropriate $tabpanel
element $tabpanel
the element intended to display in respect to the currently selected $tab
Example
app.accessibilize($tablist, $tab, $tabpanel)
toggle
Creates a fully accessible expanding and collapsing accordion with the ability to switch between toggle and accordion functionality.
Parameters
element $container
the wrapping element for the toggle list
selector item
the class assigned to each designated toggling element
selector toggle
the class assigned to the element that will toggle the containing item
selector panel
the class assigned to the section that will be revealed if its containing item is toggled
boolean accordion
(optional) if true, the toggling section will take on accordion functionality
boolean allButton
(optional) if true, the toggling section will be accompanied by a "Hide All / Show All" button
Example
app.toggle($('.accordion'), '.accordion_item', '.accordion_toggle', '.accordion_panel', false, true);
remindMeOnce
Used to hide the "Remind Me" functionality for events modules if a reminder has already been created. Works for both list and details pages.
Parameters
element $el
element(s) containing the "Remind Me" form
Example
app.remindMeOnce($('.module-event .module_item')); or app.remindMeOnce($('.module-event-details'));
hidePastCal
Used to hide the "Add to Calendar" functionality for past events. Works for both list and details pages.
Parameters
element $events
element(s) containing the unwanted "Add to Calendar" link
Example
app.hidePastCal($('.module-event .module_item')); or app.hidePastCal($('.module-event-details'));
formBuilder
A set of functions used to improve our formbuilder modules.
Parameters
element $form
the form module this function works for
element $hidden
an element to hide once the form has been submitted
Example
app.formBuilde($('.module-form'), $('.module-form-intro'));
docTracking
Small plugin used for document tracking w/ Google Analytics
Parameters
Example
app.docTracking();