https://www.petul.de/(cms)/module/static/customer/2/content/social_media/js/social_media.js

1function sml(){}
2
3sml.settings = {
4	color: 'white',
5	position_x: 'auto',
6	position_y: 'auto'
7};
8
9sml.init = function(){
10	var body_classes = 'social-media-shadow';
11
12	if( location.hash == '#social-dark' || sml.settings.color == 'dark' ) {
13		body_classes = 'social-media-shadow-dark';
14	}
15
16	body_classes = 'social-media-png';
17
18	jQuery( 'html:first' ).addClass( document.compatMode == 'BackCompat' ? ' quirks' : ' noquirks' );
19	
20	sml.body = jQuery( 'body' ).addClass( body_classes );
21	sml.layer = jQuery( sml.settings.layer, sml.body )
22		.eq(0)
23		.appendTo( sml.body )
24		.end()
25		.filter(':gt(0)')
26		.remove()
27		.end();
28	sml.links = jQuery( 'div.social-media-source-icon a[rel="nofollow"]', sml.body )
29		.unbind( 'click' )
30		.bind( 'click', function(){
31			sml.layer_load( this );
32			return false;
33		});
34					
35	jQuery( 'a.social-media-source-layer-close', sml.body )
36		.unbind()
37		.click(function(){
38			sml.layer_hide();
39			return false;
40		});
41};
42
43sml.layer_load = function( link ) {
44	link = jQuery( link );
45	
46	if( link.attr( 'rel' ) == 'nofollow' ) {
47		jQuery( '#social-media-source-layer-box-content-sources', sml.layer ).load(
48			link.attr( 'rev' ) || link.attr( 'href' ),
49			function() {
50				sml.layer_update( link )
51			}
52		)
53	} else {
54		sml.child_show_current( link );
55		sml.layer_update( link )
56	}
57};
58
59sml.layer_update = function( link ){
60	var layer_offset = sml.layer.offset(),
61		link_offset = link.offset(),
62		layer_posY = 'top',
63		layer_posX = 'left',
64		left = 0,
65		top = 0;
66	
67	/* iPad-orientation-change-fix
68	if (!sml.link_area) {*/
69		sml.link_area_init();
70	/*}
71	*/ 
72	
73	if ( link.hasClass( 'social-media-source-icon-active' ) ) {
74		sml.layer_hide();
75		return;
76	}
77	
78	sml.links.removeClass( 'social-media-source-icon-active' );
79	link.addClass( 'social-media-source-icon-active' );
80	
81	if ( navigator.userAgent.match( /^(?=.*\bMSIE\b).*$/ ) ) {
82		link
83			.parent()
84			.unbind()
85			.mouseenter(function(){
86				jQuery( this ).addClass('social-media-item-hover');
87			})
88			.mouseleave(function(){
89				jQuery( this ).removeClass('social-media-item-hover');
90			});
91	}
92	
93	// left position ermitteln
94	// wenn im be eine horizontale position ausgewaehlt ist, diese berechnen
95	if ( sml.settings.position_x ) {
96		switch( sml.settings.position_x ) {
97			case 1:// right
98				layer_posX = 'right';
99				left = sml.link_area.right - sml.layer.innerWidth();
100			break;
101			
102			case 2:// left
103				layer_posX = 'left';
104				left = sml.link_area.left - sml.layer.innerWidth();
105			break;
106		}
107	}
108	
109	// wenn im be keine horizontale position ausgewaehlt wurde oder der berechnete wert ungueltig ist, position (erneut) berechnen
110	if ( !left ) {
111		left = sml.link_area.left - sml.layer.outerWidth();
112		
113		if ( left < 0 || sml.link_area.left < sml.layer.outerWidth() || sml.link_area.left < ( sml.body.width() / 2 ) ) {
114			left = sml.link_area.right;
115		}
116		
117		if ( left + sml.layer.outerWidth( true ) > sml.body.width() ) {
118			left = sml.link_area.right - sml.layer.outerWidth( true );
119		}
120	}
121	
122	// ueberpruefen ob die berechnete position breiter als der body ist und ggf. korrigieren
123	if ( left + sml.layer.outerWidth() > sml.body.width() ) {
124		left = sml.body.width() - sml.layer.outerWidth();
125	}
126	
127	if ( left < 0 ) {
128		if ( sml.settings.position_y ) {
129			left = sml.link_area.left;
130		}
131		else {
132			left = sml.link_area.right;
133		}
134	}	
135
136	// top position ermitteln
137	// wenn im be eine vertikale position ausgewaehlt ist, diese berechnen
138	if ( sml.settings.position_y ) {
139		switch( sml.settings.position_y ) {
140			case 1:// top
141				top = sml.link_area.top - sml.layer.innerHeight();
142			break;
143			
144			case 2:// bottom
145				layer_posY = 'bottom';
146				top = sml.link_area.bottom;
147			break;
148		}
149	}
150	
151	// wenn im be keine vertikale position ausgewaehlt wurde oder der berechnete wert ungueltig ist, position (erneut) berechnen
152	if ( !top ) {
153		var half_height = sml.layer.outerHeight() / 2;
154		top = sml.link_area.top - half_height;
155
156		if ( top < 0 ) {
157			layer_posY = 'bottom';
158			top = sml.link_area.bottom;
159		}
160
161		if ( sml.settings.position_x == 0 && sml.link_area.top < half_height ) {
162			layer_posY = 'bottom';
163			top = sml.link_area.bottom;
164		}
165	}
166	
167	if ( top < 0 ) {
168		top = 0;
169	}
170	
171	// layer erstmalig einblenden
172	if ( sml.layer.css( 'display' ) == 'none' ) {
173		sml.layer
174			.css({
175				left: left,
176				top: top,
177				zIndex: 1500
178			})
179			.fadeIn();
180	}
181	// layer verschieben, wenn schon offen
182	else {
183		sml.layer.animate({left: left, top: top});
184	}
185
186	if ( jQuery.browser && jQuery.browser.msie ) {

187		// der ie bekommt das resizen des layers beim aendern des inhaltes nicht von selbst mit, 
188		// somit muessen wir beim neu-positionieren der unteren ecken nachhelfen..
189		jQuery( '.social-media-source-layer-box-bottom-left', sml.layer ).hide().show();
190		
191		// sternchen fuer den ie6 per filter darstellen, steht das direkt im css, funktioniert es nicht
192		if ( jQuery.browser.version.substring( 0, 1 ) == 6 ) {
193			sml.layer
194				.find( 'div.social-media-item-rating-stars' )
195				.css({
196					background: 'none',
197					filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'/%28cms%29/module/static/customer/2/content/social_media/i/stars.png\', sizingMethod=\'scale\')'
198				});
199		}
200	}
201};
202
203sml.layer_hide = function(){
204	sml.layer.fadeOut();
205	sml.links.removeClass( 'social-media-source-icon-active' );
206};
207
208/* die position von jedem einzelnen link auslesen und daraus einen bereich mit 10px "margin" generieren, der vom sml nicht ueberdeckt werden darf */
209sml.link_area_init = function(){
210	sml.link_area = { top: 0, right: 0, bottom: 0, left: 0 };
211	
212	sml.links.each(function(){
213		var element = jQuery( this ),
214			element_offset = element.offset();
215		
216		if ( !sml.link_area.top || sml.link_area.top > element_offset.top ) {
217			sml.link_area.top = element_offset.top - 10;
218		}
219		if ( !sml.link_area.right || sml.link_area.right < element_offset.left + element.outerWidth() ) {
220			sml.link_area.right = element_offset.left + element.outerWidth() + 10;
221		}
222		if ( !sml.link_area.bottom || sml.link_area.bottom < element_offset.top + element.outerHeight() ) {
223			sml.link_area.bottom = element_offset.top + element.outerHeight() + 10;
224		}
225		if ( !sml.link_area.left || sml.link_area.left > element_offset.left ) {
226			sml.link_area.left = element_offset.left - 10;
227		}
228	});
229};
230
231sml.child_show_current = function( link ){
232	sml.layer
233		.find( '.social-media-source' )
234		.hide()
235		.eq( jQuery( 'div.social-media-source-icon a', sml.body ).index( link ) )
236		.show();
237};
238	
239jQuery(function(){
240	window.setTimeout(function(){
241		sml.init();
242	}, 10 );
243});