1 |
|
2 (function($) { |
|
3 |
|
4 //jQuery UI 1.5.2 doesn't support "option" as getter/setter, so we have to apply a hotfix instead |
|
5 var needs_jquery_hotfix = (($.ui.version === undefined) || (parseInt($.ui.version.split('.')[1]) < 6)); |
|
6 if (needs_jquery_hotfix) { |
|
7 $.extend($.ui.draggable.prototype, { |
|
8 option: function(key, value) { |
|
9 if (value === undefined) { |
|
10 return this.options[key]; |
|
11 } |
|
12 if (key == 'containment') { |
|
13 this.containment = value; |
|
14 } |
|
15 else{ |
|
16 this.options[key] = value; |
|
17 } |
|
18 } |
|
19 }); |
|
20 $.extend($.ui.draggable, { |
|
21 getter : 'option' |
|
22 }); |
|
23 } |
|
24 |
|
25 //extend jQuery with pageColumnist object |
|
26 $.fn.extend({ |
|
27 pageColumnist: function() { |
|
28 var self = $(this); |
|
29 |
|
30 self.box = function(elem) { |
|
31 var box = $(elem).offset(); |
|
32 box.width = $(elem).width(); |
|
33 box.height = $(elem).height(); |
|
34 return box; |
|
35 } |
|
36 |
|
37 self.update_info = function(i, elem) { |
|
38 var b = self.box(self.columns[i]); |
|
39 var o = self.box(self); |
|
40 $(elem).css({top: b.top+'px', left: b.left+3+'px', width: '50px'}); |
|
41 //changed to extended data info |
|
42 $(elem).find('b').html(Math.round(parseFloat($(self.columns[i]).attr('data')) * 100.0) / 100.0); |
|
43 $(elem).find('span').html(b.width); |
|
44 } |
|
45 |
|
46 self.update_spacer = function(i, elem) { |
|
47 var b1 = self.box(self.columns[i]); |
|
48 var b2 = self.box(self.columns[i+1]); |
|
49 $(elem).css({top: b1.top+'px', left: b1.left+b1.width+'px', width: b2.left - (b1.left+b1.width)+'px', height: b1.height+'px' }); |
|
50 } |
|
51 |
|
52 self.recalc_containments = function(i, elem) { |
|
53 var b1 = self.box(self.columns[i]); |
|
54 var b2 = self.box(self.columns[i+1]); |
|
55 var body = self.box($('body')); |
|
56 self.containments[i] = [b1.left+50, 0, b2.left+b2.width-50-self.box(elem).width, body.height] |
|
57 } |
|
58 |
|
59 self.adjust_columns = function(spacer) { |
|
60 var idx = $(spacer).draggable('option', 'colidx'); |
|
61 var perc = $(spacer).draggable('option', 'initial_perc'); |
|
62 var s = self.box(spacer); |
|
63 var b1 = self.box(self.columns[idx]); |
|
64 var b2 = self.box(self.columns[idx+1]); |
|
65 var main = self.box(self); |
|
66 //reset affected columns |
|
67 var w = '0px'; |
|
68 $(self.columns[idx]).css({width: w}); |
|
69 $(self.columns[idx+1]).css({width: w}); |
|
70 //calculate new width |
|
71 w = Math.round((s.left - b1.left) * 100.0) / main.width; |
|
72 $(self.columns[idx]).css({ width: w + '%'}).attr('data', w); |
|
73 b1 = self.box(self.columns[idx]); |
|
74 w = perc - w; |
|
75 $(self.columns[idx+1]).css({ width: w + '%'}).attr('data', w); |
|
76 self.make_equal_height(); |
|
77 } |
|
78 |
|
79 self.make_equal_height = function() { |
|
80 var h = 0; |
|
81 $(self.columns).each(function(i, elem) { h = Math.max(h, $(elem).height()); }); |
|
82 $('#cscp_ghost').css({'height' : h+'px'}); |
|
83 $('.cspc-assist-spacer').css({'height' : h+'px'}); |
|
84 } |
|
85 |
|
86 self.columns = $('.cspc-column', self); |
|
87 self.containments = []; |
|
88 |
|
89 $('body').prepend('<div id="cscp_ghost" class="cspc-assist-col"></div>'); |
|
90 $('#cscp_ghost').css(self.box(self)).hide(); |
|
91 for (var i=0; i<self.columns.length; i++) { |
|
92 $('body').append('<div class="cspc_assist_col_info"><b></b> %<br/>(<span></span> px)</div>'); |
|
93 if (i > 0) { |
|
94 $('body').append('<div class="cspc-assist-spacer"></div>'); |
|
95 self.containments.push([0,0,0,0]); |
|
96 } |
|
97 } |
|
98 $('.cspc_assist_col_info, .cspc-assist-spacer').css({position: 'absolute', 'z-index': 1001}).hide(); |
|
99 self.spacer = $('.cspc-assist-spacer'); |
|
100 $('.cspc-assist-spacer').each(self.recalc_containments); |
|
101 |
|
102 |
|
103 $('div.cspc_assist_col_info').css({ position: 'absolute', 'z-index': 1000, overflow:'hidden', color: '#000', 'background-color': '#fff', border: 'solid 1px black', padding: '3px', 'margin-top': '3px'}).each(self.update_info); |
|
104 $('div.cspc-assist-spacer').each(self.update_spacer).each(function(i,e) { |
|
105 var b = self.box(self); |
|
106 var x = needs_jquery_hotfix ? {} : { containment : self.containments[i] }; |
|
107 //TODO: containment is not always valid, to be changed in later versions |
|
108 $(e).draggable($.extend(x,{ |
|
109 axis: 'x', |
|
110 colidx: i, |
|
111 /* containment: [b.left+20, b.top, b.left+b.width-20, b.top+b.height], //didn't work for jquery.ui < 1.7.0, subject of later workarrounds */ |
|
112 start: function(event, ui){ |
|
113 try{ |
|
114 var idx = $(event.target).draggable('option', 'colidx'); |
|
115 var b1 = self.box(self.columns[idx]); |
|
116 var b2 = self.box(self.columns[idx+1]); |
|
117 $(self.spacer).each(function(i, elem) { |
|
118 if(i!=idx) |
|
119 $(elem).draggable('disable').css('z-index', 999); |
|
120 else |
|
121 $(elem).addClass('cspc-assist-spacer-active'); |
|
122 }); |
|
123 if(needs_jquery_hotfix) $(event.target).draggable('option', 'containment', self.containments[idx]); |
|
124 $(event.target).draggable('option', 'initial_perc', parseFloat($(self.columns[idx]).attr('data')) + parseFloat($(self.columns[idx+1]).attr('data'))); |
|
125 //$(event.target).draggable('option', 'initial_perc', parseFloat($(self.columns[idx]).css('width')) + parseFloat($(self.columns[idx+1]).css('width'))); |
|
126 } |
|
127 catch(e) { |
|
128 } |
|
129 }, |
|
130 drag: function(event, ui) { |
|
131 try{ |
|
132 self.adjust_columns(event.target); |
|
133 $('div.cspc_assist_col_info').each(self.update_info); |
|
134 }catch(e) { |
|
135 } |
|
136 }, |
|
137 stop: function(event, ui){ |
|
138 $(self.spacer).each(function(j, elem) { $(elem).draggable('enable').css('z-index', 1001).removeClass('cspc-assist-spacer-active'); }); |
|
139 try{ |
|
140 self.adjust_columns(event.target); |
|
141 $('div.cspc_assist_col_info').each(self.update_info); |
|
142 }catch(e) { |
|
143 } |
|
144 $(self.spacer).each(self.recalc_containments); |
|
145 } |
|
146 })); |
|
147 }); |
|
148 |
|
149 //keep tracking the resize of window |
|
150 $(window).resize(function() { |
|
151 $('#cscp_ghost').css(self.box(self)) |
|
152 $('div.cspc_assist_col_info').each(self.update_info); |
|
153 $('div.cspc-assist-spacer').each(self.update_spacer); |
|
154 self.make_equal_height(); |
|
155 }); |
|
156 |
|
157 $('#cspc-col-spacing').change(function() { |
|
158 if (self.columns.length == 0) return; |
|
159 var space = parseFloat($(this).val()); |
|
160 var base = 100.0; |
|
161 var perc = ((base - (self.columns.length - 1) * space ) / self.columns.length); |
|
162 if ($.browser.msie) { |
|
163 $(self.columns).each(function(i, elem) { |
|
164 $(elem).css({ width: '0.001%'}); |
|
165 }); |
|
166 space = space * 0.66 ; //because IE is unable to calculate the sums correctly, we have to trick it little bit |
|
167 } |
|
168 for (var i=0; i<self.columns.length; i++) { |
|
169 $(self.columns[i]).css({ width: perc+'%'}).attr('data', perc); |
|
170 if (i != 0) $(self.columns[i]).css({ marginLeft: space+'%'}); |
|
171 } |
|
172 $(window).trigger('resize'); |
|
173 return false; |
|
174 }); |
|
175 |
|
176 self.make_equal_height(); |
|
177 return $(this); |
|
178 } |
|
179 }); |
|
180 |
|
181 $(document).ready(function(){ |
|
182 //show always firefox scroll bars |
|
183 $('body').css({'overflow' : 'scroll' }); |
|
184 |
|
185 var wpadmbar = $('#wpadminbar').height(); |
|
186 var assistbar = { |
|
187 show: (0 + wpadmbar), |
|
188 hide: (-36 + wpadmbar) |
|
189 }; |
|
190 |
|
191 //assistance toolbar toggle |
|
192 $('#cspc-assist-bar-expander').click(function(){ |
|
193 $('#cspc-assist-bar').animate({ top: (parseInt($('#cspc-assist-bar').css('top')) == assistbar.show ? assistbar.hide+'px' : assistbar.show+'px') }); |
|
194 }); |
|
195 $('#cspc-assist-bar').css({ top: assistbar.hide+'px'}); |
|
196 |
|
197 //assistance toolbar spinner init |
|
198 $('#cspc-col-spacing').spin({max:10,min:0,imageBasePath: cspc_page_columnist_l10n.imageBasePath, interval: 0.5 }); |
|
199 |
|
200 //columnizer setup |
|
201 $('#cspc-content').pageColumnist(); |
|
202 |
|
203 //columnized area ghosting toggle |
|
204 $('#cspc-columns-sizing').click(function() { |
|
205 var checked = $(this).attr('checked'); |
|
206 $('#cscp_ghost').toggle(checked); |
|
207 $('.cspc_assist_col_info, .cspc-assist-spacer').toggle(checked); |
|
208 }); |
|
209 |
|
210 //saving all changes and reload |
|
211 $('#cspc-save-changes').click(function() { |
|
212 $(this).blur(); |
|
213 var cols = []; |
|
214 $('#cspc-content .cspc-column').each(function(i, elem) { |
|
215 cols.push(Math.round(parseFloat($(elem).attr('data'))*100)/100.0); |
|
216 //cols.push(Math.round(parseFloat($(elem).css('width'))*100)/100.0); |
|
217 }); |
|
218 params = { |
|
219 type: 'POST', |
|
220 url: cspc_page_columnist_l10n.adminUrl+'admin-ajax.php', |
|
221 data: { |
|
222 action: 'cspc_save_changes', |
|
223 page_id: cspc_page_columnist_l10n.pageId, |
|
224 spacing: $('#cspc-col-spacing').val(), |
|
225 distribution: cols.join('|'), |
|
226 default_spacing: $('#cspc-default-spacing').attr('checked') |
|
227 }, |
|
228 success: function(data, textStatus) { |
|
229 window.setTimeout("location.reload(true)", 500); |
|
230 }, |
|
231 error: function(xhr, textStatus, error) { |
|
232 alert(xhr.responseText); |
|
233 } |
|
234 }; |
|
235 $.ajax(params); |
|
236 }); |
|
237 |
|
238 }); |
|
239 |
|
240 })(jQuery); |
|