https://www.zoloft.com/-/media/Base-Themes/Main-Theme/scripts/partial-design-highlight.js

1XA.component.partialDesignHighlight = (function($,_,document){
2    var pub = {}, isRegistered = false;
3	
4	pub.init = function() {
5	    var Frame, mouseoverHandler, mouseoutHandler;
6
7        if(!Object.prototype.hasOwnProperty.call(window, "Sitecore")) {
8			return false;
9		}
10
11        if ($('.on-page-editor').length > 0 && !isRegistered) {
12
13            isRegistered = true;
14
15            Frame = Sitecore.PageModes.HoverFrame.extend({
16                horizontalSideClassName: function() {
17                    return this.base() + " scHilghlightedChrome boldHighlight sxaFrame";
18                },
19
20                verticalSideClassName: function() {
21                    return this.base() + " scHilghlightedChrome boldHighlight sxaFrame";
22                },
23
24                dispose: function() {
25                    if (this.sides) {
26                        $sc.each(this.sides, function() {
27                            this.remove();
28                        });
29                    }
30                    this.sides = null;                    
31                },
32                show: function(chrome) {
33                    this.base(chrome);
34
35                    this.top.css('left', this.top.position().left - 2 + "px").css('width', this.top.width() + 4 + "px");
36                    this.bottom.css('left', this.bottom.position().left - 2 + "px").css('width', this.bottom.width() + 4 + "px");
37                    this.topRightCorner.css('left', this.topRightCorner.position().left + 2 + "px");
38                    this.bottomRightCorner.css('top', this.bottomRightCorner.position().top + 3 + "px");
39                    this.bottomLeftCorner.css('top', this.bottomLeftCorner.position().top + 3 + "px");
40                    this.left.css('height', this.left.height() + 7 + "px").css('top', this.left.position().top - 2 + "px");
41                    this.right.css('height', this.right.height() + 7 + "px").css('left', this.right.position().left - 1 + "px").css('top', this.right.position().top - 2 + "px");
42                    if (this.bottom.position().top - this.top.position().top < 7) {
43                        this.bottom.css('top', this.top.position().top + 7 + "px");
44                    }
45                }
46            });
47
48            mouseoverHandler = function (partialDesignId) {
49                
50                if (partialDesignId) {
51                    var chromes = Sitecore.PageModes.ChromeManager.chromes();
52                  
53                    for (var i = 0; i < chromes.length; i++) {
54                        var chrome = chromes[i];
55                        if (chrome.data !== undefined &&
56                            chrome.data.custom !== undefined &&
57                            partialDesignId === chrome.data.custom.sxaSource) {
58
59                            if (chrome._highlight !== undefined) {
60                                chrome._highlight.hide();
61                            }
62                                
63                            chrome._highlight = new Frame();
64                            chrome._highlight.show(chrome);
65                        }
66                    }
67                }
68            }
69
70            mouseoutHandler = function() {
71                var chromes = Sitecore.PageModes.ChromeManager.chromes();
72                for (var i = 0; i < chromes.length; i++) {
73                    chromes[i].hideHighlight();
74                }
75                $(".sxaFrame").remove();
76            }
77
78            $('.on-page-editor').on('mouseover', 'table[data-zgtype=snippets] tr', function () {
79                mouseoverHandler($(this).attr('id'));
80			});
81
82			$('.on-page-editor').on('mouseout', 'table[data-zgtype=snippets] tr', mouseoutHandler);
83
84			
85			$('.on-page-editor').on('mouseenter', '.sc_DropDownItemLink', function () {
86			    
87			    //check if we are over snippet button
88
89                var partialDesignId = $(this).data("sc-sxa-item-id");
90			    
91                if (partialDesignId.length) {
92                    partialDesignId = partialDesignId.substring(partialDesignId.indexOf('{') + 1, partialDesignId.indexOf('}'));
93                    if (partialDesignId) {
94                        mouseoverHandler("L" + partialDesignId.replace(/-/g,''));
95                    }
96                }
97            });
98
99			$('.on-page-editor').on('mouseleave', '.sc_DropDownItemLink', function () {
100                //check if we are over snippet button
101			    if ($(this).data("sc-sxa-item-id").length > 0) {
102                    mouseoutHandler();
103                }
104            });
105		}		
106	};
107	
108    return pub;
109})(jQuery,_, document);
110
111XA.register("partialDesignHighlight", XA.component.partialDesignHighlight);