xref: /plugin/tagsections/script.js (revision c2028aa01b9c1a5766b78abf6f5def3304747ca4) 
1/**
2 * DokuWiki Plugin TagSections (JavaScript Component)
3 *
4 * @license GPL 2 (http://www.gnu.org/licenses/gpl.html)
5 * @author gamma
6 */
7
8(function() {
9
10    var currentNamespace = JSINFO['namespace'];
11    var $currentButton = null;
12    var init = function() {
13
14        jQuery('form.sectiontag__form').submit(function(event){
15
16            $currentButton = jQuery(this);
17/*
18            request({listOfPages: true}, function(data) {
19                console.log(JSON.parse(data));
20            });
21/*/
22            request({availableTags: true, tagsForSection: true}, showTagSelection);
23//*/
24            return false;
25        });
26    };
27
28    var showTagSelection = function(data) {
29
30        data = JSON.parse(data);
31        var $dialog = getDialog('open').html('');
32        var $accordeon = jQuery('<div class="tagsections__accordeon"/>').appendTo($dialog);
33        data.availableTags = jQuery.extend( true, data.availableTags, data.tagsForSection);
34
35        if ( typeof data.availableTags[''] == 'undefined' ) {
36            data.availableTags[''] = {};
37        }
38
39        var needsEmptySection = true;
40        jQuery.each(data.availableTags, function(namespace, entries){
41            // namespaces
42
43            var $accordeonContent = jQuery('<div/>');
44
45            needsEmptySection = false;
46            var checked = 0;
47            jQuery.each(entries, function(tag){
48
49                var check =     typeof data.tagsForSection != 'undefined' &&
50                                typeof data.tagsForSection[namespace] != 'undefined' &&
51                                typeof data.tagsForSection[namespace][tag] != 'undefined';
52                creeateCheckBox(namespace, tag, check).appendTo($accordeonContent);
53                checked += check ? 1 : 0;
54            });
55
56            // Add an input box to add new tags
57            additionalRows(namespace, $accordeonContent);
58
59            // Add new accordeon entry
60            $accordeon.append(createHeader(namespace, checked, Object.keys(entries).length));
61            $accordeonContent.appendTo($accordeon);
62        });
63
64        if ( needsEmptySection ) {
65            $accordeon.append(createHeader(null, 0, 0));
66
67            var $content = jQuery('<div/>').appendTo($accordeon);
68            additionalRows(null, $content);
69        }
70
71        $accordeon.accordion({heightStyle: 'content',collapsible:true});
72    };
73
74    var createHeader = function(namespace, checked, entries) {
75        return jQuery('<h3/>').text(((namespace||LANG.plugins.tagsections['empty namespace']) + ' ' + checked + '/'+entries).trim() );
76    };
77
78    var creeateCheckBox = function(namespace, tag, checked) {
79        var tagName = (namespace||'').length > 0 ? namespace+':'+tag : tag;
80        var $element = jQuery('<input type="checkbox" class="tagsections__tag"/>').attr('name', tagName).val('1').attr('id', tagName).prop('checked', checked);
81        return jQuery('<label/>').attr('for', tagName).text(tag).append($element);
82    };
83
84    var additionalRows = function(namespace, $root) {
85
86        var $newTagLine = jQuery('<hr/>').appendTo($root);
87        var $element = jQuery('<input class="tagsections__tag__new"/>').attr('id', namespace + '_newTag');
88        var $button  = jQuery('<input class="edit" type="submit"/>').val(LANG.plugins.tagsections['add']);
89        var $form    = jQuery('<form/>').append($element).append($button);
90        jQuery('<label class="newTag"/>').attr('for', namespace + '_newTag').text(LANG.plugins.tagsections['new tag']).append($form).appendTo($root);
91
92        $form.submit(function(){
93
94            var tag = $element.val();
95            $newTagLine.before(creeateCheckBox(namespace, tag, true));
96            $element.val('');
97
98            return false;
99        });
100    };
101
102    var request = function(data, success) {
103        data['call'] = 'tagsections';
104        data['id'] = JSINFO['id'];
105        data['ns'] = currentNamespace;
106        data['range'] = $currentButton.find('input.sectiontag_button').attr('range');
107        return jQuery.post(DOKU_BASE + 'lib/exe/ajax.php', data, success);
108    };
109
110    var saveTags = function() {
111
112        var newTags = [];
113        var elements = getDialog().find(".tagsections__accordeon input:checked").toArray();
114        for(var i=0;typeof(elements[i])!='undefined';newTags.push(elements[i++].getAttribute('name')));
115
116        request({tags:newTags, saveTags:true}, function(){
117            request({contentOfPage:true}, function(data){
118
119                var $toRemove = $currentButton.parent().parent().children(),
120                $tmpWrap = jQuery('<div style="display:none"></div>').html(data);  // temporary wrapper
121
122                // insert the section highlight wrapper before the last element added to $tmpStore
123                $toRemove.filter(':last').before($tmpWrap);
124                // and remove the elements
125                $toRemove.detach();
126
127                // Now remove the content again
128                $tmpWrap.before($tmpWrap.children().detach());
129                // ...and remove the section highlight wrapper
130                $tmpWrap.detach();
131
132                // Close Dialog.
133                getDialog('close');
134                // Re-Init the page for edit buttons.
135                dw_page.init();
136                init();
137            });
138        });
139    };
140
141    var getDialog = function(action) {
142
143        if(!jQuery('#tagsections__dilaog').length){
144            jQuery('body').append('<div id="tagsections__dilaog" position="absolute" border=1 height="800px"><div id="tagsections__dialog_div"></div></div>');
145            jQuery( "#tagsections__dilaog" ).dialog({title:LANG.plugins.tagsections['choose tags'],
146                height:600,
147                width: Math.min(700,jQuery(window).width()-50),
148                autoOpen:true,
149                buttons:[
150                    {text:LANG.plugins.tagsections['closeDialog'],click: function() { getDialog('close') }},
151                    {text:LANG.plugins.tagsections['save'],click: saveTags},
152                    ],
153                });
154        }
155
156        if ( action ) {
157            return jQuery('#tagsections__dilaog').dialog(action);
158        }
159
160        return jQuery('#tagsections__dilaog');
161    };
162
163    jQuery(document).ready(init);
164})();