https://kvf.fo/service/frontpage-fixup/fixup3.js

1/*
2	greinar til forsiðuna koma nú allar í einum fyrispurningi.
3	Deil hetta upp í panelir, eftir 'outer' matrisuni.
4	Flyt onnur panelir inn eftir teirra 'moveto-' klassa.
5	NB: 'moveto-' indeks er relativt til fyrsta element í view-inum!
6	NB: page/general hevur sett id til 'fixup-panelgeneral' og er sett til display:none - verður tendrað til seinast
7
8	UPDATED: Images are now stored as data-img attributes in the view.
9	Only the needed image size is injected into the DOM, reducing page load by ~66%.
10	Drupal.attachBehaviors() is called after DOM manipulation so kvf_decorator
11	runs after images are injected.
12*/
13
14var all=jQuery('.FP-holder');
15var list=jQuery('.FP-holder').parent();
16//console.log(all);
17var rows=all.find('tr');
18//console.log(rows);
19
20var outer=[
21	{index:0,content:['im1','im3','im3']},
22	{index:1,content:['im3','im3','im3']},
23	{index:2,content:['im2','im2']},
24	{index:3,content:['im3','im3','im1']},
25	{index:4,content:['im1','im3','im3']},
26	{index:5,content:['im2','im2']},
27	{index:6,content:['im3','im3','im3']},
28	{index:7,content:['im2','im2']},
29	{index:8,content:['im3','im3','im3']},
30	{index:9,content:['im2','im2']},
31	{index:10,content:['im3','im3','im3']},
32	{index:11,content:['im2','im2']},
33	{index:12,content:['im3','im3','im3']},
34	{index:13,content:['im2','im2']},
35	{index:14,content:['im3','im3','im3']},
36	{index:15,content:['im2','im2']},
37	{index:16,content:['im3','im3','im3']},
38	{index:17,content:['im2','im2']},
39	{index:18,content:['im3','im3','im3']},
40	];
41	
42jQuery(list).children().each(function(){
43	if(jQuery(this).hasClass('panel-separator')){
44		jQuery(this).remove();
45	}		
46});
47var data=new Array();
48
49for(var i=0;i<rows.length;i++){
50	var r={im1:'',im2:'',im3:''};
51	// Target the inner div with data-img, not the outer wrapper
52	r.im1=jQuery(rows[i]).find('.views-field-field-mynd [data-img]')[0];
53	r.im2=jQuery(rows[i]).find('.views-field-field-mynd-1 [data-img]')[0];
54	r.im3=jQuery(rows[i]).find('.views-field-field-mynd-2 [data-img]')[0];
55	data.push(r);
56}
57
58var counter=0;
59// Inject only the needed image size from data-img attribute, remove the others.
60// This prevents the browser from downloading all 3 image sizes.
61for(var i=0;i<outer.length;i++){
62	for(var j=0;j<outer[i].content.length;j++){
63		var e=outer[i].content[j];
64		var imgHtml='';
65		switch(e){
66			case 'im1':
67				imgHtml=jQuery(data[counter].im1).attr('data-img');
68				jQuery(data[counter].im1).html(imgHtml);
69				jQuery(data[counter].im2).remove();
70				jQuery(data[counter].im3).remove();
71				break;
72			case 'im2':
73				imgHtml=jQuery(data[counter].im2).attr('data-img');
74				jQuery(data[counter].im1).html(imgHtml);
75				jQuery(data[counter].im1).addClass('views-field-field-mynd');
76				jQuery(data[counter].im2).remove();
77				jQuery(data[counter].im3).remove();
78				break;
79			case 'im3':
80				imgHtml=jQuery(data[counter].im3).attr('data-img');
81				jQuery(data[counter].im1).html(imgHtml);
82				jQuery(data[counter].im1).addClass('views-field-field-mynd');
83				jQuery(data[counter].im2).remove();
84				jQuery(data[counter].im3).remove();
85				break;
86			default:
87				console.error('structural error.. Kanna <data> í fixup.js');
88				break;
89		}
90		counter++;
91	}
92}
93
94var offset=-1;
95for(var i=0;i<list[0].children.length;i++){
96	if(list[0].children[i]==all[0])
97		offset=i;
98}
99//console.log(offset);
100
101// generera nýggj panel - eftir 'outer' - fyrsta panel verður standandi
102counter=outer[0].content.length;
103var NEXT=all[0].nextSibling;
104for(var i=1;i<outer.length;i++){
105	var pp0=jQuery('<div class="panel-pane pane-views pane-fors-a-front frontpage-top-section-' + (i+1) + '" />');
106	var pp1=jQuery('<div class="pane-content" />');
107	var d='<div class="view view-fors-a-front view-id-fors_a_front frontpage-forsida-teaser f-t-';
108	var im=outer[i].content;
109	var selector='';
110	for(var j=0;j<im.length;j++)
111		selector+=im[j];
112	switch(selector){
113		case 'im2im2':
114			d+='3" />';
115			break;
116		case 'im1im3im3':
117			d+='1" />';
118			break;
119		case 'im3im3im1':
120			d+='4" />';
121			break;
122		case 'im3im3im3':
123			d+='2" />';
124			break;
125		default:
126			console.error('unknown selector for panel layouts:' + selector);
127			d+='" />';
128			break;
129	}
130	var pp2=jQuery(d);

131	var pp3=jQuery('<div class="view-content"></div>');
132	var ptab=jQuery('<table class="views-view-grid cols-1"></table>');
133	for(var j=0;j<outer[i].content.length;j++){
134		var elm=jQuery(rows[counter]).detach();
135			jQuery(elm).addClass('row-'+(j+1));
136		jQuery(ptab).append(elm);
137		counter++;
138	}
139	jQuery(pp3).append(ptab);
140	jQuery(pp2).append(pp3);
141	jQuery(pp1).append(pp2);
142	jQuery(pp0).append(pp1);
143	list[0].insertBefore(pp0[0],NEXT);
144}
145
146// flyt onnur panel upp á pláss
147jQuery(list).children().each(function(){
148	var index=-1;
149	this.classList.forEach(function(d){
150		if(d.substr(0,7)=='moveto-'){
151			index=parseInt(d.substr(7));
152		}
153	});
154	if(index>-1){
155		list[0].removeChild(this);
156		list[0].insertBefore(this,list[0].children[index+offset]);
157	}
158});
159jQuery(list).children().each(function(id){
160	var pp1=jQuery('<div class="panel-separator" />');
161	list[0].insertBefore(pp1[0],this);
162});
163
164// Re-run Drupal behaviors so kvf_decorator processes the newly injected images
165Drupal.attachBehaviors();
166
167//console.log(jQuery('#fixup-panel'));
168jQuery('#fixup-panel').fadeIn(10);