PluginProbe
Easy Bootstrap Shortcode / 4.5
Easy Bootstrap Shortcode v4.5
trunk 2.4.0 2.5 3.4 3.5 3.6 3.7 4.0.0 4.4 4.5 4.5.4 5.0.0 5.0.1 5.0.2
easy-bootstrap-shortcodes / shortcode / dropdown / dropdown_plugin.js

dropdown_plugin.js in Easy Bootstrap Shortcode 4.5, at shortcode/dropdown/dropdown_plugin.js

173 lines 9.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 var dropdown={
2 title:"Button Dropdown Shortcode",
3 id :'oscitas-form-dropdown',
4 pluginName: 'dropdown'
5 };
6 (function() {
7 _create_tinyMCE_options(dropdown);
8 })();
9
10 function ebs_return_html_dropdown(pluginObj){
11 var form = jQuery('<div id="'+pluginObj.id+'" class="oscitas-container" title="'+pluginObj.title+'"><table id="oscitas-table" class="form-table ebs-default-options">\
12 <tr>\
13 <th class="main_dp_th"><label for="oscitas-dropdown-heading" >'+ebsjstrans.dropdown+' '+ebsjstrans.features+'</label></th>\
14 <td>\
15 <table class="tb_multiple_column_upper">\
16 <thead>\
17 <tr><th>'+ebsjstrans.text+'</th><th>'+ebsjstrans.size+'</th><th>'+ebsjstrans.style+'</th><th>'+ebsjstrans.split+'</th><th>'+ebsjstrans.dropup+'</th></tr>\
18 </thead>\
19 <tbody>\
20 <tr>\
21 <td><input type="text" name="dropdown-heading" id="oscitas-dropdown-heading" value="Dropdown"/></td>\
22 <td>\
23 <select name="type" id="oscitas-dropdown-size">\
24 <option value="">'+ebsjstrans.default+'</option>\
25 <option value="btn-lg">'+ebsjstrans.large+'</option>\
26 <option value="btn-sm">'+ebsjstrans.small+'</option>\
27 <option value="btn-xs">'+ebsjstrans.exsmall+'</option>\
28 </select><br />\
29 </td>\
30 <td>\
31 <select name="type" id="oscitas-dropdown-style">\
32 <option value="btn-default">'+ebsjstrans.simple+'</option>\
33 <option value="btn-primary">'+ebsjstrans.primary+'</option>\
34 <option value="btn-success">'+ebsjstrans.success+'</option>\
35 <option value="btn-info">'+ebsjstrans.information+'</option>\
36 <option value="btn-warning">'+ebsjstrans.warning+'</option>\
37 <option value="btn-danger">'+ebsjstrans.danger+'</option>\
38 <option value="btn-link">'+ebsjstrans.link+'</option>\
39 </select><br />\
40 </td>\
41 <td><input type="checkbox" name="dropdown-split" id="oscitas-dropdown-split" value="split"/></td>\
42 <td>\
43 <select name="type" id="oscitas-dropdown-dropup">\
44 <option value="dropdown">'+ebsjstrans.dropdown+'</option>\
45 <option value="dropup">'+ebsjstrans.dropup+'</option>\
46 </select></td>\
47 </tr>\
48 </tbody>\
49 </table>\
50 </td>\
51 </tr>\
52 <tr>\
53 <th class="main_dp_th"><label for="oscitas-line">Dropdown Items</label></th>\
54 <td><table class="tb_multiple_column">\
55 <thead>\
56 <tr><th>Type</th><th>'+ebsjstrans.link+'</th><th>'+ebsjstrans.title+'</th><th>Disabled</th><th>Option</th></tr>\
57 </thead>\
58 <tbody id="oscitas-append-dropdownitem">\
59 <tr class="osc_dropdown_list_item">\
60 <td><input type="hidden" class="oscitas-dropdownitem-type" value="menuitem"><span>Menu Item</span></td>\
61 <td><input type="text" name="dropdown-item-link[]" class="oscitas-dropdownitem-link" value="#"/></td>\
62 <td><input type="text" name="dropdown-item-title[]" class="oscitas-dropdownitem-title" value="Dropdown Item"/></td>\
63 <td><input type="checkbox" name="dropdown-item-disabled[]" class="oscitas-dropdownitem-disabled" value="disabled"/></td><td></td>\
64 </tr>\
65 </tbody>\
66 <tfoot>\
67 <tr><td colspan="5"><a id="osc_add_new_dditem" href="javascript:;" style="text-decoration:none;"><i class="glyphicon glyphicon-plus-sign"></i> Add New Item</a></td></tr>\
68 </tfoot>\
69 </table></td>\
70 </tr>\
71 <tr>\
72 <th><label for="oscitas-dropdown-class">Custom Class:</label></th>\
73 <td><input type="text" name="line" id="oscitas-dropdown-class" value=""/><br />\
74 </td>\
75 </tr>\
76 </table>\
77 <p class="submit ebs-default-options">\
78 <input type="button" id="oscitas-dropdown-submit" class="button-primary" value="Insert Dropdown" name="submit" />\
79 </p>\
80 <div class="pro-version-image aligncenter" style="display: none;"><img src="'+ebs_url+'shortcode/dropdown/screenshot.jpg"/></div>\
81 </div>');
82 return form;
83 }
84 function create_oscitas_dropdown(pluginObj){
85
86 var form=jQuery(pluginObj.hashId);
87
88 // creates a form to be displayed everytime the button is clicked
89 // you should achieve this using AJAX instead of direct html code like this
90
91
92 var table = form.find('table');
93
94 form.find('#osc_add_new_dditem').click(function(){
95 var item='<tr class="osc_dropdown_list_item"><td class="osc_type_change"><select name="dropdown-item-type[]" class="oscitas-dropdownitem-type"><option value="menuitem">Menu Item</option><option value="divider">Divider</option></select></td><td class="osc_hide"><input type="text" name="dropdown-item-link[]" class="oscitas-dropdownitem-link" value="#"/></td><td class="osc_hide"><input type="text" name="dropdown-item-title[]" class="oscitas-dropdownitem-title" value="Dropdown Item"/></td><td class="osc_hide"><input type="checkbox" name="dropdown-item-disabled[]" class="oscitas-dropdownitem-disabled" value="disabled"/></td><td><a class="osc_remove_dditem" href="javascript:;" style="text-decoration:none;"><i class="glyphicon glyphicon-remove"></i></a></td></tr>';
96 form.find('#oscitas-append-dropdownitem').append(item);
97
98 });
99 jQuery('.osc_remove_dditem').live('click',function(){
100 jQuery(this).parent().parent().remove();
101 })
102 jQuery('.osc_type_change').live('change',function(){
103 var par=jQuery(this).parent();
104 var item=jQuery(this);
105 var val=item.find('.oscitas-dropdownitem-type').val();
106 if(val=='divider'){
107 jQuery(par).find('.osc_hide').hide();
108 item.attr('colspan',4);
109 } else{
110 jQuery(par).find('.osc_hide').show();
111 item.attr('colspan',0);
112 }
113 })
114 // handles the click event of the submit button
115 form.find('#oscitas-dropdown-submit').click(function(){
116 var split,dropup;
117 var type,link,title,disabled;
118 var heading= jQuery('#oscitas-dropdown-heading').val();
119
120 if(jQuery('#oscitas-dropdown-split').is(":checked")==true){
121 split= jQuery('#oscitas-dropdown-split').val();
122 } else{
123 split='';
124 }
125 var size= jQuery('#oscitas-dropdown-size').val();
126 var style= jQuery('#oscitas-dropdown-style').val();
127 dropup= 'dropup="'+jQuery('#oscitas-dropdown-dropup').val()+'"';
128
129 var cusclass;
130 if(table.find('#oscitas-dropdown-class').val()!=''){
131 cusclass= ' class="'+table.find('#oscitas-dropdown-class').val()+'"';
132 }
133 else{
134 cusclass='';
135 }
136 var shortcode='';
137 shortcode ='['+$ebs_prefix+'dropdown '+dropup+cusclass+']<br/>';
138 shortcode +='['+$ebs_prefix+'dropdownhead style="'+style+'" size="'+size+'" split="'+split+'"]<br/>';
139 shortcode += heading+'<br/>';
140 shortcode +='[/'+$ebs_prefix+'dropdownhead]<br/>';
141 shortcode +='['+$ebs_prefix+'dropdownbody]<br/>';
142
143 jQuery('tr.osc_dropdown_list_item').each(function(index){
144
145 type = jQuery(this).find('.oscitas-dropdownitem-type').val();
146 link = jQuery(this).find('.oscitas-dropdownitem-link').val();
147 title = jQuery(this).find('.oscitas-dropdownitem-title').val();
148
149 if(jQuery(this).find('.oscitas-dropdownitem-disabled').is(":checked")==true){
150 disabled='disabled="'+jQuery(this).find('.oscitas-dropdownitem-disabled').val()+'"';
151 } else{
152 disabled='';
153 }
154 if(type=='divider'){
155 shortcode +='['+$ebs_prefix+'dropdownitem type="'+type+'"][/'+$ebs_prefix+'dropdownitem]<br/>';
156 } else if(type=='menuitem'){
157 shortcode +='['+$ebs_prefix+'dropdownitem type="'+type+'" link="'+link+'" '+disabled+']'+title+'[/'+$ebs_prefix+'dropdownitem]<br/>';
158 }
159
160 });
161
162 shortcode +='[/'+$ebs_prefix+'dropdownbody]<br/>';
163 shortcode +='[/'+$ebs_prefix+'dropdown]';
164
165
166 // inserts the shortcode into the active editor
167 tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);
168
169 close_dialogue(pluginObj.hashId);
170 });
171 }
172
173