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
<?$APPLICATION->includeComponent("bitrix:spotlight", "", array( "ID" => "my-spotlight", "JS_OPTIONS" => array( "targetElement" => "box", "content" => "Hint text", "targetVertex" => "middle-center" ) )); ?>

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:

Static. The key events specifies link to static function.
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>