Hawk Framework
  • Home
  • Widgets
  • AJAX Overlayer Manager

Ajax Overlayer Manager

Ajax Overlayer Manager allows to show some content above the page, i.e. some details about things presented in the text which don't need to be visible all the time. The content that should be displayed on the overlayer is being loaded from the server using the AJAX technology.

This Component needs the special HTML structure at the end of the document. The buttons that launch the mechanism should have the certain form as well. They need to have the ajax-overlayer-button classname (could be changed in the options), the data-id attribute whose value indicates the content to load and the data-overlayer-id that contains the ID of the Ajax Overlayer Manager which should handle the request. They can also have the data-bundle attribute which keeps the extra values being sent to the server. The Bundle is in the inline key=value shape.

  • <button class="button ajax-overlayer-button" type="button" data-overlayer-id="1" data-id="1">
        <div class="button__wrapper">
            <div class="button__inner">
                See the overlayer
            </div>
        </div>
    </button>

    <!-- (...) page's structure goes on -->

    <!-- ...and the overlayer's structure at the end of the body -->

    <section id="overlayer" class="overlayer std-overlayer" data-overlayer-id="1">
        <div class="std-overlayer__wrapper">
            <div class="overlayer__content-container std-overlayer__inner">
                <div class="overlayer__content">

                </div>
            </div>

            <div class="overlayer__close std-overlayer__close ajax-overlayer-close">
                <div class="icon-plus icon-plus--rotated icon-plus--light"></div>
            </div>
        </div>

        <div class="overlayer__loading-layer std-overlayer__loading-layer">
            <div class="icon-loader icon-loader--light icon-loader--animated"></div>
        </div>
    </section>
  • App.Widgets.DefaultAjaxOverlayerManager = new Hawk.AjaxOverlayerManager($('#overlayer'), {
        // options and callbacks
    });
    App.Widgets.DefaultAjaxOverlayerManager.run();

Properties (options)

Name Default value Description
path
string
 /ajax/load-overlayer Path to the endpoint which processes the Request and returns a JSON Response with the content that is going to be shown on the layer. The Request and Response structure is described below.
buttonClass
string
 ajax-overlayer-button The class' name of the elements which open the overlayer. They are described wider above.
mode
Hawk.AjaxOverlayerManagerConstants.Modes
 DEFAULT Click event assignment mode.
fadeSpeed
integer
 200 The speed of the overlayer's appearing and disappearing (in miliseconds).
slideSpeed
integer
 200 The speed of expanding the content on the layer (in miliseconds).
closeOnClickOutside
boolean
 false Whether to close the overlayer when user clicks outside the content's container or not.
eventName
string
 click.overlayerManager A name of the JavaScript click event that the Hawk.AjaxOverlayerManager instance should use to control buttons connected with this instance.
popstateEventName
string
 popstate.overlayerManager A name of the JavaScript popstate event that the Hawk.AjaxOverlayerManager instance should use to control the browser's back button.
wrapperClass
string
 overlayer__wrapper The class' name of the wrapper.
contentContainerClass
string
 overlayer__content-container The class' name of the content's container.
contentClass
string
 overlayer__content The class' name of the content element.
loadingLayerClass
string
 overlayer__loading-layer The class' name of the layer which is visible when the content is loading.
closeButtonClass
string
 ajax-overlayer-close The class' name of the element which closes the overlayer. This element needs to be inside the overlayer container (may be in the loaded part, though).
baseZIndexValue
integer
 9000 Base value of z-index feature that is being increased and being set for following instances of Hawk.AjaxOverlayerManager.

Callbacks

Name Arguments Description
onLoad
  • ajaxOverlayerManager
    Hawk.AjaxOverlayerManager
    Current instance of Hawk.AjaxOverlayerManager
  • id
    string
    ID of the loaded content.
  • result
    object
    The whole result object returned by the server.
It is invoked when the content has been loaded.
onLoading
  • ajaxOverlayerManager
    Hawk.AjaxOverlayerManager
    Current instance of Hawk.AjaxOverlayerManager
  • id
    string
    ID of the loaded content.
  • result
    object
    The whole result object returned by the server.
It is invoked when the AJAX request is completed and the content is going to be changed.
onShow
  • ajaxOverlayerManager
    Hawk.AjaxOverlayerManager
    Current instance of Hawk.AjaxOverlayerManager
It is invoked when the overlayer is being shown.
onHide
  • ajaxOverlayerManager
    Hawk.AjaxOverlayerManager
    Current instance of Hawk.AjaxOverlayerManager
It is invoked when the overlayer is being hidden.
onInitialize
  • ajaxOverlayerManager
    Hawk.AjaxOverlayerManager
    Current instance of Hawk.AjaxOverlayerManager
  • hash
    string
    The value of the window.location.hash
It is invoked when the page has been loaded and the overlayer has already been initialized. It should process the hash and possibly load the appropriate content.
changeContent
  • ajaxOverlayerManager
    Hawk.AjaxOverlayerManager
    Current instance of Hawk.AjaxOverlayerManager
  • content
    jQuery object
    -
  • callback
    function
    The function that should be invoked when content is placed in the overlayer
It is invoked when the content is going to be put in the overlayer.
hide
  • ajaxOverlayerManager
    Hawk.AjaxOverlayerManager
    Current instance of Hawk.AjaxOverlayerManager
This function hides the overlayer.

Public methods

Name Arguments Description
getOverlayerID
integer
Returns the overlayer's id number.
getLang
string
Returns the language code which is inferred from the lang attribute of the html element.
hide
void
Closes the overlayer.
show
void
Shows the overlayer.
load
void
  • id
    string
    The ID of the content that should be loaded (sent with the Request). Helps the server to return the appropriate result.
  • bundle
    object
    The extra parameters that can be used by the backend service.
Loads the content. Sends the Request to the endpoint defined in the options and shows the overlayer with the already loaded content.
changeContent
void
  • content
    string
    The string containing the HTML code that is going to be shown in the overlayer.
  • callback
    function
    The callback that is being invoked after the content is changed.
Changes the content inside the overlayer.
run
void
Launches the Ajax Overlayer Manager and binds the DOM elements with necessary events.

Request

Name Description
id
string
 The ID of the content that is going to be loaded.
bundle
array
 A bundle of extra values that can be required to load the appropriate content.
lang
string
 The language code that is taken from the lang attribute of html element.

Response

Name Description
status
Hawk.RequestStatus (integer)
 The status of the proceeded response. See more
html
string
 The HTML content that should be displayed on the overlayer.
id
string
 The ID of the content that is loaded (should be the same as in the Request).

AJAX Communication

The client-server communication in the framework is very simple. Each component which uses the back-end responses has the appropriate Request and Response structure descripted. The thing that keeps them in the same root is the status field which should take one of the following values informing about the result's state. The communication is always in the JSON format.

Hawk.RequestStatus

Name Value Description
SUCCESS 0 Everything went well.
ERROR 1 There occurred a controlable problem during processing the request. I.e. the data are invalid.
EXCEPTION 2 There occurred an unexpected problem.