62 |
63 |
--------------------------------------------------------------------------------
/elements/html-template-base/assets/js/front_enqueue.js:
--------------------------------------------------------------------------------
1 | console && console.log('front_enqueue_js.js is loaded');
2 |
3 | // This name is defined automatically (InlineShortcodeView_you, for Frontend editor only
4 | window.InlineShortcodeView_test_element = window.InlineShortcodeView.extend({
5 | // Render called every time when some of attributes changed.
6 | render: function () {
7 | console && console.log('InlineShortcodeView_test_element: render called.');
8 | window.InlineShortcodeView_test_element.__super__.render.call(this); // it is recommended to call parent method to avoid new versions problems.
9 |
10 | // This is example how you can re-render pieChart Doughnut in frontend editor.
11 | var $i = this.$el.find('canvas');
12 | window.vc.frame_window.TestElementRender($i);
13 |
14 | // There is a place where you can implement logic for rendering / element param changing and all other javascript logic what you can imagine.
15 | this.myCustomMethodToDebugShortcode();
16 | return this;
17 | },
18 | /*
19 | * Show shortcode mapped parameters
20 | */
21 | myCustomMethodToDebugShortcode: function () {
22 | var $i = this.model.settings; // shortcode settings from VC_MAP! also available in global variable "vc_mapper"
23 | var str = '';
24 | _.each($i, function (settings, key) {
25 | var obj = {};
26 | obj[key] = settings;
27 | str += JSON.stringify(obj) + ' ';
28 | }, this);
29 | jQuery('
This json styled info was created "on the fly" from available settings and will be visble only on front editor: ' + str + '
';
62 |
63 | return $output;
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WPBakery: Kitchen sink custom elements
2 |
3 |
4 | ## Description
5 |
6 | This WordPress plugin demonstrates how to create custom elements for the [WPBakery Page Builder](https://wpbakery.com). It includes simple and essential examples covering common use cases, making it a helpful starting point for developers extending WPBakery with their own elements.
7 |
8 | ---
9 |
10 | ## How To Install
11 |
12 | Clone this repo to your wp-content/plugins folder of your wordpress project.
13 | ```bash
14 | git clone https://github.com/wpbakery/dev-example.git
15 | ```
16 | Then go to wordpress dashboard plugins section, and activate the newly installed "WPBakery: Kitchen sink custom elements" plugin there.
17 |
18 | Alternatively, if you have WP-CLI set up, you can install and activate the plugin using a terminal command.
19 | ```bash
20 | wp plugin install https://github.com/wpbakery/dev-example/archive/refs/heads/main.zip --activate --force;
21 | wp plugin activate dev-example;
22 | ```
23 |
24 | After plugin activation, you can find all plugin elements in the "Test Elements" category in the WPBakery editor.
25 | 
26 |
27 | ## Elements
28 |
29 | ### 1. **Basic**
30 | - **Folder:** `elements/basic`
31 | - **Description:**
32 | - A simple box element with a title and content.
33 | - Customizable background and text color.
34 | - Uses standard WPBakery parameters for easy editing.
35 | - Output is styled with padding, border radius, and box shadow.
36 |
37 | ### 2. **With Custom Class**
38 | - **Folder:** `elements/with-custom-class`
39 | - **Description:**
40 | - Pricing box element with discount logic handled in a custom PHP class.
41 | - Parameters for title, base price, discount, label, background color, and features list.
42 | - Demonstrates how to extend element logic using PHP classes.
43 |
44 | ### 3. **With Custom Param**
45 | - **Folder:** `elements/with-custom-param`
46 | - **Description:**
47 | - Element featuring a custom parameter type (multi-checkboxes).
48 | - Lets users select one or more options via custom radio/checkbox UI in the WPBakery editor.
49 | - Shows how to register and use custom param types in WPBakery.
50 |
51 | ### 4. **HTML Template Base**
52 | - **Folder:** `elements/html-template-base`
53 | - **Description:**
54 | - Show how use html_template vc_map param to render output using a separate HTML template file.
55 | - Show how to use the custom js_view vc_map param.
56 |
57 | ### 5. **Container**
58 | - **Folder:** `elements/container`
59 | - **Description:**
60 | - A container element that allows nesting of other elements.
61 | - Container supports background color customization.
62 | - Demonstrates use of `as_parent` and `is_container` for nested/child elements in WPBakery.
63 |
64 | ---
65 |
--------------------------------------------------------------------------------
/elements/basic/index.php:
--------------------------------------------------------------------------------
1 | __( 'Basic', 'dev-example' ),
22 | // base should be the same as the shortcode slug.
23 | 'base' => 'wpb_dev_example_basic_element',
24 | 'description' => __( 'Box with title and content', 'dev-example' ),
25 | 'category' => __( 'Test Elements', 'dev-example' ),
26 | 'params' => [
27 | [
28 | 'type' => 'textfield',
29 | 'heading' => __( 'Title', 'dev-example' ),
30 | 'param_name' => 'text',
31 | 'value' => __( 'Welcome to My Box', 'dev-example' ),
32 | ],
33 | [
34 | 'type' => 'textarea_html',
35 | 'heading' => __( 'Content', 'dev-example' ),
36 | 'param_name' => 'content',
37 | 'value' => '
This is some example content. You can customize it using the WPBakery editor.
';
93 |
94 | return $output;
95 | }
96 | endif;
97 |
--------------------------------------------------------------------------------
/elements/html-template-base/index.php:
--------------------------------------------------------------------------------
1 | __( 'HTML template base', 'dev-example' ),
25 | // shortcode base slug [test_element].
26 | 'base' => 'test_element',
27 | // param category tab in add elements view.
28 | 'category' => __( 'Test Elements', 'dev-example' ),
29 | // element description in add elements view.
30 | 'description' => __( 'Round chat rendering in template set in html_template wpb_map.', 'dev-example' ),
31 | // don't show params window after adding.
32 | 'show_settings_on_create' => false,
33 | // Depends on ordering in list, Higher weight first.
34 | 'weight' => -5,
35 | // if you extend WPBakery within your theme then you don't need this,
36 | // WPBakery will look for shortcode template in "wp-content/themes/your_theme/wpb_templates/test_element.php" automatically.
37 | // In this example we are extending WPBakery from plugin, so we rewrite template.
38 | 'html_template' => __DIR__ . '/templates/test_element.php',
39 | // This will load extra js file in backend (when you edit page with WPBakery).
40 | // use preg replace to be sure that "space" will not break logic.
41 | 'admin_enqueue_js' => preg_replace( '/\s/', '%20', plugins_url( 'assets/js/admin_enqueue.js', __FILE__ ) ),
42 | // This will load extra css file in backend (when you edit page with WPBakery).
43 | 'admin_enqueue_css' => preg_replace( '/\s/', '%20', plugins_url( 'assets/css/admin_enqueue.css', __FILE__ ) ),
44 | // This will load extra js file in frontend editor (when you edit page with WPBakery).
45 | 'front_enqueue_js' => preg_replace( '/\s/', '%20', plugins_url( 'assets/js/front_enqueue.js', __FILE__ ) ),
46 | // This will load extra css file in frontend editor (when you edit page with WPBakery).
47 | 'front_enqueue_css' => preg_replace( '/\s/', '%20', plugins_url( 'assets/css/front_enqueue.css', __FILE__ ) ),
48 | // JS View name for backend editor. Can be used to override or add some logic for shortcodes in backend (cloning/rendering/deleting/editing).
49 | 'js_view' => 'ViewTestElement',
50 |
51 | 'params' => [
52 | [
53 | 'type' => 'textfield',
54 | 'heading' => __( 'Chart value(1-100)', 'dev-example' ),
55 | 'param_name' => 'value',
56 | 'description' => __( 'Chart value(number).', 'dev-example' ),
57 | ],
58 | [
59 | 'type' => 'textarea_html',
60 | 'holder' => 'div',
61 | 'class' => 'custom_class_for_element', // will be outputted in the backend editor.
62 | 'heading' => __( 'Content', 'dev-example' ),
63 | 'param_name' => 'content', // param_name for textarea_html must be named "content".
64 | 'value' => '
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo..
',
65 | 'description' => __( 'Dummy text for content element.', 'dev-example' ),
66 | ],
67 | ],
68 | ] );
69 | } );
70 |
--------------------------------------------------------------------------------
/elements/html-template-base/assets/js/test_element.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Chart.js
3 | * http://chartjs.org/
4 | *
5 | * Copyright 2013 Nick Downie
6 | * Released under the MIT license
7 | * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
8 | * Modified by Pavel for only Doughnut char with value label
9 | */
10 | window.Chart = function (context) {
11 |
12 | var chart = this;
13 |
14 | //Easing functions adapted from Robert Penner's easing equations
15 | //http://www.robertpenner.com/easing/
16 |
17 | var animationOptions = {
18 | linear: function (t) {
19 | return t;
20 | },
21 | easeInQuad: function (t) {
22 | return t * t;
23 | },
24 | easeOutQuad: function (t) {
25 | return -1 * t * (t - 2);
26 | },
27 | easeInOutQuad: function (t) {
28 | if ((t /= 1 / 2) < 1) return 1 / 2 * t * t;
29 | return -1 / 2 * ((--t) * (t - 2) - 1);
30 | },
31 | easeInCubic: function (t) {
32 | return t * t * t;
33 | },
34 | easeOutCubic: function (t) {
35 | return 1 * ((t = t / 1 - 1) * t * t + 1);
36 | },
37 | easeInOutCubic: function (t) {
38 | if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t;
39 | return 1 / 2 * ((t -= 2) * t * t + 2);
40 | },
41 | easeInQuart: function (t) {
42 | return t * t * t * t;
43 | },
44 | easeOutQuart: function (t) {
45 | return -1 * ((t = t / 1 - 1) * t * t * t - 1);
46 | },
47 | easeInOutQuart: function (t) {
48 | if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t * t;
49 | return -1 / 2 * ((t -= 2) * t * t * t - 2);
50 | },
51 | easeInQuint: function (t) {
52 | return 1 * (t /= 1) * t * t * t * t;
53 | },
54 | easeOutQuint: function (t) {
55 | return 1 * ((t = t / 1 - 1) * t * t * t * t + 1);
56 | },
57 | easeInOutQuint: function (t) {
58 | if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t * t * t;
59 | return 1 / 2 * ((t -= 2) * t * t * t * t + 2);
60 | },
61 | easeInSine: function (t) {
62 | return -1 * Math.cos(t / 1 * (Math.PI / 2)) + 1;
63 | },
64 | easeOutSine: function (t) {
65 | return 1 * Math.sin(t / 1 * (Math.PI / 2));
66 | },
67 | easeInOutSine: function (t) {
68 | return -1 / 2 * (Math.cos(Math.PI * t / 1) - 1);
69 | },
70 | easeInExpo: function (t) {
71 | return (t == 0) ? 1 : 1 * Math.pow(2, 10 * (t / 1 - 1));
72 | },
73 | easeOutExpo: function (t) {
74 | return (t == 1) ? 1 : 1 * (-Math.pow(2, -10 * t / 1) + 1);
75 | },
76 | easeInOutExpo: function (t) {
77 | if (t == 0) return 0;
78 | if (t == 1) return 1;
79 | if ((t /= 1 / 2) < 1) return 1 / 2 * Math.pow(2, 10 * (t - 1));
80 | return 1 / 2 * (-Math.pow(2, -10 * --t) + 2);
81 | },
82 | easeInCirc: function (t) {
83 | if (t >= 1) return t;
84 | return -1 * (Math.sqrt(1 - (t /= 1) * t) - 1);
85 | },
86 | easeOutCirc: function (t) {
87 | return 1 * Math.sqrt(1 - (t = t / 1 - 1) * t);
88 | },
89 | easeInOutCirc: function (t) {
90 | if ((t /= 1 / 2) < 1) return -1 / 2 * (Math.sqrt(1 - t * t) - 1);
91 | return 1 / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1);
92 | },
93 | easeInElastic: function (t) {
94 | var s = 1.70158;
95 | var p = 0;
96 | var a = 1;
97 | if (t == 0) return 0;
98 | if ((t /= 1) == 1) return 1;
99 | if (!p) p = 1 * .3;
100 | if (a < Math.abs(1)) {
101 | a = 1;
102 | var s = p / 4;
103 | }
104 | else var s = p / (2 * Math.PI) * Math.asin(1 / a);
105 | return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
106 | },
107 | easeOutElastic: function (t) {
108 | var s = 1.70158;
109 | var p = 0;
110 | var a = 1;
111 | if (t == 0) return 0;
112 | if ((t /= 1) == 1) return 1;
113 | if (!p) p = 1 * .3;
114 | if (a < Math.abs(1)) {
115 | a = 1;
116 | var s = p / 4;
117 | }
118 | else var s = p / (2 * Math.PI) * Math.asin(1 / a);
119 | return a * Math.pow(2, -10 * t) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) + 1;
120 | },
121 | easeInOutElastic: function (t) {
122 | var s = 1.70158;
123 | var p = 0;
124 | var a = 1;
125 | if (t == 0) return 0;
126 | if ((t /= 1 / 2) == 2) return 1;
127 | if (!p) p = 1 * (.3 * 1.5);
128 | if (a < Math.abs(1)) {
129 | a = 1;
130 | var s = p / 4;
131 | }
132 | else var s = p / (2 * Math.PI) * Math.asin(1 / a);
133 | if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
134 | return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) * .5 + 1;
135 | },
136 | easeInBack: function (t) {
137 | var s = 1.70158;
138 | return 1 * (t /= 1) * t * ((s + 1) * t - s);
139 | },
140 | easeOutBack: function (t) {
141 | var s = 1.70158;
142 | return 1 * ((t = t / 1 - 1) * t * ((s + 1) * t + s) + 1);
143 | },
144 | easeInOutBack: function (t) {
145 | var s = 1.70158;
146 | if ((t /= 1 / 2) < 1) return 1 / 2 * (t * t * (((s *= (1.525)) + 1) * t - s));
147 | return 1 / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2);
148 | },
149 | easeInBounce: function (t) {
150 | return 1 - animationOptions.easeOutBounce(1 - t);
151 | },
152 | easeOutBounce: function (t) {
153 | if ((t /= 1) < (1 / 2.75)) {
154 | return 1 * (7.5625 * t * t);
155 | } else if (t < (2 / 2.75)) {
156 | return 1 * (7.5625 * (t -= (1.5 / 2.75)) * t + .75);
157 | } else if (t < (2.5 / 2.75)) {
158 | return 1 * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375);
159 | } else {
160 | return 1 * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375);
161 | }
162 | },
163 | easeInOutBounce: function (t) {
164 | if (t < 1 / 2) return animationOptions.easeInBounce(t * 2) * .5;
165 | return animationOptions.easeOutBounce(t * 2 - 1) * .5 + 1 * .5;
166 | }
167 | };
168 |
169 | //Variables global to the chart
170 | var width = context.canvas.width;
171 | var height = context.canvas.height;
172 |
173 | //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
174 | if (window.devicePixelRatio) {
175 | context.canvas.style.width = width + "px";
176 | context.canvas.style.height = height + "px";
177 | context.canvas.height = height * window.devicePixelRatio;
178 | context.canvas.width = width * window.devicePixelRatio;
179 | context.scale(window.devicePixelRatio, window.devicePixelRatio);
180 | }
181 |
182 | this.Doughnut = function (data, options) {
183 |
184 | chart.Doughnut.defaults = {
185 | segmentShowStroke: true,
186 | segmentStrokeColor: "#fff",
187 | segmentStrokeWidth: 2,
188 | percentageInnerCutout: 50,
189 | animation: true,
190 | animationSteps: 100,
191 | animationEasing: "easeOutBounce",
192 | animateRotate: true,
193 | animateScale: false,
194 | onAnimationComplete: null
195 | };
196 |
197 | var config = (options) ? mergeChartConfig(chart.Doughnut.defaults, options) : chart.Doughnut.defaults;
198 |
199 | return new Doughnut(data, config, context);
200 |
201 | };
202 |
203 | var clear = function (c) {
204 | c.clearRect(0, 0, width, height);
205 | };
206 |
207 | var Doughnut = function (data, config, ctx) {
208 | var segmentTotal = 0;
209 |
210 | //In case we have a canvas that is not a square. Minus 5 pixels as padding round the edge.
211 | var doughnutRadius = Min([height / 2, width / 2]) - 5;
212 |
213 | var cutoutRadius = doughnutRadius * (config.percentageInnerCutout / 100);
214 | //var max=-1;
215 | for (var i = 0; i < data.length; i++) {
216 | segmentTotal += data[i].value;
217 | /*if(data[i].value>max) {
218 | max=data[i].value;
219 | }*/
220 | }
221 |
222 | animationLoop(config, null, drawPieSegments, ctx);
223 |
224 | function drawPieSegments(animationDecimal) {
225 | var cumulativeAngle = -Math.PI / 2,
226 | scaleAnimation = 1,
227 | rotateAnimation = 1;
228 | if (config.animation) {
229 | if (config.animateScale) {
230 | scaleAnimation = animationDecimal;
231 | }
232 | if (config.animateRotate) {
233 | rotateAnimation = animationDecimal;
234 | }
235 | }
236 | for (var i = 0; i < data.length; i++) {
237 | var segmentAngle = rotateAnimation * ((data[i].value / segmentTotal) * (Math.PI * 2));
238 | ctx.beginPath();
239 | ctx.arc(width / 2, height / 2, scaleAnimation * doughnutRadius, cumulativeAngle, cumulativeAngle + segmentAngle, false);
240 | ctx.arc(width / 2, height / 2, scaleAnimation * cutoutRadius, cumulativeAngle + segmentAngle, cumulativeAngle, true);
241 | ctx.closePath();
242 | ctx.fillStyle = data[i].color;
243 | ctx.fill();
244 |
245 | if (config.segmentShowStroke) {
246 | ctx.lineWidth = config.segmentStrokeWidth;
247 | ctx.strokeStyle = config.segmentStrokeColor;
248 | ctx.stroke();
249 | }
250 | cumulativeAngle += segmentAngle;
251 | }
252 |
253 | ctx.textAlign = "center";
254 | ctx.textBaseline = "middle";
255 | ctx.font = '20pt Calibri';
256 | ctx.fillStyle = '#000';
257 | //alert(max);
258 | ctx.fillText(data[0].value, width / 2, height / 2 + 4);
259 | }
260 |
261 | }
262 |
263 | function calculateOffset(val, calculatedScale, scaleHop) {
264 | var outerValue = calculatedScale.steps * calculatedScale.stepValue;
265 | var adjustedValue = val - calculatedScale.graphMin;
266 | var scalingFactor = CapValue(adjustedValue / outerValue, 1, 0);
267 | return (scaleHop * calculatedScale.steps) * scalingFactor;
268 | }
269 |
270 | function animationLoop(config, drawScale, drawData, ctx) {
271 | var animFrameAmount = (config.animation) ? 1 / CapValue(config.animationSteps, Number.MAX_VALUE, 1) : 1,
272 | easingFunction = animationOptions[config.animationEasing],
273 | percentAnimComplete = (config.animation) ? 0 : 1;
274 |
275 | if (typeof drawScale !== "function") drawScale = function () {
276 | };
277 |
278 | requestAnimFrame(animLoop);
279 |
280 | function animateFrame() {
281 | var easeAdjustedAnimationPercent = (config.animation) ? CapValue(easingFunction(percentAnimComplete), null, 0) : 1;
282 | clear(ctx);
283 | if (config.scaleOverlay) {
284 | drawData(easeAdjustedAnimationPercent);
285 | drawScale();
286 | } else {
287 | drawScale();
288 | drawData(easeAdjustedAnimationPercent);
289 | }
290 | }
291 |
292 | function animLoop() {
293 | //We need to check if the animation is incomplete (less than 1), or complete (1).
294 | percentAnimComplete += animFrameAmount;
295 | animateFrame();
296 | //Stop the loop continuing forever
297 | if (percentAnimComplete <= 1) {
298 | requestAnimFrame(animLoop);
299 | }
300 | else {
301 | if (typeof config.onAnimationComplete == "function") config.onAnimationComplete();
302 | }
303 |
304 | }
305 |
306 | }
307 |
308 | //Declare global functions to be called within this namespace here.
309 |
310 | // shim layer with setTimeout fallback
311 | var requestAnimFrame = (function () {
312 | return window.requestAnimationFrame ||
313 | window.webkitRequestAnimationFrame ||
314 | window.mozRequestAnimationFrame ||
315 | window.oRequestAnimationFrame ||
316 | window.msRequestAnimationFrame ||
317 | function (callback) {
318 | window.setTimeout(callback, 1000 / 60);
319 | };
320 | })();
321 |
322 | function calculateScale(drawingHeight, maxSteps, minSteps, maxValue, minValue, labelTemplateString) {
323 | var graphMin, graphMax, graphRange, stepValue, numberOfSteps, valueRange, rangeOrderOfMagnitude, decimalNum;
324 |
325 | valueRange = maxValue - minValue;
326 |
327 | rangeOrderOfMagnitude = calculateOrderOfMagnitude(valueRange);
328 |
329 | graphMin = Math.floor(minValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude);
330 |
331 | graphMax = Math.ceil(maxValue / (1 * Math.pow(10, rangeOrderOfMagnitude))) * Math.pow(10, rangeOrderOfMagnitude);
332 |
333 | graphRange = graphMax - graphMin;
334 |
335 | stepValue = Math.pow(10, rangeOrderOfMagnitude);
336 |
337 | numberOfSteps = Math.round(graphRange / stepValue);
338 |
339 | //Compare number of steps to the max and min for that size graph, and add in half steps if need be.
340 | while (numberOfSteps < minSteps || numberOfSteps > maxSteps) {
341 | if (numberOfSteps < minSteps) {
342 | stepValue /= 2;
343 | numberOfSteps = Math.round(graphRange / stepValue);
344 | }
345 | else {
346 | stepValue *= 2;
347 | numberOfSteps = Math.round(graphRange / stepValue);
348 | }
349 | }
350 | ;
351 |
352 | var labels = [];
353 | populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue);
354 |
355 | return {
356 | steps: numberOfSteps,
357 | stepValue: stepValue,
358 | graphMin: graphMin,
359 | labels: labels
360 |
361 | }
362 |
363 | function calculateOrderOfMagnitude(val) {
364 | return Math.floor(Math.log(val) / Math.LN10);
365 | }
366 |
367 | }
368 |
369 | //Populate an array of all the labels by interpolating the string.
370 | function populateLabels(labelTemplateString, labels, numberOfSteps, graphMin, stepValue) {
371 | if (labelTemplateString) {
372 | //Fix floating point errors by setting to fixed the on the same decimal as the stepValue.
373 | for (var i = 1; i < numberOfSteps + 1; i++) {
374 | labels.push(tmpl(labelTemplateString, {value: (graphMin + (stepValue * i)).toFixed(getDecimalPlaces(stepValue))}));
375 | }
376 | }
377 | }
378 |
379 | //Max value from array
380 | function Max(array) {
381 | return Math.max.apply(Math, array);
382 | };
383 | //Min value from array
384 | function Min(array) {
385 | return Math.min.apply(Math, array);
386 | };
387 | //Default if undefined
388 | function Default(userDeclared, valueIfFalse) {
389 | if (!userDeclared) {
390 | return valueIfFalse;
391 | } else {
392 | return userDeclared;
393 | }
394 | };
395 | //Is a number function
396 | function isNumber(n) {
397 | return !isNaN(parseFloat(n)) && isFinite(n);
398 | }
399 |
400 | //Apply cap a value at a high or low number
401 | function CapValue(valueToCap, maxValue, minValue) {
402 | if (isNumber(maxValue)) {
403 | if (valueToCap > maxValue) {
404 | return maxValue;
405 | }
406 | }
407 | if (isNumber(minValue)) {
408 | if (valueToCap < minValue) {
409 | return minValue;
410 | }
411 | }
412 | return valueToCap;
413 | }
414 |
415 | function getDecimalPlaces(num) {
416 | var numberOfDecimalPlaces;
417 | if (num % 1 != 0) {
418 | return num.toString().split(".")[1].length
419 | }
420 | else {
421 | return 0;
422 | }
423 |
424 | }
425 |
426 | function mergeChartConfig(defaults, userDefined) {
427 | var returnObj = {};
428 | for (var attrname in defaults) {
429 | returnObj[attrname] = defaults[attrname];
430 | }
431 | for (var attrname in userDefined) {
432 | returnObj[attrname] = userDefined[attrname];
433 | }
434 | return returnObj;
435 | }
436 |
437 | //Javascript micro templating by John Resig - source at http://ejohn.org/blog/javascript-micro-templating/
438 | var cache = {};
439 |
440 | function tmpl(str, data) {
441 | // Figure out if we're getting a template, or if we need to
442 | // load the template - and be sure to cache the result.
443 | var fn = !/\W/.test(str) ?
444 | cache[str] = cache[str] ||
445 | tmpl(document.getElementById(str).innerHTML) :
446 |
447 | // Generate a reusable function that will serve as a template
448 | // generator (and which will be cached).
449 | new Function("obj",
450 | "var p=[],print=function(){p.push.apply(p,arguments);};" +
451 |
452 | // Introduce the data as local variables using with(){}
453 | "with(obj){p.push('" +
454 |
455 | // Convert the template into pure JavaScript
456 | str
457 | .replace(/[\r\t\n]/g, " ")
458 | .split("<%").join("\t")
459 | .replace(/((^|%>)[^\t]*)'/g, "$1\r")
460 | .replace(/\t=(.*?)%>/g, "',$1,'")
461 | .split("\t").join("');")
462 | .split("%>").join("p.push('")
463 | .split("\r").join("\\'")
464 | + "');}return p.join('');");
465 |
466 | // Provide some basic currying to the user
467 | return data ? fn(data) : fn;
468 | };
469 | };
470 |
471 | function TestElementRender($i) {
472 | param1 = [
473 | {
474 | value: parseInt($i.attr("data-value-first")),
475 | color: $i.attr("data-value-first-color")
476 | },
477 | {
478 | value: parseInt($i.attr("data-value-second")),
479 | color: $i.attr("data-value-second-color")
480 | }
481 | ];
482 | param2 = {
483 | animation: $i.attr("data-animation") == "true",
484 | segmentShowStroke: $i.attr("data-segment-stroke-show") == "true",
485 | segmentStrokeColor: $i.attr("data-segment-stroke-color"),
486 | segmentStrokeWidth: $i.attr("data-segment-stroke-width"),
487 | percentageInnerCutout: $i.attr("data-percentage-inner-cutout")
488 | };
489 | new Chart($i.get(0).getContext("2d")).Doughnut(
490 | param1, param2
491 | );
492 | }
493 |
494 | //Define the global Chart Variable as a class.
495 | /*
496 | data-value-first="VAL1" data-value-second="VAL2" data-value-first-color="COL1" data-value-second-color="COL2" data-animation="ANIMATION" data-segment-stroke-show="SHOWSTROKE" data-segment-stroke-color="STROKECOLOR" data-segment-stroke-width="STROKEWIDTH" data-percentage-inner-cutout="INNERFILL"*/
497 | (function ($) {
498 | $(document).ready(function () {
499 | $(".piechartex").each(function (i, item) {
500 | $i = $(item);
501 | TestElementRender($i);
502 | });
503 | });
504 | })(jQuery);
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | GNU GENERAL PUBLIC LICENSE
2 | Version 2, June 1991
3 |
4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
6 | Everyone is permitted to copy and distribute verbatim copies
7 | of this license document, but changing it is not allowed.
8 |
9 | Preamble
10 |
11 | The licenses for most software are designed to take away your
12 | freedom to share and change it. By contrast, the GNU General Public
13 | License is intended to guarantee your freedom to share and change free
14 | software--to make sure the software is free for all its users. This
15 | General Public License applies to most of the Free Software
16 | Foundation's software and to any other program whose authors commit to
17 | using it. (Some other Free Software Foundation software is covered by
18 | the GNU Lesser General Public License instead.) You can apply it to
19 | your programs, too.
20 |
21 | When we speak of free software, we are referring to freedom, not
22 | price. Our General Public Licenses are designed to make sure that you
23 | have the freedom to distribute copies of free software (and charge for
24 | this service if you wish), that you receive source code or can get it
25 | if you want it, that you can change the software or use pieces of it
26 | in new free programs; and that you know you can do these things.
27 |
28 | To protect your rights, we need to make restrictions that forbid
29 | anyone to deny you these rights or to ask you to surrender the rights.
30 | These restrictions translate to certain responsibilities for you if you
31 | distribute copies of the software, or if you modify it.
32 |
33 | For example, if you distribute copies of such a program, whether
34 | gratis or for a fee, you must give the recipients all the rights that
35 | you have. You must make sure that they, too, receive or can get the
36 | source code. And you must show them these terms so they know their
37 | rights.
38 |
39 | We protect your rights with two steps: (1) copyright the software, and
40 | (2) offer you this license which gives you legal permission to copy,
41 | distribute and/or modify the software.
42 |
43 | Also, for each author's protection and ours, we want to make certain
44 | that everyone understands that there is no warranty for this free
45 | software. If the software is modified by someone else and passed on, we
46 | want its recipients to know that what they have is not the original, so
47 | that any problems introduced by others will not reflect on the original
48 | authors' reputations.
49 |
50 | Finally, any free program is threatened constantly by software
51 | patents. We wish to avoid the danger that redistributors of a free
52 | program will individually obtain patent licenses, in effect making the
53 | program proprietary. To prevent this, we have made it clear that any
54 | patent must be licensed for everyone's free use or not licensed at all.
55 |
56 | The precise terms and conditions for copying, distribution and
57 | modification follow.
58 |
59 | GNU GENERAL PUBLIC LICENSE
60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
61 |
62 | 0. This License applies to any program or other work which contains
63 | a notice placed by the copyright holder saying it may be distributed
64 | under the terms of this General Public License. The "Program", below,
65 | refers to any such program or work, and a "work based on the Program"
66 | means either the Program or any derivative work under copyright law:
67 | that is to say, a work containing the Program or a portion of it,
68 | either verbatim or with modifications and/or translated into another
69 | language. (Hereinafter, translation is included without limitation in
70 | the term "modification".) Each licensee is addressed as "you".
71 |
72 | Activities other than copying, distribution and modification are not
73 | covered by this License; they are outside its scope. The act of
74 | running the Program is not restricted, and the output from the Program
75 | is covered only if its contents constitute a work based on the
76 | Program (independent of having been made by running the Program).
77 | Whether that is true depends on what the Program does.
78 |
79 | 1. You may copy and distribute verbatim copies of the Program's
80 | source code as you receive it, in any medium, provided that you
81 | conspicuously and appropriately publish on each copy an appropriate
82 | copyright notice and disclaimer of warranty; keep intact all the
83 | notices that refer to this License and to the absence of any warranty;
84 | and give any other recipients of the Program a copy of this License
85 | along with the Program.
86 |
87 | You may charge a fee for the physical act of transferring a copy, and
88 | you may at your option offer warranty protection in exchange for a fee.
89 |
90 | 2. You may modify your copy or copies of the Program or any portion
91 | of it, thus forming a work based on the Program, and copy and
92 | distribute such modifications or work under the terms of Section 1
93 | above, provided that you also meet all of these conditions:
94 |
95 | a) You must cause the modified files to carry prominent notices
96 | stating that you changed the files and the date of any change.
97 |
98 | b) You must cause any work that you distribute or publish, that in
99 | whole or in part contains or is derived from the Program or any
100 | part thereof, to be licensed as a whole at no charge to all third
101 | parties under the terms of this License.
102 |
103 | c) If the modified program normally reads commands interactively
104 | when run, you must cause it, when started running for such
105 | interactive use in the most ordinary way, to print or display an
106 | announcement including an appropriate copyright notice and a
107 | notice that there is no warranty (or else, saying that you provide
108 | a warranty) and that users may redistribute the program under
109 | these conditions, and telling the user how to view a copy of this
110 | License. (Exception: if the Program itself is interactive but
111 | does not normally print such an announcement, your work based on
112 | the Program is not required to print an announcement.)
113 |
114 | These requirements apply to the modified work as a whole. If
115 | identifiable sections of that work are not derived from the Program,
116 | and can be reasonably considered independent and separate works in
117 | themselves, then this License, and its terms, do not apply to those
118 | sections when you distribute them as separate works. But when you
119 | distribute the same sections as part of a whole which is a work based
120 | on the Program, the distribution of the whole must be on the terms of
121 | this License, whose permissions for other licensees extend to the
122 | entire whole, and thus to each and every part regardless of who wrote it.
123 |
124 | Thus, it is not the intent of this section to claim rights or contest
125 | your rights to work written entirely by you; rather, the intent is to
126 | exercise the right to control the distribution of derivative or
127 | collective works based on the Program.
128 |
129 | In addition, mere aggregation of another work not based on the Program
130 | with the Program (or with a work based on the Program) on a volume of
131 | a storage or distribution medium does not bring the other work under
132 | the scope of this License.
133 |
134 | 3. You may copy and distribute the Program (or a work based on it,
135 | under Section 2) in object code or executable form under the terms of
136 | Sections 1 and 2 above provided that you also do one of the following:
137 |
138 | a) Accompany it with the complete corresponding machine-readable
139 | source code, which must be distributed under the terms of Sections
140 | 1 and 2 above on a medium customarily used for software interchange; or,
141 |
142 | b) Accompany it with a written offer, valid for at least three
143 | years, to give any third party, for a charge no more than your
144 | cost of physically performing source distribution, a complete
145 | machine-readable copy of the corresponding source code, to be
146 | distributed under the terms of Sections 1 and 2 above on a medium
147 | customarily used for software interchange; or,
148 |
149 | c) Accompany it with the information you received as to the offer
150 | to distribute corresponding source code. (This alternative is
151 | allowed only for noncommercial distribution and only if you
152 | received the program in object code or executable form with such
153 | an offer, in accord with Subsection b above.)
154 |
155 | The source code for a work means the preferred form of the work for
156 | making modifications to it. For an executable work, complete source
157 | code means all the source code for all modules it contains, plus any
158 | associated interface definition files, plus the scripts used to
159 | control compilation and installation of the executable. However, as a
160 | special exception, the source code distributed need not include
161 | anything that is normally distributed (in either source or binary
162 | form) with the major components (compiler, kernel, and so on) of the
163 | operating system on which the executable runs, unless that component
164 | itself accompanies the executable.
165 |
166 | If distribution of executable or object code is made by offering
167 | access to copy from a designated place, then offering equivalent
168 | access to copy the source code from the same place counts as
169 | distribution of the source code, even though third parties are not
170 | compelled to copy the source along with the object code.
171 |
172 | 4. You may not copy, modify, sublicense, or distribute the Program
173 | except as expressly provided under this License. Any attempt
174 | otherwise to copy, modify, sublicense or distribute the Program is
175 | void, and will automatically terminate your rights under this License.
176 | However, parties who have received copies, or rights, from you under
177 | this License will not have their licenses terminated so long as such
178 | parties remain in full compliance.
179 |
180 | 5. You are not required to accept this License, since you have not
181 | signed it. However, nothing else grants you permission to modify or
182 | distribute the Program or its derivative works. These actions are
183 | prohibited by law if you do not accept this License. Therefore, by
184 | modifying or distributing the Program (or any work based on the
185 | Program), you indicate your acceptance of this License to do so, and
186 | all its terms and conditions for copying, distributing or modifying
187 | the Program or works based on it.
188 |
189 | 6. Each time you redistribute the Program (or any work based on the
190 | Program), the recipient automatically receives a license from the
191 | original licensor to copy, distribute or modify the Program subject to
192 | these terms and conditions. You may not impose any further
193 | restrictions on the recipients' exercise of the rights granted herein.
194 | You are not responsible for enforcing compliance by third parties to
195 | this License.
196 |
197 | 7. If, as a consequence of a court judgment or allegation of patent
198 | infringement or for any other reason (not limited to patent issues),
199 | conditions are imposed on you (whether by court order, agreement or
200 | otherwise) that contradict the conditions of this License, they do not
201 | excuse you from the conditions of this License. If you cannot
202 | distribute so as to satisfy simultaneously your obligations under this
203 | License and any other pertinent obligations, then as a consequence you
204 | may not distribute the Program at all. For example, if a patent
205 | license would not permit royalty-free redistribution of the Program by
206 | all those who receive copies directly or indirectly through you, then
207 | the only way you could satisfy both it and this License would be to
208 | refrain entirely from distribution of the Program.
209 |
210 | If any portion of this section is held invalid or unenforceable under
211 | any particular circumstance, the balance of the section is intended to
212 | apply and the section as a whole is intended to apply in other
213 | circumstances.
214 |
215 | It is not the purpose of this section to induce you to infringe any
216 | patents or other property right claims or to contest validity of any
217 | such claims; this section has the sole purpose of protecting the
218 | integrity of the free software distribution system, which is
219 | implemented by public license practices. Many people have made
220 | generous contributions to the wide range of software distributed
221 | through that system in reliance on consistent application of that
222 | system; it is up to the author/donor to decide if he or she is willing
223 | to distribute software through any other system and a licensee cannot
224 | impose that choice.
225 |
226 | This section is intended to make thoroughly clear what is believed to
227 | be a consequence of the rest of this License.
228 |
229 | 8. If the distribution and/or use of the Program is restricted in
230 | certain countries either by patents or by copyrighted interfaces, the
231 | original copyright holder who places the Program under this License
232 | may add an explicit geographical distribution limitation excluding
233 | those countries, so that distribution is permitted only in or among
234 | countries not thus excluded. In such case, this License incorporates
235 | the limitation as if written in the body of this License.
236 |
237 | 9. The Free Software Foundation may publish revised and/or new versions
238 | of the General Public License from time to time. Such new versions will
239 | be similar in spirit to the present version, but may differ in detail to
240 | address new problems or concerns.
241 |
242 | Each version is given a distinguishing version number. If the Program
243 | specifies a version number of this License which applies to it and "any
244 | later version", you have the option of following the terms and conditions
245 | either of that version or of any later version published by the Free
246 | Software Foundation. If the Program does not specify a version number of
247 | this License, you may choose any version ever published by the Free Software
248 | Foundation.
249 |
250 | 10. If you wish to incorporate parts of the Program into other free
251 | programs whose distribution conditions are different, write to the author
252 | to ask for permission. For software which is copyrighted by the Free
253 | Software Foundation, write to the Free Software Foundation; we sometimes
254 | make exceptions for this. Our decision will be guided by the two goals
255 | of preserving the free status of all derivatives of our free software and
256 | of promoting the sharing and reuse of software generally.
257 |
258 | NO WARRANTY
259 |
260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
268 | REPAIR OR CORRECTION.
269 |
270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
278 | POSSIBILITY OF SUCH DAMAGES.
279 |
280 | END OF TERMS AND CONDITIONS
281 |
282 | How to Apply These Terms to Your New Programs
283 |
284 | If you develop a new program, and you want it to be of the greatest
285 | possible use to the public, the best way to achieve this is to make it
286 | free software which everyone can redistribute and change under these terms.
287 |
288 | To do so, attach the following notices to the program. It is safest
289 | to attach them to the start of each source file to most effectively
290 | convey the exclusion of warranty; and each file should have at least
291 | the "copyright" line and a pointer to where the full notice is found.
292 |
293 | {description}
294 | Copyright (C) {year} {fullname}
295 |
296 | This program is free software; you can redistribute it and/or modify
297 | it under the terms of the GNU General Public License as published by
298 | the Free Software Foundation; either version 2 of the License, or
299 | (at your option) any later version.
300 |
301 | This program is distributed in the hope that it will be useful,
302 | but WITHOUT ANY WARRANTY; without even the implied warranty of
303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
304 | GNU General Public License for more details.
305 |
306 | You should have received a copy of the GNU General Public License along
307 | with this program; if not, write to the Free Software Foundation, Inc.,
308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
309 |
310 | Also add information on how to contact you by electronic and paper mail.
311 |
312 | If the program is interactive, make it output a short notice like this
313 | when it starts in an interactive mode:
314 |
315 | Gnomovision version 69, Copyright (C) year name of author
316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
317 | This is free software, and you are welcome to redistribute it
318 | under certain conditions; type `show c' for details.
319 |
320 | The hypothetical commands `show w' and `show c' should show the appropriate
321 | parts of the General Public License. Of course, the commands you use may
322 | be called something other than `show w' and `show c'; they could even be
323 | mouse-clicks or menu items--whatever suits your program.
324 |
325 | You should also get your employer (if you work as a programmer) or your
326 | school, if any, to sign a "copyright disclaimer" for the program, if
327 | necessary. Here is a sample; alter the names:
328 |
329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program
330 | `Gnomovision' (which makes passes at compilers) written by James Hacker.
331 |
332 | {signature of Ty Coon}, 1 April 1989
333 | Ty Coon, President of Vice
334 |
335 | This General Public License does not permit incorporating your program into
336 | proprietary programs. If your program is a subroutine library, you may
337 | consider it more useful to permit linking proprietary applications with the
338 | library. If this is what you want to do, use the GNU Lesser General
339 | Public License instead of this License.
340 |
--------------------------------------------------------------------------------