Easy Bootstrap Shortcode / 3.7

Easy Bootstrap Shortcode v3.7

easy-bootstrap-shortcodes / shortcode / progressbar / progressbar_plugin.js

progressbar_plugin.js in Easy Bootstrap Shortcode 3.7, at shortcode/progressbar/progressbar_plugin.js

152 lines 6.1 KB

Raw Download Zip

1	(function() {
2	tinymce.create('tinymce.plugins.oscitasProgressbar', {
3	init : function(ed, url) {
4	ed.addButton('oscitasprogressbar', {
5	title : 'Progressbar Shortcode',
6	image : url+'/icon.png',
7	onclick : function() {
8	create_oscitas_progressbar();
9	jQuery.fancybox({
10	'autoSize':false,
11	'autoWidth':false,
12	'fitToView':false,
13	'height':'auto',
14	'topRatio':0.1,
15	'width':800,
16	'type' : 'inline',
17	'title' : 'Progressbar Shortcode',
18	'href' : '#oscitas-form-progressbar',
19	helpers: {
20	title : {
21	type : 'over',
22	position:'top'
23	}
24	}
25	});
26	jQuery('#oscitas-form-progressbar table tr:visible:even').css('background', '#F0F0F0');
27	jQuery('#oscitas-form-progressbar table tr:visible:odd').css('background', '#DADADD');
28	}
29	});
30	},
31	createControl : function(n, cm) {
32	return null;
33	},
34	getInfo : function() {
35	return {
36	longname : "Progressbar Shortcode",
37	author : 'Oscitas Themes',
38	authorurl : 'http://www.oscitasthemes.com/',
39	infourl : 'http://www.oscitasthemes.com/',
40	version : "2.0.0"
41	};
42	}
43	});
44	tinymce.PluginManager.add('oscitasprogressbar', tinymce.plugins.oscitasProgressbar);
45	})();
46
47	function create_oscitas_progressbar(){
48	if(jQuery('#oscitas-form-progressbar').length){
49	jQuery('#oscitas-form-progressbar').remove();
50	}
51	// creates a form to be displayed everytime the button is clicked
52	// you should achieve this using AJAX instead of direct html code like this
53	var form = jQuery('<div id="oscitas-form-progressbar" class="oscitas-container"><table id="oscitas-table" class="form-table">\
54	<tr>\
55	<th><label for="oscitas-progressbar-style">Progress Bar Type:</label></th>\
56	<td><select name="type" id="oscitas-progressbar-style">\
57	<option value="">Default</option>\
58	<option value="progress-bar-success">Success</option>\
59	<option value="progress-bar-info">Information</option>\
60	<option value="progress-bar-warning">Warning</option>\
61	<option value="progress-bar-danger">Danger</option>\
62	</select><br />\
63	</td>\
64	</tr>\
65	<tr>\
66	<th><label for="oscitas-progressbar-label">Progressbar Label:</label></th>\
67	<td><input type="text" name="title" id="oscitas-progressbar-label" value=""/><br />\
68	</td>\
69	</tr>\
70	<tr>\
71	<th><label for="oscitas-progressbar-progress">Progress Value:</label></th>\
72	<td><input type="text" name="title" id="oscitas-progressbar-progress" value="50"/><br />\
73	<small>Enter a numeric value between 0 to 100, Default value is 50</small>\
74	</td>\
75	</tr>\
76	<tr>\
77	<th><label for="oscitas-progressbar-stripped">Stripped Progress Bar:</label></th>\
78	<td>\
79	<input type="checkbox" id="oscitas-progressbar-stripped">\
80	</td>\
81	</tr>\
82	<tr id="osc_progress_animate" style="display: none;">\
83	<th><label for="oscitas-progressbar-animated">Animated Progress Bar:</label></th>\
84	<td>\
85	<input type="checkbox" id="oscitas-progressbar-animated">\
86	</td>\
87	</tr>\
88	<tr>\
89	<th><label for="oscitas-progressbar-class">Custom Class:</label></th>\
90	<td><input type="text" name="line" id="oscitas-progressbar-class" value=""/><br />\
91	</td>\
92	</tr>\
93	</table>\
94	<p class="submit">\
95	<input type="button" id="oscitas-progressbar-submit" class="button-primary" value="Insert Button" name="submit" />\
96	</p>\
97	</div>');
98
99	var table = form.find('table');
100	form.appendTo('body').hide();
101	jQuery('#oscitas-form-progressbar table tr:visible:even').css('background', '#F0F0F0');
102	jQuery('#oscitas-form-progressbar table tr:visible:odd').css('background', '#DADADD');
103	table.find('#oscitas-progressbar-stripped').click(function(){
104	if(jQuery(this).prop('checked')){
105	jQuery('#osc_progress_animate').show();
106	} else{
107	jQuery('#osc_progress_animate').hide();
108	}
109	jQuery('#oscitas-form-progressbar table tr:visible:even').css('background', '#F0F0F0');
110	jQuery('#oscitas-form-progressbar table tr:visible:odd').css('background', '#DADADD');
111	})
112
113
114
115
116
117	// handles the click event of the submit button
118	form.find('#oscitas-progressbar-submit').click(function(){
119
120	var cusclass='',type='',value='',stripped='',label='';
121	if(jQuery('#oscitas-progressbar-stripped').prop('checked')){
122	stripped=' barstyle="progress-striped';
123	if(jQuery('#oscitas-progressbar-animated').prop('checked')){
124	stripped +=' active';
125	}
126	stripped +='"';
127	}
128	if(table.find('#oscitas-progressbar-class').val()!=''){
129	cusclass= ' class="'+table.find('#oscitas-progressbar-class').val()+'"';
130	}
131	if(table.find('#oscitas-progressbar-style').val()!=''){
132	type= ' bartype="'+table.find('#oscitas-progressbar-style').val()+'"';
133	}
134	if(table.find('#oscitas-progressbar-progress').val()!=''){
135	value= ' value="'+table.find('#oscitas-progressbar-progress').val()+'"';
136	}
137	if(table.find('#oscitas-progressbar-label').val()!=''){
138	label= ' label="'+table.find('#oscitas-progressbar-label').val()+'"';
139	}
140	var shortcode = '[progressbar'+value+cusclass+type+stripped+label;
141
142	shortcode += ']';
143
144	// inserts the shortcode into the active editor
145	tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);
146
147	// closes fancybox
148	jQuery.fancybox.close();
149	});
150	}
151
152