Documentation

BX.SidePanel.Instance

Class is the main software interface to handle the slider. It is the singleton-object.

BX.SidePanel.Instance.open method

BX.SidePanel.Instance.open(
   url[,
   options]
)

This method opens a page inside the slider with the specified address in the URL parameter. Returns true, if the slider has opened successfully, otherwise returns false.

Parameters

Parameter Description Type
url Address of the page, which will be opened in the slider's iframe. For sliders with their individual content (contentCallback option is specified), a unique identifier is specified in this parameter. string
options Collection of the slider options. All settings are optional.
  • contentCallback {function(BX.SidePanel.Slider)} - callback function that uploads random content into the slider. First argument accepts a slider object (instance of BX.SidePanel.Slider class). Inside the Callback it should:
    • Create a promise (new BX.Promise).
    • Execute it (promise.fulfill(content)) with the slider content (string or DOM-element).
    • In case of an error, report about it (promise.reject(error)).
    • Return the created promise.
  • width {number} - Maximum slider width.
  • cacheable {boolean} - Slider caching after closure. If specified false, the slider will be automatically eliminated upon closing. By default - true.
  • autoFocus {boolean} - Automatic focusing occurs in the iframe when opening the slider. This behaviour can be cancelled, if false is specified.
  • allowChangeHistory {boolean} - Change page address to the opened slider address. By default - true.
  • allowChangeTitle {true|false|null} - Change page title to the opened slider title. By default - null. When no value is specified (null), page name will change, if the slider has a directly indicated title (title option) or permitted page address updating (allowChangeHistory).
  • Title {string} - Page title. If not specified, values is sourced from document.title.
  • requestMethod {string} - If the parameter equals post, then the page will load into the slider's iframe via HTTP-method POST. This could be needed to pass a large volume of data, because HTTP-method GET can lead to error 414 Request-URI Too Large.
  • requestParams {object} - POST-paramters, passed in the request. Only is needed when requestMethod="post".
  • loader {string} - Idenfitier of loader type moduleId:loaderId or path to svg-file.
  • data {object} - Arbitrary set of your own data for the slider to be handled (read/write/delete) during complete life cycle.
  • label {object} - Option specifies settings for slider's external appearance ("label"). Object type:
    label: {
        text: "My label",
        color: "#FFFFFF", //text color
        bgColor: "#2FC6F6", //background color
        opacity: 80 //background transparency
    }
    
  • animationDuration {number} - Animation time for opening/closing slider in milliseconds.
  • events {object.} - Collection of event handlers.
Object

Example

Example of slider with its own content and data.

BX.SidePanel.Instance.open("crm:activity-view", {

  //Forward your own data into slider
  data: {
	 minRepeats: 30,
	 maxRepeats: 100,
	 repeatString: "=========="
  },

  contentCallback: function(slider) {

	 var promise = new BX.Promise();

	 //Emulation of asynchronous operation (as a rule, its ajax)
	 setTimeout(function() {
		//Read your data
		var minRepeats = slider.getData().get("minRepeats");
		var maxRepeats = slider.getData().get("maxRepeats");
		var repeatString = slider.getData().get("repeatString");

		var repeats = Math.floor(Math.random() * (maxRepeats - minRepeats) + minRepeats);
		slider.getData().set("repeats", repeats); //Write new data

		var result =
		   "minRepeats: " + minRepeats + "
" + "maxRepeats: " + maxRepeats + "
" + "repeats: " + repeats + "

" + (repeatString + "
").repeat(repeats) ; promise.fulfill(result); }, 1000); return promise; }, animationDuration: 100, width: 600, events: { onLoad: function(event) { var slider = event.getSlider(); console.log(slider.getData().get("repeats")); //Read written data } } });

Opening of slider by the HTTP-method POST.

BX.SidePanel.Instance.open("/mypage.php", {
   options: {
      requestMethod: "post",
      requestParams: { // post-parameters
         action: "load",
         ids: [1, 2, 3],
         dictionary: {
            one: 1,
            two: 2
         }
      }
   }
});

Метод BX.SidePanel.Instance.bindAnchors

BX.SidePanel.Instance.bindAnchors(
   options
)

The method registers handling rules for clicked links on a page.

Parameters

Method Description Available from version
options Settings for link clicking handling mechanism.
  • rules {Array} - Array of rules. Each rule - is the object with the following keys:
    • condition {string[]|RegExp[]} - Array of link (regular expressions) templates. Required parameter.
    • stopParameters {string[]} - Array of prohibited parameters. If the address contains at east one of these parameters, link will not be handled. Optional parameter.
    • handler {function(event, link)} - Handler function for clicking on a link. Behaviour can be re-defined by default (slider opening) by this parameter. Optional parameter.
      • event {MouseEvent} - Object of link clicking event
      • link - Object with the link data:
        • href - Link address.
        • target - 'target' attribute value.
        • anchor - link's DOM-object (<a> tag).
        • matches - Array with matches of regular expression groups.
    • validate {function(link)} - Function of verifying if a link is correct. If returns false, link will not be handled. Optional parameter.
      • link - object with the link data.
    • allowCrossDomain {boolean} Allow to open links from third party sites. By default - false.
    • mobileFriendly {boolean} Handle links in mobile browsers. By default - false.
Object

Other class methods

Method Description Available from version
BX.SidePanel.Instance.isOpen()
Returns true, if the slider is displayed on screen.
BX.SidePanel.Instance.close([immediately=false])
Closes the current slider on the page.
immediately {boolean}Close slider instantaneously, without animation.
BX.SidePanel.Instance.closeAll([immediately=false])
Closes all sliders on the page.
immediately {boolean} Close sliders instantaneously, without animation.
BX.SidePanel.Instance.destroy(url)
Eliminates slider on the page.
url {string} Page address or deleted slider ID.
BX.SidePanel.Instance.getTopSlider()
Returns the current opened slider (instance of the [[link=6518345]BX.SidePanel.Slider[/link] class).
BX.SidePanel.Instance.getSlider(url)
Returns slider (instance of the [link=6518345]BX.SidePanel.Slider[/link] class) by the specified address or identifier.
url {string} - Page address or slider ID.
BX.SidePanel.Instance.getSliderByWindow(window)
Returns the slider (instance of the [link=6518345]BX.SidePanel.Slider[/link] class) by the iframe window.
window {Window} - Object of the iframe window.
BX.SidePanel.Instance.getOpenSliders()
Returns list of all opened sliders (array of [link=6518345]BX.SidePanel.Slider[/link] class instances).
BX.SidePanel.Instance.getLastOpenSlider()
Returns closed slider (instance of the [link=6518345]BX.SidePanel.Slider[/link] class).


© «Bitrix24», 2001-2022
Up