Hawk Framework
  • Home
  • Widgets
  • Simple Overlayer Manager

Simple Overlayer Manager

Simple 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 a part of the loaded HTML structure, so it doesn't need to be loaded from the server. It's more SEO-friendly than loading asynchronously like in AjaxOverlayerManager and doesn't need the server side but generates more HTML code for browser to load at once.

This Component needs the special HTML structure at the end of the document and the container for content to load with special classname (simple-overlayer-content by default) and data-id attribute coresponding with the button. The buttons that launch the mechanism should have the certain form as well. They need to have the simple-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 Simple Overlayer Manager which should handle the request.

Simple Overlayer Manager

Simple 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 a part of the loaded HTML structure, so it doesn't need to be loaded from the server. It's more SEO-friendly than loading asynchronously like in AjaxOverlayerManager and doesn't need the server side but generates more HTML code for browser to load at once.

This Component needs the special HTML structure at the end of the document and the container for content to load with special classname (simple-overlayer-content by default) and data-id attribute coresponding with the button. The buttons that launch the mechanism should have the certain form as well. They need to have the simple-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 Simple Overlayer Manager which should handle the request.

  • <div class="simple-overlayer-content" data-id="1">
        <!-- Some content to load -->
    </div>

    <button class="button simple-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.DefaultSimpleOverlayerManager = new Hawk.SimpleOverlayerManager($('#overlayer'), {
        // options and callbacks
    });
    App.Widgets.DefaultSimpleOverlayerManager.run();

Properties (options)

Name Default value Description
buttonClass
string
 simple-overlayer-button The class' name of the elements which open the overlayer. They are described wider above.
contentToLoadClass
string
 simple-overlayer-content The class' name of the elements which contain contents for SimpleOverlayerManager. 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.