https://kultur-leipzigerraum.de/event/media/js/dropdowntree.js

1/*    
2@licstart  The following is the entire license notice for the 
3JavaScript code in this page.
4
5Copyright (C) 2016  Joseph Safwat Khella
6
7The JavaScript code in this page is free software: you can
8redistribute it and/or modify it under the terms of the GNU
9General Public License (GNU GPL) as published by the Free Software
10Foundation, either version 3 of the License, or (at your option)
11any later version.  The code is distributed WITHOUT ANY WARRANTY;
12without even the implied warranty of MERCHANTABILITY or FITNESS
13FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
14
15As additional permission under GNU GPL version 3 section 7, you
16may distribute non-source (e.g., minimized or compacted) forms of
17that code without the copy of the GNU GPL normally required by
18section 4, provided you include this license notice and a URL
19through which recipients can access the Corresponding Source.   
20
21
22@licend  The above is the entire license notice
23for the JavaScript code in this page.
24*/
25
26var dropDownOptions = {
27    title : "Dropdown",
28    data : [],
29    closedArrow : '<i class="fa fa-caret-right" aria-hidden="true"></i>',
30    openedArrow : '<i class="fa fa-caret-down" aria-hidden="true"></i>',
31    maxHeight : 300,
32    multiSelect : false,
33    selectChildren : false,
34    addChildren: false,
35    clickHandler : function(target){},
36    expandHandler : function(target,expanded){},
37    checkHandler : function(target,checked){},
38    rtl: false,
39};
40
41var globalTreeIdCounter=0;
42
43(function($) {
44
45    //data inits from options
46    $.fn.DropDownTree = function(options){
47    //helpers

48    function RenderData(data, element){
49        for(var i = 0 ; i< data.length ; i++){
50            globalTreeIdCounter++;
51            var dataAttrs = " data-id=" + data[i].dataAttrs.data;
52            if(typeof data[i].dataAttrs != "undefined" && data[i].dataAttrs != null){
53                for(var d = 0 ; d<data[i].dataAttrs.length ; d++){
54                    dataAttrs += " data-"+data[i].dataAttrs[d].title+"='"+data[i].dataAttrs[d].data+"' ";
55                }
56            }
57            if(!element.is("li")){
58                element.append('<li id="TreeElement'+globalTreeIdCounter+'"'+dataAttrs+'>'+(options.multiSelect?'<i class="fa fa-square-o select-box" aria-hidden="true"></i>':'')+'<a href="'+((typeof data[i].href != "undefined" && data[i].href!=null)?data[i].href:'#')+'">'+data[i].title+'</a></li>');
59                if(data[i].data != null && typeof data[i].data !="undefined"){
60                    $("#TreeElement"+globalTreeIdCounter).append("<ul style='display:none'></ul>");
61                    $("#TreeElement"+globalTreeIdCounter).find("a").first().prepend('<span class="arrow">'+options.closedArrow+'</span>');
62                    RenderData(data[i].data, $("#TreeElement"+globalTreeIdCounter).find("ul").first());
63                 }else if(options.addChildren){
64                    $("#TreeElement"+globalTreeIdCounter).find("a").first().prepend('<span class="arrow">'+options.closedArrow+'</span>');
65                }
66            }
67            else{
68                element.find("ul").append('<li id="TreeElement'+globalTreeIdCounter+'"'+dataAttrs+'>'+(options.multiSelect?'<i class="fa fa-square-o select-box" aria-hidden="true"></i>':'')+'<a href="'+((typeof data[i].href != "undefined" && data[i].href!=null)?data[i].href:'#')+'">'+data[i].title+'</a></li>');
69                if(data[i].data != null && typeof data[i].data !="undefined"){
70                    $("#TreeElement"+globalTreeIdCounter).append("<ul style='display:none'></ul>");
71                    $("#TreeElement"+globalTreeIdCounter).find("a").first().prepend('<span class="arrow">'+options.closedArrow+'</span>');
72                    RenderData(data[i].data, $("#TreeElement"+globalTreeIdCounter).find("ul").first());
73                }else if(options.addChildren){
74                    $("#TreeElement"+globalTreeIdCounter).find("a").first().prepend('<span class="arrow">'+options.closedArrow+'</span>');
75                }
76            }
77        }
78    }
79
80    options = $.extend({}, dropDownOptions, options, {element:this});
81
82
83    //protos inits
84    $(options.element).init.prototype.clickedElement = null;
85
86	var tree = $(options.element);
87
88    //handlers binders
89    //element click handler
90    $(options.element).on("click","li",function(e){
91    	tree.init.prototype.clickedElement = $(this);
92    	options.clickHandler(tree.clickedElement, e);
93        e.stopPropagation();
94    });
95
96    //arrow click handler close/open
97    $(options.element).on("click",".arrow",function(e){
98        e.stopPropagation();
99        $(this).empty();
100        var expanded;
101        if($(this).parents("li").first().find("ul").first().is(":visible")){
102            expanded = false;
103            $(this).prepend(options.closedArrow);
104            $(this).parents("li").first().find("ul").first().hide();
105        }else{
106            expanded = true;
107            $(this).prepend(options.openedArrow);
108            $(this).parents("li").first().find("ul").first().show();
109        }
110        options.expandHandler($(this).parents("li").first(), e, expanded);
111    });
112
113
114    //select box click handler
115    $(options.element).on("click",".select-box",function(e){
116        e.stopPropagation();
117        var checked;
118        if($(this).hasClass("fa-square-o")){
119            //will select
120            checked=true;
121            $(this).removeClass("fa-square-o");
122            $(this).addClass("fa-check-square-o");
123            if(options.selectChildren){
124                $(this).parents("li").first().find(".select-box").removeClass("fa-square-o");
125                $(this).parents("li").first().find(".select-box").addClass("fa-check-square-o");
126            }
127        }else{
128            //will unselect
129            checked=false;
130            $(this).addClass("fa-square-o");
131            $(this).removeClass("fa-check-square-o");
132            if(options.selectChildren){
133                $(this).parents("li").first().find(".select-box").addClass("fa-square-o");
134                $(this).parents("li").first().find(".select-box").removeClass("fa-check-square-o");
135                $(this).parents("li").each(function(){
136                    $(this).find(".select-box").first().removeClass("fa-check-square-o");
137                    $(this).find(".select-box").first().addClass("fa-square-o");
138                });
139            }
140        }
141        options.checkHandler($(this).parents("li").first(), e, checked);
142    });
143
144    if(options.rtl){
145        $(options.element).addClass("rtl-dropdown-tree");
146        if(options.closedArrow.indexOf("fa-caret-right")>-1){
147            options.closedArrow = options.closedArrow.replace("fa-caret-right","fa-caret-left");
148        } 
149    }
150    $(options.element).append('<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span class="dropdowntree-name">'+options.title+'</span><span class="caret"></span></button>');
151    $(options.element).append('<ul style="max-height: '+options.maxHeight+'px" class="dropdown-menu" aria-labelledby="dropdownMenu1"></ul>');
152
153    RenderData(options.data,$(options.element).find("ul").first());
154
155
156
157    //protos inits
158    $(options.element).init.prototype.GetParents = function(){
159        var jqueryClickedElement = $(options.element).clickedElement;
160        return $(jqueryClickedElement).parents("li");
161    };
162
163    $(options.element).init.prototype.SetTitle = function(title){
164        $(this).find(".dropdowntree-name").text(title);
165    };
166
167    $(options.element).init.prototype.GetSelected = function(title){
168        var selectedElements = [];
169        $(this).find(".fa-check-square-o").each(function(){
170            selectedElements.push($(this).parents("li").first());
171        });
172        return selectedElements;
173    };
174
175    $(options.element).init.prototype.AddChildren = function(element, arrOfElements){
176        if(options.addChildren && $(element).find("ul").length == 0)
177            $(element).append("<ul></ul>");
178        element = $(element).find("ul").first();
179        if(element.find("li").length==0)
180            RenderData(arrOfElements, element);
181    };
182
183};
184})(jQuery);