https://ottosauhaus.de/site/templates/js/home.js

1
2var activeEntry = -1;
3var activeLayout = "s";
4var items;
5var pictures;
6var portraits;
7var css = "selected";
8var activeTooltip = -1;
9
10function setupQTip(){
11	$("figure").qtip({
12                /*content: {
13                    text: "<strong>asdf</strong>",
14                    title: {
15                        text: "Title",
16                        button: false
17                    }
18                },*/
19                content: {
20        			text: function(event, api) {
21        				//hideTooltips($(this));
22        			//	alert(">"+$(this).attr("id"));
23        				return getTooltipContent($(this));
24            			// Retrieve content from custom attribute of the $('.selector') elements.
25            			//return $(this).attr('qtip-content');
26       				 }
27    			},
28                position: {
29                    target: 'mouse',
30                    my: 'bottom right',  // Position my top left...
31       				 at: 'top left',
32                    adjust: {
33                        mouse: false,
34                        resize: true
35                    },
36                   	viewport:$(window)
37                },
38                show: {
39                    event: 'click'
40                },
41                hide: {
42                    fixed: true,
43                    event: 'click',
44                    leave: true
45        }
46  });
47  
48}
49function getTooltipContent(el){
50	var attr = el.attr("id");
51	var arr = attr.split("-");
52	
53	var id = arr.pop()*1;
54	if(id!=activeTooltip){
55		$('.qtip:visible').qtip("hide");
56		//$("#qtip-"+activeTooltip).hide();
57		activeTooltip = id;
58		
59	}
60	
61	return $('#info-'+id);
62}
63function onResize(){
64	$('.qtip').qtip("hide");
65}
66function onTooltip(el){
67	
68	/*
69	var x = e.pageX - el.offsetLeft;
70    var y = e.pageY - el.offsetTop;
71    
72    alert(x);
73    */
74    
75	var attr = el.attr("id");
76	var arr = attr.split("-");
77	
78	var id = arr.pop()*1;
79	
80	el.tooltipster('content',$('#info-'+id));
81	return true;
82	//alert(">"+id);
83	//return;
84	//var arr = $('#tooltips ul');
85	//alert(arr.eq(id).html());
86	/*
87	if(layout=="l"){
88		el.tooltipster('content',arr.eq(id-1));
89		return true;
90	}
91	else{
92		document.location.href = loc + "#glossary-"+id;
93	}
94	*/
95	
96}
97
98function setupTooltips(){
99	$('figure').tooltipster({
100	 	functionBefore: function(origin, continueTooltip) {var b = onTooltip(origin);if(b){continueTooltip();} },
101         content: $('<span><strong>This text is in bold case !</strong></span>'),
102         trigger: 'click',
103         theme: 'tooltipster-ottosauhaus',
104         contentAsHTML:true,
105         maxWidth: 280,
106         position:'top-left'      
107     });
108}
109
110
111
112$( document ).ready(function() {
113	//

114	items = $('ul.works > li');
115	pictures = $('img');
116	portraits = $('img.portrait');
117	//
118	/*
119	$('ul.tags li:last-child').each(function(){
120		$(this).addClass("last");
121   	});
122	$('ul.works figure').click(function(){
123		toggleDisplay($(this));
124   	});
125	$('ul.works article').click(function(){
126		toggleDisplay($(this));
127   	});
128   	*/
129   	setupQTip();
130   	changeLayout(activeLayout);
131   	//setupTooltips();
132   	
133   	enquire.register("screen and (min-width: 33em)", {
134		match : function() {
135			changeLayout("m");
136		},  
137    	unmatch : function() {
138    		changeLayout("s");
139    	},
140    	/*setup : function(){
141    		changeLayout("m");
142    	},*/
143		deferSetup: true
144	});
145	
146	enquire.register("screen and (min-width: 56em)", {
147		match : function() {
148			changeLayout("l");
149		},  
150    	unmatch : function() {
151    		changeLayout("m");
152    	}
153	});
154	$( window ).resize(function() {
155  onResize();
156});
157});
158
159function toggleDisplay(el){
160	//
161	/*
162	$('ul.works li').each(function(){
163		$(this).removeClass("selected");
164   	});
165   	*/
166	//
167	//var ref = el.parent().parent();
168	var ref = el.parent();
169	var arr = ref.attr("id").split("-");
170	var j = arr[1];
171	
172	if(j==activeEntry){
173		return;
174	}
175	
176	ref.toggleClass(css);
177	if(ref.hasClass(css)){

178		console.log("show:"+j);
179	}
180	else{		
181		j = -1;
182	}
183	hideEntry(j);
184	/*
185	if($(window).width()>680){
186		if(ref.hasClass(css)){
187			var w = ref.find('figure').eq(0).data("w");
188			ref.css('width',w);
189			
190		}
191		else{
192			ref.css('width','auto');	
193		}
194	}
195	*/
196	
197	
198	
199}
200function changeLayout(l){
201	if(l=="l"){
202		//if(activeLayout=="m"){
203			pictures.each(function(){
204				$(this).css("height",$(this).data("h"));
205				$(this).css("max-height",$(this).data("h"));
206   			});
207		//}
208	}
209	if(l=="m"){
210		if(activeLayout=="l"){
211			pictures.each(function(){
212				$(this).css("height","auto");
213				$(this).css("max-height",Math.round($(this).data("h")*0.75));
214   			});
215		}
216		if(activeLayout=="s"){
217			portraits.each(function(){
218				$(this).css("max-height",Math.round($(this).data("h")*0.75));
219				$(this).css("max-width","auto");
220			});
221		}
222	}
223	if(l=="s"){
224		pictures.each(function(){
225			$(this).css("height","auto");
226			$(this).css("max-height","auto");
227   		});
228		//if(activeLayout=="m"){
229			portraits.each(function(){
230				$(this).css("height","auto");
231				$(this).css("max-width","60%");
232   			});
233		//}
234	}
235	activeLayout = l;
236	console.log(">"+l);
237}
238function hideEntry(j){
239	if(activeEntry>-1){
240		console.log("hide:"+activeEntry);
241		items.eq(activeEntry).removeClass(css);
242	}
243	console.log("active:"+j);
244}