0
|
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); |