Easy Bootstrap Shortcode / 3.6

Easy Bootstrap Shortcode v3.6

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

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

144 lines 5.7 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"><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-progress">Progress Value:</label></th>\
67	<td><input type="text" name="title" id="oscitas-progressbar-progress" value="50"/><br />\
68	<small>Enter a numeric value between 0 to 100, Default value is 50</small>\
69	</td>\
70	</tr>\
71	<tr>\
72	<th><label for="oscitas-progressbar-stripped">Stripped Progress Bar:</label></th>\
73	<td>\
74	<input type="checkbox" id="oscitas-progressbar-stripped">\
75	</td>\
76	</tr>\
77	<tr id="osc_progress_animate" style="display: none;">\
78	<th><label for="oscitas-progressbar-animated">Animated Progress Bar:</label></th>\
79	<td>\
80	<input type="checkbox" id="oscitas-progressbar-animated">\
81	</td>\
82	</tr>\
83	<tr>\
84	<th><label for="oscitas-progressbar-class">Custom Class:</label></th>\
85	<td><input type="text" name="line" id="oscitas-progressbar-class" value=""/><br />\
86	</td>\
87	</tr>\
88	</table>\
89	<p class="submit">\
90	<input type="button" id="oscitas-progressbar-submit" class="button-primary" value="Insert Button" name="submit" />\
91	</p>\
92	</div>');
93
94	var table = form.find('table');
95	form.appendTo('body').hide();
96	jQuery('#oscitas-form-progressbar table tr:visible:even').css('background', '#F0F0F0');
97	jQuery('#oscitas-form-progressbar table tr:visible:odd').css('background', '#DADADD');
98	table.find('#oscitas-progressbar-stripped').click(function(){
99	if(jQuery(this).prop('checked')){
100	jQuery('#osc_progress_animate').show();
101	} else{
102	jQuery('#osc_progress_animate').hide();
103	}
104	jQuery('#oscitas-form-progressbar table tr:visible:even').css('background', '#F0F0F0');
105	jQuery('#oscitas-form-progressbar table tr:visible:odd').css('background', '#DADADD');
106	})
107
108
109
110
111
112	// handles the click event of the submit button
113	form.find('#oscitas-progressbar-submit').click(function(){
114
115	var cusclass='',type='',value='',stripped='';
116	if(jQuery('#oscitas-progressbar-stripped').prop('checked')){
117	stripped=' barstyle="progress-striped';
118	if(jQuery('#oscitas-progressbar-animated').prop('checked')){
119	stripped +=' active';
120	}
121	stripped +='"';
122	}
123	if(table.find('#oscitas-progressbar-class').val()!=''){
124	cusclass= ' class="'+table.find('#oscitas-progressbar-class').val()+'"';
125	}
126	if(table.find('#oscitas-progressbar-style').val()!=''){
127	type= ' bartype="'+table.find('#oscitas-progressbar-style').val()+'"';
128	}
129	if(table.find('#oscitas-progressbar-progress').val()!=''){
130	value= ' value="'+table.find('#oscitas-progressbar-progress').val()+'"';
131	}
132	var shortcode = '[progressbar'+value+cusclass+type+stripped;
133
134	shortcode += ']';
135
136	// inserts the shortcode into the active editor
137	tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);
138
139	// closes fancybox
140	jQuery.fancybox.close();
141	});
142	}
143
144