|
1
|
/**
|
|
2
|
* The dynabox supports
|
|
3
|
* Expected dom structure, the element tags are variable:
|
|
4
|
*
|
|
5
|
<li id="dynabox_${dynabox_id}">
|
|
6
|
<div class="dynabox_label"><a class="label" href="${url-to-content}">Label Text</span>
|
|
7
|
<ul id="dynabox_${dynabox_id}_content" ><li> ...... </li></ul>
|
|
8
|
</li>
|
|
9
|
*/
|
|
10
|
|
|
11
|
// see also https://github.com/geetarista/jquery-plugin-template/blob/master/jquery.plugin-template.js
|
|
12
|
|
|
13
|
// the semi-colon before function invocation is a safety net against concatenated
|
|
14
|
// scripts and/or other plugins which may not be closed properly.
|
|
15
|
;(function($) {
|
|
16
|
|
|
17
|
// Default options for the plugin as a simple object
|
|
18
|
var defaults = {
|
|
19
|
open_callback: function(){},
|
|
20
|
close_callback: function(){},
|
|
21
|
content_container_selector: null // optional selector for a container into which the dynabox content should be placed
|
|
22
|
};
|
|
23
|
|
|
24
|
this.dynabox = function(dynabox_id, options) {
|
|
25
|
|
|
26
|
// Merge the options given by the user with the defaults
|
|
27
|
this.options = $.extend({}, defaults, options);
|
|
28
|
|
|
29
|
// get hold of the dom elements and attributed needed later on
|
|
30
|
var dynabox_container = $('#dynabox-' + dynabox_id);
|
|
31
|
var dynabox_trigger = dynabox_container.children('.label');
|
|
32
|
var dynabox_content = $('#dynabox-' + dynabox_id + '-content');
|
|
33
|
|
|
34
|
var url = dynabox_trigger.attr('href');
|
|
35
|
|
|
36
|
if(options.content_container_selector != null) {
|
|
37
|
// move the content into the element specified by the
|
|
38
|
// optional 'content_container_selector'
|
|
39
|
dynabox_content.detach().appendTo(options.content_container_selector);
|
|
40
|
}
|
|
41
|
|
|
42
|
// register events
|
|
43
|
dynabox_trigger.click(function(event) {
|
|
44
|
loadContent(event);
|
|
45
|
}).bind("contextmenu",function(e){
|
|
46
|
e.preventDefault(); // disable context menu to avoid opening in new tab or window
|
|
47
|
});
|
|
48
|
|
|
49
|
dynabox_content.click(function(event){event.stopPropagation();});
|
|
50
|
|
|
51
|
// ----- private functions ------ //
|
|
52
|
|
|
53
|
var loadContent = function(event) {
|
|
54
|
event.preventDefault(); //Cancel the default action (navigation) of the click.
|
|
55
|
|
|
56
|
if(dynabox_content.find('.content').length > 0) {
|
|
57
|
// content has already been loaded
|
|
58
|
dynabox_content.slideToggle("fast", function(){
|
|
59
|
toggleState(dynabox_content);
|
|
60
|
}
|
|
61
|
);
|
|
62
|
} else {
|
|
63
|
// no content so far, so load it
|
|
64
|
if(url !== undefined && url.length > 1){
|
|
65
|
dynabox_content.removeAttr('title').find('.loading').slideDown('fast',
|
|
66
|
function(){
|
|
67
|
toggleState(dynabox_content);
|
|
68
|
}
|
|
69
|
);
|
|
70
|
$.get(url, function(html){
|
|
71
|
dynabox_content.find('.loading').remove();
|
|
72
|
dynabox_content.find('.dynabox-content-inner').html('<div class="content">' + html + '</div>').triggerElementsAdded();
|
|
73
|
});
|
|
74
|
}
|
|
75
|
}
|
|
76
|
|
|
77
|
|
|
78
|
};
|
|
79
|
|
|
80
|
/**
|
|
81
|
* toggles the closed/open state of the dynabox
|
|
82
|
*/
|
|
83
|
var toggleState = function(dynabox_content) {
|
|
84
|
if (dynabox_content.css('display') == 'none'){
|
|
85
|
options.close_callback();
|
|
86
|
} else {
|
|
87
|
options.open_callback();
|
|
88
|
}
|
|
89
|
};
|
|
90
|
};
|
|
91
|
|
|
92
|
|
|
93
|
})(jQuery);
|
|
94
|
|