Documentation

Component bitrix:spotlight

Component displays a hint on a page next to specified DOM element. Registers fact of displayed hint to the current user. Component is adapted for composite.

Call example

Parameters

Parameter Description Available from version
ID Hint ID. Required parameter.
USER_TYPE User type. Available values:
  • OLD - hint display for existing users.
  • NEW - hint display for new users.
  • ALL - hint display for any users.
USER_TIMESPAN Timespan in seconds for determining new/existing user. 30 days by default.
LIFETIME Hint lifetime in seconds. 30 days by default.
START_DATE Hint displaying start date. Not specified by default.
END_DATE Hint displaying end date. Not specified by default.
JS_OPTIONS Array of options for constructor BX.SpotLight.

Example of event handling in JavaScript

Example demonstrates two options for event handling for a pulsating circle, connected via the component bitrix:spotlight:

  1. Static. The key events specifies link to static function.
  2. Instance. Component bitrix:spotlight creates a pulsating circle object using manager BX.SpotLight.Manager. You can get link to object type BX.SpotLight via this manager.
<?

$APPLICATION->includeComponent("bitrix:spotlight", "", array(
	"ID" => "my-spotlight3",
	"USER_TYPE" => "OLD",
	"USER_TIMESPAN" => 3600 * 24 * 30,
	"LIFETIME" => 3600 * 24 * 30,
	"START_DATE" => gmmktime(8, 30, 0, 10, 10, 2017), // October 10, 2017 11:30 GMT
	"END_DATE" => gmmktime(8, 30, 0, 12, 10, 2017), // December 10, 2017 11:30 GMT
	"JS_OPTIONS" => array(
		"targetElement" => "box",
		"content" => "Text Text",
		"top" => 100,
		"left" => 100,
		"events" => array(
			"onTargetEnter" => "BX.MyModule.MyComponent.handleTargetEnter" //static method
		),
		"targetVertex" => "middle-right"
	)
));

?>

<script>
(function() {

	BX.namespace("BX.MyModule.MyComponent");

	BX.MyModule.MyComponent = function(options)
	{
		//Get hint instance.
		var spotlight = BX.SpotLight.Manager.get("my-spotlight");
		if (spotlight)
		{
			spotlight.bindEvents({
				onTargetEnter: this.handleTargetEnter.bind(this)
			});
		}
	};

	BX.MyModule.MyComponent.handleTargetEnter = function(spotlight)
	{
		console.log("handleTargetEnter", this, spotlight);
	};

	BX.MyModule.MyComponent.prototype =
	{
		handleTargetEnter: function(spotlight)
		{
			console.log("handleTargetEnter prototype", this, spotlight);
		}
	};

})();

BX.ready(function() {
	new BX.MyModule.MyComponent();
});

</script>


© «Bitrix24», 2001-2024