|
1
|
/*********************************************************
|
|
2
|
* taxonomic_children plugin
|
|
3
|
*********************************************************
|
|
4
|
*
|
|
5
|
* Expected dom structure:
|
|
6
|
* <span data-cdm-taxon-uuid="{taxon-uuid}"> ... </span>
|
|
7
|
*
|
|
8
|
* based on https://github.com/johndugan/jquery-plugin-boilerplate
|
|
9
|
*/
|
|
10
|
|
|
11
|
/*
|
|
12
|
The semi-colon before the function invocation is a safety net against
|
|
13
|
concatenated scripts and/or other plugins which may not be closed properly.
|
|
14
|
|
|
15
|
"undefined" is used because the undefined global variable in ECMAScript 3
|
|
16
|
is mutable (ie. it can be changed by someone else). Because we don't pass a
|
|
17
|
value to undefined when the anonymyous function is invoked, we ensure that
|
|
18
|
undefined is truly undefined. Note, in ECMAScript 5 undefined can no
|
|
19
|
longer be modified.
|
|
20
|
|
|
21
|
"window" and "document" are passed as local variables rather than global.
|
|
22
|
This (slightly) quickens the resolution process.
|
|
23
|
*/
|
|
24
|
|
|
25
|
;(function ( $, window, document, undefined ) {
|
|
26
|
|
|
27
|
/*
|
|
28
|
Store the name of the plugin in the "pluginName" variable. This
|
|
29
|
variable is used in the "Plugin" constructor below, as well as the
|
|
30
|
plugin wrapper to construct the key for the "$.data" method.
|
|
31
|
|
|
32
|
More: http://api.jquery.com/jquery.data/
|
|
33
|
*/
|
|
34
|
var pluginName = 'taxonomic_children';
|
|
35
|
|
|
36
|
/*
|
|
37
|
The "Plugin" constructor, builds a new instance of the plugin for the
|
|
38
|
DOM node(s) that the plugin is called on. For example,
|
|
39
|
"$('h1').pluginName();" creates a new instance of pluginName for
|
|
40
|
all h1's.
|
|
41
|
*/
|
|
42
|
// Create the plugin constructor
|
|
43
|
function Plugin ( element, options ) {
|
|
44
|
/*
|
|
45
|
Provide local access to the DOM node(s) that called the plugin,
|
|
46
|
as well local access to the plugin name and default options.
|
|
47
|
*/
|
|
48
|
this.element = element;
|
|
49
|
this._name = pluginName;
|
|
50
|
this._defaults = $.fn[pluginName].defaults;
|
|
51
|
/*
|
|
52
|
The "$.extend" method merges the contents of two or more objects,
|
|
53
|
and stores the result in the first object. The first object is
|
|
54
|
empty so that we don't alter the default options for future
|
|
55
|
instances of the plugin.
|
|
56
|
|
|
57
|
More: http://api.jquery.com/jquery.extend/
|
|
58
|
*/
|
|
59
|
this.options = $.extend( {}, this._defaults, options );
|
|
60
|
|
|
61
|
// firebug console stub (avoids errors if firebug is not active)
|
|
62
|
if (typeof console === "undefined") {
|
|
63
|
console = {
|
|
64
|
log: function () {
|
|
65
|
}
|
|
66
|
};
|
|
67
|
}
|
|
68
|
|
|
69
|
/*
|
|
70
|
The "init" method is the starting point for all plugin logic.
|
|
71
|
Calling the init method here in the "Plugin" constructor function
|
|
72
|
allows us to store all methods (including the init method) in the
|
|
73
|
plugin's prototype. Storing methods required by the plugin in its
|
|
74
|
prototype lowers the memory footprint, as each instance of the
|
|
75
|
plugin does not need to duplicate all of the same methods. Rather,
|
|
76
|
each instance can inherit the methods from the constructor
|
|
77
|
function's prototype.
|
|
78
|
*/
|
|
79
|
this.init();
|
|
80
|
}
|
|
81
|
|
|
82
|
// Avoid Plugin.prototype conflicts
|
|
83
|
$.extend(Plugin.prototype, {
|
|
84
|
|
|
85
|
// Initialization logic
|
|
86
|
init: function () {
|
|
87
|
/*
|
|
88
|
Create additional methods below and call them via
|
|
89
|
"this.myFunction(arg1, arg2)", ie: "this.buildCache();".
|
|
90
|
|
|
91
|
Note, you can access the DOM node(s), plugin name, default
|
|
92
|
plugin options and custom plugin options for a each instance
|
|
93
|
of the plugin by using the variables "this.element",
|
|
94
|
"this._name", "this._defaults" and "this.options" created in
|
|
95
|
the "Plugin" constructor function (as shown in the buildCache
|
|
96
|
method below).
|
|
97
|
*/
|
|
98
|
this.isDataLoaded = false;
|
|
99
|
this.buildCache();
|
|
100
|
this.bindEvents();
|
|
101
|
},
|
|
102
|
|
|
103
|
// Remove plugin instance completely
|
|
104
|
destroy: function() {
|
|
105
|
/*
|
|
106
|
The destroy method unbinds all events for the specific instance
|
|
107
|
of the plugin, then removes all plugin data that was stored in
|
|
108
|
the plugin instance using jQuery's .removeData method.
|
|
109
|
|
|
110
|
Since we store data for each instance of the plugin in its
|
|
111
|
instantiating element using the $.data method (as explained
|
|
112
|
in the plugin wrapper below), we can call methods directly on
|
|
113
|
the instance outside of the plugin initalization, ie:
|
|
114
|
$('selector').data('plugin_myPluginName').someOtherFunction();
|
|
115
|
|
|
116
|
Consequently, the destroy method can be called using:
|
|
117
|
$('selector').data('plugin_myPluginName').destroy();
|
|
118
|
*/
|
|
119
|
this.unbindEvents();
|
|
120
|
this.$element.removeData();
|
|
121
|
},
|
|
122
|
|
|
123
|
// Cache DOM nodes for performance
|
|
124
|
buildCache: function () {
|
|
125
|
/*
|
|
126
|
Create variable(s) that can be accessed by other plugin
|
|
127
|
functions. For example, "this.$element = $(this.element);"
|
|
128
|
will cache a jQuery reference to the elementthat initialized
|
|
129
|
the plugin. Cached variables can then be used in other methods.
|
|
130
|
*/
|
|
131
|
|
|
132
|
this.$element = $(this.element);
|
|
133
|
|
|
134
|
this.taxonUuid = this.$element.attr('data-cdm-taxon-uuid');
|
|
135
|
this.rankLimitUuid = this.$element.attr('data-rank-limit-uuid');
|
|
136
|
if(this.rankLimitUuid == '0'){
|
|
137
|
// '0' is used in the cdm_dataportal settings as value for 'no rank limit'
|
|
138
|
this.rankLimitUuid = undefined;
|
|
139
|
}
|
|
140
|
if(this.$element.hasClass('classification-chooser')){
|
|
141
|
this.classificationChooser = true;
|
|
142
|
}
|
|
143
|
this.destinationUri = this.$element.attr('data-destination-uri');
|
|
144
|
|
|
145
|
this.classificationMode = this.$element.attr('data-cdm-classification-mode');
|
|
146
|
|
|
147
|
if (this.$element.attr('data-cdm-align-with') == 'prev') {
|
|
148
|
var prev = this.$element.prev();
|
|
149
|
this.alignOffset = {
|
|
150
|
'padding': prev.width(),
|
|
151
|
'left' : prev.width()
|
|
152
|
}
|
|
153
|
} else {
|
|
154
|
this.alignOffset = {
|
|
155
|
'padding': this.$element.width(),
|
|
156
|
'left' : '0'
|
|
157
|
}
|
|
158
|
}
|
|
159
|
|
|
160
|
// Create new elements
|
|
161
|
this.container = $('<div class="' + this._name + ' box-shadow-b-5-1"></div>')
|
|
162
|
.css('background-color', 'rgba(255,255,255,0.7)')
|
|
163
|
.css('position', 'absolute')
|
|
164
|
.css('overflow', 'auto');
|
|
165
|
this.children = $('<div class="children"></div>');
|
|
166
|
|
|
167
|
this.loading = $('<i class="fa-spinner fa-2x" />')
|
|
168
|
.css('position', 'absolute')
|
|
169
|
.hide();
|
|
170
|
|
|
171
|
this.container.append(this.children).append(this.loading);
|
|
172
|
},
|
|
173
|
|
|
174
|
// Bind events that trigger methods
|
|
175
|
bindEvents: function() {
|
|
176
|
var plugin = this;
|
|
177
|
|
|
178
|
/*
|
|
179
|
Bind event(s) to handlers that trigger other functions, ie:
|
|
180
|
"plugin.$element.on('click', function() {});". Note the use of
|
|
181
|
the cached variable we created in the buildCache method.
|
|
182
|
|
|
183
|
All events are namespaced, ie:
|
|
184
|
".on('click'+'.'+this._name', function() {});".
|
|
185
|
This allows us to unbind plugin-specific events using the
|
|
186
|
unbindEvents method below.
|
|
187
|
|
|
188
|
this works at earliest with v1.7, with 1.4.4 we need to use bind:
|
|
189
|
*/
|
|
190
|
plugin.$element.bind('mouseenter', function() { // 'mouseenter' or 'click' are appropriate candidates
|
|
191
|
plugin.showChildren.call(plugin);
|
|
192
|
});
|
|
193
|
|
|
194
|
plugin.$element.bind('click', function (event){
|
|
195
|
if(event.target == this){
|
|
196
|
// prevents eg from executing clicks if the
|
|
197
|
// trigger element is an <a href=""> element
|
|
198
|
event.preventDefault();
|
|
199
|
}
|
|
200
|
event.stopPropagation();
|
|
201
|
plugin.showChildren.call(plugin);
|
|
202
|
});
|
|
203
|
|
|
204
|
plugin.container.mouseleave(function (){
|
|
205
|
plugin.hideChildren.call(plugin);
|
|
206
|
});
|
|
207
|
|
|
208
|
$(document).click(function (){
|
|
209
|
plugin.hideChildren.call(plugin);
|
|
210
|
});
|
|
211
|
|
|
212
|
/*
|
|
213
|
plugin.$element.children('i.fa').hover(
|
|
214
|
function(){
|
|
215
|
this.addClass(this.options.hoverClass);
|
|
216
|
},
|
|
217
|
function(){
|
|
218
|
this.removeClass(this.options.hoverClass);
|
|
219
|
}
|
|
220
|
);
|
|
221
|
*/
|
|
222
|
},
|
|
223
|
|
|
224
|
// Unbind events that trigger methods
|
|
225
|
unbindEvents: function() {
|
|
226
|
/*
|
|
227
|
Unbind all events in our plugin's namespace that are attached
|
|
228
|
to "this.$element".
|
|
229
|
|
|
230
|
this works at earliest with v1.7, with 1.4.4 we need to unbind without
|
|
231
|
namespace specificity
|
|
232
|
*/
|
|
233
|
this.$element.unbind('click');
|
|
234
|
// TODO complete this ...
|
|
235
|
},
|
|
236
|
|
|
237
|
log: function (msg) {
|
|
238
|
console.log('[' + this._name + '] ' + msg);
|
|
239
|
},
|
|
240
|
|
|
241
|
showChildren: function(){
|
|
242
|
|
|
243
|
var plugin = this;
|
|
244
|
|
|
245
|
var trigger_position = this.$element.position();
|
|
246
|
|
|
247
|
this.log('trigger_position: ' + trigger_position.top + ', ' + trigger_position.left);
|
|
248
|
|
|
249
|
// Unused; TODO when re-enabling this needs to be fixed
|
|
250
|
// when using rotate, in IE and edge the child element are also rotated, need to reset child elements.
|
|
251
|
// this.$element.addClass(this.options.activeClass);
|
|
252
|
|
|
253
|
this.$element.append(this.container);
|
|
254
|
|
|
255
|
this.baseHeight = this.$element.parent().height();
|
|
256
|
this.lineHeight = this.$element.parent().css('line-height').replace('px', ''); // TODO use regex fur replace
|
|
257
|
|
|
258
|
this.log('baseHeight: ' + this.baseHeight);
|
|
259
|
this.log('lineHeight: ' + this.lineHeight);
|
|
260
|
|
|
261
|
this.offset_container_top = this.lineHeight - trigger_position.top + 1;
|
|
262
|
|
|
263
|
this.container
|
|
264
|
.css('top', - this.offset_container_top + 'px')
|
|
265
|
.css('left', (trigger_position.left - this.alignOffset.left) + 'px')
|
|
266
|
.css('padding-left', this.alignOffset.padding + 'px')
|
|
267
|
.css('padding-right', this.alignOffset.padding + 'px')
|
|
268
|
.css('z-index', 10)
|
|
269
|
.show();
|
|
270
|
|
|
271
|
if(!this.isDataLoaded){
|
|
272
|
$.get(this.requestURI(undefined, undefined), function(html){
|
|
273
|
plugin.handleDataLoaded(html);
|
|
274
|
});
|
|
275
|
} else {
|
|
276
|
this.adjustHeight();
|
|
277
|
this.scrollToSelected();
|
|
278
|
}
|
|
279
|
},
|
|
280
|
|
|
281
|
hideChildren: function(){
|
|
282
|
//return; // uncomment for debugging
|
|
283
|
this.container
|
|
284
|
.detach();
|
|
285
|
},
|
|
286
|
|
|
287
|
handleDataLoaded: function(html){
|
|
288
|
|
|
289
|
this.loading.hide();
|
|
290
|
this.isDataLoaded = true;
|
|
291
|
var listContainer = $(html);
|
|
292
|
if(listContainer[0].tagName != 'UL'){
|
|
293
|
// unwrap from potential enclosing div, this is
|
|
294
|
// necessary in case of compose_classification_selector
|
|
295
|
listContainer = listContainer.children('ul');
|
|
296
|
}
|
|
297
|
this.children.append(listContainer);
|
|
298
|
this.itemsCount = listContainer.children().length;
|
|
299
|
|
|
300
|
this.adjustHeight();
|
|
301
|
this.scrollToSelected();
|
|
302
|
},
|
|
303
|
|
|
304
|
calculateViewPortRows: function() {
|
|
305
|
|
|
306
|
var max;
|
|
307
|
if(this.options.viewPortRows.max) {
|
|
308
|
max = this.options.viewPortRows.max;
|
|
309
|
} else {
|
|
310
|
// no absolute maximum defined: calculate the current max based on the window viewport
|
|
311
|
max = Math.floor( ($(window).height() - this.element.getBoundingClientRect().top) / this.lineHeight) - 2;
|
|
312
|
this.log('max: ' + max);
|
|
313
|
}
|
|
314
|
var rows = Math.max(this.itemsCount, this.options.viewPortRows.min);
|
|
315
|
rows = Math.min(rows, max);
|
|
316
|
this.log('rows: ' + max);
|
|
317
|
return rows;
|
|
318
|
},
|
|
319
|
|
|
320
|
adjustHeight: function(){
|
|
321
|
|
|
322
|
var viewPortRows = this.calculateViewPortRows(this.itemsCount); //(itemsCount > this.options.viewPortRows.min ? this.options.viewPortRows.max : this.options.viewPortRows.min);
|
|
323
|
this.log('itemsCount: ' + this.itemsCount + ' => viewPortRows: ' + viewPortRows);
|
|
324
|
|
|
325
|
this.container.css('height', viewPortRows * this.lineHeight + 'px');
|
|
326
|
this.children
|
|
327
|
.css('padding-top', this.lineHeight + 'px') // one row above current
|
|
328
|
.css('padding-bottom', (viewPortRows - 2) * this.lineHeight + 'px'); // subtract 2 lines (current + one above)
|
|
329
|
},
|
|
330
|
|
|
331
|
scrollToSelected: function () {
|
|
332
|
|
|
333
|
var scrollTarget = this.children.find(".focused");
|
|
334
|
if(scrollTarget){
|
|
335
|
var position = scrollTarget.position();
|
|
336
|
if(position == undefined){
|
|
337
|
// fix for IE >= 9
|
|
338
|
position = scrollTarget.offset();
|
|
339
|
}
|
|
340
|
var scroll_target_offset_top = position.top;
|
|
341
|
this.log("scroll_target_offset_top: " + scroll_target_offset_top + ", offset_container_top: " + this.offset_container_top);
|
|
342
|
this.container.scrollTop(scroll_target_offset_top - this.lineHeight + 1); // +1 yields a better result
|
|
343
|
}
|
|
344
|
},
|
|
345
|
|
|
346
|
requestURI: function(pageIndex, pageSize){
|
|
347
|
|
|
348
|
var contentRequest;
|
|
349
|
var renderFunction;
|
|
350
|
var proxyRequestQuery= '';
|
|
351
|
|
|
352
|
// pageIndex, pageSize are not yet used, prepared for future though
|
|
353
|
if(!pageIndex){
|
|
354
|
pageIndex = 0;
|
|
355
|
}
|
|
356
|
if(!pageSize) {
|
|
357
|
pageSize = 100;
|
|
358
|
}
|
|
359
|
|
|
360
|
if(this.classificationChooser){
|
|
361
|
renderFunction = this.options.renderFunction.classifications + '?destination=' + this.destinationUri;
|
|
362
|
contentRequest = 'NULL'; // using the plain compose function which does not require any data to be passes as parameter
|
|
363
|
|
|
364
|
} else {
|
|
365
|
renderFunction = this.options.renderFunction.taxonNodes;
|
|
366
|
proxyRequestQuery = '?currentTaxon=' + this.taxonUuid;
|
|
367
|
if(this.taxonUuid) {
|
|
368
|
if(this.classificationMode == 'siblings') {
|
|
369
|
contentRequest =
|
|
370
|
this.options.cdmWebappBaseUri
|
|
371
|
+ this.options.cdmWebappRequests.taxonSiblings
|
|
372
|
.replace('{classificationUuid}', this.options.classificationUuid)
|
|
373
|
.replace('{taxonUuid}', this.taxonUuid);
|
|
374
|
} else {
|
|
375
|
// default mode is 'children'
|
|
376
|
contentRequest =
|
|
377
|
this.options.cdmWebappBaseUri
|
|
378
|
+ this.options.cdmWebappRequests.taxonChildren
|
|
379
|
.replace('{classificationUuid}', this.options.classificationUuid)
|
|
380
|
.replace('{taxonUuid}', this.taxonUuid);
|
|
381
|
}
|
|
382
|
} else if(this.rankLimitUuid){
|
|
383
|
contentRequest =
|
|
384
|
this.options.cdmWebappBaseUri
|
|
385
|
+ this.options.cdmWebappRequests.childNodesAt
|
|
386
|
.replace('{classificationUuid}', this.options.classificationUuid)
|
|
387
|
.replace('{rankUuid}', this.rankLimitUuid);
|
|
388
|
} else {
|
|
389
|
contentRequest =
|
|
390
|
this.options.cdmWebappBaseUri
|
|
391
|
+ this.options.cdmWebappRequests.classificationRoot
|
|
392
|
.replace('{classificationUuid}', this.options.classificationUuid);
|
|
393
|
}
|
|
394
|
}
|
|
395
|
|
|
396
|
|
|
397
|
|
|
398
|
this.log("contentRequest: " + contentRequest);
|
|
399
|
|
|
400
|
var proxyRequest = this.options.proxyRequest
|
|
401
|
.replace('{contentRequest}', encodeURIComponent(encodeURIComponent(contentRequest)))
|
|
402
|
.replace('{renderFunction}', renderFunction);
|
|
403
|
|
|
404
|
var request = this.options.proxyBaseUri + '/' + proxyRequest + proxyRequestQuery;
|
|
405
|
this.log("finalRequest: " + request);
|
|
406
|
|
|
407
|
return request;
|
|
408
|
}
|
|
409
|
|
|
410
|
});
|
|
411
|
|
|
412
|
/*
|
|
413
|
Create a lightweight plugin wrapper around the "Plugin" constructor,
|
|
414
|
preventing against multiple instantiations.
|
|
415
|
|
|
416
|
More: http://learn.jquery.com/plugins/basic-plugin-creation/
|
|
417
|
*/
|
|
418
|
$.fn[pluginName] = function ( options ) {
|
|
419
|
this.each(function() {
|
|
420
|
if ( !$.data( this, "plugin_" + pluginName ) ) {
|
|
421
|
/*
|
|
422
|
Use "$.data" to save each instance of the plugin in case
|
|
423
|
the user wants to modify it. Using "$.data" in this way
|
|
424
|
ensures the data is removed when the DOM element(s) are
|
|
425
|
removed via jQuery methods, as well as when the userleaves
|
|
426
|
the page. It's a smart way to prevent memory leaks.
|
|
427
|
|
|
428
|
More: http://api.jquery.com/jquery.data/
|
|
429
|
*/
|
|
430
|
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
|
|
431
|
}
|
|
432
|
});
|
|
433
|
/*
|
|
434
|
"return this;" returns the original jQuery object. This allows
|
|
435
|
additional jQuery methods to be chained.
|
|
436
|
*/
|
|
437
|
return this;
|
|
438
|
};
|
|
439
|
|
|
440
|
|
|
441
|
$.fn[pluginName].defaults = {
|
|
442
|
hoverClass: undefined, // unused
|
|
443
|
activeClass: undefined, // unused
|
|
444
|
/**
|
|
445
|
* uuid of the current classification - required
|
|
446
|
*/
|
|
447
|
classificationUuid: undefined,
|
|
448
|
/**
|
|
449
|
* uuid of the current taxon - required
|
|
450
|
*/
|
|
451
|
taxonUuid: undefined,
|
|
452
|
cdmWebappBaseUri: undefined,
|
|
453
|
proxyBaseUri: undefined,
|
|
454
|
cdmWebappRequests: {
|
|
455
|
taxonChildren: "portal/classification/{classificationUuid}/childNodesOf/{taxonUuid}",
|
|
456
|
taxonSiblings: "portal/classification/{classificationUuid}/siblingsOf/{taxonUuid}",
|
|
457
|
childNodesAt: "portal/classification/{classificationUuid}/childNodesAt/{rankUuid}.json",
|
|
458
|
classificationRoot: "portal/classification/{classificationUuid}/childNodes.json"
|
|
459
|
},
|
|
460
|
proxyRequest: "cdm_api/proxy/{contentRequest}/{renderFunction}",
|
|
461
|
renderFunction: {
|
|
462
|
taxonNodes: "cdm_taxontree",
|
|
463
|
classifications: "classification_selector"
|
|
464
|
},
|
|
465
|
// viewPortRows: if max is 'undefined' the height will be adapted to the window viewport
|
|
466
|
viewPortRows: {min: 3, max: undefined}
|
|
467
|
};
|
|
468
|
|
|
469
|
})( jQuery, window, document );
|