|
1
|
/**
|
|
2
|
* Expected dom structure:
|
|
3
|
* <li class="dynabox">
|
|
4
|
<div class="dynabox_label"><span class="label">Label Text</span>
|
|
5
|
<ul class="dynabox_content" title="{url-to-content}"><li> ...... </li></ul>
|
|
6
|
</li>
|
|
7
|
*/
|
|
8
|
|
|
9
|
// see also https://github.com/geetarista/jquery-plugin-template/blob/master/jquery.plugin-template.js
|
|
10
|
|
|
11
|
// the semi-colon before function invocation is a safety net against concatenated
|
|
12
|
// scripts and/or other plugins which may not be closed properly.
|
|
13
|
;(function($) {
|
|
14
|
|
|
15
|
// Default options for the plugin as a simple object
|
|
16
|
var defaults = {
|
|
17
|
open_callback: function(){},
|
|
18
|
close_callback: function(){}
|
|
19
|
};
|
|
20
|
|
|
21
|
this.dynabox = function(dynabox_id, options) {
|
|
22
|
|
|
23
|
// Merge the options given by the user with the defaults
|
|
24
|
this.options = $.extend({}, defaults, options);
|
|
25
|
|
|
26
|
$('.dynabox-' + dynabox_id + ' .label').click(function(event) {
|
|
27
|
loadContent(event);
|
|
28
|
});
|
|
29
|
|
|
30
|
$('.dynabox-' + dynabox_id).find('.dynabox-' + dynabox_id + '-content').click(function(event){event.stopPropagation();});
|
|
31
|
|
|
32
|
//$('li.dynabox> span').click(function(event){event.stopPropagation();});
|
|
33
|
|
|
34
|
var loadContent = function(event) {
|
|
35
|
event.preventDefault(); //Cancel the default action (navigation) of the click.
|
|
36
|
var dynabox_content = $(event.target).parent('.dynabox-' + dynabox_id).find('.dynabox-' + dynabox_id + '-content');
|
|
37
|
|
|
38
|
if(dynabox_content.find('.content').length > 0) {
|
|
39
|
// content has already been loaded
|
|
40
|
dynabox_content.slideToggle("fast", function(){
|
|
41
|
toggleState(dynabox_content);
|
|
42
|
}
|
|
43
|
);
|
|
44
|
} else {
|
|
45
|
// no content so far, so load it
|
|
46
|
var url = dynabox_content.attr('title');
|
|
47
|
if(url !== undefined && url.length > 1){
|
|
48
|
dynabox_content.removeAttr('title').find('.loading').slideDown('fast',
|
|
49
|
function(){
|
|
50
|
toggleState(dynabox_content);
|
|
51
|
}
|
|
52
|
);
|
|
53
|
$.get(url, function(html){
|
|
54
|
dynabox_content.find('.loading').remove().end().append('<div class="content">' + html + '</div>').triggerElementsAdded();
|
|
55
|
});
|
|
56
|
}
|
|
57
|
}
|
|
58
|
|
|
59
|
|
|
60
|
};
|
|
61
|
|
|
62
|
/**
|
|
63
|
* toggles the closed/open state of the supplied dynabox
|
|
64
|
*/
|
|
65
|
var toggleState = function(dynabox_content) {
|
|
66
|
if (dynabox_content.css('display') == 'none'){
|
|
67
|
options.close_callback();
|
|
68
|
} else {
|
|
69
|
options.open_callback();
|
|
70
|
}
|
|
71
|
};
|
|
72
|
};
|
|
73
|
|
|
74
|
|
|
75
|
})(jQuery);
|
|
76
|
|