| author | ymh <ymh.work@gmail.com> |
| Wed, 11 Dec 2019 14:30:18 +0100 | |
| changeset 1514 | 5869151a1f2f |
| parent 1304 | 10974bff4dae |
| permissions | -rwxr-xr-x |
|
1198
ff4b567d51f2
upgrade metadataplayer and add annotation creation
Yves-Marie Haussonne <1218002+ymph@users.noreply.github.com>
parents:
diff
changeset
|
1 |
/*! |
| 1514 | 2 |
* jQuery Spliter Plugin version 0.28.3 |
3 |
* Copyright (C) 2010-2019 Jakub T. Jankiewicz <https://jcubic.pl/me> |
|
|
1198
ff4b567d51f2
upgrade metadataplayer and add annotation creation
Yves-Marie Haussonne <1218002+ymph@users.noreply.github.com>
parents:
diff
changeset
|
4 |
* |
| 1514 | 5 |
* This program is free software: you can redistribute it and/or modify |
6 |
* it under the terms of the GNU Lesser General Public License as published by |
|
7 |
* the Free Software Foundation, either version 3 of the License, or |
|
8 |
* (at your option) any later version. |
|
|
1198
ff4b567d51f2
upgrade metadataplayer and add annotation creation
Yves-Marie Haussonne <1218002+ymph@users.noreply.github.com>
parents:
diff
changeset
|
9 |
* |
| 1514 | 10 |
* This program is distributed in the hope that it will be useful, |
11 |
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
12 |
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
13 |
* GNU Lesser General Public License for more details. |
|
|
1304
10974bff4dae
upgrade metadataplayer + publish enmi 14and 15
Yves-Marie Haussonne <1218002+ymph@users.noreply.github.com>
parents:
1198
diff
changeset
|
14 |
* |
| 1514 | 15 |
* You should have received a copy of the GNU Lesser General Public License |
16 |
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
|
1198
ff4b567d51f2
upgrade metadataplayer and add annotation creation
Yves-Marie Haussonne <1218002+ymph@users.noreply.github.com>
parents:
diff
changeset
|
17 |
*/ |
| 1514 | 18 |
/* global module, define, global, require, setTimeout */ |
19 |
// UMD taken from https://github.com/umdjs/umd |
|
20 |
(function(factory, undefined) { |
|
21 |
var root = typeof window !== 'undefined' ? window : global; |
|
22 |
if (typeof define === 'function' && define.amd) { |
|
23 |
// AMD. Register as an anonymous module. |
|
24 |
// istanbul ignore next |
|
25 |
define(['jquery'], factory); |
|
26 |
} else if (typeof module === 'object' && module.exports) { |
|
27 |
// Node/CommonJS |
|
28 |
module.exports = function(root, jQuery) { |
|
29 |
if (jQuery === undefined) { |
|
30 |
// require('jQuery') returns a factory that requires window to |
|
31 |
// build a jQuery instance, we normalize how we use modules |
|
32 |
// that require this pattern but the window provided is a noop |
|
33 |
// if it's defined (how jquery works) |
|
34 |
if (window !== undefined) { |
|
35 |
jQuery = require('jquery'); |
|
36 |
} else { |
|
37 |
jQuery = require('jquery')(root); |
|
38 |
} |
|
39 |
} |
|
40 |
factory(jQuery); |
|
41 |
return jQuery; |
|
42 |
}; |
|
43 |
} else { |
|
44 |
// Browser |
|
45 |
// istanbul ignore next |
|
46 |
factory(root.jQuery); |
|
47 |
} |
|
48 |
})(function($, undefined) { |
|
49 |
var count = 0; |
|
50 |
var splitter_id = null; |
|
51 |
var splitters = []; |
|
52 |
var current_splitter = null; |
|
53 |
var current_splitter_index = null; |
|
54 |
$.fn.split = function(options) { |
|
55 |
var data = this.data('splitter'); |
|
56 |
if (data) { |
|
57 |
return data; |
|
58 |
} |
|
59 |
var panels = []; |
|
60 |
var $splitters = []; |
|
61 |
var panel_1; |
|
62 |
var panel_2; |
|
63 |
var settings = $.extend({ |
|
64 |
limit: 100, |
|
65 |
orientation: 'horizontal', |
|
66 |
position: '50%', |
|
67 |
invisible: false, |
|
68 |
onDragStart: $.noop, |
|
69 |
onDragEnd: $.noop, |
|
70 |
onDrag: $.noop, |
|
71 |
percent: false |
|
72 |
}, options || {}); |
|
73 |
this.settings = settings; |
|
74 |
var cls; |
|
75 |
var children = this.children(); |
|
76 |
if (children.length === 2) { |
|
77 |
if (settings.orientation == 'vertical') { |
|
78 |
panel_1 = children.first().addClass('left_panel'); |
|
79 |
panel_2 = panel_1.next().addClass('right_panel'); |
|
80 |
cls = 'vsplitter'; |
|
81 |
} else if (settings.orientation == 'horizontal') { |
|
82 |
panel_1 = children.first().addClass('top_panel'); |
|
83 |
panel_2 = panel_1.next().addClass('bottom_panel'); |
|
84 |
cls = 'hsplitter'; |
|
85 |
} |
|
86 |
panels = [panel_1, panel_2]; |
|
87 |
} else { |
|
88 |
children.each(function() { |
|
89 |
var panel = $(this); |
|
90 |
if (settings.orientation == 'vertical') { |
|
91 |
panel.addClass('vertical_panel'); |
|
92 |
cls = 'vsplitter'; |
|
93 |
} else { |
|
94 |
panel.addClass('horizontal_panel'); |
|
95 |
cls = 'hsplitter'; |
|
96 |
} |
|
97 |
panels.push(panel); |
|
98 |
}); |
|
99 |
} |
|
100 |
if (settings.invisible) { |
|
101 |
cls += ' splitter-invisible'; |
|
102 |
} |
|
103 |
var width = this.width(); |
|
104 |
var height = this.height(); |
|
105 |
this.addClass('splitter_panel'); |
|
106 |
var id = count++; |
|
107 |
panels.slice(0, -1).forEach(function(panel, i) { |
|
108 |
var splitter = $('<div/>').addClass(cls).on('mouseenter touchstart', function() { |
|
109 |
splitter_id = id; |
|
110 |
current_splitter_index = splitter.index() - i - 1; |
|
111 |
}).on('mouseleave touchend', function() { |
|
112 |
splitter_id = null; |
|
113 |
current_splitter_index = null; |
|
114 |
}).insertAfter(panel); |
|
115 |
$splitters.push(splitter); |
|
116 |
}); |
|
117 |
var position; |
|
118 |
||
119 |
function get_position(position) { |
|
120 |
if (position instanceof Array) { |
|
121 |
return position.map(get_position); |
|
122 |
} |
|
123 |
if (typeof position === 'number') { |
|
124 |
return position; |
|
125 |
} |
|
126 |
if (typeof position === 'string') { |
|
127 |
var match = position.match(/^([0-9\.]+)(px|%)$/); |
|
128 |
if (match) { |
|
129 |
if (match[2] == 'px') { |
|
130 |
return +match[1]; |
|
131 |
} else { |
|
132 |
if (settings.orientation == 'vertical') { |
|
133 |
return (width * +match[1]) / 100; |
|
134 |
} else if (settings.orientation == 'horizontal') { |
|
135 |
return (height * +match[1]) / 100; |
|
136 |
} |
|
137 |
} |
|
138 |
} else { |
|
139 |
//throw position + ' is invalid value'; |
|
140 |
} |
|
141 |
} else { |
|
142 |
//throw 'position have invalid type'; |
|
143 |
} |
|
144 |
} |
|
145 |
||
146 |
function set_limit(limit) { |
|
147 |
if(!isNaN(parseFloat(limit)) && isFinite(limit)){ |
|
148 |
return { |
|
149 |
leftUpper: limit, |
|
150 |
rightBottom: limit |
|
151 |
}; |
|
152 |
} |
|
153 |
return limit; |
|
154 |
} |
|
155 |
||
156 |
var self = $.extend(this, { |
|
157 |
refresh: function() { |
|
158 |
var new_width = this.width(); |
|
159 |
var new_height = this.height(); |
|
160 |
if (width != new_width || height != new_height) { |
|
161 |
width = this.width(); |
|
162 |
height = this.height(); |
|
163 |
self.position(position); |
|
164 |
} |
|
165 |
}, |
|
166 |
option: function(name, value) { |
|
167 |
if (name === 'position') { |
|
168 |
return self.position(value); |
|
169 |
} else if (typeof value === 'undefined') { |
|
170 |
return settings[name]; |
|
171 |
} else { |
|
172 |
settings[name] = value; |
|
173 |
} |
|
174 |
return self; |
|
175 |
}, |
|
176 |
position: (function() { |
|
177 |
function make_sizer(dim_name, pos_name) { |
|
178 |
return function(n, silent) { |
|
179 |
if (n === undefined) { |
|
180 |
return position; |
|
181 |
} else { |
|
182 |
position = get_position(n); |
|
183 |
if (!(position instanceof Array)) { |
|
184 |
position = [position]; |
|
185 |
} |
|
186 |
if (position.length !== panels.length - 1) { |
|
187 |
throw new Error('position array need to equal splitters length'); |
|
188 |
} |
|
189 |
var outer_name = 'outer'; |
|
190 |
outer_name += dim_name[0].toUpperCase() + dim_name.substring(1); |
|
191 |
var dim_px = self.css('visiblity', 'hidden')[dim_name](); |
|
192 |
var pw = 0; |
|
193 |
var sw_sum = 0; |
|
194 |
for (var i = 0; i < position.length; ++i) { |
|
195 |
var splitter = $splitters[i]; |
|
196 |
var panel = panels[i]; |
|
197 |
var pos = position[i]; |
|
198 |
var splitter_dim = splitter[dim_name](); |
|
199 |
var sw2 = splitter_dim/2; |
|
200 |
if (settings.invisible) { |
|
201 |
pw += panel[dim_name](pos)[outer_name](); |
|
202 |
splitter.css(pos_name, pw - (sw2 * (i + 1))); |
|
203 |
} else if (settings.percent) { |
|
204 |
var w1 = (pos - sw2) / dim_px * 100; |
|
205 |
var l1 = (pw + sw_sum) / dim_px * 100; |
|
206 |
panel.css(pos_name, l1 + '%'); |
|
207 |
pw += panel.css(dim_name, w1 + '%')[outer_name](); |
|
208 |
splitter.css(pos_name, (pw + sw_sum) / dim_px * 100 + '%'); |
|
209 |
} else { |
|
210 |
panel.css(pos_name, pw + sw_sum); |
|
211 |
pw += panel.css(dim_name, pos - sw2)[outer_name](); |
|
212 |
splitter.css(pos_name, pw + sw_sum); |
|
213 |
} |
|
214 |
sw_sum += splitter_dim; |
|
215 |
} |
|
216 |
var panel_last = panels[i]; |
|
217 |
if (settings.invisible) { |
|
218 |
panel_last.height(height - pw); |
|
219 |
} else { |
|
220 |
var s_sum = splitter_dim * i; |
|
221 |
var props = {}; |
|
222 |
if (settings.percent) { |
|
223 |
props[dim_name] = (dim_px - pw - sw_sum) / dim_px * 100 + '%'; |
|
224 |
props[pos_name] = (pw + sw_sum) / dim_px * 100 + '%'; |
|
225 |
} else { |
|
226 |
props[dim_name] = dim_px - pw - sw_sum; |
|
227 |
props[pos_name] = pw + sw_sum; |
|
228 |
} |
|
229 |
panel_last.css(props); |
|
230 |
} |
|
231 |
self.css('visiblity', ''); |
|
232 |
} |
|
233 |
if (!silent) { |
|
234 |
self.trigger('splitter.resize'); |
|
235 |
self.find('.splitter_panel').trigger('splitter.resize'); |
|
236 |
} |
|
237 |
return self; |
|
238 |
}; |
|
239 |
} |
|
240 |
if (settings.orientation == 'vertical') { |
|
241 |
return make_sizer('width', 'left'); |
|
242 |
} else if (settings.orientation == 'horizontal') { |
|
243 |
return make_sizer('height', 'top'); |
|
244 |
} else { |
|
245 |
return $.noop; |
|
246 |
} |
|
247 |
})(), |
|
248 |
_splitters: $splitters, |
|
249 |
_panels: panels, |
|
250 |
orientation: settings.orientation, |
|
251 |
limit: set_limit(settings.limit), |
|
252 |
isActive: function() { |
|
253 |
return splitter_id === id; |
|
254 |
}, |
|
255 |
destroy: function() { |
|
256 |
self.removeClass('splitter_panel'); |
|
257 |
if (settings.orientation == 'vertical') { |
|
258 |
panel_1.removeClass('left_panel'); |
|
259 |
panel_2.removeClass('right_panel'); |
|
260 |
} else if (settings.orientation == 'horizontal') { |
|
261 |
panel_1.removeClass('top_panel'); |
|
262 |
panel_2.removeClass('bottom_panel'); |
|
263 |
} |
|
264 |
self.off('splitter.resize'); |
|
265 |
self.trigger('splitter.resize'); |
|
266 |
self.find('.splitter_panel').trigger('splitter.resize'); |
|
267 |
splitters[id] = null; |
|
268 |
count--; |
|
269 |
$splitters.each(function() { |
|
270 |
var splitter = $(this); |
|
271 |
splitter.off('mouseenter'); |
|
272 |
splitter.off('mouseleave'); |
|
273 |
splitter.off('touchstart'); |
|
274 |
splitter.off('touchmove'); |
|
275 |
splitter.off('touchend'); |
|
276 |
splitter.off('touchleave'); |
|
277 |
splitter.off('touchcancel'); |
|
278 |
splitter.remove(); |
|
279 |
}); |
|
280 |
self.removeData('splitter'); |
|
281 |
var not_null = false; |
|
282 |
for (var i=splitters.length; i--;) { |
|
283 |
if (splitters[i] !== null) { |
|
284 |
not_null = true; |
|
285 |
break; |
|
286 |
} |
|
287 |
} |
|
288 |
//remove document events when no splitters |
|
289 |
if (!not_null) { |
|
290 |
$(document.documentElement).off('.splitter'); |
|
291 |
$(window).off('resize.splitter'); |
|
292 |
splitters = []; |
|
293 |
count = 0; |
|
294 |
} |
|
295 |
} |
|
296 |
}); |
|
297 |
self.on('splitter.resize', function(e) { |
|
298 |
var pos = self.position(); |
|
299 |
if (self.orientation == 'vertical' && |
|
300 |
pos > self.width()) { |
|
301 |
pos = self.width() - self.limit.rightBottom-1; |
|
302 |
} else if (self.orientation == 'horizontal' && |
|
303 |
pos > self.height()) { |
|
304 |
pos = self.height() - self.limit.rightBottom-1; |
|
305 |
} |
|
306 |
if (pos < self.limit.leftUpper) { |
|
307 |
pos = self.limit.leftUpper + 1; |
|
308 |
} |
|
309 |
e.stopPropagation(); |
|
310 |
self.position(pos, true); |
|
311 |
}); |
|
312 |
//inital position of splitter |
|
313 |
var pos; |
|
314 |
if (settings.orientation == 'vertical') { |
|
315 |
if (pos > width-settings.limit.rightBottom) { |
|
316 |
pos = width-settings.limit.rightBottom; |
|
317 |
} else { |
|
318 |
pos = get_position(settings.position); |
|
319 |
} |
|
320 |
} else if (settings.orientation == 'horizontal') { |
|
321 |
//position = height/2; |
|
322 |
if (pos > height-settings.limit.rightBottom) { |
|
323 |
pos = height-settings.limit.rightBottom; |
|
324 |
} else { |
|
325 |
pos = get_position(settings.position); |
|
326 |
} |
|
327 |
} |
|
328 |
if (pos < settings.limit.leftUpper) { |
|
329 |
pos = settings.limit.leftUpper; |
|
330 |
} |
|
331 |
if (panels.length > 2 && !(pos instanceof Array && pos.length == $splitters.length)) { |
|
332 |
throw new Error('position need to be array equal to $splitters length'); |
|
333 |
} |
|
334 |
self.position(pos, true); |
|
335 |
var parent = this.closest('.splitter_panel'); |
|
336 |
if (parent.length) { |
|
337 |
this.height(parent.height()); |
|
338 |
} |
|
339 |
function calc_pos(pos, x) { |
|
340 |
var new_pos = pos.slice(0, current_splitter.index); |
|
341 |
var p; |
|
342 |
if (new_pos.length) { |
|
343 |
p = x - new_pos.reduce(function(a, b) { |
|
344 |
return a + b; |
|
345 |
}); |
|
346 |
} else { |
|
347 |
p = x; |
|
348 |
} |
|
349 |
var diff = pos[current_splitter.index] - p; |
|
350 |
new_pos.push(p); |
|
351 |
if (current_splitter.index < pos.length - 1) { |
|
352 |
var rest = pos.slice(current_splitter.index + 1); |
|
353 |
rest[0] += diff; |
|
354 |
new_pos = new_pos.concat(rest); |
|
355 |
} |
|
356 |
return new_pos; |
|
357 |
} |
|
358 |
// ------------------------------------------------------------------------------------ |
|
359 |
// bind events to document if no splitters |
|
360 |
if (splitters.filter(Boolean).length === 0) { |
|
361 |
$(window).on('resize.splitter', function() { |
|
362 |
$.each(splitters, function(i, splitter) { |
|
363 |
if (splitter) { |
|
364 |
splitter.refresh(); |
|
365 |
} |
|
366 |
}); |
|
367 |
}); |
|
368 |
$(document.documentElement).on('mousedown.splitter touchstart.splitter', function(e) { |
|
369 |
if (splitter_id !== null) { |
|
370 |
e.preventDefault(); |
|
371 |
current_splitter = { |
|
372 |
node: splitters[splitter_id], |
|
373 |
index: current_splitter_index |
|
374 |
}; |
|
375 |
// ignore right click |
|
376 |
if (e.originalEvent.button !== 2) { |
|
377 |
setTimeout(function() { |
|
378 |
$('<div class="splitterMask"></div>'). |
|
379 |
css('cursor', current_splitter.node.children().eq(1).css('cursor')). |
|
380 |
insertAfter(current_splitter.node); |
|
381 |
}); |
|
382 |
} |
|
383 |
current_splitter.node.settings.onDragStart(e); |
|
384 |
} |
|
385 |
}).on('mouseup.splitter touchend.splitter touchleave.splitter touchcancel.splitter', function(e) { |
|
386 |
if (current_splitter) { |
|
387 |
setTimeout(function() { |
|
388 |
$('.splitterMask').remove(); |
|
389 |
}); |
|
390 |
current_splitter.node.settings.onDragEnd(e); |
|
391 |
current_splitter = null; |
|
392 |
} |
|
393 |
}).on('mousemove.splitter touchmove.splitter', function(e) { |
|
394 |
var pos; |
|
395 |
if (current_splitter !== null) { |
|
396 |
var node = current_splitter.node; |
|
397 |
var leftUpperLimit = node.limit.leftUpper; |
|
398 |
var rightBottomLimit = node.limit.rightBottom; |
|
399 |
var offset = node.offset(); |
|
400 |
if (node.orientation == 'vertical') { |
|
401 |
var pageX = e.pageX; |
|
402 |
if(e.originalEvent && e.originalEvent.changedTouches){ |
|
403 |
pageX = e.originalEvent.changedTouches[0].pageX; |
|
404 |
} |
|
405 |
var x = pageX - offset.left; |
|
406 |
if (x <= node.limit.leftUpper) { |
|
407 |
x = node.limit.leftUpper + 1; |
|
408 |
} else if (x >= node.width() - rightBottomLimit) { |
|
409 |
x = node.width() - rightBottomLimit - 1; |
|
410 |
} |
|
411 |
pos = node.position(); |
|
412 |
if (pos.length > 1) { |
|
413 |
node.position(calc_pos(pos, x), true); |
|
414 |
} else if (x > node.limit.leftUpper && |
|
415 |
x < node.width()-rightBottomLimit) { |
|
416 |
node.position(x, true); |
|
417 |
node.trigger('splitter.resize'); |
|
418 |
node.find('.splitter_panel'). |
|
419 |
trigger('splitter.resize'); |
|
420 |
//e.preventDefault(); |
|
421 |
} |
|
422 |
} else if (node.orientation == 'horizontal') { |
|
423 |
var pageY = e.pageY; |
|
424 |
if(e.originalEvent && e.originalEvent.changedTouches){ |
|
425 |
pageY = e.originalEvent.changedTouches[0].pageY; |
|
426 |
} |
|
427 |
var y = pageY-offset.top; |
|
428 |
if (y <= node.limit.leftUpper) { |
|
429 |
y = node.limit.leftUpper + 1; |
|
430 |
} else if (y >= node.height() - rightBottomLimit) { |
|
431 |
y = node.height() - rightBottomLimit - 1; |
|
432 |
} |
|
433 |
pos = node.position(); |
|
434 |
if (pos.length > 1) { |
|
435 |
node.position(calc_pos(pos, y), true); |
|
436 |
} else if (y > node.limit.leftUpper && |
|
437 |
y < node.height()-rightBottomLimit) { |
|
438 |
node.position(y, true); |
|
439 |
node.trigger('splitter.resize'); |
|
440 |
node.find('.splitter_panel'). |
|
441 |
trigger('splitter.resize'); |
|
442 |
//e.preventDefault(); |
|
443 |
} |
|
444 |
} |
|
445 |
node.settings.onDrag(e); |
|
446 |
} |
|
447 |
});//*/ |
|
448 |
} |
|
449 |
splitters[id] = self; |
|
450 |
self.data('splitter', self); |
|
451 |
return self; |
|
452 |
}; |
|
453 |
}); |